diff --git a/ui/app/components/app/dropdowns/account-details-dropdown.js b/ui/app/components/app/dropdowns/account-details-dropdown.js index 971731a98..bfd1df777 100644 --- a/ui/app/components/app/dropdowns/account-details-dropdown.js +++ b/ui/app/components/app/dropdowns/account-details-dropdown.js @@ -2,7 +2,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { compose } from 'recompose' import { withRouter } from 'react-router-dom' -import { inherits } from 'util' import { connect } from 'react-redux' import * as actions from '../../../store/actions' import { getSelectedIdentity, getRpcPrefsForCurrentProvider } from '../../../selectors/selectors' @@ -10,13 +9,6 @@ import { CONNECTED_ROUTE } from '../../../helpers/constants/routes' import genAccountLink from '../../../../lib/account-link.js' import { Menu, Item, CloseArea } from './components/menu' -AccountDetailsDropdown.contextTypes = { - t: PropTypes.func, - metricsEvent: PropTypes.func, -} - -export default compose(withRouter, connect(mapStateToProps, mapDispatchToProps))(AccountDetailsDropdown) - function mapStateToProps (state) { return { selectedIdentity: getSelectedIdentity(state), @@ -40,136 +32,150 @@ function mapDispatchToProps (dispatch) { } } -inherits(AccountDetailsDropdown, Component) -function AccountDetailsDropdown () { - Component.call(this) +class AccountDetailsDropdown extends Component { + static contextTypes = { + t: PropTypes.func, + metricsEvent: PropTypes.func, + } - this.onClose = this.onClose.bind(this) -} + static propTypes = { + selectedIdentity: PropTypes.object.isRequired, + network: PropTypes.number.isRequired, + keyrings: PropTypes.array.isRequired, + showAccountDetailModal: PropTypes.func.isRequired, + viewOnEtherscan: PropTypes.func.isRequired, + showRemoveAccountConfirmationModal: PropTypes.func.isRequired, + rpcPrefs: PropTypes.object.isRequired, + history: PropTypes.object.isRequired, + onClose: PropTypes.func.isRequired, + } -AccountDetailsDropdown.prototype.onClose = function (e) { - e.stopPropagation() - this.props.onClose() -} + onClose = (e) => { + e.stopPropagation() + this.props.onClose() + } -AccountDetailsDropdown.prototype.render = function AccountDetailsDropdown () { - const { - selectedIdentity, - network, - keyrings, - showAccountDetailModal, - viewOnEtherscan, - showRemoveAccountConfirmationModal, - rpcPrefs, - history, - } = this.props + render () { + const { + selectedIdentity, + network, + keyrings, + showAccountDetailModal, + viewOnEtherscan, + showRemoveAccountConfirmationModal, + rpcPrefs, + history, + } = this.props - const address = selectedIdentity.address + const address = selectedIdentity.address - const keyring = keyrings.find((kr) => { - return kr.accounts.includes(address) - }) + const keyring = keyrings.find((kr) => { + return kr.accounts.includes(address) + }) - const isRemovable = keyring.type !== 'HD Key Tree' + const isRemovable = keyring.type !== 'HD Key Tree' - return ( - - - { - e.stopPropagation() - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', - action: 'Account Options', - name: 'Clicked Expand View', - }, - }) - global.platform.openExtensionInBrowser() - this.props.onClose() - }} - text={this.context.t('expandView')} - icon={( - - )} - /> - { - e.stopPropagation() - showAccountDetailModal() - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', - action: 'Account Options', - name: 'Viewed Account Details', - }, - }) - this.props.onClose() - }} - text={this.context.t('accountDetails')} - icon={( - - )} - /> - { - e.stopPropagation() - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', - action: 'Account Options', - name: 'Clicked View on Etherscan', - }, - }) - viewOnEtherscan(address, network, rpcPrefs) - this.props.onClose() - }} - text={ - rpcPrefs.blockExplorerUrl - ? this.context.t('viewinExplorer') - : this.context.t('viewOnEtherscan') - } - subText={ - rpcPrefs.blockExplorerUrl - ? rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1] + return ( + + + { + e.stopPropagation() + this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Account Options', + name: 'Clicked Expand View', + }, + }) + global.platform.openExtensionInBrowser() + this.props.onClose() + }} + text={this.context.t('expandView')} + icon={( + + )} + /> + { + e.stopPropagation() + showAccountDetailModal() + this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Account Options', + name: 'Viewed Account Details', + }, + }) + this.props.onClose() + }} + text={this.context.t('accountDetails')} + icon={( + + )} + /> + { + e.stopPropagation() + this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Account Options', + name: 'Clicked View on Etherscan', + }, + }) + viewOnEtherscan(address, network, rpcPrefs) + this.props.onClose() + }} + text={ + rpcPrefs.blockExplorerUrl + ? this.context.t('viewinExplorer') + : this.context.t('viewOnEtherscan') + } + subText={ + rpcPrefs.blockExplorerUrl + ? rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1] + : null + } + icon={( + + )} + /> + { + e.stopPropagation() + this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Account Options', + name: 'Opened Connected Sites', + }, + }) + history.push(CONNECTED_ROUTE) + }} + text={this.context.t('connectedSites')} + icon={( + + )} + /> + { + isRemovable + ? ( + { + e.stopPropagation() + showRemoveAccountConfirmationModal(selectedIdentity) + this.props.onClose() + }} + text={this.context.t('removeAccount')} + icon={} + /> + ) : null } - icon={( - - )} - /> - { - e.stopPropagation() - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', - action: 'Account Options', - name: 'Opened Connected Sites', - }, - }) - history.push(CONNECTED_ROUTE) - }} - text={this.context.t('connectedSites')} - icon={( - - )} - /> - { - isRemovable - ? ( - { - e.stopPropagation() - showRemoveAccountConfirmationModal(selectedIdentity) - this.props.onClose() - }} - text={this.context.t('removeAccount')} - icon={} - /> - ) - : null - } - - ) + + ) + } } + +export default compose(withRouter, connect(mapStateToProps, mapDispatchToProps))(AccountDetailsDropdown)