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.

2 files changed, 18 insertions, 0 deletions

diff --git a/ui/app/helpers/constants/routes.js b/ui/app/helpers/constants/routes.js
index df35112d1..d906fc8e6 100644
--- a/ui/app/helpers/constants/routes.js
+++ b/ui/app/helpers/constants/routes.js
@@ -8,6 +8,7 @@ const ADVANCED_ROUTE = '/settings/advanced'
 const SECURITY_ROUTE = '/settings/security'
 const COMPANY_ROUTE = '/settings/company'
 const ABOUT_US_ROUTE = '/settings/about-us'
+const NETWORKS_ROUTE = '/settings/networks'
 const REVEAL_SEED_ROUTE = '/seed'
 const MOBILE_SYNC_ROUTE = '/mobile-sync'
 const CONFIRM_SEED_ROUTE = '/confirm-seed'
@@ -86,4 +87,5 @@ module.exports = {
   COMPANY_ROUTE,
   GENERAL_ROUTE,
   ABOUT_US_ROUTE,
+  NETWORKS_ROUTE,
 }
diff --git a/ui/app/helpers/utils/transactions.util.js b/ui/app/helpers/utils/transactions.util.js
index cb6c9536c..99ccc3478 100644
--- a/ui/app/helpers/utils/transactions.util.js
+++ b/ui/app/helpers/utils/transactions.util.js
@@ -6,6 +6,8 @@ import {
   TRANSACTION_TYPE_CANCEL,
   TRANSACTION_STATUS_CONFIRMED,
 } from '../../../../app/scripts/controllers/transactions/enums'
+import prefixForNetwork from '../../../lib/etherscan-prefix-for-network'
+
 
 import {
   TOKEN_METHOD_TRANSFER,
@@ -188,3 +190,17 @@ export function getStatusKey (transaction) {
 
   return transaction.status
 }
+
+/**
+ * Returns an external block explorer URL at which a transaction can be viewed.
+ * @param {number} networkId
+ * @param {string} hash
+ * @param {Object} rpcPrefs
+ */
+export function getBlockExplorerUrlForTx (networkId, hash, rpcPrefs = {}) {
+  if (rpcPrefs.blockExplorerUrl) {
+    return `${rpcPrefs.blockExplorerUrl}/tx/${hash}`
+  }
+  const prefix = prefixForNetwork(networkId)
+  return `https://${prefix}etherscan.io/tx/${hash}`
+}