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

Refactor Network dropdown component (#7817)

Browse Source
This commit is contained in:
Whymarrh Whitby 2020-01-16 15:02:03 -03:30 committed by GitHub
parent 20a7b8fa36
commit 70e083820b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 139 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

292
ui/app/components/app/network.js
View File

@ -1,9 +1,42 @@
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import React, { Component } from 'react' import React, { Component } from 'react'
import classnames from 'classnames' import classnames from 'classnames'
import NetworkDropdownIcon from './dropdowns/components/network-dropdown-icon' import NetworkDropdownIcon from './dropdowns/components/network-dropdown-icon'
function NetworkIndicator ({ disabled, children, hoverText, onClick, providerName }) {
return (
<div
className={classnames('network-component pointer', {
'network-component--disabled': disabled,
'ethereum-network': providerName === 'mainnet',
'ropsten-test-network': providerName === 'ropsten',
'kovan-test-network': providerName === 'kovan',
'rinkeby-test-network': providerName === 'rinkeby',
'goerli-test-network': providerName === 'goerli',
})}
title={hoverText}
onClick={(event) => {
if (!disabled) {
onClick(event)
}
}}
>
<div className="network-indicator">
{children}
<div className="network-indicator__down-arrow" />
</div>
</div>
)
}
NetworkIndicator.propTypes = {
children: PropTypes.node.isRequired,
disabled: PropTypes.bool,
hoverText: PropTypes.string,
onClick: PropTypes.func,
providerName: PropTypes.string,
}
export default class Network extends Component { export default class Network extends Component {
static contextTypes = { static contextTypes = {
t: PropTypes.func, t: PropTypes.func,
@ -21,160 +54,113 @@ export default class Network extends Component {
} }
render () { render () {
const context = this.context const {
const networkNumber = this.props.network t,
} = this.context
const {
disabled,
network: networkNumber,
onClick,
provider,
} = this.props
let providerName, providerNick, providerUrl let providerName, providerNick, providerUrl
try { if (provider) {
providerName = this.props.provider.type providerName = provider.type
providerNick = this.props.provider.nickname || '' providerNick = provider.nickname || ''
providerUrl = this.props.provider.rpcTarget providerUrl = provider.rpcTarget
} catch (e) {
providerName = null
}
const providerId = providerNick || providerName || providerUrl || null
let iconName
let hoverText
if (providerName === 'mainnet') {
hoverText = context.t('mainnet')
iconName = 'ethereum-network'
} else if (providerName === 'ropsten') {
hoverText = context.t('ropsten')
iconName = 'ropsten-test-network'
} else if (providerName === 'kovan') {
hoverText = context.t('kovan')
iconName = 'kovan-test-network'
} else if (providerName === 'rinkeby') {
hoverText = context.t('rinkeby')
iconName = 'rinkeby-test-network'
} else if (providerName === 'goerli') {
hoverText = context.t('goerli')
iconName = 'goerli-test-network'
} else {
hoverText = providerId
iconName = 'private-network'
} }
return ( switch (providerName) {
<div case 'mainnet':
className={classnames('network-component pointer', { return (
'network-component--disabled': this.props.disabled, <NetworkIndicator disabled={disabled} hoverText={t('mainnet')} onClick={onClick} providerName={providerName}>
'ethereum-network': providerName === 'mainnet', <NetworkDropdownIcon
'ropsten-test-network': providerName === 'ropsten', backgroundColor="#038789"
'kovan-test-network': providerName === 'kovan', nonSelectBackgroundColor="#15afb2"
'rinkeby-test-network': providerName === 'rinkeby', loading={networkNumber === 'loading'}
'goerli-test-network': providerName === 'goerli', />
})} <div className="network-name">{t('mainnet')}</div>
title={hoverText} </NetworkIndicator>
onClick={(event) => { )
if (!this.props.disabled) {
this.props.onClick(event) case 'ropsten':
} return (
}} <NetworkIndicator disabled={disabled} hoverText={t('ropsten')} onClick={onClick} providerName={providerName}>
> <NetworkDropdownIcon
{(function () { backgroundColor="#e91550"
switch (iconName) { nonSelectBackgroundColor="#ec2c50"
case 'ethereum-network': loading={networkNumber === 'loading'}
return ( />
<div className="network-indicator"> <div className="network-name">{t('ropsten')}</div>
<NetworkDropdownIcon </NetworkIndicator>
backgroundColor="#038789" )
nonSelectBackgroundColor="#15afb2"
loading={networkNumber === 'loading'} case 'kovan':
/> return (
<div className="network-name"> <NetworkIndicator disabled={disabled} hoverText={t('kovan')} onClick={onClick} providerName={providerName}>
{context.t('mainnet')} <NetworkDropdownIcon
</div> backgroundColor="#690496"
<div className="network-indicator__down-arrow" /> nonSelectBackgroundColor="#b039f3"
</div> loading={networkNumber === 'loading'}
) />
case 'ropsten-test-network': <div className="network-name">{t('kovan')}</div>
return ( </NetworkIndicator>
<div className="network-indicator"> )
<NetworkDropdownIcon
backgroundColor="#e91550" case 'rinkeby':
nonSelectBackgroundColor="#ec2c50" return (
loading={networkNumber === 'loading'} <NetworkIndicator disabled={disabled} hoverText={t('rinkeby')} onClick={onClick} providerName={providerName}>
/> <NetworkDropdownIcon
<div className="network-name"> backgroundColor="#ebb33f"
{context.t('ropsten')} nonSelectBackgroundColor="#ecb23e"
</div> loading={networkNumber === 'loading'}
<div className="network-indicator__down-arrow" /> />
</div> <div className="network-name">{t('rinkeby')}</div>
) </NetworkIndicator>
case 'kovan-test-network': )
return (
<div className="network-indicator"> case 'goerli':
<NetworkDropdownIcon return (
backgroundColor="#690496" <NetworkIndicator disabled={disabled} hoverText={t('goerli')} onClick={onClick} providerName={providerName}>
nonSelectBackgroundColor="#b039f3" <NetworkDropdownIcon
loading={networkNumber === 'loading'} backgroundColor="#3099f2"
/> nonSelectBackgroundColor="#ecb23e"
<div className="network-name"> loading={networkNumber === 'loading'}
{context.t('kovan')} />
</div> <div className="network-name">{t('goerli')}</div>
<div className="network-indicator__down-arrow" /> </NetworkIndicator>
</div> )
)
case 'rinkeby-test-network': default:
return ( return (
<div className="network-indicator"> <NetworkIndicator
<NetworkDropdownIcon disabled={disabled}
backgroundColor="#ebb33f" hoverText={providerNick || providerName || providerUrl || null}
nonSelectBackgroundColor="#ecb23e" onClick={onClick}
loading={networkNumber === 'loading'} providerName={providerName}
/> >
<div className="network-name"> {
{context.t('rinkeby')} networkNumber === 'loading'
</div> ? (
<div className="network-indicator__down-arrow" /> <span className="pointer network-loading-spinner" onClick={(event) => onClick(event)}>
</div> <img title={t('attemptingConnect')} src="images/loading.svg" alt="" />
) </span>
case 'goerli-test-network': )
return ( : (
<div className="network-indicator"> <i className="fa fa-question-circle fa-lg" style={{ color: 'rgb(125, 128, 130)' }} />
<NetworkDropdownIcon )
backgroundColor="#3099f2" }
nonSelectBackgroundColor="#ecb23e" <div className="network-name">
loading={networkNumber === 'loading'} {
/> providerName === 'localhost'
<div className="network-name">{context.t('goerli')}</div> ? t('localhost')
<div className="network-indicator__down-arrow" /> : providerNick || t('privateNetwork')
</div> }
) </div>
default: </NetworkIndicator>
return ( )
<div className="network-indicator"> }
{networkNumber === 'loading'
? (
<span
className="pointer network-loading-spinner"
onClick={(event) => this.props.onClick(event)}
>
<img title={context.t('attemptingConnect')} src="images/loading.svg" alt="" />
</span>
)
: (
<i
className="fa fa-question-circle fa-lg"
style={{
color: 'rgb(125, 128, 130)',
}}
/>
)}
<div className="network-name">
{
providerName === 'localhost'
? context.t('localhost')
: providerNick || context.t('privateNetwork')
}
</div>
<div className="network-indicator__down-arrow" />
</div>
)
}
})()}
</div>
)
} }
} }