aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--CHANGELOG.md2
-rw-r--r--development/states/account-detail-with-transaction-history.json14
-rw-r--r--test/unit/util_test.js38
-rw-r--r--ui/app/components/eth-balance-tx-history.js87
-rw-r--r--ui/app/components/eth-balance.js56
-rw-r--r--ui/app/components/transaction-list-item.js4
-rw-r--r--ui/app/util.js51
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) {