From e9aa37b699a105019384cbde88a114965ff1e2cd Mon Sep 17 00:00:00 2001 From: Nickyg Date: Wed, 26 Apr 2017 01:40:33 +0530 Subject: [PATCH 1/6] add rinkeby network --- app/scripts/config.js | 2 ++ app/scripts/lib/config-manager.js | 5 +++++ ui/app/app.js | 9 +++++++++ ui/app/components/drop-menu-item.js | 3 +++ ui/app/components/network.js | 5 ++++- ui/app/config.js | 5 +++++ 6 files changed, 28 insertions(+), 1 deletion(-) diff --git a/app/scripts/config.js b/app/scripts/config.js index ec421744d..4f62268e1 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' 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/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 5a7596aca..4ae40b659 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -264,6 +264,15 @@ App.prototype.renderNetworkDropdown = function () { provider: props.provider, }), + h(DropMenuItem, { + label: 'Rinkeby Test Network', + closeMenu: () => this.setState({ isNetworkMenuOpen: false}), + action: () => props.dispatch(actions.setProviderType('rinkeby')), + icon: h('.menu-icon.hollow-diamond'), + activeNetworkRender: props.network, + provider: props.provider, + }), + h(DropMenuItem, { label: 'Localhost 8545', closeMenu: () => this.setState({ isNetworkMenuOpen: false }), 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..f0fc14454 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -43,7 +43,10 @@ Network.prototype.render = function () { } else if (providerName === 'kovan') { hoverText = 'Kovan Test Network' iconName = 'kovan-test-network' - } else { + } else if (providerName === 'rinkeby') { + hoverText = 'Rinkeby Test Network' + iconName = 'unknown-private-network' + }else { hoverText = 'Unknown Private Network' iconName = 'unknown-private-network' } 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 From d764e46a500d0dc156a1da86498b751d23c94747 Mon Sep 17 00:00:00 2001 From: Nickyg Date: Wed, 26 Apr 2017 02:15:15 +0530 Subject: [PATCH 2/6] change network name to rinkeby when selected --- ui/app/components/network.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/ui/app/components/network.js b/ui/app/components/network.js index f0fc14454..94704b1bc 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -45,7 +45,7 @@ Network.prototype.render = function () { iconName = 'kovan-test-network' } else if (providerName === 'rinkeby') { hoverText = 'Rinkeby Test Network' - iconName = 'unknown-private-network' + iconName = 'rinkeby-test-network' }else { hoverText = 'Unknown Private Network' iconName = 'unknown-private-network' @@ -85,6 +85,15 @@ Network.prototype.render = function () { }}, 'Kovan Test Net'), ]) + case 'rinkeby-test-network': + return h('.network-indicator', [ + h('.menu-icon.hollow-diamond'), + h('.network-name', { + style: { + color: '#550077', + }}, + 'Rinkeby Test Net'), + ]) default: return h('.network-indicator', [ h('i.fa.fa-question-circle.fa-lg', { From 242dc1e99f1dd53e2bec9deefb5da0c8329b5f00 Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Tue, 25 Apr 2017 14:39:01 -0700 Subject: [PATCH 3/6] Add missing changes. Create unique style for rinkeby icon. --- app/scripts/config.js | 2 +- app/scripts/lib/buy-eth-url.js | 6 +++++- ui/app/app.js | 2 +- ui/app/components/buy-button-subview.js | 8 +++++++- ui/app/components/network.js | 2 +- ui/app/components/transaction-list-item.js | 2 +- ui/app/css/lib.css | 4 ++++ ui/lib/account-link.js | 3 +++ ui/lib/explorer-link.js | 3 +++ 9 files changed, 26 insertions(+), 6 deletions(-) diff --git a/app/scripts/config.js b/app/scripts/config.js index 4f62268e1..391c67230 100644 --- a/app/scripts/config.js +++ b/app/scripts/config.js @@ -1,7 +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' +const RINKEBY_RPC_URL = 'https://rinkeby.infura.io/metamask' const DEFAULT_RPC_URL = TESTNET_RPC_URL global.METAMASK_DEBUG = 'GULP_METAMASK_DEBUG' diff --git a/app/scripts/lib/buy-eth-url.js b/app/scripts/lib/buy-eth-url.js index 91a1ec322..957a00211 100644 --- a/app/scripts/lib/buy-eth-url.js +++ b/app/scripts/lib/buy-eth-url.js @@ -11,9 +11,13 @@ 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 } return url -} \ No newline at end of file +} diff --git a/ui/app/app.js b/ui/app/app.js index 4ae40b659..156490914 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -268,7 +268,7 @@ App.prototype.renderNetworkDropdown = function () { label: 'Rinkeby Test Network', closeMenu: () => this.setState({ isNetworkMenuOpen: false}), action: () => props.dispatch(actions.setProviderType('rinkeby')), - icon: h('.menu-icon.hollow-diamond'), + icon: h('.menu-icon.golden-square'), activeNetworkRender: props.network, provider: props.provider, }), 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/network.js b/ui/app/components/network.js index 94704b1bc..e8065cf00 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -87,7 +87,7 @@ Network.prototype.render = function () { ]) case 'rinkeby-test-network': return h('.network-indicator', [ - h('.menu-icon.hollow-diamond'), + h('.menu-icon.golden-square'), h('.network-name', { style: { color: '#550077', diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index 9fef52355..6f4dfae2d 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/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 From f2bf7326ccc87fa944307f0b1ffd7ca51621e53c Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Tue, 25 Apr 2017 14:44:25 -0700 Subject: [PATCH 4/6] Linting. --- ui/app/app.js | 2 +- ui/app/components/network.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/app/app.js b/ui/app/app.js index 156490914..f3661568f 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -264,7 +264,7 @@ App.prototype.renderNetworkDropdown = function () { provider: props.provider, }), - h(DropMenuItem, { + h(DropMenuItem, { label: 'Rinkeby Test Network', closeMenu: () => this.setState({ isNetworkMenuOpen: false}), action: () => props.dispatch(actions.setProviderType('rinkeby')), diff --git a/ui/app/components/network.js b/ui/app/components/network.js index e8065cf00..f7ea8c49e 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -46,7 +46,7 @@ Network.prototype.render = function () { } else if (providerName === 'rinkeby') { hoverText = 'Rinkeby Test Network' iconName = 'rinkeby-test-network' - }else { + } else { hoverText = 'Unknown Private Network' iconName = 'unknown-private-network' } From 09034772d0536b6dd0a2c591986059b3eaba221d Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Tue, 25 Apr 2017 14:57:07 -0700 Subject: [PATCH 5/6] Add (vague) instructions to adding a new network to the dropdown. --- README.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) 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 From b0919ba7296553200161913ab413f214aa58e741 Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Tue, 25 Apr 2017 14:57:35 -0700 Subject: [PATCH 6/6] Add to changelog. --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) 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