Get token list looking ok

ui/app/account-detail.js

@@ -249,6 +249,12 @@ AccountDetailScreen.prototype.subview = function () {
 }
 
 AccountDetailScreen.prototype.tabSections = function () {
+  var subview
+  try {
+    subview = this.props.accountDetail.subview
+  } catch (e) {
+    subview = null
+  }
 
   return h('section.tabSection', [
 
@@ -257,7 +263,7 @@ AccountDetailScreen.prototype.tabSections = function () {
         { content: 'History', key: 'history' },
         { content: 'Tokens', key: 'tokens' },
       ],
-      defaultTab: 'history',
+      defaultTab: subview || 'history',
       tabSelected: (key) => {
         this.setState({ tabSelection: key })
       },
@@ -268,8 +274,16 @@ AccountDetailScreen.prototype.tabSections = function () {
 }
 
 AccountDetailScreen.prototype.tabSwitchView = function () {
-  const tabSelection = this.state.tabSelection || 'history'
   const userAddress = this.props.address
+  var subview
+  try {
+    subview = this.props.accountDetail.subview
+    return h(TokenList, { userAddress })
+  } catch (e) {
+    subview = null
+  }
+
+  const tabSelection = this.state.tabSelection || 'history'
 
   switch (tabSelection) {
     case 'tokens':

ui/app/components/balance.js

@@ -0,0 +1,88 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const formatBalance = require('../util').formatBalance const generateBalanceObject = require('../util').generateBalanceObject
+const Tooltip = require('./tooltip.js')
+const FiatValue = require('./fiat-value.js')
+
+module.exports = EthBalanceComponent
+
+inherits(EthBalanceComponent, Component)
+function EthBalanceComponent () {
+  Component.call(this)
+}
+
+EthBalanceComponent.prototype.render = function () {
+  var props = this.props
+  let { value } = props
+  var style = props.style
+  var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true
+  value = value ? formatBalance(value, 6, needsParse) : '...'
+  var width = props.width
+
+  return (
+
+    h('.ether-balance.ether-balance-amount', {
+      style: style,
+    }, [
+      h('div', {
+        style: {
+          display: 'inline',
+          width: width,
+        },
+      }, this.renderBalance(value)),
+    ])
+
+  )
+}
+EthBalanceComponent.prototype.renderBalance = function (value) {
+  var props = this.props
+  if (value === 'None') return value
+  if (value === '...') return value
+  var balanceObj = generateBalanceObject(value, props.shorten ? 1 : 3)
+  var balance
+  var splitBalance = value.split(' ')
+  var ethNumber = splitBalance[0]
+  var ethSuffix = splitBalance[1]
+  const showFiat = 'showFiat' in props ? props.showFiat : true
+
+  if (props.shorten) {
+    balance = balanceObj.shortBalance
+  } else {
+    balance = balanceObj.balance
+  }
+
+  var label = balanceObj.label
+
+  return (
+    h(Tooltip, {
+      position: 'bottom',
+      title: `${ethNumber} ${ethSuffix}`,
+    }, h('div.flex-column', [
+      h('.flex-row', {
+        style: {
+          alignItems: 'flex-end',
+          lineHeight: '13px',
+          fontFamily: 'Montserrat Light',
+          textRendering: 'geometricPrecision',
+        },
+      }, [
+        h('div', {
+          style: {
+            width: '100%',
+            textAlign: 'right',
+          },
+        }, this.props.incoming ? `+${balance}` : balance),
+        h('div', {
+          style: {
+            color: ' #AEAEAE',
+            fontSize: '12px',
+            marginLeft: '5px',
+          },
+        }, label),
+      ]),
+
+      showFiat ? h(FiatValue, { value: props.value }) : null,
+    ]))
+  )
+}

ui/app/components/identicon.js

@@ -34,19 +34,19 @@ IdenticonComponent.prototype.render = function () {
 
 IdenticonComponent.prototype.componentDidMount = function () {
   var props = this.props
-  var address = props.address
+  const { address, network } = props
 
   if (!address) return
 
   var container = findDOMNode(this)
   var diameter = props.diameter || this.defaultDiameter
-  var img = iconFactory.iconForAddress(address, diameter, false)
+  var img = iconFactory.iconForAddress(address, diameter, false, network)
   container.appendChild(img)
 }
 
 IdenticonComponent.prototype.componentDidUpdate = function () {
   var props = this.props
-  var address = props.address
+  const { address, network } = props
 
   if (!address) return
 
@@ -58,6 +58,6 @@ IdenticonComponent.prototype.componentDidUpdate = function () {
   }
 
   var diameter = props.diameter || this.defaultDiameter
-  var img = iconFactory.iconForAddress(address, diameter, false)
+  var img = iconFactory.iconForAddress(address, diameter, false, network)
   container.appendChild(img)
 }

ui/app/components/token-cell.js

@@ -1,6 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const Identicon = require('./identicon')
 
 module.exports = TokenCell
 
@@ -15,8 +16,14 @@ TokenCell.prototype.render = function () {
   log.info({ address, symbol, string })
 
   return (
-    h('li', [
+    h('li.token-cell', [
-      h('span', `${symbol}: ${string}`),
+
+      h(Identicon, {
+        diameter: 50,
+        address,
+      }),
+
+      h('h3', `${string || 0} ${symbol}`),
     ])
   )
 }

ui/app/components/token-list.js

@@ -24,11 +24,26 @@ function TokenList () {
 TokenList.prototype.render = function () {
   const tokens = this.state.tokens
 
-  return (
+  const tokenViews = tokens.map((tokenData) => {
-    h('ol', tokens.map((tokenData) => {
     console.log('rendering token with', tokenData)
     return h(TokenCell, tokenData)
-    }))
+  })
+
+  return (
+    h('ol', [h('style', `
+
+    li.token-cell {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 10px;
+    }
+
+    li.token-cell > h3 {
+      margin-left: 12px;
+    }
+
+    `)].concat(tokenViews))
   )
 }