aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/account-detail.js7
-rw-r--r--ui/app/accounts.js7
-rw-r--r--ui/app/components/eth-balance.js40
-rw-r--r--ui/app/css/index.css9
-rw-r--r--ui/app/send.js7
-rw-r--r--ui/app/util.js25
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) {