Merge pull request #498 from MetaMask/AddEthClassic

Add eth classic

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Current Master
 
+- Add Ethereum Classic to provider menu
 - Fix bug where host store would fail to receive updates.
 
 ## 2.7.1 2016-07-27

app/scripts/chromereload.js

@@ -30,7 +30,6 @@
 //   }
 // };
 
-const extension = require('./lib/extension')
 window.LiveReloadOptions = { host: 'localhost' };
 
 (function e (t, n, r) { function s (o, u) { if (!n[o]) { if (!t[o]) { var a = typeof require === 'function' && require; if (!u && a) return a(o, !0); if (i) return i(o, !0); var f = new Error("Cannot find module '" + o + "'"); throw f.code = 'MODULE_NOT_FOUND', f } var l = n[o] = {exports: {}}; t[o][0].call(l.exports, function (e) { var n = t[o][1][e]; return s(n ? n : e) }, l, l.exports, e, t, n, r) } return n[o].exports } var i = typeof require === 'function' && require; for (var o = 0; o < r.length; o++)s(r[o]); return s })({1: [function (require, module, exports) {

app/scripts/config.js

@@ -1,12 +1,14 @@
 const MAINET_RPC_URL = 'https://mainnet.infura.io/'
 const TESTNET_RPC_URL = 'https://morden.infura.io/'
 const DEFAULT_RPC_URL = TESTNET_RPC_URL
+const CLASSIC_RPC_URL = 'https://mainnet-nf.infura.io/'
 
 module.exports = {
   network: {
     default: DEFAULT_RPC_URL,
     mainnet: MAINET_RPC_URL,
     testnet: TESTNET_RPC_URL,
+    classic: CLASSIC_RPC_URL,
   },
 }
 

app/scripts/lib/config-manager.js

@@ -4,6 +4,7 @@ const migrations = require('./migrations')
 
 const TESTNET_RPC = MetamaskConfig.network.testnet
 const MAINNET_RPC = MetamaskConfig.network.mainnet
+const CLASSIC_RPC = MetamaskConfig.network.classic
 
 /* The config-manager is a convenience object
  * wrapping a pojo-migrator.
@@ -144,6 +145,9 @@ ConfigManager.prototype.getCurrentRpcAddress = function () {
     case 'testnet':
       return TESTNET_RPC
 
+    case 'classic':
+      return CLASSIC_RPC
+
     default:
       return provider && provider.rpcTarget ? provider.rpcTarget : TESTNET_RPC
   }

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),
   ])
 }

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', '✓')
   }
 }

ui/app/components/network.js

@@ -11,11 +11,13 @@ function Network () {
 }
 
 Network.prototype.render = function () {
-  const state = this.props
+  const props = this.props
-  const networkNumber = state.network
+  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'),

ui/app/css/index.css

@@ -158,6 +158,7 @@ textarea.twelve-word-phrase {
 }
 
 .check {
+  margin-left: 7px;
   color: #F7861C;
   flex: 1 0 auto;
   display: flex;

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;

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),