Merge branch 'master' into FixSvgIcons

4 files changed, 59 insertions, 139 deletions

diff --git a/ui/app/components/eth-balance-tx-history.js b/ui/app/components/eth-balance-tx-history.js
deleted file mode 100644
index c3bdc2878..000000000
--- a/ui/app/components/eth-balance-tx-history.js
+++ /dev/null
@@ -1,87 +0,0 @@
-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')
-module.exports = EthBalanceComponent
-
-inherits(EthBalanceComponent, Component)
-function EthBalanceComponent () {
-  Component.call(this)
-}
-
-EthBalanceComponent.prototype.render = function () {
-  var state = this.props
-  var style = state.style
-  var value = formatBalance(state.value)
-  var maxWidth = state.maxWidth
-  return (
-
-    h('.ether-balance', {
-      style: style,
-    }, [
-      h('.ether-balance-amount', {
-        style: {
-          display: 'inline',
-          maxWidth: maxWidth,
-        },
-      }, this.renderBalance(value, state)),
-    ])
-
-  )
-}
-EthBalanceComponent.prototype.renderBalance = function (value, state) {
-  if (value === 'None') return value
-  var balanceObj = generateBalanceObject(value)
-
-  var balance = balanceObj.balance
-
-  if (state.shorten) {
-    balance = shortenBalance(balance)
-  }
-
-  var label = balanceObj.label
-
-  return (
-    h(Tooltip, {
-      position: 'bottom',
-      title: value.split(' ')[0],
-    }, [
-      h('.flex-column', {
-        style: {
-          alignItems: 'flex-end',
-          lineHeight: '13px',
-          fontFamily: 'Montserrat Light',
-          textRendering: 'geometricPrecision',
-        },
-      }, [
-        h('div', {
-          style: {
-            width: '100%',
-          },
-        }, balance),
-        h('div', {
-          style: {
-            color: ' #AEAEAE',
-            fontSize: '12px',
-          },
-        }, label),
-      ]),
-    ])
-  )
-}
-
-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
-  }
-}
diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js
index 75b6dcb43..5f99a3e48 100644
--- a/ui/app/components/eth-balance.js
+++ b/ui/app/components/eth-balance.js
@@ -12,10 +12,11 @@ function EthBalanceComponent () {
 }
 
 EthBalanceComponent.prototype.render = function () {
-  var props = this.props
-  var style = props.style
+  var state = this.props
+  var style = state.style
 
-  const value = formatBalance(props.value)
+  const value = formatBalance(state.value)
+  var width = state.width
 
   return (
 
@@ -25,51 +26,52 @@ EthBalanceComponent.prototype.render = function () {
       h('.ether-balance-amount', {
         style: {
           display: 'inline',
+          width: width,
         },
-      }, this.renderBalance(value)),
+      }, this.renderBalance(value, state)),
     ])
 
   )
 }
