From 9d577ea0231802279ea0070a598f7dea9637f652 Mon Sep 17 00:00:00 2001 From: Frankie Date: Wed, 6 Jul 2016 17:04:09 -0700 Subject: [PATCH 1/3] Add decimal hendeling to ETH balance --- test/unit/util_test.js | 22 +++++---------------- ui/app/account-detail.js | 1 + ui/app/components/eth-balance.js | 34 ++++++++++++++++++-------------- ui/app/util.js | 33 +++++++++++++++++++------------ 4 files changed, 45 insertions(+), 45 deletions(-) diff --git a/test/unit/util_test.js b/test/unit/util_test.js index e2390c8d4..514a2a432 100644 --- a/test/unit/util_test.js +++ b/test/unit/util_test.js @@ -142,35 +142,23 @@ describe('util', function() { it('when given nothing', function() { var result = util.formatBalance() - assert.equal(result, 'None', 'should return "None"') - }) - - it('should return eth as string followed by ETH', function() { - var input = new ethUtil.BN(ethInWei, 10).toJSON() - 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, 3) - assert.equal(result, '0.500 ETH') + assert.equal(result.formatted, 'None', 'should return "None"') }) it('should display specified decimal points', function() { var input = "0x128dfa6a90b28000" var result = util.formatBalance(input, 2) - assert.equal(result, '1.33 ETH') + assert.equal(result.formatted, '1.33 ETH') }) - it('should default to 3 decimal points', function() { + it('should default to 2 decimal points', function() { var input = "0x128dfa6a90b28000" var result = util.formatBalance(input) - assert.equal(result, '1.337 ETH') + assert.equal(result.formatted, '1.33 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') + assert.equal(result.formatted, '0.00032 ETH') }) }) diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index 62b9d80ae..6d50dbd71 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -163,6 +163,7 @@ AccountDetailScreen.prototype.render = function () { h(EtherBalance, { value: account && account.balance, + mainBalance: true, style: { lineHeight: '7px', marginTop: '10px', diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js index c7240ea21..0294d0d9f 100644 --- a/ui/app/components/eth-balance.js +++ b/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 formatBalance = require('../util').formatBalance +const Tooltip = require('./tooltip') module.exports = EthBalanceComponent @@ -30,28 +31,31 @@ EthBalanceComponent.prototype.render = function () { ) } EthBalanceComponent.prototype.renderBalance = function (value) { - if (value === 'None') return value - var balance = value.split(' ')[0] - var label = value.split(' ')[1] + var balance = value.formatted.split(' ')[0] + var label = value.formatted.split(' ')[1] return ( - h('.flex-column', { - style: { - alignItems: 'flex-end', - lineHeight: '13px', - fontFamily: 'Montserrat Thin', - textRendering: 'geometricPrecision', - }, + h(Tooltip, { + title: value.balance, }, [ - h('div', balance), - h('div', { + h('.flex-column', { style: { - color: ' #AEAEAE', - fontSize: '12px', + alignItems: 'flex-end', + lineHeight: '13px', + fontFamily: 'Montserrat Light', + textRendering: 'geometricPrecision', }, - }, label), + }, [ + h('div', balance), + h('div', { + style: { + color: ' #AEAEAE', + fontSize: '12px', + }, + }, label), + ]), ]) ) } diff --git a/ui/app/util.js b/ui/app/util.js index db12a1282..d9afa1bba 100644 --- a/ui/app/util.js +++ b/ui/app/util.js @@ -99,22 +99,29 @@ function formatBalance (balance, decimalsToKeep) { var parsed = parseBalance(balance) var beforeDecimal = parsed[0] var afterDecimal = parsed[1] - 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' + var formatted, formattedBalance + + if (beforeDecimal === '0') { + if (afterDecimal !== '0') { + var sigFigs = afterDecimal.match(/^0*(.{2})/) // default: grabs 2 most significant digits + if (sigFigs) { afterDecimal = sigFigs[0] } + formattedBalance = `0.${afterDecimal.slice(0, 6)}` } } else { - afterDecimal += Array(decimalsToKeep).join('0') - formatted = beforeDecimal + '.' + afterDecimal.slice(0, decimalsToKeep) + ' ETH' + formattedBalance = `${beforeDecimal}.${afterDecimal.slice(0, 2)}` + } + if (decimalsToKeep) { + formattedBalance = `${beforeDecimal}.${afterDecimal.slice(0, decimalsToKeep)}` + } + + formatted = `${formattedBalance} ETH` + + if (formattedBalance === '0.0' || formattedBalance === undefined) { + formatted = 'None' + formattedBalance = 'None' } - return formatted + + return {formattedBalance, balance: parsed.join('.'), formatted} } function dataSize (data) { From 53eefc1efc65c138c8692bb069ae64e5eae9942b Mon Sep 17 00:00:00 2001 From: Frankie Date: Wed, 6 Jul 2016 17:09:53 -0700 Subject: [PATCH 2/3] Add a postion option for tool tip --- CHANGELOG.md | 2 ++ ui/app/components/eth-balance.js | 1 + ui/app/components/tooltip.js | 2 +- 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6bee30518..8cb788a0d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,8 @@ # Changelog ## Current Master + +- Fix formatting of ETH balance - Fix formatting of account details. ## 2.5.0 2016-06-29 diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js index 0294d0d9f..510b620f3 100644 --- a/ui/app/components/eth-balance.js +++ b/ui/app/components/eth-balance.js @@ -39,6 +39,7 @@ EthBalanceComponent.prototype.renderBalance = function (value) { return ( h(Tooltip, { title: value.balance, + position: 'bottom', }, [ h('.flex-column', { style: { diff --git a/ui/app/components/tooltip.js b/ui/app/components/tooltip.js index 4eab8611e..fb67c717e 100644 --- a/ui/app/components/tooltip.js +++ b/ui/app/components/tooltip.js @@ -14,7 +14,7 @@ Tooltip.prototype.render = function () { const props = this.props return h(ReactTooltip, { - position: 'left', + position: props.position ? props.position : 'left', title: props.title, fixed: false, }, props.children) From 8834548b0153db35dfa56c0901a384bcf7e3e7b3 Mon Sep 17 00:00:00 2001 From: Frankie Date: Wed, 6 Jul 2016 19:13:14 -0700 Subject: [PATCH 3/3] Handle to small of balances with "<0.00001" --- ui/app/util.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/app/util.js b/ui/app/util.js index d9afa1bba..a09c180a1 100644 --- a/ui/app/util.js +++ b/ui/app/util.js @@ -105,7 +105,7 @@ function formatBalance (balance, decimalsToKeep) { if (afterDecimal !== '0') { var sigFigs = afterDecimal.match(/^0*(.{2})/) // default: grabs 2 most significant digits if (sigFigs) { afterDecimal = sigFigs[0] } - formattedBalance = `0.${afterDecimal.slice(0, 6)}` + formattedBalance = afterDecimal.substr(0, 5) === '00000' ? '<0.00001' : `0.${afterDecimal.slice(0, 6)}` } } else { formattedBalance = `${beforeDecimal}.${afterDecimal.slice(0, 2)}`