From f88373237bebbaf286cab9085871166307ae9ab1 Mon Sep 17 00:00:00 2001 From: Santiago Gonzalez Toral Date: Tue, 2 Oct 2018 20:29:03 -0500 Subject: Added account options on home screen --- .../dropdowns/account-details-dropdown.js | 109 +++++++++++++++++++++ ui/app/components/menu-bar/menu-bar.component.js | 19 +++- .../itcss/components/account-details-dropdown.scss | 7 ++ ui/app/css/itcss/components/index.scss | 2 + 4 files changed, 133 insertions(+), 4 deletions(-) create mode 100644 ui/app/components/dropdowns/account-details-dropdown.js create mode 100644 ui/app/css/itcss/components/account-details-dropdown.scss (limited to 'ui/app') 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'; -- cgit v1.2.3