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 use JSX (#7564)

Browse Source
This commit is contained in:
Whymarrh Whitby 2019-11-27 11:37:06 -03:30 committed by GitHub
parent baa5313d21
commit 9a1c7e3864
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 111 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,6 @@
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 connect = require('react-redux').connect
const classnames = require('classnames') const classnames = require('classnames')
const inherits = require('util').inherits const inherits = require('util').inherits
const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon') const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')
@ -10,8 +9,7 @@ Network.contextTypes = {
t: PropTypes.func, t: PropTypes.func,
} }
module.exports = connect()(Network) module.exports = Network
inherits(Network, Component) inherits(Network, Component)
@ -19,15 +17,14 @@ function Network () {
Component.call(this) Component.call(this)
} }
Network.prototype.render = function () { Network.prototype.render = function Network () {
const props = this.props
const context = this.context const context = this.context
const networkNumber = props.network const networkNumber = this.props.network
let providerName, providerNick, providerUrl let providerName, providerNick, providerUrl
try { try {
providerName = props.provider.type providerName = this.props.provider.type
providerNick = props.provider.nickname || '' providerNick = this.props.provider.nickname || ''
providerUrl = props.provider.rpcTarget providerUrl = this.props.provider.rpcTarget
} catch (e) { } catch (e) {
providerName = null providerName = null
} }
@ -56,96 +53,124 @@ Network.prototype.render = function () {
} }
return ( return (
h('div.network-component.pointer', { <div
className: classnames({ className={classnames('network-component pointer', {
'network-component--disabled': this.props.disabled, 'network-component--disabled': this.props.disabled,
'ethereum-network': providerName === 'mainnet', 'ethereum-network': providerName === 'mainnet',
'ropsten-test-network': providerName === 'ropsten', 'ropsten-test-network': providerName === 'ropsten',
'kovan-test-network': providerName === 'kovan', 'kovan-test-network': providerName === 'kovan',
'rinkeby-test-network': providerName === 'rinkeby', 'rinkeby-test-network': providerName === 'rinkeby',
'goerli-test-network': providerName === 'goerli', 'goerli-test-network': providerName === 'goerli',
}), })}
title: hoverText, title={hoverText}
onClick: (event) => { onClick={(event) => {
if (!this.props.disabled) { if (!this.props.disabled) {
this.props.onClick(event) this.props.onClick(event)
} }
}, }}
}, [ >
(function () { {(function () {
switch (iconName) { switch (iconName) {
case 'ethereum-network': case 'ethereum-network':
return h('.network-indicator', [ return (
h(NetworkDropdownIcon, { <div className="network-indicator">
backgroundColor: '#038789', // $blue-lagoon <NetworkDropdownIcon
nonSelectBackgroundColor: '#15afb2', backgroundColor="#038789"
loading: networkNumber === 'loading', nonSelectBackgroundColor="#15afb2"
}), loading={networkNumber === 'loading'}
h('.network-name', context.t('mainnet')), />
h('.network-indicator__down-arrow'), <div className="network-name">
]) {context.t('mainnet')}
</div>
<div className="network-indicator__down-arrow" />
</div>
)
case 'ropsten-test-network': case 'ropsten-test-network':
return h('.network-indicator', [ return (
h(NetworkDropdownIcon, { <div className="network-indicator">
backgroundColor: '#e91550', // $crimson <NetworkDropdownIcon
nonSelectBackgroundColor: '#ec2c50', backgroundColor="#e91550"
loading: networkNumber === 'loading', nonSelectBackgroundColor="#ec2c50"
}), loading={networkNumber === 'loading'}
h('.network-name', context.t('ropsten')), />
h('.network-indicator__down-arrow'), <div className="network-name">
]) {context.t('ropsten')}
</div>
<div className="network-indicator__down-arrow" />
</div>
)
case 'kovan-test-network': case 'kovan-test-network':
return h('.network-indicator', [ return (
h(NetworkDropdownIcon, { <div className="network-indicator">
backgroundColor: '#690496', // $purple <NetworkDropdownIcon
nonSelectBackgroundColor: '#b039f3', backgroundColor="#690496"
loading: networkNumber === 'loading', nonSelectBackgroundColor="#b039f3"
}), loading={networkNumber === 'loading'}
h('.network-name', context.t('kovan')), />
h('.network-indicator__down-arrow'), <div className="network-name">
]) {context.t('kovan')}
</div>
<div className="network-indicator__down-arrow" />
</div>
)
case 'rinkeby-test-network': case 'rinkeby-test-network':
return h('.network-indicator', [ return (
h(NetworkDropdownIcon, { <div className="network-indicator">
backgroundColor: '#ebb33f', // $tulip-tree <NetworkDropdownIcon
nonSelectBackgroundColor: '#ecb23e', backgroundColor="#ebb33f"
loading: networkNumber === 'loading', nonSelectBackgroundColor="#ecb23e"
}), loading={networkNumber === 'loading'}
h('.network-name', context.t('rinkeby')), />
h('.network-indicator__down-arrow'), <div className="network-name">
]) {context.t('rinkeby')}
</div>
<div className="network-indicator__down-arrow" />
</div>
)
case 'goerli-test-network': case 'goerli-test-network':
return h('.network-indicator', [ return (
h(NetworkDropdownIcon, { <div className="network-indicator">
backgroundColor: '#3099f2', // $dodger-blue <NetworkDropdownIcon
nonSelectBackgroundColor: '#ecb23e', backgroundColor="#3099f2"
loading: networkNumber === 'loading', nonSelectBackgroundColor="#ecb23e"
}), loading={networkNumber === 'loading'}
h('.network-name', context.t('goerli')), />
h('.network-indicator__down-arrow'), <div className="network-name">{context.t('goerli')}</div>
]) <div className="network-indicator__down-arrow" />
</div>
)
default: default:
return h('.network-indicator', [ return (
networkNumber === 'loading' <div className="network-indicator">
? h('span.pointer.network-loading-spinner', { {networkNumber === 'loading'
onClick: (event) => this.props.onClick(event), ? (
}, [ <span
h('img', { className="pointer network-loading-spinner"
title: context.t('attemptingConnect'), onClick={(event) => this.props.onClick(event)}
src: 'images/loading.svg', >
}), <img title={context.t('attemptingConnect')} src="images/loading.svg" alt="" />
]) </span>
: h('i.fa.fa-question-circle.fa-lg', { )
style: { : (
color: 'rgb(125, 128, 130)', <i
}, className="fa fa-question-circle fa-lg"
}), style={{
color: 'rgb(125, 128, 130)',
h('.network-name', providerName === 'localhost' ? context.t('localhost') : providerNick || context.t('privateNetwork')), }}
h('.network-indicator__down-arrow'), />
]) )}
<div className="network-name">
{
providerName === 'localhost'
? context.t('localhost')
: providerNick || context.t('privateNetwork')
}
</div>
<div className="network-indicator__down-arrow" />
</div>
)
} }
})(), })()}
]) </div>
) )
} }