aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/network.js
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components/network.js')
-rw-r--r--ui/app/components/network.js78
1 files changed, 41 insertions, 37 deletions
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 18fca1db7..3e91fa807 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -1,6 +1,8 @@
const Component = require('react').Component
const h = require('react-hyperscript')
+const classnames = require('classnames')
const inherits = require('util').inherits
+const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')
module.exports = Network
@@ -37,7 +39,6 @@ Network.prototype.render = function () {
},
src: 'images/loading.svg',
}),
- h('i.fa.fa-caret-down'),
])
} else if (providerName === 'mainnet') {
hoverText = 'Main Ethereum Network'
@@ -60,51 +61,58 @@ Network.prototype.render = function () {
}
return (
- h('#network_component.pointer', {
+ h('div.network-component.pointer', {
+ className: classnames({
+ 'network-component--disabled': this.props.disabled,
+ 'ethereum-network': providerName === 'mainnet',
+ 'ropsten-test-network': providerName === 'ropsten' || parseInt(networkNumber) === 3,
+ 'kovan-test-network': providerName === 'kovan',
+ 'rinkeby-test-network': providerName === 'rinkeby',
+ }),
title: hoverText,
- onClick: (event) => this.props.onClick(event),
+ onClick: (event) => {
+ if (!this.props.disabled) {
+ this.props.onClick(event)
+ }
+ },
}, [
(function () {
switch (iconName) {
case 'ethereum-network':
return h('.network-indicator', [
- h('.menu-icon.diamond'),
- h('.network-name', {
- style: {
- color: '#039396',
- }},
- 'Main Network'),
- h('i.fa.fa-caret-down.fa-lg'),
+ h(NetworkDropdownIcon, {
+ backgroundColor: '#038789', // $blue-lagoon
+ nonSelectBackgroundColor: '#15afb2',
+ }),
+ h('.network-name', 'Main Network'),
+ h('i.fa.fa-chevron-down.fa-lg.network-caret'),
])
case 'ropsten-test-network':
return h('.network-indicator', [
- h('.menu-icon.red-dot'),
- h('.network-name', {
- style: {
- color: '#ff6666',
- }},
- 'Ropsten Test Net'),
- h('i.fa.fa-caret-down.fa-lg'),
+ h(NetworkDropdownIcon, {
+ backgroundColor: '#e91550', // $crimson
+ nonSelectBackgroundColor: '#ec2c50',
+ }),
+ h('.network-name', 'Ropsten Test Net'),
+ h('i.fa.fa-chevron-down.fa-lg.network-caret'),
])
case 'kovan-test-network':
return h('.network-indicator', [
- h('.menu-icon.hollow-diamond'),
- h('.network-name', {
- style: {
- color: '#690496',
- }},
- 'Kovan Test Net'),
- h('i.fa.fa-caret-down.fa-lg'),
+ h(NetworkDropdownIcon, {
+ backgroundColor: '#690496', // $purple
+ nonSelectBackgroundColor: '#b039f3',
+ }),
+ h('.network-name', 'Kovan Test Net'),
+ h('i.fa.fa-chevron-down.fa-lg.network-caret'),
])
case 'rinkeby-test-network':
return h('.network-indicator', [
- h('.menu-icon.golden-square'),
- h('.network-name', {
- style: {
- color: '#e7a218',
- }},
- 'Rinkeby Test Net'),
- h('i.fa.fa-caret-down.fa-lg'),
+ h(NetworkDropdownIcon, {
+ backgroundColor: '#ebb33f', // $tulip-tree
+ nonSelectBackgroundColor: '#ecb23e',
+ }),
+ h('.network-name', 'Rinkeby Test Net'),
+ h('i.fa.fa-chevron-down.fa-lg.network-caret'),
])
default:
return h('.network-indicator', [
@@ -115,12 +123,8 @@ Network.prototype.render = function () {
},
}),
- h('.network-name', {
- style: {
- color: '#AEAEAE',
- }},
- 'Private Network'),
- h('i.fa.fa-caret-down.fa-lg'),
+ h('.network-name', 'Private Network'),
+ h('i.fa.fa-chevron-down.fa-lg.network-caret'),
])
}
})(),