Adds USD to token list.

ui/app/components/token-cell.js

@@ -6,18 +6,22 @@ const Identicon = require('./identicon')
 const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
 const selectors = require('../selectors')
 const actions = require('../actions')
+const { conversionUtil } = require('../conversion-util')
 
 function mapStateToProps (state) {
   return {
     network: state.metamask.network,
     selectedTokenAddress: state.metamask.selectedTokenAddress,
     userAddress: selectors.getSelectedAddress(state),
+    tokenExchangeRates: state.metamask.tokenExchangeRates,
+    ethToUSDRate: state.metamask.conversionRate,
   }
 }
 
 function mapDispatchToProps (dispatch) {
   return {
     setSelectedToken: address => dispatch(actions.setSelectedToken(address)),
+    updateTokenExchangeRate: token => dispatch(actions.updateTokenExchangeRate(token)),
   }
 }
 
@@ -28,6 +32,15 @@ function TokenCell () {
   Component.call(this)
 }
 
+TokenCell.prototype.componentWillMount = function () {
+  const {
+    updateTokenExchangeRate,
+    symbol,
+  } = this.props
+
+  updateTokenExchangeRate(symbol)
+}
+
 TokenCell.prototype.render = function () {
   const props = this.props
   const {
@@ -37,9 +50,30 @@ TokenCell.prototype.render = function () {
     network,
     setSelectedToken,
     selectedTokenAddress,
+    tokenExchangeRates,
+    ethToUSDRate,
     // userAddress,
   } = props
   
+  const pair = `${symbol.toLowerCase()}_eth`;
+
+  let currentTokenToEthRate;
+  let currentTokenInUSD;
+  let formattedUSD = ''
+
+  if (tokenExchangeRates[pair]) {
+    currentTokenToEthRate = tokenExchangeRates[pair].rate;
+    currentTokenInUSD = conversionUtil(string, {
+      fromNumericBase: 'dec',
+      fromCurrency: symbol,
+      toCurrency: 'USD',
+      numberOfDecimals: 2,
+      conversionRate: currentTokenToEthRate,
+      ethToUSDRate,
+    })
+    formattedUSD = `$${currentTokenInUSD} USD`;
+  }
+
   return (
     h('div.token-list-item', {
       className: `token-list-item ${selectedTokenAddress === address ? 'token-list-item--active' : ''}`,
@@ -58,9 +92,9 @@ TokenCell.prototype.render = function () {
       h('h.token-list-item__balance-wrapper', null, [
         h('h3.token-list-item__token-balance', `${string || 0} ${symbol}`),
 
-        // h('div.token-list-item__fiat-amount', {
-        //   style: {},
-        // }, '210 FPO'),
+        h('div.token-list-item__fiat-amount', {
+          style: {},
+        }, formattedUSD),
       ]),
 
       /*

ui/app/conversion-util.js

@@ -13,6 +13,7 @@
 * @param {string} [options.fromDenomination = 'WEI'] The denomination of the passed value
 * @param {number} [options.numberOfDecimals] The desired number of in the result
 * @param {number} [options.conversionRate] The rate to use to make the fromCurrency -> toCurrency conversion
+* @param {number} [options.ethToUSDRate] If present, a second conversion - at ethToUSDRate - happens after conversionRate is applied.
 * @returns {(number | string | BN)}
 *
 * The utility passes value along with the options as a single object to the `converter` function.
@@ -80,6 +81,7 @@ const converter = R.pipe(
   whenPropApplySetterMap('fromNumericBase', toBigNumber),
   whenPropApplySetterMap('fromDenomination', toNormalizedDenomination),
   whenPredSetWithPropAndSetter(fromAndToCurrencyPropsNotEqual, 'conversionRate', convert),
+  whenPredSetWithPropAndSetter(R.prop('ethToUSDRate'), 'ethToUSDRate', convert),
   whenPredSetWithPropAndSetter(R.prop('numberOfDecimals'), 'numberOfDecimals', round),
   whenPropApplySetterMap('toNumericBase', baseChange),
   R.view(R.lensProp('value'))
@@ -93,6 +95,7 @@ const conversionUtil = (value, {
   fromDenomination,
   numberOfDecimals,
   conversionRate,
+  ethToUSDRate,
 }) => converter({
   fromCurrency,
   toCurrency,
@@ -101,6 +104,7 @@ const conversionUtil = (value, {
   fromDenomination,
   numberOfDecimals,
   conversionRate,
+  ethToUSDRate,
   value,
 });