feature: add Goerli support (#6459)

app/_locales/en/messages.json

@@ -311,6 +311,9 @@
   "connectingToLocalhost": {
     "message": "Connecting to Localhost 8545"
   },
+  "connectingToGoerli": {
+    "message": "Connecting to Goerli Test Network"
+  },
   "connectingToUnknown": {
     "message": "Connecting to Unknown Network"
   },
@@ -1229,6 +1232,9 @@
   "ropsten": {
     "message": "Ropsten Test Network"
   },
+  "goerli": {
+    "message": "Goerli Test Network"
+  },
   "rpc": {
     "message": "Custom RPC"
   },

app/scripts/controllers/network/createInfuraClient.js

@@ -49,6 +49,10 @@ function createNetworkAndChainIdMiddleware ({ network }) {
       netId = '42'
       chainId = '0x2a'
       break
+    case 'goerli':
+      netId = '5'
+      chainId = '0x05'
+      break
     default:
       throw new Error(`createInfuraClient - unknown network "${network}"`)
   }

app/scripts/controllers/network/enums.js

@@ -3,16 +3,19 @@ const RINKEBY = 'rinkeby'
 const KOVAN = 'kovan'
 const MAINNET = 'mainnet'
 const LOCALHOST = 'localhost'
+const GOERLI = 'goerli'
 
 const MAINNET_CODE = 1
 const ROPSTEN_CODE = 3
 const RINKEYBY_CODE = 4
 const KOVAN_CODE = 42
+const GOERLI_CODE = 5
 
 const ROPSTEN_DISPLAY_NAME = 'Ropsten'
 const RINKEBY_DISPLAY_NAME = 'Rinkeby'
 const KOVAN_DISPLAY_NAME = 'Kovan'
 const MAINNET_DISPLAY_NAME = 'Main Ethereum Network'
+const GOERLI_DISPLAY_NAME = 'Goerli'
 
 module.exports = {
   ROPSTEN,
@@ -20,12 +23,15 @@ module.exports = {
   KOVAN,
   MAINNET,
   LOCALHOST,
+  GOERLI,
   MAINNET_CODE,
   ROPSTEN_CODE,
   RINKEYBY_CODE,
   KOVAN_CODE,
+  GOERLI_CODE,
   ROPSTEN_DISPLAY_NAME,
   RINKEBY_DISPLAY_NAME,
   KOVAN_DISPLAY_NAME,
   MAINNET_DISPLAY_NAME,
+  GOERLI_DISPLAY_NAME,
 }

app/scripts/controllers/network/network.js

@@ -20,8 +20,9 @@ const {
   KOVAN,
   MAINNET,
   LOCALHOST,
+  GOERLI,
 } = require('./enums')
-const INFURA_PROVIDER_TYPES = [ROPSTEN, RINKEBY, KOVAN, MAINNET]
+const INFURA_PROVIDER_TYPES = [ROPSTEN, RINKEBY, KOVAN, MAINNET, GOERLI]
 
 const env = process.env.METAMASK_ENV
 const METAMASK_DEBUG = process.env.METAMASK_DEBUG

app/scripts/controllers/network/util.js

@@ -3,13 +3,16 @@ const {
   RINKEBY,
   KOVAN,
   MAINNET,
+  GOERLI,
   ROPSTEN_CODE,
   RINKEYBY_CODE,
   KOVAN_CODE,
+  GOERLI_CODE,
   ROPSTEN_DISPLAY_NAME,
   RINKEBY_DISPLAY_NAME,
   KOVAN_DISPLAY_NAME,
   MAINNET_DISPLAY_NAME,
+  GOERLI_DISPLAY_NAME,
 } = require('./enums')
 
 const networkToNameMap = {
@@ -17,9 +20,11 @@ const networkToNameMap = {
   [RINKEBY]: RINKEBY_DISPLAY_NAME,
   [KOVAN]: KOVAN_DISPLAY_NAME,
   [MAINNET]: MAINNET_DISPLAY_NAME,
+  [GOERLI]: GOERLI_DISPLAY_NAME,
   [ROPSTEN_CODE]: ROPSTEN_DISPLAY_NAME,
   [RINKEYBY_CODE]: RINKEBY_DISPLAY_NAME,
   [KOVAN_CODE]: KOVAN_DISPLAY_NAME,
+  [GOERLI_CODE]: GOERLI_DISPLAY_NAME,
 }
 
 const getNetworkDisplayName = key => networkToNameMap[key]

app/scripts/controllers/recent-blocks.js

@@ -8,8 +8,9 @@ const {
   RINKEBY,
   KOVAN,
   MAINNET,
+  GOERLI,
 } = require('./network/enums')
-const INFURA_PROVIDER_TYPES = [ROPSTEN, RINKEBY, KOVAN, MAINNET]
+const INFURA_PROVIDER_TYPES = [ROPSTEN, RINKEBY, KOVAN, MAINNET, GOERLI]
 
 
 class RecentBlocksController {

app/scripts/lib/buy-eth-url.js

@@ -28,6 +28,8 @@ function getBuyEthUrl ({ network, amount, address, service }) {
       return 'https://www.rinkeby.io/'
     case 'kovan-faucet':
       return 'https://github.com/kovan-testnet/faucet'
+    case 'goerli-faucet':
+      return 'https://goerli-faucet.slock.it/'
   }
   throw new Error(`Unknown cryptocurrency exchange or faucet: "${service}"`)
 }
@@ -42,6 +44,8 @@ function getDefaultServiceForNetwork (network) {
       return 'rinkeby-faucet'
     case '42':
       return 'kovan-faucet'
+    case '5':
+      return 'goerli-faucet'
   }
   throw new Error(`No default cryptocurrency exchange or faucet for networkId: "${network}"`)
 }

development/states/navigate-txs.json

@@ -230,7 +230,8 @@
       "kovan": "ok",
       "mainnet": "ok",
       "rinkeby": "ok",
-      "ropsten": "ok"
+      "ropsten": "ok",
+      "goerli": "ok"
     },
     "lostAccounts": []
   },

