aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/network-display.js
blob: 9dc31b5c776a38e9ef6f59ee4f140e3428a082f9 (plain) (blame)
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('react-redux')
const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')
const t = require('../../i18n')

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', t(type)),
    ])
  }
}

NetworkDisplay.propTypes = {
  network: PropTypes.string,
  provider: PropTypes.object,
}

const mapStateToProps = ({ metamask: { network, provider } }) => {
  return {
    network,
    provider,
  }
}

module.exports = connect(mapStateToProps)(NetworkDisplay)