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) {