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

Convert AccountDetailsDropdown component to use JSX (#7509)

This commit is contained in:
Whymarrh Whitby 2019-11-22 23:52:41 -03:30 committed by GitHub
parent 1d9787c0d8
commit 7a0e40829a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,6 +1,5 @@
const Component = require('react').Component import React, { Component } from 'react'
const PropTypes = require('prop-types') const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const inherits = require('util').inherits const inherits = require('util').inherits
const connect = require('react-redux').connect const connect = require('react-redux').connect
const actions = require('../../../store/actions') const actions = require('../../../store/actions')
@ -50,7 +49,7 @@ AccountDetailsDropdown.prototype.onClose = function (e) {
this.props.onClose() this.props.onClose()
} }
AccountDetailsDropdown.prototype.render = function () { AccountDetailsDropdown.prototype.render = function AccountDetailsDropdown () {
const { const {
selectedIdentity, selectedIdentity,
network, network,
@ -69,71 +68,87 @@ AccountDetailsDropdown.prototype.render = function () {
const isRemovable = keyring.type !== 'HD Key Tree' const isRemovable = keyring.type !== 'HD Key Tree'
return h(Menu, { className: 'account-details-dropdown', isShowing: true }, [ return (
h(CloseArea, { <Menu className="account-details-dropdown" isShowing>
onClick: this.onClose, <CloseArea onClick={this.onClose} />
}), <Item
h(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: h(`img`, { src: 'images/expand.svg', style: { height: '15px' } }), <img alt="" src="images/expand.svg" style={{ height: '15px' }} />
}), )}
h(Item, { />
onClick: (e) => { <Item
e.stopPropagation() onClick={(e) => {
showAccountDetailModal() e.stopPropagation()
this.context.metricsEvent({ showAccountDetailModal()
eventOpts: { this.context.metricsEvent({
category: 'Navigation', eventOpts: {
action: 'Account Options', category: 'Navigation',
name: 'Viewed Account Details', action: 'Account Options',
}, name: 'Viewed Account Details',
}) },
this.props.onClose() })
}, this.props.onClose()
text: this.context.t('accountDetails'), }}
icon: h(`img`, { src: 'images/info.svg', style: { height: '15px' } }), text={this.context.t('accountDetails')}
}), icon={(
h(Item, { <img src="images/info.svg" style={{ height: '15px' }} alt="" />
onClick: (e) => { )}
e.stopPropagation() />
this.context.metricsEvent({ <Item
eventOpts: { onClick={(e) => {
category: 'Navigation', e.stopPropagation()
action: 'Account Options', this.context.metricsEvent({
name: 'Clicked View on Etherscan', eventOpts: {
}, category: 'Navigation',
}) action: 'Account Options',
viewOnEtherscan(address, network, rpcPrefs) name: 'Clicked View on Etherscan',
this.props.onClose() },
}, })
text: (rpcPrefs.blockExplorerUrl viewOnEtherscan(address, network, rpcPrefs)
? this.context.t('viewinExplorer') this.props.onClose()
: this.context.t('viewOnEtherscan')), }}
subText: (rpcPrefs.blockExplorerUrl text={
? rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1] rpcPrefs.blockExplorerUrl
: null), ? this.context.t('viewinExplorer')
icon: h(`img`, { src: 'images/open-etherscan.svg', style: { height: '15px' } }), : this.context.t('viewOnEtherscan')
}), }
isRemovable ? h(Item, { subText={
onClick: (e) => { rpcPrefs.blockExplorerUrl
e.stopPropagation() ? rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1]
showRemoveAccountConfirmationModal(selectedIdentity) : null
this.props.onClose() }
}, icon={(
text: this.context.t('removeAccount'), <img src="images/open-etherscan.svg" style={{ height: '15px' }} alt="" />
icon: h(`img`, { src: 'images/hide.svg', style: { height: '15px' } }), )}
}) : null, />
]) {
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>
)
} }