Move shorten balance to util. Add as property of generateBalance object output.

ui/app/components/eth-balance-tx-history.js

@@ -14,8 +14,10 @@ function EthBalanceComponent () {
 EthBalanceComponent.prototype.render = function () {
   var state = this.props
   var style = state.style
-  var value = formatBalance(state.value)
-  var maxWidth = state.maxWidth
+
+  const value = formatBalance(state.value)
+  var width = state.width
+
   return (
 
     h('.ether-balance', {
@@ -24,7 +26,7 @@ EthBalanceComponent.prototype.render = function () {
       h('.ether-balance-amount', {
         style: {
           display: 'inline',
-          maxWidth: maxWidth,
+          width: width,
         },
       }, this.renderBalance(value, state)),
     ])
@@ -34,11 +36,12 @@ EthBalanceComponent.prototype.render = function () {
 EthBalanceComponent.prototype.renderBalance = function (value, state) {
   if (value === 'None') return value
   var balanceObj = generateBalanceObject(value)
-
-  var balance = balanceObj.balance
+  var balance
 
   if (state.shorten) {
-    balance = shortenBalance(balance)
+    balance = balanceObj.shortBalance
+  } else {
+    balance = balanceObj.balance
   }
 
   var label = balanceObj.label
@@ -59,6 +62,7 @@ EthBalanceComponent.prototype.renderBalance = function (value, state) {
         h('div', {
           style: {
             width: '100%',
+            textAlign: 'right',
           },
         }, balance),
         h('div', {
@@ -71,17 +75,3 @@ EthBalanceComponent.prototype.renderBalance = function (value, state) {
     ])
   )
 }
-
-function shortenBalance (balance) {
-  var truncatedValue
-  var convertedBalance = parseFloat(balance)
-  if (convertedBalance > 1000000) {
-    truncatedValue = (balance / 1000000).toFixed(1)
-    return `${truncatedValue}m`
-  } else if (convertedBalance > 1000) {
-    truncatedValue = (balance / 1000).toFixed(1)
-    return `${truncatedValue}k`
-  } else {
-    return balance
-  }
-}

ui/app/components/transaction-list-item.js

@@ -73,7 +73,7 @@ TransactionListItem.prototype.render = function () {
 
       isTx ? h(EtherBalance, {
         value: txParams.value,
-        maxWidth: '55px',
+        width: '55px',
         shorten: true,
       }) : h('.flex-column'),
     ])

ui/app/util.js

@@ -85,7 +85,6 @@ function parseBalance (balance) {
   const trailingZeros = /0+$/
 
   beforeDecimal = weiString.length > 18 ? weiString.slice(0, weiString.length - 18) : '0'
-  // We don't use weiToEth here because we need to maintain decimal precision.
   afterDecimal = ('000000000000000000' + wei).slice(-18).replace(trailingZeros, '')
   if (afterDecimal === '') { afterDecimal = '0' }
   return [beforeDecimal, afterDecimal]
@@ -115,15 +114,31 @@ function formatBalance (balance, decimalsToKeep) {
   return formatted
 }
 
+
 function generateBalanceObject (formattedBalance) {
   var balance = formattedBalance.split(' ')[0]
   var label = formattedBalance.split(' ')[1]
   var beforeDecimal = balance.split('.')[0]
   var afterDecimal = balance.split('.')[1]
+  var shortBalance = shortenBalance(balance)
 
   if (beforeDecimal === '0' && afterDecimal.substr(0, 5) === '00000') { balance = '< 0.00001' }
 
-  return { balance, label }
+  return { balance, label, shortBalance }
+}
+
+function shortenBalance (balance) {
+  var truncatedValue
+  var convertedBalance = parseFloat(balance)
+  if (convertedBalance > 1000000) {
+    truncatedValue = (balance / 1000000).toFixed(1)
+    return `>${truncatedValue}m`
+  } else if (convertedBalance > 1000) {
+    truncatedValue = (balance / 1000).toFixed(1)
+    return `>${truncatedValue}k`
+  } else {
+    return balance
+  }
 }
 
 function dataSize (data) {