From f88373237bebbaf286cab9085871166307ae9ab1 Mon Sep 17 00:00:00 2001 From: Santiago Gonzalez Toral Date: Tue, 2 Oct 2018 20:29:03 -0500 Subject: [PATCH] Added account options on home screen --- app/_locales/en/messages.json | 6 + app/images/expand.svg | 13 +++ app/images/hide.svg | 16 +++ app/images/info.svg | 17 +++ app/images/open-etherscan.svg | 12 ++ test/e2e/beta/metamask-beta-ui.spec.js | 11 ++ .../dropdowns/account-details-dropdown.js | 109 ++++++++++++++++++ .../components/menu-bar/menu-bar.component.js | 19 ++- .../components/account-details-dropdown.scss | 7 ++ ui/app/css/itcss/components/index.scss | 2 + 10 files changed, 208 insertions(+), 4 deletions(-) create mode 100644 app/images/expand.svg create mode 100644 app/images/hide.svg create mode 100644 app/images/info.svg create mode 100644 app/images/open-etherscan.svg create mode 100644 ui/app/components/dropdowns/account-details-dropdown.js create mode 100644 ui/app/css/itcss/components/account-details-dropdown.scss diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 66f378ab8..97fc402fa 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -364,6 +364,9 @@ "exchangeRate": { "message": "Exchange Rate" }, + "expandView": { + "message": "Expand View" + }, "exportPrivateKey": { "message": "Export Private Key" }, @@ -723,6 +726,9 @@ "openInTab": { "message": "Open in tab" }, + "accountOptions": { + "message": "Account Options" + }, "or": { "message": "or", "description": "choice between creating or importing a new account" diff --git a/app/images/expand.svg b/app/images/expand.svg new file mode 100644 index 000000000..65f6cbfd7 --- /dev/null +++ b/app/images/expand.svg @@ -0,0 +1,13 @@ + + + + expand + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/app/images/hide.svg b/app/images/hide.svg new file mode 100644 index 000000000..d7ba01572 --- /dev/null +++ b/app/images/hide.svg @@ -0,0 +1,16 @@ + + + + hide + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/app/images/info.svg b/app/images/info.svg new file mode 100644 index 000000000..1ebae8ee4 --- /dev/null +++ b/app/images/info.svg @@ -0,0 +1,17 @@ + + + + info + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/app/images/open-etherscan.svg b/app/images/open-etherscan.svg new file mode 100644 index 000000000..84c5687ce --- /dev/null +++ b/app/images/open-etherscan.svg @@ -0,0 +1,12 @@ + + + + open-etherscan + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/test/e2e/beta/metamask-beta-ui.spec.js b/test/e2e/beta/metamask-beta-ui.spec.js index ecad3e8fd..8d1ecac0d 100644 --- a/test/e2e/beta/metamask-beta-ui.spec.js +++ b/test/e2e/beta/metamask-beta-ui.spec.js @@ -271,6 +271,17 @@ describe('MetaMask', function () { await driver.wait(until.stalenessOf(accountModal)) await delay(regularDelayMs) }) + it('show account details dropdown menu', async () => { + + const {width, height} = await driver.manage().window().getSize() + driver.manage().window().setSize(320, 480) + await driver.findElement(By.css('div.menu-bar__open-in-browser')).click() + const options = await driver.findElements(By.css('div.menu.account-details-dropdown div.menu__item')) + assert.equal(options.length, 3) // HD Wallet type does not have to show the Remove Account option + await delay(regularDelayMs) + driver.manage().window().setSize(width, height) + + }) }) describe('Log out an log back in', () => { diff --git a/ui/app/components/dropdowns/account-details-dropdown.js b/ui/app/components/dropdowns/account-details-dropdown.js new file mode 100644 index 000000000..1f82ca735 --- /dev/null +++ b/ui/app/components/dropdowns/account-details-dropdown.js @@ -0,0 +1,109 @@ +const Component = require('react').Component +const PropTypes = require('prop-types') +const h = require('react-hyperscript') +const inherits = require('util').inherits +const connect = require('react-redux').connect +const actions = require('../../actions') +const { getSelectedIdentity } = require('../../selectors') +const genAccountLink = require('../../../lib/account-link.js') +const { Menu, Item, CloseArea } = require('./components/menu') + +AccountDetailsDropdown.contextTypes = { + t: PropTypes.func, +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsDropdown) + +function mapStateToProps (state) { + return { + selectedIdentity: getSelectedIdentity(state), + network: state.metamask.network, + keyrings: state.metamask.keyrings, + } +} + +function mapDispatchToProps (dispatch) { + return { + showAccountDetailModal: () => { + dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })) + }, + viewOnEtherscan: (address, network) => { + global.platform.openWindow({ url: genAccountLink(address, network) }) + }, + showRemoveAccountConfirmationModal: (identity) => { + return dispatch(actions.showModal({ name: 'CONFIRM_REMOVE_ACCOUNT', identity })) + }, + } +} + +inherits(AccountDetailsDropdown, Component) +function AccountDetailsDropdown () { + Component.call(this) + + this.onClose = this.onClose.bind(this) +} + +AccountDetailsDropdown.prototype.onClose = function (e) { + e.stopPropagation() + this.props.onClose() +} + +AccountDetailsDropdown.prototype.render = function () { + const { + selectedIdentity, + network, + keyrings, + showAccountDetailModal, + viewOnEtherscan, + showRemoveAccountConfirmationModal } = this.props + + const { name, address } = selectedIdentity + + const keyring = keyrings.find((kr) => { + return kr.accounts.includes(address) + }) + + const isRemovable = keyring.type !== 'HD Key Tree' + + return h(Menu, { className: 'account-details-dropdown', isShowing: true }, [ + h(CloseArea, { + onClick: this.onClose, + }), + h(Item, { + onClick: (e) => { + e.stopPropagation() + global.platform.openExtensionInBrowser() + this.props.onClose() + }, + text: this.context.t('expandView'), + icon: h(`img`, { src: "images/expand.svg", style: { height: '15px' } }), + }), + h(Item, { + onClick: (e) => { + e.stopPropagation() + showAccountDetailModal() + this.props.onClose() + }, + text: this.context.t('accountDetails'), + icon: h(`img`, { src: "images/info.svg", style: { height: '15px' } }), + }), + h(Item, { + onClick: (e) => { + e.stopPropagation() + viewOnEtherscan(address, network) + this.props.onClose() + }, + text: this.context.t('viewOnEtherscan'), + icon: h(`img`, { src: "images/open-etherscan.svg", style: { height: '15px' } }), + }), + isRemovable ? h(Item, { + onClick: (e) => { + e.stopPropagation() + showRemoveAccountConfirmationModal(selectedIdentity) + this.props.onClose() + }, + text: this.context.t('removeAccount'), + icon: h(`img`, { src: "images/hide.svg", style: { height: '15px' } }), + }):null, + ]) +} \ No newline at end of file diff --git a/ui/app/components/menu-bar/menu-bar.component.js b/ui/app/components/menu-bar/menu-bar.component.js index eee9feebb..7460e8dd5 100644 --- a/ui/app/components/menu-bar/menu-bar.component.js +++ b/ui/app/components/menu-bar/menu-bar.component.js @@ -2,6 +2,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import Tooltip from '../tooltip' import SelectedAccount from '../selected-account' +import AccountDetailsDropdown from '../dropdowns/account-details-dropdown.js' export default class MenuBar extends PureComponent { static contextTypes = { @@ -15,9 +16,12 @@ export default class MenuBar extends PureComponent { showSidebar: PropTypes.func, } + state = { accountDetailsMenuOpen: false } + render () { const { t } = this.context const { isMascara, sidebarOpen, hideSidebar, showSidebar } = this.props + const { accountDetailsMenuOpen } = this.state return (
@@ -34,18 +38,25 @@ export default class MenuBar extends PureComponent { { !isMascara && (
global.platform.openExtensionInBrowser()} + className="fa fa-ellipsis-h fa-lg menu-bar__open-in-browser" + onClick={() => this.setState({ accountDetailsMenuOpen: true })} > -
) } + { + accountDetailsMenuOpen && ( + this.setState({ accountDetailsMenuOpen: false })} + /> + ) + }
) } diff --git a/ui/app/css/itcss/components/account-details-dropdown.scss b/ui/app/css/itcss/components/account-details-dropdown.scss new file mode 100644 index 000000000..2a3007f83 --- /dev/null +++ b/ui/app/css/itcss/components/account-details-dropdown.scss @@ -0,0 +1,7 @@ +.account-details-dropdown { + width: 60%; + position: absolute; + top: 120px; + right: 15px; + z-index: 2000; +} \ No newline at end of file diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 99deaf918..63aa62eb3 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -42,6 +42,8 @@ @import './request-signature.scss'; +@import './account-details-dropdown.scss'; + @import './account-dropdown-mini.scss'; @import './editable-label.scss';