New settings custom rpc form (#6490)

* Add networks tab to settings, with header.

* Adds network list to settings network tab.

* Adds form to settings networks tab and connects it to network list.

* Network tab: form adding and editing working

* Settings network form properly handles input errors

* Add translations for settings network form

* Clean up styles of settings network tab.

* Add popup-view styles and behaviour to settings network tab.

* Fix save button on settings network form

* Adds 'Add Network' button and addMode to settings networks tab

* Lint fix for settings networks tab addition

* Fix navigation in settings networks tab.

* Editing an rpcurl in networks tab does not create new network, just changes rpc of old

* Fix layout of settings tabs other than network

* Networks dropdown 'Custom Rpc' item links to networks tab in settings.

* Update settings sidebar networks subheader.

* Make networks tab buttons width consistent with input widths in extension view.

* Fix settings screen subheader height in popup view

* Fix height of add networks button in popup view

* Add optional label to chainId and symbol form labels in networks setting tab

* Style fixes for networks tab headers

* Add ability to customize block explorer used by custom rpc

* Stylistic improvements+fixes to custom rpc form.

* Hide cancel button.

* Highlight and show network form of provider by default.

* Standardize network subheader name to 'Networks'

* Update e2e tests for new settings network form

* Update unit tests for new rpcPrefs prop

* Extract blockexplorer url construction into method.

* Fix broken styles on non-network tabs in popup mode

* Fix block explorer url links for cases when provider in state has not been updated.

* Fix vertical spacing of network form

* Don't allow click of save button on network form if nothing has changed

* Ensure add network button is shown in popup view

* Lint fix for networks tab

* Fix block explorer url preference setting.

* Fix e2e tests for custom blockexplorer in account details modal changes.

* Update integration test states to include frequentRpcList property

* Fix some capitalizations in en/messages.json

* Remove some console.logs added during custom rpc form work

* Fix external account link text and url for modal and dropdown.

* Documentation, url validation, proptype required additions and lint fixes on network tab and form.

4 files changed, 60 insertions, 25 deletions

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 7a5f9297c..254bfdfb9 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -83,6 +83,9 @@
   "address": {
     "message": "Address"
   },
+  "addNetwork": {
+    "message": "Add Network"
+  },
   "advanced": {
     "message": "Advanced"
   },
@@ -191,6 +194,13 @@
     "message": "must be greater than or equal to $1 and less than or equal to $2.",
     "description": "helper for inputting hex as decimal input"
   },
+  "blockExplorerUrl": {
+    "message": "Block Explorer"
+  },
+  "blockExplorerView": {
+    "message": "View account at $1",
+    "description": "$1 replaced by URL for custom block explorer"
+  },
   "blockiesIdenticon": {
     "message": "Use Blockies Identicon"
   },
@@ -230,6 +240,9 @@
   "ok": {
     "message": "Ok"
   },
+  "optionalBlockExplorerUrl": {
+    "message": "Block Explorer URL (optional)"
+  },
   "cancel": {
     "message": "Cancel"
   },
@@ -245,6 +258,9 @@
   "cancelN": {
     "message": "Cancel all $1 transactions"
   },
+  "chainId": {
+    "message": "Chain ID"
+  },
   "classicInterface": {
     "message": "Use classic interface"
   },
@@ -502,6 +518,9 @@
   "edit": {
     "message": "Edit"
   },
+  "editNetwork": {
+    "message": "Edit Network"
+  },
   "editAccountName": {
     "message": "Edit Account Name"
   },
@@ -934,9 +953,15 @@
   "negativeETH": {
     "message": "Can not send negative amounts of ETH."
   },
+  "networkName": {
+    "message": "Network Name"
+  },
   "networks": {
     "message": "Networks"
   },
+  "networkSettingsDescription": {
+    "message": "Add and edit custom RPC networks"
+  },
   "nevermind": {
     "message": "Nevermind"
   },
@@ -977,7 +1002,7 @@
   "protectYourKeysMessage2": {
     "message": "Keep your phrase safe. If you see something fishy, or you’re uncertain about a website, email support@metamask.io"
   },
-  "rpcURL": {
+  "rpcUrl": {
     "message": "New RPC URL"
   },
   "showAdvancedOptions": {
@@ -1492,6 +1517,9 @@
   "supportCenter": {
     "message": "Visit our Support Center"
   },
+  "symbol": {
+    "message": "Symbol"
+  },
   "symbolBetweenZeroTwelve": {
     "message": "Symbol must be between 0 and 12 characters."
   },
@@ -1714,9 +1742,15 @@
   "viewAccount": {
     "message": "View Account"
   },
+  "viewOnCustomBlockExplorer": {
+    "message": "View at $1"
+  },
   "viewOnEtherscan": {
     "message": "View on Etherscan"
   },
+  "viewNetworkInfo": {
+    "message": "View Network Info"
+  },
   "visitWebSite": {
     "message": "Visit our web site"
   },
diff --git a/app/scripts/controllers/network/network.js b/app/scripts/controllers/network/network.js
index fc8e0df5d..2c68e4378 100644
--- a/app/scripts/controllers/network/network.js
+++ b/app/scripts/controllers/network/network.js
@@ -129,13 +129,14 @@ module.exports = class NetworkController extends EventEmitter {
     })
   }
 
