Add eth classic to provider menu

5 files changed, 44 insertions, 9 deletions

diff --git a/ui/app/app.js b/ui/app/app.js
index df5350f67..b8deedc13 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -131,6 +131,7 @@ App.prototype.renderAppBar = function () {
 
           h(NetworkIndicator, {
             network: this.props.network,
+            provider: this.props.provider,
             onClick: (event) => {
               event.preventDefault()
               event.stopPropagation()
@@ -221,6 +222,16 @@ App.prototype.renderNetworkDropdown = function () {
       action: () => props.dispatch(actions.setProviderType('mainnet')),
       icon: h('.menu-icon.diamond'),
       activeNetworkRender: props.network,
+      provider: props.provider,
+    }),
+
+    h(DropMenuItem, {
+      label: 'Ethereum Classic Network',
+      closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
+      action: () => props.dispatch(actions.setProviderType('classic')),
+      icon: h('.menu-icon.hollow-diamond'),
+      activeNetworkRender: props.network,
+      provider: props.provider,
     }),
 
     h(DropMenuItem, {
@@ -238,6 +249,7 @@ App.prototype.renderNetworkDropdown = function () {
       icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }),
       activeNetworkRender: props.provider.rpcTarget,
     }),
+
     this.renderCustomOption(props.provider.rpcTarget),
   ])
 }
diff --git a/ui/app/components/drop-menu-item.js b/ui/app/components/drop-menu-item.js
index f5800f799..8bff3e131 100644
--- a/ui/app/components/drop-menu-item.js
+++ b/ui/app/components/drop-menu-item.js
@@ -32,20 +32,24 @@ DropMenuItem.prototype.render = function () {
 }
 
 DropMenuItem.prototype.activeNetworkRender = function () {
-  var activeNetwork = this.props.activeNetworkRender
+  let activeNetwork = this.props.activeNetworkRender
+  let { provider } = this.props
   if (activeNetwork === undefined) return
 
   switch (this.props.label) {
     case 'Main Ethereum Network':
-      if (activeNetwork === '1') return h('.check', '	✓')
+      if (provider.type === 'mainnet') return h('.check', '✓')
+      break
+    case 'Ethereum Classic Network':
+      if (provider.type === 'classic') return h('.check', '✓')
       break
     case 'Morden Test Network':
-      if (activeNetwork === '2') return h('.check', '	✓')
+      if (activeNetwork === '2') return h('.check', '✓')
       break
     case 'Localhost 8545':
-      if (activeNetwork === 'http://localhost:8545') return h('.check', '	✓')
+      if (activeNetwork === 'http://localhost:8545') return h('.check', '✓')
       break
     default:
-      if (activeNetwork === 'custom') return h('.check', '	✓')
+      if (activeNetwork === 'custom') return h('.check', '✓')
   }
 }
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 032e71699..22b11aa6c 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -11,11 +11,13 @@ function Network () {
 }
 
 Network.prototype.render = function () {
-  const state = this.props
-  const networkNumber = state.network
+  const props = this.props
+  const networkNumber = props.network
+  const providerName = props.provider.type
   let iconName, hoverText
 
   if (networkNumber === 'loading') {
+
     return h('img', {
       title: 'Attempting to connect to blockchain.',
       onClick: (event) => this.props.onClick(event),
@@ -25,9 +27,13 @@ Network.prototype.render = function () {
       },
       src: 'images/loading.svg',
     })
-  } else if (parseInt(networkNumber) === 1) {
+
+  } else if (providerName === 'mainnet') {
     hoverText = 'Main Ethereum Network'
     iconName = 'ethereum-network'
+  } else if (providerName === 'classic') {
+    hoverText = 'Ethereum Classic Network'
+    iconName = 'classic-network'
   } else if (parseInt(networkNumber) === 2) {
     hoverText = 'Morden Test Network'
     iconName = 'morden-test-network'
@@ -55,6 +61,15 @@ Network.prototype.render = function () {
                 }},
               'Etherum Main Net'),
             ])
+          case 'classic-network':
+            return h('.network-indicator', [
+              h('.menu-icon.hollow-diamond'),
+              h('.network-name', {
+                style: {
+                  color: '#039396',
+                }},
+              'Etherum Classic'),
+            ])
           case 'morden-test-network':
             return h('.network-indicator', [
               h('.menu-icon.red-dot'),
diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css
index 22b26d4f1..bcd6a4a67 100644
--- a/ui/app/css/lib.css
+++ b/ui/app/css/lib.css
@@ -178,6 +178,11 @@ hr.horizontal-line {
   background: #038789;
 }
 
+.hollow-diamond {
+  transform: rotate(45deg);
+  border: 1px solid #038789;
+}
+
 .pending-dot {
   background: red;
   left: 14px;
diff --git a/ui/app/settings.js b/ui/app/settings.js
index e56f4ee63..454cc95e0 100644
--- a/ui/app/settings.js
+++ b/ui/app/settings.js
@@ -32,7 +32,6 @@ AppSettingsPage.prototype.render = function () {
         htmlFor: 'settings-rpc-endpoint',
       }, 'RPC Endpoint:'),
       h('input', {
-        // value: '//testrpc.metamask.io',
         type: 'url',
         id: 'settings-rpc-endpoint',
         onKeyPress: this.onKeyPress.bind(this),