development/states/pending-tx.json

@@ -704,7 +704,8 @@
       "mainnet": "ok",
       "ropsten": "ok",
       "kovan": "ok",
-      "rinkeby": "ok"
+      "rinkeby": "ok",
+      "goerli": "ok"
     },
     "shapeShiftTxList": [],
     "lostAccounts": []

test/data/v17-long-history.json

@@ -54,7 +54,8 @@
         "mainnet": "degraded",
         "ropsten": "ok",
         "kovan": "ok",
-        "rinkeby": "ok"
+        "rinkeby": "ok",
+        "goerli": "ok"
       }
     },
     "BlacklistController": {

test/unit/app/controllers/infura-controller-test.js

@@ -4,7 +4,7 @@ const InfuraController = require('../../../../app/scripts/controllers/infura')
 
 describe('infura-controller', function () {
   let infuraController, sandbox, networkStatus
-  const response = {'mainnet': 'degraded', 'ropsten': 'ok', 'kovan': 'ok', 'rinkeby': 'down'}
+  const response = {'mainnet': 'degraded', 'ropsten': 'ok', 'kovan': 'ok', 'rinkeby': 'down', 'goerli': 'ok'}
 
   before(async function () {
     infuraController = new InfuraController()
@@ -58,5 +58,15 @@ describe('infura-controller', function () {
         assert.equal(networkStatus.rinkeby, 'down')
       })
     })
+
+    describe('Goerli', function () {
+      it('should have Goerli', function () {
+        assert.equal(Object.keys(networkStatus)[4], 'goerli')
+      })
+
+      it('should have a value for Goerli status', function () {
+        assert.equal(networkStatus.goerli, 'ok')
+      })
+    })
   })
 })

test/unit/app/controllers/network-contoller-test.js

@@ -92,6 +92,9 @@ describe('Network utils', () => {
       }, {
         input: 'mainnet',
         expected: 'Main Ethereum Network',
+      }, {
+        input: 'goerli',
+        expected: 'Goerli',
       },
     ]
 

test/unit/app/controllers/transactions/recipient-blacklist-checker-test.js

@@ -4,6 +4,7 @@ const {
   ROPSTEN_CODE,
   RINKEYBY_CODE,
   KOVAN_CODE,
+  GOERLI_CODE,
 } = require('../../../../../app/scripts/controllers/network/enums')
 
 const KeyringController = require('eth-keyring-controller')
