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 NetworkDropdown component to use JSX (#7562)

Browse Source
This commit is contained in:
Whymarrh Whitby 2019-11-27 11:36:46 -03:30 committed by GitHub
parent f0e5ab6c12
commit baa5313d21
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 257 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

501
ui/app/components/app/dropdowns/network-dropdown.js
View File

@ -1,6 +1,5 @@
const Component = require('react').Component import PropTypes from 'prop-types'
const PropTypes = require('prop-types') import React, {Component} from 'react'
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 { withRouter } = require('react-router-dom') const { withRouter } = require('react-router-dom')
@ -67,10 +66,9 @@ module.exports = compose(
// TODO: specify default props and proptypes // TODO: specify default props and proptypes
NetworkDropdown.prototype.render = function () { NetworkDropdown.prototype.render = function NetworkDropdown () {
const props = this.props const { provider: { type: providerType, rpcTarget: activeNetwork }, setNetworksTabAddMode } = this.props
const { provider: { type: providerType, rpcTarget: activeNetwork }, setNetworksTabAddMode } = props const rpcListDetail = this.props.frequentRpcListDetail
const rpcListDetail = props.frequentRpcListDetail
const isOpen = this.props.networkDropdownOpen const isOpen = this.props.networkDropdownOpen
const dropdownMenuItemStyle = { const dropdownMenuItemStyle = {
fontSize: '16px', fontSize: '16px',
@ -78,201 +76,206 @@ NetworkDropdown.prototype.render = function () {
padding: '12px 0', padding: '12px 0',
} }
return h(Dropdown, { return (
isOpen, <Dropdown
onClickOutside: (event) => { isOpen={isOpen}
const { classList } = event.target onClickOutside={(event) => {
const isInClassList = className => classList.contains(className) const { classList } = event.target
const notToggleElementIndex = R.findIndex(isInClassList)(notToggleElementClassnames) const isInClassList = className => classList.contains(className)
const notToggleElementIndex = R.findIndex(isInClassList)(notToggleElementClassnames)
if (notToggleElementIndex === -1) { if (notToggleElementIndex === -1) {
this.props.hideNetworkDropdown() this.props.hideNetworkDropdown()
} }
}, }}
containerClassName: 'network-droppo', containerClassName="network-droppo"
zIndex: 55, zIndex={55}
style: { style={{
position: 'absolute', position: 'absolute',
top: '58px', top: '58px',
width: '309px', width: '309px',
zIndex: '55px', zIndex: '55px',
}, }}
innerStyle: { innerStyle={{
padding: '18px 8px', padding: '18px 8px',
}, }}
}, [ >
<div className="network-dropdown-header">
h('div.network-dropdown-header', {}, [ <div className="network-dropdown-title">
h('div.network-dropdown-title', {}, this.context.t('networks')), {this.context.t('networks')}
</div>
h('div.network-dropdown-divider'), <div className="network-dropdown-divider" />
<div className="network-dropdown-content">
h('div.network-dropdown-content', {this.context.t('defaultNetwork')}
{}, </div>
this.context.t('defaultNetwork') </div>
), <DropdownMenuItem
]), key="main"
closeMenu={() => this.props.hideNetworkDropdown()}
h( onClick={() => this.handleClick('mainnet')}
DropdownMenuItem, style={{ ...dropdownMenuItemStyle, borderColor: '#038789' }}
{ >
key: 'main', {
closeMenu: () => this.props.hideNetworkDropdown(), providerType === 'mainnet'
onClick: () => this.handleClick('mainnet'), ? <i className="fa fa-check" />
style: { ...dropdownMenuItemStyle, borderColor: '#038789' }, : <div className="network-check__transparent">✓</div>
}, }
[ <NetworkDropdownIcon backgroundColor="#29B6AF" isSelected={providerType === 'mainnet'} />
providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), <span
h(NetworkDropdownIcon, { className="network-name-item"
backgroundColor: '#29B6AF', // $java style={{
isSelected: providerType === 'mainnet', color: providerType === 'mainnet'
}), ? '#ffffff'
h('span.network-name-item', { : '#9b9b9b',
style: { }}
color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b', >
}, {this.context.t('mainnet')}
}, this.context.t('mainnet')), </span>
] </DropdownMenuItem>
), <DropdownMenuItem
key="ropsten"
h( closeMenu={() => this.props.hideNetworkDropdown()}
DropdownMenuItem, onClick={() => this.handleClick('ropsten')}
{ style={dropdownMenuItemStyle}
key: 'ropsten', >
closeMenu: () => this.props.hideNetworkDropdown(), {
onClick: () => this.handleClick('ropsten'), providerType === 'ropsten'
style: dropdownMenuItemStyle, ? <i className="fa fa-check" />
}, : <div className="network-check__transparent">✓</div>
[ }
providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), <NetworkDropdownIcon backgroundColor="#ff4a8d" isSelected={providerType === 'ropsten'} />
h(NetworkDropdownIcon, { <span
backgroundColor: '#ff4a8d', // $wild-strawberry className="network-name-item"
isSelected: providerType === 'ropsten', style={{
}), color: providerType === 'ropsten'
h('span.network-name-item', { ? '#ffffff'
style: { : '#9b9b9b',
color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b', }}
}, >
}, this.context.t('ropsten')), {this.context.t('ropsten')}
] </span>
), </DropdownMenuItem>
<DropdownMenuItem
h( key="kovan"
DropdownMenuItem, closeMenu={() => this.props.hideNetworkDropdown()}
{ onClick={() => this.handleClick('kovan')}
key: 'kovan', style={dropdownMenuItemStyle}
closeMenu: () => this.props.hideNetworkDropdown(), >
onClick: () => this.handleClick('kovan'), {
style: dropdownMenuItemStyle, providerType === 'kovan'
}, ? <i className="fa fa-check" />
[ : <div className="network-check__transparent">✓</div>
providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), }
h(NetworkDropdownIcon, { <NetworkDropdownIcon backgroundColor="#7057ff" isSelected={providerType === 'kovan'} />
backgroundColor: '#7057ff', // $cornflower-blue <span
isSelected: providerType === 'kovan', className="network-name-item"
}), style={{
h('span.network-name-item', { color: providerType === 'kovan'
style: { ? '#ffffff'
color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b', : '#9b9b9b',
}, }}
}, this.context.t('kovan')), >
] {this.context.t('kovan')}
), </span>
</DropdownMenuItem>
h( <DropdownMenuItem
DropdownMenuItem, key="rinkeby"
{ closeMenu={() => this.props.hideNetworkDropdown()}
key: 'rinkeby', onClick={() => this.handleClick('rinkeby')}
closeMenu: () => this.props.hideNetworkDropdown(), style={dropdownMenuItemStyle}
onClick: () => this.handleClick('rinkeby'), >
style: dropdownMenuItemStyle, {
}, providerType === 'rinkeby'
[ ? <i className="fa fa-check" />
providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), : <div className="network-check__transparent">✓</div>
h(NetworkDropdownIcon, { }
backgroundColor: '#f6c343', // $saffron <NetworkDropdownIcon backgroundColor="#f6c343" isSelected={providerType === 'rinkeby'} />
isSelected: providerType === 'rinkeby', <span
}), className="network-name-item"
h('span.network-name-item', { style={{
style: { color: providerType === 'rinkeby'
color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b', ? '#ffffff'
}, : '#9b9b9b',
}, this.context.t('rinkeby')), }}
] >
), {this.context.t('rinkeby')}
</span>
h( </DropdownMenuItem>
DropdownMenuItem, <DropdownMenuItem
{ key="goerli"
key: 'goerli', closeMenu={() => this.props.hideNetworkDropdown()}
closeMenu: () => this.props.hideNetworkDropdown(), onClick={() => this.handleClick('goerli')}
onClick: () => this.handleClick('goerli'), style={dropdownMenuItemStyle}
style: dropdownMenuItemStyle, >
}, {
[ providerType === 'goerli'
providerType === 'goerli' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), ? <i className="fa fa-check" />
h(NetworkDropdownIcon, { : <div className="network-check__transparent">✓</div>
backgroundColor: '#3099f2', // $dodger-blue }
isSelected: providerType === 'goerli', <NetworkDropdownIcon backgroundColor="#3099f2" isSelected={providerType === 'goerli'} />
}), <span
h('span.network-name-item', { className="network-name-item"
style: { style={{
color: providerType === 'goerli' ? '#ffffff' : '#9b9b9b', color: providerType === 'goerli'
}, ? '#ffffff'
}, this.context.t('goerli')), : '#9b9b9b',
] }}
), >
{this.context.t('goerli')}
h( </span>
DropdownMenuItem, </DropdownMenuItem>
{ <DropdownMenuItem
key: 'default', key="default"
closeMenu: () => this.props.hideNetworkDropdown(), closeMenu={() => this.props.hideNetworkDropdown()}
onClick: () => this.handleClick('localhost'), onClick={() => this.handleClick('localhost')}
style: dropdownMenuItemStyle, style={dropdownMenuItemStyle}
}, >
[ {
providerType === 'localhost' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), providerType === 'localhost'
h(NetworkDropdownIcon, { ? <i className="fa fa-check" />
isSelected: providerType === 'localhost', : <div className="network-check__transparent">✓</div>
innerBorder: '1px solid #9b9b9b', }
}), <NetworkDropdownIcon isSelected={providerType === 'localhost'} innerBorder="1px solid #9b9b9b" />
h('span.network-name-item', { <span
style: { className="network-name-item"
color: providerType === 'localhost' ? '#ffffff' : '#9b9b9b', style={{
}, color: providerType === 'localhost'
}, this.context.t('localhost')), ? '#ffffff'
] : '#9b9b9b',
), }}
>
this.renderCustomOption(props.provider), {this.context.t('localhost')}
this.renderCommonRpc(rpcListDetail, props.provider), </span>
</DropdownMenuItem>
h( {this.renderCustomOption(this.props.provider)}
DropdownMenuItem, {this.renderCommonRpc(rpcListDetail, this.props.provider)}
{ <DropdownMenuItem
closeMenu: () => this.props.hideNetworkDropdown(), closeMenu={() => this.props.hideNetworkDropdown()}
onClick: () => { onClick={() => {
setNetworksTabAddMode(true) setNetworksTabAddMode(true)
this.props.history.push(NETWORKS_ROUTE) this.props.history.push(NETWORKS_ROUTE)
}, }}
style: dropdownMenuItemStyle, style={dropdownMenuItemStyle}
}, >
[ {
activeNetwork === 'custom' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), activeNetwork === 'custom'
h(NetworkDropdownIcon, { ? <i className="fa fa-check" />
isSelected: activeNetwork === 'custom', : <div className="network-check__transparent">✓</div>
innerBorder: '1px solid #9b9b9b', }
}), <NetworkDropdownIcon isSelected={activeNetwork === 'custom'} innerBorder="1px solid #9b9b9b" />
h('span.network-name-item', { <span
style: { className="network-name-item"
color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b', style={{
}, color: activeNetwork === 'custom'
}, this.context.t('customRPC')), ? '#ffffff'
] : '#9b9b9b',
), }}
>
]) {this.context.t('customRPC')}
</span>
</DropdownMenuItem>
</Dropdown>
)
} }
NetworkDropdown.prototype.handleClick = function (newProviderType) { NetworkDropdown.prototype.handleClick = function (newProviderType) {
@ -332,43 +335,52 @@ NetworkDropdown.prototype.renderCommonRpc = function (rpcListDetail, provider) {
return null return null
} else { } else {
const chainId = entry.chainId const chainId = entry.chainId
return h( return (
DropdownMenuItem, <DropdownMenuItem
{ key={`common${rpc}`}
key: `common${rpc}`, closeMenu={() => this.props.hideNetworkDropdown()}
closeMenu: () => this.props.hideNetworkDropdown(), onClick={() => props.setRpcTarget(rpc, chainId, ticker, nickname)}
onClick: () => props.setRpcTarget(rpc, chainId, ticker, nickname), style={{
style: {
fontSize: '16px', fontSize: '16px',
lineHeight: '20px', lineHeight: '20px',
padding: '12px 0', padding: '12px 0',
}, }}
}, >
[ {
currentRpcTarget ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), currentRpcTarget
h('i.fa.fa-question-circle.fa-med.menu-icon-circle'), ? <i className="fa fa-check" />
h('span.network-name-item', { : <div className="network-check__transparent">✓</div>
style: { }
color: currentRpcTarget ? '#ffffff' : '#9b9b9b', <i className="fa fa-question-circle fa-med menu-icon-circle" />
}, <span
}, nickname || rpc), className="network-name-item"
h('i.fa.fa-times.delete', style={{
{ color: currentRpcTarget
onClick: (e) => { ? '#ffffff'
e.stopPropagation() : '#9b9b9b',
props.delRpcTarget(rpc) }}
}, >
}), {nickname || rpc}
] </span>
<i
className="fa fa-times delete"
onClick={(e) => {
e.stopPropagation()
props.delRpcTarget(rpc)
}}
/>
</DropdownMenuItem>
) )
} }
}) })
} }
NetworkDropdown.prototype.renderCustomOption = function (provider) { /**
* @return {Component|null}
*/
NetworkDropdown.prototype.renderCustomOption = function NetworkDropdown (provider) {
const { rpcTarget, type, ticker, nickname } = provider const { rpcTarget, type, ticker, nickname } = provider
const props = this.props const network = this.props.network
const network = props.network
if (type !== 'rpc') { if (type !== 'rpc') {
return null return null
@ -380,27 +392,28 @@ NetworkDropdown.prototype.renderCustomOption = function (provider) {
return null return null
default: default:
return h( return (
DropdownMenuItem, <DropdownMenuItem
{ key={rpcTarget}
key: rpcTarget, onClick={() => this.props.setRpcTarget(rpcTarget, network, ticker, nickname)}
onClick: () => props.setRpcTarget(rpcTarget, network, ticker, nickname), closeMenu={() => this.props.hideNetworkDropdown()}
closeMenu: () => this.props.hideNetworkDropdown(), style={{
style: {
fontSize: '16px', fontSize: '16px',
lineHeight: '20px', lineHeight: '20px',
padding: '12px 0', padding: '12px 0',
}, }}
}, >
[ <i className="fa fa-check" />
h('i.fa.fa-check'), <i className="fa fa-question-circle fa-med menu-icon-circle" />
h('i.fa.fa-question-circle.fa-med.menu-icon-circle'), <span
h('span.network-name-item', { className="network-name-item"
style: { style={{
color: '#ffffff', color: '#ffffff',
}, }}
}, nickname || rpcTarget), >
] {nickname || rpcTarget}
</span>
</DropdownMenuItem>
) )
} }
} }