1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
const { Component } = require('react')
const h = require('react-hyperscript')
const PropTypes = require('prop-types')
const connect = require('../metamask-connect')
const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')
const networkToColorHash = {
1: '#038789',
3: '#e91550',
42: '#690496',
4: '#ebb33f',
}
class NetworkDisplay extends Component {
renderNetworkIcon () {
const { network } = this.props
const networkColor = networkToColorHash[network]
return networkColor
? h(NetworkDropdownIcon, { backgroundColor: networkColor })
: h('i.fa.fa-question-circle.fa-med', {
style: {
margin: '0 4px',
color: 'rgb(125, 128, 130)',
},
})
}
render () {
const { provider: { type } } = this.props
return h('.network-display__container', [
this.renderNetworkIcon(),
h('.network-name', this.props.t(type)),
])
}
}
NetworkDisplay.propTypes = {
network: PropTypes.string,
provider: PropTypes.object,
t: PropTypes.func,
}
const mapStateToProps = ({ metamask: { network, provider } }) => {
return {
network,
provider,
}
}
module.exports = connect(mapStateToProps)(NetworkDisplay)
|
