feature: pass down zec dollar value to dashboard components

__tests__/actions/wallet-summary.test.js

@@ -33,6 +33,7 @@ describe('WalletSummary Actions', () => {
       shielded: 5000,
       addresses: [],
       transactions: {},
+      zecPrice: 50,
     };
 
     store.dispatch(loadWalletSummarySuccess(payload));

app/components/transaction-daily.js

@@ -35,9 +35,10 @@ const Divider = styled.div`
 type Props = {
   transactionsDate: string,
   transactions: Transaction[],
+  zecPrice: number,
 };
 
-export const TransactionDailyComponent = ({ transactionsDate, transactions }: Props) => (
+export const TransactionDailyComponent = ({ transactionsDate, transactions, zecPrice }: Props) => (
   <Wrapper>
     <Day value={transactionsDate} />
     <TransactionsWrapper>
@@ -45,7 +46,13 @@ export const TransactionDailyComponent = ({ transactionsDate, transactions }: Pr
         date, type, address, amount,
       }, idx) => (
         <div>
-          <TransactionItemComponent type={type} date={date} address={address || ''} amount={amount} />
+          <TransactionItemComponent
+            type={type}
+            date={date}
+            address={address || ''}
+            amount={amount}
+            zecPrice={zecPrice}
+          />
           {idx < transactions.length - 1 && <Divider />}
         </div>
       ))}

app/components/transaction-item.js

@@ -44,13 +44,14 @@ export type Transaction = {
   date: string,
   address: string,
   amount: number,
+  zecPrice: number,
 };
 
 /* eslint-disable-next-line max-len */
 const truncateAddress = (address: string) => `${address.substr(0, 20)}...${address.substr(address.length - 10, address.length)}`;
 
 export const TransactionItemComponent = ({
-  type, date, address, amount,
+  type, date, address, amount, zecPrice,
 }: Transaction) => {
   const isReceived = type === 'receive';
   return (
@@ -71,7 +72,7 @@ export const TransactionItemComponent = ({
           color={isReceived ? theme.colors.transactionReceived : theme.colors.transactionSent}
         />
         <TextComponent
-          value={formatNumber({ value: amount, append: `${isReceived ? '+' : '-'}USD $` })}
+          value={formatNumber({ value: amount * zecPrice, append: `${isReceived ? '+' : '-'}USD $` })}
           color={theme.colors.inactiveItem}
         />
       </ColumnComponent>

app/components/wallet-summary.js

@@ -75,12 +75,12 @@ type Props = {
   total: number,
   shielded: number,
   transparent: number,
-  dollarValue: number,
+  zecPrice: number,
   addresses: string[],
 };
 
 export const WalletSummaryComponent = ({
-  total, shielded, transparent, dollarValue, addresses,
+  total, shielded, transparent, zecPrice, addresses,
 }: Props) => (
   <Wrapper>
     <DropdownComponent
@@ -95,13 +95,13 @@ export const WalletSummaryComponent = ({
     <AllAddresses value='ALL ADDRESSES' isBold />
     <ValueBox>
       <TextComponent size={theme.fontSize.zecValueBase * 2.5} value={`ZEC ${formatNumber({ value: total })}`} isBold />
-      <USDValue value={`USD $${formatNumber({ value: total * dollarValue })}`} size={theme.fontSize.zecValueBase * 2} />
+      <USDValue value={`USD $${formatNumber({ value: total * zecPrice })}`} size={theme.fontSize.zecValueBase * 2} />
     </ValueBox>
     <RowComponent>
       <ValueBox>
         <ShieldedValue value='&#9679; SHIELDED' isBold size={theme.fontSize.text * 0.8} />
         <TextComponent value={`ZEC ${formatNumber({ value: shielded })}`} isBold size={theme.fontSize.zecValueBase} />
-        <USDValue value={`USD $${formatNumber({ value: shielded * dollarValue })}`} />
+        <USDValue value={`USD $${formatNumber({ value: shielded * zecPrice })}`} />
       </ValueBox>
       <ValueBox>
         <Label value='&#9679; TRANSPARENT' isBold size={theme.fontSize.text * 0.8} />
@@ -110,7 +110,7 @@ export const WalletSummaryComponent = ({
           isBold
           size={theme.fontSize.zecValueBase}
         />
-        <USDValue value={`USD $${formatNumber({ value: transparent * dollarValue })}`} />
+        <USDValue value={`USD $${formatNumber({ value: transparent * zecPrice })}`} />
       </ValueBox>
     </RowComponent>
   </Wrapper>

app/containers/dashboard.js

@@ -6,6 +6,7 @@ import * as R from 'ramda';
 import dateFns from 'date-fns';
 import { DashboardView } from '../views/dashboard';
 import rpc from '../../services/api';
+import store from '../../config/electron-store';
 import { loadWalletSummary, loadWalletSummarySuccess, loadWalletSummaryError } from '../redux/modules/wallet';
 
 import type { AppState } from '../types/app-state';
@@ -17,7 +18,7 @@ const mapStateToProps = ({ walletSummary }: AppState) => ({
   transparent: walletSummary.transparent,
   error: walletSummary.error,
   isLoading: walletSummary.isLoading,
-  dollarValue: walletSummary.dollarValue,
+  zecPrice: walletSummary.zecPrice,
   addresses: walletSummary.addresses,
   transactions: walletSummary.transactions,
 });
@@ -53,6 +54,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
           })),
           R.groupBy(obj => dateFns.format(obj.date, 'MMM DD, YYYY')),
         )(transactions),
+        zecPrice: store.get('ZEC_DOLLAR_PRICE'),
       }),
     );
   },

app/redux/modules/wallet.js

@@ -19,12 +19,14 @@ export const loadWalletSummarySuccess = ({
   transparent,
   addresses,
   transactions,
+  zecPrice,
 }: {
   total: number,
   shielded: number,
   transparent: number,
   addresses: string[],
   transactions: { [day: string]: Transaction[] },
+  zecPrice: number,
 }) => ({
   type: LOAD_WALLET_SUMMARY_SUCCESS,
   payload: {
@@ -33,6 +35,7 @@ export const loadWalletSummarySuccess = ({
     transparent,
     addresses,
     transactions,
+    zecPrice,
   },
 });
 
@@ -47,7 +50,7 @@ export type State = {
   transparent: number,
   error: string | null,
   isLoading: boolean,
-  dollarValue: number,
+  zecPrice: number,
   addresses: [],
   transactions: { [day: string]: Transaction[] },
 };
@@ -58,7 +61,7 @@ const initialState = {
   transparent: 0,
   error: null,
   isLoading: false,
-  dollarValue: 0,
+  zecPrice: 0,
   addresses: [],
   transactions: {},
 };

app/views/dashboard.js

@@ -15,7 +15,7 @@ type Props = {
   transparent: number,
   error: string | null,
   isLoading: boolean,
-  dollarValue: number,
+  zecPrice: number,
   addresses: string[],
   transactions: { [day: string]: Transaction[] },
 };
@@ -28,7 +28,7 @@ export class Dashboard extends React.Component<Props> {
 
   render() {
     const {
-      error, isLoading, total, shielded, transparent, dollarValue, addresses, transactions,
+      error, isLoading, total, shielded, transparent, zecPrice, addresses, transactions,
     } = this.props;
 
     const days = Object.keys(transactions);
@@ -47,11 +47,11 @@ export class Dashboard extends React.Component<Props> {
               total={total}
               shielded={shielded}
               transparent={transparent}
-              dollarValue={dollarValue}
+              zecPrice={zecPrice}
               addresses={addresses}
             />
             {days.map(day => (
-              <TransactionDailyComponent transactionsDate={day} transactions={transactions[day]} />
+              <TransactionDailyComponent transactionsDate={day} transactions={transactions[day]} zecPrice={zecPrice} />
             ))}
           </div>
         )}