m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Convert AccountDetailsDropdown to ES6 class (#7777)

Browse Source
This commit is contained in:
Whymarrh Whitby 2020-01-10 10:33:32 -03:30 committed by GitHub
parent 6947ff49e0
commit 7f47a42f55
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 137 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

268
ui/app/components/app/dropdowns/account-details-dropdown.js
View File

@ -2,7 +2,6 @@ import React, { Component } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { compose } from 'recompose' import { compose } from 'recompose'
import { withRouter } from 'react-router-dom' import { withRouter } from 'react-router-dom'
import { inherits } from 'util'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import * as actions from '../../../store/actions' import * as actions from '../../../store/actions'
import { getSelectedIdentity, getRpcPrefsForCurrentProvider } from '../../../selectors/selectors' 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 genAccountLink from '../../../../lib/account-link.js'
import { Menu, Item, CloseArea } from './components/menu' 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) { function mapStateToProps (state) {
return { return {
selectedIdentity: getSelectedIdentity(state), selectedIdentity: getSelectedIdentity(state),
@ -40,136 +32,150 @@ function mapDispatchToProps (dispatch) {
} }
} }
inherits(AccountDetailsDropdown, Component) class AccountDetailsDropdown extends Component {
function AccountDetailsDropdown () { static contextTypes = {
Component.call(this) 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) { onClose = (e) => {
e.stopPropagation() e.stopPropagation()
this.props.onClose() this.props.onClose()
} }
AccountDetailsDropdown.prototype.render = function AccountDetailsDropdown () { render () {
const { const {
selectedIdentity, selectedIdentity,
network, network,
keyrings, keyrings,
showAccountDetailModal, showAccountDetailModal,
viewOnEtherscan, viewOnEtherscan,
showRemoveAccountConfirmationModal, showRemoveAccountConfirmationModal,
rpcPrefs, rpcPrefs,
history, history,
} = this.props } = this.props
const address = selectedIdentity.address const address = selectedIdentity.address
const keyring = keyrings.find((kr) => { const keyring = keyrings.find((kr) => {
return kr.accounts.includes(address) return kr.accounts.includes(address)
}) })
const isRemovable = keyring.type !== 'HD Key Tree' const isRemovable = keyring.type !== 'HD Key Tree'
return ( return (
<Menu className="account-details-dropdown" isShowing> <Menu className="account-details-dropdown" isShowing>
<CloseArea onClick={this.onClose} /> <CloseArea onClick={this.onClose} />
<Item <Item
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation()
this.context.metricsEvent({ this.context.metricsEvent({
eventOpts: { eventOpts: {
category: 'Navigation', category: 'Navigation',
action: 'Account Options', action: 'Account Options',
name: 'Clicked Expand View', name: 'Clicked Expand View',
}, },
}) })
global.platform.openExtensionInBrowser() global.platform.openExtensionInBrowser()
this.props.onClose() this.props.onClose()
}} }}
text={this.context.t('expandView')} text={this.context.t('expandView')}
icon={( icon={(
<img alt="" src="images/expand.svg" style={{ height: '15px' }} /> <img alt="" src="images/expand.svg" style={{ height: '15px' }} />
)} )}
/> />
<Item <Item
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation()
showAccountDetailModal() showAccountDetailModal()
this.context.metricsEvent({ this.context.metricsEvent({
eventOpts: { eventOpts: {
category: 'Navigation', category: 'Navigation',
action: 'Account Options', action: 'Account Options',
name: 'Viewed Account Details', name: 'Viewed Account Details',
}, },
}) })
this.props.onClose() this.props.onClose()
}} }}
text={this.context.t('accountDetails')} text={this.context.t('accountDetails')}
icon={( icon={(
<img src="images/info.svg" style={{ height: '15px' }} alt="" /> <img src="images/info.svg" style={{ height: '15px' }} alt="" />
)} )}
/> />
<Item <Item
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation()
this.context.metricsEvent({ this.context.metricsEvent({
eventOpts: { eventOpts: {
category: 'Navigation', category: 'Navigation',
action: 'Account Options', action: 'Account Options',
name: 'Clicked View on Etherscan', name: 'Clicked View on Etherscan',
}, },
}) })
viewOnEtherscan(address, network, rpcPrefs) viewOnEtherscan(address, network, rpcPrefs)
this.props.onClose() this.props.onClose()
}} }}
text={ text={
rpcPrefs.blockExplorerUrl rpcPrefs.blockExplorerUrl
? this.context.t('viewinExplorer') ? this.context.t('viewinExplorer')
: this.context.t('viewOnEtherscan') : this.context.t('viewOnEtherscan')
} }
subText={ subText={
rpcPrefs.blockExplorerUrl rpcPrefs.blockExplorerUrl
? rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1] ? rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1]
: null
}
icon={(
<img src="images/open-etherscan.svg" style={{ height: '15px' }} alt="" />
)}
/>
<Item
onClick={(e) => {
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={(
<img src="images/connect-white.svg" style={{ height: '15px' }} alt="" />
)}
/>
{
isRemovable
? (
<Item
onClick={(e) => {
e.stopPropagation()
showRemoveAccountConfirmationModal(selectedIdentity)
this.props.onClose()
}}
text={this.context.t('removeAccount')}
icon={<img src="images/hide.svg" style={{ height: '15px' }} alt="" />}
/>
)
: null : null
} }
icon={( </Menu>
<img src="images/open-etherscan.svg" style={{ height: '15px' }} alt="" /> )
)} }
/>
<Item
onClick={(e) => {
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={(
<img src="images/connect-white.svg" style={{ height: '15px' }} alt="" />
)}
/>
{
isRemovable
? (
<Item
onClick={(e) => {
e.stopPropagation()
showRemoveAccountConfirmationModal(selectedIdentity)
this.props.onClose()
}}
text={this.context.t('removeAccount')}
icon={<img src="images/hide.svg" style={{ height: '15px' }} alt="" />}
/>
)
: null
}
</Menu>
)
} }
export default compose(withRouter, connect(mapStateToProps, mapDispatchToProps))(AccountDetailsDropdown)