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.

9 files changed, 810 insertions, 4 deletions

diff --git a/ui/app/pages/settings/index.scss b/ui/app/pages/settings/index.scss
index a19105bb4..66959ba93 100644
--- a/ui/app/pages/settings/index.scss
+++ b/ui/app/pages/settings/index.scss
@@ -1,5 +1,7 @@
 @import 'info-tab/index';
 
+@import 'networks-tab/index';
+
 @import 'settings-tab/index';
 
 .settings-page {
@@ -13,7 +15,6 @@
     flex-flow: row nowrap;
     padding: 12px 24px;
     align-items: center;
-    border-bottom: 1px solid $alto;
     flex: 0 0 auto;
 
     &__title {
@@ -33,6 +34,34 @@
     }
   }
 
+  &__sub-header {
+    height: 72px;
+    border-bottom: 1px solid #D8D8D8;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    @media screen and (max-width: 575px) {
+      height: 69px;
+      position: relative;
+      text-align: center;
+    }
+  }
+
+  &__sub-header-text {
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 24px;
+    line-height: 24px;
+    color: black;
+
+    @media screen and (max-width: 575px) {
+      font-size: 16px;
+      width: 100%;
+    }
+  }
+
   &__back-button {
     display: none;
 
@@ -60,8 +89,9 @@
   &__content {
     display: flex;
     flex-flow: row nowrap;
-    height: auto;
+    height: 100%;
     overflow: auto;
+    border-top: 1px solid #D8D8D8;
 
     &__tabs {
       display: flex;
@@ -93,7 +123,7 @@
 
   &__body {
     padding: 12px 24px;
-
+    
     @media screen and (min-width: 576px) {
       padding: 12px;
     }
diff --git a/ui/app/pages/settings/networks-tab/index.js b/ui/app/pages/settings/networks-tab/index.js
new file mode 100644
index 000000000..362004498
--- /dev/null
+++ b/ui/app/pages/settings/networks-tab/index.js
@@ -0,0 +1 @@
+export { default } from './networks-tab.container'
diff --git a/ui/app/pages/settings/networks-tab/index.scss b/ui/app/pages/settings/networks-tab/index.scss
new file mode 100644
index 000000000..b0020437d
--- /dev/null
+++ b/ui/app/pages/settings/networks-tab/index.scss
@@ -0,0 +1,200 @@
+.networks-tab {
+  &__content {
+    margin-top: 24px;
+    display: flex;
+    height: 100%;
+    max-width: 739px;
+    justify-content: space-between;
+
+    @media screen and (max-width: 575px) {
+      margin-top: 0px;
+    }
+  }
+
+  &__body {
+    padding: 12px 24px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    @media screen and (max-width: 575px) {
+      padding: 0;
+    }
+  }
+
+  &__back-button {
+    display: none;
+
+    @media screen and (max-width: 575px) {
+      display: block;
+      background-image: url('/images/caret-left-black.svg');
+      width: 18px;
+      height: 18px;
+      opacity: .5;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+      margin-right: 16px;
+      cursor: pointer;
+      position: absolute;
+      margin-left: 10px;
+    }
+  }
+
+  &__network-form {
+    flex: 0.5 0 auto;
+    max-width: 343px;
+    max-height: 465px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .page-container__footer {
+      border-top: none;
+
+      @media screen and (max-width: 575px) {
+        width: 93%;
+      }
+
+      header {
+        padding: 10px 0px;
+      }
+    }
+
+    @media screen and (max-width: 575px) {
+      display: flex;
+      flex: auto;
+      max-width: 100%;
+      max-height: 100%;
+      align-items: center;
+      width: 100%;
+      margin-top: 10px;
+    }
+  }
+
+  &__network-form-row {
+    @media screen and (max-width: 575px) {
+      display: flex;
+      flex-direction: column;
+      width: 93%;
+    }
+  }
+
+  &__network-form-label {
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 20px;
+    color: #000000;
+  }
+
+  &__networks-list {
+    flex: 0.5 0 auto;
+    max-width: 343px;
+
+    @media screen and (max-width: 575px) {
+      max-width: 100vw;
+      width: 100vw;
+      overflow-y: scroll;
+    }
+  }
+
+  &__add-network-button-wrapper {
+    display: none;
+
+    @media screen and (max-width: 575px) {
+      display: flex;
+      padding-top: 19px;
+      padding-bottom: 23px;
+      justify-content: center;
+      align-items: center;
+      border-top: 1px solid #D8D8D8;
+
+      .button {
+        width: 178px;
+      }
+    }
+  }
+
+  &__add-network-header-button-wrapper {
+    padding-top: 15px;
+    padding-bottom: 21px;
+    justify-content: center;
+
+    .button {
+      width: 178px;
+    }
+
+    @media screen and (max-width: 575px) {
+      display: none;
+    }
+  }
+
+  &__networks-list--selection {
+    @media screen and (max-width: 575px) {
+      display: none;
+    }
+  }
+
+  &__networks-list-item {
+    display: flex;
+    padding: 13px 0px 13px 17px;
+    position: relative;
+
+    .menu-icon-circle {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    @media screen and (max-width: 575px) {
+      padding: 20px 23px 21px 17px;
+      border-bottom: 1px solid #D8D8D8;
+    }
+  }
+
+  &__networks-list-item:last-of-type {
+    @media screen and (max-width: 575px) {
+      border-bottom: none;
+    }
+  }
+
+  &__networks-list-name {
+    margin-left: 11px;
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 16px;
+    line-height: 23px;
+    color: #6A737D;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  &__networks-list-arrow {
+    display: none;
+
+    @media screen and (max-width: 575px) {
+      display: block;
+      background-image: url('/images/caret-right.svg');
+      width: 24px;
+      height: 24px;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+      right: 10px;
+      cursor: pointer;
+      position: absolute;
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  &__networks-list-name--selected {
+    font-weight: bold;
+    color: #000000;
+  }
+}
\ No newline at end of file
diff --git a/ui/app/pages/settings/networks-tab/network-form/index.js b/ui/app/pages/settings/networks-tab/network-form/index.js
new file mode 100644
index 000000000..89d9de42b
--- /dev/null
+++ b/ui/app/pages/settings/networks-tab/network-form/index.js
@@ -0,0 +1 @@
+export { default } from './network-form.component'
diff --git a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js b/ui/app/pages/settings/networks-tab/network-form/network-form.component.js
new file mode 100644
index 000000000..5e455b65e
--- /dev/null
+++ b/ui/app/pages/settings/networks-tab/network-form/network-form.component.js
@@ -0,0 +1,225 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import validUrl from 'valid-url'
+import PageContainerFooter from '../../../../components/ui/page-container/page-container-footer'
+import TextField from '../../../../components/ui/text-field'
+
+export default class NetworksTab extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func.isRequired,
+    metricsEvent: PropTypes.func.isRequired,
+  }
+
+  static propTypes = {
+    editRpc: PropTypes.func.isRequired,
+    rpcUrl: PropTypes.string,
+    chainId: PropTypes.string,
+    ticker: PropTypes.string,
+    viewOnly: PropTypes.bool,
+    networkName: PropTypes.string,
+    onClear: PropTypes.func.isRequired,
+    setRpcTarget: PropTypes.func.isRequired,
+    networksTabIsInAddMode: PropTypes.bool,
+    blockExplorerUrl: PropTypes.string,
+    rpcPrefs: PropTypes.object,
+  }
+
+  state = {
+    rpcUrl: this.props.rpcUrl,
+    chainId: this.props.chainId,
+    ticker: this.props.ticker,
+    networkName: this.props.networkName,
+    blockExplorerUrl: this.props.blockExplorerUrl,
+    errors: {},
+  }
+
+  componentDidUpdate (prevProps) {
+    const { rpcUrl: prevRpcUrl, networksTabIsInAddMode: prevAddMode } = prevProps
+    const {
+      rpcUrl,
+      chainId,
+      ticker,
+      networkName,
+      networksTabIsInAddMode,
+      blockExplorerUrl,
+    } = this.props
+
+    if (!prevAddMode && networksTabIsInAddMode) {
+      this.setState({
+        rpcUrl: '',
+        chainId: '',
+        ticker: '',
+        networkName: '',
+        blockExplorerUrl: '',
+        errors: {},
+      })
+    } else if (prevRpcUrl !== rpcUrl) {
+      this.setState({ rpcUrl, chainId, ticker, networkName, blockExplorerUrl, errors: {} })
+    }
+  }
+
+  componentWillUnmount () {
+    this.props.onClear()
+    this.setState({
+      rpcUrl: '',
+      chainId: '',
+      ticker: '',
+      networkName: '',
+      blockExplorerUrl: '',
+      errors: {},
+    })
+  }
+
+  stateIsUnchanged () {
+    const {
+      rpcUrl,
+      chainId,
+      ticker,
+      networkName,
+      blockExplorerUrl,
+    } = this.props
+
+    const {
+      rpcUrl: stateRpcUrl,
+      chainId: stateChainId,
+      ticker: stateTicker,
+      networkName: stateNetworkName,
+      blockExplorerUrl: stateBlockExplorerUrl,
+    } = this.state
+
+    return (
+      stateRpcUrl === rpcUrl &&
+      stateChainId === chainId &&
+      stateTicker === ticker &&
+      stateNetworkName === networkName &&
+      stateBlockExplorerUrl === blockExplorerUrl
+    )
+  }
+
+  renderFormTextField (fieldKey, textFieldId, onChange, value, optionalTextFieldKey) {
+    const { errors } = this.state
+    const { viewOnly } = this.props
+
+    return (
+      <div className="networks-tab__network-form-row">
+        <div className="networks-tab__network-form-label">{this.context.t(optionalTextFieldKey || fieldKey)}</div>
+        <TextField
+          type="text"
+          id={textFieldId}
+          onChange={onChange}
+          fullWidth
+          margin="dense"
+          value={value}
+          disabled={viewOnly}
+          error={errors[fieldKey]}
+        />
+      </div>
+    )
+  }
+
+  setStateWithValue = (stateKey, validator) => {
+    return (e) => {
+      validator && validator(e.target.value, stateKey)
+      this.setState({ [stateKey]: e.target.value })
+    }
+  }
+
+  setErrorTo = (errorKey, errorVal) => {
+    this.setState({
+      errors: {
+        ...this.state.errors,
+        [errorKey]: errorVal,
+      },
+    })
+  }
+
+  validateChainId = (chainId) => {
+    this.setErrorTo('chainId', !!chainId && Number.isNaN(parseInt(chainId))
+      ? `${this.context.t('invalidInput')} chainId`
+      : ''
+    )
+  }
+
+  validateUrl = (url, stateKey) => {
+    if (validUrl.isWebUri(url)) {
+      this.setErrorTo(stateKey, '')
+    } else {
+      const appendedRpc = `http://${url}`
+      const validWhenAppended = validUrl.isWebUri(appendedRpc) && !url.match(/^https?:\/\/$/)
+
+      this.setErrorTo(stateKey, this.context.t(validWhenAppended ? 'uriErrorMsg' : 'invalidRPC'))
+    }
+  }
+
+  render () {
+    const { setRpcTarget, viewOnly, rpcUrl: propsRpcUrl, editRpc, rpcPrefs = {} } = this.props
+    const {
+      networkName,
+      rpcUrl,
+      chainId,
+      ticker,
+      blockExplorerUrl,
+      errors,
+    } = this.state
+
+
+    return (
+      <div className="networks-tab__network-form">
+        {this.renderFormTextField(
+          'networkName',
+          'network-name',
+          this.setStateWithValue('networkName'),
+          networkName,
+        )}
+        {this.renderFormTextField(
+          'rpcUrl',
+          'rpc-url',
+          this.setStateWithValue('rpcUrl', this.validateUrl),
+          rpcUrl,
+        )}
+        {this.renderFormTextField(
+          'chainId',
+          'chainId',
+          this.setStateWithValue('chainId', this.validateChainId),
+          chainId,
+          'optionalChainId',
+        )}
+        {this.renderFormTextField(
+          'symbol',
+          'network-ticker',
+          this.setStateWithValue('ticker'),
+          ticker,
+          'optionalSymbol',
+        )}
+        {this.renderFormTextField(
+          'blockExplorerUrl',
+          'block-explorer-url',
+          this.setStateWithValue('blockExplorerUrl', this.validateUrl),
+          blockExplorerUrl,
+          'optionalBlockExplorerUrl',
+        )}
+        <PageContainerFooter
+          cancelText={this.context.t('cancel')}
+          hideCancel={true}
+          onSubmit={() => {
+            if (propsRpcUrl && rpcUrl !== propsRpcUrl) {
+              editRpc(propsRpcUrl, rpcUrl, chainId, ticker, networkName, {
+                blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl,
+                ...rpcPrefs,
+              })
+            } else {
+              setRpcTarget(rpcUrl, chainId, ticker, networkName, {
+                blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl,
+                ...rpcPrefs,
+              })
+            }
+          }}
+          submitText={this.context.t('save')}
+          submitButtonType={'confirm'}
+          disabled={viewOnly || this.stateIsUnchanged() || Object.values(errors).some(x => x) || !rpcUrl}
+        />
+      </div>
+    )
+  }
+
+}
diff --git a/ui/app/pages/settings/networks-tab/networks-tab.component.js b/ui/app/pages/settings/networks-tab/networks-tab.component.js
new file mode 100644
index 000000000..2f921a892
--- /dev/null
+++ b/ui/app/pages/settings/networks-tab/networks-tab.component.js
@@ -0,0 +1,214 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { SETTINGS_ROUTE } from '../../../helpers/constants/routes'
+import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums'
+import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
+import classnames from 'classnames'
+import Button from '../../../components/ui/button'
+import NetworkForm from './network-form'
+import NetworkDropdownIcon from '../../../components/app/dropdowns/components/network-dropdown-icon'
+
+export default class NetworksTab extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func.isRequired,
+    metricsEvent: PropTypes.func.isRequired,
+  }
+
+  static propTypes = {
+    editRpc: PropTypes.func.isRequired,
+    history: PropTypes.object.isRequired,
+    location: PropTypes.object.isRequired,
+    networkIsSelected: PropTypes.bool,
+    networksTabIsInAddMode: PropTypes.bool,
+    networksToRender: PropTypes.array.isRequired,
+    selectedNetwork: PropTypes.object,
+    setNetworksTabAddMode: PropTypes.func.isRequired,
+    setRpcTarget: PropTypes.func.isRequired,
+    setSelectedSettingsRpcUrl: PropTypes.func.isRequired,
+    providerUrl: PropTypes.string,
+    providerType: PropTypes.string,
+    networkDefaultedToProvider: PropTypes.bool,
+  }
+
+  componentWillMount () {
+    this.props.setSelectedSettingsRpcUrl(null)
+  }
+
+  isCurrentPath (pathname) {
+    return this.props.location.pathname === pathname
+  }
+
+  renderSubHeader () {
+    const {
+      networkIsSelected,
+      setSelectedSettingsRpcUrl,
+      setNetworksTabAddMode,
+      networksTabIsInAddMode,
+      networkDefaultedToProvider,
+    } = this.props
+
+    return (
+      <div className="settings-page__sub-header">
+          <div
+            className="networks-tab__back-button"
+            onClick={(networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode
+              ? () => {
+                  setNetworksTabAddMode(false)
+                  setSelectedSettingsRpcUrl(null)
+                }
+              : () => this.props.history.push(SETTINGS_ROUTE)
+            }
+          />
+        <span className="settings-page__sub-header-text">{ this.context.t('networks') }</span>
+        <div className="networks-tab__add-network-header-button-wrapper">
+          <Button
+            type="primary"
+            onClick={event => {
+              event.preventDefault()
+              setSelectedSettingsRpcUrl(null)
+              setNetworksTabAddMode(true)
+            }}
+          >
+            { this.context.t('addNetwork') }
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
+  renderNetworkListItem (network, selectRpcUrl) {
+    const {
+      setSelectedSettingsRpcUrl,
+      setNetworksTabAddMode,
+      networkIsSelected,
+      providerUrl,
+      providerType,
+      networksTabIsInAddMode,
+    } = this.props
+    const {
+      border,
+      iconColor,
+      label,
+      labelKey,
+      rpcUrl,
+      providerType: currentProviderType,
+    } = network
+
+    const listItemNetworkIsSelected = selectRpcUrl && selectRpcUrl === rpcUrl
+    const listItemUrlIsProviderUrl = rpcUrl === providerUrl
+    const listItemTypeIsProviderNonRpcType = providerType !== 'rpc' && currentProviderType === providerType
+    const listItemNetworkIsCurrentProvider = !networkIsSelected && !networksTabIsInAddMode && (listItemUrlIsProviderUrl || listItemTypeIsProviderNonRpcType)
+    const displayNetworkListItemAsSelected = listItemNetworkIsSelected || listItemNetworkIsCurrentProvider
+
+    return (
+      <div
+        key={'settings-network-list-item:' + rpcUrl}
+        className="networks-tab__networks-list-item"
+        onClick={ () => {
+          setNetworksTabAddMode(false)
+          setSelectedSettingsRpcUrl(rpcUrl)
+        }}
+       >
+        <NetworkDropdownIcon
+          backgroundColor={iconColor || 'white'}
+          innerBorder={border}
+        />
+        <div className={ classnames('networks-tab__networks-list-name', {
+          'networks-tab__networks-list-name--selected': displayNetworkListItemAsSelected,
+        }) }>
+          { label || this.context.t(labelKey) }
+        </div>
+        <div className="networks-tab__networks-list-arrow" />
+      </div>
+    )
+  }
+
+  renderNetworksList () {
+    const { networksToRender, selectedNetwork, networkIsSelected, networksTabIsInAddMode, networkDefaultedToProvider } = this.props
+
+    return (
+      <div className={classnames('networks-tab__networks-list', {
+        'networks-tab__networks-list--selection': (networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode,
+      })}>
+        { networksToRender.map(network => this.renderNetworkListItem(network, selectedNetwork.rpcUrl)) }
+      </div>
+    )
+  }
+
+  renderNetworksTabContent () {
+    const {
+      setRpcTarget,
+      setSelectedSettingsRpcUrl,
+      setNetworksTabAddMode,
+      selectedNetwork: {
+        labelKey,
+        label,
+        rpcUrl,
+        chainId,
+        ticker,
+        viewOnly,
+        rpcPrefs,
+        blockExplorerUrl,
+      },
+      networksTabIsInAddMode,
+      editRpc,
+      networkDefaultedToProvider,
+    } = this.props
+    const envIsPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
+
+    return (
+      <div className="networks-tab__content">
+        {this.renderNetworksList()}
+        {networksTabIsInAddMode || !envIsPopup || (envIsPopup && !networkDefaultedToProvider)
+          ? <NetworkForm
+            setRpcTarget={setRpcTarget}
+            editRpc={editRpc}
+            networkName={label || labelKey && this.context.t(labelKey) || ''}
+            rpcUrl={rpcUrl}
+            chainId={chainId}
+            ticker={ticker}
+            onClear={() => {
+              setNetworksTabAddMode(false)
+              setSelectedSettingsRpcUrl(null)
+            }}
+            viewOnly={viewOnly}
+            networksTabIsInAddMode={networksTabIsInAddMode}
+            rpcPrefs={rpcPrefs}
+            blockExplorerUrl={blockExplorerUrl}
+          />
+          : null
+        }
+      </div>
+    )
+  }
+
+  renderContent () {
+    const { setNetworksTabAddMode, setSelectedSettingsRpcUrl, networkIsSelected, networksTabIsInAddMode } = this.props
+
+    return (
+      <div className="networks-tab__body">
+        {this.renderSubHeader()}
+        {this.renderNetworksTabContent()}
+        {!networkIsSelected && !networksTabIsInAddMode
+          ? <div className="networks-tab__add-network-button-wrapper">
+              <Button
+                type="primary"
+                onClick={event => {
+                  event.preventDefault()
+                  setSelectedSettingsRpcUrl(null)
+                  setNetworksTabAddMode(true)
+                }}
+              >
+                { this.context.t('addNetwork') }
+              </Button>
+          </div>
+          : null
+        }
+      </div>
+    )
+  }
+
+  render () {
+    return this.renderContent()
+  }
+}
diff --git a/ui/app/pages/settings/networks-tab/networks-tab.constants.js b/ui/app/pages/settings/networks-tab/networks-tab.constants.js
new file mode 100644
index 000000000..d3d1a01cc
--- /dev/null
+++ b/ui/app/pages/settings/networks-tab/networks-tab.constants.js
@@ -0,0 +1,50 @@
+const defaultNetworksData = [
+  {
+    labelKey: 'mainnet',
+    iconColor: '#29B6AF',
+    providerType: 'mainnet',
+    rpcUrl: 'https://api.infura.io/v1/jsonrpc/mainnet',
+    chainId: '1',
+    ticker: 'ETH',
+    blockExplorerUrl: 'https://etherscan.io',
+  },
+  {
+    labelKey: 'ropsten',
+    iconColor: '#FF4A8D',
+    providerType: 'ropsten',
+    rpcUrl: 'https://api.infura.io/v1/jsonrpc/ropsten',
+    chainId: '3',
+    ticker: 'ETH',
+    blockExplorerUrl: 'https://ropsten.etherscan.io',
+  },
+  {
+    labelKey: 'kovan',
+    iconColor: '#9064FF',
+    providerType: 'kovan',
+    rpcUrl: 'https://api.infura.io/v1/jsonrpc/kovan',
+    chainId: '4',
+    ticker: 'ETH',
+    blockExplorerUrl: 'https://etherscan.io',
+  },
+  {
+    labelKey: 'rinkeby',
+    iconColor: '#F6C343',
+    providerType: 'rinkeby',
+    rpcUrl: 'https://api.infura.io/v1/jsonrpc/rinkeby',
+    chainId: '42',
+    ticker: 'ETH',
+    blockExplorerUrl: 'https://rinkeby.etherscan.io',
+  },
+  {
+    labelKey: 'localhost',
+    iconColor: 'white',
+    border: '1px solid #6A737D',
+    providerType: 'localhost',
+    rpcUrl: 'http://localhost:8545/',
+    blockExplorerUrl: 'https://etherscan.io',
+  },
+]
+
+export {
+  defaultNetworksData,
+}
diff --git a/ui/app/pages/settings/networks-tab/networks-tab.container.js b/ui/app/pages/settings/networks-tab/networks-tab.container.js
new file mode 100644
index 000000000..a5d71f714
--- /dev/null
+++ b/ui/app/pages/settings/networks-tab/networks-tab.container.js
@@ -0,0 +1,77 @@
+import NetworksTab from './networks-tab.component'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import {
+  setSelectedSettingsRpcUrl,
+  updateAndSetCustomRpc,
+  displayWarning,
+  setNetworksTabAddMode,
+  editRpc,
+} from '../../../store/actions'
+import { defaultNetworksData } from './networks-tab.constants'
+const defaultNetworks = defaultNetworksData.map(network => ({ ...network, viewOnly: true }))
+
+const mapStateToProps = state => {
+  const {
+    frequentRpcListDetail,
+    provider,
+  } = state.metamask
+  const {
+    networksTabSelectedRpcUrl,
+    networksTabIsInAddMode,
+  } = state.appState
+
+  const frequentRpcNetworkListDetails = frequentRpcListDetail.map(rpc => {
+    return {
+      label: rpc.nickname,
+      iconColor: '#6A737D',
+      providerType: 'rpc',
+      rpcUrl: rpc.rpcUrl,
+      chainId: rpc.chainId,
+      ticker: rpc.ticker,
+      blockExplorerUrl: rpc.rpcPrefs && rpc.rpcPrefs.blockExplorerUrl || '',
+    }
+  })
+
+  const networksToRender = [ ...defaultNetworks, ...frequentRpcNetworkListDetails ]
+  let selectedNetwork = networksToRender.find(network => network.rpcUrl === networksTabSelectedRpcUrl) || {}
+  const networkIsSelected = Boolean(selectedNetwork.rpcUrl)
+
+  let networkDefaultedToProvider = false
+  if (!networkIsSelected && !networksTabIsInAddMode) {
+    selectedNetwork = networksToRender.find(network => {
+      return network.rpcUrl === provider.rpcTarget || network.providerType !== 'rpc' && network.providerType === provider.type
+    }) || {}
+    networkDefaultedToProvider = true
+  }
+
+  return {
+    selectedNetwork,
+    networksToRender,
+    networkIsSelected,
+    networksTabIsInAddMode,
+    providerType: provider.type,
+    providerUrl: provider.rpcTarget,
+    networkDefaultedToProvider,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setSelectedSettingsRpcUrl: newRpcUrl => dispatch(setSelectedSettingsRpcUrl(newRpcUrl)),
+    setRpcTarget: (newRpc, chainId, ticker, nickname, rpcPrefs) => {
+      dispatch(updateAndSetCustomRpc(newRpc, chainId, ticker, nickname, rpcPrefs))
+    },
+    displayWarning: warning => dispatch(displayWarning(warning)),
+    setNetworksTabAddMode: isInAddMode => dispatch(setNetworksTabAddMode(isInAddMode)),
+    editRpc: (oldRpc, newRpc, chainId, ticker, nickname, rpcPrefs) => {
+      dispatch(editRpc(oldRpc, newRpc, chainId, ticker, nickname, rpcPrefs))
+    },
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(NetworksTab)
diff --git a/ui/app/pages/settings/settings.component.js b/ui/app/pages/settings/settings.component.js
index fe799a6e8..a2f137264 100644
--- a/ui/app/pages/settings/settings.component.js
+++ b/ui/app/pages/settings/settings.component.js
@@ -6,6 +6,7 @@ import { getEnvironmentType } from '../../../../app/scripts/lib/util'
 import TabBar from '../../components/app/tab-bar'
 import c from 'classnames'
 import SettingsTab from './settings-tab'
+import NetworksTab from './networks-tab'
 import AdvancedTab from './advanced-tab'
 import InfoTab from './info-tab'
 import SecurityTab from './security-tab'
@@ -16,6 +17,7 @@ import {
   GENERAL_ROUTE,
   ABOUT_US_ROUTE,
   SETTINGS_ROUTE,
+  NETWORKS_ROUTE,
 } from '../../helpers/constants/routes'
 
 const ROUTES_TO_I18N_KEYS = {
@@ -55,7 +57,7 @@ class SettingsPage extends PureComponent {
       >
         <div className="settings-page__header">
           {
-            !this.isCurrentPath(SETTINGS_ROUTE) && (
+            !this.isCurrentPath(SETTINGS_ROUTE) && !this.isCurrentPath(NETWORKS_ROUTE) && (
               <div
                 className="settings-page__back-button"
                 onClick={() => history.push(SETTINGS_ROUTE)}
@@ -104,6 +106,7 @@ class SettingsPage extends PureComponent {
           { content: t('general'), description: t('generalSettingsDescription'), key: GENERAL_ROUTE },
           { content: t('advanced'), description: t('advancedSettingsDescription'), key: ADVANCED_ROUTE },
           { content: t('securityAndPrivacy'), description: t('securitySettingsDescription'), key: SECURITY_ROUTE },
+          { content: t('networks'), description: t('networkSettingsDescription'), key: NETWORKS_ROUTE },
           { content: t('about'), description: t('aboutSettingsDescription'), key: ABOUT_US_ROUTE },
         ]}
         isActive={key => {
@@ -137,6 +140,11 @@ class SettingsPage extends PureComponent {
         />
         <Route
           exact
+          path={NETWORKS_ROUTE}
+          component={NetworksTab}
+        />
+        <Route
+          exact
           path={SECURITY_ROUTE}
           component={SecurityTab}
         />