1 files changed, 149 insertions, 0 deletions
diff --git a/ui/app/components/app/network.js b/ui/app/components/app/network.js
new file mode 100644
index 000000000..e18404f42
--- /dev/null
+++ b/ui/app/components/app/network.js
@@ -0,0 +1,149 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const classnames = require('classnames')
+const inherits = require('util').inherits
+const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')
+
+Network.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect()(Network)
+
+
+inherits(Network, Component)
+
+function Network () {
+  Component.call(this)
+}
+
+Network.prototype.render = function () {
+  const props = this.props
+  const context = this.context
+  const networkNumber = props.network
+  let providerName, providerNick, providerUrl
+  try {
+    providerName = props.provider.type
+    providerNick = props.provider.nickname || ''
+    providerUrl = props.provider.rpcTarget
+  } catch (e) {
+    providerName = null
+  }
+  const providerId = providerNick || providerName || providerUrl || null
+  let iconName
+  let hoverText
+
+  if (providerName === 'mainnet') {
+    hoverText = context.t('mainnet')
+    iconName = 'ethereum-network'
+  } else if (providerName === 'ropsten') {
+    hoverText = context.t('ropsten')
+    iconName = 'ropsten-test-network'
+  } else if (parseInt(networkNumber) === 3) {
+    hoverText = context.t('ropsten')
+    iconName = 'ropsten-test-network'
+  } else if (providerName === 'kovan') {
+    hoverText = context.t('kovan')
+    iconName = 'kovan-test-network'
+  } else if (providerName === 'rinkeby') {
+    hoverText = context.t('rinkeby')
+    iconName = 'rinkeby-test-network'
+  } else {
+    hoverText = providerId
+    iconName = 'private-network'
+  }
+
+  return (
+    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) => {
+        if (!this.props.disabled) {
+          this.props.onClick(event)
+        }
+      },
+    }, [
+      (function () {
+        switch (iconName) {
+          case 'ethereum-network':
+            return h('.network-indicator', [
+              h(NetworkDropdownIcon, {
+                backgroundColor: '#038789', // $blue-lagoon
+                nonSelectBackgroundColor: '#15afb2',
+                loading: networkNumber === 'loading',
+              }),
+              h('.network-name', context.t('mainnet')),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+            ])
+          case 'ropsten-test-network':
+            return h('.network-indicator', [
+              h(NetworkDropdownIcon, {
+                backgroundColor: '#e91550', // $crimson
+                nonSelectBackgroundColor: '#ec2c50',
+                loading: networkNumber === 'loading',
+              }),
+              h('.network-name', context.t('ropsten')),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+            ])
+          case 'kovan-test-network':
+            return h('.network-indicator', [
+              h(NetworkDropdownIcon, {
+                backgroundColor: '#690496', // $purple
+                nonSelectBackgroundColor: '#b039f3',
+                loading: networkNumber === 'loading',
+              }),
+              h('.network-name', context.t('kovan')),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+            ])
+          case 'rinkeby-test-network':
+            return h('.network-indicator', [
+              h(NetworkDropdownIcon, {
+                backgroundColor: '#ebb33f', // $tulip-tree
+                nonSelectBackgroundColor: '#ecb23e',
+                loading: networkNumber === 'loading',
+              }),
+              h('.network-name', context.t('rinkeby')),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+            ])
+          default:
+            return h('.network-indicator', [
+              networkNumber === 'loading'
+              ? h('span.pointer.network-indicator', {
+                style: {
+                  display: 'flex',
+                  alignItems: 'center',
+                  flexDirection: 'row',
+                },
+                onClick: (event) => this.props.onClick(event),
+              }, [
+                h('img', {
+                  title: context.t('attemptingConnect'),
+                  style: {
+                    width: '27px',
+                  },
+                  src: 'images/loading.svg',
+                }),
+              ])
+              : h('i.fa.fa-question-circle.fa-lg', {
+                style: {
+                  margin: '10px',
+                  color: 'rgb(125, 128, 130)',
+                },
+              }),
+
+              h('.network-name', providerNick || context.t('privateNetwork')),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+            ])
+        }
+      })(),
+    ])
+  )
+}