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 Network component to an ES6 class (#7784)

Browse Source 
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
This commit is contained in:
Whymarrh Whitby 2020-01-13 11:42:11 -03:30 committed by GitHub
parent 3b3325d191
commit 789dd19677
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 166 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,175 +2,179 @@ import PropTypes from 'prop-types'
import React, { Component } from 'react' import React, { Component } from 'react'
import classnames from 'classnames' import classnames from 'classnames'
import { inherits } from 'util'
import NetworkDropdownIcon from './dropdowns/components/network-dropdown-icon' import NetworkDropdownIcon from './dropdowns/components/network-dropdown-icon'
Network.contextTypes = { export default class Network extends Component {
t: PropTypes.func, static contextTypes = {
} t: PropTypes.func,
export default Network
inherits(Network, Component)
function Network () {
Component.call(this)
}
Network.prototype.render = function Network () {
const context = this.context
const networkNumber = this.props.network
let providerName, providerNick, providerUrl
try {
providerName = this.props.provider.type
providerNick = this.props.provider.nickname || ''
providerUrl = this.props.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 ( static propTypes = {
<div network: PropTypes.string.isRequired,
className={classnames('network-component pointer', { provider: PropTypes.shape({
'network-component--disabled': this.props.disabled, type: PropTypes.string,
'ethereum-network': providerName === 'mainnet', nickname: PropTypes.string,
'ropsten-test-network': providerName === 'ropsten', rpcTarget: PropTypes.string,
'kovan-test-network': providerName === 'kovan', }).isRequired,
'rinkeby-test-network': providerName === 'rinkeby', disabled: PropTypes.bool,
'goerli-test-network': providerName === 'goerli', onClick: PropTypes.func.isRequired,
})} }
title={hoverText}
onClick={(event) => { render () {
if (!this.props.disabled) { const context = this.context
this.props.onClick(event) const networkNumber = this.props.network
} let providerName, providerNick, providerUrl
}} try {
> providerName = this.props.provider.type
{(function () { providerNick = this.props.provider.nickname || ''
switch (iconName) { providerUrl = this.props.provider.rpcTarget
case 'ethereum-network': } catch (e) {
return ( providerName = null
<div className="network-indicator"> }
<NetworkDropdownIcon const providerId = providerNick || providerName || providerUrl || null
backgroundColor="#038789" let iconName
nonSelectBackgroundColor="#15afb2" let hoverText
loading={networkNumber === 'loading'}
/> if (providerName === 'mainnet') {
<div className="network-name"> hoverText = context.t('mainnet')
{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 (
<div
className={classnames('network-component pointer', {
'network-component--disabled': this.props.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 (!this.props.disabled) {
this.props.onClick(event)
}
}}
>
{(function () {
switch (iconName) {
case 'ethereum-network':
return (
<div className="network-indicator">
<NetworkDropdownIcon
backgroundColor="#038789"
nonSelectBackgroundColor="#15afb2"
loading={networkNumber === 'loading'}
/>
<div className="network-name">
{context.t('mainnet')}
</div>
<div className="network-indicator__down-arrow" />
</div> </div>
<div className="network-indicator__down-arrow" /> )
</div> case 'ropsten-test-network':
) return (
case 'ropsten-test-network': <div className="network-indicator">
return ( <NetworkDropdownIcon
<div className="network-indicator"> backgroundColor="#e91550"
<NetworkDropdownIcon nonSelectBackgroundColor="#ec2c50"
backgroundColor="#e91550" loading={networkNumber === 'loading'}
nonSelectBackgroundColor="#ec2c50" />
loading={networkNumber === 'loading'} <div className="network-name">
/> {context.t('ropsten')}
<div className="network-name"> </div>
{context.t('ropsten')} <div className="network-indicator__down-arrow" />
</div> </div>
<div className="network-indicator__down-arrow" /> )
</div> case 'kovan-test-network':
) return (
case 'kovan-test-network': <div className="network-indicator">
return ( <NetworkDropdownIcon
<div className="network-indicator"> backgroundColor="#690496"
<NetworkDropdownIcon nonSelectBackgroundColor="#b039f3"
backgroundColor="#690496" loading={networkNumber === 'loading'}
nonSelectBackgroundColor="#b039f3" />
loading={networkNumber === 'loading'} <div className="network-name">
/> {context.t('kovan')}
<div className="network-name"> </div>
{context.t('kovan')} <div className="network-indicator__down-arrow" />
</div> </div>
<div className="network-indicator__down-arrow" /> )
</div> case 'rinkeby-test-network':
) return (
case 'rinkeby-test-network': <div className="network-indicator">
return ( <NetworkDropdownIcon
<div className="network-indicator"> backgroundColor="#ebb33f"
<NetworkDropdownIcon nonSelectBackgroundColor="#ecb23e"
backgroundColor="#ebb33f" loading={networkNumber === 'loading'}
nonSelectBackgroundColor="#ecb23e" />
loading={networkNumber === 'loading'} <div className="network-name">
/> {context.t('rinkeby')}
<div className="network-name"> </div>
{context.t('rinkeby')} <div className="network-indicator__down-arrow" />
</div> </div>
<div className="network-indicator__down-arrow" /> )
</div> case 'goerli-test-network':
) return (
case 'goerli-test-network': <div className="network-indicator">
return ( <NetworkDropdownIcon
<div className="network-indicator"> backgroundColor="#3099f2"
<NetworkDropdownIcon nonSelectBackgroundColor="#ecb23e"
backgroundColor="#3099f2" loading={networkNumber === 'loading'}
nonSelectBackgroundColor="#ecb23e" />
loading={networkNumber === 'loading'} <div className="network-name">{context.t('goerli')}</div>
/> <div className="network-indicator__down-arrow" />
<div className="network-name">{context.t('goerli')}</div>
<div className="network-indicator__down-arrow" />
</div>
)
default:
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>
<div className="network-indicator__down-arrow" /> )
</div> default:
) return (
} <div className="network-indicator">
})()} {networkNumber === 'loading'
</div> ? (
) <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>
)
}
} }