Merge pull request #412 from MetaMask/ethBalance

Add method to deal with small decimals

ui/app/components/eth-balance.js

@@ -2,7 +2,8 @@ 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)
@@ -14,7 +15,6 @@ EthBalanceComponent.prototype.render = function () {
   var state = this.props
   var style = state.style
   var value = formatBalance(state.value)
-
   return (
 
     h('.ether-balance', {
@@ -30,18 +30,22 @@ EthBalanceComponent.prototype.render = function () {
   )
 }
 EthBalanceComponent.prototype.renderBalance = function (value) {
-
   if (value === 'None') return value
+  var balanceObj = generateBalanceObject(value)
 
-  var balance = value.split(' ')[0]
+  var balance = balanceObj.balance
-  var label = value.split(' ')[1]
+  var label = balanceObj.label
 
   return (
+    h(Tooltip, {
+      position: 'bottom',
+      title: value.split(' ')[0],
+    }, [
       h('.flex-column', {
         style: {
           alignItems: 'flex-end',
           lineHeight: '13px',
-        fontFamily: 'Montserrat Thin',
+          fontFamily: 'Montserrat Light',
           textRendering: 'geometricPrecision',
         },
       }, [
@@ -52,6 +56,7 @@ EthBalanceComponent.prototype.renderBalance = function (value) {
             fontSize: '12px',
           },
         }, label),
+      ]),
     ])
   )
 }

ui/app/util.js

@@ -26,6 +26,7 @@ module.exports = {
   numericBalance: numericBalance,
   parseBalance: parseBalance,
   formatBalance: formatBalance,
+  generateBalanceObject: generateBalanceObject,
   dataSize: dataSize,
   readableDate: readableDate,
   ethToWei: ethToWei,
@@ -117,6 +118,17 @@ 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]
+
+  if (beforeDecimal === '0' && afterDecimal.substr(0, 5) === '00000') { balance = '< 0.00001' }
+
+  return { balance, label }
+}
+
 function dataSize (data) {
   var size = data ? ethUtil.stripHexPrefix(data).length : 0
   return size + ' bytes'