From 45916175d7281ff0eba25fcb5918a01e02baad7c Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 23 May 2016 14:56:34 -0700 Subject: Move account list panel to component --- ui/app/accounts/account-panel.js | 19 ++++++++++++++ ui/app/accounts/index.js | 54 +++++++--------------------------------- 2 files changed, 28 insertions(+), 45 deletions(-) create mode 100644 ui/app/accounts/account-panel.js (limited to 'ui/app/accounts') diff --git a/ui/app/accounts/account-panel.js b/ui/app/accounts/account-panel.js new file mode 100644 index 000000000..9e4eca20f --- /dev/null +++ b/ui/app/accounts/account-panel.js @@ -0,0 +1,19 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits + +module.exports = NewComponent + + +inherits(NewComponent, Component) +function NewComponent() { + Component.call(this) +} + +NewComponent.prototype.render = function() { + var state = this.props + + return ( + h('span', 'Placeholder component') + ) +} diff --git a/ui/app/accounts/index.js b/ui/app/accounts/index.js index 0f1e050c3..9ddcfdcab 100644 --- a/ui/app/accounts/index.js +++ b/ui/app/accounts/index.js @@ -10,6 +10,7 @@ const valuesFor = require('../util').valuesFor const addressSummary = require('../util').addressSummary const formatBalance = require('../util').formatBalance const findDOMNode = require('react-dom').findDOMNode +const AccountPanel = require('./account-panel') module.exports = connect(mapStateToProps)(AccountsScreen) @@ -64,7 +65,14 @@ AccountsScreen.prototype.render = function() { } }, [ - identityList.map(renderAccountPanel), + identityList.map((identity) => { + return h(AccountPanel, { + identity, + selectedAddress: this.props.selectedAddress, + accounts: this.props.accounts, + onShowDetail: this.onShowDetail.bind(this), + }) + }), h('hr.horizontal-line', {key: 'horizontal-line1'}), h('div.footer.hover-white.pointer', { @@ -99,50 +107,6 @@ AccountsScreen.prototype.render = function() { ), ]) ) - - function renderAccountPanel(identity){ - var mayBeFauceting = identity.mayBeFauceting - var isSelected = state.selectedAddress === identity.address - var account = state.accounts[identity.address] - var isFauceting = mayBeFauceting && account.balance === '0x0' - var componentState = extend(actions, { - identity: identity, - account: account, - isSelected: false, - isFauceting: isFauceting, - }) - const selectedClass = isSelected ? '.selected' : '' - - return ( - h(`.accounts-list-option.flex-row.flex-space-between.pointer.hover-white${selectedClass}`, { - key: `account-panel-${identity.address}`, - style: { - flex: '1 0 auto', - }, - onClick: (event) => actions.onShowDetail(identity.address, event), - }, [ - - h('.identicon-wrapper.flex-column.flex-center.select-none', [ - h(Identicon, { - address: identity.address - }), - ]), - - // account address, balance - h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [ - - h('span', identity.name), - h('span.font-small', addressSummary(identity.address)), - // h('span.font-small', formatBalance(account.balance)), - h(EtherBalance, { - value: account.balance, - }), - - ]), - - ]) - ) - } } // If a new account was revealed, scroll to the bottom -- cgit v1.2.3 From adaf1c7012b398d5d0d548553ba35e80cf5c3d31 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 23 May 2016 15:31:11 -0700 Subject: Add copy address button to account list --- ui/app/accounts/account-panel.js | 48 ++++++++++++++++++++++++++++++++++++++-- ui/app/accounts/index.js | 5 +---- 2 files changed, 47 insertions(+), 6 deletions(-) (limited to 'ui/app/accounts') diff --git a/ui/app/accounts/account-panel.js b/ui/app/accounts/account-panel.js index 9e4eca20f..5ade7fe0e 100644 --- a/ui/app/accounts/account-panel.js +++ b/ui/app/accounts/account-panel.js @@ -1,6 +1,12 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits +const ethUtil = require('ethereumjs-util') + +const EtherBalance = require('../components/eth-balance') +const addressSummary = require('../util').addressSummary +const copyToClipboard = require('copy-to-clipboard') +const Identicon = require('../components/identicon') module.exports = NewComponent @@ -11,9 +17,47 @@ function NewComponent() { } NewComponent.prototype.render = function() { - var state = this.props + const identity = this.props.identity + var mayBeFauceting = identity.mayBeFauceting + var isSelected = this.props.selectedAddress === identity.address + var account = this.props.accounts[identity.address] + var isFauceting = mayBeFauceting && account.balance === '0x0' + const selectedClass = isSelected ? '.selected' : '' return ( - h('span', 'Placeholder component') + h(`.accounts-list-option.flex-row.flex-space-between.pointer.hover-white${selectedClass}`, { + key: `account-panel-${identity.address}`, + style: { + flex: '1 0 auto', + }, + onClick: (event) => this.props.onShowDetail(identity.address, event), + }, [ + + h('.identicon-wrapper.flex-column.flex-center.select-none', [ + h(Identicon, { + address: identity.address + }), + ]), + + // account address, balance + h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [ + + h('span', identity.name), + h('span.font-small', addressSummary(identity.address)), + h(EtherBalance, { + value: account.balance, + }), + ]), + + h('.identity-copy.flex-column', [ + h('i.fa.fa-clipboard.fa-md.cursor-pointer.color-orange', { + onClick: (event) => { + event.stopPropagation() + event.preventDefault() + copyToClipboard(ethUtil.toChecksumAddress(identity.address)) + } + }), + ]) + ]) ) } diff --git a/ui/app/accounts/index.js b/ui/app/accounts/index.js index 9ddcfdcab..1a42f7470 100644 --- a/ui/app/accounts/index.js +++ b/ui/app/accounts/index.js @@ -3,12 +3,8 @@ const Component = require('react').Component const h = require('react-hyperscript') const connect = require('react-redux').connect const extend = require('xtend') -const Identicon = require('../components/identicon') const actions = require('../actions') -const EtherBalance = require('../components/eth-balance') const valuesFor = require('../util').valuesFor -const addressSummary = require('../util').addressSummary -const formatBalance = require('../util').formatBalance const findDOMNode = require('react-dom').findDOMNode const AccountPanel = require('./account-panel') @@ -67,6 +63,7 @@ AccountsScreen.prototype.render = function() { [ identityList.map((identity) => { return h(AccountPanel, { + key: `acct-panel-${identity.address}`, identity, selectedAddress: this.props.selectedAddress, accounts: this.props.accounts, -- cgit v1.2.3