aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/network-display.js
diff options
context:
space:
mode:
authorAlexander Tseung <alextsg@gmail.com>2018-03-27 15:20:35 +0800
committerAlexander Tseung <alextsg@gmail.com>2018-03-27 15:20:35 +0800
commit6f367a5a6b4fb8918405f233293dc3f4840b4a3d (patch)
treec60c01300c90204f8634d1f3e9e79b4ecc2fceda /ui/app/components/network-display.js
parent72ffa2c3f5abbcb06c8ab5fdf20b9d934c330692 (diff)
parente001c0900b5256c0c8769f0c3eb5d2007f5b18d3 (diff)
downloadtangerine-wallet-browser-6f367a5a6b4fb8918405f233293dc3f4840b4a3d.tar
tangerine-wallet-browser-6f367a5a6b4fb8918405f233293dc3f4840b4a3d.tar.gz
tangerine-wallet-browser-6f367a5a6b4fb8918405f233293dc3f4840b4a3d.tar.bz2
tangerine-wallet-browser-6f367a5a6b4fb8918405f233293dc3f4840b4a3d.tar.lz
tangerine-wallet-browser-6f367a5a6b4fb8918405f233293dc3f4840b4a3d.tar.xz
tangerine-wallet-browser-6f367a5a6b4fb8918405f233293dc3f4840b4a3d.tar.zst
tangerine-wallet-browser-6f367a5a6b4fb8918405f233293dc3f4840b4a3d.zip
Fix merge conflicts
Diffstat (limited to 'ui/app/components/network-display.js')
-rw-r--r--ui/app/components/network-display.js51
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)