Merge pull request #188 from MetaMask/ethbalcomp

ui - redesign - ether amount component

ui/app/account-detail.js

@@ -6,11 +6,11 @@ const connect = require('react-redux').connect
 const copyToClipboard = require('copy-to-clipboard')
 const actions = require('./actions')
 const addressSummary = require('./util').addressSummary
-const formatBalance = require('./util').formatBalance
 const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 
 const AccountPanel = require('./components/account-panel')
 const Identicon = require('./components/identicon')
+const EtherBalance = require('./components/eth-balance')
 const transactionList = require('./components/transaction-list')
 const ExportAccountView = require('./components/account-export')
 
@@ -118,11 +118,12 @@ AccountDetailScreen.prototype.render = function() {
         // balance + send
         h('.flex-row.flex-space-between', [
 
-          h('div', {
+          h(EtherBalance, {
+            value: account && account.balance,
             style: {
               lineHeight: '50px',
             },
-          }, formatBalance(account && account.balance)),
+          }),
 
           h('button', {
             onClick: () => this.props.dispatch(actions.showSendPage()),

ui/app/accounts.js

@@ -5,7 +5,7 @@ const connect = require('react-redux').connect
 const extend = require('xtend')
 const Identicon = require('./components/identicon')
 const actions = require('./actions')
-const AccountPanel = require('./components/account-panel')
+const EtherBalance = require('./components/eth-balance')
 const valuesFor = require('./util').valuesFor
 const addressSummary = require('./util').addressSummary
 const formatBalance = require('./util').formatBalance
@@ -108,7 +108,10 @@ AccountsScreen.prototype.render = function() {
 
           h('span', identity.name),
           h('span.font-small', addressSummary(identity.address)),
-          h('span.font-small', formatBalance(account.balance)),
+          // h('span.font-small', formatBalance(account.balance)),
+          h(EtherBalance, {
+            value: account.balance,
+          }),
 
         ]),
 

ui/app/components/eth-balance.js

@@ -0,0 +1,40 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const parseBalance = require('../util').parseBalance
+
+module.exports = EthBalanceComponent
+
+inherits(EthBalanceComponent, Component)
+function EthBalanceComponent() {
+  Component.call(this)
+}
+
+EthBalanceComponent.prototype.render = function() {
+  var state = this.props
+  var parsedAmount = parseBalance(state.value)
+  var beforeDecimal = parsedAmount[0]
+  var afterDecimal = parsedAmount[1]
+  var value = beforeDecimal+(afterDecimal ? '.'+afterDecimal : '')
+  var style = state.style
+
+  return (
+
+    h('.ether-balance', {
+      style: style,
+    }, [
+      h('.ether-balance-amount', {
+        style: {
+          display: 'inline',
+        },
+      }, value),
+      h('.ether-balance-label', {
+        style: {
+          display: 'inline',
+          marginLeft: 6,
+        },
+      }, 'ETH'),
+    ])
+
+  )
+}

ui/app/css/index.css

@@ -385,3 +385,12 @@ input.large-input {
   letter-spacing: 0.1em;
 }
 
+/* Ether Balance Widget */
+
+.ether-balance-amount {
+  color: #F7861C;
+}
+
+.ether-balance-label {
+  color: #ABA9AA;
+}

ui/app/send.js

@@ -8,7 +8,7 @@ const util = require('./util')
 const numericBalance = require('./util').numericBalance
 const formatBalance = require('./util').formatBalance
 const addressSummary = require('./util').addressSummary
-const AccountPanel = require('./components/account-panel')
+const EtherBalance = require('./components/eth-balance')
 const ethUtil = require('ethereumjs-util')
 
 module.exports = connect(mapStateToProps)(SendTransactionScreen)
@@ -106,7 +106,10 @@ SendTransactionScreen.prototype.render = function() {
         // balance
         h('.flex-row.flex-center', [
 
-          h('div', formatBalance(account && account.balance)),
+          // h('div', formatBalance(account && account.balance)),
+          h(EtherBalance, {
+            value: account && account.balance,
+          })
 
         ]),
 

ui/app/util.js

@@ -22,6 +22,7 @@ module.exports = {
   valuesFor: valuesFor,
   addressSummary: addressSummary,
   numericBalance: numericBalance,
+  parseBalance: parseBalance,
   formatBalance: formatBalance,
   dataSize: dataSize,
   readableDate: readableDate,
@@ -65,16 +66,30 @@ function weiToEth(bn) {
   return eth
 }
 
-var decimalsToKeep = 4
+// Takes  hex, returns [beforeDecimal, afterDecimal]
-function formatBalance(balance) {
+function parseBalance(balance, decimalsToKeep) {
-  if (!balance || balance === '0x0') return 'None'
+  if (decimalsToKeep === undefined) decimalsToKeep = 4
+  if (!balance || balance === '0x0') return ['0', '']
   var wei = numericBalance(balance)
   var padded = wei.toString(10)
   var len = padded.length
-  var nonZeroIndex = padded.match(/[^0]/) && padded.match(/[^0]/).index
+  var match = padded.match(/[^0]/)
+  var nonZeroIndex = match && match.index
   var beforeDecimal = padded.substr(nonZeroIndex ? nonZeroIndex : 0, len - 18) || '0'
   var afterDecimal = padded.substr(len - 18, decimalsToKeep)
-  return `${beforeDecimal}.${afterDecimal} ETH`
+  return [beforeDecimal, afterDecimal]
+}
+
+// Takes wei hex, returns "None" or "${formattedAmount} ETH"
+function formatBalance(balance) {
+  var parsed = parseBalance(balance)
+  var beforeDecimal = parsed[0]
+  var afterDecimal = parsed[1]
+  if (beforeDecimal === '0' && afterDecimal === '') return 'None'
+  var result = beforeDecimal
+  if (afterDecimal) result += '.'+afterDecimal
+  result += ' ETH'
+  return result
 }
 
 function dataSize(data) {