diff options
| -rw-r--r-- | CHANGELOG.md | 2 | ||||
| -rw-r--r-- | development/states/account-detail-with-transaction-history.json | 14 | ||||
| -rw-r--r-- | test/unit/util_test.js | 38 | ||||
| -rw-r--r-- | ui/app/components/eth-balance-tx-history.js | 87 | ||||
| -rw-r--r-- | ui/app/components/eth-balance.js | 56 | ||||
| -rw-r--r-- | ui/app/components/transaction-list-item.js | 4 | ||||
| -rw-r--r-- | ui/app/util.js | 51 |
7 files changed, 83 insertions, 169 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 08acdf9be..987afc975 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,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 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/test/unit/util_test.js b/test/unit/util_test.js index 28f76fcf1..9a3963ac1 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() @@ -125,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() { @@ -211,7 +189,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) 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) { |