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.

7 files changed, 45 insertions, 23 deletions

diff --git a/ui/app/components/app/dropdowns/account-details-dropdown.js b/ui/app/components/app/dropdowns/account-details-dropdown.js
index 3d4598946..cbeccdd81 100644
--- a/ui/app/components/app/dropdowns/account-details-dropdown.js
+++ b/ui/app/components/app/dropdowns/account-details-dropdown.js
@@ -4,7 +4,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../../store/actions')
-const { getSelectedIdentity } = require('../../../selectors/selectors')
+const { getSelectedIdentity, getRpcPrefsForCurrentProvider } = require('../../../selectors/selectors')
 const genAccountLink = require('../../../../lib/account-link.js')
 const { Menu, Item, CloseArea } = require('./components/menu')
 
@@ -20,6 +20,7 @@ function mapStateToProps (state) {
     selectedIdentity: getSelectedIdentity(state),
     network: state.metamask.network,
     keyrings: state.metamask.keyrings,
+    rpcPrefs: getRpcPrefsForCurrentProvider(state),
   }
 }
 
@@ -28,8 +29,8 @@ function mapDispatchToProps (dispatch) {
     showAccountDetailModal: () => {
       dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
     },
-    viewOnEtherscan: (address, network) => {
-      global.platform.openWindow({ url: genAccountLink(address, network) })
+    viewOnEtherscan: (address, network, rpcPrefs) => {
+      global.platform.openWindow({ url: genAccountLink(address, network, rpcPrefs) })
     },
     showRemoveAccountConfirmationModal: (identity) => {
       return dispatch(actions.showModal({ name: 'CONFIRM_REMOVE_ACCOUNT', identity }))
@@ -56,7 +57,9 @@ AccountDetailsDropdown.prototype.render = function () {
     keyrings,
     showAccountDetailModal,
     viewOnEtherscan,
-    showRemoveAccountConfirmationModal } = this.props
+    showRemoveAccountConfirmationModal,
+    rpcPrefs,
+   } = this.props
 
   const address = selectedIdentity.address
 
@@ -112,10 +115,12 @@ AccountDetailsDropdown.prototype.render = function () {
             name: 'Clicked View on Etherscan',
           },
         })
-        viewOnEtherscan(address, network)
+        viewOnEtherscan(address, network, rpcPrefs)
         this.props.onClose()
       },
