From 55309147762860d1af6812513400dc44c964d216 Mon Sep 17 00:00:00 2001
From: Erik Marks <rekmarks@protonmail.com>
Date: Tue, 27 Oct 2020 14:55:09 -0700
Subject: [PATCH 01/13] Standardize appearance of network settings

---
 ui/app/pages/settings/networks-tab/index.scss | 13 ++--
 .../network-form/network-form.component.js    | 24 +++++-
 .../networks-tab/networks-tab.component.js    | 73 +++++++++++--------
 ui/app/pages/settings/settings.component.js   |  2 +-
 ui/app/pages/settings/settings.container.js   | 10 +--
 5 files changed, 76 insertions(+), 46 deletions(-)

diff --git a/ui/app/pages/settings/networks-tab/index.scss b/ui/app/pages/settings/networks-tab/index.scss
index 455adb971..f0b66f62d 100644
--- a/ui/app/pages/settings/networks-tab/index.scss
+++ b/ui/app/pages/settings/networks-tab/index.scss
@@ -2,12 +2,15 @@
   &__content {
     margin-top: 24px;
     display: flex;
+    flex-direction: row;
     height: 100%;
     max-width: 739px;
     justify-content: space-between;
 
     @media screen and (max-width: 575px) {
       margin-top: 0;
+      flex-direction: column;
+      overflow-x: hidden;
     }
   }
 
@@ -78,20 +81,21 @@
 
   &__network-form-row {
     @media screen and (max-width: 575px) {
-      display: flex;
-      flex-direction: column;
       width: 93%;
     }
 
     &--warning {
       background-color: #fefae8;
       border: 1px solid #ffd33d;
-      width: 93%;
       border-radius: 5px;
       box-sizing: border-box;
       padding: 12px;
       margin: 12px 0;
       font-size: 12px;
+
+      @media screen and (max-width: 575px) {
+        width: 93%;
+      }
     }
   }
 
@@ -121,7 +125,6 @@
     @media screen and (max-width: 575px) {
       max-width: 100vw;
       width: 100vw;
-      overflow-y: scroll;
     }
   }
 
