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

461
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,9 +76,10 @@ NetworkDropdown.prototype.render = function () {
padding: '12px 0', padding: '12px 0',
} }
return h(Dropdown, { return (
isOpen, <Dropdown
onClickOutside: (event) => { isOpen={isOpen}
onClickOutside={(event) => {
const { classList } = event.target const { classList } = event.target
const isInClassList = className => classList.contains(className) const isInClassList = className => classList.contains(className)
const notToggleElementIndex = R.findIndex(isInClassList)(notToggleElementClassnames) const notToggleElementIndex = R.findIndex(isInClassList)(notToggleElementClassnames)
@ -88,191 +87,195 @@ NetworkDropdown.prototype.render = function () {
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', providerType === 'mainnet'
closeMenu: () => this.props.hideNetworkDropdown(), ? <i className="fa fa-check" />
onClick: () => this.handleClick('mainnet'), : <div className="network-check__transparent">✓</div>
style: { ...dropdownMenuItemStyle, borderColor: '#038789' }, }
}, <NetworkDropdownIcon backgroundColor="#29B6AF" isSelected={providerType === 'mainnet'} />
[ <span
providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), className="network-name-item"
h(NetworkDropdownIcon, { style={{
backgroundColor: '#29B6AF', // $java color: providerType === 'mainnet'
isSelected: providerType === 'mainnet', ? '#ffffff'
}), : '#9b9b9b',
h('span.network-name-item', { }}
style: { >
color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b', {this.context.t('mainnet')}
}, </span>
}, this.context.t('mainnet')), </DropdownMenuItem>
] <DropdownMenuItem
), key="ropsten"
closeMenu={() => this.props.hideNetworkDropdown()}
h( onClick={() => this.handleClick('ropsten')}
DropdownMenuItem, style={dropdownMenuItemStyle}
>
{ {
key: 'ropsten', providerType === 'ropsten'
closeMenu: () => this.props.hideNetworkDropdown(), ? <i className="fa fa-check" />
onClick: () => this.handleClick('ropsten'), : <div className="network-check__transparent">✓</div>
style: dropdownMenuItemStyle, }
}, <NetworkDropdownIcon backgroundColor="#ff4a8d" isSelected={providerType === 'ropsten'} />
[ <span
providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), className="network-name-item"
h(NetworkDropdownIcon, { style={{
backgroundColor: '#ff4a8d', // $wild-strawberry color: providerType === 'ropsten'
isSelected: providerType === 'ropsten', ? '#ffffff'
}), : '#9b9b9b',
h('span.network-name-item', { }}
style: { >
color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b', {this.context.t('ropsten')}
}, </span>
}, this.context.t('ropsten')), </DropdownMenuItem>
] <DropdownMenuItem
), key="kovan"
closeMenu={() => this.props.hideNetworkDropdown()}
h( onClick={() => this.handleClick('kovan')}
DropdownMenuItem, style={dropdownMenuItemStyle}
>
{ {
key: 'kovan', providerType === 'kovan'
closeMenu: () => this.props.hideNetworkDropdown(), ? <i className="fa fa-check" />
onClick: () => this.handleClick('kovan'), : <div className="network-check__transparent">✓</div>
style: dropdownMenuItemStyle, }
}, <NetworkDropdownIcon backgroundColor="#7057ff" isSelected={providerType === 'kovan'} />
[ <span
providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), className="network-name-item"
h(NetworkDropdownIcon, { style={{
backgroundColor: '#7057ff', // $cornflower-blue color: providerType === 'kovan'
isSelected: providerType === 'kovan', ? '#ffffff'
}), : '#9b9b9b',
h('span.network-name-item', { }}
style: { >
color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b', {this.context.t('kovan')}
}, </span>
}, this.context.t('kovan')), </DropdownMenuItem>
] <DropdownMenuItem
), key="rinkeby"
closeMenu={() => this.props.hideNetworkDropdown()}
h( onClick={() => this.handleClick('rinkeby')}
DropdownMenuItem, style={dropdownMenuItemStyle}
>
{ {
key: 'rinkeby', providerType === 'rinkeby'
closeMenu: () => this.props.hideNetworkDropdown(), ? <i className="fa fa-check" />
onClick: () => this.handleClick('rinkeby'), : <div className="network-check__transparent">✓</div>
style: dropdownMenuItemStyle, }
}, <NetworkDropdownIcon backgroundColor="#f6c343" isSelected={providerType === 'rinkeby'} />
[ <span
providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), className="network-name-item"
h(NetworkDropdownIcon, { style={{
backgroundColor: '#f6c343', // $saffron color: providerType === 'rinkeby'
isSelected: providerType === 'rinkeby', ? '#ffffff'
}), : '#9b9b9b',
h('span.network-name-item', { }}
style: { >
color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b', {this.context.t('rinkeby')}
}, </span>
}, this.context.t('rinkeby')), </DropdownMenuItem>
] <DropdownMenuItem
), key="goerli"
closeMenu={() => this.props.hideNetworkDropdown()}
h( onClick={() => this.handleClick('goerli')}
DropdownMenuItem, style={dropdownMenuItemStyle}
>
{ {
key: 'goerli', providerType === 'goerli'
closeMenu: () => this.props.hideNetworkDropdown(), ? <i className="fa fa-check" />
onClick: () => this.handleClick('goerli'), : <div className="network-check__transparent">✓</div>
style: dropdownMenuItemStyle, }
}, <NetworkDropdownIcon backgroundColor="#3099f2" isSelected={providerType === 'goerli'} />
[ <span
providerType === 'goerli' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), className="network-name-item"
h(NetworkDropdownIcon, { style={{
backgroundColor: '#3099f2', // $dodger-blue color: providerType === 'goerli'
isSelected: providerType === 'goerli', ? '#ffffff'
}), : '#9b9b9b',
h('span.network-name-item', { }}
style: { >
color: providerType === 'goerli' ? '#ffffff' : '#9b9b9b', {this.context.t('goerli')}
}, </span>
}, this.context.t('goerli')), </DropdownMenuItem>
] <DropdownMenuItem
), key="default"
closeMenu={() => this.props.hideNetworkDropdown()}
h( onClick={() => this.handleClick('localhost')}
DropdownMenuItem, style={dropdownMenuItemStyle}
>
{ {
key: 'default', providerType === 'localhost'
closeMenu: () => this.props.hideNetworkDropdown(), ? <i className="fa fa-check" />
onClick: () => this.handleClick('localhost'), : <div className="network-check__transparent">✓</div>
style: dropdownMenuItemStyle, }
}, <NetworkDropdownIcon isSelected={providerType === 'localhost'} innerBorder="1px solid #9b9b9b" />
[ <span
providerType === 'localhost' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), className="network-name-item"
h(NetworkDropdownIcon, { style={{
isSelected: providerType === 'localhost', color: providerType === 'localhost'
innerBorder: '1px solid #9b9b9b', ? '#ffffff'
}), : '#9b9b9b',
h('span.network-name-item', { }}
style: { >
color: providerType === 'localhost' ? '#ffffff' : '#9b9b9b', {this.context.t('localhost')}
}, </span>
}, this.context.t('localhost')), </DropdownMenuItem>
] {this.renderCustomOption(this.props.provider)}
), {this.renderCommonRpc(rpcListDetail, this.props.provider)}
<DropdownMenuItem
this.renderCustomOption(props.provider), closeMenu={() => this.props.hideNetworkDropdown()}
this.renderCommonRpc(rpcListDetail, props.provider), onClick={() => {
h(
DropdownMenuItem,
{
closeMenu: () => this.props.hideNetworkDropdown(),
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', '✓'),
h('i.fa.fa-question-circle.fa-med.menu-icon-circle'),
h('span.network-name-item', {
style: {
color: currentRpcTarget ? '#ffffff' : '#9b9b9b',
},
}, nickname || rpc),
h('i.fa.fa-times.delete',
{ {
onClick: (e) => { currentRpcTarget
? <i className="fa fa-check" />
: <div className="network-check__transparent">✓</div>
}
<i className="fa fa-question-circle fa-med menu-icon-circle" />
<span
className="network-name-item"
style={{
color: currentRpcTarget
? '#ffffff'
: '#9b9b9b',
}}
>
{nickname || rpc}
</span>
<i
className="fa fa-times delete"
onClick={(e) => {
e.stopPropagation() e.stopPropagation()
props.delRpcTarget(rpc) 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>
) )
} }
} }