-      text: this.context.t('viewOnEtherscan'),
+      text: (rpcPrefs.blockExplorerUrl
+        ? this.context.t('blockExplorerView', [rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1]])
+        : this.context.t('viewOnEtherscan')),
       icon: h(`img`, { src: 'images/open-etherscan.svg', style: { height: '15px' } }),
     }),
     isRemovable ? h(Item, {
diff --git a/ui/app/components/app/dropdowns/network-dropdown.js b/ui/app/components/app/dropdowns/network-dropdown.js
index dbe3f1bc8..378ad3ba6 100644
--- a/ui/app/components/app/dropdowns/network-dropdown.js
+++ b/ui/app/components/app/dropdowns/network-dropdown.js
@@ -10,7 +10,7 @@ const Dropdown = require('./components/dropdown').Dropdown
 const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
 const NetworkDropdownIcon = require('./components/network-dropdown-icon')
 const R = require('ramda')
-const { ADVANCED_ROUTE } = require('../../../helpers/constants/routes')
+const { NETWORKS_ROUTE } = require('../../../helpers/constants/routes')
 
 // classes from nodes of the toggle element.
 const notToggleElementClassnames = [
@@ -49,6 +49,7 @@ function mapDispatchToProps (dispatch) {
     },
     showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
     hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
+    setNetworksTabAddMode: isInAddMode => dispatch(actions.setNetworksTabAddMode(isInAddMode)),
   }
 }
 
@@ -72,7 +73,7 @@ module.exports = compose(
 // TODO: specify default props and proptypes
 NetworkDropdown.prototype.render = function () {
   const props = this.props
-  const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
+  const { provider: { type: providerType, rpcTarget: activeNetwork }, setNetworksTabAddMode } = props
   const rpcListDetail = props.frequentRpcListDetail
   const isOpen = this.props.networkDropdownOpen
   const dropdownMenuItemStyle = {
@@ -255,7 +256,10 @@ NetworkDropdown.prototype.render = function () {
       DropdownMenuItem,
       {
         closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => this.props.history.push(ADVANCED_ROUTE),
+        onClick: () => {
+          setNetworksTabAddMode(true)
+          this.props.history.push(NETWORKS_ROUTE)
+        },
         style: dropdownMenuItemStyle,
       },
       [
diff --git a/ui/app/components/app/modals/account-details-modal.js b/ui/app/components/app/modals/account-details-modal.js
index 1b1ca6b8e..6cffc918b 100644
--- a/ui/app/components/app/modals/account-details-modal.js
+++ b/ui/app/components/app/modals/account-details-modal.js
@@ -5,7 +5,7 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../../store/actions')
 const AccountModalContainer = require('./account-modal-container')
-const { getSelectedIdentity } = require('../../../selectors/selectors')
+const { getSelectedIdentity, getRpcPrefsForCurrentProvider } = require('../../../selectors/selectors')
 const genAccountLink = require('../../../../lib/account-link.js')
 const QrView = require('../../ui/qr-code')
 const EditableLabel = require('../../ui/editable-label')
@@ -17,6 +17,7 @@ function mapStateToProps (state) {
     network: state.metamask.network,
     selectedIdentity: getSelectedIdentity(state),
     keyrings: state.metamask.keyrings,
+    rpcPrefs: getRpcPrefsForCurrentProvider(state),
   }
 }
 
@@ -54,6 +55,7 @@ AccountDetailsModal.prototype.render = function () {
     showExportPrivateKeyModal,
     setAccountLabel,
     keyrings,
+    rpcPrefs,
   } = this.props
   const { name, address } = selectedIdentity
 
@@ -86,8 +88,12 @@ AccountDetailsModal.prototype.render = function () {
       h(Button, {
         type: 'secondary',
         className: 'account-modal__button',
-        onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
-      }, this.context.t('etherscanView')),
+        onClick: () => {
+          global.platform.openWindow({ url: genAccountLink(address, network, rpcPrefs) })
+        },
+      }, (rpcPrefs.blockExplorerUrl
+        ? this.context.t('blockExplorerView', [rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1]])
+        : this.context.t('viewOnEtherscan'))),
 
       // Holding on redesign for Export Private Key functionality
 
diff --git a/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js b/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
index 4a3b04998..72ca784e2 100644
--- a/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
+++ b/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
@@ -1,13 +1,15 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import copyToClipboard from 'copy-to-clipboard'
+import {
+  getBlockExplorerUrlForTx,
+} from '../../../helpers/utils/transactions.util'
 import SenderToRecipient from '../../ui/sender-to-recipient'
 import { FLAT_VARIANT } from '../../ui/sender-to-recipient/sender-to-recipient.constants'
 import TransactionActivityLog from '../transaction-activity-log'
 import TransactionBreakdown from '../transaction-breakdown'
 import Button from '../../ui/button'
 import Tooltip from '../../ui/tooltip'
-import prefixForNetwork from '../../../../lib/etherscan-prefix-for-network'
 
 export default class TransactionListItemDetails extends PureComponent {
   static contextTypes = {
@@ -22,6 +24,7 @@ export default class TransactionListItemDetails extends PureComponent {
     showRetry: PropTypes.bool,
     cancelDisabled: PropTypes.bool,
     transactionGroup: PropTypes.object,
+    rpcPrefs: PropTypes.object,
   }
 
   state = {
@@ -30,12 +33,9 @@ export default class TransactionListItemDetails extends PureComponent {
   }
 
   handleEtherscanClick = () => {
-    const { transactionGroup: { primaryTransaction } } = this.props
+    const { transactionGroup: { primaryTransaction }, rpcPrefs } = this.props
     const { hash, metamaskNetworkId } = primaryTransaction
 
-    const prefix = prefixForNetwork(metamaskNetworkId)
-    const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}`
-
     this.context.metricsEvent({
       eventOpts: {
         category: 'Navigation',
@@ -44,7 +44,7 @@ export default class TransactionListItemDetails extends PureComponent {
       },
     })
 
-    global.platform.openWindow({ url: etherscanUrl })
+    global.platform.openWindow({ url: getBlockExplorerUrlForTx(metamaskNetworkId, hash, rpcPrefs) })
   }
 
   handleCancel = event => {
@@ -125,6 +125,7 @@ export default class TransactionListItemDetails extends PureComponent {
       showRetry,
       onCancel,
       onRetry,
+      rpcPrefs: { blockExplorerUrl } = {},
     } = this.props
     const { primaryTransaction: transaction } = transactionGroup
     const { txParams: { to, from } = {} } = transaction
@@ -158,7 +159,7 @@ export default class TransactionListItemDetails extends PureComponent {
                 />
               </Button>
             </Tooltip>
-            <Tooltip title={t('viewOnEtherscan')}>
+            <Tooltip title={blockExplorerUrl ? t('viewOnCustomBlockExplorer', [blockExplorerUrl]) : t('viewOnEtherscan')}>
               <Button
                 type="raised"
                 onClick={this.handleEtherscanClick}
diff --git a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js
index c7d9dd7c7..0d4127b4f 100644
--- a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js
+++ b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js
@@ -33,6 +33,7 @@ export default class TransactionListItem extends PureComponent {
     value: PropTypes.string,
     fetchBasicGasAndTimeEstimates: PropTypes.func,
     fetchGasEstimates: PropTypes.func,
+    rpcPrefs: PropTypes.object,
   }
 
   static defaultProps = {
@@ -161,6 +162,7 @@ export default class TransactionListItem extends PureComponent {
       showRetry,
       tokenData,
       transactionGroup,
+      rpcPrefs,
     } = this.props
     const { txParams = {} } = transaction
     const { showTransactionDetails } = this.state
@@ -216,6 +218,7 @@ export default class TransactionListItem extends PureComponent {
                   onCancel={this.handleCancel}
                   showCancel={showCancel}
                   cancelDisabled={!hasEnoughCancelGas}
+                  rpcPrefs={rpcPrefs}
                 />
               </div>
             )
diff --git a/ui/app/components/app/transaction-list-item/transaction-list-item.container.js b/ui/app/components/app/transaction-list-item/transaction-list-item.container.js
index a8fb8c246..5e88a2937 100644
--- a/ui/app/components/app/transaction-list-item/transaction-list-item.container.js
+++ b/ui/app/components/app/transaction-list-item/transaction-list-item.container.js
@@ -18,12 +18,14 @@ import { getIsMainnet, preferencesSelector, getSelectedAddress, conversionRateSe
 import { isBalanceSufficient } from '../../../pages/send/send.utils'
 
 const mapStateToProps = (state, ownProps) => {
-  const { metamask: { knownMethodData, accounts } } = state
+  const { metamask: { knownMethodData, accounts, provider, frequentRpcListDetail } } = state
   const { showFiatInTestnets } = preferencesSelector(state)
   const isMainnet = getIsMainnet(state)
   const { transactionGroup: { primaryTransaction } = {} } = ownProps
   const { txParams: { gas: gasLimit, gasPrice } = {} } = primaryTransaction
   const selectedAccountBalance = accounts[getSelectedAddress(state)].balance
+  const selectRpcInfo = frequentRpcListDetail.find(rpcInfo => rpcInfo.rpcUrl === provider.rpcTarget)
+  const { rpcPrefs } = selectRpcInfo || {}
 
   const hasEnoughCancelGas = primaryTransaction.txParams && isBalanceSufficient({
     amount: '0x0',
@@ -40,6 +42,7 @@ const mapStateToProps = (state, ownProps) => {
     showFiat: (isMainnet || !!showFiatInTestnets),
     selectedAccountBalance,
     hasEnoughCancelGas,
+    rpcPrefs,
   }
 }
 
diff --git a/ui/app/components/ui/text-field/text-field.component.js b/ui/app/components/ui/text-field/text-field.component.js
index 2c72d8124..1153a595b 100644
--- a/ui/app/components/ui/text-field/text-field.component.js
+++ b/ui/app/components/ui/text-field/text-field.component.js
@@ -41,11 +41,11 @@ const styles = {
   inputFocused: {},
   inputRoot: {
     'label + &': {
-      marginTop: '8px',
+      marginTop: '9px',
     },
-    border: '1px solid #d2d8dd',
+    border: '2px solid #BBC0C5',
     height: '48px',
-    borderRadius: '4px',
+    borderRadius: '6px',
     padding: '0 16px',
     display: 'flex',
     alignItems: 'center',