diff options
| -rw-r--r-- | ui/app/account-detail.js | 3 | ||||
| -rw-r--r-- | ui/app/components/account-panel.js | 91 | ||||
| -rw-r--r-- | ui/app/components/panel.js | 63 | ||||
| -rw-r--r-- | ui/app/components/transaction-list.js | 4 |
4 files changed, 98 insertions, 63 deletions
diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index 10c33c2bc..06ef6ff02 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -58,7 +58,8 @@ AccountDetailScreen.prototype.render = function() { showFullAddress: true, identity: identity, account: account, - }, []), + key: 'accountPanel' + }), h('div', { style: { diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js index 25b5e5d24..c1450b516 100644 --- a/ui/app/components/account-panel.js +++ b/ui/app/components/account-panel.js @@ -6,6 +6,8 @@ const addressSummary = require('../util').addressSummary const formatBalance = require('../util').formatBalance const Identicon = require('identicon.js') +const Panel = require('./panel') + module.exports = AccountPanel @@ -23,49 +25,29 @@ AccountPanel.prototype.render = function() { var identicon = new Identicon(identity.address, 46).toString() var identiconSrc = `data:image/png;base64,${identicon}` - return ( - - h('.identity-panel.flex-row.flex-space-between'+(state.isSelected?'.selected':''), { - style: { - flex: '1 0 auto', + var panelOpts = { + key: `accountPanel${identity.address}`, + onClick: (event) => { + if (state.onShowDetail) { + state.onShowDetail(identity.address, event) + } + }, + identiconKey: identity.address, + identiconLabel: identity.name, + attributes: [ + { + key: 'ADDRESS', + value: addressSummary(identity.address) }, - onClick: (event) => state.onShowDetail(identity.address, event), - }, [ - - // account identicon - h('.identicon-wrapper.flex-column.select-none', [ - h('img.identicon', { - src: identiconSrc, - style: { - border: 'none', - borderRadius: '20px', - } - }), - h('span.font-small', identity.name), - ]), - - // account address, balance - h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [ - - h('.flex-row.flex-space-between', [ - h('label.font-small', 'ADDRESS'), - h('span.font-small', addressSummary(identity.address)), - ]), - - balanceOrFaucetingIndication(account, isFauceting), - - // outlet for inserting additional stuff - state.children, + balanceOrFaucetingIndication(account, isFauceting), + ] + } - ]), + return h(Panel, panelOpts, + !state.onShowDetail ? null : h('.arrow-right.cursor-pointer', [ + h('i.fa.fa-chevron-right.fa-lg'), + ])) - // navigate to account detail - !state.onShowDetail ? null : - h('.arrow-right.cursor-pointer', [ - h('i.fa.fa-chevron-right.fa-lg'), - ]), - ]) - ) } function balanceOrFaucetingIndication(account, isFauceting) { @@ -73,27 +55,14 @@ function balanceOrFaucetingIndication(account, isFauceting) { // Temporarily deactivating isFauceting indication // because it shows fauceting for empty restored accounts. if (/*isFauceting*/ false) { - - return h('.flex-row.flex-space-between', [ - h('span.font-small', { - }, [ - 'Account is auto-funding,', - h('br'), - 'please wait.' - ]), - ]) - + return { + key: 'Account is auto-funding.', + value: 'Please wait.', + } } else { - - return h('.flex-row.flex-space-between', [ - h('label.font-small', 'BALANCE'), - h('span.font-small', { - style: { - overflowX: 'hidden', - maxWidth: '136px', - } - }, formatBalance(account.balance)), - ]) - + return { + key: 'BALANCE', + value: formatBalance(account.balance) + } } } diff --git a/ui/app/components/panel.js b/ui/app/components/panel.js new file mode 100644 index 000000000..25e6b7f0f --- /dev/null +++ b/ui/app/components/panel.js @@ -0,0 +1,63 @@ +const inherits = require('util').inherits +const ethUtil = require('ethereumjs-util') +const Component = require('react').Component +const h = require('react-hyperscript') +const Identicon = require('identicon.js') + +module.exports = Panel + + +inherits(Panel, Component) +function Panel() { + Component.call(this) +} + +Panel.prototype.render = function() { + var state = this.props + + var identity = state.identity || {} + var account = state.account || {} + var isFauceting = state.isFauceting + + var identicon = new Identicon(state.identiconKey, 46).toString() + var identiconSrc = `data:image/png;base64,${identicon}` + + return ( + h('.identity-panel.flex-row.flex-space-between', { + style: { + flex: '1 0 auto', + }, + onClick: state.onClick, + }, [ + + // account identicon + h('.identicon-wrapper.flex-column.select-none', [ + h('img.identicon', { + src: identiconSrc, + style: { + border: 'none', + borderRadius: '20px', + } + }), + h('span.font-small', state.identiconLabel), + ]), + + // account address, balance + h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [ + + state.attributes.map((attr) => { + return h('.flex-row.flex-space-between', { + key: '' + Math.round(Math.random() * 1000000), + }, [ + h('label.font-small', attr.key), + h('span.font-small', attr.value), + ]) + }), + ]), + + // outlet for inserting additional stuff + state.children, + ]) + ) +} + diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js index 115fd91f8..c5a86f082 100644 --- a/ui/app/components/transaction-list.js +++ b/ui/app/components/transaction-list.js @@ -16,7 +16,9 @@ module.exports = function(transactions, network) { h('div.font-small', {style: {display: 'inline'}}, 'Transactions'), transactions.map((transaction) => { - return h('.tx.flex-row.flex-space-around', [ + return h('.tx.flex-row.flex-space-around', { + key: `listed-tx-${transaction.hash}`, + }, [ h('a.font-small', { href: explorerLink(transaction.hash, parseInt(network)), |