Show token balance and identicon

ui/app/components/balance-component.js

@@ -3,6 +3,7 @@ const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const TokenBalance = require('./token-balance')
+const Identicon = require('./identicon')
 
 const { formatBalance, generateBalanceObject } = require('../util')
 
@@ -10,11 +11,13 @@ module.exports = connect(mapStateToProps)(BalanceComponent)
 
 function mapStateToProps (state) {
   const accounts = state.metamask.accounts
+  const network = state.metamask.network
   const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
   const account = accounts[selectedAddress]
 
   return {
     account,
+    network,
     conversionRate: state.metamask.conversionRate,
     currentCurrency: state.metamask.currentCurrency,
   }
@@ -27,15 +30,19 @@ function BalanceComponent () {
 
 BalanceComponent.prototype.render = function () {
   const props = this.props
-  // const { balanceValue } = props
-  const { token } = props
+  const { token, network } = props
 
   return h('div.balance-container', {}, [
 
     // TODO: balance icon needs to be passed in
-    h('img.balance-icon', {
-      src: '../images/eth_logo.svg',
-      style: {},
+    // h('img.balance-icon', {
+    //   src: '../images/eth_logo.svg',
+    //   style: {},
+    // }),
+    h(Identicon, {
+      diameter: 45,
+      address: token && token.address,
+      network,
     }),
 
     token ? this.renderTokenBalance() : this.renderBalance(),

ui/app/components/identicon.js

@@ -18,23 +18,35 @@ function IdenticonComponent () {
 
 IdenticonComponent.prototype.render = function () {
   var props = this.props
-  const { className = '' } = props
+  const { className = '', address } = props
   var diameter = props.diameter || this.defaultDiameter
-  return (
-    h('div', {
-      className: `${className} identicon`,
-      key: 'identicon-' + this.props.address,
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: diameter,
-        width: diameter,
-        borderRadius: diameter / 2,
-        overflow: 'hidden',
-      },
-    })
-  )
+
+  return address
+    ? (
+      h('div', {
+        className: `${className} identicon`,
+        key: 'identicon-' + address,
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: diameter,
+          width: diameter,
+          borderRadius: diameter / 2,
+          overflow: 'hidden',
+        },
+      })
+    )
+    : (
+      h('img.balance-icon', {
+        src: '../images/eth_logo.svg',
+        style: {
+          height: diameter,
+          width: diameter,
+          borderRadius: diameter / 2,
+        },
+      })
+    )
 }
 
 IdenticonComponent.prototype.componentDidMount = function () {

ui/app/components/token-balance.js

@@ -90,9 +90,9 @@ TokenBalance.prototype.componentDidUpdate = function (nextProps) {
 }
 
 TokenBalance.prototype.updateBalance = function (tokens = []) {
-  const [{ string }] = tokens
+  const [{ string, symbol }] = tokens
   this.setState({
-    balance: string,
+    balance: `${string} ${symbol}`,
     isLoading: false,
   })
 }

ui/app/components/token-cell.js

@@ -58,9 +58,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: {},
+        // }, '210 FPO'),
       ]),
 
       /*

ui/app/components/tx-list.js

@@ -27,7 +27,6 @@ const contentDivider = h('div.tx-list-content-divider', {
 TxList.prototype.render = function () {
 
   const { txsToRender } = this.props
-
   console.log('transactions to render', txsToRender)
 
   return h('div.flex-column.tx-list-container', {}, [

ui/app/components/tx-view.js

@@ -9,7 +9,6 @@ const selectors = require('../selectors')
 const BalanceComponent = require('./balance-component')
 const TxList = require('./tx-list')
 const Identicon = require('./identicon')
-const TokenBalance = require('./token-balance')
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView)
 
@@ -18,11 +17,11 @@ function mapStateToProps (state) {
 
   const identities = state.metamask.identities
   const accounts = state.metamask.accounts
+  const network = state.metamask.network
   const selectedTokenAddress = state.metamask.selectedTokenAddress
   const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
   const checksumAddress = selectedAddress && ethUtil.toChecksumAddress(selectedAddress)
   const identity = identities[selectedAddress]
-  const account = accounts[selectedAddress]
 
   return {
     sidebarOpen,
@@ -31,7 +30,7 @@ function mapStateToProps (state) {
     selectedTokenAddress,
     selectedToken: selectors.getSelectedToken(state),
     identity,
-    account,
+    network,
   }
 }
 
@@ -50,40 +49,55 @@ function TxView () {
 }
 
 TxView.prototype.renderHeroBalance = function () {
-  const {account, selectedToken, showModal, showSendPage } = this.props
+  const { selectedToken } = this.props
 
   return h('div.hero-balance', {}, [
 
-    h(BalanceComponent, {
-      balanceValue: account && account.balance,
-      token: selectedToken,
-    }),
+    h(BalanceComponent, { token: selectedToken }),
 
-    h('div.flex-row.flex-center.hero-balance-buttons', {}, [
-      h('button.btn-clear', {
-        style: {
-          textAlign: 'center',
-        },
-        onClick: () => showModal({
-          name: 'BUY',
-        }),
-      }, 'BUY'),
-
-      h('button.btn-clear', {
-        style: {
-          textAlign: 'center',
-          marginLeft: '0.8em',
-        },
-        onClick: showSendPage,
-      }, 'SEND'),
-
-    ]),
+    this.renderButtons(),
   ])
 }
 
-TxView.prototype.render = function () {
+TxView.prototype.renderButtons = function () {
+  const {selectedToken, showModal, showSendPage } = this.props
 
-  const { selectedAddress, identity } = this.props
+  return !selectedToken
+    ? (
+      h('div.flex-row.flex-center.hero-balance-buttons', [
+        h('button.btn-clear', {
+          style: {
+            textAlign: 'center',
+          },
+          onClick: () => showModal({
+            name: 'BUY',
+          }),
+        }, 'BUY'),
+
+        h('button.btn-clear', {
+          style: {
+            textAlign: 'center',
+            marginLeft: '0.8em',
+          },
+          onClick: showSendPage,
+        }, 'SEND'),
+      ])
+    )
+    : (
+      h('div.flex-row.flex-center.hero-balance-buttons', [
+        h('button.btn-clear', {
+          style: {
+            textAlign: 'center',
+            marginLeft: '0.8em',
+          },
+          onClick: showSendPage,
+        }, 'SEND'),
+      ])
+    )
+}
+
+TxView.prototype.render = function () {
+  const { selectedAddress, identity, network } = this.props
 
   return h('div.tx-view.flex-column', {
     style: {},
@@ -113,6 +127,7 @@ TxView.prototype.render = function () {
         h(Identicon, {
           diameter: 24,
           address: selectedAddress,
+          network,
         }),
       ]),
 

ui/app/components/wallet-view.js

@@ -49,7 +49,7 @@ WalletView.prototype.renderWalletBalance = function () {
   return h('div', { className }, [
     h('div.wallet-balance',
       {
-        onClick: () => unsetSelectedToken(),
+        onClick: unsetSelectedToken,
       },
       [
         h(BalanceComponent, {