@@ -130,7 +133,7 @@
 
     @media screen and (max-width: 575px) {
       display: flex;
-      padding-top: 19px;
+      padding-top: 23px;
       padding-bottom: 23px;
       justify-content: center;
       align-items: center;
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
index f689c8ace..324c750b9 100644
--- 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
@@ -30,6 +30,7 @@ export default class NetworkForm extends PureComponent {
     blockExplorerUrl: PropTypes.string,
     rpcPrefs: PropTypes.object,
     rpcUrls: PropTypes.array,
+    isFullScreen: PropTypes.bool,
   }
 
   state = {
@@ -136,11 +137,12 @@ export default class NetworkForm extends PureComponent {
 
   onCancel = () => {
     const {
+      isFullScreen,
       networksTabIsInAddMode,
       onClear,
     } = this.props
 
-    if (networksTabIsInAddMode) {
+    if (networksTabIsInAddMode || !isFullScreen) {
       onClear()
     } else {
       this.resetForm()
@@ -327,6 +329,7 @@ export default class NetworkForm extends PureComponent {
       viewOnly,
       isCurrentRpcTarget,
       networksTabIsInAddMode,
+      isFullScreen,
     } = this.props
     const {
       networkName,
@@ -337,6 +340,8 @@ export default class NetworkForm extends PureComponent {
       errors,
     } = this.state
 
+    const deletable = !networksTabIsInAddMode && !isCurrentRpcTarget && !viewOnly
+
     const isSubmitDisabled = (
       viewOnly ||
       this.stateIsUnchanged() ||
@@ -344,7 +349,18 @@ export default class NetworkForm extends PureComponent {
       !chainId ||
       Object.values(errors).some((x) => x)
     )
-    const deletable = !networksTabIsInAddMode && !isCurrentRpcTarget && !viewOnly
+
+    // The secondary button is either the form cancel button, or a "back"
+    // button. It is never disabled in the popup, and sometimes disabled in
+    // the fullscreen UI.
+    const secondaryButtonDisabled = (
+      isFullScreen && (viewOnly || this.stateIsUnchanged())
+    )
+    const secondaryButtonMessageKey = (
+      !isFullScreen && viewOnly
+        ? 'back'
+        : 'cancel'
+    )
 
     return (
       <div className="networks-tab__network-form">
@@ -397,9 +413,9 @@ export default class NetworkForm extends PureComponent {
           <Button
             type="default"
             onClick={this.onCancel}
-            disabled={viewOnly || this.stateIsUnchanged()}
+            disabled={secondaryButtonDisabled}
           >
-            { t('cancel') }
+            {t(secondaryButtonMessageKey)}
           </Button>
           <Button
             type="secondary"
diff --git a/ui/app/pages/settings/networks-tab/networks-tab.component.js b/ui/app/pages/settings/networks-tab/networks-tab.component.js
index c9450e4c5..bc7086738 100644
--- a/ui/app/pages/settings/networks-tab/networks-tab.component.js
+++ b/ui/app/pages/settings/networks-tab/networks-tab.component.js
@@ -2,7 +2,10 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import { SETTINGS_ROUTE } from '../../../helpers/constants/routes'
-import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums'
+import {
+  ENVIRONMENT_TYPE_FULLSCREEN,
+  ENVIRONMENT_TYPE_POPUP,
+} from '../../../../../app/scripts/lib/enums'
 import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
 import Button from '../../../components/ui/button'
 import LockIcon from '../../../components/ui/lock-icon'
@@ -32,8 +35,13 @@ export default class NetworksTab extends PureComponent {
     networkDefaultedToProvider: PropTypes.bool,
   }
 
-  UNSAFE_componentWillMount () {
-    this.props.setSelectedSettingsRpcUrl(null)
+  state = {
+    isFullScreen: getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN,
+    isPopup: getEnvironmentType() === ENVIRONMENT_TYPE_POPUP,
+  }
+
+  componentWillUnmount () {
+    this.props.setSelectedSettingsRpcUrl('')
   }
 
   isCurrentPath (pathname) {
@@ -56,7 +64,7 @@ export default class NetworksTab extends PureComponent {
           onClick={(networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode
             ? () => {
               setNetworksTabAddMode(false)
-              setSelectedSettingsRpcUrl(null)
+              setSelectedSettingsRpcUrl('')
             }
             : () => this.props.history.push(SETTINGS_ROUTE)
           }
@@ -67,7 +75,7 @@ export default class NetworksTab extends PureComponent {
             type="secondary"
             onClick={(event) => {
               event.preventDefault()
-              setSelectedSettingsRpcUrl(null)
+              setSelectedSettingsRpcUrl('')
               setNetworksTabAddMode(true)
             }}
           >
@@ -167,7 +175,7 @@ export default class NetworksTab extends PureComponent {
     )
   }
 
-  renderNetworksTabContent () {
+  renderNetworksTabContent (isPopup) {
     const { t } = this.context
     const {
       setRpcTarget,
@@ -190,12 +198,12 @@ export default class NetworksTab extends PureComponent {
       providerUrl,
       networksToRender,
     } = this.props
+    const { isFullScreen } = this.state
 
-    const envIsPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
-    const shouldRenderNetworkForm = networksTabIsInAddMode || !envIsPopup || (envIsPopup && !networkDefaultedToProvider)
+    const shouldRenderNetworkForm = networksTabIsInAddMode || !isPopup || (isPopup && !networkDefaultedToProvider)
 
     return (
-      <div className="networks-tab__content">
+      <>
         { this.renderNetworksList() }
         {
           shouldRenderNetworkForm
@@ -210,7 +218,7 @@ export default class NetworksTab extends PureComponent {
                 ticker={ticker}
                 onClear={() => {
                   setNetworksTabAddMode(false)
-                  setSelectedSettingsRpcUrl(null)
+                  setSelectedSettingsRpcUrl('')
                 }}
                 showConfirmDeleteNetworkModal={showConfirmDeleteNetworkModal}
                 viewOnly={viewOnly}
@@ -218,39 +226,42 @@ export default class NetworksTab extends PureComponent {
                 networksTabIsInAddMode={networksTabIsInAddMode}
                 rpcPrefs={rpcPrefs}
                 blockExplorerUrl={blockExplorerUrl}
-                cancelText={t('cancel')}
+                isFullScreen={isFullScreen}
               />
             )
             : null
         }
-      </div>
+      </>
     )
   }
 
   render () {
     const { setNetworksTabAddMode, setSelectedSettingsRpcUrl, networkIsSelected, networksTabIsInAddMode } = this.props
+    const { isFullScreen, isPopup } = this.state
 
     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
-        }
+        {isFullScreen && this.renderSubHeader()}
+        <div className="networks-tab__content">
+          {this.renderNetworksTabContent(isPopup)}
+          {!networkIsSelected && !networksTabIsInAddMode
+            ? (
+              <div className="networks-tab__add-network-button-wrapper">
+                <Button
+                  type="primary"
+                  onClick={(event) => {
+                    event.preventDefault()
+                    setSelectedSettingsRpcUrl('')
+                    setNetworksTabAddMode(true)
+                  }}
+                >
+                  { this.context.t('addNetwork') }
+                </Button>
+              </div>
+            )
+            : null
+          }
+        </div>
       </div>
     )
   }
diff --git a/ui/app/pages/settings/settings.component.js b/ui/app/pages/settings/settings.component.js
index d4372eed0..1b0462aa6 100644
--- a/ui/app/pages/settings/settings.component.js
+++ b/ui/app/pages/settings/settings.component.js
@@ -57,7 +57,7 @@ class SettingsPage extends PureComponent {
       >
         <div className="settings-page__header">
           {
-            currentPath !== SETTINGS_ROUTE && currentPath !== NETWORKS_ROUTE && (
+            currentPath !== SETTINGS_ROUTE && (
               <div
                 className="settings-page__back-button"
                 onClick={() => history.push(backRoute)}
diff --git a/ui/app/pages/settings/settings.container.js b/ui/app/pages/settings/settings.container.js
index 8336c0314..51895e4bc 100644
--- a/ui/app/pages/settings/settings.container.js
+++ b/ui/app/pages/settings/settings.container.js
@@ -8,12 +8,9 @@ import { getEnvironmentType } from '../../../../app/scripts/lib/util'
 import { getMostRecentOverviewPage } from '../../ducks/history/history'
 
 import {
-  ADVANCED_ROUTE,
-  SECURITY_ROUTE,
-  GENERAL_ROUTE,
-  ALERTS_ROUTE,
   ABOUT_US_ROUTE,
-  SETTINGS_ROUTE,
+  ADVANCED_ROUTE,
+  ALERTS_ROUTE,
   CONTACT_LIST_ROUTE,
   CONTACT_ADD_ROUTE,
   CONTACT_EDIT_ROUTE,
@@ -21,6 +18,9 @@ import {
   CONTACT_MY_ACCOUNTS_ROUTE,
   CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
   CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
+  GENERAL_ROUTE,
+  SECURITY_ROUTE,
+  SETTINGS_ROUTE,
 } from '../../helpers/constants/routes'
 import Settings from './settings.component'
 

From 27118fdd980271e068065cf990c1665c3edd0a4b Mon Sep 17 00:00:00 2001
From: Erik Marks <rekmarks@protonmail.com>
Date: Tue, 27 Oct 2020 15:36:50 -0700
Subject: [PATCH 02/13] Fix popup network form appearance; code style

---
 ui/app/pages/settings/networks-tab/index.scss | 27 +++----------------
 .../networks-tab/networks-tab.component.js    | 15 -----------
 .../networks-tab/networks-tab.container.js    |  2 +-
 ui/app/pages/settings/settings.container.js   | 18 ++++++-------
 4 files changed, 14 insertions(+), 48 deletions(-)

diff --git a/ui/app/pages/settings/networks-tab/index.scss b/ui/app/pages/settings/networks-tab/index.scss
index f0b66f62d..e30471d41 100644
--- a/ui/app/pages/settings/networks-tab/index.scss
+++ b/ui/app/pages/settings/networks-tab/index.scss
@@ -25,29 +25,6 @@
     }
   }
 
-  &__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: 0.5;
-      background-size: contain;
-      background-repeat: no-repeat;
-      background-position: center;
-      margin-right: 16px;
-      cursor: pointer;
-      position: absolute;
-      margin-left: 10px;
-
-      [dir='rtl'] & {
-        transform: rotate(180deg);
-      }
-    }
-  }
-
   &__network-form {
     flex: 0.5 0 auto;
     max-width: 343px;
@@ -246,6 +223,10 @@
     flex-flow: row nowrap;
     margin: 0.75rem 0;
 
+    @media screen and (max-width: 575px) {
+      width: 93%;
+    }
+
     .btn-default {
       margin-right: 0.375rem;
     }
diff --git a/ui/app/pages/settings/networks-tab/networks-tab.component.js b/ui/app/pages/settings/networks-tab/networks-tab.component.js
index bc7086738..ba70517e7 100644
--- a/ui/app/pages/settings/networks-tab/networks-tab.component.js
+++ b/ui/app/pages/settings/networks-tab/networks-tab.component.js
@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import { SETTINGS_ROUTE } from '../../../helpers/constants/routes'
 import {
   ENVIRONMENT_TYPE_FULLSCREEN,
   ENVIRONMENT_TYPE_POPUP,
@@ -20,7 +19,6 @@ export default class NetworksTab extends PureComponent {
 
   static propTypes = {
     editRpc: PropTypes.func.isRequired,
-    history: PropTypes.object.isRequired,
     location: PropTypes.object.isRequired,
     networkIsSelected: PropTypes.bool,
     networksTabIsInAddMode: PropTypes.bool,
@@ -50,25 +48,12 @@ export default class NetworksTab extends PureComponent {
 
   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('')
-            }
-            : () => 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
diff --git a/ui/app/pages/settings/networks-tab/networks-tab.container.js b/ui/app/pages/settings/networks-tab/networks-tab.container.js
index 7e61c5cff..e57245056 100644
--- a/ui/app/pages/settings/networks-tab/networks-tab.container.js
+++ b/ui/app/pages/settings/networks-tab/networks-tab.container.js
@@ -32,7 +32,7 @@ const mapStateToProps = (state) => {
       rpcUrl: rpc.rpcUrl,
       chainId: rpc.chainId,
       ticker: rpc.ticker,
-      blockExplorerUrl: (rpc.rpcPrefs && rpc.rpcPrefs.blockExplorerUrl) || '',
+      blockExplorerUrl: (rpc.rpcPrefs?.blockExplorerUrl) || '',
     }
   })
 
diff --git a/ui/app/pages/settings/settings.container.js b/ui/app/pages/settings/settings.container.js
index 51895e4bc..1c18b1103 100644
--- a/ui/app/pages/settings/settings.container.js
+++ b/ui/app/pages/settings/settings.container.js
@@ -14,27 +14,29 @@ import {
   CONTACT_LIST_ROUTE,
   CONTACT_ADD_ROUTE,
   CONTACT_EDIT_ROUTE,
-  CONTACT_VIEW_ROUTE,
   CONTACT_MY_ACCOUNTS_ROUTE,
   CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
   CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
+  CONTACT_VIEW_ROUTE,
   GENERAL_ROUTE,
+  NETWORKS_ROUTE,
   SECURITY_ROUTE,
   SETTINGS_ROUTE,
 } from '../../helpers/constants/routes'
 import Settings from './settings.component'
 
 const ROUTES_TO_I18N_KEYS = {
-  [GENERAL_ROUTE]: 'general',
-  [ADVANCED_ROUTE]: 'advanced',
-  [SECURITY_ROUTE]: 'securityAndPrivacy',
   [ABOUT_US_ROUTE]: 'about',
+  [ADVANCED_ROUTE]: 'advanced',
   [ALERTS_ROUTE]: 'alerts',
-  [CONTACT_LIST_ROUTE]: 'contacts',
+  [GENERAL_ROUTE]: 'general',
   [CONTACT_ADD_ROUTE]: 'newContact',
   [CONTACT_EDIT_ROUTE]: 'editContact',
-  [CONTACT_VIEW_ROUTE]: 'viewContact',
+  [CONTACT_LIST_ROUTE]: 'contacts',
   [CONTACT_MY_ACCOUNTS_ROUTE]: 'myAccounts',
+  [CONTACT_VIEW_ROUTE]: 'viewContact',
+  [NETWORKS_ROUTE]: 'networks',
+  [SECURITY_ROUTE]: 'securityAndPrivacy',
 }
 
 const mapStateToProps = (state, ownProps) => {
@@ -51,7 +53,7 @@ const mapStateToProps = (state, ownProps) => {
   const isPopupView = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
   const pathnameI18nKey = ROUTES_TO_I18N_KEYS[pathname]
 
-  let backRoute
+  let backRoute = SETTINGS_ROUTE
   if (isMyAccountsPage && isAddressEntryPage) {
     backRoute = CONTACT_MY_ACCOUNTS_ROUTE
   } else if (isEditContactPage) {
@@ -60,8 +62,6 @@ const mapStateToProps = (state, ownProps) => {
     backRoute = `${CONTACT_MY_ACCOUNTS_VIEW_ROUTE}/${pathNameTail}`
   } else if (isAddressEntryPage || isMyAccountsPage || isAddContactPage) {
     backRoute = CONTACT_LIST_ROUTE
-  } else {
-    backRoute = SETTINGS_ROUTE
   }
 
   let initialBreadCrumbRoute

From 8a1820c537e55b88bf91b87cb4efcabc3156eec4 Mon Sep 17 00:00:00 2001
From: Erik Marks <rekmarks@protonmail.com>
Date: Wed, 28 Oct 2020 12:42:42 -0700
Subject: [PATCH 03/13] Add networks settings routes

---
 ui/app/helpers/constants/routes.js            |  3 ++
 .../network-form/network-form.component.js    |  2 +-
 .../networks-tab/networks-tab.component.js    | 49 +++++++++++--------
 .../networks-tab/networks-tab.container.js    | 15 +++++-
 ui/app/pages/settings/settings.component.js   |  6 +++
 ui/app/pages/settings/settings.container.js   |  5 ++
 6 files changed, 58 insertions(+), 22 deletions(-)

diff --git a/ui/app/helpers/constants/routes.js b/ui/app/helpers/constants/routes.js
index 42ea9d060..d05a6c24c 100644
--- a/ui/app/helpers/constants/routes.js
+++ b/ui/app/helpers/constants/routes.js
@@ -9,6 +9,7 @@ const SECURITY_ROUTE = '/settings/security'
 const ABOUT_US_ROUTE = '/settings/about-us'
 const ALERTS_ROUTE = '/settings/alerts'
 const NETWORKS_ROUTE = '/settings/networks'
+const NETWORKS_FORM_ROUTE = '/settings/networks/form'
 const CONTACT_LIST_ROUTE = '/settings/contact-list'
 const CONTACT_EDIT_ROUTE = '/settings/contact-list/edit-contact'
 const CONTACT_ADD_ROUTE = '/settings/contact-list/add-contact'
@@ -75,6 +76,7 @@ const PATH_NAME_MAP = {
   [ABOUT_US_ROUTE]: 'About Us Page',
   [ALERTS_ROUTE]: 'Alerts Settings Page',
   [NETWORKS_ROUTE]: 'Network Settings Page',
+  [NETWORKS_FORM_ROUTE]: 'Network Settings Page Form',
   [CONTACT_LIST_ROUTE]: 'Contact List Settings Page',
   [`${CONTACT_EDIT_ROUTE}/:address`]: 'Edit Contact Settings Page',
   [CONTACT_ADD_ROUTE]: 'Add Contact Settings Page',
@@ -172,6 +174,7 @@ export {
   CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
   CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
   NETWORKS_ROUTE,
+  NETWORKS_FORM_ROUTE,
   INITIALIZE_BACKUP_SEED_PHRASE_ROUTE,
   CONNECT_ROUTE,
   CONNECT_CONFIRM_PERMISSIONS_ROUTE,
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
index 324c750b9..78eda5194 100644
--- 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
@@ -68,7 +68,7 @@ export default class NetworkForm extends PureComponent {
   }
 
   componentWillUnmount () {
-    this.props.onClear()
+    this.props.onClear(false)
     this.setState({
       rpcUrl: '',
       chainId: '',
diff --git a/ui/app/pages/settings/networks-tab/networks-tab.component.js b/ui/app/pages/settings/networks-tab/networks-tab.component.js
index ba70517e7..4d4b9099b 100644
--- a/ui/app/pages/settings/networks-tab/networks-tab.component.js
+++ b/ui/app/pages/settings/networks-tab/networks-tab.component.js
@@ -1,13 +1,12 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import {
-  ENVIRONMENT_TYPE_FULLSCREEN,
-  ENVIRONMENT_TYPE_POPUP,
-} from '../../../../../app/scripts/lib/enums'
-import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
 import Button from '../../../components/ui/button'
 import LockIcon from '../../../components/ui/lock-icon'
+import {
+  NETWORKS_ROUTE,
+  NETWORKS_FORM_ROUTE,
+} from '../../../helpers/constants/routes'
 import NetworkDropdownIcon from '../../../components/app/dropdowns/components/network-dropdown-icon'
 import NetworkForm from './network-form'
 
@@ -31,11 +30,9 @@ export default class NetworksTab extends PureComponent {
     providerUrl: PropTypes.string,
     providerType: PropTypes.string,
     networkDefaultedToProvider: PropTypes.bool,
-  }
-
-  state = {
-    isFullScreen: getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN,
-    isPopup: getEnvironmentType() === ENVIRONMENT_TYPE_POPUP,
+    history: PropTypes.object.isRequired,
+    shouldRenderNetworkForm: PropTypes.bool.isRequired,
+    isFullScreen: PropTypes.bool.isRequired,
   }
 
   componentWillUnmount () {
@@ -79,6 +76,8 @@ export default class NetworksTab extends PureComponent {
       providerUrl,
       providerType,
       networksTabIsInAddMode,
+      history,
+      isFullScreen,
     } = this.props
     const {
       border,
@@ -99,9 +98,10 @@ export default class NetworksTab extends PureComponent {
       <div
         key={`settings-network-list-item:${rpcUrl}`}
         className="networks-tab__networks-list-item"
-        onClick={ () => {
+        onClick={() => {
           setNetworksTabAddMode(false)
           setSelectedSettingsRpcUrl(rpcUrl)
+          !isFullScreen && history.push(NETWORKS_FORM_ROUTE)
         }}
       >
         <NetworkDropdownIcon
@@ -160,7 +160,7 @@ export default class NetworksTab extends PureComponent {
     )
   }
 
-  renderNetworksTabContent (isPopup) {
+  renderNetworksTabContent () {
     const { t } = this.context
     const {
       setRpcTarget,
@@ -179,13 +179,12 @@ export default class NetworksTab extends PureComponent {
       },
       networksTabIsInAddMode,
       editRpc,
-      networkDefaultedToProvider,
       providerUrl,
       networksToRender,
+      history,
+      isFullScreen,
+      shouldRenderNetworkForm,
     } = this.props
-    const { isFullScreen } = this.state
-
-    const shouldRenderNetworkForm = networksTabIsInAddMode || !isPopup || (isPopup && !networkDefaultedToProvider)
 
     return (
       <>
@@ -201,9 +200,12 @@ export default class NetworksTab extends PureComponent {
                 rpcUrl={rpcUrl}
                 chainId={chainId}
                 ticker={ticker}
-                onClear={() => {
+                onClear={(shouldUpdateHistory = true) => {
                   setNetworksTabAddMode(false)
                   setSelectedSettingsRpcUrl('')
+                  if (shouldUpdateHistory && !isFullScreen) {
+                    history.push(NETWORKS_ROUTE)
+                  }
                 }}
                 showConfirmDeleteNetworkModal={showConfirmDeleteNetworkModal}
                 viewOnly={viewOnly}
@@ -221,14 +223,20 @@ export default class NetworksTab extends PureComponent {
   }
 
   render () {
-    const { setNetworksTabAddMode, setSelectedSettingsRpcUrl, networkIsSelected, networksTabIsInAddMode } = this.props
-    const { isFullScreen, isPopup } = this.state
+    const {
+      setNetworksTabAddMode,
+      setSelectedSettingsRpcUrl,
+      networkIsSelected,
+      networksTabIsInAddMode,
+      history,
+      isFullScreen,
+    } = this.props
 
     return (
       <div className="networks-tab__body">
         {isFullScreen && this.renderSubHeader()}
         <div className="networks-tab__content">
-          {this.renderNetworksTabContent(isPopup)}
+          {this.renderNetworksTabContent()}
           {!networkIsSelected && !networksTabIsInAddMode
             ? (
               <div className="networks-tab__add-network-button-wrapper">
@@ -238,6 +246,7 @@ export default class NetworksTab extends PureComponent {
                     event.preventDefault()
                     setSelectedSettingsRpcUrl('')
                     setNetworksTabAddMode(true)
+                    history.push(NETWORKS_FORM_ROUTE)
                   }}
                 >
                   { this.context.t('addNetwork') }
diff --git a/ui/app/pages/settings/networks-tab/networks-tab.container.js b/ui/app/pages/settings/networks-tab/networks-tab.container.js
index e57245056..83926d0b8 100644
--- a/ui/app/pages/settings/networks-tab/networks-tab.container.js
+++ b/ui/app/pages/settings/networks-tab/networks-tab.container.js
@@ -9,12 +9,23 @@ import {
   editRpc,
   showModal,
 } from '../../../store/actions'
+import { NETWORKS_FORM_ROUTE } from '../../../helpers/constants/routes'
+import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../../app/scripts/lib/enums'
+import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
 import NetworksTab from './networks-tab.component'
 import { defaultNetworksData } from './networks-tab.constants'
 
 const defaultNetworks = defaultNetworksData.map((network) => ({ ...network, viewOnly: true }))
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state, ownProps) => {
+  const { location: { pathname } } = ownProps
+
+  const environmentType = getEnvironmentType()
+  const isFullScreen = environmentType === ENVIRONMENT_TYPE_FULLSCREEN
+  const shouldRenderNetworkForm = (
+    isFullScreen || Boolean(pathname.match(NETWORKS_FORM_ROUTE))
+  )
+
   const {
     frequentRpcListDetail,
     provider,
@@ -56,6 +67,8 @@ const mapStateToProps = (state) => {
     providerType: provider.type,
     providerUrl: provider.rpcUrl,
     networkDefaultedToProvider,
+    isFullScreen,
+    shouldRenderNetworkForm,
   }
 }
 
diff --git a/ui/app/pages/settings/settings.component.js b/ui/app/pages/settings/settings.component.js
index 1b0462aa6..f668568d5 100644
--- a/ui/app/pages/settings/settings.component.js
+++ b/ui/app/pages/settings/settings.component.js
@@ -11,6 +11,7 @@ import {
   ABOUT_US_ROUTE,
   SETTINGS_ROUTE,
   NETWORKS_ROUTE,
+  NETWORKS_FORM_ROUTE,
   CONTACT_LIST_ROUTE,
   CONTACT_ADD_ROUTE,
   CONTACT_EDIT_ROUTE,
@@ -204,6 +205,11 @@ class SettingsPage extends PureComponent {
           path={NETWORKS_ROUTE}
           component={NetworksTab}
         />
+        <Route
+          exact
+          path={NETWORKS_FORM_ROUTE}
+          component={NetworksTab}
+        />
         <Route
           exact
           path={SECURITY_ROUTE}
diff --git a/ui/app/pages/settings/settings.container.js b/ui/app/pages/settings/settings.container.js
index 1c18b1103..d7e8d8fc6 100644
--- a/ui/app/pages/settings/settings.container.js
+++ b/ui/app/pages/settings/settings.container.js
@@ -19,6 +19,7 @@ import {
   CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
   CONTACT_VIEW_ROUTE,
   GENERAL_ROUTE,
+  NETWORKS_FORM_ROUTE,
   NETWORKS_ROUTE,
   SECURITY_ROUTE,
   SETTINGS_ROUTE,
@@ -36,6 +37,7 @@ const ROUTES_TO_I18N_KEYS = {
   [CONTACT_MY_ACCOUNTS_ROUTE]: 'myAccounts',
   [CONTACT_VIEW_ROUTE]: 'viewContact',
   [NETWORKS_ROUTE]: 'networks',
+  [NETWORKS_FORM_ROUTE]: 'networks',
   [SECURITY_ROUTE]: 'securityAndPrivacy',
 }
 
@@ -49,6 +51,7 @@ const mapStateToProps = (state, ownProps) => {
   const isAddContactPage = Boolean(pathname.match(CONTACT_ADD_ROUTE))
   const isEditContactPage = Boolean(pathname.match(CONTACT_EDIT_ROUTE))
   const isEditMyAccountsContactPage = Boolean(pathname.match(CONTACT_MY_ACCOUNTS_EDIT_ROUTE))
+  const isNetworksFormPage = Boolean(pathname.match(NETWORKS_FORM_ROUTE))
 
   const isPopupView = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
   const pathnameI18nKey = ROUTES_TO_I18N_KEYS[pathname]
@@ -62,6 +65,8 @@ const mapStateToProps = (state, ownProps) => {
     backRoute = `${CONTACT_MY_ACCOUNTS_VIEW_ROUTE}/${pathNameTail}`
   } else if (isAddressEntryPage || isMyAccountsPage || isAddContactPage) {
     backRoute = CONTACT_LIST_ROUTE
+  } else if (isNetworksFormPage) {
+    backRoute = NETWORKS_ROUTE
   }
 
   let initialBreadCrumbRoute

From 1373a90e27cdb3744d5ce5df8e764aae35a39089 Mon Sep 17 00:00:00 2001
From: Erik Marks <rekmarks@protonmail.com>
Date: Wed, 28 Oct 2020 13:36:52 -0700
Subject: [PATCH 04/13] Hide network form buttons when form is viewOnly

---
 .../network-form/network-form.component.js    | 60 ++++++++-----------
 1 file changed, 25 insertions(+), 35 deletions(-)

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
index 78eda5194..e32801fda 100644
--- 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
@@ -329,7 +329,6 @@ export default class NetworkForm extends PureComponent {
       viewOnly,
       isCurrentRpcTarget,
       networksTabIsInAddMode,
-      isFullScreen,
     } = this.props
     const {
       networkName,
@@ -343,25 +342,12 @@ export default class NetworkForm extends PureComponent {
     const deletable = !networksTabIsInAddMode && !isCurrentRpcTarget && !viewOnly
 
     const isSubmitDisabled = (
-      viewOnly ||
       this.stateIsUnchanged() ||
       !rpcUrl ||
       !chainId ||
       Object.values(errors).some((x) => x)
     )
 
-    // The secondary button is either the form cancel button, or a "back"
-    // button. It is never disabled in the popup, and sometimes disabled in
-    // the fullscreen UI.
-    const secondaryButtonDisabled = (
-      isFullScreen && (viewOnly || this.stateIsUnchanged())
-    )
-    const secondaryButtonMessageKey = (
-      !isFullScreen && viewOnly
-        ? 'back'
-        : 'cancel'
-    )
-
     return (
       <div className="networks-tab__network-form">
         {viewOnly ? null : this.renderWarning()}
@@ -400,30 +386,34 @@ export default class NetworkForm extends PureComponent {
           'optionalBlockExplorerUrl',
         )}
         <div className="network-form__footer">
-          {
-            deletable && (
+          {!viewOnly && (
+            <>
+              {
+                deletable && (
+                  <Button
+                    type="danger"
+                    onClick={this.onDelete}
+                  >
+                    { t('delete') }
+                  </Button>
+                )
+              }
               <Button
-                type="danger"
-                onClick={this.onDelete}
+                type="default"
+                onClick={this.onCancel}
+                disabled={this.stateIsUnchanged()}
               >
-                { t('delete') }
+                {t('cancel')}
               </Button>
-            )
-          }
-          <Button
-            type="default"
-            onClick={this.onCancel}
-            disabled={secondaryButtonDisabled}
-          >
-            {t(secondaryButtonMessageKey)}
-          </Button>
-          <Button
-            type="secondary"
-            disabled={isSubmitDisabled}
-            onClick={this.onSubmit}
-          >
-            { t('save') }
-          </Button>
+              <Button
+                type="secondary"
+                disabled={isSubmitDisabled}
+                onClick={this.onSubmit}
+              >
+                { t('save') }
+              </Button>
+            </>
+          )}
         </div>
       </div>
     )

From 4ad5e027bea494ada09736504101cdba793f5ef4 Mon Sep 17 00:00:00 2001
From: Erik Marks <rekmarks@protonmail.com>
Date: Wed, 28 Oct 2020 13:54:39 -0700
Subject: [PATCH 05/13] Fix network list arrow styling

---
 ui/app/pages/settings/networks-tab/index.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ui/app/pages/settings/networks-tab/index.scss b/ui/app/pages/settings/networks-tab/index.scss
index e30471d41..314cc649d 100644
--- a/ui/app/pages/settings/networks-tab/index.scss
+++ b/ui/app/pages/settings/networks-tab/index.scss
@@ -156,6 +156,7 @@
     @media screen and (max-width: 575px) {
       padding: 20px 23px 21px 17px;
       border-bottom: 1px solid #d8d8d8;
+      max-width: 351px;
     }
   }
 
@@ -199,6 +200,7 @@
       position: absolute;
       width: 24px;
       height: 24px;
+      margin: 0 5px;
 
       [dir='rtl'] & {
         transform: rotate(180deg);

From 4a219d9a106a629ffe7b5ceaf829649ec9124c91 Mon Sep 17 00:00:00 2001
From: Erik Marks <rekmarks@protonmail.com>
Date: Wed, 28 Oct 2020 14:54:24 -0700
Subject: [PATCH 06/13] Fix network name overflow

---
 ui/app/pages/settings/networks-tab/index.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/ui/app/pages/settings/networks-tab/index.scss b/ui/app/pages/settings/networks-tab/index.scss
index 314cc649d..7bbc13b85 100644
--- a/ui/app/pages/settings/networks-tab/index.scss
+++ b/ui/app/pages/settings/networks-tab/index.scss
@@ -173,6 +173,10 @@
     font-size: 16px;
     line-height: 23px;
     color: #6a737d;
+    width: 70%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 
     &:hover {
       cursor: pointer;

From 64883aecb0bacf3e1dc97d7446756b451899b54e Mon Sep 17 00:00:00 2001
From: Erik Marks <rekmarks@protonmail.com>
Date: Wed, 28 Oct 2020 14:54:43 -0700
Subject: [PATCH 07/13] Improve fullscreen network form appearance

---
 ui/app/pages/settings/networks-tab/index.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/app/pages/settings/networks-tab/index.scss b/ui/app/pages/settings/networks-tab/index.scss
index 7bbc13b85..2ee109ecf 100644
--- a/ui/app/pages/settings/networks-tab/index.scss
+++ b/ui/app/pages/settings/networks-tab/index.scss
@@ -26,7 +26,6 @@
   }
 
   &__network-form {
-    flex: 0.5 0 auto;
     max-width: 343px;
     max-height: 465px;
     display: flex;

From c3df1aab8d58e6d893360a6ee2fe258892344ba6 Mon Sep 17 00:00:00 2001
From: Erik Marks <rekmarks@protonmail.com>
Date: Wed, 28 Oct 2020 15:29:31 -0700
Subject: [PATCH 08/13] Style touchups

---
 ui/app/pages/settings/networks-tab/index.scss        | 12 +++++++++---
 .../settings/networks-tab/networks-tab.component.js  |  5 ++---
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/ui/app/pages/settings/networks-tab/index.scss b/ui/app/pages/settings/networks-tab/index.scss
index 2ee109ecf..10857af57 100644
--- a/ui/app/pages/settings/networks-tab/index.scss
+++ b/ui/app/pages/settings/networks-tab/index.scss
@@ -2,7 +2,6 @@
   &__content {
     margin-top: 24px;
     display: flex;
-    flex-direction: row;
     height: 100%;
     max-width: 739px;
     justify-content: space-between;
@@ -11,6 +10,7 @@
       margin-top: 0;
       flex-direction: column;
       overflow-x: hidden;
+      align-items: center;
     }
   }
 
@@ -26,11 +26,12 @@
   }
 
   &__network-form {
-    max-width: 343px;
-    max-height: 465px;
     display: flex;
+    flex: 1 0 auto;
     flex-direction: column;
     justify-content: space-between;
+    max-width: 343px;
+    max-height: 465px;
 
     .page-container__footer {
       border-top: none;
@@ -108,6 +109,7 @@
     display: none;
 
     @media screen and (max-width: 575px) {
+      width: 100%;
       display: flex;
       padding-top: 23px;
       padding-bottom: 23px;
@@ -150,6 +152,10 @@
       &:hover {
         cursor: pointer;
       }
+
+      @media screen and (max-width: 575px) {
+        margin: 0 4px 0 10px;
+      }
     }
 
     @media screen and (max-width: 575px) {
diff --git a/ui/app/pages/settings/networks-tab/networks-tab.component.js b/ui/app/pages/settings/networks-tab/networks-tab.component.js
index 4d4b9099b..269d633cd 100644
--- a/ui/app/pages/settings/networks-tab/networks-tab.component.js
+++ b/ui/app/pages/settings/networks-tab/networks-tab.component.js
@@ -226,10 +226,9 @@ export default class NetworksTab extends PureComponent {
     const {
       setNetworksTabAddMode,
       setSelectedSettingsRpcUrl,
-      networkIsSelected,
-      networksTabIsInAddMode,
       history,
       isFullScreen,
+      shouldRenderNetworkForm,
     } = this.props
 
     return (
@@ -237,7 +236,7 @@ export default class NetworksTab extends PureComponent {
         {isFullScreen && this.renderSubHeader()}
         <div className="networks-tab__content">
           {this.renderNetworksTabContent()}
-          {!networkIsSelected && !networksTabIsInAddMode
+          {!isFullScreen && !shouldRenderNetworkForm
             ? (
               <div className="networks-tab__add-network-button-wrapper">
                 <Button

From 8d3091040caa44288eeebbf1723f383dabeeda45 Mon Sep 17 00:00:00 2001
From: Erik Marks <rekmarks@protonmail.com>
Date: Wed, 28 Oct 2020 15:38:03 -0700
Subject: [PATCH 09/13] Fix network dropdown custom rpc link

---
 ui/app/components/app/dropdowns/network-dropdown.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/app/components/app/dropdowns/network-dropdown.js b/ui/app/components/app/dropdowns/network-dropdown.js
index 0bd9aed86..c3f510822 100644
--- a/ui/app/components/app/dropdowns/network-dropdown.js
+++ b/ui/app/components/app/dropdowns/network-dropdown.js
@@ -7,7 +7,7 @@ import * as actions from '../../../store/actions'
 import {
   openAlert as displayInvalidCustomNetworkAlert,
 } from '../../../ducks/alerts/invalid-custom-network'
-import { NETWORKS_ROUTE } from '../../../helpers/constants/routes'
+import { NETWORKS_FORM_ROUTE } from '../../../helpers/constants/routes'
 import { isPrefixedFormattedHexString } from '../../../../../app/scripts/lib/util'
 import { Dropdown, DropdownMenuItem } from './components/dropdown'
 import NetworkDropdownIcon from './components/network-dropdown-icon'
@@ -338,7 +338,7 @@ class NetworkDropdown extends Component {
           closeMenu={() => this.props.hideNetworkDropdown()}
           onClick={() => {
             setNetworksTabAddMode(true)
-            this.props.history.push(NETWORKS_ROUTE)
+            this.props.history.push(NETWORKS_FORM_ROUTE)
           }}
           style={dropdownMenuItemStyle}
         >

From 47d94489b780e3f0472f6422a94c803efeea152c Mon Sep 17 00:00:00 2001
From: Erik Marks <rekmarks@protonmail.com>
Date: Wed, 28 Oct 2020 16:10:41 -0700
Subject: [PATCH 10/13] Finish network settings redesign

---
 .../app/dropdowns/network-dropdown.js         | 26 ++++++++++++++++---
 ui/app/pages/settings/networks-tab/index.scss | 25 ++++++++----------
 .../networks-tab/networks-tab.component.js    |  2 +-
 ui/app/pages/settings/settings.component.js   | 25 +++++++++---------
 ui/app/pages/settings/settings.container.js   | 11 +++++---
 5 files changed, 55 insertions(+), 34 deletions(-)

diff --git a/ui/app/components/app/dropdowns/network-dropdown.js b/ui/app/components/app/dropdowns/network-dropdown.js
index c3f510822..8907fe12a 100644
--- a/ui/app/components/app/dropdowns/network-dropdown.js
+++ b/ui/app/components/app/dropdowns/network-dropdown.js
@@ -7,8 +7,13 @@ import * as actions from '../../../store/actions'
 import {
   openAlert as displayInvalidCustomNetworkAlert,
 } from '../../../ducks/alerts/invalid-custom-network'
-import { NETWORKS_FORM_ROUTE } from '../../../helpers/constants/routes'
-import { isPrefixedFormattedHexString } from '../../../../../app/scripts/lib/util'
+import {
+  NETWORKS_ROUTE,
+  NETWORKS_FORM_ROUTE,
+} from '../../../helpers/constants/routes'
+import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../../app/scripts/lib/enums'
+import { getEnvironmentType, isPrefixedFormattedHexString } from '../../../../../app/scripts/lib/util'
+
 import { Dropdown, DropdownMenuItem } from './components/dropdown'
 import NetworkDropdownIcon from './components/network-dropdown-icon'
 
@@ -44,6 +49,9 @@ function mapDispatchToProps (dispatch) {
     setNetworksTabAddMode: (isInAddMode) => {
       dispatch(actions.setNetworksTabAddMode(isInAddMode))
     },
+    setSelectedSettingsRpcUrl: (url) => {
+      dispatch(actions.setSelectedSettingsRpcUrl(url))
+    },
     displayInvalidCustomNetworkAlert: (networkName) => {
       dispatch(displayInvalidCustomNetworkAlert(networkName))
     },
@@ -67,6 +75,7 @@ class NetworkDropdown extends Component {
     setRpcTarget: PropTypes.func.isRequired,
     hideNetworkDropdown: PropTypes.func.isRequired,
     setNetworksTabAddMode: PropTypes.func.isRequired,
+    setSelectedSettingsRpcUrl: PropTypes.func.isRequired,
     frequentRpcListDetail: PropTypes.array.isRequired,
     networkDropdownOpen: PropTypes.bool.isRequired,
     history: PropTypes.object.isRequired,
@@ -176,7 +185,11 @@ class NetworkDropdown extends Component {
   }
 
   render () {
-    const { provider: { type: providerType, rpcUrl: activeNetwork }, setNetworksTabAddMode } = this.props
+    const {
+      provider: { type: providerType, rpcUrl: activeNetwork },
+      setNetworksTabAddMode,
+      setSelectedSettingsRpcUrl,
+    } = this.props
     const rpcListDetail = this.props.frequentRpcListDetail
     const isOpen = this.props.networkDropdownOpen
     const dropdownMenuItemStyle = {
@@ -337,8 +350,13 @@ class NetworkDropdown extends Component {
         <DropdownMenuItem
           closeMenu={() => this.props.hideNetworkDropdown()}
           onClick={() => {
+            this.props.history.push(
+              getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN
+                ? NETWORKS_ROUTE
+                : NETWORKS_FORM_ROUTE,
+            )
+            setSelectedSettingsRpcUrl('')
             setNetworksTabAddMode(true)
-            this.props.history.push(NETWORKS_FORM_ROUTE)
           }}
           style={dropdownMenuItemStyle}
         >
diff --git a/ui/app/pages/settings/networks-tab/index.scss b/ui/app/pages/settings/networks-tab/index.scss
index 10857af57..85dccbe8c 100644
--- a/ui/app/pages/settings/networks-tab/index.scss
+++ b/ui/app/pages/settings/networks-tab/index.scss
@@ -100,26 +100,23 @@
     max-width: 343px;
 
     @media screen and (max-width: 575px) {
+      flex: 1;
+      overflow-y: auto;
       max-width: 100vw;
       width: 100vw;
     }
   }
 
-  &__add-network-button-wrapper {
-    display: none;
+  &__networks-list-popup-footer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding-top: 23px;
+    padding-bottom: 23px;
+    border-top: 1px solid #d8d8d8;
 
-    @media screen and (max-width: 575px) {
-      width: 100%;
-      display: flex;
-      padding-top: 23px;
-      padding-bottom: 23px;
-      justify-content: center;
-      align-items: center;
-      border-top: 1px solid #d8d8d8;
-
-      .button {
-        width: 178px;
-      }
+    .button {
+      width: 178px;
     }
   }
 
diff --git a/ui/app/pages/settings/networks-tab/networks-tab.component.js b/ui/app/pages/settings/networks-tab/networks-tab.component.js
index 269d633cd..36266fdc1 100644
--- a/ui/app/pages/settings/networks-tab/networks-tab.component.js
+++ b/ui/app/pages/settings/networks-tab/networks-tab.component.js
@@ -238,7 +238,7 @@ export default class NetworksTab extends PureComponent {
           {this.renderNetworksTabContent()}
           {!isFullScreen && !shouldRenderNetworkForm
             ? (
-              <div className="networks-tab__add-network-button-wrapper">
+              <div className="networks-tab__networks-list-popup-footer">
                 <Button
                   type="primary"
                   onClick={(event) => {
diff --git a/ui/app/pages/settings/settings.component.js b/ui/app/pages/settings/settings.component.js
index f668568d5..c7fb2ab88 100644
--- a/ui/app/pages/settings/settings.component.js
+++ b/ui/app/pages/settings/settings.component.js
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { Switch, Route, matchPath } from 'react-router-dom'
+import { Switch, Route, Redirect, matchPath } from 'react-router-dom'
 import classnames from 'classnames'
 import TabBar from '../../components/app/tab-bar'
 import {
@@ -35,7 +35,8 @@ class SettingsPage extends PureComponent {
     currentPath: PropTypes.string,
     history: PropTypes.object,
     isAddressEntryPage: PropTypes.bool,
-    isPopupView: PropTypes.bool,
+    isPopup: PropTypes.bool,
+    isFullScreen: PropTypes.bool,
     pathnameI18nKey: PropTypes.string,
     initialBreadCrumbRoute: PropTypes.string,
     breadCrumbTextKey: PropTypes.string,
@@ -86,13 +87,13 @@ class SettingsPage extends PureComponent {
 
   renderTitle () {
     const { t } = this.context
-    const { isPopupView, pathnameI18nKey, addressName } = this.props
+    const { isPopup, pathnameI18nKey, addressName } = this.props
 
     let titleText
 
-    if (isPopupView && addressName) {
+    if (isPopup && addressName) {
       titleText = addressName
-    } else if (pathnameI18nKey && isPopupView) {
+    } else if (pathnameI18nKey && isPopup) {
       titleText = t(pathnameI18nKey)
     } else {
       titleText = t('settings')
@@ -109,7 +110,7 @@ class SettingsPage extends PureComponent {
     const { t } = this.context
     const {
       currentPath,
-      isPopupView,
+      isPopup,
       isAddressEntryPage,
       pathnameI18nKey,
       addressName,
@@ -121,7 +122,7 @@ class SettingsPage extends PureComponent {
 
     let subheaderText
 
-    if (isPopupView && isAddressEntryPage) {
+    if (isPopup && isAddressEntryPage) {
       subheaderText = t('settings')
     } else if (initialBreadCrumbKey) {
       subheaderText = t(initialBreadCrumbKey)
@@ -178,6 +179,8 @@ class SettingsPage extends PureComponent {
   }
 
   renderContent () {
+    const { isFullScreen } = this.props
+
     return (
       <Switch>
         <Route
@@ -205,11 +208,9 @@ class SettingsPage extends PureComponent {
           path={NETWORKS_ROUTE}
           component={NetworksTab}
         />
-        <Route
-          exact
-          path={NETWORKS_FORM_ROUTE}
-          component={NetworksTab}
-        />
+        <Route exact path={NETWORKS_FORM_ROUTE}>
+          {isFullScreen ? <Redirect to={NETWORKS_ROUTE} /> : NetworksTab}
+        </Route>
         <Route
           exact
           path={SECURITY_ROUTE}
diff --git a/ui/app/pages/settings/settings.container.js b/ui/app/pages/settings/settings.container.js
index d7e8d8fc6..e5ca4f14f 100644
--- a/ui/app/pages/settings/settings.container.js
+++ b/ui/app/pages/settings/settings.container.js
@@ -3,7 +3,10 @@ import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import { getAddressBookEntryName } from '../../selectors'
 import { isValidAddress } from '../../helpers/utils/util'
-import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums'
+import {
+  ENVIRONMENT_TYPE_POPUP,
+  ENVIRONMENT_TYPE_FULLSCREEN,
+} from '../../../../app/scripts/lib/enums'
 import { getEnvironmentType } from '../../../../app/scripts/lib/util'
 import { getMostRecentOverviewPage } from '../../ducks/history/history'
 
@@ -53,7 +56,8 @@ const mapStateToProps = (state, ownProps) => {
   const isEditMyAccountsContactPage = Boolean(pathname.match(CONTACT_MY_ACCOUNTS_EDIT_ROUTE))
   const isNetworksFormPage = Boolean(pathname.match(NETWORKS_FORM_ROUTE))
 
-  const isPopupView = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
+  const isPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
+  const isFullScreen = getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN
   const pathnameI18nKey = ROUTES_TO_I18N_KEYS[pathname]
 
   let backRoute = SETTINGS_ROUTE
@@ -85,7 +89,8 @@ const mapStateToProps = (state, ownProps) => {
     isMyAccountsPage,
     backRoute,
     currentPath: pathname,
-    isPopupView,
+    isPopup,
+    isFullScreen,
     pathnameI18nKey,
     addressName,
     initialBreadCrumbRoute,

From 58d19745c9cbef7b15a73fe2801366743a2a5f14 Mon Sep 17 00:00:00 2001
From: Erik Marks <rekmarks@protonmail.com>
Date: Wed, 28 Oct 2020 16:47:52 -0700
Subject: [PATCH 11/13] Add explanatory comment

---
 .../networks-tab/network-form/network-form.component.js        | 3 +++
 1 file changed, 3 insertions(+)

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
index e32801fda..249dc8b89 100644
--- 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
@@ -68,6 +68,9 @@ export default class NetworkForm extends PureComponent {
   }
 
   componentWillUnmount () {
+    // onClear will push the network settings route unless was pass false.
+    // Since we call onClear to cause this component to be unmounted, the
+    // route will already have been updated, and we avoid setting it twice.
     this.props.onClear(false)
     this.setState({
       rpcUrl: '',

From 2393749809449394fcf0f741793b905cbb3ea336 Mon Sep 17 00:00:00 2001
From: Erik Marks <rekmarks@protonmail.com>
Date: Wed, 28 Oct 2020 22:45:08 -0700
Subject: [PATCH 12/13] Simplify routing to fix breakage in popup

---
 .../network-form/network-form.component.js           |  9 +++++----
 .../settings/networks-tab/networks-tab.component.js  |  4 +++-
 ui/app/pages/settings/settings.component.js          | 12 ++----------
 ui/app/pages/settings/settings.container.js          |  7 +------
 4 files changed, 11 insertions(+), 21 deletions(-)

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
index 249dc8b89..41131138c 100644
--- 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
@@ -68,10 +68,6 @@ export default class NetworkForm extends PureComponent {
   }
 
   componentWillUnmount () {
-    // onClear will push the network settings route unless was pass false.
-    // Since we call onClear to cause this component to be unmounted, the
-    // route will already have been updated, and we avoid setting it twice.
-    this.props.onClear(false)
     this.setState({
       rpcUrl: '',
       chainId: '',
@@ -80,6 +76,11 @@ export default class NetworkForm extends PureComponent {
       blockExplorerUrl: '',
       errors: {},
     })
+
+    // onClear will push the network settings route unless was pass false.
+    // Since we call onClear to cause this component to be unmounted, the
+    // route will already have been updated, and we avoid setting it twice.
+    this.props.onClear(false)
   }
 
   resetForm () {
diff --git a/ui/app/pages/settings/networks-tab/networks-tab.component.js b/ui/app/pages/settings/networks-tab/networks-tab.component.js
index 36266fdc1..f5a748dab 100644
--- a/ui/app/pages/settings/networks-tab/networks-tab.component.js
+++ b/ui/app/pages/settings/networks-tab/networks-tab.component.js
@@ -101,7 +101,9 @@ export default class NetworksTab extends PureComponent {
         onClick={() => {
           setNetworksTabAddMode(false)
           setSelectedSettingsRpcUrl(rpcUrl)
-          !isFullScreen && history.push(NETWORKS_FORM_ROUTE)
+          if (!isFullScreen) {
+            history.push(NETWORKS_FORM_ROUTE)
+          }
         }}
       >
         <NetworkDropdownIcon
diff --git a/ui/app/pages/settings/settings.component.js b/ui/app/pages/settings/settings.component.js
index c7fb2ab88..859e9d810 100644
--- a/ui/app/pages/settings/settings.component.js
+++ b/ui/app/pages/settings/settings.component.js
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { Switch, Route, Redirect, matchPath } from 'react-router-dom'
+import { Switch, Route, matchPath } from 'react-router-dom'
 import classnames from 'classnames'
 import TabBar from '../../components/app/tab-bar'
 import {
@@ -11,7 +11,6 @@ import {
   ABOUT_US_ROUTE,
   SETTINGS_ROUTE,
   NETWORKS_ROUTE,
-  NETWORKS_FORM_ROUTE,
   CONTACT_LIST_ROUTE,
   CONTACT_ADD_ROUTE,
   CONTACT_EDIT_ROUTE,
@@ -36,7 +35,6 @@ class SettingsPage extends PureComponent {
     history: PropTypes.object,
     isAddressEntryPage: PropTypes.bool,
     isPopup: PropTypes.bool,
-    isFullScreen: PropTypes.bool,
     pathnameI18nKey: PropTypes.string,
     initialBreadCrumbRoute: PropTypes.string,
     breadCrumbTextKey: PropTypes.string,
@@ -130,7 +128,7 @@ class SettingsPage extends PureComponent {
       subheaderText = t(pathnameI18nKey || 'general')
     }
 
-    return currentPath !== NETWORKS_ROUTE && (
+    return !currentPath?.startsWith(NETWORKS_ROUTE) && (
       <div className="settings-page__subheader">
         <div
           className={classnames({ 'settings-page__subheader--link': initialBreadCrumbRoute })}
@@ -179,8 +177,6 @@ class SettingsPage extends PureComponent {
   }
 
   renderContent () {
-    const { isFullScreen } = this.props
-
     return (
       <Switch>
         <Route
@@ -204,13 +200,9 @@ class SettingsPage extends PureComponent {
           component={AlertsTab}
         />
         <Route
-          exact
           path={NETWORKS_ROUTE}
           component={NetworksTab}
         />
-        <Route exact path={NETWORKS_FORM_ROUTE}>
-          {isFullScreen ? <Redirect to={NETWORKS_ROUTE} /> : NetworksTab}
-        </Route>
         <Route
           exact
           path={SECURITY_ROUTE}
diff --git a/ui/app/pages/settings/settings.container.js b/ui/app/pages/settings/settings.container.js
index e5ca4f14f..e55319f07 100644
--- a/ui/app/pages/settings/settings.container.js
+++ b/ui/app/pages/settings/settings.container.js
@@ -3,10 +3,7 @@ import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import { getAddressBookEntryName } from '../../selectors'
 import { isValidAddress } from '../../helpers/utils/util'
-import {
-  ENVIRONMENT_TYPE_POPUP,
-  ENVIRONMENT_TYPE_FULLSCREEN,
-} from '../../../../app/scripts/lib/enums'
+import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums'
 import { getEnvironmentType } from '../../../../app/scripts/lib/util'
 import { getMostRecentOverviewPage } from '../../ducks/history/history'
 
@@ -57,7 +54,6 @@ const mapStateToProps = (state, ownProps) => {
   const isNetworksFormPage = Boolean(pathname.match(NETWORKS_FORM_ROUTE))
 
   const isPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
-  const isFullScreen = getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN
   const pathnameI18nKey = ROUTES_TO_I18N_KEYS[pathname]
 
   let backRoute = SETTINGS_ROUTE
@@ -90,7 +86,6 @@ const mapStateToProps = (state, ownProps) => {
     backRoute,
     currentPath: pathname,
     isPopup,
-    isFullScreen,
     pathnameI18nKey,
     addressName,
     initialBreadCrumbRoute,

From 59a38a253f667ac21708676c630755f03e7e7a1c Mon Sep 17 00:00:00 2001
From: Erik Marks <rekmarks@protonmail.com>
Date: Wed, 28 Oct 2020 22:50:10 -0700
Subject: [PATCH 13/13] Remove unnecessary optional chaining

---
 ui/app/pages/settings/settings.component.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/app/pages/settings/settings.component.js b/ui/app/pages/settings/settings.component.js
index 859e9d810..5986dd39d 100644
--- a/ui/app/pages/settings/settings.component.js
+++ b/ui/app/pages/settings/settings.component.js
@@ -128,7 +128,7 @@ class SettingsPage extends PureComponent {
       subheaderText = t(pathnameI18nKey || 'general')
     }
 
-    return !currentPath?.startsWith(NETWORKS_ROUTE) && (
+    return !currentPath.startsWith(NETWORKS_ROUTE) && (
       <div className="settings-page__subheader">
         <div
           className={classnames({ 'settings-page__subheader--link': initialBreadCrumbRoute })}