diff options
| author | Dan <danjm.com@gmail.com> | 2018-03-22 08:58:58 +0800 |
|---|---|---|
| committer | Dan <danjm.com@gmail.com> | 2018-03-22 08:58:58 +0800 |
| commit | be845fd190ee71d2bb6e641a5c23c453668268e3 (patch) | |
| tree | 28d5267d8c149b0e323351a9ebfa222de9d33bdc /ui/app/components/network-display.js | |
| parent | d24a0590d363dbe88d383c8faec8eb28809242f0 (diff) | |
| parent | 04b1f8428b487663b276a541d739631954fe0be1 (diff) | |
| download | tangerine-wallet-browser-be845fd190ee71d2bb6e641a5c23c453668268e3.tar.gz tangerine-wallet-browser-be845fd190ee71d2bb6e641a5c23c453668268e3.tar.zst tangerine-wallet-browser-be845fd190ee71d2bb6e641a5c23c453668268e3.zip | |
Merge branch 'master' into i18n-translator-redux
Diffstat (limited to 'ui/app/components/network-display.js')
| -rw-r--r-- | ui/app/components/network-display.js | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/ui/app/components/network-display.js b/ui/app/components/network-display.js new file mode 100644 index 000000000..9dc31b5c7 --- /dev/null +++ b/ui/app/components/network-display.js @@ -0,0 +1,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) |