TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Convert AccountDetailsDropdown to ES6 class (#7777)

Browse Source
feature/default_network_editable
Whymarrh Whitby 5 years ago 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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 268
      ui/app/components/app/dropdowns/account-details-dropdown.js

268
ui/app/components/app/dropdowns/account-details-dropdown.js
Unescape 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)

Write Preview
Loading…
Cancel
Save