Merge pull request #6599 from MetaMask/develop

Master Version Bump (v6.5.0)

13 files changed, 992 insertions, 12 deletions

diff --git a/ui/app/pages/settings/advanced-tab/advanced-tab.component.js b/ui/app/pages/settings/advanced-tab/advanced-tab.component.js
index 14b9daae6..3d27fe349 100644
--- a/ui/app/pages/settings/advanced-tab/advanced-tab.component.js
+++ b/ui/app/pages/settings/advanced-tab/advanced-tab.component.js
@@ -24,6 +24,8 @@ export default class AdvancedTab extends PureComponent {
     setAdvancedInlineGasFeatureFlag: PropTypes.func,
     advancedInlineGas: PropTypes.bool,
     showFiatInTestnets: PropTypes.bool,
+    autoLogoutTimeLimit: PropTypes.number,
+    setAutoLogoutTimeLimit: PropTypes.func.isRequired,
     setShowFiatConversionOnTestnetsPreference: PropTypes.func.isRequired,
   }
 
@@ -49,7 +51,7 @@ export default class AdvancedTab extends PureComponent {
             <TextField
               type="text"
               id="new-rpc"
-              placeholder={t('rpcURL')}
+              placeholder={t('rpcUrl')}
               value={newRpc}
               onChange={e => this.setState({ newRpc: e.target.value })}
               onKeyPress={e => {
@@ -355,6 +357,48 @@ export default class AdvancedTab extends PureComponent {
     )
   }
 
+  renderAutoLogoutTimeLimit () {
+    const { t } = this.context
+    const {
+      autoLogoutTimeLimit,
+      setAutoLogoutTimeLimit,
+    } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('autoLogoutTimeLimit') }</span>
+          <div className="settings-page__content-description">
+            { t('autoLogoutTimeLimitDescription') }
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <TextField
+              type="number"
+              id="autoTimeout"
+              placeholder="5"
+              value={this.state.autoLogoutTimeLimit}
+              defaultValue={autoLogoutTimeLimit}
+              onChange={e => this.setState({ autoLogoutTimeLimit: Math.max(Number(e.target.value), 0) })}
+              fullWidth
+              margin="dense"
+              min={0}
+            />
+            <button
+              className="button btn-primary settings-tab__rpc-save-button"
+              onClick={() => {
+                setAutoLogoutTimeLimit(this.state.autoLogoutTimeLimit)
+              }}
+            >
+              { t('save') }
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   renderContent () {
     const { warning } = this.props
 
@@ -368,6 +412,7 @@ export default class AdvancedTab extends PureComponent {
         { this.renderAdvancedGasInputInline() }
         { this.renderHexDataOptIn() }
         { this.renderShowConversionInTestnets() }
+        { this.renderAutoLogoutTimeLimit() }
       </div>
     )
   }
diff --git a/ui/app/pages/settings/advanced-tab/advanced-tab.container.js b/ui/app/pages/settings/advanced-tab/advanced-tab.container.js
index 69d7e07e6..bcac55f5e 100644
--- a/ui/app/pages/settings/advanced-tab/advanced-tab.container.js
+++ b/ui/app/pages/settings/advanced-tab/advanced-tab.container.js
@@ -8,10 +8,11 @@ import {
   setFeatureFlag,
   showModal,
   setShowFiatConversionOnTestnetsPreference,
+  setAutoLogoutTimeLimit,
 } from '../../../store/actions'
 import {preferencesSelector} from '../../../selectors/selectors'
 
-const mapStateToProps = state => {
+export const mapStateToProps = state => {
   const { appState: { warning }, metamask } = state
   const {
     featureFlags: {
@@ -19,17 +20,18 @@ const mapStateToProps = state => {
       advancedInlineGas,
     } = {},
   } = metamask
-  const { showFiatInTestnets } = preferencesSelector(state)
+  const { showFiatInTestnets, autoLogoutTimeLimit } = preferencesSelector(state)
 
   return {
     warning,
     sendHexData,
     advancedInlineGas,
     showFiatInTestnets,
+    autoLogoutTimeLimit,
   }
 }
 
-const mapDispatchToProps = dispatch => {
+export const mapDispatchToProps = dispatch => {
   return {
     setHexDataFeatureFlag: shouldShow => dispatch(setFeatureFlag('sendHexData', shouldShow)),
     setRpcTarget: (newRpc, chainId, ticker, nickname) => dispatch(updateAndSetCustomRpc(newRpc, chainId, ticker, nickname)),
@@ -39,6 +41,9 @@ const mapDispatchToProps = dispatch => {
     setShowFiatConversionOnTestnetsPreference: value => {
       return dispatch(setShowFiatConversionOnTestnetsPreference(value))
     },
+    setAutoLogoutTimeLimit: value => {
+      return dispatch(setAutoLogoutTimeLimit(value))
+    },
   }
 }
 
diff --git a/ui/app/pages/settings/advanced-tab/tests/advanced-tab-component.test.js b/ui/app/pages/settings/advanced-tab/tests/advanced-tab-component.test.js
new file mode 100644
index 000000000..f81329533
--- /dev/null
+++ b/ui/app/pages/settings/advanced-tab/tests/advanced-tab-component.test.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import assert from 'assert'
+import sinon from 'sinon'
+import { shallow } from 'enzyme'
+import AdvancedTab from '../advanced-tab.component'
+import TextField from '../../../../components/ui/text-field'
+
+describe('AdvancedTab Component', () => {
+  it('should render correctly', () => {
+    const root = shallow(
+      <AdvancedTab />,
+      {
+        context: {
+          t: s => `_${s}`,
+        },
+      }
+    )
+
+    assert.equal(root.find('.settings-page__content-row').length, 8)
+  })
+
+  it('should update autoLogoutTimeLimit', () => {
+    const setAutoLogoutTimeLimitSpy = sinon.spy()
+    const root = shallow(
+      <AdvancedTab
+        setAutoLogoutTimeLimit={setAutoLogoutTimeLimitSpy}
+      />,
+      {
+        context: {
+          t: s => `_${s}`,
+        },
+      }
+    )
+
+    const autoTimeout = root.find('.settings-page__content-row').last()
+    const textField = autoTimeout.find(TextField)
+
+    textField.props().onChange({ target: { value: 1440 } })
+    assert.equal(root.state().autoLogoutTimeLimit, 1440)
+
+    autoTimeout.find('button').simulate('click')
+    assert.equal(setAutoLogoutTimeLimitSpy.args[0][0], 1440)
+  })
+})
diff --git a/ui/app/pages/settings/advanced-tab/tests/advanced-tab-container.test.js b/ui/app/pages/settings/advanced-tab/tests/advanced-tab-container.test.js
new file mode 100644
index 000000000..62122073d
--- /dev/null
+++ b/ui/app/pages/settings/advanced-tab/tests/advanced-tab-container.test.js
@@ -0,0 +1,46 @@
+import assert from 'assert'
+import { mapStateToProps, mapDispatchToProps } from '../advanced-tab.container'
+
+const defaultState = {
+  appState: {
+    warning: null,
+  },
+  metamask: {
+    featureFlags: {
+      sendHexData: false,
+      advancedInlineGas: false,
+    },
+    preferences: {
+      autoLogoutTimeLimit: 0,
+      showFiatInTestnets: false,
+      useNativeCurrencyAsPrimaryCurrency: true,
+    },
+  },
+}
+
+describe('AdvancedTab Container', () => {
+  it('should map state to props correctly', () => {
+    const props = mapStateToProps(defaultState)
+    const expected = {
+      warning: null,
+      sendHexData: false,
+      advancedInlineGas: false,
+      showFiatInTestnets: false,
+      autoLogoutTimeLimit: 0,
+    }
+
+    assert.deepEqual(props, expected)
+  })
+
+  it('should map dispatch to props correctly', () => {
+    const props = mapDispatchToProps(() => 'mockDispatch')
+
+      assert.ok(typeof props.setHexDataFeatureFlag === 'function')
+      assert.ok(typeof props.setRpcTarget === 'function')
+      assert.ok(typeof props.displayWarning === 'function')
+      assert.ok(typeof props.showResetAccountConfirmationModal === 'function')
+      assert.ok(typeof props.setAdvancedInlineGasFeatureFlag === 'function')
+      assert.ok(typeof props.setShowFiatConversionOnTestnetsPreference === 'function')
+      assert.ok(typeof props.setAutoLogoutTimeLimit === 'function')
+  })
+})
diff --git a/ui/app/pages/settings/index.scss b/ui/app/pages/settings/index.scss
index 52208dc85..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 {
@@ -22,6 +23,45 @@
     }
   }
 
+  &__subheader {
+    padding: 16px 4px;
+    font-size: 20px;
+    border-bottom: 1px solid $alto;
+    margin-right: 24px;
+
+    @media screen and (max-width: 575px) {
+      display: none;
+    }
+  }
+
+  &__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;
 
@@ -49,8 +89,9 @@
   &__content {
     display: flex;
     flex-flow: row nowrap;
-    height: auto;
+    height: 100%;
     overflow: auto;
+    border-top: 1px solid #D8D8D8;
 
     &__tabs {
       display: flex;
@@ -58,9 +99,15 @@
       flex: 1 1 auto;
 
       @media screen and (min-width: 576px) {
-        flex: 0 0 32%;
+        flex: 0 0 40%;
         max-width: 210px;
-        border-right: 1px solid $alto;
+        padding-top: 8px;
+      }
+
+      .tab-bar__tab {
+        @media screen and (min-width: 576px) {
+          padding: 16px 24px 0;
+        }
       }
     }
 
@@ -76,6 +123,10 @@
 
   &__body {
     padding: 12px 24px;
+    
+    @media screen and (min-width: 576px) {
+      padding: 12px;
+    }
   }
 
   &__content-row {
@@ -89,7 +140,6 @@
     min-width: 0;
     display: flex;
     flex-direction: column;
-    padding: 0 5px;
     min-height: 71px;
 
     @media screen and (max-width: 575px) {
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 061e65060..a2f137264 100644
--- a/ui/app/pages/settings/settings.component.js
+++ b/ui/app/pages/settings/settings.component.js
@@ -1,11 +1,12 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { Switch, Route, matchPath } from 'react-router-dom'
+import { Switch, Route, matchPath, withRouter } from 'react-router-dom'
 import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums'
 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 = {
@@ -25,7 +27,7 @@ const ROUTES_TO_I18N_KEYS = {
   [ABOUT_US_ROUTE]: 'about',
 }
 
-export default class SettingsPage extends PureComponent {
+class SettingsPage extends PureComponent {
   static propTypes = {
     location: PropTypes.object,
     history: PropTypes.object,
@@ -55,7 +57,7 @@ export default 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)}
@@ -75,6 +77,7 @@ export default class SettingsPage extends PureComponent {
             { this.renderTabs() }
           </div>
           <div className="settings-page__content__modules">
+            { this.renderSubHeader() }
             { this.renderContent() }
           </div>
         </div>
@@ -82,6 +85,17 @@ export default class SettingsPage extends PureComponent {
     )
   }
 
+  renderSubHeader () {
+    const { t } = this.context
+    const { location: { pathname } } = this.props
+
+    return (
+      <div className="settings-page__subheader">
+        {t(ROUTES_TO_I18N_KEYS[pathname] || 'general')}
+      </div>
+    )
+  }
+
   renderTabs () {
     const { history, location } = this.props
     const { t } = this.context
@@ -92,6 +106,7 @@ export default 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 => {
@@ -125,6 +140,11 @@ export default class SettingsPage extends PureComponent {
         />
         <Route
           exact
+          path={NETWORKS_ROUTE}
+          component={NetworksTab}
+        />
+        <Route
+          exact
           path={SECURITY_ROUTE}
           component={SecurityTab}
         />
@@ -135,3 +155,5 @@ export default class SettingsPage extends PureComponent {
     )
   }
 }
+
+export default withRouter(SettingsPage)