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