From 433fb4d24201d30eb84350bb1bd649f5bb22ad92 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Fri, 14 Jul 2017 00:53:54 -0700 Subject: Cleanup Fix lint error breaking gulp build Add presentational options menus --- ui/responsive/app/account-detail.js | 9 ++- ui/responsive/app/app.js | 45 +++++-------- .../app/components/account-options-menus.js | 77 ++++++++++++++++++++++ ui/responsive/app/components/editable-label.js | 7 +- 4 files changed, 105 insertions(+), 33 deletions(-) create mode 100644 ui/responsive/app/components/account-options-menus.js (limited to 'ui/responsive') diff --git a/ui/responsive/app/account-detail.js b/ui/responsive/app/account-detail.js index ff5c2aadb..9a837a121 100644 --- a/ui/responsive/app/account-detail.js +++ b/ui/responsive/app/account-detail.js @@ -18,6 +18,8 @@ const EditableLabel = require('./components/editable-label') const Tooltip = require('./components/tooltip') const TabBar = require('./components/tab-bar') const TokenList = require('./components/token-list') +const AccountOptionsMenus = require('./components/account-options-menus').AccountOptionsMenus; +console.log("AOM",AccountOptionsMenus); module.exports = connect(mapStateToProps)(AccountDetailScreen) @@ -51,6 +53,8 @@ AccountDetailScreen.prototype.render = function () { var identity = props.identities[selected] var account = props.accounts[selected] const { network, conversionRate, currentCurrency } = props + console.log("identity:", identity); + console.log("result:", identity && identity.name); return ( @@ -99,7 +103,10 @@ AccountDetailScreen.prototype.render = function () { // What is shown when not editing + edit text: h('label.editing-label', [h('.edit-text', 'edit')]), - h('h2.font-medium.color-forest', {name: 'edit'}, identity && identity.name), + h('h2.font-medium.color-forest', {name: 'edit'}, [ + identity && identity.name, + h(AccountOptionsMenus, { style: { marginLeft: '35%' }}, []), + ]), ]), h('.flex-row', { style: { diff --git a/ui/responsive/app/app.js b/ui/responsive/app/app.js index e7bde9605..f829dc8fa 100644 --- a/ui/responsive/app/app.js +++ b/ui/responsive/app/app.js @@ -26,6 +26,7 @@ const Loading = require('./components/loading') const SandwichExpando = require('sandwich-expando') const MenuDroppo = require('menu-droppo') const DropMenuItem = require('./components/drop-menu-item') +import { Dropdown, DropdownMenuItem } from './components/dropdown'; const NetworkIndicator = require('./components/network') const Tooltip = require('./components/tooltip') const BuyView = require('./components/buy-button-subview') @@ -295,7 +296,7 @@ App.prototype.renderDropdown = function () { const state = this.state || {} const isOpen = state.isMainMenuOpen - return h(MenuDroppo, { + return h(Dropdown, { isOpen: isOpen, zIndex: 11, onClickOutside: (event) => { @@ -306,43 +307,27 @@ App.prototype.renderDropdown = function () { right: 0, top: '36px', }, - innerStyle: { - background: 'white', - boxShadow: '1px 1px 2px rgba(0,0,0,0.1)', - }, + innerStyle: {}, }, [ // DROP MENU ITEMS - h('style', ` - .drop-menu-item:hover { background:rgb(235, 235, 235); } - .drop-menu-item i { margin: 11px; } - `), - - h(DropMenuItem, { - label: 'Settings', + h(DropdownMenuItem, { closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), - action: () => this.props.dispatch(actions.showConfigPage()), - icon: h('i.fa.fa-gear.fa-lg'), - }), + onClick: () => this.props.dispatch(actions.showConfigPage()), + }, 'Settings'), - h(DropMenuItem, { - label: 'Import Account', + h(DropdownMenuItem, { closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), - action: () => this.props.dispatch(actions.showImportPage()), - icon: h('i.fa.fa-arrow-circle-o-up.fa-lg'), - }), + onClick: () => this.props.dispatch(actions.showImportPage()), + }, 'Import Account'), - h(DropMenuItem, { - label: 'Lock', + h(DropdownMenuItem, { closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), - action: () => this.props.dispatch(actions.lockMetamask()), - icon: h('i.fa.fa-lock.fa-lg'), - }), + onClick: () => this.props.dispatch(actions.lockMetamask()), + }, 'Lock'), - h(DropMenuItem, { - label: 'Info/Help', + h(DropdownMenuItem, { closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), - action: () => this.props.dispatch(actions.showInfoPage()), - icon: h('i.fa.fa-question.fa-lg'), - }), + onClick: () => this.props.dispatch(actions.showInfoPage()), + }, 'Info/Help'), ]) } diff --git a/ui/responsive/app/components/account-options-menus.js b/ui/responsive/app/components/account-options-menus.js new file mode 100644 index 000000000..acaf53c9e --- /dev/null +++ b/ui/responsive/app/components/account-options-menus.js @@ -0,0 +1,77 @@ +const Component = require('react').Component; +const PropTypes = require('react').PropTypes; +const h = require('react-hyperscript'); +const Dropdown = require('./dropdown').Dropdown; +const DropdownMenuItem = require('./dropdown').DropdownMenuItem; + +class AccountOptionsMenus extends Component { + constructor(props) { + super(props); + this.state = { + overflowMenuActive: false, + switchingMenuActive: false, + }; + console.log("state:", this.state); + } + + render() { + console.log("RENDERING AcountOptionsMenus"); + return h( + 'span', + { + style: this.props.style, + }, + [ + h( + 'i.fa.fa-angle-down', + { + onClick: (event) => { + event.stopPropagation(); + this.setState({ switchingMenuActive: !this.state.switchingMenuActive }) + } + }, + [ + h( + Dropdown, + { + isOpen: this.state.switchingMenuActive, + onClickOutside: () => { this.setState({ switchingMenuActive: false})} + }, + [ + h(DropdownMenuItem, { + }, 'Settings'), + ] + ) + ], + ), + h( + 'i.fa.fa-ellipsis-h', + { + style: { 'marginLeft': '10px'}, + onClick: () => { this.setState({ switchingMenuActive: !this.state.switchingMenuActive }) } + }, + [ + h( + Dropdown, + { + isOpen: this.state.overflowMenuActive, + onClickOutside: (event) => { + event.stopPropagation(); + this.setState({ overflowMenuActive: false}) + } + }, + [ + h(DropdownMenuItem, { + }, 'Settings'), + ] + ) + ] + ) + ] + ) + } +} + +module.exports = { + AccountOptionsMenus, +}; \ No newline at end of file diff --git a/ui/responsive/app/components/editable-label.js b/ui/responsive/app/components/editable-label.js index 41936f5e0..43841bdd8 100644 --- a/ui/responsive/app/components/editable-label.js +++ b/ui/responsive/app/components/editable-label.js @@ -30,12 +30,15 @@ EditableLabel.prototype.render = function () { } else { return h('div.name-label', { onClick: (event) => { - this.setState({ isEditingLabel: true }) + if (event.target.getAttribute('name') === 'edit') { + this.setState({ isEditingLabel: true }) + } }, }, this.props.children) } } - +// class = edit-text +// name = edit EditableLabel.prototype.saveIfEnter = function (event) { if (event.key === 'Enter') { this.saveText() -- cgit From b05775bfa40f5a36d3da223908c94eec50415214 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Fri, 14 Jul 2017 02:49:07 -0700 Subject: Fix click handlers on AccountOptionsMenus --- ui/responsive/app/components/account-options-menus.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'ui/responsive') diff --git a/ui/responsive/app/components/account-options-menus.js b/ui/responsive/app/components/account-options-menus.js index acaf53c9e..ce2699b38 100644 --- a/ui/responsive/app/components/account-options-menus.js +++ b/ui/responsive/app/components/account-options-menus.js @@ -48,17 +48,17 @@ class AccountOptionsMenus extends Component { 'i.fa.fa-ellipsis-h', { style: { 'marginLeft': '10px'}, - onClick: () => { this.setState({ switchingMenuActive: !this.state.switchingMenuActive }) } + onClick: (event) => { + event.stopPropagation(); + this.setState({ overflowMenuActive: !this.state.overflowMenuActive }) + } }, [ h( Dropdown, { isOpen: this.state.overflowMenuActive, - onClickOutside: (event) => { - event.stopPropagation(); - this.setState({ overflowMenuActive: false}) - } + onClickOutside: () => { this.setState({ overflowMenuActive: false})} }, [ h(DropdownMenuItem, { -- cgit From fce7bf3a1ca3c3b1b84173355965d8dc511effdc Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 18 Jul 2017 05:25:16 -0700 Subject: Remove accounts screen --- ui/responsive/app/accounts/account-list-item.js | 91 --------- ui/responsive/app/accounts/index.js | 163 ---------------- ui/responsive/app/components/account-dropdowns.js | 217 ++++++++++++++++++++++ ui/responsive/app/components/dropdown.js | 44 +++-- 4 files changed, 244 insertions(+), 271 deletions(-) delete mode 100644 ui/responsive/app/accounts/account-list-item.js delete mode 100644 ui/responsive/app/accounts/index.js create mode 100644 ui/responsive/app/components/account-dropdowns.js (limited to 'ui/responsive') diff --git a/ui/responsive/app/accounts/account-list-item.js b/ui/responsive/app/accounts/account-list-item.js deleted file mode 100644 index 10a0b6cc7..000000000 --- a/ui/responsive/app/accounts/account-list-item.js +++ /dev/null @@ -1,91 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const ethUtil = require('ethereumjs-util') - -const EthBalance = require('../components/eth-balance') -const CopyButton = require('../components/copyButton') -const Identicon = require('../components/identicon') - -module.exports = AccountListItem - -inherits(AccountListItem, Component) -function AccountListItem () { - Component.call(this) -} - -AccountListItem.prototype.render = function () { - const { identity, selectedAddress, accounts, onShowDetail, - conversionRate, currentCurrency } = this.props - - const checksumAddress = identity && identity.address && ethUtil.toChecksumAddress(identity.address) - const isSelected = selectedAddress === identity.address - const account = accounts[identity.address] - const selectedClass = isSelected ? '.selected' : '' - - return ( - h(`.accounts-list-option.flex-row.flex-space-between.pointer.hover-white${selectedClass}`, { - key: `account-panel-${identity.address}`, - onClick: (event) => onShowDetail(identity.address, event), - }, [ - - h('.identicon-wrapper.flex-column.flex-center.select-none', [ - this.pendingOrNot(), - this.indicateIfLoose(), - h(Identicon, { - address: identity.address, - imageify: true, - }), - ]), - - // account address, balance - h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', { - style: { - width: '200px', - }, - }, [ - h('span', identity.name), - h('span.font-small', { - style: { - overflow: 'hidden', - textOverflow: 'ellipsis', - }, - }, checksumAddress), - h(EthBalance, { - value: account && account.balance, - currentCurrency, - conversionRate, - style: { - lineHeight: '7px', - marginTop: '10px', - }, - }), - ]), - - // copy button - h('.identity-copy.flex-column', { - style: { - margin: '0 20px', - }, - }, [ - h(CopyButton, { - value: checksumAddress, - }), - ]), - ]) - ) -} - -AccountListItem.prototype.indicateIfLoose = function () { - try { // Sometimes keyrings aren't loaded yet: - const type = this.props.keyring.type - const isLoose = type !== 'HD Key Tree' - return isLoose ? h('.keyring-label', 'LOOSE') : null - } catch (e) { return } -} - -AccountListItem.prototype.pendingOrNot = function () { - const pending = this.props.pending - if (pending.length === 0) return null - return h('.pending-dot', pending.length) -} diff --git a/ui/responsive/app/accounts/index.js b/ui/responsive/app/accounts/index.js deleted file mode 100644 index 3e0830b63..000000000 --- a/ui/responsive/app/accounts/index.js +++ /dev/null @@ -1,163 +0,0 @@ -const inherits = require('util').inherits -const Component = require('react').Component -const h = require('react-hyperscript') -const connect = require('react-redux').connect -const actions = require('../actions') -const valuesFor = require('../util').valuesFor -const findDOMNode = require('react-dom').findDOMNode -const AccountListItem = require('./account-list-item') - -module.exports = connect(mapStateToProps)(AccountsScreen) - -function mapStateToProps (state) { - const pendingTxs = valuesFor(state.metamask.unapprovedTxs) - .filter(txMeta => txMeta.metamaskNetworkId === state.metamask.network) - const pendingMsgs = valuesFor(state.metamask.unapprovedMsgs) - const pending = pendingTxs.concat(pendingMsgs) - - return { - accounts: state.metamask.accounts, - identities: state.metamask.identities, - unapprovedTxs: state.metamask.unapprovedTxs, - selectedAddress: state.metamask.selectedAddress, - scrollToBottom: state.appState.scrollToBottom, - pending, - keyrings: state.metamask.keyrings, - conversionRate: state.metamask.conversionRate, - currentCurrency: state.metamask.currentCurrency, - } -} - -inherits(AccountsScreen, Component) -function AccountsScreen () { - Component.call(this) -} - -AccountsScreen.prototype.render = function () { - const props = this.props - const { keyrings, conversionRate, currentCurrency } = props - const identityList = valuesFor(props.identities) - const unapprovedTxList = valuesFor(props.unapprovedTxs) - - return ( - - h('.accounts-section.flex-grow', [ - - // subtitle and nav - h('.section-title.flex-center', [ - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { - onClick: this.goHome.bind(this), - }), - h('h2.page-subtitle', 'Select Account'), - ]), - - h('hr.horizontal-line'), - - // identity selection - h('section.identity-section', { - style: { - overflowY: 'auto', - overflowX: 'hidden', - }, - }, - [ - identityList.map((identity) => { - const pending = this.props.pending.filter((txOrMsg) => { - if ('txParams' in txOrMsg) { - return txOrMsg.txParams.from === identity.address - } else if ('msgParams' in txOrMsg) { - return txOrMsg.msgParams.from === identity.address - } else { - return false - } - }) - - const simpleAddress = identity.address.substring(2).toLowerCase() - const keyring = keyrings.find((kr) => { - return kr.accounts.includes(simpleAddress) || - kr.accounts.includes(identity.address) - }) - - return h(AccountListItem, { - key: `acct-panel-${identity.address}`, - identity, - selectedAddress: this.props.selectedAddress, - conversionRate, - currentCurrency, - accounts: this.props.accounts, - onShowDetail: this.onShowDetail.bind(this), - pending, - keyring, - }) - }), - - h('hr.horizontal-line'), - h('div.footer.hover-white.pointer', { - key: 'reveal-account-bar', - onClick: () => { - this.addNewAccount() - }, - style: { - display: 'flex', - height: '40px', - padding: '10px', - justifyContent: 'center', - alignItems: 'center', - }, - }, [ - h('i.fa.fa-plus.fa-lg', {key: ''}), - ]), - h('hr.horizontal-line'), - ]), - - unapprovedTxList.length ? ( - - h('.unconftx-link.flex-row.flex-center', { - onClick: this.navigateToConfTx.bind(this), - }, [ - h('span', 'Unconfirmed Txs'), - h('i.fa.fa-arrow-right.fa-lg'), - ]) - - ) : ( - null - ), - ]) - ) -} - -// If a new account was revealed, scroll to the bottom -AccountsScreen.prototype.componentDidUpdate = function () { - const scrollToBottom = this.props.scrollToBottom - - if (scrollToBottom) { - var container = findDOMNode(this) - var scrollable = container.querySelector('.identity-section') - scrollable.scrollTop = scrollable.scrollHeight - } -} - -AccountsScreen.prototype.navigateToConfTx = function () { - event.stopPropagation() - this.props.dispatch(actions.showConfTxPage()) -} - -AccountsScreen.prototype.onShowDetail = function (address, event) { - event.stopPropagation() - this.props.dispatch(actions.showAccountDetail(address)) -} - -AccountsScreen.prototype.addNewAccount = function () { - this.props.dispatch(actions.addNewAccount(0)) -} - -/* An optional view proposed in this design: - * https://consensys.quip.com/zZVrAysM5znY -AccountsScreen.prototype.addNewAccount = function () { - this.props.dispatch(actions.navigateToNewAccountScreen()) -} -*/ - -AccountsScreen.prototype.goHome = function () { - this.props.dispatch(actions.goHome()) -} diff --git a/ui/responsive/app/components/account-dropdowns.js b/ui/responsive/app/components/account-dropdowns.js new file mode 100644 index 000000000..cbb97b2cb --- /dev/null +++ b/ui/responsive/app/components/account-dropdowns.js @@ -0,0 +1,217 @@ +const Component = require('react').Component +const PropTypes = require('react').PropTypes +const h = require('react-hyperscript') +const actions = require('../actions') +const genAccountLink = require('../../lib/account-link.js') +const connect = require('react-redux').connect +const Dropdown = require('./dropdown').Dropdown +const DropdownMenuItem = require('./dropdown').DropdownMenuItem +const Identicon = require('./identicon') +const ethUtil = require('ethereumjs-util') +const copyToClipboard = require('copy-to-clipboard') + +class AccountDropdowns extends Component { + constructor (props) { + super(props) + this.state = { + overflowMenuActive: false, + switchingMenuActive: false, + } + } + + getAccounts () { + const { identities, selected } = this.props + + return Object.keys(identities).map((key) => { + const identity = identities[key] + const isSelected = identity.address === selected + + return h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => { + this.props.actions.showAccountDetail(identity.address) + }, + }, + [ + h( + Identicon, + { + address: identity.address, + diameter: 16, + }, + ), + h('span', { style: { marginLeft: '10px' } }, identity.name || ''), + h('span', { style: { marginLeft: '10px' } }, isSelected ? h('.check', '✓') : null), + ] + ) + }) + } + + render () { + const { style, actions } = this.props + const { switchingMenuActive, overflowMenuActive } = this.state + + return h( + 'span', + { + style: style, + }, + [ + h( + 'i.fa.fa-angle-down', + { + style: {}, + onClick: (event) => { + event.stopPropagation() + this.setState({ + switchingMenuActive: !switchingMenuActive, + overflowMenuActive: false, + }) + }, + }, + [ + h( + Dropdown, + { + style: { + marginLeft: '-140px', + minWidth: '180px', + }, + isOpen: switchingMenuActive, + onClickOutside: () => { this.setState({ switchingMenuActive: false}) }, + }, + [ + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => actions.showConfigPage(), + }, + 'Account Settings', + ), + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => { + const { selected, network } = this.props + const url = genAccountLink(selected, network) + global.platform.openWindow({ url }) + }, + }, + 'View account on Etherscan', + ), + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => { + const { selected } = this.props + const checkSumAddress = selected && ethUtil.toChecksumAddress(selected) + copyToClipboard(checkSumAddress) + }, + }, + 'Copy Address to clipboard', + ), + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => { + actions.requestAccountExport() + }, + }, + 'Export Private Key', + ), + ] + ), + ], + ), + h( + 'i.fa.fa-ellipsis-h', + { + style: { 'marginLeft': '10px'}, + onClick: (event) => { + event.stopPropagation() + this.setState({ + overflowMenuActive: !overflowMenuActive, + switchingMenuActive: false, + }) + }, + }, + [ + h( + Dropdown, + { + style: { + marginLeft: '-155px', + minWidth: '180px', + }, + isOpen: overflowMenuActive, + onClickOutside: () => { this.setState({ overflowMenuActive: false}) }, + }, + [ + ...this.getAccounts(), + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => actions.addNewAccount(), + }, + [ + h( + Identicon, + { + diameter: 16, + }, + ), + h('span', { style: { marginLeft: '10px' } }, 'Create Account'), + ], + ), + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => actions.showImportPage(), + }, + [ + h( + Identicon, + { + diameter: 16, + }, + ), + h('span', { style: { marginLeft: '10px' } }, 'Import Account'), + ] + ), + ] + ), + ] + ), + ] + ) + } +} + +AccountDropdowns.propTypes = { + identities: PropTypes.objectOf(PropTypes.object), + selected: PropTypes.string, +} + +const mapDispatchToProps = (dispatch, ownProps) => { + return { + actions: { + showConfigPage: () => dispatch(actions.showConfigPage()), + requestAccountExport: () => dispatch(actions.requestExportAccount()), + showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)), + addNewAccount: () => dispatch(actions.addNewAccount()), + showImportPage: () => dispatch(actions.showImportPage()), + }, + } +} + +module.exports = { + AccountDropdowns: connect(null, mapDispatchToProps)(AccountDropdowns), +} diff --git a/ui/responsive/app/components/dropdown.js b/ui/responsive/app/components/dropdown.js index 6e09cd133..e77b4c40c 100644 --- a/ui/responsive/app/components/dropdown.js +++ b/ui/responsive/app/components/dropdown.js @@ -1,11 +1,13 @@ -const Component = require('react').Component; -const PropTypes = require('react').PropTypes; -const h = require('react-hyperscript'); -const MenuDroppo = require('menu-droppo'); +const Component = require('react').Component +const PropTypes = require('react').PropTypes +const h = require('react-hyperscript') +const MenuDroppo = require('menu-droppo') + +const noop = () => {} class Dropdown extends Component { - render() { - const { isOpen, onClickOutside, style, children } = this.props; + render () { + const { isOpen, onClickOutside, style, children } = this.props return h( MenuDroppo, @@ -30,27 +32,34 @@ class Dropdown extends Component { ` ), ...children, - ], - ); + ] + ) } } +Dropdown.defaultProps = { + isOpen: false, + onClick: noop, +} + Dropdown.propTypes = { - isOpen: PropTypes.func.isRequired, + isOpen: PropTypes.bool.isRequired, onClick: PropTypes.func.isRequired, children: PropTypes.node, - style: PropTypes.object.isRequired, + style: PropTypes.object.isRequired, } class DropdownMenuItem extends Component { - render() { - const { onClick, closeMenu, children } = this.props; + render () { + const { onClick, closeMenu, children } = this.props return h( 'li.dropdown-menu-item', { - onClick, - closeMenu, + onClick: () => { + onClick() + closeMenu() + }, style: { listStyle: 'none', padding: '8px 0px 8px 0px', @@ -60,10 +69,11 @@ class DropdownMenuItem extends Component { cursor: 'pointer', display: 'flex', justifyContent: 'flex-start', + alignItems: 'center', }, }, children - ); + ) } } @@ -71,9 +81,9 @@ DropdownMenuItem.propTypes = { closeMenu: PropTypes.func.isRequired, onClick: PropTypes.func.isRequired, children: PropTypes.node, -}; +} module.exports = { Dropdown, DropdownMenuItem, -}; \ No newline at end of file +} -- cgit From b9dfb3cd1e825961dd3e32065d2bf377f2f59355 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 18 Jul 2017 05:25:58 -0700 Subject: Remove account options icons --- ui/responsive/app/components/account-info-link.js | 41 ------------ .../app/components/account-options-menus.js | 77 ---------------------- ui/responsive/app/components/drop-menu-item.js | 59 ----------------- 3 files changed, 177 deletions(-) delete mode 100644 ui/responsive/app/components/account-info-link.js delete mode 100644 ui/responsive/app/components/account-options-menus.js delete mode 100644 ui/responsive/app/components/drop-menu-item.js (limited to 'ui/responsive') diff --git a/ui/responsive/app/components/account-info-link.js b/ui/responsive/app/components/account-info-link.js deleted file mode 100644 index 6526ab502..000000000 --- a/ui/responsive/app/components/account-info-link.js +++ /dev/null @@ -1,41 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const Tooltip = require('./tooltip') -const genAccountLink = require('../../lib/account-link') - -module.exports = AccountInfoLink - -inherits(AccountInfoLink, Component) -function AccountInfoLink () { - Component.call(this) -} - -AccountInfoLink.prototype.render = function () { - const { selected, network } = this.props - const title = 'View account on Etherscan' - const url = genAccountLink(selected, network) - - if (!url) { - return null - } - - return h('.account-info-link', { - style: { - display: 'flex', - alignItems: 'center', - }, - }, [ - - h(Tooltip, { - title, - }, [ - h('i.fa.fa-info-circle.cursor-pointer.color-orange', { - style: { - margin: '5px', - }, - onClick () { global.platform.openWindow({ url }) }, - }), - ]), - ]) -} diff --git a/ui/responsive/app/components/account-options-menus.js b/ui/responsive/app/components/account-options-menus.js deleted file mode 100644 index ce2699b38..000000000 --- a/ui/responsive/app/components/account-options-menus.js +++ /dev/null @@ -1,77 +0,0 @@ -const Component = require('react').Component; -const PropTypes = require('react').PropTypes; -const h = require('react-hyperscript'); -const Dropdown = require('./dropdown').Dropdown; -const DropdownMenuItem = require('./dropdown').DropdownMenuItem; - -class AccountOptionsMenus extends Component { - constructor(props) { - super(props); - this.state = { - overflowMenuActive: false, - switchingMenuActive: false, - }; - console.log("state:", this.state); - } - - render() { - console.log("RENDERING AcountOptionsMenus"); - return h( - 'span', - { - style: this.props.style, - }, - [ - h( - 'i.fa.fa-angle-down', - { - onClick: (event) => { - event.stopPropagation(); - this.setState({ switchingMenuActive: !this.state.switchingMenuActive }) - } - }, - [ - h( - Dropdown, - { - isOpen: this.state.switchingMenuActive, - onClickOutside: () => { this.setState({ switchingMenuActive: false})} - }, - [ - h(DropdownMenuItem, { - }, 'Settings'), - ] - ) - ], - ), - h( - 'i.fa.fa-ellipsis-h', - { - style: { 'marginLeft': '10px'}, - onClick: (event) => { - event.stopPropagation(); - this.setState({ overflowMenuActive: !this.state.overflowMenuActive }) - } - }, - [ - h( - Dropdown, - { - isOpen: this.state.overflowMenuActive, - onClickOutside: () => { this.setState({ overflowMenuActive: false})} - }, - [ - h(DropdownMenuItem, { - }, 'Settings'), - ] - ) - ] - ) - ] - ) - } -} - -module.exports = { - AccountOptionsMenus, -}; \ No newline at end of file diff --git a/ui/responsive/app/components/drop-menu-item.js b/ui/responsive/app/components/drop-menu-item.js deleted file mode 100644 index e42948209..000000000 --- a/ui/responsive/app/components/drop-menu-item.js +++ /dev/null @@ -1,59 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits - -module.exports = DropMenuItem - -inherits(DropMenuItem, Component) -function DropMenuItem () { - Component.call(this) -} - -DropMenuItem.prototype.render = function () { - return h('li.drop-menu-item', { - onClick: () => { - this.props.closeMenu() - this.props.action() - }, - style: { - listStyle: 'none', - padding: '6px 16px 6px 5px', - fontFamily: 'Montserrat Regular', - color: 'rgb(125, 128, 130)', - cursor: 'pointer', - display: 'flex', - justifyContent: 'flex-start', - }, - }, [ - this.props.icon, - this.props.label, - this.activeNetworkRender(), - ]) -} - -DropMenuItem.prototype.activeNetworkRender = function () { - const activeNetwork = this.props.activeNetworkRender - const { provider } = this.props - const providerType = provider ? provider.type : null - if (activeNetwork === undefined) return - - switch (this.props.label) { - case 'Main Ethereum Network': - if (providerType === 'mainnet') return h('.check', '✓') - break - case 'Ropsten Test Network': - if (providerType === 'ropsten') return h('.check', '✓') - break - case 'Kovan Test Network': - if (providerType === 'kovan') return h('.check', '✓') - break - case 'Rinkeby Test Network': - if (providerType === 'rinkeby') return h('.check', '✓') - break - case 'Localhost 8545': - if (activeNetwork === 'http://localhost:8545') return h('.check', '✓') - break - default: - if (activeNetwork === 'custom') return h('.check', '✓') - } -} -- cgit From f329c232a23e849a178381e92f3042d1d97303f2 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 18 Jul 2017 05:26:31 -0700 Subject: Hook up new dropdown components --- ui/responsive/app/account-detail.js | 102 ++++------ ui/responsive/app/app.js | 224 +++++++++++----------- ui/responsive/app/components/account-dropdowns.js | 2 +- ui/responsive/app/components/editable-label.js | 8 +- ui/responsive/app/components/network.js | 1 - 5 files changed, 157 insertions(+), 180 deletions(-) (limited to 'ui/responsive') diff --git a/ui/responsive/app/account-detail.js b/ui/responsive/app/account-detail.js index 9a837a121..da1ddf98b 100644 --- a/ui/responsive/app/account-detail.js +++ b/ui/responsive/app/account-detail.js @@ -3,23 +3,18 @@ const extend = require('xtend') const Component = require('react').Component const h = require('react-hyperscript') const connect = require('react-redux').connect -const CopyButton = require('./components/copyButton') -const AccountInfoLink = require('./components/account-info-link') const actions = require('./actions') const ReactCSSTransitionGroup = require('react-addons-css-transition-group') const valuesFor = require('./util').valuesFor - const Identicon = require('./components/identicon') const EthBalance = require('./components/eth-balance') const TransactionList = require('./components/transaction-list') const ExportAccountView = require('./components/account-export') const ethUtil = require('ethereumjs-util') const EditableLabel = require('./components/editable-label') -const Tooltip = require('./components/tooltip') const TabBar = require('./components/tab-bar') const TokenList = require('./components/token-list') -const AccountOptionsMenus = require('./components/account-options-menus').AccountOptionsMenus; -console.log("AOM",AccountOptionsMenus); +const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns module.exports = connect(mapStateToProps)(AccountDetailScreen) @@ -53,8 +48,6 @@ AccountDetailScreen.prototype.render = function () { var identity = props.identities[selected] var account = props.accounts[selected] const { network, conversionRate, currentCurrency } = props - console.log("identity:", identity); - console.log("result:", identity && identity.name); return ( @@ -103,10 +96,41 @@ AccountDetailScreen.prototype.render = function () { // What is shown when not editing + edit text: h('label.editing-label', [h('.edit-text', 'edit')]), - h('h2.font-medium.color-forest', {name: 'edit'}, [ - identity && identity.name, - h(AccountOptionsMenus, { style: { marginLeft: '35%' }}, []), - ]), + h( + 'div', + { + style: { + display: 'flex', + justifyContent: 'flex-start', + alignItems: 'center', + }, + }, + [ + h( + 'h2.font-medium.color-forest', + { + name: 'edit', + style: { + }, + }, + [ + identity && identity.name, + ] + ), + h( + AccountDropdowns, + { + style: { + marginRight: '8px', + marginLeft: 'auto', + }, + selected, + network, + identities: props.identities, + }, + ), + ] + ), ]), h('.flex-row', { style: { @@ -132,56 +156,6 @@ AccountDetailScreen.prototype.render = function () { color: '#AEAEAE', }, }, checksumAddress), - - // copy and export - - h('.flex-row', { - style: { - justifyContent: 'flex-end', - }, - }, [ - - h(AccountInfoLink, { selected, network }), - - h(CopyButton, { - value: checksumAddress, - }), - - h(Tooltip, { - title: 'QR Code', - }, [ - h('i.fa.fa-qrcode.pointer.pop-hover', { - onClick: () => props.dispatch(actions.showQrView(selected, identity ? identity.name : '')), - style: { - fontSize: '18px', - position: 'relative', - color: 'rgb(247, 134, 28)', - top: '5px', - marginLeft: '3px', - marginRight: '3px', - }, - }), - ]), - - h(Tooltip, { - title: 'Export Private Key', - }, [ - h('div', { - style: { - display: 'flex', - alignItems: 'center', - }, - }, [ - h('img.cursor-pointer.color-orange', { - src: 'images/key-32.png', - onClick: () => this.requestAccountExport(selected), - style: { - height: '19px', - }, - }), - ]), - ]), - ]), ]), // account ballence @@ -313,7 +287,3 @@ AccountDetailScreen.prototype.transactionList = function () { }, }) } - -AccountDetailScreen.prototype.requestAccountExport = function () { - this.props.dispatch(actions.requestExportAccount()) -} diff --git a/ui/responsive/app/app.js b/ui/responsive/app/app.js index f829dc8fa..1ac9bea78 100644 --- a/ui/responsive/app/app.js +++ b/ui/responsive/app/app.js @@ -10,7 +10,6 @@ const NewKeyChainScreen = require('./new-keychain') // unlock const UnlockScreen = require('./unlock') // accounts -const AccountsScreen = require('./accounts') const AccountDetailScreen = require('./account-detail') const SendTransactionScreen = require('./send') const ConfirmTxScreen = require('./conf-tx') @@ -24,11 +23,9 @@ const Import = require('./accounts/import') const InfoScreen = require('./info') const Loading = require('./components/loading') const SandwichExpando = require('sandwich-expando') -const MenuDroppo = require('menu-droppo') -const DropMenuItem = require('./components/drop-menu-item') -import { Dropdown, DropdownMenuItem } from './components/dropdown'; +const Dropdown = require('./components/dropdown').Dropdown +const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem const NetworkIndicator = require('./components/network') -const Tooltip = require('./components/tooltip') const BuyView = require('./components/buy-button-subview') const QrView = require('./components/qr-code') const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete') @@ -126,7 +123,7 @@ App.prototype.renderAppBar = function () { alignItems: 'center', visibility: props.isUnlocked ? 'visible' : 'none', background: props.isUnlocked ? 'white' : 'none', - height: '36px', + height: '38px', position: 'relative', zIndex: 12, }, @@ -174,21 +171,6 @@ App.prototype.renderAppBar = function () { }, }, [ - // small accounts nav - props.isUnlocked && h(Tooltip, { title: 'Switch Accounts' }, [ - h('img.cursor-pointer.color-orange', { - src: 'images/switch_acc.svg', - style: { - width: '23.5px', - marginRight: '8px', - }, - onClick: (event) => { - event.stopPropagation() - this.props.dispatch(actions.showAccountsPage()) - }, - }), - ]), - // hamburger props.isUnlocked && h(SandwichExpando, { width: 16, @@ -210,11 +192,12 @@ App.prototype.renderAppBar = function () { App.prototype.renderNetworkDropdown = function () { const props = this.props + const { provider: { type: providerType, rpcTarget: activeNetwork } } = props const rpcList = props.frequentRpcList const state = this.state || {} const isOpen = state.isNetworkMenuOpen - return h(MenuDroppo, { + return h(Dropdown, { isOpen, onClickOutside: (event) => { this.setState({ isNetworkMenuOpen: !isOpen }) @@ -222,73 +205,90 @@ App.prototype.renderNetworkDropdown = function () { zIndex: 11, style: { position: 'absolute', - left: 0, + left: '2px', top: '36px', }, - innerStyle: { - background: 'white', - boxShadow: '1px 1px 2px rgba(0,0,0,0.1)', - }, - }, [ // DROP MENU ITEMS - h('style', ` - .drop-menu-item:hover { background:rgb(235, 235, 235); } - .drop-menu-item i { margin: 11px; } - `), - - h(DropMenuItem, { - label: 'Main Ethereum Network', - closeMenu: () => this.setState({ isNetworkMenuOpen: false }), - action: () => props.dispatch(actions.setProviderType('mainnet')), - icon: h('.menu-icon.diamond'), - activeNetworkRender: props.network, - provider: props.provider, - }), - - h(DropMenuItem, { - label: 'Ropsten Test Network', - closeMenu: () => this.setState({ isNetworkMenuOpen: false }), - action: () => props.dispatch(actions.setProviderType('ropsten')), - icon: h('.menu-icon.red-dot'), - activeNetworkRender: props.network, - provider: props.provider, - }), - - h(DropMenuItem, { - label: 'Kovan Test Network', - closeMenu: () => this.setState({ isNetworkMenuOpen: false}), - action: () => props.dispatch(actions.setProviderType('kovan')), - icon: h('.menu-icon.hollow-diamond'), - activeNetworkRender: props.network, - provider: props.provider, - }), - - h(DropMenuItem, { - label: 'Rinkeby Test Network', - closeMenu: () => this.setState({ isNetworkMenuOpen: false}), - action: () => props.dispatch(actions.setProviderType('rinkeby')), - icon: h('.menu-icon.golden-square'), - activeNetworkRender: props.network, - provider: props.provider, - }), - - h(DropMenuItem, { - label: 'Localhost 8545', - closeMenu: () => this.setState({ isNetworkMenuOpen: false }), - action: () => props.dispatch(actions.setDefaultRpcTarget(rpcList)), - icon: h('i.fa.fa-question-circle.fa-lg'), - activeNetworkRender: props.provider.rpcTarget, - }), + innerStyle: {}, + }, [ + h( + DropdownMenuItem, + { + closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), + onClick: () => props.dispatch(actions.setProviderType('mainnet')), + }, + [ + h('.menu-icon.diamond'), + 'Main Ethereum Network', + providerType === 'mainnet' ? h('.check', '✓') : null, + ] + ), + + h( + DropdownMenuItem, + { + closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), + onClick: () => props.dispatch(actions.setProviderType('ropsten')), + }, + [ + h('.menu-icon.red-dot'), + 'Ropsten Test Network', + providerType === 'ropsten' ? h('.check', '✓') : null, + ]), + + h( + DropdownMenuItem, + { + closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), + onClick: () => props.dispatch(actions.setProviderType('kovan')), + }, + [ + h('.menu-icon.hollow-diamond'), + 'Kovan Test Network', + providerType === 'kovan' ? h('.check', '✓') : null, + ] + ), + + h( + DropdownMenuItem, + { + closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), + onClick: () => props.dispatch(actions.setProviderType('rinkeby')), + }, + [ + h('.menu-icon.golden-square'), + 'Rinkeby Test Network', + providerType === 'rinkeby' ? h('.check', '✓') : null, + ] + ), + + h( + DropdownMenuItem, + { + closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), + onClick: () => props.dispatch(actions.setDefaultRpcTarget(rpcList)), + }, + [ + h('i.fa.fa-question-circle.fa-lg.menu-icon'), + 'Localhost 8545', + activeNetwork === 'http://localhost:8545' ? h('.check', '✓') : null, + ] + ), this.renderCustomOption(props.provider), this.renderCommonRpc(rpcList, props.provider), - h(DropMenuItem, { - label: 'Custom RPC', - closeMenu: () => this.setState({ isNetworkMenuOpen: false }), - action: () => this.props.dispatch(actions.showConfigPage()), - icon: h('i.fa.fa-question-circle.fa-lg'), - }), - + h( + DropdownMenuItem, + { + closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), + onClick: () => this.props.dispatch(actions.showConfigPage()), + }, + [ + h('i.fa.fa-question-circle.fa-lg.menu-icon'), + 'Custom RPC', + activeNetwork === 'custom' ? h('.check', '✓') : null, + ] + ), ]) } @@ -304,29 +304,29 @@ App.prototype.renderDropdown = function () { }, style: { position: 'absolute', - right: 0, - top: '36px', + right: '2px', + top: '38px', }, innerStyle: {}, - }, [ // DROP MENU ITEMS + }, [ h(DropdownMenuItem, { closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), - onClick: () => this.props.dispatch(actions.showConfigPage()), + onClick: () => { this.props.dispatch(actions.showConfigPage()) }, }, 'Settings'), h(DropdownMenuItem, { closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), - onClick: () => this.props.dispatch(actions.showImportPage()), + onClick: () => { this.props.dispatch(actions.showImportPage()) }, }, 'Import Account'), h(DropdownMenuItem, { closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), - onClick: () => this.props.dispatch(actions.lockMetamask()), + onClick: () => { this.props.dispatch(actions.lockMetamask()) }, }, 'Lock'), h(DropdownMenuItem, { closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), - onClick: () => this.props.dispatch(actions.showInfoPage()), + onClick: () => { this.props.dispatch(actions.showInfoPage()) }, }, 'Info/Help'), ]) } @@ -413,10 +413,6 @@ App.prototype.renderPrimary = function () { // show current view switch (props.currentView.name) { - case 'accounts': - log.debug('rendering accounts screen') - return h(AccountsScreen, {key: 'accounts'}) - case 'accountDetail': log.debug('rendering account detail screen') return h(AccountDetailScreen, {key: 'account-detail'}) @@ -519,13 +515,18 @@ App.prototype.renderCustomOption = function (provider) { return null default: - return h(DropMenuItem, { - label, - key: rpcTarget, - closeMenu: () => this.setState({ isNetworkMenuOpen: false }), - icon: h('i.fa.fa-question-circle.fa-lg'), - activeNetworkRender: 'custom', - }) + return h( + DropdownMenuItem, + { + key: rpcTarget, + closeMenu: () => this.setState({ isNetworkMenuOpen: false }), + }, + [ + h('i.fa.fa-question-circle.fa-lg.menu-icon'), + label, + h('.check', '✓'), + ] + ) } } @@ -558,14 +559,19 @@ App.prototype.renderCommonRpc = function (rpcList, provider) { if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) { return null } else { - return h(DropMenuItem, { - label: rpc, - key: rpc, - closeMenu: () => this.setState({ isNetworkMenuOpen: false }), - action: () => props.dispatch(actions.setRpcTarget(rpc)), - icon: h('i.fa.fa-question-circle.fa-lg'), - activeNetworkRender: rpc, - }) + return h( + DropdownMenuItem, + { + key: rpc, + closeMenu: () => this.setState({ isNetworkMenuOpen: false }), + action: () => props.dispatch(actions.setRpcTarget(rpc)), + }, + [ + h('i.fa.fa-question-circle.fa-lg.menu-icon'), + rpc, + h('.check', '✓'), + ] + ) } }) } diff --git a/ui/responsive/app/components/account-dropdowns.js b/ui/responsive/app/components/account-dropdowns.js index cbb97b2cb..f77d2fe9c 100644 --- a/ui/responsive/app/components/account-dropdowns.js +++ b/ui/responsive/app/components/account-dropdowns.js @@ -200,7 +200,7 @@ AccountDropdowns.propTypes = { selected: PropTypes.string, } -const mapDispatchToProps = (dispatch, ownProps) => { +const mapDispatchToProps = (dispatch) => { return { actions: { showConfigPage: () => dispatch(actions.showConfigPage()), diff --git a/ui/responsive/app/components/editable-label.js b/ui/responsive/app/components/editable-label.js index 43841bdd8..167be7eaf 100644 --- a/ui/responsive/app/components/editable-label.js +++ b/ui/responsive/app/components/editable-label.js @@ -30,15 +30,17 @@ EditableLabel.prototype.render = function () { } else { return h('div.name-label', { onClick: (event) => { - if (event.target.getAttribute('name') === 'edit') { + const nameAttribute = event.target.getAttribute('name') + // checks for class to handle smaller CTA above the account name + const classAttribute = event.target.getAttribute('class') + if (nameAttribute === 'edit' || classAttribute === 'edit-text') { this.setState({ isEditingLabel: true }) } }, }, this.props.children) } } -// class = edit-text -// name = edit + EditableLabel.prototype.saveIfEnter = function (event) { if (event.key === 'Enter') { this.saveText() diff --git a/ui/responsive/app/components/network.js b/ui/responsive/app/components/network.js index d5d3e18cd..698a0bbb9 100644 --- a/ui/responsive/app/components/network.js +++ b/ui/responsive/app/components/network.js @@ -39,7 +39,6 @@ Network.prototype.render = function () { }), h('i.fa.fa-sort-desc'), ]) - } else if (providerName === 'mainnet') { hoverText = 'Main Ethereum Network' iconName = 'ethereum-network' -- cgit From 9e8e445695585f47e9cc3f63b2ec8313b4fc4eb8 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 18 Jul 2017 09:29:52 -0700 Subject: Reorder Account Selector and Account Options --- ui/responsive/app/app.js | 5 +- ui/responsive/app/components/account-dropdowns.js | 238 +++++++++++----------- 2 files changed, 128 insertions(+), 115 deletions(-) (limited to 'ui/responsive') diff --git a/ui/responsive/app/app.js b/ui/responsive/app/app.js index 1ac9bea78..1cfa2d7a9 100644 --- a/ui/responsive/app/app.js +++ b/ui/responsive/app/app.js @@ -210,6 +210,7 @@ App.prototype.renderNetworkDropdown = function () { }, innerStyle: {}, }, [ + h( DropdownMenuItem, { @@ -233,7 +234,8 @@ App.prototype.renderNetworkDropdown = function () { h('.menu-icon.red-dot'), 'Ropsten Test Network', providerType === 'ropsten' ? h('.check', '✓') : null, - ]), + ] + ), h( DropdownMenuItem, @@ -289,6 +291,7 @@ App.prototype.renderNetworkDropdown = function () { activeNetwork === 'custom' ? h('.check', '✓') : null, ] ), + ]) } diff --git a/ui/responsive/app/components/account-dropdowns.js b/ui/responsive/app/components/account-dropdowns.js index f77d2fe9c..d1d319477 100644 --- a/ui/responsive/app/components/account-dropdowns.js +++ b/ui/responsive/app/components/account-dropdowns.js @@ -14,12 +14,12 @@ class AccountDropdowns extends Component { constructor (props) { super(props) this.state = { - overflowMenuActive: false, - switchingMenuActive: false, + accountSelectorActive: false, + optionsMenuActive: false, } } - getAccounts () { + renderAccounts () { const { identities, selected } = this.props return Object.keys(identities).map((key) => { @@ -49,9 +49,122 @@ class AccountDropdowns extends Component { }) } + renderAccountSelector () { + const { actions } = this.props + const { accountSelectorActive } = this.state + + return h( + Dropdown, + { + style: { + marginLeft: '-125px', + minWidth: '180px', + }, + isOpen: accountSelectorActive, + onClickOutside: () => { this.setState({ accountSelectorActive: false }) }, + }, + [ + ...this.renderAccounts(), + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => actions.addNewAccount(), + }, + [ + h( + Identicon, + { + diameter: 16, + }, + ), + h('span', { style: { marginLeft: '10px' } }, 'Create Account'), + ], + ), + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => actions.showImportPage(), + }, + [ + h( + Identicon, + { + diameter: 16, + }, + ), + h('span', { style: { marginLeft: '10px' } }, 'Import Account'), + ] + ), + ] + ) + } + + renderAccountOptions () { + const { actions } = this.props + const { optionsMenuActive } = this.state + + return h( + Dropdown, + { + style: { + marginLeft: '-162px', + minWidth: '180px', + }, + isOpen: optionsMenuActive, + onClickOutside: () => { this.setState({ optionsMenuActive: false }) }, + }, + [ + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => actions.showConfigPage(), + }, + 'Account Settings', + ), + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => { + const { selected, network } = this.props + const url = genAccountLink(selected, network) + global.platform.openWindow({ url }) + }, + }, + 'View account on Etherscan', + ), + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => { + const { selected } = this.props + const checkSumAddress = selected && ethUtil.toChecksumAddress(selected) + copyToClipboard(checkSumAddress) + }, + }, + 'Copy Address to clipboard', + ), + h( + DropdownMenuItem, + { + closeMenu: () => {}, + onClick: () => { + actions.requestAccountExport() + }, + }, + 'Export Private Key', + ), + ] + ) + } + render () { - const { style, actions } = this.props - const { switchingMenuActive, overflowMenuActive } = this.state + const { style } = this.props + const { optionsMenuActive, accountSelectorActive } = this.state return h( 'span', @@ -66,68 +179,12 @@ class AccountDropdowns extends Component { onClick: (event) => { event.stopPropagation() this.setState({ - switchingMenuActive: !switchingMenuActive, - overflowMenuActive: false, + accountSelectorActive: !accountSelectorActive, + optionsMenuActive: false, }) }, }, - [ - h( - Dropdown, - { - style: { - marginLeft: '-140px', - minWidth: '180px', - }, - isOpen: switchingMenuActive, - onClickOutside: () => { this.setState({ switchingMenuActive: false}) }, - }, - [ - h( - DropdownMenuItem, - { - closeMenu: () => {}, - onClick: () => actions.showConfigPage(), - }, - 'Account Settings', - ), - h( - DropdownMenuItem, - { - closeMenu: () => {}, - onClick: () => { - const { selected, network } = this.props - const url = genAccountLink(selected, network) - global.platform.openWindow({ url }) - }, - }, - 'View account on Etherscan', - ), - h( - DropdownMenuItem, - { - closeMenu: () => {}, - onClick: () => { - const { selected } = this.props - const checkSumAddress = selected && ethUtil.toChecksumAddress(selected) - copyToClipboard(checkSumAddress) - }, - }, - 'Copy Address to clipboard', - ), - h( - DropdownMenuItem, - { - closeMenu: () => {}, - onClick: () => { - actions.requestAccountExport() - }, - }, - 'Export Private Key', - ), - ] - ), - ], + this.renderAccountSelector(), ), h( 'i.fa.fa-ellipsis-h', @@ -136,59 +193,12 @@ class AccountDropdowns extends Component { onClick: (event) => { event.stopPropagation() this.setState({ - overflowMenuActive: !overflowMenuActive, - switchingMenuActive: false, + accountSelectorActive: false, + optionsMenuActive: !optionsMenuActive, }) }, }, - [ - h( - Dropdown, - { - style: { - marginLeft: '-155px', - minWidth: '180px', - }, - isOpen: overflowMenuActive, - onClickOutside: () => { this.setState({ overflowMenuActive: false}) }, - }, - [ - ...this.getAccounts(), - h( - DropdownMenuItem, - { - closeMenu: () => {}, - onClick: () => actions.addNewAccount(), - }, - [ - h( - Identicon, - { - diameter: 16, - }, - ), - h('span', { style: { marginLeft: '10px' } }, 'Create Account'), - ], - ), - h( - DropdownMenuItem, - { - closeMenu: () => {}, - onClick: () => actions.showImportPage(), - }, - [ - h( - Identicon, - { - diameter: 16, - }, - ), - h('span', { style: { marginLeft: '10px' } }, 'Import Account'), - ] - ), - ] - ), - ] + this.renderAccountOptions() ), ] ) -- cgit