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.js124
1 files changed, 124 insertions, 0 deletions
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
new file mode 100644
index 000000000..698a0bbb9
--- /dev/null
+++ b/ui/app/components/network.js
@@ -0,0 +1,124 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = Network
+
+inherits(Network, Component)
+
+function Network () {
+ Component.call(this)
+}
+
+Network.prototype.render = function () {
+ const props = this.props
+ const networkNumber = props.network
+ let providerName
+ try {
+ providerName = props.provider.type
+ } catch (e) {
+ providerName = null
+ }
+ let iconName, hoverText
+
+ if (networkNumber === 'loading') {
+ return h('span', {
+ style: {
+ display: 'flex',
+ alignItems: 'center',
+ flexDirection: 'row',
+ },
+ onClick: (event) => this.props.onClick(event),
+ }, [
+ h('img', {
+ title: 'Attempting to connect to blockchain.',
+ style: {
+ width: '27px',
+ },
+ src: 'images/loading.svg',
+ }),
+ h('i.fa.fa-sort-desc'),
+ ])
+ } else if (providerName === 'mainnet') {
+ hoverText = 'Main Ethereum Network'
+ iconName = 'ethereum-network'
+ } else if (providerName === 'ropsten') {
+ hoverText = 'Ropsten Test Network'
+ iconName = 'ropsten-test-network'
+ } else if (parseInt(networkNumber) === 3) {
+ hoverText = 'Ropsten Test Network'
+ iconName = 'ropsten-test-network'
+ } else if (providerName === 'kovan') {
+ hoverText = 'Kovan Test Network'
+ iconName = 'kovan-test-network'
+ } else if (providerName === 'rinkeby') {
+ hoverText = 'Rinkeby Test Network'
+ iconName = 'rinkeby-test-network'
+ } else {
+ hoverText = 'Unknown Private Network'
+ iconName = 'unknown-private-network'
+ }
+
+ return (
+ h('#network_component.pointer', {
+ title: hoverText,
+ onClick: (event) => this.props.onClick(event),
+ }, [
+ (function () {
+ switch (iconName) {
+ case 'ethereum-network':
+ return h('.network-indicator', [
+ h('.menu-icon.diamond'),
+ h('.network-name', {
+ style: {
+ color: '#039396',
+ }},
+ 'Ethereum Main Net'),
+ ])
+ case 'ropsten-test-network':
+ return h('.network-indicator', [
+ h('.menu-icon.red-dot'),
+ h('.network-name', {
+ style: {
+ color: '#ff6666',
+ }},
+ 'Ropsten Test Net'),
+ ])
+ case 'kovan-test-network':
+ return h('.network-indicator', [
+ h('.menu-icon.hollow-diamond'),
+ h('.network-name', {
+ style: {
+ color: '#690496',
+ }},
+ 'Kovan Test Net'),
+ ])
+ case 'rinkeby-test-network':
+ return h('.network-indicator', [
+ h('.menu-icon.golden-square'),
+ h('.network-name', {
+ style: {
+ color: '#e7a218',
+ }},
+ 'Rinkeby Test Net'),
+ ])
+ default:
+ return h('.network-indicator', [
+ h('i.fa.fa-question-circle.fa-lg', {
+ style: {
+ margin: '10px',
+ color: 'rgb(125, 128, 130)',
+ },
+ }),
+
+ h('.network-name', {
+ style: {
+ color: '#AEAEAE',
+ }},
+ 'Private Network'),
+ ])
+ }
+ })(),
+ ])
+ )
+}