1 files changed, 111 insertions, 7 deletions
diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index 19d7139bb..0332fde88 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -1,35 +1,139 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const connect = require('react-redux').connect
 const Identicon = require('./identicon')
 const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
+const selectors = require('../selectors')
+const actions = require('../actions')
+const { conversionUtil, multiplyCurrencies } = require('../conversion-util')
 
-module.exports = TokenCell
+const TokenMenuDropdown = require('./dropdowns/token-menu-dropdown.js')
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    currentCurrency: state.metamask.currentCurrency,
+    selectedTokenAddress: state.metamask.selectedTokenAddress,
+    userAddress: selectors.getSelectedAddress(state),
+    tokenExchangeRates: state.metamask.tokenExchangeRates,
+    conversionRate: state.metamask.conversionRate,
+    sidebarOpen: state.appState.sidebarOpen,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    setSelectedToken: address => dispatch(actions.setSelectedToken(address)),
+    updateTokenExchangeRate: token => dispatch(actions.updateTokenExchangeRate(token)),
+    hideSidebar: () => dispatch(actions.hideSidebar()),
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(TokenCell)
 
 inherits(TokenCell, Component)
 function TokenCell () {
   Component.call(this)
+
+  this.state = {
+    tokenMenuOpen: false,
+  }
+}
+
+TokenCell.prototype.componentWillMount = function () {
+  const {
+    updateTokenExchangeRate,
+    symbol,
+  } = this.props
+
+  updateTokenExchangeRate(symbol)
 }
 
 TokenCell.prototype.render = function () {
+  const { tokenMenuOpen } = this.state
   const props = this.props
-  const { address, symbol, string, network, userAddress } = props
+  const {
+    address,
+    symbol,
+    string,
+    network,
+    setSelectedToken,
+    selectedTokenAddress,
+    tokenExchangeRates,
+    conversionRate,
+    hideSidebar,
+    sidebarOpen,
+    currentCurrency,
+    // userAddress,
+  } = props
+
+  const pair = `${symbol.toLowerCase()}_eth`
+
+  let currentTokenToFiatRate
+  let currentTokenInFiat
+  let formattedFiat = ''
+
+  if (tokenExchangeRates[pair]) {
+    currentTokenToFiatRate = multiplyCurrencies(
+      tokenExchangeRates[pair].rate,
+      conversionRate
+    )
+    currentTokenInFiat = conversionUtil(string, {
+      fromNumericBase: 'dec',
+      fromCurrency: symbol,
+      toCurrency: currentCurrency.toUpperCase(),
+      numberOfDecimals: 2,
+      conversionRate: currentTokenToFiatRate,
+    })
+    formattedFiat = currentTokenInFiat.toString() === '0'
+      ? ''
+      : `${currentTokenInFiat} ${currentCurrency.toUpperCase()}`
+  }
+
+  const showFiat = Boolean(currentTokenInFiat) && currentCurrency.toUpperCase() !== symbol
 
   return (
-    h('li.token-cell', {
-      style: { cursor: network === '1' ? 'pointer' : 'default' },
-      onClick: this.view.bind(this, address, userAddress, network),
+    h('div.token-list-item', {
+      className: `token-list-item ${selectedTokenAddress === address ? 'token-list-item--active' : ''}`,
+      // style: { cursor: network === '1' ? 'pointer' : 'default' },
+      // onClick: this.view.bind(this, address, userAddress, network),
+      onClick: () => {
+        setSelectedToken(address)
+        selectedTokenAddress !== address && sidebarOpen && hideSidebar()
+      },
     }, [
 
       h(Identicon, {
+        className: 'token-list-item__identicon',
         diameter: 50,
         address,
         network,
       }),
 
-      h('h3', `${string || 0} ${symbol}`),
+      h('div.token-list-item__balance-ellipsis', null, [
+        h('div.token-list-item__balance-wrapper', null, [
+          h('h3.token-list-item__token-balance', `${string || 0} ${symbol}`),
 
-      h('span', { style: { flex: '1 0 auto' } }),
+          showFiat && h('div.token-list-item__fiat-amount', {
+            style: {},
+          }, formattedFiat),
+        ]),
+
+        h('i.fa.fa-ellipsis-h.fa-lg.token-list-item__ellipsis.cursor-pointer', {
+          onClick: (e) => {
+            e.stopPropagation()
+            this.setState({ tokenMenuOpen: true })
+          },
+        }),
+
+      ]),
+
+
+      tokenMenuOpen && h(TokenMenuDropdown, {
+        onClose: () => this.setState({ tokenMenuOpen: false }),
+        token: { symbol, address },
+      }),
 
       /*
       h('button', {