diff options
-rw-r--r-- | development/states/account-detail-with-transaction-history.json | 14 | ||||
-rw-r--r-- | ui/app/components/eth-balance-tx-history.js | 77 | ||||
-rw-r--r-- | ui/app/components/eth-balance.js | 56 | ||||
-rw-r--r-- | ui/app/components/transaction-list-item.js | 2 | ||||
-rw-r--r-- | ui/app/util.js | 16 |
5 files changed, 54 insertions, 111 deletions
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 } |