Merge pull request #1352 from MetaMask/rinkeby

Rinkeby

14 files changed, 84 insertions, 2 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fb28dc9c0..8a093a9e4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - Fix occasional nonce tracking issue.
 - Fix bug where some events would not be emitted by web3.
 - Fix bug where an error would be thrown when composing signatures for networks with large ID values.
+- Add Rinkeby Test Network to our network list.
 
 ## 3.5.3 2017-4-24
 
diff --git a/README.md b/README.md
index 496b5423f..821e1cdfd 100644
--- a/README.md
+++ b/README.md
@@ -168,3 +168,28 @@ To delete a notice:
 npm run deleteNotice
 ```
 A list of active notices will pop up. Enter the corresponding id in the command line prompt and add and commit the new changes afterwards.
+
+## Adding Custom Networks
+
+To add another network to our dropdown menu, make sure the following files are adjusted properly:
+
+```
+app/scripts/config.js
+app/scripts/lib/buy-eth-url.js
+app/scripts/lib/config-manager.js
+ui/app/app.js
+ui/app/components/buy-button-subview.js
+ui/app/components/drop-menu-item.js
+ui/app/components/network.js
+ui/app/components/transaction-list-item.js
+ui/app/config.js
+ui/app/css/lib.css
+ui/lib/account-link.js
+ui/lib/explorer-link.js
+```
+
+You will need:
++ The network ID
++ An RPC Endpoint url
++ An explorer link
++ CSS for the display icon
diff --git a/app/scripts/config.js b/app/scripts/config.js
index ec421744d..391c67230 100644
--- a/app/scripts/config.js
+++ b/app/scripts/config.js
@@ -1,6 +1,7 @@
 const MAINET_RPC_URL = 'https://mainnet.infura.io/metamask'
 const TESTNET_RPC_URL = 'https://ropsten.infura.io/metamask'
 const KOVAN_RPC_URL = 'https://kovan.infura.io/metamask'
+const RINKEBY_RPC_URL = 'https://rinkeby.infura.io/metamask'
 const DEFAULT_RPC_URL = TESTNET_RPC_URL
 
 global.METAMASK_DEBUG = 'GULP_METAMASK_DEBUG'
@@ -12,5 +13,6 @@ module.exports = {
     testnet: TESTNET_RPC_URL,
     morden: TESTNET_RPC_URL,
     kovan: KOVAN_RPC_URL,
+    rinkeby: RINKEBY_RPC_URL,
   },
 }
diff --git a/app/scripts/lib/buy-eth-url.js b/app/scripts/lib/buy-eth-url.js
index 30db78a6c..b9dde3c28 100644
--- a/app/scripts/lib/buy-eth-url.js
+++ b/app/scripts/lib/buy-eth-url.js
@@ -11,6 +11,10 @@ function getBuyEthUrl ({ network, amount, address }) {
       url = 'https://faucet.metamask.io/'
       break
 
+    case '4':
+      url = 'https://www.rinkeby.io/'
+      break
+
     case '42':
       url = 'https://github.com/kovan-testnet/faucet'
       break
diff --git a/app/scripts/lib/config-manager.js b/app/scripts/lib/config-manager.js
index e31cb45ed..340ad4292 100644
--- a/app/scripts/lib/config-manager.js
+++ b/app/scripts/lib/config-manager.js
@@ -6,6 +6,8 @@ const TESTNET_RPC = MetamaskConfig.network.testnet
 const MAINNET_RPC = MetamaskConfig.network.mainnet
 const MORDEN_RPC = MetamaskConfig.network.morden
 const KOVAN_RPC = MetamaskConfig.network.kovan
+const RINKEBY_RPC = MetamaskConfig.network.rinkeby
+
 
 /* The config-manager is a convenience object
  * wrapping a pojo-migrator.
@@ -153,6 +155,9 @@ ConfigManager.prototype.getCurrentRpcAddress = function () {
 
     case 'kovan':
       return KOVAN_RPC
+    
+    case 'rinkeby':
+      return RINKEBY_RPC
 
     default:
       return provider && provider.rpcTarget ? provider.rpcTarget : TESTNET_RPC
diff --git a/ui/app/app.js b/ui/app/app.js
index 521f453cc..bbfd58588 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -265,6 +265,15 @@ App.prototype.renderNetworkDropdown = function () {
     }),
 
     h(DropMenuItem, {
+      label: 'Rinkeby Test Network',
+      closeMenu: () => this.setState({ isNetworkMenuOpen: false}),
+      action: () => props.dispatch(actions.setProviderType('rinkeby')),
+      icon: h('.menu-icon.golden-square'),
+      activeNetworkRender: props.network,
+      provider: props.provider,
+    }),
+
+    h(DropMenuItem, {
       label: 'Localhost 8545',
       closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
       action: () => props.dispatch(actions.setDefaultRpcTarget(rpcList)),
diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js
index 191f46319..87084f92d 100644
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@@ -152,13 +152,19 @@ BuyButtonSubview.prototype.formVersionSubview = function () {
           marginBottom: '15px',
         },
       }, 'In order to access this feature, please switch to the Main Network'),
-      ((network === '3') || (network === '42')) ? h('h3.text-transform-uppercase', 'or go to the') : null,
+      ((network === '3') || (network === '4') || (network === '42')) ? h('h3.text-transform-uppercase', 'or go to the') : null,
       (network === '3') ? h('button.text-transform-uppercase', {
         onClick: () => this.props.dispatch(actions.buyEth({ network })),
         style: {
           marginTop: '15px',
         },
       }, 'Ropsten Test Faucet') : null,
+      (network === '4') ? h('button.text-transform-uppercase', {
+        onClick: () => this.props.dispatch(actions.buyEth({ network })),
+        style: {
+          marginTop: '15px',
+        },
+      }, 'Rinkeby Test Faucet') : null,
       (network === '42') ? h('button.text-transform-uppercase', {
         onClick: () => this.props.dispatch(actions.buyEth({ network })),
         style: {
diff --git a/ui/app/components/drop-menu-item.js b/ui/app/components/drop-menu-item.js
index 3eb6ec876..bd9d8f597 100644
--- a/ui/app/components/drop-menu-item.js
+++ b/ui/app/components/drop-menu-item.js
@@ -47,6 +47,9 @@ DropMenuItem.prototype.activeNetworkRender = function () {
     case 'Kovan Test Network':
       if (providerType === 'kovan') return h('.check', '✓')
       break
+    case 'Rinkeby Test Network':
+      if (providerType === 'rinkeby') return h('.check', '✓')
+      break
     case 'Localhost 8545':
       if (activeNetwork === 'http://localhost:8545') return h('.check', '✓')
       break
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index d9045167f..f7ea8c49e 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -43,6 +43,9 @@ Network.prototype.render = function () {
   } 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'
@@ -82,6 +85,15 @@ Network.prototype.render = function () {
                 }},
               'Kovan Test Net'),
             ])
+          case 'rinkeby-test-network':
+            return h('.network-indicator', [
+              h('.menu-icon.golden-square'),
+              h('.network-name', {
+                style: {
+                  color: '#550077',
+                }},
+              'Rinkeby Test Net'),
+            ])
           default:
             return h('.network-indicator', [
               h('i.fa.fa-question-circle.fa-lg', {
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index ec1b0d66c..7fb2e88d9 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -27,7 +27,7 @@ TransactionListItem.prototype.render = function () {
 
   let isLinkable = false
   const numericNet = parseInt(network)
-  isLinkable = numericNet === 1 || numericNet === 3 || numericNet === 42
+  isLinkable = numericNet === 1 || numericNet === 3 || numericNet === 4 || numericNet === 42
 
   var isMsg = ('msgParams' in transaction)
   var isTx = ('txParams' in transaction)
diff --git a/ui/app/config.js b/ui/app/config.js
index 444365de2..26cfe663f 100644
--- a/ui/app/config.js
+++ b/ui/app/config.js
@@ -166,6 +166,11 @@ function currentProviderDisplay (metamaskState) {
       value = 'Kovan Test Network'
       break
 
+    case 'rinkeby':
+      title = 'Current Network'
+      value = 'Rinkeby Test Network'
+      break
+
     default:
       title = 'Current RPC'
       value = metamaskState.provider.rpcTarget
diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css
index 670dc9fd0..910a24ee2 100644
--- a/ui/app/css/lib.css
+++ b/ui/app/css/lib.css
@@ -191,6 +191,10 @@ hr.horizontal-line {
   border: 3px solid #690496;
 }
 
+.golden-square {
+  background: #EBB33F;
+}
+
 .pending-dot {
   background: red;
   left: 14px;
diff --git a/ui/lib/account-link.js b/ui/lib/account-link.js
index 4f27b35c0..d061d0ad1 100644
--- a/ui/lib/account-link.js
+++ b/ui/lib/account-link.js
@@ -11,6 +11,9 @@ module.exports = function (address, network) {
     case 3: // ropsten test net
       link = `http://ropsten.etherscan.io/address/${address}`
       break
+    case 4: // rinkeby test net
+      link = `http://rinkeby.etherscan.io/address/${address}`
+      break
     case 42: // kovan test net
       link = `http://kovan.etherscan.io/address/${address}`
       break
diff --git a/ui/lib/explorer-link.js b/ui/lib/explorer-link.js
index ca89f8b25..e11249551 100644
--- a/ui/lib/explorer-link.js
+++ b/ui/lib/explorer-link.js
@@ -8,6 +8,9 @@ module.exports = function (hash, network) {
     case 3: // ropsten test net
       prefix = 'ropsten.'
       break
+    case 4: // rinkeby test net
+      prefix = 'rinkeby.'
+      break
     case 42: // kovan test net
       prefix = 'kovan.'
       break