From 31d0d1ec080546b591d0c8ffd85c8bd983791f99 Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Mon, 11 Jul 2016 13:57:47 -0700 Subject: Refactor util tests. --- test/unit/util_test.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/test/unit/util_test.js b/test/unit/util_test.js index 28f76fcf1..91c7c83e9 100644 --- a/test/unit/util_test.js +++ b/test/unit/util_test.js @@ -17,28 +17,25 @@ describe('util', function() { this.sinon.restore() }) - describe('parseBalance', function() { + 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 12.023 eth correctly', function() { const input = 'A6DA46CCA6858000' const output = util.parseBalance(input) assert.deepEqual(output, ['12', '023']) }) - }) - describe('parseBalance', function() { + it('should render 0.0000000342422 eth correctly', function() { const input = '0x7F8FE81C0' const output = util.parseBalance(input) assert.deepEqual(output, ['0', '0000000342422']) }) - }) - describe('parseBalance', function() { + it('should render 0 eth correctly', function() { const input = '0x0' const output = util.parseBalance(input) @@ -46,7 +43,7 @@ describe('util', function() { }) }) - describe('addressSummary', function() { + describe('#addressSummary', function() { it('should add case-sensitive checksum', function() { var address = '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825' var result = util.addressSummary(address) @@ -60,7 +57,7 @@ describe('util', function() { }) }) - describe('isValidAddress', function() { + describe('#isValidAddress', function() { it('should allow 40-char non-prefixed hex', function() { var address = 'fdea65c8e26263f6d9a1b5de9555d2931a33b825' var result = util.isValidAddress(address) @@ -106,7 +103,7 @@ describe('util', function() { }) }) - describe('numericBalance', function() { + describe('#numericBalance', function() { it('should return a BN 0 if given nothing', function() { var result = util.numericBalance() @@ -211,7 +208,7 @@ describe('util', function() { }) }) - describe('normalizeEthStringToWei', function() { + describe('#normalizeEthStringToWei', function() { it('should convert decimal eth to pure wei BN', function() { var input = '1.23456789' var output = util.normalizeEthStringToWei(input) -- cgit v1.2.3 From 37f21cf18f3495b255d25cfe57c2cbf495ba6b69 Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Mon, 11 Jul 2016 16:01:52 -0700 Subject: Remove unused functions. Readd if necessary. --- test/unit/util_test.js | 19 ------------------- ui/app/util.js | 22 ++++------------------ 2 files changed, 4 insertions(+), 37 deletions(-) diff --git a/test/unit/util_test.js b/test/unit/util_test.js index 91c7c83e9..9a3963ac1 100644 --- a/test/unit/util_test.js +++ b/test/unit/util_test.js @@ -122,25 +122,6 @@ describe('util', function() { }) - describe('#ethToWei', function() { - - it('should take an eth BN, returns wei BN', function() { - var input = new ethUtil.BN(1, 10) - var result = util.ethToWei(input) - assert.equal(result, ethInWei, '18 zeroes') - }) - - }) - - describe('#weiToEth', function() { - - it('should take a wei BN and return an eth BN', function() { - var result = util.weiToEth(new ethUtil.BN(ethInWei)) - assert.equal(result, '1', 'equals 1 eth') - }) - - }) - describe('#formatBalance', function() { it('when given nothing', function() { diff --git a/ui/app/util.js b/ui/app/util.js index b86bc6035..216ded49f 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,15 @@ 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' + // 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] -- cgit v1.2.3 From 6a61591dad48f20502a64ad22a8d54e18a0a1d21 Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Mon, 11 Jul 2016 16:31:12 -0700 Subject: Move shorten balance to util. Add as property of generateBalance object output. --- ui/app/components/eth-balance-tx-history.js | 30 ++++++++++------------------- ui/app/components/transaction-list-item.js | 2 +- ui/app/util.js | 19 ++++++++++++++++-- 3 files changed, 28 insertions(+), 23 deletions(-) diff --git a/ui/app/components/eth-balance-tx-history.js b/ui/app/components/eth-balance-tx-history.js index c3bdc2878..de64dd694 100644 --- a/ui/app/components/eth-balance-tx-history.js +++ b/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 - } -} diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index 4fa7b897c..d4207b3ba 100644 --- a/ui/app/components/transaction-list-item.js +++ b/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'), ]) diff --git a/ui/app/util.js b/ui/app/util.js index 216ded49f..0d57f1f96 100644 --- a/ui/app/util.js +++ b/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) { -- cgit v1.2.3 From d7e6b752a38aaf4d1e46168683bc9539a8e9e0e9 Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Mon, 11 Jul 2016 17:44:00 -0700 Subject: Integrate changes back into eth-balance --- .../account-detail-with-transaction-history.json | 14 ++++ ui/app/components/eth-balance-tx-history.js | 77 ---------------------- ui/app/components/eth-balance.js | 56 ++++++++-------- ui/app/components/transaction-list-item.js | 2 +- ui/app/util.js | 16 +++-- 5 files changed, 54 insertions(+), 111 deletions(-) delete mode 100644 ui/app/components/eth-balance-tx-history.js diff --git a/development/states/account-detail-with-transaction-history.json b/development/states/account-detail-with-transaction-history.json index 5006acd8b..5e4065225 100644 --- a/development/states/account-detail-with-transaction-history.json +++ b/development/states/account-detail-with-transaction-history.json @@ -81,6 +81,20 @@ "status": "confirmed", "containsDelegateCall": false, "hash": "0x957bbba51e2732a86c10c5e7e8a484a093795a06f2e2c38ad02da1b20aeca620" + }, + { + "id": 1467921503489592, + "txParams": { + "from": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc", + "to": "0x18a3462427bcc9133bb46e88bcbe39cd7ef0e761", + "value": "0x66c899104aa57038000", + "origin": "thelongestdomainnameintheworldandthensomeandthensomemoreandmore.com", + "metamaskId": 1467921503489592, + "metamaskNetworkId": "2" + }, + "time": 1467921503489, + "status": "confirmed", + "containsDelegateCall": false }], "selectedAddress": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc", "network": "2", 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 de64dd694..000000000 --- a/ui/app/components/eth-balance-tx-history.js +++ /dev/null @@ -1,77 +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 - - const value = formatBalance(state.value) - var width = state.width - - return ( - - h('.ether-balance', { - style: style, - }, [ - h('.ether-balance-amount', { - style: { - display: 'inline', - width: width, - }, - }, this.renderBalance(value, state)), - ]) - - ) -} -EthBalanceComponent.prototype.renderBalance = function (value, state) { - if (value === 'None') return value - var balanceObj = generateBalanceObject(value) - var balance - - if (state.shorten) { - balance = balanceObj.shortBalance - } else { - balance = balanceObj.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%', - textAlign: 'right', - }, - }, balance), - h('div', { - style: { - color: ' #AEAEAE', - fontSize: '12px', - }, - }, label), - ]), - ]) - ) -} 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 d4207b3ba..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') diff --git a/ui/app/util.js b/ui/app/util.js index 0d57f1f96..c04612455 100644 --- a/ui/app/util.js +++ b/ui/app/util.js @@ -115,27 +115,31 @@ function formatBalance (balance, decimalsToKeep) { } -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] - var shortBalance = shortenBalance(balance) + var shortBalance = shortenBalance(balance, decimalsToKeep) - if (beforeDecimal === '0' && afterDecimal.substr(0, 5) === '00000') { balance = '< 0.00001' } + if (beforeDecimal === '0' && afterDecimal.substr(0, 5) === '00000') { balance = '<1.0e-5' } return { balance, label, shortBalance } } -function shortenBalance (balance) { +function shortenBalance (balance, decimalsToKeep = 1) { var truncatedValue var convertedBalance = parseFloat(balance) if (convertedBalance > 1000000) { - truncatedValue = (balance / 1000000).toFixed(1) + truncatedValue = (balance / 1000000).toFixed(decimalsToKeep) return `>${truncatedValue}m` } else if (convertedBalance > 1000) { - truncatedValue = (balance / 1000).toFixed(1) + 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 } -- cgit v1.2.3 From a72aad19c8646306dec4c2921ce30a08b57cd90c Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Mon, 11 Jul 2016 17:45:20 -0700 Subject: Update changelog. --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 72866a75c..cfc633652 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,8 @@ - Update transaction approval styles. - Align failed and successful transaction history text. - Fix issue where large domain names and large transaction values would misalign the transaction history. +- Abbreviate ether balances on transaction details to maintain formatting. +- General code cleanup. ## 2.5.0 2016-06-29 -- cgit v1.2.3