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.

1 files changed, 35 insertions, 1 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"
   },