Equivalent values for all tokens (ETH + ERC20s) (#420)

* Fetch all token rates at once. Add option for displaying all token values.

* Ensure spinner always shows before equivalent values are ready.

* Fix up test.

common/actions/rates/actionCreators.ts

@@ -3,10 +3,10 @@ import { TypeKeys } from './constants';
 import { fetchRates, CCResponse } from './actionPayloads';
 
 export type TFetchCCRates = typeof fetchCCRates;
-export function fetchCCRates(symbol: string): interfaces.FetchCCRates {
+export function fetchCCRates(symbols: string[] = []): interfaces.FetchCCRates {
   return {
     type: TypeKeys.RATES_FETCH_CC,
-    payload: fetchRates(symbol)
+    payload: fetchRates(symbols)
   };
 }
 

common/actions/rates/actionPayloads.ts

@@ -1,31 +1,52 @@
 import { handleJSONResponse } from 'api/utils';
 
 export const rateSymbols = ['USD', 'EUR', 'GBP', 'BTC', 'CHF', 'REP', 'ETH'];
-const rateSymbolsArg = rateSymbols.join(',');
 // TODO - internationalize
 const ERROR_MESSAGE = 'Could not fetch rate data.';
 const CCApi = 'https://min-api.cryptocompare.com';
 
-const CCRates = (symbol: string) => {
+const CCRates = (symbols: string[]) => {
-  return `${CCApi}/data/price?fsym=${symbol}&tsyms=${rateSymbolsArg}`;
+  const tsyms = rateSymbols.concat(symbols).join(',');
+  return `${CCApi}/data/price?fsym=ETH&tsyms=${tsyms}`;
 };
 
 export interface CCResponse {
-  symbol: string;
+  [symbol: string]: {
-  rates: {
+    USD: number;
-    BTC: number;
     EUR: number;
     GBP: number;
+    BTC: number;
     CHF: number;
     REP: number;
     ETH: number;
   };
 }
 
-export const fetchRates = (symbol: string): Promise<CCResponse> =>
+export const fetchRates = (symbols: string[] = []): Promise<CCResponse> =>
-  fetch(CCRates(symbol))
+  fetch(CCRates(symbols))
     .then(response => handleJSONResponse(response, ERROR_MESSAGE))
-    .then(rates => ({
+    .then(rates => {
-      symbol,
+      // All currencies are in ETH right now. We'll do token -> eth -> value to
-      rates
+      // do it all in one request
-    }));
+      // to their respective rates via ETH.
+      return symbols.reduce(
+        (eqRates, sym) => {
+          eqRates[sym] = rateSymbols.reduce((symRates, rateSym) => {
+            symRates[rateSym] = 1 / rates[sym] * rates[rateSym];
+            return symRates;
+          }, {});
+          return eqRates;
+        },
+        {
+          ETH: {
+            USD: rates.USD,
+            EUR: rates.EUR,
+            GBP: rates.GBP,
+            BTC: rates.BTC,
+            CHF: rates.CHF,
+            REP: rates.REP,
+            ETH: 1
+          }
+        }
+      );
+    });

common/actions/rates/actionTypes.ts

@@ -18,6 +18,6 @@ export interface FetchCCRatesFailed {
 
 /*** Union Type ***/
 export type RatesAction =
-  | FetchCCRatesSucceeded
   | FetchCCRates
+  | FetchCCRatesSucceeded
   | FetchCCRatesFailed;

common/components/BalanceSidebar/EquivalentValues.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import BN from 'bn.js';
 import translate from 'translations';
 import { State } from 'reducers/rates';
 import { rateSymbols, TFetchCCRates } from 'actions/rates';
@@ -8,6 +9,8 @@ import Spinner from 'components/ui/Spinner';
 import UnitDisplay from 'components/ui/UnitDisplay';
 import './EquivalentValues.scss';
 
+const ALL_OPTION = 'All';
+
 interface Props {
   balance?: Balance;
   tokenBalances?: TokenBalance[];
@@ -22,17 +25,18 @@ interface CmpState {
 
 export default class EquivalentValues extends React.Component<Props, CmpState> {
   public state = {
-    currency: 'ETH'
+    currency: ALL_OPTION
   };
-  private balanceLookup = {};
+  private balanceLookup: { [key: string]: Balance['wei'] | undefined } = {};
+  private requestedCurrencies: string[] = [];
 
   public constructor(props) {
     super(props);
     this.makeBalanceLookup(props);
-  }
 
-  public componentDidMount() {
+    if (props.balance && props.tokenBalances) {
-    this.props.fetchCCRates(this.state.currency);
+      this.fetchRates(props);
+    }
   }
 
   public componentWillReceiveProps(nextProps) {
@@ -42,18 +46,27 @@ export default class EquivalentValues extends React.Component<Props, CmpState> {
       nextProps.tokenBalances !== tokenBalances
     ) {
       this.makeBalanceLookup(nextProps);
+      this.fetchRates(nextProps);
     }
   }
 
   public render() {
-    const { tokenBalances, rates, ratesError } = this.props;
+    const { balance, tokenBalances, rates, ratesError } = this.props;
     const { currency } = this.state;
-    const balance = this.balanceLookup[currency];
 
-    let values;
+    // There are a bunch of reasons why the incorrect balances might be rendered
-    if (balance && rates && rates[currency]) {
+    // while we have incomplete data that's being fetched.
-      values = rateSymbols.map(key => {
+    const isFetching =
-        if (!rates[currency][key] || key === currency) {
+      !balance ||
+      balance.isPending ||
+      !tokenBalances ||
+      Object.keys(rates).length === 0;
+
+    let valuesEl;
+    if (!isFetching && (rates[currency] || currency === ALL_OPTION)) {
+      const values = this.getEquivalentValues(currency);
+      valuesEl = rateSymbols.map(key => {
+        if (!values[key] || key === currency) {
           return null;
         }
 
@@ -63,23 +76,19 @@ export default class EquivalentValues extends React.Component<Props, CmpState> {
               {key}:
             </span>{' '}
             <span className="EquivalentValues-values-currency-value">
-              {balance.isPending ? (
+              <UnitDisplay
-                <Spinner />
+                unit={'ether'}
-              ) : (
+                value={values[key]}
-                <UnitDisplay
+                displayShortBalance={3}
-                  unit={'ether'}
+              />
-                  value={balance ? balance.muln(rates[currency][key]) : null}
-                  displayShortBalance={2}
-                />
-              )}
             </span>
           </li>
         );
       });
     } else if (ratesError) {
-      values = <h5>{ratesError}</h5>;
+      valuesEl = <h5>{ratesError}</h5>;
     } else {
-      values = (
+      valuesEl = (
         <div className="EquivalentValues-values-loader">
           <Spinner size="x3" />
         </div>
@@ -95,6 +104,7 @@ export default class EquivalentValues extends React.Component<Props, CmpState> {
             onChange={this.changeCurrency}
             value={currency}
           >
+            <option value={ALL_OPTION}>All Tokens</option>
             <option value="ETH">ETH</option>
             {tokenBalances &&
               tokenBalances.map(tk => {
@@ -111,7 +121,7 @@ export default class EquivalentValues extends React.Component<Props, CmpState> {
           </select>
         </h5>
 
-        <ul className="EquivalentValues-values">{values}</ul>
+        <ul className="EquivalentValues-values">{valuesEl}</ul>
       </div>
     );
   }
@@ -119,9 +129,6 @@ export default class EquivalentValues extends React.Component<Props, CmpState> {
   private changeCurrency = (ev: React.FormEvent<HTMLSelectElement>) => {
     const currency = ev.currentTarget.value;
     this.setState({ currency });
-    if (!this.props.rates || !this.props.rates[currency]) {
-      this.props.fetchCCRates(currency);
-    }
   };
 
   private makeBalanceLookup(props: Props) {
@@ -136,4 +143,61 @@ export default class EquivalentValues extends React.Component<Props, CmpState> {
       { ETH: props.balance && props.balance.wei }
     );
   }
+
+  private fetchRates(props: Props) {
+    // Duck out if we haven't gotten balances yet
+    if (!props.balance || !props.tokenBalances) {
+      return;
+    }
+
+    // First determine which currencies we're asking for
+    const currencies = props.tokenBalances
+      .filter(tk => !tk.balance.isZero())
+      .map(tk => tk.symbol)
+      .sort();
+
+    // If it's the same currencies as we have, skip it
+    if (currencies.join() === this.requestedCurrencies.join()) {
+      return;
+    }
+
+    // Fire off the request and save the currencies requested
+    this.props.fetchCCRates(currencies);
+    this.requestedCurrencies = currencies;
+  }
+
+  private getEquivalentValues(
+    currency: string
+  ): {
+    [key: string]: BN | undefined;
+  } {
+    // Recursively call on all currencies
+    if (currency === ALL_OPTION) {
+      return ['ETH'].concat(this.requestedCurrencies).reduce(
+        (prev, curr) => {
+          const currValues = this.getEquivalentValues(curr);
+          rateSymbols.forEach(
+            sym => (prev[sym] = prev[sym].add(currValues[sym] || new BN(0)))
+          );
+          return prev;
+        },
+        rateSymbols.reduce((prev, sym) => {
+          prev[sym] = new BN(0);
+          return prev;
+        }, {})
+      );
+    }
+
+    // Calculate rates for a single currency
+    const { rates } = this.props;
+    const balance = this.balanceLookup[currency];
+    if (!balance || !rates[currency]) {
+      return {};
+    }
+
+    return rateSymbols.reduce((prev, sym) => {
+      prev[sym] = balance ? balance.muln(rates[currency][sym]) : null;
+      return prev;
+    }, {});
+  }
 }

common/components/BalanceSidebar/index.tsx

@@ -21,7 +21,6 @@ import AccountInfo from './AccountInfo';
 import EquivalentValues from './EquivalentValues';
 import Promos from './Promos';
 import TokenBalances from './TokenBalances';
-import { State } from 'reducers/rates';
 import OfflineToggle from './OfflineToggle';
 
 interface Props {
@@ -29,8 +28,8 @@ interface Props {
   balance: Balance;
   network: NetworkConfig;
   tokenBalances: TokenBalance[];
-  rates: State['rates'];
+  rates: AppState['rates']['rates'];
-  ratesError: State['ratesError'];
+  ratesError: AppState['rates']['ratesError'];
   showNotification: TShowNotification;
   addCustomToken: TAddCustomToken;
   removeCustomToken: TRemoveCustomToken;

common/reducers/rates.ts

@@ -8,7 +8,8 @@ export interface State {
 }
 
 export const INITIAL_STATE: State = {
-  rates: {}
+  rates: {},
+  ratesError: null
 };
 
 function fetchCCRatesSucceeded(
@@ -19,7 +20,7 @@ function fetchCCRatesSucceeded(
     ...state,
     rates: {
       ...state.rates,
-      [action.payload.symbol]: action.payload.rates
+      ...action.payload
     }
   };
 }

spec/reducers/rates.spec.ts

@@ -4,8 +4,8 @@ import * as ratesActions from 'actions/rates';
 describe('rates reducer', () => {
   it('should handle RATES_FETCH_CC_SUCCEEDED', () => {
     const fakeCCResp: ratesActions.CCResponse = {
-      symbol: 'USD',
+      ETH: {
-      rates: {
+        USD: 0,
         BTC: 1,
         EUR: 2,
         GBP: 3,
@@ -14,13 +14,14 @@ describe('rates reducer', () => {
         ETH: 6
       }
     };
+
     expect(
       rates(undefined, ratesActions.fetchCCRatesSucceeded(fakeCCResp))
     ).toEqual({
       ...INITIAL_STATE,
       rates: {
         ...INITIAL_STATE.rates,
-        [fakeCCResp.symbol]: fakeCCResp.rates
+        ...fakeCCResp
       }
     });
   });