extracted balance component and renders to the format, also wired in the account name

ui/app/components/balance-component.js

@@ -0,0 +1,89 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+const { formatBalance, generateBalanceObject } = require('../util')
+
+module.exports = BalanceComponent
+
+inherits(BalanceComponent, Component)
+function BalanceComponent () {
+  Component.call(this)
+}
+
+BalanceComponent.prototype.render = function () {
+  const props = this.props
+  const { balanceValue } = props
+  const needsParse = 'needsParse' in props ? props.needsParse : true
+  const formattedBalance = balanceValue ? formatBalance(balanceValue, 6, needsParse) : '...'
+
+  return h('div.balance-container', {}, [
+    // laptop: 50px 50px
+    // mobile: 100px 100px
+
+    // TODO: balance icon needs to be passed in
+    h('img.balance-icon', {
+      src: '../images/eth_logo.svg',
+      style: {},
+    }),
+
+    this.renderBalance(formattedBalance),
+  ])
+}
+
+BalanceComponent.prototype.renderBalance = function (formattedBalance) {
+  const props = this.props
+  const { shorten } = props
+  const showFiat = 'showFiat' in props ? props.showFiat : true
+
+  if (formattedBalance === 'None' || formattedBalance === '...') {
+    return h('div.flex-column.balance-display', {}, [
+      h('div.token-amount', {
+        style: {},
+      }, formattedBalance),
+    ])
+  }
+
+  var balanceObj = generateBalanceObject(formattedBalance, shorten ? 1 : 3)
+  var balanceValue = shorten ? balanceObj.shortBalance : balanceObj.balance
+
+  var label = balanceObj.label
+
+  // laptop: 5vw?
+  // phone: 50vw?
+  return h('div.flex-column.balance-display', {}, [
+    h('div.token-amount', {
+      style: {},
+    }, `${balanceValue} ${label}`),
+
+    showFiat ? this.renderFiatValue(formattedBalance) : null,
+  ])
+}
+
+BalanceComponent.prototype.renderFiatValue = function (formattedBalance) {
+
+  const props = this.props
+  const { conversionRate, currentCurrency } = props
+
+  if (formattedBalance === 'None') return formattedBalance
+  var fiatDisplayNumber
+  var splitBalance = formattedBalance.split(' ')
+
+  if (conversionRate !== 0) {
+    fiatDisplayNumber = (Number(splitBalance[0]) * conversionRate).toFixed(2)
+  } else {
+    fiatDisplayNumber = 'N/A'
+  }
+
+  return fiatDisplay(fiatDisplayNumber, currentCurrency)
+}
+
+function fiatDisplay (fiatDisplayNumber, fiatSuffix) {
+  if (fiatDisplayNumber !== 'N/A') {
+    return h('div.fiat-amount', {
+      style: {},
+    }, `${fiatDisplayNumber} ${fiatSuffix}`)
+  } else {
+    return h('div')
+  }
+}

ui/app/components/tx-view.js

@@ -1,11 +1,15 @@
 const Component = require('react').Component
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
+const ethUtil = require('ethereumjs-util')
 const inherits = require('util').inherits
 const actions = require('../actions')
 // slideout menu
 const WalletView = require('./wallet-view')
 
+// balance component
+const BalanceComponent = require('./balance-component')
+
 const Identicon = require('./identicon')
 // const AccountDropdowns = require('./account-dropdowns').AccountDropdowns
 // const Content = require('./wallet-content-display')
@@ -15,6 +19,11 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView)
 function mapStateToProps (state) {
   return {
     sidebarOpen: state.appState.sidebarOpen,
+    identities: state.metamask.identities,
+    accounts: state.metamask.accounts,
+    address: state.metamask.selectedAddress,
+    conversionRate: state.metamask.conversionRate,
+    currentCurrency: state.metamask.currentCurrency,
   }
 }
 
@@ -40,7 +49,13 @@ function TxView () {
 }
 
 TxView.prototype.render = function () {
-  const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684' // TODO: remove fake address
+
+  var props = this.props
+  var selected = props.address || Object.keys(props.accounts)[0]
+  var checksumAddress = selected && ethUtil.toChecksumAddress(selected)
+  var identity = props.identities[selected]
+  var account = props.accounts[selected]
+  const { conversionRate, currentCurrency } = props
 
   return h('div.tx-view.flex-column', {
     style: {},
@@ -75,9 +90,9 @@ TxView.prototype.render = function () {
       ]),
 
       h('span.account-name', {
-        style: {}
+        style: {},
       }, [
-        'Account 1'
+        identity.name,
       ]),
 
     ]),
@@ -88,25 +103,13 @@ TxView.prototype.render = function () {
       style: {},
     }, [
 
-      // laptop: 50px 50px
-      // mobile: 100px 100px
-      h('img.hero-balance-icon', {
-        src: '../images/eth_logo.svg',
-        style: {}
+      h(BalanceComponent, {
+        balanceValue: account && account.balance,
+        conversionRate,
+        currentCurrency,
+        style: {},
       }),
 
-      // laptop: 5vw?
-      // phone: 50vw?
-      h('div.flex-column.hero-balance-display', {}, [
-        h('div.token-amount', {
-          style: {}
-        }, '1001.124 ETH'),
-
-        h('div.fiat-amount', {
-          style: {}
-        }, '$300,000 USD'),
-      ]),
-
       // laptop: 10vw?
       // phone: 75vw?
       h('div.flex-row.flex-center.hero-balance-buttons', {

ui/app/css/itcss/components/hero-balance.scss

@@ -20,7 +20,25 @@ $break-large: 576px;
     margin: 2.8em 0.9em 0.8em 0.9em;
   }
 
-  .hero-balance-display {
+  .balance-container {
+
+    display: flex;
+    margin: 0;
+    justify-content: flex-start;
+    align-items: center;
+
+    @media screen and (max-width: $break-small) {
+      flex-direction: column;
+    }
+
+    @media screen and (min-width: $break-large) {
+      flex-direction: row;
+      flex-grow: 3;
+    }
+
+  }
+
+  .balance-display {
 
     @media screen and (max-width: $break-small) {
       text-align: center;
@@ -38,7 +56,6 @@ $break-large: 576px;
     }
 
     @media screen and (min-width: $break-large) {
-      flex-grow: 3;
       margin-left: 3%;
       justify-content: flex-start;
       align-items: flex-start;
@@ -56,7 +73,7 @@ $break-large: 576px;
 
   }
 
-  .hero-balance-icon {
+  .balance-icon {
     border-radius: 25px;
     width: 45px;
     height: 45px;