aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--ui/app/account-detail.js3
-rw-r--r--ui/app/components/account-panel.js91
-rw-r--r--ui/app/components/panel.js63
-rw-r--r--ui/app/components/transaction-list.js4
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)),