-EthBalanceComponent.prototype.renderBalance = function (value) {
-  const props = this.props
+EthBalanceComponent.prototype.renderBalance = function (value, state) {
   if (value === 'None') return value
-  var balanceObj = generateBalanceObject(value)
-  var balance = balanceObj.balance
+  var balanceObj = generateBalanceObject(value, 1)
+  var balance
+
+  if (state.shorten) {
+    balance = balanceObj.shortBalance
+  } else {
+    balance = balanceObj.balance
+  }
+
   var label = balanceObj.label
-  var tagName = props.inline ? 'span' : 'div'
-  var topTag = props.inline ? 'div' : '.flex-column'
 
   return (
-
     h(Tooltip, {
       position: 'bottom',
       title: value.split(' ')[0],
     }, [
-      h(topTag, {
+      h('.flex-column', {
         style: {
           alignItems: 'flex-end',
-          lineHeight: props.fontSize || '13px',
-          fontFamily: 'Montserrat Regular',
+          lineHeight: '13px',
+          fontFamily: 'Montserrat Light',
           textRendering: 'geometricPrecision',
         },
       }, [
-        h(tagName, {
+        h('div', {
           style: {
-            color: props.labelColor || '#AEAEAE',
-            fontSize: props.fontSize || '12px',
+            width: '100%',
+            textAlign: 'right',
           },
-        }, [
-          h('div', balance),
-          h('div', {
-            style: {
-              color: '#AEAEAE',
-              fontSize: '12px',
-            },
-          }, label),
-        ]),
+        }, balance),
+        h('div', {
+          style: {
+            color: ' #AEAEAE',
+            fontSize: '12px',
+          },
+        }, label),
       ]),
     ])
-
   )
 }
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index 4fa7b897c..2314c7107 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -2,7 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 
-const EtherBalance = require('./eth-balance-tx-history')
+const EtherBalance = require('./eth-balance')
 const addressSummary = require('../util').addressSummary
 const explorerLink = require('../../lib/explorer-link')
 const CopyButton = require('./copyButton')
@@ -73,7 +73,7 @@ TransactionListItem.prototype.render = function () {
 
       isTx ? h(EtherBalance, {
         value: txParams.value,
-        maxWidth: '55px',
+        width: '55px',
         shorten: true,
       }) : h('.flex-column'),
     ])
diff --git a/ui/app/util.js b/ui/app/util.js
index b86bc6035..c04612455 100644
--- a/ui/app/util.js
+++ b/ui/app/util.js
@@ -30,8 +30,6 @@ module.exports = {
   generateBalanceObject: generateBalanceObject,
   dataSize: dataSize,
   readableDate: readableDate,
-  ethToWei: ethToWei,
-  weiToEth: weiToEth,
   normalizeToWei: normalizeToWei,
   normalizeEthStringToWei: normalizeEthStringToWei,
   normalizeNumberToWei: normalizeNumberToWei,
@@ -79,27 +77,14 @@ function numericBalance (balance) {
   return new ethUtil.BN(stripped, 16)
 }
 
-// Takes eth BN, returns BN wei
-function ethToWei (bn) {
-  var eth = new ethUtil.BN('1000000000000000000')
-  var wei = bn.mul(eth)
-  return wei
-}
-
-// Takes BN in Wei, returns BN in eth
-function weiToEth (bn) {
-  var diff = new ethUtil.BN('1000000000000000000')
-  var eth = bn.div(diff)
-  return eth
-}
-
 // Takes  hex, returns [beforeDecimal, afterDecimal]
 function parseBalance (balance) {
   var beforeDecimal, afterDecimal
-  const wei = numericBalance(balance).toString()
+  const wei = numericBalance(balance)
+  var weiString = wei.toString()
   const trailingZeros = /0+$/
 
-  beforeDecimal = wei.length > 18 ? wei.slice(0, wei.length - 18) : '0'
+  beforeDecimal = weiString.length > 18 ? weiString.slice(0, weiString.length - 18) : '0'
   afterDecimal = ('000000000000000000' + wei).slice(-18).replace(trailingZeros, '')
   if (afterDecimal === '') { afterDecimal = '0' }
   return [beforeDecimal, afterDecimal]
@@ -129,15 +114,35 @@ function formatBalance (balance, decimalsToKeep) {
   return formatted
 }
 
-function generateBalanceObject (formattedBalance) {
+
+function generateBalanceObject (formattedBalance, decimalsToKeep = 1) {
   var balance = formattedBalance.split(' ')[0]
   var label = formattedBalance.split(' ')[1]
   var beforeDecimal = balance.split('.')[0]
   var afterDecimal = balance.split('.')[1]
-
-  if (beforeDecimal === '0' && afterDecimal.substr(0, 5) === '00000') { balance = '< 0.00001' }
-
-  return { balance, label }
+  var shortBalance = shortenBalance(balance, decimalsToKeep)
+
+  if (beforeDecimal === '0' && afterDecimal.substr(0, 5) === '00000') { balance = '<1.0e-5' }
+
+  return { balance, label, shortBalance }
+}
+
+function shortenBalance (balance, decimalsToKeep = 1) {
+  var truncatedValue
+  var convertedBalance = parseFloat(balance)
+  if (convertedBalance > 1000000) {
+    truncatedValue = (balance / 1000000).toFixed(decimalsToKeep)
+    return `>${truncatedValue}m`
+  } else if (convertedBalance > 1000) {
+    truncatedValue = (balance / 1000).toFixed(decimalsToKeep)
+    return `>${truncatedValue}k`
+  } else if (convertedBalance < 1) {
+    var exponent = balance.match(/\.0*/)[0].length
+    truncatedValue = (convertedBalance * Math.pow(10, exponent)).toFixed(decimalsToKeep)
+    return `<${truncatedValue}e-${exponent}`
+  } else {
+    return balance
+  }
 }
 
 function dataSize (data) {