diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js index 112b897d5..b24d58ace 100644 --- a/ui/app/components/account-panel.js +++ b/ui/app/components/account-panel.js @@ -1,13 +1,13 @@ const inherits = require('util').inherits const Component = require('react').Component const h = require('react-hyperscript') +const Identicon = require('./identicon') const formatBalance = require('../util').formatBalance const addressSummary = require('../util').addressSummary -const Panel = require('./panel') - module.exports = AccountPanel + inherits(AccountPanel, Component) function AccountPanel () { Component.call(this) @@ -19,13 +19,8 @@ AccountPanel.prototype.render = function () { var account = state.account || {} var isFauceting = state.isFauceting - var panelOpts = { + var panelState = { key: `accountPanel${identity.address}`, - onClick: (event) => { - if (state.onShowDetail) { - state.onShowDetail(identity.address, event) - } - }, identiconKey: identity.address, identiconLabel: identity.name, attributes: [ @@ -37,10 +32,40 @@ AccountPanel.prototype.render = function () { ], } - return h(Panel, panelOpts, - !state.onShowDetail ? null : h('.arrow-right.cursor-pointer', [ - h('i.fa.fa-chevron-right.fa-lg'), - ])) + return ( + + h('.identity-panel.flex-row.flex-space-between', { + style: { + flex: '1 0 auto', + cursor: panelState.onClick ? 'pointer' : undefined, + }, + onClick: panelState.onClick, + }, [ + + // account identicon + h('.identicon-wrapper.flex-column.select-none', [ + h(Identicon, { + address: panelState.identiconKey, + }), + h('span.font-small', panelState.identiconLabel), + ]), + + // account address, balance + h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [ + + panelState.attributes.map((attr) => { + return h('.flex-row.flex-space-between', { + key: '' + Math.round(Math.random() * 1000000), + }, [ + h('label.font-small.no-select', attr.key), + h('span.font-small', attr.value), + ]) + }), + ]), + + ]) + + ) } function balanceOrFaucetingIndication (account, isFauceting) { diff --git a/ui/app/components/panel.js b/ui/app/components/panel.js deleted file mode 100644 index cbdc82982..000000000 --- a/ui/app/components/panel.js +++ /dev/null @@ -1,54 +0,0 @@ -const inherits = require('util').inherits -const Component = require('react').Component -const h = require('react-hyperscript') -const Identicon = require('./identicon') - -module.exports = Panel - -inherits(Panel, Component) -function Panel () { - Component.call(this) -} - -Panel.prototype.render = function () { - var state = this.props - - var style = { - flex: '1 0 auto', - } - - if (state.onClick) style.cursor = 'pointer' - - return ( - h('.identity-panel.flex-row.flex-space-between', { - style, - onClick: state.onClick, - }, [ - - // account identicon - h('.identicon-wrapper.flex-column.select-none', [ - h(Identicon, { - address: state.identiconKey, - }), - 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.no-select', attr.key), - h('span.font-small', attr.value), - ]) - }), - ]), - - // outlet for inserting additional stuff - state.children, - ]) - ) -} -