mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Convert NetworkDropdown to ES6 class (#7778)
This commit is contained in:
Whymarrh Whitby
GitHub
parent
7f47a42f55
commit
be3ba68e4c
@ -1,6 +1,5 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import React, { Component } from 'react'
|
||||
import { inherits } from 'util'
|
||||
import { connect } from 'react-redux'
|
||||
import { withRouter } from 'react-router-dom'
|
||||
import { compose } from 'recompose'
|
||||
@ -44,25 +43,165 @@ function mapDispatchToProps (dispatch) {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
inherits(NetworkDropdown, Component)
|
||||
function NetworkDropdown () {
|
||||
Component.call(this)
|
||||
}
|
||||
|
||||
NetworkDropdown.contextTypes = {
|
||||
class NetworkDropdown extends Component {
|
||||
static contextTypes = {
|
||||
t: PropTypes.func,
|
||||
metricsEvent: PropTypes.func,
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withRouter,
|
||||
connect(mapStateToProps, mapDispatchToProps)
|
||||
)(NetworkDropdown)
|
||||
static propTypes = {
|
||||
provider: PropTypes.shape({
|
||||
type: PropTypes.string,
|
||||
ticker: PropTypes.string,
|
||||
}).isRequired,
|
||||
setProviderType: PropTypes.func.isRequired,
|
||||
network: PropTypes.string.isRequired,
|
||||
setRpcTarget: PropTypes.func.isRequired,
|
||||
hideNetworkDropdown: PropTypes.func.isRequired,
|
||||
setNetworksTabAddMode: PropTypes.func.isRequired,
|
||||
frequentRpcListDetail: PropTypes.array.isRequired,
|
||||
networkDropdownOpen: PropTypes.bool.isRequired,
|
||||
history: PropTypes.object.isRequired,
|
||||
}
|
||||
|
||||
handleClick (newProviderType) {
|
||||
const { provider: { type: providerType }, setProviderType } = this.props
|
||||
const { metricsEvent } = this.context
|
||||
|
||||
// TODO: specify default props and proptypes
|
||||
NetworkDropdown.prototype.render = function NetworkDropdown () {
|
||||
metricsEvent({
|
||||
eventOpts: {
|
||||
category: 'Navigation',
|
||||
action: 'Home',
|
||||
name: 'Switched Networks',
|
||||
},
|
||||
customVariables: {
|
||||
fromNetwork: providerType,
|
||||
toNetwork: newProviderType,
|
||||
},
|
||||
})
|
||||
setProviderType(newProviderType)
|
||||
}
|
||||
|
||||
renderCustomOption (provider) {
|
||||
const { rpcTarget, type, ticker, nickname } = provider
|
||||
const network = this.props.network
|
||||
|
||||
if (type !== 'rpc') {
|
||||
return null
|
||||
}
|
||||
|
||||
switch (rpcTarget) {
|
||||
|
||||
case 'http://localhost:8545':
|
||||
return null
|
||||
|
||||
default:
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={rpcTarget}
|
||||
onClick={() => this.props.setRpcTarget(rpcTarget, network, ticker, nickname)}
|
||||
closeMenu={() => this.props.hideNetworkDropdown()}
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
lineHeight: '20px',
|
||||
padding: '12px 0',
|
||||
}}
|
||||
>
|
||||
<i className="fa fa-check" />
|
||||
<i className="fa fa-question-circle fa-med menu-icon-circle" />
|
||||
<span
|
||||
className="network-name-item"
|
||||
style={{
|
||||
color: '#ffffff',
|
||||
}}
|
||||
>
|
||||
{nickname || rpcTarget}
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
renderCommonRpc (rpcListDetail, provider) {
|
||||
const props = this.props
|
||||
const reversedRpcListDetail = rpcListDetail.slice().reverse()
|
||||
|
||||
return reversedRpcListDetail.map((entry) => {
|
||||
const rpc = entry.rpcUrl
|
||||
const ticker = entry.ticker || 'ETH'
|
||||
const nickname = entry.nickname || ''
|
||||
const currentRpcTarget = provider.type === 'rpc' && rpc === provider.rpcTarget
|
||||
|
||||
if ((rpc === 'http://localhost:8545') || currentRpcTarget) {
|
||||
return null
|
||||
} else {
|
||||
const chainId = entry.chainId
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={`common${rpc}`}
|
||||
closeMenu={() => this.props.hideNetworkDropdown()}
|
||||
onClick={() => props.setRpcTarget(rpc, chainId, ticker, nickname)}
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
lineHeight: '20px',
|
||||
padding: '12px 0',
|
||||
}}
|
||||
>
|
||||
{
|
||||
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()
|
||||
props.delRpcTarget(rpc)
|
||||
}}
|
||||
/>
|
||||
</DropdownMenuItem>
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
getNetworkName () {
|
||||
const { provider } = this.props
|
||||
const providerName = provider.type
|
||||
|
||||
let name
|
||||
|
||||
if (providerName === 'mainnet') {
|
||||
name = this.context.t('mainnet')
|
||||
} else if (providerName === 'ropsten') {
|
||||
name = this.context.t('ropsten')
|
||||
} else if (providerName === 'kovan') {
|
||||
name = this.context.t('kovan')
|
||||
} else if (providerName === 'rinkeby') {
|
||||
name = this.context.t('rinkeby')
|
||||
} else if (providerName === 'localhost') {
|
||||
name = this.context.t('localhost')
|
||||
} else if (providerName === 'goerli') {
|
||||
name = this.context.t('goerli')
|
||||
} else {
|
||||
name = provider.nickname || this.context.t('unknownNetwork')
|
||||
}
|
||||
|
||||
return name
|
||||
}
|
||||
|
||||
render () {
|
||||
const { provider: { type: providerType, rpcTarget: activeNetwork }, setNetworksTabAddMode } = this.props
|
||||
const rpcListDetail = this.props.frequentRpcListDetail
|
||||
const isOpen = this.props.networkDropdownOpen
|
||||
@ -273,143 +412,9 @@ NetworkDropdown.prototype.render = function NetworkDropdown () {
|
||||
</Dropdown>
|
||||
)
|
||||
}
|
||||
|
||||
NetworkDropdown.prototype.handleClick = function (newProviderType) {
|
||||
const { provider: { type: providerType }, setProviderType } = this.props
|
||||
const { metricsEvent } = this.context
|
||||
|
||||
metricsEvent({
|
||||
eventOpts: {
|
||||
category: 'Navigation',
|
||||
action: 'Home',
|
||||
name: 'Switched Networks',
|
||||
},
|
||||
customVariables: {
|
||||
fromNetwork: providerType,
|
||||
toNetwork: newProviderType,
|
||||
},
|
||||
})
|
||||
setProviderType(newProviderType)
|
||||
}
|
||||
|
||||
NetworkDropdown.prototype.getNetworkName = function () {
|
||||
const { provider } = this.props
|
||||
const providerName = provider.type
|
||||
|
||||
let name
|
||||
|
||||
if (providerName === 'mainnet') {
|
||||
name = this.context.t('mainnet')
|
||||
} else if (providerName === 'ropsten') {
|
||||
name = this.context.t('ropsten')
|
||||
} else if (providerName === 'kovan') {
|
||||
name = this.context.t('kovan')
|
||||
} else if (providerName === 'rinkeby') {
|
||||
name = this.context.t('rinkeby')
|
||||
} else if (providerName === 'localhost') {
|
||||
name = this.context.t('localhost')
|
||||
} else if (providerName === 'goerli') {
|
||||
name = this.context.t('goerli')
|
||||
} else {
|
||||
name = provider.nickname || this.context.t('unknownNetwork')
|
||||
}
|
||||
|
||||
return name
|
||||
}
|
||||
|
||||
NetworkDropdown.prototype.renderCommonRpc = function (rpcListDetail, provider) {
|
||||
const props = this.props
|
||||
const reversedRpcListDetail = rpcListDetail.slice().reverse()
|
||||
|
||||
return reversedRpcListDetail.map((entry) => {
|
||||
const rpc = entry.rpcUrl
|
||||
const ticker = entry.ticker || 'ETH'
|
||||
const nickname = entry.nickname || ''
|
||||
const currentRpcTarget = provider.type === 'rpc' && rpc === provider.rpcTarget
|
||||
|
||||
if ((rpc === 'http://localhost:8545') || currentRpcTarget) {
|
||||
return null
|
||||
} else {
|
||||
const chainId = entry.chainId
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={`common${rpc}`}
|
||||
closeMenu={() => this.props.hideNetworkDropdown()}
|
||||
onClick={() => props.setRpcTarget(rpc, chainId, ticker, nickname)}
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
lineHeight: '20px',
|
||||
padding: '12px 0',
|
||||
}}
|
||||
>
|
||||
{
|
||||
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()
|
||||
props.delRpcTarget(rpc)
|
||||
}}
|
||||
/>
|
||||
</DropdownMenuItem>
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @return {Component|null}
|
||||
*/
|
||||
NetworkDropdown.prototype.renderCustomOption = function NetworkDropdown (provider) {
|
||||
const { rpcTarget, type, ticker, nickname } = provider
|
||||
const network = this.props.network
|
||||
|
||||
if (type !== 'rpc') {
|
||||
return null
|
||||
}
|
||||
|
||||
switch (rpcTarget) {
|
||||
|
||||
case 'http://localhost:8545':
|
||||
return null
|
||||
|
||||
default:
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={rpcTarget}
|
||||
onClick={() => this.props.setRpcTarget(rpcTarget, network, ticker, nickname)}
|
||||
closeMenu={() => this.props.hideNetworkDropdown()}
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
lineHeight: '20px',
|
||||
padding: '12px 0',
|
||||
}}
|
||||
>
|
||||
<i className="fa fa-check" />
|
||||
<i className="fa fa-question-circle fa-med menu-icon-circle" />
|
||||
<span
|
||||
className="network-name-item"
|
||||
style={{
|
||||
color: '#ffffff',
|
||||
}}
|
||||
>
|
||||
{nickname || rpcTarget}
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default compose(
|
||||
withRouter,
|
||||
connect(mapStateToProps, mapDispatchToProps)
|
||||
)(NetworkDropdown)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user