diff --git a/CHANGELOG.md b/CHANGELOG.md index 2b70dacf7..bd7a0ecf6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## Current Master +- Added copy address button to account list. + ## 2.0.0 2016-05-23 - UI Overhaul per Vlad Todirut's designs. diff --git a/ui/app/accounts/account-panel.js b/ui/app/accounts/account-panel.js new file mode 100644 index 000000000..5ade7fe0e --- /dev/null +++ b/ui/app/accounts/account-panel.js @@ -0,0 +1,63 @@ +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 + + +inherits(NewComponent, Component) +function NewComponent() { + Component.call(this) +} + +NewComponent.prototype.render = function() { + 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(`.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 0f1e050c3..1a42f7470 100644 --- a/ui/app/accounts/index.js +++ b/ui/app/accounts/index.js @@ -3,13 +3,10 @@ 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') module.exports = connect(mapStateToProps)(AccountsScreen) @@ -64,7 +61,15 @@ AccountsScreen.prototype.render = function() { } }, [ - identityList.map(renderAccountPanel), + identityList.map((identity) => { + return h(AccountPanel, { + key: `acct-panel-${identity.address}`, + 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 +104,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 diff --git a/ui/app/css/index.css b/ui/app/css/index.css index d6d1f91ac..8e25c1f88 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -319,6 +319,11 @@ input.large-input { height: 100%; } +.identity-copy.flex-column { + flex: 0.25 0 auto; + justify-content: center; +} + /* accounts screen */ .identity-section {