-  setRpcTarget (rpcTarget, chainId, ticker = 'ETH', nickname = '') {
+  setRpcTarget (rpcTarget, chainId, ticker = 'ETH', nickname = '', rpcPrefs) {
     const providerConfig = {
       type: 'rpc',
       rpcTarget,
       chainId,
       ticker,
       nickname,
+      rpcPrefs,
     }
     this.providerConfig = providerConfig
   }
diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js
index bbb13bd8e..acf952bb1 100644
--- a/app/scripts/controllers/preferences.js
+++ b/app/scripts/controllers/preferences.js
@@ -488,8 +488,8 @@ class PreferencesController {
       rpcList[index] = updatedRpc
       this.store.updateState({ frequentRpcListDetail: rpcList })
     } else {
-      const { rpcUrl, chainId, ticker, nickname } = newRpcDetails
-      return this.addToFrequentRpcList(rpcUrl, chainId, ticker, nickname)
+      const { rpcUrl, chainId, ticker, nickname, rpcPrefs = {} } = newRpcDetails
+      return this.addToFrequentRpcList(rpcUrl, chainId, ticker, nickname, rpcPrefs)
     }
     return Promise.resolve(rpcList)
   }
@@ -503,22 +503,22 @@ class PreferencesController {
    * @returns {Promise<array>} Promise resolving to updated frequentRpcList.
    *
    */
-  addToFrequentRpcList (url, chainId, ticker = 'ETH', nickname = '') {
-    const rpcList = this.getFrequentRpcListDetail()
-    const index = rpcList.findIndex((element) => { return element.rpcUrl === url })
-    if (index !== -1) {
-      rpcList.splice(index, 1)
-    }
-    if (url !== 'http://localhost:8545') {
-      let checkedChainId
-      if (!!chainId && !Number.isNaN(parseInt(chainId))) {
-        checkedChainId = chainId
+    addToFrequentRpcList (url, chainId, ticker = 'ETH', nickname = '', rpcPrefs = {}) {
+      const rpcList = this.getFrequentRpcListDetail()
+      const index = rpcList.findIndex((element) => { return element.rpcUrl === url })
+      if (index !== -1) {
+        rpcList.splice(index, 1)
       }
-      rpcList.push({ rpcUrl: url, chainId: checkedChainId, ticker, nickname })
+      if (url !== 'http://localhost:8545') {
+        let checkedChainId
+        if (!!chainId && !Number.isNaN(parseInt(chainId))) {
+          checkedChainId = chainId
+        }
+        rpcList.push({ rpcUrl: url, chainId: checkedChainId, ticker, nickname, rpcPrefs })
+      }
+      this.store.updateState({ frequentRpcListDetail: rpcList })
+      return Promise.resolve(rpcList)
     }
-    this.store.updateState({ frequentRpcListDetail: rpcList })
-    return Promise.resolve(rpcList)
-  }
 
   /**
    * Removes custom RPC url from state.
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index b190dd452..cc9d51d3c 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -1633,9 +1633,9 @@ module.exports = class MetamaskController extends EventEmitter {
    * @returns {Promise<String>} - The RPC Target URL confirmed.
    */
 
-  async updateAndSetCustomRpc (rpcUrl, chainId, ticker = 'ETH', nickname) {
-    await this.preferencesController.updateRpc({ rpcUrl, chainId, ticker, nickname })
-    this.networkController.setRpcTarget(rpcUrl, chainId, ticker, nickname)
+  async updateAndSetCustomRpc (rpcUrl, chainId, ticker = 'ETH', nickname, rpcPrefs) {
+    await this.preferencesController.updateRpc({ rpcUrl, chainId, ticker, nickname, rpcPrefs })
+    this.networkController.setRpcTarget(rpcUrl, chainId, ticker, nickname, rpcPrefs)
     return rpcUrl
   }
 
@@ -1648,15 +1648,15 @@ module.exports = class MetamaskController extends EventEmitter {
    * @param {string} nickname - Optional nickname of the selected network.
    * @returns {Promise<String>} - The RPC Target URL confirmed.
    */
-  async setCustomRpc (rpcTarget, chainId, ticker = 'ETH', nickname = '') {
+  async setCustomRpc (rpcTarget, chainId, ticker = 'ETH', nickname = '', rpcPrefs = {}) {
     const frequentRpcListDetail = this.preferencesController.getFrequentRpcListDetail()
     const rpcSettings = frequentRpcListDetail.find((rpc) => rpcTarget === rpc.rpcUrl)
 
     if (rpcSettings) {
-      this.networkController.setRpcTarget(rpcSettings.rpcUrl, rpcSettings.chainId, rpcSettings.ticker, rpcSettings.nickname)
+      this.networkController.setRpcTarget(rpcSettings.rpcUrl, rpcSettings.chainId, rpcSettings.ticker, rpcSettings.nickname, rpcPrefs)
     } else {
-      this.networkController.setRpcTarget(rpcTarget, chainId, ticker, nickname)
-      await this.preferencesController.addToFrequentRpcList(rpcTarget, chainId, ticker, nickname)
+      this.networkController.setRpcTarget(rpcTarget, chainId, ticker, nickname, rpcPrefs)
+      await this.preferencesController.addToFrequentRpcList(rpcTarget, chainId, ticker, nickname, rpcPrefs)
     }
     return rpcTarget
   }