Skip to content
This repository has been archived by the owner on Oct 28, 2022. It is now read-only.

Commit

Permalink
Refactor Network dropdown component (MetaMask#7817)
Browse files Browse the repository at this point in the history
  • Loading branch information
@whymarrh @yqrashawn
whymarrh authored and yqrashawn committed Jan 19, 2020
1 parent 7010ede commit dff0f15
Showing 1 changed file with 112 additions and 96 deletions.
208 changes: 112 additions & 96 deletions ui/app/components/app/network.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,45 @@
import PropTypes from 'prop-types'
import React, { Component } from 'react'

import classnames from 'classnames'
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',
'conflux-test-network': providerName === 'testnet',
})}
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 {
static contextTypes = {
t: PropTypes.func,
Expand All @@ -21,104 +57,84 @@ export default class Network extends Component {
}

render () {
const context = this.context
const networkNumber = this.props.network
const { t } = this.context

const { disabled, network: networkNumber, onClick, provider } = this.props

let providerName, providerNick, providerUrl
try {
providerName = this.props.provider.type
providerNick = this.props.provider.nickname || ''
providerUrl = this.props.provider.rpcTarget
} catch (e) {
providerName = null
if (provider) {
providerName = provider.type
providerNick = provider.nickname || ''
providerUrl = provider.rpcTarget
}
const providerId = providerNick || providerName || providerUrl || null
let iconName
let hoverText

if (providerName === 'mainnet') {
hoverText = context.t('mainnet')
iconName = 'ethereum-network'
} else if (providerName === 'testnet') {
hoverText = 'conflux-test-network'
iconName = 'conflux-test-network'
} else {
hoverText = providerId
iconName = 'private-network'
}
switch (providerName) {
case 'mainnet':
return (
<NetworkIndicator
disabled={disabled}
hoverText={t('mainnet')}
onClick={onClick}
providerName={providerName}
>
<NetworkDropdownIcon
backgroundColor="#038789"
nonSelectBackgroundColor="#15afb2"
loading={networkNumber === 'loading'}
/>
<div className="network-name">{t('mainnet')}</div>
</NetworkIndicator>
)

return (
<div
className={classnames('network-component pointer', {
'network-component--disabled': this.props.disabled,
'ethereum-network': providerName === 'mainnet',
'conflux-test-network': providerName === 'testnet',
})}
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>
)
case 'conflux-test-network':
return (
<div className="network-indicator">
<NetworkDropdownIcon
backgroundColor="#e91550"
nonSelectBackgroundColor="#ec2c50"
loading={networkNumber === 'loading'}
/>
<div className="network-name">{context.t('testnet')}</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 className="network-indicator__down-arrow" />
</div>
)
}
})()}
</div>
)
case 'testnet':
return (
<NetworkIndicator
disabled={disabled}
hoverText={t('testnet')}
onClick={onClick}
providerName={providerName}
>
<NetworkDropdownIcon
backgroundColor="#e91550"
nonSelectBackgroundColor="#ec2c50"
loading={networkNumber === 'loading'}
/>
<div className="network-name">{t('testnet')}</div>
</NetworkIndicator>
)

default:
return (
<NetworkIndicator
disabled={disabled}
hoverText={providerNick || providerName || providerUrl || null}
onClick={onClick}
providerName={providerName}
>
{networkNumber === 'loading' ? (
<span
className="pointer network-loading-spinner"
onClick={event => onClick(event)}
>
<img
title={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'
? t('localhost')
: providerNick || t('privateNetwork')}
</div>
</NetworkIndicator>
)
}
}
}

0 comments on commit dff0f15

Please sign in to comment.