From 43c278d813457650133b6aebf71081d8633414c3 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 8 Dec 2022 10:42:23 -0600
Subject: [PATCH] Privacy - Show default selected network after a custom
 network has been added during onboarding (#16789)

* Privacy - Allow users to set a custom RPC from the onboarding process (#16767)

* Privacy - Allow adding custom IPFS from onboarding (#16782)

* Privacy - Show default selected network after a custom network has been added during onboarding

* WIP: Show dropdown list of networks

* Add network switcher to the onboarding advanced privacy screen

* Fix duplicate imports

* Provide default for networks

* Update ui/helpers/utils/ipfs.js

Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>

* Fix lint

* Remove unwanted changes

* Fix lint

Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
---
 app/_locales/en/messages.json                 |  24 ++++
 .../app/dropdowns/network-dropdown.js         |  43 ++++--
 ui/components/app/modals/modal.js             |   5 +
 ui/helpers/utils/ipfs.js                      |   3 +
 .../add-network-modal/index.js                |  43 ++++++
 .../privacy-settings/index.scss               |   9 ++
 .../privacy-settings/privacy-settings.js      | 127 +++++++++++++++++-
 .../privacy-settings/privacy-settings.test.js |   1 +
 .../privacy-settings/setting.js               |  17 ++-
 ui/pages/routes/routes.component.js           |   5 +-
 ui/pages/routes/routes.container.js           |   2 +
 .../advanced-tab/advanced-tab.component.js    |   8 +-
 .../networks-form/networks-form.js            |  15 +--
 .../networks-tab-content.js                   |   9 ++
 .../settings/networks-tab/networks-tab.js     |   4 +
 15 files changed, 279 insertions(+), 36 deletions(-)
 create mode 100644 ui/helpers/utils/ipfs.js
 create mode 100644 ui/pages/onboarding-flow/add-network-modal/index.js

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index b24301cee..d023d962c 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -2583,6 +2583,27 @@
   "on": {
     "message": "On"
   },
+  "onboardingAdvancedPrivacyIPFSDescription": {
+    "message": "The IPFS gateway makes it possible to access and view data hosted by third parties. You can add a custom IPFS gateway or continue using the default."
+  },
+  "onboardingAdvancedPrivacyIPFSInvalid": {
+    "message": "Please enter a valid URL"
+  },
+  "onboardingAdvancedPrivacyIPFSTitle": {
+    "message": "Add custom IPFS Gateway"
+  },
+  "onboardingAdvancedPrivacyIPFSValid": {
+    "message": "IPFS gateway URL is valid"
+  },
+  "onboardingAdvancedPrivacyNetworkButton": {
+    "message": "Add custom network"
+  },
+  "onboardingAdvancedPrivacyNetworkDescription": {
+    "message": "We use Infura as our remote procedure call (RPC) provider to offer the most reliable and private access to Ethereum data we can. You can choose your own RPC, but remember that any RPC will receive your IP address and Ethereum wallet to make transactions. Read our $1 to learn more about how Infura handles data."
+  },
+  "onboardingAdvancedPrivacyNetworkTitle": {
+    "message": "Choose your network"
+  },
   "onboardingCreateWallet": {
     "message": "Create a new wallet"
   },
@@ -2617,6 +2638,9 @@
   "onboardingMetametricsInfuraTermsPolicyLink": {
     "message": "here"
   },
+  "onboardingMetametricsModalTitle": {
+    "message": "Add custom network"
+  },
   "onboardingMetametricsNeverCollect": {
     "message": "$1 collect information we don’t need to provide the service (such as keys, addresses, transaction hashes, or balances)",
     "description": "$1 represents `onboardingMetametricsNeverEmphasis`"
diff --git a/ui/components/app/dropdowns/network-dropdown.js b/ui/components/app/dropdowns/network-dropdown.js
index e23125111..3badd8c07 100644
--- a/ui/components/app/dropdowns/network-dropdown.js
+++ b/ui/components/app/dropdowns/network-dropdown.js
@@ -101,6 +101,9 @@ class NetworkDropdown extends Component {
     showTestnetMessageInDropdown: PropTypes.bool.isRequired,
     hideTestNetMessage: PropTypes.func.isRequired,
     history: PropTypes.object,
+    dropdownStyles: PropTypes.object,
+    hideElementsForOnboarding: PropTypes.bool,
+    onAddClick: PropTypes.func,
   };
 
   handleClick(newProviderType) {
@@ -122,16 +125,21 @@ class NetworkDropdown extends Component {
   }
 
   renderAddCustomButton() {
+    const { onAddClick } = this.props;
     return (
       <div className="network__add-network-button">
         <Button
           type="secondary"
           onClick={() => {
-            getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
-              ? global.platform.openExtensionInBrowser(
-                  ADD_POPULAR_CUSTOM_NETWORK,
-                )
-              : this.props.history.push(ADD_POPULAR_CUSTOM_NETWORK);
+            if (onAddClick) {
+              onAddClick();
+            } else {
+              getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
+                ? global.platform.openExtensionInBrowser(
+                    ADD_POPULAR_CUSTOM_NETWORK,
+                  )
+                : this.props.history.push(ADD_POPULAR_CUSTOM_NETWORK);
+            }
             this.props.hideNetworkDropdown();
           }}
         >
@@ -263,6 +271,7 @@ class NetworkDropdown extends Component {
   render() {
     const {
       history,
+      hideElementsForOnboarding,
       hideNetworkDropdown,
       shouldShowTestNetworks,
       showTestnetMessageInDropdown,
@@ -294,20 +303,26 @@ class NetworkDropdown extends Component {
         }}
         containerClassName="network-droppo"
         zIndex={55}
-        style={{
-          position: 'absolute',
-          top: '58px',
-          width: '309px',
-          zIndex: '55px',
-        }}
+        style={
+          this.props.dropdownStyles || {
+            position: 'absolute',
+            top: '58px',
+            width: '309px',
+            zIndex: '55',
+          }
+        }
         innerStyle={{
           padding: '16px 0',
         }}
       >
         <div className="network-dropdown-header">
-          <div className="network-dropdown-title">{t('networks')}</div>
-          <div className="network-dropdown-divider" />
-          {showTestnetMessageInDropdown ? (
+          {hideElementsForOnboarding ? null : (
+            <div className="network-dropdown-title">{t('networks')}</div>
+          )}
+          {hideElementsForOnboarding ? null : (
+            <div className="network-dropdown-divider" />
+          )}
+          {showTestnetMessageInDropdown && !hideElementsForOnboarding ? (
             <div className="network-dropdown-content">
               {t('toggleTestNetworks', [
                 <a
diff --git a/ui/components/app/modals/modal.js b/ui/components/app/modals/modal.js
index d81858b4e..7bce4f7e1 100644
--- a/ui/components/app/modals/modal.js
+++ b/ui/components/app/modals/modal.js
@@ -8,6 +8,7 @@ import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
 
 // Modal Components
+import AddNetworkModal from '../../../pages/onboarding-flow/add-network-modal';
 import AccountDetailsModal from './account-details-modal';
 import ExportPrivateKeyModal from './export-private-key-modal';
 import HideTokenConfirmationModal from './hide-token-confirmation-modal';
@@ -76,6 +77,10 @@ const accountModalStyle = {
 };
 
 const MODALS = {
+  ONBOARDING_ADD_NETWORK: {
+    contents: <AddNetworkModal />,
+    ...accountModalStyle,
+  },
   NEW_ACCOUNT: {
     contents: <NewAccountModal />,
     mobileModalStyle: {
diff --git a/ui/helpers/utils/ipfs.js b/ui/helpers/utils/ipfs.js
new file mode 100644
index 000000000..9c917de2e
--- /dev/null
+++ b/ui/helpers/utils/ipfs.js
@@ -0,0 +1,3 @@
+export function addUrlProtocolPrefix(urlString) {
+  return urlString.match(/^https?:\/\//u) ? urlString : `https://${urlString}`;
+}
diff --git a/ui/pages/onboarding-flow/add-network-modal/index.js b/ui/pages/onboarding-flow/add-network-modal/index.js
new file mode 100644
index 000000000..45b7ec5b6
--- /dev/null
+++ b/ui/pages/onboarding-flow/add-network-modal/index.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+
+import { hideModal } from '../../../store/actions';
+
+import Typography from '../../../components/ui/typography/typography';
+import Box from '../../../components/ui/box/box';
+import {
+  TEXT_ALIGN,
+  TYPOGRAPHY,
+  FONT_WEIGHT,
+} from '../../../helpers/constants/design-system';
+
+import NetworksForm from '../../settings/networks-tab/networks-form/networks-form';
+
+export default function AddNetworkModal() {
+  const dispatch = useDispatch();
+  const t = useI18nContext();
+
+  const closeCallback = () =>
+    dispatch(hideModal({ name: 'ONBOARDING_ADD_NETWORK' }));
+
+  return (
+    <>
+      <Box paddingTop={4}>
+        <Typography
+          variant={TYPOGRAPHY.H4}
+          align={TEXT_ALIGN.CENTER}
+          fontWeight={FONT_WEIGHT.BOLD}
+        >
+          {t('onboardingMetametricsModalTitle')}
+        </Typography>
+      </Box>
+      <NetworksForm
+        addNewNetwork
+        networksToRender={[]}
+        cancelCallback={closeCallback}
+        submitCallback={closeCallback}
+      />
+    </>
+  );
+}
diff --git a/ui/pages/onboarding-flow/privacy-settings/index.scss b/ui/pages/onboarding-flow/privacy-settings/index.scss
index 0a623482b..6eae5901f 100644
--- a/ui/pages/onboarding-flow/privacy-settings/index.scss
+++ b/ui/pages/onboarding-flow/privacy-settings/index.scss
@@ -56,6 +56,15 @@
     }
   }
 
+  &__network {
+    position: relative;
+
+    .dropdown-menu-item {
+      font-size: 14px !important;
+      padding: 8px !important;
+    }
+  }
+
   & button {
     max-width: 50%;
     padding: 15px;
diff --git a/ui/pages/onboarding-flow/privacy-settings/privacy-settings.js b/ui/pages/onboarding-flow/privacy-settings/privacy-settings.js
index 9b732c0d9..3067db6e8 100644
--- a/ui/pages/onboarding-flow/privacy-settings/privacy-settings.js
+++ b/ui/pages/onboarding-flow/privacy-settings/privacy-settings.js
@@ -1,22 +1,32 @@
 import React, { useState } from 'react';
-import { useHistory } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
 
+import { useHistory } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+
+import Box from '../../../components/ui/box/box';
 import Button from '../../../components/ui/button';
 import Typography from '../../../components/ui/typography';
 import {
+  COLORS,
   FONT_WEIGHT,
   TYPOGRAPHY,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
+import { addUrlProtocolPrefix } from '../../../helpers/utils/ipfs';
 import {
   setCompletedOnboarding,
   setFeatureFlag,
   setUseMultiAccountBalanceChecker,
   setUsePhishDetect,
   setUseTokenDetection,
+  showModal,
+  setIpfsGateway,
+  showNetworkDropdown,
 } from '../../../store/actions';
 import { ONBOARDING_PIN_EXTENSION_ROUTE } from '../../../helpers/constants/routes';
+import { Icon, TextField } from '../../../components/component-library';
+import NetworkDropdown from '../../../components/app/dropdowns/network-dropdown';
+import NetworkDisplay from '../../../components/app/network-display/network-display';
 import { Setting } from './setting';
 
 export default function PrivacySettings() {
@@ -31,6 +41,12 @@ export default function PrivacySettings() {
     isMultiAccountBalanceCheckerEnabled,
     setMultiAccountBalanceCheckerEnabled,
   ] = useState(true);
+  const [ipfsURL, setIPFSURL] = useState('');
+  const [ipfsError, setIPFSError] = useState(null);
+
+  const networks = useSelector(
+    (state) => state.metamask.frequentRpcListDetail || [],
+  );
 
   const handleSubmit = () => {
     dispatch(
@@ -42,9 +58,28 @@ export default function PrivacySettings() {
       setUseMultiAccountBalanceChecker(isMultiAccountBalanceCheckerEnabled),
     );
     dispatch(setCompletedOnboarding());
+
+    if (ipfsURL && !ipfsError) {
+      const { host } = new URL(addUrlProtocolPrefix(ipfsURL));
+      dispatch(setIpfsGateway(host));
+    }
+
     history.push(ONBOARDING_PIN_EXTENSION_ROUTE);
   };
 
+  const handleIPFSChange = (url) => {
+    setIPFSURL(url);
+    try {
+      const { host } = new URL(addUrlProtocolPrefix(url));
+      if (!host || host === 'gateway.ipfs.io') {
+        throw new Error();
+      }
+      setIPFSError(null);
+    } catch (error) {
+      setIPFSError(t('onboardingAdvancedPrivacyIPFSInvalid'));
+    }
+  };
+
   return (
     <>
       <div className="privacy-settings" data-testid="privacy-settings">
@@ -118,6 +153,94 @@ export default function PrivacySettings() {
             title={t('useMultiAccountBalanceChecker')}
             description={t('useMultiAccountBalanceCheckerDescription')}
           />
+          <Setting
+            title={t('onboardingAdvancedPrivacyNetworkTitle')}
+            showToggle={false}
+            description={
+              <>
+                {t('onboardingAdvancedPrivacyNetworkDescription', [
+                  <a
+                    href="https://consensys.net/privacy-policy/"
+                    key="link"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {t('privacyMsg')}
+                  </a>,
+                ])}
+
+                <Box paddingTop={2}>
+                  {networks.length > 1 ? (
+                    <div className="privacy-settings__network">
+                      <>
+                        <NetworkDisplay
+                          onClick={() => dispatch(showNetworkDropdown())}
+                        />
+                        <NetworkDropdown
+                          hideElementsForOnboarding
+                          dropdownStyles={{
+                            position: 'absolute',
+                            top: '40px',
+                            left: '0',
+                            width: '309px',
+                            zIndex: '55',
+                          }}
+                          onAddClick={() => {
+                            dispatch(
+                              showModal({ name: 'ONBOARDING_ADD_NETWORK' }),
+                            );
+                          }}
+                        />
+                      </>
+                    </div>
+                  ) : null}
+                  {networks.length === 1 ? (
+                    <Button
+                      type="secondary"
+                      rounded
+                      large
+                      onClick={(e) => {
+                        e.preventDefault();
+                        dispatch(showModal({ name: 'ONBOARDING_ADD_NETWORK' }));
+                      }}
+                      icon={<Icon name="add-outline" marginRight={2} />}
+                    >
+                      {t('onboardingAdvancedPrivacyNetworkButton')}
+                    </Button>
+                  ) : null}
+                </Box>
+              </>
+            }
+          />
+          <Setting
+            title={t('onboardingAdvancedPrivacyIPFSTitle')}
+            showToggle={false}
+            description={
+              <>
+                {t('onboardingAdvancedPrivacyIPFSDescription')}
+                <Box paddingTop={2}>
+                  <TextField
+                    style={{ width: '100%' }}
+                    onChange={(e) => {
+                      handleIPFSChange(e.target.value);
+                    }}
+                  />
+                  {ipfsURL ? (
+                    <Typography
+                      variant={TYPOGRAPHY.H7}
+                      color={
+                        ipfsError
+                          ? COLORS.ERROR_DEFAULT
+                          : COLORS.SUCCESS_DEFAULT
+                      }
+                    >
+                      {ipfsError || t('onboardingAdvancedPrivacyIPFSValid')}
+                    </Typography>
+                  ) : null}
+                </Box>
+              </>
+            }
+          />
         </div>
         <Button type="primary" rounded onClick={handleSubmit}>
           {t('done')}
diff --git a/ui/pages/onboarding-flow/privacy-settings/privacy-settings.test.js b/ui/pages/onboarding-flow/privacy-settings/privacy-settings.test.js
index d67d5a69e..43a74eb15 100644
--- a/ui/pages/onboarding-flow/privacy-settings/privacy-settings.test.js
+++ b/ui/pages/onboarding-flow/privacy-settings/privacy-settings.test.js
@@ -11,6 +11,7 @@ import PrivacySettings from './privacy-settings';
 describe('Privacy Settings Onboarding View', () => {
   const mockStore = {
     metamask: {
+      frequentRpcListDetail: [],
       provider: {
         type: 'test',
       },
diff --git a/ui/pages/onboarding-flow/privacy-settings/setting.js b/ui/pages/onboarding-flow/privacy-settings/setting.js
index f2951fc97..e0a137b29 100644
--- a/ui/pages/onboarding-flow/privacy-settings/setting.js
+++ b/ui/pages/onboarding-flow/privacy-settings/setting.js
@@ -9,7 +9,13 @@ import {
   FONT_WEIGHT,
 } from '../../../helpers/constants/design-system';
 
-export const Setting = ({ value, setValue, title, description }) => {
+export const Setting = ({
+  value,
+  setValue,
+  title,
+  description,
+  showToggle = true,
+}) => {
   return (
     <Box justifyContent={JUSTIFY_CONTENT.CENTER} margin={3}>
       <div className="privacy-settings__setting">
@@ -18,9 +24,11 @@ export const Setting = ({ value, setValue, title, description }) => {
         </Typography>
         <Typography variant={TYPOGRAPHY.H6}>{description}</Typography>
       </div>
-      <div className="privacy-settings__setting__toggle">
-        <ToggleButton value={value} onToggle={(val) => setValue(!val)} />
-      </div>
+      {showToggle ? (
+        <div className="privacy-settings__setting__toggle">
+          <ToggleButton value={value} onToggle={(val) => setValue(!val)} />
+        </div>
+      ) : null}
     </Box>
   );
 };
@@ -30,4 +38,5 @@ Setting.propTypes = {
   setValue: PropTypes.func,
   title: PropTypes.string,
   description: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  showToggle: PropTypes.bool,
 };
diff --git a/ui/pages/routes/routes.component.js b/ui/pages/routes/routes.component.js
index 4b12fd4b7..ecfed0fe8 100644
--- a/ui/pages/routes/routes.component.js
+++ b/ui/pages/routes/routes.component.js
@@ -115,6 +115,7 @@ export default class Routes extends Component {
     portfolioTooltipIsBeingShown: PropTypes.bool,
     forgottenPassword: PropTypes.bool,
     isCurrentProviderCustom: PropTypes.bool,
+    completedOnboarding: PropTypes.bool,
   };
 
   static contextTypes = {
@@ -379,6 +380,7 @@ export default class Routes extends Component {
       shouldShowSeedPhraseReminder,
       portfolioTooltipIsBeingShown,
       isCurrentProviderCustom,
+      completedOnboarding,
     } = this.props;
     const loadMessage =
       loadingMessage || isNetworkLoading
@@ -391,6 +393,7 @@ export default class Routes extends Component {
       !isTestNet &&
       !isNetworkUsed &&
       !isCurrentProviderCustom &&
+      completedOnboarding &&
       allAccountsOnNetworkAreEmpty;
 
     const windowType = getEnvironmentType();
@@ -436,7 +439,7 @@ export default class Routes extends Component {
         {process.env.ONBOARDING_V2 && this.showOnboardingHeader() && (
           <OnboardingAppHeader />
         )}
-        <NetworkDropdown />
+        {completedOnboarding ? <NetworkDropdown /> : null}
         <AccountMenu />
         <div className="main-container-wrapper">
           {isLoading ? <Loading loadingMessage={loadMessage} /> : null}
diff --git a/ui/pages/routes/routes.container.js b/ui/pages/routes/routes.container.js
index 486889289..dcc0e81c3 100644
--- a/ui/pages/routes/routes.container.js
+++ b/ui/pages/routes/routes.container.js
@@ -29,6 +29,7 @@ function mapStateToProps(state) {
   const { appState } = state;
   const { alertOpen, alertMessage, isLoading, loadingMessage } = appState;
   const { autoLockTimeLimit = 0 } = getPreferences(state);
+  const { completedOnboarding } = state.metamask;
 
   return {
     alertOpen,
@@ -55,6 +56,7 @@ function mapStateToProps(state) {
     portfolioTooltipIsBeingShown: getShowPortfolioTooltip(state),
     forgottenPassword: state.metamask.forgottenPassword,
     isCurrentProviderCustom: isCurrentProviderCustom(state),
+    completedOnboarding,
   };
 }
 
diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.js b/ui/pages/settings/advanced-tab/advanced-tab.component.js
index 330c8b871..0b3e2a615 100644
--- a/ui/pages/settings/advanced-tab/advanced-tab.component.js
+++ b/ui/pages/settings/advanced-tab/advanced-tab.component.js
@@ -14,6 +14,7 @@ import {
   getNumberOfSettingsInSection,
   handleSettingsRefs,
 } from '../../../helpers/utils/settings-search';
+import { addUrlProtocolPrefix } from '../../../helpers/utils/ipfs';
 
 import {
   LEDGER_TRANSPORT_TYPES,
@@ -842,10 +843,3 @@ export default class AdvancedTab extends PureComponent {
     );
   }
 }
-
-function addUrlProtocolPrefix(urlString) {
-  if (!urlString.match(/(^http:\/\/)|(^https:\/\/)/u)) {
-    return `https://${urlString}`;
-  }
-  return urlString;
-}
diff --git a/ui/pages/settings/networks-tab/networks-form/networks-form.js b/ui/pages/settings/networks-tab/networks-form/networks-form.js
index ceb9cc70b..ccc9ebdfa 100644
--- a/ui/pages/settings/networks-tab/networks-form/networks-form.js
+++ b/ui/pages/settings/networks-tab/networks-form/networks-form.js
@@ -5,7 +5,6 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { useHistory } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import validUrl from 'valid-url';
@@ -29,10 +28,6 @@ import {
   showModal,
   setNewNetworkAdded,
 } from '../../../../store/actions';
-import {
-  DEFAULT_ROUTE,
-  NETWORKS_ROUTE,
-} from '../../../../helpers/constants/routes';
 import fetchWithCache from '../../../../../shared/lib/fetch-with-cache';
 import { usePrevious } from '../../../../hooks/usePrevious';
 import { MetaMetricsContext } from '../../../../contexts/metametrics';
@@ -86,10 +81,11 @@ const NetworksForm = ({
   isCurrentRpcTarget,
   networksToRender,
   selectedNetwork,
+  cancelCallback,
+  submitCallback,
 }) => {
   const t = useI18nContext();
   const trackEvent = useContext(MetaMetricsContext);
-  const history = useHistory();
   const dispatch = useDispatch();
   const { label, labelKey, viewOnly, rpcPrefs } = selectedNetwork;
   const selectedNetworkName = label || (labelKey && t(labelKey));
@@ -544,7 +540,8 @@ const NetworksForm = ({
           },
         });
         dispatch(setNewNetworkAdded(networkName));
-        history.push(DEFAULT_ROUTE);
+
+        submitCallback?.();
       }
     } catch (error) {
       setIsSubmitting(false);
@@ -555,7 +552,7 @@ const NetworksForm = ({
   const onCancel = () => {
     if (addNewNetwork) {
       dispatch(setSelectedSettingsRpcUrl(''));
-      history.push(NETWORKS_ROUTE);
+      cancelCallback?.();
     } else {
       resetForm();
     }
@@ -709,6 +706,8 @@ NetworksForm.propTypes = {
   isCurrentRpcTarget: PropTypes.bool,
   networksToRender: PropTypes.array.isRequired,
   selectedNetwork: PropTypes.object,
+  cancelCallback: PropTypes.func,
+  submitCallback: PropTypes.func,
 };
 
 NetworksForm.defaultProps = {
diff --git a/ui/pages/settings/networks-tab/networks-tab-content/networks-tab-content.js b/ui/pages/settings/networks-tab/networks-tab-content/networks-tab-content.js
index 313bc0ff5..6c43f720f 100644
--- a/ui/pages/settings/networks-tab/networks-tab-content/networks-tab-content.js
+++ b/ui/pages/settings/networks-tab/networks-tab-content/networks-tab-content.js
@@ -1,10 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
 import NetworksForm from '../networks-form';
 import NetworksList from '../networks-list';
 import { getProvider } from '../../../../selectors';
 
+import {
+  DEFAULT_ROUTE,
+  NETWORKS_ROUTE,
+} from '../../../../helpers/constants/routes';
+
 const NetworksTabContent = ({
   networkDefaultedToProvider,
   networkIsSelected,
@@ -13,6 +19,7 @@ const NetworksTabContent = ({
   shouldRenderNetworkForm,
 }) => {
   const provider = useSelector(getProvider);
+  const history = useHistory();
 
   return (
     <>
@@ -27,6 +34,8 @@ const NetworksTabContent = ({
           isCurrentRpcTarget={provider.rpcUrl === selectedNetwork.rpcUrl}
           networksToRender={networksToRender}
           selectedNetwork={selectedNetwork}
+          submitCallback={() => history.push(DEFAULT_ROUTE)}
+          cancelCallback={() => history.push(NETWORKS_ROUTE)}
         />
       ) : null}
     </>
diff --git a/ui/pages/settings/networks-tab/networks-tab.js b/ui/pages/settings/networks-tab/networks-tab.js
index 572acad3f..287b187df 100644
--- a/ui/pages/settings/networks-tab/networks-tab.js
+++ b/ui/pages/settings/networks-tab/networks-tab.js
@@ -7,6 +7,8 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
   ADD_POPULAR_CUSTOM_NETWORK,
   NETWORKS_FORM_ROUTE,
+  DEFAULT_ROUTE,
+  NETWORKS_ROUTE,
 } from '../../../helpers/constants/routes';
 import { setSelectedSettingsRpcUrl } from '../../../store/actions';
 import Button from '../../../components/ui/button';
@@ -106,6 +108,8 @@ const NetworksTab = ({ addNewNetwork }) => {
           <NetworksForm
             networksToRender={networksToRender}
             addNewNetwork={addNewNetwork}
+            submitCallback={() => history.push(DEFAULT_ROUTE)}
+            cancelCallback={() => history.push(NETWORKS_ROUTE)}
           />
         ) : (
           <>