Merge pull request #222 from MetaMask/balances

Fixes #206

test/unit/util_test.js

@@ -17,6 +17,21 @@ describe('util', function() {
     this.sinon.restore()
   })
 
+  describe('parseBalance', function() {
+    it('should render 0.01 eth correctly', function() {
+      const input = '0x2386F26FC10000'
+      const output = util.parseBalance(input)
+      assert.deepEqual(output, ['0', '01'])
+    })
+  })
+  describe('parseBalance', function() {
+    it('should render 0.01 eth correctly', function() {
+      const input = 'A6DA46CCA6858000'
+      const output = util.parseBalance(input)
+      assert.deepEqual(output, ['12', '023'])
+    })
+  })
+
   describe('addressSummary', function() {
     it('should add case-sensitive checksum', function() {
       var address = '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825'
@@ -111,20 +126,30 @@ describe('util', function() {
 
     it('should return eth as string followed by ETH', function() {
       var input = new ethUtil.BN(ethInWei, 10).toJSON()
-      var result = util.formatBalance(input)
+      var result = util.formatBalance(input, 4)
       assert.equal(result, '1.0000 ETH')
     })
 
     it('should return eth as string followed by ETH', function() {
       var input = new ethUtil.BN(ethInWei, 10).div(new ethUtil.BN('2', 10)).toJSON()
-      var result = util.formatBalance(input)
-      assert.equal(result, '0.5000 ETH')
+      var result = util.formatBalance(input, 3)
+      assert.equal(result, '0.500 ETH')
     })
 
-    it('should display four decimal points', function() {
+    it('should display specified decimal points', function() {
+      var input = "0x128dfa6a90b28000"
+      var result = util.formatBalance(input, 2)
+      assert.equal(result, '1.33 ETH')
+    })
+    it('should default to 3 decimal points', function() {
       var input = "0x128dfa6a90b28000"
       var result = util.formatBalance(input)
-      assert.equal(result, '1.3370 ETH')
+      assert.equal(result, '1.337 ETH')
+    })
+    it('should show 2 significant digits for tiny balances', function() {
+      var input = "0x1230fa6a90b28"
+      var result = util.formatBalance(input)
+      assert.equal(result, '0.00032 ETH')
     })
 
   })

ui/app/components/eth-balance.js

@@ -2,6 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const parseBalance = require('../util').parseBalance
+const formatBalance = require('../util').formatBalance
 
 module.exports = EthBalanceComponent
 
@@ -12,11 +13,8 @@ function EthBalanceComponent() {
 
 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
+  var value = formatBalance(state.value)
 
   return (
 
@@ -28,12 +26,6 @@ EthBalanceComponent.prototype.render = function() {
           display: 'inline',
         },
       }, value),
-      h('.ether-balance-label', {
-        style: {
-          display: 'inline',
-          marginLeft: 6,
-        },
-      }, 'ETH'),
     ])
 
   )

ui/app/util.js

@@ -84,29 +84,41 @@ function weiToEth(bn) {
 }
 
 // Takes  hex, returns [beforeDecimal, afterDecimal]
-function parseBalance(balance, decimalsToKeep) {
-  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 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)
+function parseBalance(balance) {
+  if (!balance || balance === '0x0') return ['0', '0']
+  var wei = numericBalance(balance).toString(10)
+  var eth = String(wei/valueTable['wei'])
+  var beforeDecimal = String(Math.floor(eth))
+  var afterDecimal
+  if(eth.indexOf('.') > -1){
+    afterDecimal = eth.slice(eth.indexOf('.') + 1)
+  }else{
+    afterDecimal = '0'
+  }
   return [beforeDecimal, afterDecimal]
 }
 
 // Takes wei hex, returns "None" or "${formattedAmount} ETH"
-function formatBalance(balance) {
+function formatBalance(balance, decimalsToKeep) {
   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
+  var formatted = "None"
+  if(decimalsToKeep === undefined){
+    if(beforeDecimal === '0'){
+      if(afterDecimal !== '0'){
+        var sigFigs = afterDecimal.match(/^0*(.{2})/) //default: grabs 2 most significant digits
+        if(sigFigs){afterDecimal = sigFigs[0]}
+        formatted = '0.' + afterDecimal + ' ETH'
+      }
+    }else{
+      formatted = beforeDecimal + "." + afterDecimal.slice(0,3) + ' ETH'
+    }
+  }else{
+    afterDecimal += Array(decimalsToKeep).join("0")
+    formatted = beforeDecimal + "." + afterDecimal.slice(0,decimalsToKeep) + ' ETH'
+  }
+  return formatted
 }
 
 function dataSize(data) {