diff options
Diffstat (limited to 'ui/app')
| -rw-r--r-- | ui/app/account-detail.js | 7 | ||||
| -rw-r--r-- | ui/app/accounts.js | 7 | ||||
| -rw-r--r-- | ui/app/components/eth-balance.js | 40 | ||||
| -rw-r--r-- | ui/app/css/index.css | 9 | ||||
| -rw-r--r-- | ui/app/send.js | 7 | ||||
| -rw-r--r-- | ui/app/util.js | 25 |
6 files changed, 83 insertions, 12 deletions
diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index 2b58fb239..263e48441 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -6,11 +6,11 @@ const connect = require('react-redux').connect const copyToClipboard = require('copy-to-clipboard') const actions = require('./actions') const addressSummary = require('./util').addressSummary -const formatBalance = require('./util').formatBalance const ReactCSSTransitionGroup = require('react-addons-css-transition-group') const AccountPanel = require('./components/account-panel') const Identicon = require('./components/identicon') +const EtherBalance = require('./components/eth-balance') const transactionList = require('./components/transaction-list') const ExportAccountView = require('./components/account-export') @@ -118,11 +118,12 @@ AccountDetailScreen.prototype.render = function() { // balance + send h('.flex-row.flex-space-between', [ - h('div', { + h(EtherBalance, { + value: account && account.balance, style: { lineHeight: '50px', }, - }, formatBalance(account && account.balance)), + }), h('button', { onClick: () => this.props.dispatch(actions.showSendPage()), diff --git a/ui/app/accounts.js b/ui/app/accounts.js index 18ba1e67d..e609e7424 100644 --- a/ui/app/accounts.js +++ b/ui/app/accounts.js @@ -5,7 +5,7 @@ const connect = require('react-redux').connect const extend = require('xtend') const Identicon = require('./components/identicon') const actions = require('./actions') -const AccountPanel = require('./components/account-panel') +const EtherBalance = require('./components/eth-balance') const valuesFor = require('./util').valuesFor const addressSummary = require('./util').addressSummary const formatBalance = require('./util').formatBalance @@ -108,7 +108,10 @@ AccountsScreen.prototype.render = function() { h('span', identity.name), h('span.font-small', addressSummary(identity.address)), - h('span.font-small', formatBalance(account.balance)), + // h('span.font-small', formatBalance(account.balance)), + h(EtherBalance, { + value: account.balance, + }), ]), diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js new file mode 100644 index 000000000..3f88ef2d4 --- /dev/null +++ b/ui/app/components/eth-balance.js @@ -0,0 +1,40 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const parseBalance = require('../util').parseBalance + +module.exports = EthBalanceComponent + +inherits(EthBalanceComponent, Component) +function EthBalanceComponent() { + Component.call(this) +} + +EthBalanceComponent.prototype.render = function() { + var state = this.props + var parsedAmount = parseBalance(state.value) + var beforeDecimal = parsedAmount[0] + var afterDecimal = parsedAmount[1] + var value = beforeDecimal+(afterDecimal ? '.'+afterDecimal : '') + var style = state.style + + return ( + + h('.ether-balance', { + style: style, + }, [ + h('.ether-balance-amount', { + style: { + display: 'inline', + }, + }, value), + h('.ether-balance-label', { + style: { + display: 'inline', + marginLeft: 6, + }, + }, 'ETH'), + ]) + + ) +} diff --git a/ui/app/css/index.css b/ui/app/css/index.css index 75f434da6..060ddce91 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -385,3 +385,12 @@ input.large-input { letter-spacing: 0.1em; } +/* Ether Balance Widget */ + +.ether-balance-amount { + color: #F7861C; +} + +.ether-balance-label { + color: #ABA9AA; +}
\ No newline at end of file diff --git a/ui/app/send.js b/ui/app/send.js index 56b23ee24..1442db8cc 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -8,7 +8,7 @@ const util = require('./util') const numericBalance = require('./util').numericBalance const formatBalance = require('./util').formatBalance const addressSummary = require('./util').addressSummary -const AccountPanel = require('./components/account-panel') +const EtherBalance = require('./components/eth-balance') const ethUtil = require('ethereumjs-util') module.exports = connect(mapStateToProps)(SendTransactionScreen) @@ -106,7 +106,10 @@ SendTransactionScreen.prototype.render = function() { // balance h('.flex-row.flex-center', [ - h('div', formatBalance(account && account.balance)), + // h('div', formatBalance(account && account.balance)), + h(EtherBalance, { + value: account && account.balance, + }) ]), diff --git a/ui/app/util.js b/ui/app/util.js index 5dbcffa7e..0f3f191aa 100644 --- a/ui/app/util.js +++ b/ui/app/util.js @@ -22,6 +22,7 @@ module.exports = { valuesFor: valuesFor, addressSummary: addressSummary, numericBalance: numericBalance, + parseBalance: parseBalance, formatBalance: formatBalance, dataSize: dataSize, readableDate: readableDate, @@ -65,16 +66,30 @@ function weiToEth(bn) { return eth } -var decimalsToKeep = 4 -function formatBalance(balance) { - if (!balance || balance === '0x0') return 'None' +// Takes hex, returns [beforeDecimal, afterDecimal] +function parseBalance(balance, decimalsToKeep) { + if (decimalsToKeep === undefined) decimalsToKeep = 4 + if (!balance || balance === '0x0') return ['0', ''] var wei = numericBalance(balance) var padded = wei.toString(10) var len = padded.length - var nonZeroIndex = padded.match(/[^0]/) && padded.match(/[^0]/).index + var match = padded.match(/[^0]/) + var nonZeroIndex = match && match.index var beforeDecimal = padded.substr(nonZeroIndex ? nonZeroIndex : 0, len - 18) || '0' var afterDecimal = padded.substr(len - 18, decimalsToKeep) - return `${beforeDecimal}.${afterDecimal} ETH` + return [beforeDecimal, afterDecimal] +} + +// Takes wei hex, returns "None" or "${formattedAmount} ETH" +function formatBalance(balance) { + var parsed = parseBalance(balance) + var beforeDecimal = parsed[0] + var afterDecimal = parsed[1] + if (beforeDecimal === '0' && afterDecimal === '') return 'None' + var result = beforeDecimal + if (afterDecimal) result += '.'+afterDecimal + result += ' ETH' + return result } function dataSize(data) { |