@@ -27,14 +28,14 @@ describe('Recipient Blacklist Checker', function () {
   describe('#checkAccount', function () {
     it('does not fail on test networks', function () {
       let callCount = 0
-      const networks = [ROPSTEN_CODE, RINKEYBY_CODE, KOVAN_CODE]
+      const networks = [ROPSTEN_CODE, RINKEYBY_CODE, KOVAN_CODE, GOERLI_CODE]
       for (const networkId in networks) {
         publicAccounts.forEach((account) => {
            recipientBlackListChecker.checkAccount(networkId, account)
             callCount++
         })
       }
-      assert.equal(callCount, 30)
+      assert.equal(callCount, 40)
     })
 
     it('fails on mainnet', function () {

test/unit/ui/etherscan-prefix-for-network.spec.js

@@ -23,4 +23,8 @@ describe('Etherscan Network Prefix', () => {
     assert.equal(etherscanNetworkPrefix(42), 'kovan.')
   })
 
+  it('returs goerli as prefix for networkId of 5', () => {
+    assert.equal(etherscanNetworkPrefix(5), 'goerli.')
+  })
+
 })

ui/app/components/app/dropdowns/network-dropdown.js

@@ -204,6 +204,28 @@ NetworkDropdown.prototype.render = function () {
       ]
     ),
 
+    h(
+      DropdownMenuItem,
+      {
+        key: 'goerli',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => this.handleClick('goerli'),
+        style: dropdownMenuItemStyle,
+      },
+      [
+        providerType === 'goerli' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+        h(NetworkDropdownIcon, {
+          backgroundColor: '#3099f2', // $dodger-blue
+          isSelected: providerType === 'goerli',
+        }),
+        h('span.network-name-item', {
+          style: {
+            color: providerType === 'goerli' ? '#ffffff' : '#9b9b9b',
+          },
+        }, this.context.t('goerli')),
+      ]
+    ),
+
     h(
       DropdownMenuItem,
       {
@@ -287,6 +309,8 @@ NetworkDropdown.prototype.getNetworkName = function () {
     name = this.context.t('rinkeby')
   } else if (providerName === 'localhost') {
     name = this.context.t('localhost')
+  } else if (providerName === 'goerli') {
+    name = this.context.t('goerli')
   } else {
     name = provider.nickname || this.context.t('unknownNetwork')
   }

ui/app/components/app/dropdowns/tests/network-dropdown.test.js

@@ -62,7 +62,7 @@ describe('Network Dropdown', () => {
     })
 
     it('renders 7 DropDownMenuItems ', () => {
-      assert.equal(wrapper.find(DropdownMenuItem).length, 7)
+      assert.equal(wrapper.find(DropdownMenuItem).length, 8)
     })
 
     it('checks background color for first NetworkDropdownIcon', () => {
@@ -82,15 +82,19 @@ describe('Network Dropdown', () => {
     })
 
     it('checks background color for fifth NetworkDropdownIcon', () => {
-      assert.equal(wrapper.find(NetworkDropdownIcon).at(4).prop('innerBorder'), '1px solid #9b9b9b')
+      assert.equal(wrapper.find(NetworkDropdownIcon).at(4).prop('backgroundColor'), '#3099f2') // Goerli Blue
+    })
+
+    it('checks background color for sixth NetworkDropdownIcon', () => {
+      assert.equal(wrapper.find(NetworkDropdownIcon).at(5).prop('innerBorder'), '1px solid #9b9b9b')
     })
 
     it('checks dropdown for frequestRPCList from  state ', () => {
-      assert.equal(wrapper.find(DropdownMenuItem).at(5).text(), '✓http://localhost:7545')
+      assert.equal(wrapper.find(DropdownMenuItem).at(6).text(), '✓http://localhost:7545')
     })
 
-    it('checks background color for sixth NetworkDropdownIcon', () => {
-      assert.equal(wrapper.find(NetworkDropdownIcon).at(5).prop('innerBorder'), '1px solid #9b9b9b')
+    it('checks background color for seventh NetworkDropdownIcon', () => {
+      assert.equal(wrapper.find(NetworkDropdownIcon).at(6).prop('innerBorder'), '1px solid #9b9b9b')
     })
 
   })

ui/app/components/app/loading-network-screen/loading-network-screen.component.js

@@ -47,6 +47,8 @@ export default class LoadingNetworkScreen extends PureComponent {
       name = this.context.t('connectingToRinkeby')
     } else if (providerName === 'localhost') {
       name = this.context.t('connectingToLocalhost')
+    } else if (providerName === 'goerli') {
+      name = this.context.t('connectingToGoerli')
     } else {
       name = this.context.t('connectingTo', [providerId])
     }

ui/app/components/app/modals/deposit-ether-modal.js

@@ -133,7 +133,7 @@ DepositEtherModal.prototype.render = function () {
   const { network, toWyre, toCoinSwitch, address, toFaucet } = this.props
   const { buyingWithShapeshift } = this.state
 
-  const isTestNetwork = ['3', '4', '42'].find(n => n === network)
+  const isTestNetwork = ['3', '4', '5', '42'].find(n => n === network)
   const networkName = getNetworkDisplayName(network)
 
   return h('div.page-container.page-container--full-width.page-container--full-height', {}, [

ui/app/components/app/network-display/index.scss

@@ -26,6 +26,10 @@
     &--rinkeby {
       background-color: lighten($tulip-tree, 35%);
     }
+
+    &--goerli {
+      background-color: lighten($dodger-blue, 35%);
+    }
   }
 
   &__name {
@@ -53,5 +57,9 @@
     &--rinkeby {
       background-color: $tulip-tree;
     }
+
+    &--goerli {
+      background-color: $dodger-blue;
+    }
   }
 }

ui/app/components/app/network-display/network-display.component.js

@@ -6,12 +6,14 @@ import {
   ROPSTEN_CODE,
   RINKEYBY_CODE,
   KOVAN_CODE,
+  GOERLI_CODE,
 } from '../../../../../app/scripts/controllers/network/enums'
 
 const networkToClassHash = {
   [MAINNET_CODE]: 'mainnet',
   [ROPSTEN_CODE]: 'ropsten',
   [RINKEYBY_CODE]: 'rinkeby',
+  [GOERLI_CODE]: 'goerli',
   [KOVAN_CODE]: 'kovan',
 }
 

ui/app/components/app/network.js

@@ -50,6 +50,9 @@ Network.prototype.render = function () {
   } else if (providerName === 'rinkeby') {
     hoverText = context.t('rinkeby')
     iconName = 'rinkeby-test-network'
+  } else if (providerName === 'goerli') {
+    hoverText = context.t('goerli')
+    iconName = 'goerli-test-network'
   } else {
     hoverText = providerId
     iconName = 'private-network'
@@ -63,6 +66,7 @@ Network.prototype.render = function () {
         'ropsten-test-network': providerName === 'ropsten' || parseInt(networkNumber) === 3,
         'kovan-test-network': providerName === 'kovan',
         'rinkeby-test-network': providerName === 'rinkeby',
+        'goerli-test-network': providerName === 'goerli',
       }),
       title: hoverText,
       onClick: (event) => {
@@ -113,6 +117,16 @@ Network.prototype.render = function () {
               h('.network-name', context.t('rinkeby')),
               h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
+          case 'goerli-test-network':
+            return h('.network-indicator', [
+              h(NetworkDropdownIcon, {
+                backgroundColor: '#3099f2', // $dodger-blue
+                nonSelectBackgroundColor: '#ecb23e',
+                loading: networkNumber === 'loading',
+              }),
+              h('.network-name', context.t('goerli')),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+            ])
           default:
             return h('.network-indicator', [
               networkNumber === 'loading'

ui/app/css/itcss/components/network.scss

@@ -29,6 +29,10 @@
   &.rinkeby-test-network .menu-icon-circle div {
     background-color: rgba(235, 179, 63, .7) !important;
   }
+
+  &.goerli-test-network .menu-icon-circle div {
+    background-color: rgba(48, 153, 242, .7) !important;
+  }
 }
 
 .dropdown-menu-item {

ui/app/helpers/constants/common.js

@@ -10,4 +10,5 @@ export const NETWORK_TYPES = {
   MAINNET: 'mainnet',
   RINKEBY: 'rinkeby',
   ROPSTEN: 'ropsten',
+  GOERLI: 'goerli',
 }

ui/app/pages/routes/index.js

@@ -269,6 +269,8 @@ class Routes extends Component {
       name = this.context.t('connectingToRinkeby')
     } else if (providerName === 'localhost') {
       name = this.context.t('connectingToLocalhost')
+    } else if (providerName === 'goerli') {
+      name = this.context.t('connectingToGoerli')
     } else {
       name = this.context.t('connectingTo', [providerId])
     }
@@ -292,6 +294,8 @@ class Routes extends Component {
       name = this.context.t('rinkeby')
     } else if (providerName === 'localhost') {
       name = this.context.t('localhost')
+    } else if (providerName === 'goerli') {
+      name = this.context.t('goerli')
     } else {
       name = this.context.t('unknownNetwork')
     }

ui/app/selectors/selectors.js

@@ -300,9 +300,10 @@ function isEthereumNetwork (state) {
     MAINNET,
     RINKEBY,
     ROPSTEN,
+    GOERLI,
   } = NETWORK_TYPES
 
-  return [ KOVAN, MAINNET, RINKEBY, ROPSTEN].includes(networkType)
+  return [ KOVAN, MAINNET, RINKEBY, ROPSTEN, GOERLI].includes(networkType)
 }
 
 function preferencesSelector ({ metamask }) {

ui/lib/account-link.js

@@ -17,6 +17,9 @@ module.exports = function (address, network) {
     case 42: // kovan test net
       link = `https://kovan.etherscan.io/address/${address}`
       break
+    case 5: // goerli test net
+      link = `https://goerli.etherscan.io/address/${address}`
+      break
     default:
       link = ''
       break

ui/lib/etherscan-prefix-for-network.js

@@ -14,6 +14,9 @@ module.exports = function (network) {
     case 42: // kovan test net
       prefix = 'kovan.'
       break
+    case 5: // goerli test net
+      prefix = 'goerli.'
+      break
     default:
       prefix = ''
   }