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,12 +68,11 @@ 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: {
@ -85,12 +83,14 @@ AccountDetailsDropdown.prototype.render = function () {
}) })
global.platform.openExtensionInBrowser() global.platform.openExtensionInBrowser()
this.props.onClose() this.props.onClose()
}, }}
text: this.context.t('expandView'), text={this.context.t('expandView')}
icon: h(`img`, { src: 'images/expand.svg', style: { height: '15px' } }), icon={(
}), <img alt="" src="images/expand.svg" style={{ height: '15px' }} />
h(Item, { )}
onClick: (e) => { />
<Item
onClick={(e) => {
e.stopPropagation() e.stopPropagation()
showAccountDetailModal() showAccountDetailModal()
this.context.metricsEvent({ this.context.metricsEvent({
@ -101,12 +101,14 @@ AccountDetailsDropdown.prototype.render = function () {
}, },
}) })
this.props.onClose() this.props.onClose()
}, }}
text: this.context.t('accountDetails'), text={this.context.t('accountDetails')}
icon: h(`img`, { src: 'images/info.svg', style: { height: '15px' } }), icon={(
}), <img src="images/info.svg" style={{ height: '15px' }} alt="" />
h(Item, { )}
onClick: (e) => { />
<Item
onClick={(e) => {
e.stopPropagation() e.stopPropagation()
this.context.metricsEvent({ this.context.metricsEvent({
eventOpts: { eventOpts: {
@ -117,23 +119,36 @@ AccountDetailsDropdown.prototype.render = function () {
}) })
viewOnEtherscan(address, network, rpcPrefs) viewOnEtherscan(address, network, rpcPrefs)
this.props.onClose() this.props.onClose()
}, }}
text: (rpcPrefs.blockExplorerUrl text={
rpcPrefs.blockExplorerUrl
? this.context.t('viewinExplorer') ? this.context.t('viewinExplorer')
: this.context.t('viewOnEtherscan')), : this.context.t('viewOnEtherscan')
subText: (rpcPrefs.blockExplorerUrl }
subText={
rpcPrefs.blockExplorerUrl
? rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1] ? rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1]
: null), : null
icon: h(`img`, { src: 'images/open-etherscan.svg', style: { height: '15px' } }), }
}), icon={(
isRemovable ? h(Item, { <img src="images/open-etherscan.svg" style={{ height: '15px' }} alt="" />
onClick: (e) => { )}
/>
{
isRemovable
? (
<Item
onClick={(e) => {
e.stopPropagation() e.stopPropagation()
showRemoveAccountConfirmationModal(selectedIdentity) showRemoveAccountConfirmationModal(selectedIdentity)
this.props.onClose() this.props.onClose()
}, }}
text: this.context.t('removeAccount'), text={this.context.t('removeAccount')}
icon: h(`img`, { src: 'images/hide.svg', style: { height: '15px' } }), icon={<img src="images/hide.svg" style={{ height: '15px' }} alt="" />}
}) : null, />
]) )
: null
}
</Menu>
)
} }