Adding popular custom network integration (#14557)

* Initial push

* Refactored the code

* Additional code

* Removed the unused message

* Added a tooltip

* Fixed tests

* Lint fix

* Added style to a tooltip

* Fix e2e test failure

* Lint fix and code revert

* Fix e2e test

* Fixed paddings

* Fixed paddings

* CSS fix

* Minified svg files

* Applied requested changes

* Fixed theme issue

* Code revert

* Added back overridden code

* Icon problem fixed

* Lint fix

* Replaced H3 with H4

* Added unit test

* Added breadcrumbs

* Added const props for networks

* Lint fix

* Lint fix

* Added toggle button for showing the custom network list and resolved few issues

* Fixed routes

* Refactored a piece of code

* Enabled searching for the newly created option

* Fixed unit test

* Updated theme

app/_locales/en/messages.json

@@ -157,6 +157,9 @@
   "addMemo": {
     "message": "Add memo"
   },
+  "addMoreNetworks": {
+    "message": "add more networks manually"
+  },
   "addNetwork": {
     "message": "Add Network"
   },
@@ -1954,6 +1957,9 @@
   "network": {
     "message": "Network:"
   },
+  "networkAddedSuccessfully": {
+    "message": "Network added successfully!"
+  },
   "networkDetails": {
     "message": "Network Details"
   },
@@ -2891,6 +2897,12 @@
   "showAdvancedGasInlineDescription": {
     "message": "Select this to show gas price and limit controls directly on the send and confirm screens."
   },
+  "showCustomNetworkList": {
+    "message": "Show Custom Network List"
+  },
+  "showCustomNetworkListDescription": {
+    "message": "Select this to show a list of networks with prefilled details when adding a new network."
+  },
   "showFiatConversionInTestnets": {
     "message": "Show Conversion on test networks"
   },
@@ -3000,6 +3012,9 @@
   "snapsToggle": {
     "message": "A snap will only run if it is enabled"
   },
+  "someNetworksMayPoseSecurity": {
+    "message": "Some networks may pose security and/or privacy risks. Understand the risks before adding & using a network."
+  },
   "somethingWentWrong": {
     "message": "Oops! Something went wrong."
   },
@@ -3562,6 +3577,10 @@
   "switchNetworks": {
     "message": "Switch Networks"
   },
+  "switchToNetwork": {
+    "message": "Switch to $1",
+    "description": "$1 represents the custom network that has previously been added"
+  },
   "switchToThisAccount": {
     "message": "Switch to this account"
   },
@@ -4008,6 +4027,9 @@
   "walletCreationSuccessTitle": {
     "message": "Wallet creation successful"
   },
+  "wantToAddThisNetwork": {
+    "message": "Want to add this network?"
+  },
   "warning": {
     "message": "Warning"
   },
@@ -4070,6 +4092,10 @@
   "yesLetsTry": {
     "message": "Yes, let's try"
   },
+  "youHaveAddedAll": {
+    "message": "You've added all the popular networks. You can discover more networks $1 Or you can $2",
+    "description": "$1 is a link with the text 'here' and $2 is a button with the text 'add more networks manually'"
+  },
   "youNeedToAllowCameraAccess": {
     "message": "You need to allow camera access to use this feature."
   },

app/images/fantom-opera.svg

@@ -0,0 +1 @@
+<svg width="1024" height="1024" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill="#1969FF" cx="512" cy="512" r="512"/><path d="M480.953 162.82c17.25-9.093 43.496-9.093 60.746 0l176.016 92.795c10.39 5.477 16.095 13.638 17.117 22.063H735V744.11c-.23 9.19-5.988 18.32-17.285 24.275L541.7 861.18c-17.25 9.093-43.497 9.093-60.746 0l-176.017-92.795c-11.249-5.93-16.647-15.123-16.914-24.275a32.372 32.372 0 0 1-.001-2.35V280.82a24 24 0 0 1 0-1.937v-1.204h.08c.781-8.518 6.228-16.47 16.835-22.063l176.017-92.795ZM707 537l-165.355 87.46c-17.225 9.111-43.433 9.111-60.658 0L316 537.195v205.474l164.987 86.802c9.75 5.217 19.888 10.3 29.76 10.521l.569.008c9.852.032 19.418-4.978 29.117-9.72L707 741.92V537ZM260.424 734c0 17.88 2.06 29.633 6.15 37.912 3.389 6.863 8.475 12.107 17.761 18.489l.53.362c2.038 1.387 4.283 2.839 7.016 4.545l3.223 1.992 9.896 6.025L290.806 827l-11.076-6.75-1.862-1.153c-3.202-1.995-5.857-3.707-8.333-5.392-26.467-18.003-36.337-37.63-36.532-78.461L233 734h27.424ZM498 413c-1.28.44-2.481.951-3.575 1.53l-175.748 93.094c-.185.097-.36.194-.528.29L318 508l.276.159.4.217 175.749 93.094c1.094.579 2.294 1.09 3.575 1.53V413Zm28 0v190a25.085 25.085 0 0 0 3.576-1.53l175.747-93.094c.184-.097.36-.194.528-.29L706 508l-.276-.159-.401-.217-175.747-93.094A25.085 25.085 0 0 0 526 413Zm181-102-158 83 158 83V311Zm-391 0v166l158-83-158-83Zm213.422-123.373c-9.147-4.836-25.697-4.836-34.844 0l-175.9 92.997c-.185.098-.362.194-.529.29L318 281l.276.158.401.218 175.9 92.996c9.148 4.837 25.698 4.837 34.845 0l175.9-92.996c.185-.098.361-.194.528-.29L706 281l-.276-.158-.402-.218-175.9-92.997ZM733.194 197l11.076 6.75 1.862 1.152c3.202 1.995 5.857 3.709 8.333 5.393 26.467 18.003 36.337 37.63 36.532 78.461L791 290h-27.424c0-17.882-2.06-29.633-6.15-37.913-3.388-6.862-8.474-12.107-17.76-18.488l-.531-.362a212.559 212.559 0 0 0-7.016-4.545l-3.223-1.992-9.896-6.025L733.194 197Z" fill="#FFF" fill-rule="nonzero"/></g></svg>

app/images/harmony-one.svg

@@ -0,0 +1 @@
+<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><linearGradient id="a" x1="71.37" y1="228.63" x2="228.63" y2="71.37" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#00aee9"/><stop offset="1" stop-color="#69fabd"/></linearGradient></defs><path d="M201.17 60a38.81 38.81 0 0 0-38.84 38.71v42.92c-4 .27-8.09.44-12.33.44s-8.31.17-12.33.41V98.71a38.84 38.84 0 0 0-77.67 0v102.58a38.84 38.84 0 0 0 77.67 0v-42.92c4-.27 8.09-.44 12.33-.44s8.31-.17 12.33-.41v43.77a38.84 38.84 0 0 0 77.67 0V98.71A38.81 38.81 0 0 0 201.17 60ZM98.83 75.86a22.91 22.91 0 0 1 22.92 22.85v45.45a130.64 130.64 0 0 0-33 9.33 60 60 0 0 0-12.8 7.64V98.71a22.91 22.91 0 0 1 22.88-22.85Zm22.92 125.43a22.92 22.92 0 0 1-45.84 0V191c0-9.09 7.2-17.7 19.27-23.06a113 113 0 0 1 26.57-7.77Zm79.42 22.85a22.91 22.91 0 0 1-22.92-22.85v-45.45a130.64 130.64 0 0 0 33-9.33 60 60 0 0 0 12.8-7.64v62.42a22.91 22.91 0 0 1-22.88 22.85Zm3.65-92.14a113 113 0 0 1-26.57 7.77V98.71a22.92 22.92 0 0 1 45.84 0V109c0 9.05-7.2 17.66-19.27 23Z" style="fill:url(#a)"/><path style="fill:none" d="M0 0h300v300H0z"/></svg>

app/scripts/controllers/preferences.js

@@ -69,6 +69,7 @@ export default class PreferencesController {
         ? LEDGER_TRANSPORT_TYPES.WEBHID
         : LEDGER_TRANSPORT_TYPES.U2F,
       theme: 'light',
+      customNetworkListEnabled: false,
       ...opts.initState,
     };
 
@@ -179,6 +180,17 @@ export default class PreferencesController {
     this.store.updateState({ theme: val });
   }
 
+  /**
+   * Setter for the `customNetworkListEnabled` property
+   *
+   * @param customNetworkListEnabled
+   */
+  setCustomNetworkListEnabled(customNetworkListEnabled) {
+    this.store.updateState({
+      customNetworkListEnabled,
+    });
+  }
+
   /**
    * Add new methodData to state, to avoid requesting this information again through Infura
    *

app/scripts/metamask-controller.js

@@ -1572,7 +1572,8 @@ export default class MetamaskController extends EventEmitter {
       setCustomRpc: this.setCustomRpc.bind(this),
       updateAndSetCustomRpc: this.updateAndSetCustomRpc.bind(this),
       delCustomRpc: this.delCustomRpc.bind(this),
-
+      addCustomNetwork: this.addCustomNetwork.bind(this),
+      requestUserApproval: this.requestUserApproval.bind(this),
       // PreferencesController
       setSelectedAddress: preferencesController.setSelectedAddress.bind(
         preferencesController,
@@ -1609,7 +1610,9 @@ export default class MetamaskController extends EventEmitter {
         preferencesController,
       ),
       setTheme: preferencesController.setTheme.bind(preferencesController),
-
+      setCustomNetworkListEnabled: preferencesController.setCustomNetworkListEnabled.bind(
+        preferencesController,
+      ),
       // AssetsContractController
       getTokenStandardAndDetails: this.getTokenStandardAndDetails.bind(this),
 
@@ -2026,6 +2029,43 @@ export default class MetamaskController extends EventEmitter {
     }
   }
 
+  async requestUserApproval(customRpc, originIsMetaMask) {
+    try {
+      await this.approvalController.addAndShowApprovalRequest({
+        origin: 'metamask',
+        type: 'wallet_addEthereumChain',
+        requestData: {
+          chainId: customRpc.chainId,
+          blockExplorerUrl: customRpc.rpcPrefs.blockExplorerUrl,
+          chainName: customRpc.nickname,
+          rpcUrl: customRpc.rpcUrl,
+          ticker: customRpc.ticker,
+          imageUrl: customRpc.rpcPrefs.imageUrl,
+        },
+      });
+    } catch (error) {
+      if (
+        !(originIsMetaMask && error.message === 'User rejected the request.')
+      ) {
+        throw error;
+      }
+    }
+  }
+
+  async addCustomNetwork(customRpc) {
+    const { chainId, chainName, rpcUrl, ticker, blockExplorerUrl } = customRpc;
+
+    await this.preferencesController.addToFrequentRpcList(
+      rpcUrl,
+      chainId,
+      ticker,
+      chainName,
+      {
+        blockExplorerUrl,
+      },
+    );
+  }
+
   /**
    * Create a new Vault and restore an existent keyring.
    *

shared/constants/network.js

@@ -28,6 +28,9 @@ export const POLYGON_CHAIN_ID = '0x89';
 export const AVALANCHE_CHAIN_ID = '0xa86a';
 export const FANTOM_CHAIN_ID = '0xfa';
 export const CELO_CHAIN_ID = '0xa4ec';
+export const ARBITRUM_CHAIN_ID = '0xa4b1';
+export const HARMONY_CHAIN_ID = '0x63564c40';
+export const PALM_CHAIN_ID = '0x2a15c308d';
 
 /**
  * The largest possible chain ID we can handle.
@@ -43,7 +46,14 @@ export const GOERLI_DISPLAY_NAME = 'Goerli';
 export const LOCALHOST_DISPLAY_NAME = 'Localhost 8545';
 export const BSC_DISPLAY_NAME = 'Binance Smart Chain';
 export const POLYGON_DISPLAY_NAME = 'Polygon';
-export const AVALANCHE_DISPLAY_NAME = 'Avalanche';
+export const AVALANCHE_DISPLAY_NAME = 'Avalanche Network C-Chain';
+export const ARBITRUM_DISPLAY_NAME = 'Arbitrum One';
+export const BNB_DISPLAY_NAME =
+  'BNB Smart Chain (previously Binance Smart Chain Mainnet)';
+export const OPTIMISM_DISPLAY_NAME = 'Optimism';
+export const FANTOM_DISPLAY_NAME = 'Fantom Opera';
+export const HARMONY_DISPLAY_NAME = 'Harmony Mainnet Shard 0';
+export const PALM_DISPLAY_NAME = 'Palm';
 
 const infuraProjectId = process.env.INFURA_PROJECT_ID;
 export const getRpcUrl = ({ network, excludeProjectId = false }) =>
@@ -64,12 +74,20 @@ export const MATIC_SYMBOL = 'MATIC';
 export const AVALANCHE_SYMBOL = 'AVAX';
 export const FANTOM_SYMBOL = 'FTM';
 export const CELO_SYMBOL = 'CELO';
+export const ARBITRUM_SYMBOL = 'AETH';
+export const HARMONY_SYMBOL = 'ONE';
+export const PALM_SYMBOL = 'PALM';
 
 export const ETH_TOKEN_IMAGE_URL = './images/eth_logo.svg';
 export const TEST_ETH_TOKEN_IMAGE_URL = './images/black-eth-logo.svg';
 export const BNB_TOKEN_IMAGE_URL = './images/bnb.png';
 export const MATIC_TOKEN_IMAGE_URL = './images/matic-token.png';
 export const AVAX_TOKEN_IMAGE_URL = './images/avax-token.png';
+export const AETH_TOKEN_IMAGE_URL = './images/arbitrum.svg';
+export const FTM_TOKEN_IMAGE_URL = './images/fantom-opera.svg';
+export const HARMONY_ONE_TOKEN_IMAGE_URL = './images/harmony-one.svg';
+export const OPTIMISM_TOKEN_IMAGE_URL = './images/optimism.svg';
+export const PALM_TOKEN_IMAGE_URL = './images/palm.svg';
 
 export const INFURA_PROVIDER_TYPES = [ROPSTEN, RINKEBY, KOVAN, MAINNET, GOERLI];
 
@@ -166,6 +184,12 @@ export const CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP = {
   [AVALANCHE_CHAIN_ID]: AVAX_TOKEN_IMAGE_URL,
   [BSC_CHAIN_ID]: BNB_TOKEN_IMAGE_URL,
   [POLYGON_CHAIN_ID]: MATIC_TOKEN_IMAGE_URL,
+  [ARBITRUM_CHAIN_ID]: AETH_TOKEN_IMAGE_URL,
+  [BSC_CHAIN_ID]: BNB_TOKEN_IMAGE_URL,
+  [FANTOM_CHAIN_ID]: FTM_TOKEN_IMAGE_URL,
+  [HARMONY_CHAIN_ID]: HARMONY_ONE_TOKEN_IMAGE_URL,
+  [OPTIMISM_CHAIN_ID]: OPTIMISM_TOKEN_IMAGE_URL,
+  [PALM_CHAIN_ID]: PALM_TOKEN_IMAGE_URL,
 };
 
 export const CHAIN_ID_TO_NETWORK_ID_MAP = Object.values(
@@ -309,3 +333,86 @@ export const BUYABLE_CHAINS_MAP = {
     },
   },
 };
+
+export const FEATURED_RPCS = [
+  {
+    chainId: ARBITRUM_CHAIN_ID,
+    nickname: ARBITRUM_DISPLAY_NAME,
+    rpcUrl: `https://arbitrum-mainnet.infura.io/v3/${infuraProjectId}`,
+    ticker: ARBITRUM_SYMBOL,
+    rpcPrefs: {
+      blockExplorerUrl: 'https://explorer.arbitrum.io',
+      imageUrl: AETH_TOKEN_IMAGE_URL,
+    },
+  },
+  {
+    chainId: AVALANCHE_CHAIN_ID,
+    nickname: AVALANCHE_DISPLAY_NAME,
+    rpcUrl: 'https://api.avax.network/ext/bc/C/rpc',
+    ticker: AVALANCHE_SYMBOL,
+    rpcPrefs: {
+      blockExplorerUrl: 'https://snowtrace.io/',
+      imageUrl: AVAX_TOKEN_IMAGE_URL,
+    },
+  },
+  {
+    chainId: BSC_CHAIN_ID,
+    nickname: BNB_DISPLAY_NAME,
+    rpcUrl: 'https://bsc-dataseed.binance.org/',
+    ticker: BNB_SYMBOL,
+    rpcPrefs: {
+      blockExplorerUrl: 'https://bscscan.com/',
+      imageUrl: BNB_TOKEN_IMAGE_URL,
+    },
+  },
+  {
+    chainId: FANTOM_CHAIN_ID,
+    nickname: FANTOM_DISPLAY_NAME,
+    rpcUrl: 'https://rpc.ftm.tools/',
+    ticker: FANTOM_SYMBOL,
+    rpcPrefs: {
+      blockExplorerUrl: 'https://ftmscan.com/',
+      imageUrl: FTM_TOKEN_IMAGE_URL,
+    },
+  },
+  {
+    chainId: HARMONY_CHAIN_ID,
+    nickname: HARMONY_DISPLAY_NAME,
+    rpcUrl: 'https://api.harmony.one/',
+    ticker: HARMONY_SYMBOL,
+    rpcPrefs: {
+      blockExplorerUrl: 'https://explorer.harmony.one/',
+      imageUrl: HARMONY_ONE_TOKEN_IMAGE_URL,
+    },
+  },
+  {
+    chainId: OPTIMISM_CHAIN_ID,
+    nickname: OPTIMISM_DISPLAY_NAME,
+    rpcUrl: `https://optimism-mainnet.infura.io/v3/${infuraProjectId}`,
+    ticker: ETH_SYMBOL,
+    rpcPrefs: {
+      blockExplorerUrl: 'https://optimistic.etherscan.io/',
+      imageUrl: OPTIMISM_TOKEN_IMAGE_URL,
+    },
+  },
+  {
+    chainId: PALM_CHAIN_ID,
+    nickname: PALM_DISPLAY_NAME,
+    rpcUrl: `https://palm-mainnet.infura.io/v3/${infuraProjectId}`,
+    ticker: PALM_SYMBOL,
+    rpcPrefs: {
+      blockExplorerUrl: 'https://explorer.palm.io/',
+      imageUrl: PALM_TOKEN_IMAGE_URL,
+    },
+  },
+  {
+    chainId: POLYGON_CHAIN_ID,
+    nickname: `${POLYGON_DISPLAY_NAME} ${capitalize(MAINNET)}`,
+    rpcUrl: `https://polygon-mainnet.infura.io/v3/${infuraProjectId}`,
+    ticker: MATIC_SYMBOL,
+    rpcPrefs: {
+      blockExplorerUrl: 'https://polygonscan.com/',
+      imageUrl: MATIC_TOKEN_IMAGE_URL,
+    },
+  },
+];

ui/components/app/add-network/add-network.js

@@ -1,168 +1,286 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
-import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
 import { I18nContext } from '../../../contexts/i18n';
 import Box from '../../ui/box';
 import Typography from '../../ui/typography';
 import {
   ALIGN_ITEMS,
-  BLOCK_SIZES,
   COLORS,
   DISPLAY,
   FLEX_DIRECTION,
   FONT_WEIGHT,
   TYPOGRAPHY,
   JUSTIFY_CONTENT,
+  SIZES,
 } from '../../../helpers/constants/design-system';
 import Button from '../../ui/button';
-import IconCaretLeft from '../../ui/icon/icon-caret-left';
 import Tooltip from '../../ui/tooltip';
 import IconWithFallback from '../../ui/icon-with-fallback';
 import IconBorder from '../../ui/icon-border';
-import { getTheme } from '../../../selectors';
+import {
-import { THEME_TYPE } from '../../../pages/settings/experimental-tab/experimental-tab.constant';
+  getFrequentRpcListDetail,
+  getUnapprovedConfirmations,
+} from '../../../selectors';
 
-const AddNetwork = ({
+import {
-  onBackClick,
+  ENVIRONMENT_TYPE_FULLSCREEN,
-  onAddNetworkClick,
+  ENVIRONMENT_TYPE_POPUP,
-  onAddNetworkManuallyClick,
+  MESSAGE_TYPE,
-  featuredRPCS,
+} from '../../../../shared/constants/app';
-}) => {
+import { requestUserApproval } from '../../../store/actions';
+import Popover from '../../ui/popover';
+import ConfirmationPage from '../../../pages/confirmation/confirmation';
+import { FEATURED_RPCS } from '../../../../shared/constants/network';
+import { ADD_NETWORK_ROUTE } from '../../../helpers/constants/routes';
+import { getEnvironmentType } from '../../../../app/scripts/lib/util';
+
+const AddNetwork = () => {
   const t = useContext(I18nContext);
-  const theme = useSelector(getTheme);
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const frequentRpcList = useSelector(getFrequentRpcListDetail);
+
+  const frequentRpcListChainIds = Object.values(frequentRpcList).map(
+    (net) => net.chainId,
+  );
 
   const infuraRegex = /infura.io/u;
 
-  const nets = featuredRPCS
+  const nets = FEATURED_RPCS.sort((a, b) =>
-    .sort((a, b) => (a.ticker > b.ticker ? 1 : -1))
+    a.ticker > b.ticker ? 1 : -1,
-    .slice(0, 8);
+  ).slice(0, FEATURED_RPCS.length);
+
+  const notFrequentRpcNetworks = nets.filter(
+    (net) => frequentRpcListChainIds.indexOf(net.chainId) === -1,
+  );
+  const unapprovedConfirmations = useSelector(getUnapprovedConfirmations);
+  const [showPopover, setShowPopover] = useState(false);
+
+  useEffect(() => {
+    const anAddNetworkConfirmationFromMetaMaskExists = unapprovedConfirmations?.find(
+      (confirmation) => {
+        return (
+          confirmation.origin === 'metamask' &&
+          confirmation.type === MESSAGE_TYPE.ADD_ETHEREUM_CHAIN
+        );
+      },
+    );
+    if (!showPopover && anAddNetworkConfirmationFromMetaMaskExists) {
+      setShowPopover(true);
+    }
+
+    if (showPopover && !anAddNetworkConfirmationFromMetaMaskExists) {
+      setShowPopover(false);
+    }
+  }, [unapprovedConfirmations, showPopover]);
 
   return (
-    <Box>
+    <>
-      <Box
+      {Object.keys(notFrequentRpcNetworks).length === 0 ? (
-        height={BLOCK_SIZES.TWO_TWELFTHS}
+        <Box
-        padding={[4, 0, 4, 0]}
+          className="add-network__edge-case-box"
-        display={DISPLAY.FLEX}
+          borderRadius={SIZES.MD}
-        alignItems={ALIGN_ITEMS.CENTER}
+          padding={4}
-        flexDirection={FLEX_DIRECTION.ROW}
+          margin={[4, 6, 0, 6]}
-        className="add-network__header"
+          display={DISPLAY.FLEX}
-      >
+          flexDirection={FLEX_DIRECTION.ROW}
-        <IconCaretLeft
+          backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
-          aria-label={t('back')}
-          onClick={onBackClick}
-          className="add-network__header__back-icon"
-        />
-        <Typography variant={TYPOGRAPHY.H3} color={COLORS.TEXT_DEFAULT}>
-          {t('addNetwork')}
-        </Typography>
-      </Box>
-      <Box
-        height={BLOCK_SIZES.FOUR_FIFTHS}
-        width={BLOCK_SIZES.TEN_TWELFTHS}
-        margin={[0, 6, 0, 6]}
-      >
-        <Typography
-          variant={TYPOGRAPHY.H6}
-          color={COLORS.TEXT_ALTERNATIVE}
-          margin={[4, 0, 0, 0]}
         >
-          {t('addFromAListOfPopularNetworks')}
+          <Box marginRight={4}>
-        </Typography>
+            <img src="images/info-fox.svg" />
-        <Typography
+          </Box>
-          variant={TYPOGRAPHY.H7}
+          <Box>
-          color={COLORS.TEXT_MUTED}
+            <Typography variant={TYPOGRAPHY.H7}>
-          margin={[4, 0, 3, 0]}
+              {t('youHaveAddedAll', [
-        >
+                <a
-          {t('popularCustomNetworks')}
+                  key="link"
-        </Typography>
+                  className="add-network__edge-case-box__link"
-        {nets.map((item, index) => (
+                  href="https://chainlist.wtf/"
-          <Box
+                  target="_blank"
-            key={index}
+                  rel="noreferrer"
-            display={DISPLAY.FLEX}
+                >
-            alignItems={ALIGN_ITEMS.CENTER}
+                  {t('here')}.
-            justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
+                </a>,
-            marginBottom={6}
+                <Button
-          >
+                  key="button"
-            <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.CENTER}>
+                  type="inline"
-              <IconBorder size={24}>
+                  onClick={(event) => {
-                <IconWithFallback
+                    event.preventDefault();
-                  icon={item.rpcPrefs.imageUrl}
+                    getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
-                  name={item.nickname}
+                      ? global.platform.openExtensionInBrowser(
-                  size={24}
+                          ADD_NETWORK_ROUTE,
-                />
+                        )
-              </IconBorder>
+                      : history.push(ADD_NETWORK_ROUTE);
-              <Typography
+                  }}
-                variant={TYPOGRAPHY.H7}
+                >
-                color={COLORS.TEXT_DEFAULT}
+                  <Typography
-                fontWeight={FONT_WEIGHT.BOLD}
+                    variant={TYPOGRAPHY.H7}
-                boxProps={{ marginLeft: 2 }}
+                    color={COLORS.INFO_DEFAULT}
-              >
+                  >
-                {item.nickname}
+                    {t('addMoreNetworks')}.
+                  </Typography>
+                </Button>,
+              ])}
+            </Typography>
+          </Box>
+        </Box>
+      ) : (
+        <Box className="add-network__networks-container">
+          {getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN && (
+            <Box
+              display={DISPLAY.FLEX}
+              alignItems={ALIGN_ITEMS.CENTER}
+              flexDirection={FLEX_DIRECTION.ROW}
+              marginTop={7}
+              marginBottom={4}
+              paddingBottom={2}
+              className="add-network__header"
+            >
+              <Typography variant={TYPOGRAPHY.H4} color={COLORS.TEXT_MUTED}>
+                {t('networks')}
+              </Typography>
+              <span className="add-network__header__subtitle">{'  >  '}</span>
+              <Typography variant={TYPOGRAPHY.H4} color={COLORS.TEXT_DEFAULT}>
+                {t('addANetwork')}
               </Typography>
             </Box>
-            <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.CENTER}>
+          )}
-              {
+          <Box
-                // Warning for the networks that doesn't use infura.io as the RPC
+            margin={
-                !infuraRegex.test(item.rpcUrl) && (
+              getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
-                  <Tooltip
+                ? [0, 0, 1, 0]
-                    className="add-network__warning-tooltip"
+                : [4, 0, 1, 0]
-                    position="top"
+            }
-                    interactive
+            className="add-network__main-container"
-                    html={
+          >
-                      <Box margin={3} className="add-network__warning-tooltip">
+            <Typography
-                        {t('addNetworkTooltipWarning', [
+              variant={TYPOGRAPHY.H6}
-                          <a
+              color={COLORS.TEXT_ALTERNATIVE}
-                            key="zendesk_page_link"
+              margin={[4, 0, 0, 0]}
-                            href="https://metamask.zendesk.com/hc/en-us/articles/4417500466971"
+            >
-                            rel="noreferrer"
+              {t('addFromAListOfPopularNetworks')}
-                            target="_blank"
+            </Typography>
-                          >
+            <Typography
-                            {t('learnMoreUpperCase')}
+              variant={TYPOGRAPHY.H7}
-                          </a>,
+              color={COLORS.TEXT_MUTED}
-                        ])}
+              margin={[4, 0, 3, 0]}
-                      </Box>
+            >
-                    }
+              {t('popularCustomNetworks')}
-                    trigger="mouseenter"
+            </Typography>
-                    theme={theme === THEME_TYPE.DEFAULT ? 'light' : 'dark'}
+            {notFrequentRpcNetworks.map((item, index) => (
-                  >
+              <Box
-                    <i
+                key={index}
-                      className="fa fa-exclamation-triangle add-network__warning-icon"
+                display={DISPLAY.FLEX}
-                      title={t('warning')}
+                alignItems={ALIGN_ITEMS.CENTER}
-                    />
+                justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
-                  </Tooltip>
+                marginBottom={6}
-                )
+                className="add-network__list-of-networks"
-              }
-              <Button
-                type="inline"
-                className="add-network__add-button"
-                onClick={onAddNetworkClick}
               >
-                {t('add')}
+                <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.CENTER}>
-              </Button>
+                  <Box>
-            </Box>
+                    <IconBorder size={24}>
+                      <IconWithFallback
+                        icon={item.rpcPrefs.imageUrl}
+                        name={item.nickname}
+                        size={24}
+                      />
+                    </IconBorder>
+                  </Box>
+                  <Box marginLeft={2}>
+                    <Typography
+                      variant={TYPOGRAPHY.H7}
+                      color={COLORS.TEXT_DEFAULT}
+                      fontWeight={FONT_WEIGHT.BOLD}
+                    >
+                      {item.nickname}
+                    </Typography>
+                  </Box>
+                </Box>
+                <Box
+                  display={DISPLAY.FLEX}
+                  alignItems={ALIGN_ITEMS.CENTER}
+                  marginLeft={1}
+                >
+                  {
+                    // Warning for the networks that doesn't use infura.io as the RPC
+                    !infuraRegex.test(item.rpcUrl) && (
+                      <Tooltip
+                        position="top"
+                        interactive
+                        html={
+                          <Box
+                            margin={3}
+                            className="add-network__warning-tooltip"
+                          >
+                            {t('addNetworkTooltipWarning', [
+                              <a
+                                key="zendesk_page_link"
+                                href="https://metamask.zendesk.com/hc/en-us/articles/4417500466971"
+                                rel="noreferrer"
+                                target="_blank"
+                              >
+                                {t('learnMoreUpperCase')}
+                              </a>,
+                            ])}
+                          </Box>
+                        }
+                        trigger="mouseenter"
+                      >
+                        <i
+                          className="fa fa-exclamation-triangle add-network__warning-icon"
+                          title={t('warning')}
+                        />
+                      </Tooltip>
+                    )
+                  }
+                  <Button
+                    type="inline"
+                    className="add-network__add-button"
+                    onClick={async () => {
+                      await dispatch(requestUserApproval(item, true));
+                    }}
+                  >
+                    {t('add')}
+                  </Button>
+                </Box>
+              </Box>
+            ))}
           </Box>
-        ))}
+          <Box
-      </Box>
+            padding={
-      <Box
+              getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
-        height={BLOCK_SIZES.ONE_TWELFTH}
+                ? [2, 0, 2, 6]
-        padding={[4, 4, 4, 4]}
+                : [2, 0, 2, 0]
-        className="add-network__footer"
+            }
-      >
+            className="add-network__footer"
-        <Button type="link" onClick={onAddNetworkManuallyClick}>
+          >
-          <Typography variant={TYPOGRAPHY.H6} color={COLORS.PRIMARY_DEFAULT}>
+            <Button
-            {t('addANetworkManually')}
+              type="link"
-          </Typography>
+              onClick={(event) => {
-        </Button>
+                event.preventDefault();
-      </Box>
+                getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
-    </Box>
+                  ? global.platform.openExtensionInBrowser(ADD_NETWORK_ROUTE)
+                  : history.push(ADD_NETWORK_ROUTE);
+              }}
+            >
+              <Typography
+                variant={TYPOGRAPHY.H6}
+                color={COLORS.PRIMARY_DEFAULT}
+              >
+                {t('addANetworkManually')}
+              </Typography>
+            </Button>
+          </Box>
+        </Box>
+      )}
+      {showPopover && (
+        <Popover>
+          <ConfirmationPage />
+        </Popover>
+      )}
+    </>
   );
 };
 
-AddNetwork.propTypes = {
-  onBackClick: PropTypes.func,
-  onAddNetworkClick: PropTypes.func,
-  onAddNetworkManuallyClick: PropTypes.func,
-  featuredRPCS: PropTypes.array,
-};
-
 export default AddNetwork;

ui/components/app/add-network/add-network.test.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { renderWithProvider } from '../../../../test/jest';
+import configureStore from '../../../store/store';
+import mockState from '../../../../test/data/mock-state.json';
+import AddNetwork from './add-network';
+
+jest.mock('../../../selectors', () => ({
+  getFrequentRpcListDetail: () => ({
+    frequentRpcList: [
+      {
+        chainId: '0x539',
+        nickname: 'Localhost 8545',
+        rpcPrefs: {},
+        rpcUrl: 'http://localhost:8545',
+        ticker: 'ETH',
+      },
+      {
+        chainId: '0xA4B1',
+        nickname: 'Arbitrum One',
+        rpcPrefs: { blockExplorerUrl: 'https://explorer.arbitrum.io' },
+        rpcUrl:
+          'https://arbitrum-mainnet.infura.io/v3/7e127583378c4732a858df2550aff333',
+        ticker: 'AETH',
+      },
+    ],
+  }),
+  getUnapprovedConfirmations: jest.fn(),
+  getTheme: () => 'light',
+}));
+
+const render = () => {
+  const store = configureStore({
+    metamask: {
+      ...mockState.metamask,
+    },
+  });
+  return renderWithProvider(<AddNetwork />, store);
+};
+
+describe('AddNetwork', () => {
+  it('should show Add from a list.. text', () => {
+    render();
+    expect(
+      screen.getByText(
+        'Add from a list of popular networks or add a network manually. Only interact with the entities you trust.',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('should show Popular custom networks text', () => {
+    render();
+    expect(screen.getByText('Popular custom networks')).toBeInTheDocument();
+  });
+
+  it('should show Arbitrum One network nickname', () => {
+    render();
+    expect(screen.getByText('Arbitrum One')).toBeInTheDocument();
+  });
+});

ui/components/app/add-network/index.scss

@@ -1,10 +1,36 @@
 .add-network {
+  &__networks-container {
+    padding-inline-end: 24px;
+
+    @media screen and (max-width: $break-small) {
+      padding: 0;
+    }
+  }
+
   &__header {
     border-bottom: 1px solid var(--color-border-default);
 
-    &__back-icon {
+    @media screen and (max-width: 575px) {
-      margin-left: 24px;
+      padding-inline-start: 24px;
-      margin-right: 16px;
+      padding-inline-end: 24px;
+    }
+
+    &__subtitle {
+      margin-inline-start: 10px;
+      margin-inline-end: 10px;
+    }
+  }
+
+  &__main-container {
+    @media screen and (max-width: 575px) {
+      padding-inline-start: 24px;
+      padding-inline-end: 24px;
+    }
+  }
+
+  &__list-of-networks {
+    @media screen and (min-width: $break-large) {
+      width: 75%;
     }
   }
 
@@ -23,19 +49,25 @@
 
   &__add-icon {
     color: var(--color-text-alternative);
-    margin-left: auto;
+    margin-inline-start: auto;
-    margin-right: 0;
+    margin-inline-end: 0;
     cursor: pointer;
   }
 
   &__add-button.button {
     color: var(--color-primary-default);
     font-size: $font-size-h7;
-    margin-left: 24px;
+    margin-inline-start: 24px;
   }
 
   &__footer {
     border-top: 1px solid var(--color-border-muted);
+    width: 100%;
+    padding-bottom: 8px;
+
+    @media screen and (max-width: 575px) {
+      padding-inline-start: 24px !important;
+    }
 
     & .btn-link {
       display: initial;
@@ -51,6 +83,14 @@
       color: var(--color-text-alternative);
     }
   }
+
+  &__edge-case-box {
+    border: 1px solid var(--color-border-muted);
+
+    &__link {
+      color: var(--color-info-default);
+      display: inline;
+      padding: 0;
+    }
+  }
 }
-
-

ui/components/app/dropdowns/network-dropdown.js

@@ -20,6 +20,7 @@ import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
 import { EVENT } from '../../../../shared/constants/metametrics';
 import {
   ADD_NETWORK_ROUTE,
+  ADD_POPULAR_CUSTOM_NETWORK,
   ADVANCED_ROUTE,
 } from '../../../helpers/constants/routes';
 import IconCheck from '../../ui/icon/icon-check';
@@ -49,6 +50,7 @@ function mapStateToProps(state) {
     frequentRpcListDetail: state.metamask.frequentRpcListDetail || [],
     networkDropdownOpen: state.appState.networkDropdownOpen,
     showTestnetMessageInDropdown: state.metamask.showTestnetMessageInDropdown,
+    addPopularNetworkFeatureToggledOn: state.metamask.customNetworkListEnabled,
   };
 }
 
@@ -101,6 +103,7 @@ class NetworkDropdown extends Component {
     showTestnetMessageInDropdown: PropTypes.bool.isRequired,
     hideTestNetMessage: PropTypes.func.isRequired,
     history: PropTypes.object,
+    addPopularNetworkFeatureToggledOn: PropTypes.bool,
   };
 
   handleClick(newProviderType) {
@@ -129,10 +132,12 @@ class NetworkDropdown extends Component {
         <Button
           type="secondary"
           onClick={() => {
-            if (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP) {
+            if (this.props.addPopularNetworkFeatureToggledOn) {
-              global.platform.openExtensionInBrowser(ADD_NETWORK_ROUTE);
+              this.props.history.push(ADD_POPULAR_CUSTOM_NETWORK);
             } else {
-              this.props.history.push(ADD_NETWORK_ROUTE);
+              getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
+                ? global.platform.openExtensionInBrowser(ADD_NETWORK_ROUTE)
+                : this.props.history.push(ADD_NETWORK_ROUTE);
             }
             this.props.hideNetworkDropdown();
           }}

ui/components/app/metamask-template-renderer/metamask-template-renderer.js

@@ -43,6 +43,9 @@ const MetaMaskTemplateRenderer = ({ sections }) => {
   return (
     <>
       {sections.reduce((allChildren, child) => {
+        if (child?.hide === true) {
+          return allChildren;
+        }
         if (typeof child === 'string') {
           // React can render strings directly, so push them into the accumulator
           allChildren.push(child);

ui/components/app/metamask-template-renderer/safe-component-list.js

@@ -9,6 +9,8 @@ import MetaMaskTranslation from '../metamask-translation';
 import NetworkDisplay from '../network-display';
 import TextArea from '../../ui/textarea/textarea';
 import ConfirmationNetworkSwitch from '../../../pages/confirmation/components/confirmation-network-switch';
+import UrlIcon from '../../ui/url-icon';
+import Tooltip from '../../ui/tooltip/tooltip';
 
 export const safeComponentList = {
   MetaMaskTranslation,
@@ -27,4 +29,7 @@ export const safeComponentList = {
   NetworkDisplay,
   TextArea,
   ConfirmationNetworkSwitch,
+  UrlIcon,
+  Tooltip,
+  i: 'i',
 };

ui/components/ui/chip/chip.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { omit } from 'lodash';
 import Typography from '../typography';
+import UrlIcon from '../url-icon';
 import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
 
 export default function Chip({
@@ -14,9 +15,11 @@ export default function Chip({
   label,
   labelProps = {},
   leftIcon,
+  leftIconUrl = '',
   rightIcon,
   onClick,
   maxContent = true,
+  displayInlineBlock = false,
 }) {
   const onKeyPress = (event) => {
     if (event.key === 'Enter' && onClick) {
@@ -37,11 +40,17 @@ export default function Chip({
         [`chip--border-color-${borderColor}`]: true,
         [`chip--background-color-${backgroundColor}`]: true,
         'chip--max-content': maxContent,
+        'chip--display-inline-block': displayInlineBlock,
       })}
       role={isInteractive ? 'button' : undefined}
       tabIndex={isInteractive ? 0 : undefined}
     >
-      {leftIcon ? <div className="chip__left-icon">{leftIcon}</div> : null}
+      {leftIcon && !leftIconUrl ? (
+        <div className="chip__left-icon">{leftIcon}</div>
+      ) : null}
+      {leftIconUrl ? (
+        <UrlIcon className="chip__left-url-icon" url={leftIconUrl} />
+      ) : null}
       {children ?? (
         <Typography
           className="chip__label"
@@ -106,4 +115,12 @@ Chip.propTypes = {
    * max-content can overflow the parent's width and break designs
    */
   maxContent: PropTypes.bool,
+  /**
+   * Icon location
+   */
+  leftIconUrl: PropTypes.string,
+  /**
+   * Display or not the inline block
+   */
+  displayInlineBlock: PropTypes.bool,
 };

ui/components/ui/chip/chip.scss

@@ -16,6 +16,10 @@
     align-items: center;
   }
 
+  &__left-url-icon {
+    margin-right: 8px;
+  };
+
   @each $variant, $color in design-system.$color-map {
     &--border-color-#{$variant} {
       border-color: var($color);
@@ -67,4 +71,8 @@
   &--max-content {
     width: max-content;
   }
+
+  &--display-inline-block {
+    display: inline-block;
+  }
 }

ui/components/ui/definition-list/definition-list.js

@@ -7,6 +7,7 @@ import {
   SIZES,
   TYPOGRAPHY,
   FONT_WEIGHT,
+  OVERFLOW_WRAP,
 } from '../../../helpers/constants/design-system';
 import Tooltip from '../tooltip';
 
@@ -60,6 +61,7 @@ export default function DefinitionList({
               marginBottom: MARGIN_MAP[gapSize],
             }}
             className="definition-list__definition"
+            overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
             tag="dd"
           >
             {definition}

ui/ducks/app/app.js

@@ -60,6 +60,7 @@ export default function reduceApp(state = {}, action) {
     newCollectibleAddedMessage: '',
     sendInputCurrencySwitched: false,
     newTokensImported: '',
+    newCustomNetworkAdded: {},
     ...state,
   };
 
@@ -393,6 +394,11 @@ export default function reduceApp(state = {}, action) {
         ...appState,
         sendInputCurrencySwitched: !appState.sendInputCurrencySwitched,
       };
+    case actionConstants.SET_NEW_CUSTOM_NETWORK_ADDED:
+      return {
+        ...appState,
+        newCustomNetworkAdded: action.value,
+      };
     default:
       return appState;
   }
@@ -444,3 +450,7 @@ export function getLedgerTransportStatus(state) {
 export function toggleCurrencySwitch() {
   return { type: actionConstants.TOGGLE_CURRENCY_INPUT_SWITCH };
 }
+
+export function setNewCustomNetworkAdded(value) {
+  return { type: actionConstants.SET_NEW_CUSTOM_NETWORK_ADDED, value };
+}

ui/helpers/constants/routes.js

@@ -12,6 +12,8 @@ const ALERTS_ROUTE = '/settings/alerts';
 const NETWORKS_ROUTE = '/settings/networks';
 const NETWORKS_FORM_ROUTE = '/settings/networks/form';
 const ADD_NETWORK_ROUTE = '/settings/networks/add-network';
+const ADD_POPULAR_CUSTOM_NETWORK =
+  '/settings/networks/add-popular-custom-network';
 const SNAPS_LIST_ROUTE = '/settings/snaps-list';
 const SNAPS_VIEW_ROUTE = '/settings/snaps-view';
 const CONTACT_LIST_ROUTE = '/settings/contact-list';
@@ -113,6 +115,8 @@ const PATH_NAME_MAP = {
   [NETWORKS_ROUTE]: 'Network Settings Page',
   [NETWORKS_FORM_ROUTE]: 'Network Settings Page Form',
   [ADD_NETWORK_ROUTE]: 'Add Network From Settings Page Form',
+  [ADD_POPULAR_CUSTOM_NETWORK]:
+    'Add Network From A List Of Popular Custom Networks',
   [CONTACT_LIST_ROUTE]: 'Contact List Settings Page',
   [`${CONTACT_EDIT_ROUTE}/:address`]: 'Edit Contact Settings Page',
   [CONTACT_ADD_ROUTE]: 'Add Contact Settings Page',
@@ -224,6 +228,7 @@ export {
   NETWORKS_ROUTE,
   NETWORKS_FORM_ROUTE,
   ADD_NETWORK_ROUTE,
+  ADD_POPULAR_CUSTOM_NETWORK,
   INITIALIZE_BACKUP_SEED_PHRASE_ROUTE,
   INITIALIZE_SEED_PHRASE_INTRO_ROUTE,
   CONNECT_ROUTE,

ui/helpers/constants/settings.js

@@ -346,4 +346,11 @@ export const SETTINGS_CONSTANTS = [
     icon: 'fa fa-flask',
     featureFlag: 'COLLECTIBLES_V1',
   },
+  {
+    tabMessage: (t) => t('experimental'),
+    sectionMessage: (t) => t('showCustomNetworkList'),
+    descriptionMessage: (t) => t('showCustomNetworkListDescription'),
+    route: `${EXPERIMENTAL_ROUTE}#show-custom-network`,
+    icon: 'fa fa-flask',
+  },
 ];

ui/helpers/utils/settings-search.test.js

@@ -195,7 +195,7 @@ describe('Settings Search Utils', () => {
 
     it('should get good experimental section number', () => {
       expect(getNumberOfSettingsInSection(t, t('experimental'))).toStrictEqual(
-        3,
+        4,
       );
     });
 

ui/pages/confirmation/confirmation.js

@@ -25,6 +25,7 @@ import { getUnapprovedTemplatedConfirmations } from '../../selectors';
 import NetworkDisplay from '../../components/app/network-display/network-display';
 import Callout from '../../components/ui/callout';
 import SiteOrigin from '../../components/ui/site-origin';
+import { addCustomNetwork } from '../../store/actions';
 import ConfirmationFooter from './components/confirmation-footer';
 import { getTemplateValues, getTemplateAlerts } from './templates';
 
@@ -130,6 +131,7 @@ export default function ConfirmationPage() {
   const pendingConfirmation = pendingConfirmations[currentPendingConfirmation];
   const originMetadata = useOriginMetadata(pendingConfirmation?.origin) || {};
   const [alertState, dismissAlert] = useAlertState(pendingConfirmation);
+  const [stayOnPage, setStayOnPage] = useState(false);
 
   // Generating templatedValues is potentially expensive, and if done on every render
   // will result in a new object. Avoiding calling this generation unnecessarily will
@@ -146,11 +148,11 @@ export default function ConfirmationPage() {
     // confirmations reduces to a number that is less than the currently
     // viewed index, reset the index.
     if (pendingConfirmations.length === 0) {
-      history.push(DEFAULT_ROUTE);
+      !stayOnPage && history.push(DEFAULT_ROUTE);
     } else if (pendingConfirmations.length <= currentPendingConfirmation) {
       setCurrentPendingConfirmation(pendingConfirmations.length - 1);
     }
-  }, [pendingConfirmations, history, currentPendingConfirmation]);
+  }, [pendingConfirmations, history, currentPendingConfirmation, stayOnPage]);
   if (!pendingConfirmation) {
     return null;
   }
@@ -197,23 +199,25 @@ export default function ConfirmationPage() {
             />
           </Box>
         ) : null}
-        <Box
+        {pendingConfirmation.origin === 'metamask' ? null : (
-          alignItems="center"
+          <Box
-          marginTop={1}
+            alignItems="center"
-          padding={[1, 4, 4]}
+            marginTop={1}
-          flexDirection={FLEX_DIRECTION.COLUMN}
+            padding={[1, 4, 4]}
-        >
+            flexDirection={FLEX_DIRECTION.COLUMN}
-          <SiteIcon
+          >
-            icon={originMetadata.iconUrl}
+            <SiteIcon
-            name={originMetadata.hostname}
+              icon={originMetadata.iconUrl}
-            size={36}
+              name={originMetadata.hostname}
-          />
+              size={36}
-          <SiteOrigin
+            />
-            chip
+            <SiteOrigin
-            siteOrigin={stripHttpsScheme(originMetadata.origin)}
+              chip
-            title={stripHttpsScheme(originMetadata.origin)}
+              siteOrigin={stripHttpsScheme(originMetadata.origin)}
-          />
+              title={stripHttpsScheme(originMetadata.origin)}
-        </Box>
+            />
+          </Box>
+        )}
         <MetaMaskTemplateRenderer sections={templatedValues.content} />
       </div>
       <ConfirmationFooter
@@ -234,8 +238,15 @@ export default function ConfirmationPage() {
               </Callout>
             ))
         }
-        onApprove={templatedValues.onApprove}
+        onApprove={() => {
-        onCancel={templatedValues.onCancel}
+          templatedValues.onApprove.apply();
+          pendingConfirmation.origin === 'metamask' &&
+            dispatch(addCustomNetwork(pendingConfirmation.requestData));
+        }}
+        onCancel={() => {
+          templatedValues.onCancel.apply();
+          pendingConfirmation.origin === 'metamask' && setStayOnPage(true);
+        }}
         approveText={templatedValues.approvalText}
         cancelText={templatedValues.cancelText}
       />

ui/pages/confirmation/templates/add-ethereum-chain.js

@@ -1,7 +1,12 @@
 import { ethErrors } from 'eth-rpc-errors';
+import React from 'react';
 import {
   SEVERITIES,
   TYPOGRAPHY,
+  TEXT_ALIGN,
+  JUSTIFY_CONTENT,
+  DISPLAY,
+  COLORS,
 } from '../../../helpers/constants/design-system';
 import fetchWithCache from '../../../helpers/utils/fetch-with-cache';
 
@@ -79,6 +84,11 @@ async function getAlerts(pendingApproval) {
   );
   let validated = Boolean(matchedChain);
 
+  const originIsMetaMask = pendingApproval.origin === 'metamask';
+  if (originIsMetaMask && validated) {
+    return [];
+  }
+
   if (matchedChain) {
     if (
       matchedChain.nativeCurrency?.decimals !== 18 ||
@@ -104,12 +114,39 @@ async function getAlerts(pendingApproval) {
 }
 
 function getValues(pendingApproval, t, actions) {
+  const originIsMetaMask = pendingApproval.origin === 'metamask';
+
   return {
     content: [
+      {
+        hide: !originIsMetaMask,
+        element: 'Box',
+        key: 'network-box',
+        props: {
+          textAlign: TEXT_ALIGN.CENTER,
+          display: DISPLAY.FLEX,
+          justifyContent: JUSTIFY_CONTENT.CENTER,
+          marginTop: 4,
+          marginBottom: 2,
+        },
+        children: [
+          {
+            element: 'Chip',
+            key: 'network-chip',
+            props: {
+              label: pendingApproval.requestData.chainName,
+              backgroundColor: COLORS.BACKGROUND_ALTERNATIVE,
+              leftIconUrl: pendingApproval.requestData.imageUrl,
+            },
+          },
+        ],
+      },
       {
         element: 'Typography',
         key: 'title',
-        children: t('addEthereumChainConfirmationTitle'),
+        children: originIsMetaMask
+          ? t('wantToAddThisNetwork')
+          : t('addEthereumChainConfirmationTitle'),
         props: {
           variant: TYPOGRAPHY.H3,
           align: 'center',
@@ -127,7 +164,7 @@ function getValues(pendingApproval, t, actions) {
           variant: TYPOGRAPHY.H7,
           align: 'center',
           boxProps: {
-            margin: [0, 0, 4],
+            margin: originIsMetaMask ? [0, 8, 4] : [0, 0, 4],
           },
         },
       },
@@ -138,7 +175,55 @@ function getValues(pendingApproval, t, actions) {
           {
             element: 'b',
             key: 'bolded-text',
-            children: `${t('addEthereumChainConfirmationRisks')} `,
+            props: {
+              style: { display: originIsMetaMask && '-webkit-box' },
+            },
+            children: [
+              `${t('addEthereumChainConfirmationRisks')} `,
+              {
+                hide: !originIsMetaMask,
+                element: 'Tooltip',
+                key: 'tooltip-info',
+                props: {
+                  position: 'bottom',
+                  interactive: true,
+                  trigger: 'mouseenter',
+                  html: (
+                    <div
+                      style={{
+                        width: '180px',
+                        margin: '16px',
+                        textAlign: 'left',
+                      }}
+                    >
+                      {t('someNetworksMayPoseSecurity')}{' '}
+                      <a
+                        key="zendesk_page_link"
+                        href="https://metamask.zendesk.com/hc/en-us/articles/4417500466971"
+                        rel="noreferrer"
+                        target="_blank"
+                        style={{ color: 'var(--color-primary-default)' }}
+                      >
+                        {t('learnMoreUpperCase')}
+                      </a>
+                    </div>
+                  ),
+                },
+                children: [
+                  {
+                    element: 'i',
+                    key: 'info-circle',
+                    props: {
+                      className: 'fas fa-info-circle',
+                      style: {
+                        marginLeft: '4px',
+                        color: 'var(--color-icon-default)',
+                      },
+                    },
+                  },
+                ],
+              },
+            ],
           },
           {
             element: 'MetaMaskTranslation',
@@ -164,7 +249,7 @@ function getValues(pendingApproval, t, actions) {
           variant: TYPOGRAPHY.H7,
           align: 'center',
           boxProps: {
-            margin: 0,
+            margin: originIsMetaMask ? [0, 8] : 0,
           },
         },
       },
@@ -205,7 +290,7 @@ function getValues(pendingApproval, t, actions) {
         pendingApproval.id,
         ethErrors.provider.userRejectedRequest().serialize(),
       ),
-    networkDisplay: true,
+    networkDisplay: !originIsMetaMask,
   };
 }
 

ui/pages/home/home.component.js

@@ -26,9 +26,7 @@ import {
   TYPOGRAPHY,
   FONT_WEIGHT,
   DISPLAY,
-  ///: BEGIN:ONLY_INCLUDE_IN(flask)
   COLORS,
-  ///: END:ONLY_INCLUDE_IN
 } from '../../helpers/constants/design-system';
 
 import {
@@ -143,6 +141,9 @@ export default class Home extends PureComponent {
     closeNotificationPopup: PropTypes.func.isRequired,
     newTokensImported: PropTypes.string,
     setNewTokensImported: PropTypes.func.isRequired,
+    newCustomNetworkAdded: PropTypes.object,
+    setNewCustomNetworkAdded: PropTypes.func,
+    setRpcTarget: PropTypes.func,
   };
 
   state = {
@@ -280,6 +281,9 @@ export default class Home extends PureComponent {
       setNewCollectibleAddedMessage,
       newTokensImported,
       setNewTokensImported,
+      newCustomNetworkAdded,
+      setNewCustomNetworkAdded,
+      setRpcTarget,
     } = this.props;
     return (
       <MultipleNotifications>
@@ -479,6 +483,53 @@ export default class Home extends PureComponent {
             key="home-infuraBlockedNotification"
           />
         ) : null}
+        {Object.keys(newCustomNetworkAdded).length !== 0 && (
+          <Popover className="home__new-network-added">
+            <i className="fa fa-check-circle fa-2x home__new-network-added__check-circle" />
+            <Typography
+              variant={TYPOGRAPHY.H4}
+              margin={[5, 9, 0, 9]}
+              fontWeight={FONT_WEIGHT.BOLD}
+            >
+              {t('networkAddedSuccessfully')}
+            </Typography>
+            <Box margin={[8, 8, 5, 8]}>
+              <Button
+                type="primary"
+                className="home__new-network-added__switch-to-button"
+                onClick={() => {
+                  setRpcTarget(
+                    newCustomNetworkAdded.rpcUrl,
+                    newCustomNetworkAdded.chainId,
+                    newCustomNetworkAdded.ticker,
+                    newCustomNetworkAdded.chainName,
+                  );
+                  setNewCustomNetworkAdded();
+                }}
+              >
+                <Typography
+                  variant={TYPOGRAPHY.H6}
+                  fontWeight={FONT_WEIGHT.NORMAL}
+                  color={COLORS.PRIMARY_INVERSE}
+                >
+                  {t('switchToNetwork', [newCustomNetworkAdded.chainName])}
+                </Typography>
+              </Button>
+              <Button
+                type="secondary"
+                onClick={() => setNewCustomNetworkAdded()}
+              >
+                <Typography
+                  variant={TYPOGRAPHY.H6}
+                  fontWeight={FONT_WEIGHT.NORMAL}
+                  color={COLORS.PRIMARY_DEFAULT}
+                >
+                  {t('dismiss')}
+                </Typography>
+              </Button>
+            </Box>
+          </Popover>
+        )}
       </MultipleNotifications>
     );
   }

ui/pages/home/home.container.js

@@ -37,11 +37,16 @@ import {
   setNewNetworkAdded,
   setNewCollectibleAddedMessage,
   setNewTokensImported,
+  setRpcTarget,
   ///: BEGIN:ONLY_INCLUDE_IN(flask)
   removeSnapError,
   ///: END:ONLY_INCLUDE_IN
 } from '../../store/actions';
-import { setThreeBoxLastUpdated, hideWhatsNewPopup } from '../../ducks/app/app';
+import {
+  setThreeBoxLastUpdated,
+  hideWhatsNewPopup,
+  setNewCustomNetworkAdded,
+} from '../../ducks/app/app';
 import { getWeb3ShimUsageAlertEnabledness } from '../../ducks/metamask/metamask';
 import { getSwapsFeatureIsLive } from '../../ducks/swaps/swaps';
 import { getEnvironmentType } from '../../../app/scripts/lib/util';
@@ -138,6 +143,7 @@ const mapStateToProps = (state) => {
     isSigningQRHardwareTransaction,
     newCollectibleAddedMessage: getNewCollectibleAddedMessage(state),
     newTokensImported: getNewTokensImported(state),
+    newCustomNetworkAdded: appState.newCustomNetworkAdded,
   };
 };
 
@@ -180,6 +186,12 @@ const mapDispatchToProps = (dispatch) => ({
   setNewTokensImported: (newTokens) => {
     dispatch(setNewTokensImported(newTokens));
   },
+  setNewCustomNetworkAdded: () => {
+    dispatch(setNewCustomNetworkAdded({}));
+  },
+  setRpcTarget: (rpcUrl, chainId, ticker, nickname) => {
+    dispatch(setRpcTarget(rpcUrl, chainId, ticker, nickname));
+  },
 });
 
 export default compose(

ui/pages/home/index.scss

@@ -207,4 +207,18 @@
       margin-inline-start: 32px;
     }
   }
+
+  &__new-network-added {
+    border-radius: 10px;
+    text-align: center;
+
+    &__check-circle {
+      color: var(--color-success-default);
+      margin-top: 20px;
+    }
+
+    &__switch-to-button {
+      margin-bottom: 16px;
+    }
+  }
 }

ui/pages/settings/experimental-tab/experimental-tab.component.js

@@ -26,6 +26,8 @@ export default class ExperimentalTab extends PureComponent {
     setEIP1559V2Enabled: PropTypes.func,
     theme: PropTypes.string,
     setTheme: PropTypes.func,
+    customNetworkListEnabled: PropTypes.bool,
+    setCustomNetworkListEnabled: PropTypes.func,
   };
 
   settingsRefs = Array(
@@ -284,6 +286,45 @@ export default class ExperimentalTab extends PureComponent {
     );
   }
 
+  renderCustomNetworkListToggle() {
+    const { t } = this.context;
+    const {
+      customNetworkListEnabled,
+      setCustomNetworkListEnabled,
+    } = this.props;
+
+    return (
+      <div ref={this.settingsRefs[5]} className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{t('showCustomNetworkList')}</span>
+          <div className="settings-page__content-description">
+            {t('showCustomNetworkListDescription')}
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <ToggleButton
+              value={customNetworkListEnabled}
+              onToggle={(value) => {
+                this.context.trackEvent({
+                  category: EVENT.CATEGORIES.SETTINGS,
+                  event: 'Enabled/Disable CustomNetworkList',
+                  properties: {
+                    action: 'Enabled/Disable CustomNetworkList',
+                    legacy_event: true,
+                  },
+                });
+                setCustomNetworkListEnabled(!value);
+              }}
+              offLabel={t('off')}
+              onLabel={t('on')}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   render() {
     return (
       <div className="settings-page__body">
@@ -295,6 +336,7 @@ export default class ExperimentalTab extends PureComponent {
         {this.renderCollectibleDetectionToggle()}
         {this.renderEIP1559V2EnabledToggle()}
         {this.renderTheme()}
+        {this.renderCustomNetworkListToggle()}
       </div>
     );
   }

ui/pages/settings/experimental-tab/experimental-tab.container.js

@@ -7,6 +7,7 @@ import {
   setOpenSeaEnabled,
   setEIP1559V2Enabled,
   setTheme,
+  setCustomNetworkListEnabled,
 } from '../../../store/actions';
 import {
   getUseTokenDetection,
@@ -14,6 +15,7 @@ import {
   getOpenSeaEnabled,
   getEIP1559V2Enabled,
   getTheme,
+  getIsCustomNetworkListEnabled,
 } from '../../../selectors';
 import ExperimentalTab from './experimental-tab.component';
 
@@ -26,6 +28,7 @@ const mapStateToProps = (state) => {
     openSeaEnabled: getOpenSeaEnabled(state),
     eip1559V2Enabled: getEIP1559V2Enabled(state),
     theme: getTheme(state),
+    customNetworkListEnabled: getIsCustomNetworkListEnabled(state),
   };
 };
 
@@ -40,6 +43,8 @@ const mapDispatchToProps = (dispatch) => {
     setOpenSeaEnabled: (val) => dispatch(setOpenSeaEnabled(val)),
     setEIP1559V2Enabled: (val) => dispatch(setEIP1559V2Enabled(val)),
     setTheme: (val) => dispatch(setTheme(val)),
+    setCustomNetworkListEnabled: (val) =>
+      dispatch(setCustomNetworkListEnabled(val)),
   };
 };
 

ui/pages/settings/networks-tab/networks-form/networks-form.js

@@ -522,7 +522,6 @@ const NetworksForm = ({
         onConfirm: () => {
           resetForm();
           dispatch(setSelectedSettingsRpcUrl(''));
-          history.push(NETWORKS_ROUTE);
         },
       }),
     );

ui/pages/settings/networks-tab/networks-tab-subheader/networks-tab-subheader.js

@@ -1,18 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
-import { ADD_NETWORK_ROUTE } from '../../../../helpers/constants/routes';
+import {
+  ADD_NETWORK_ROUTE,
+  ADD_POPULAR_CUSTOM_NETWORK,
+} from '../../../../helpers/constants/routes';
 import Button from '../../../../components/ui/button';
+import { getIsCustomNetworkListEnabled } from '../../../../selectors';
 
 const NetworksFormSubheader = ({ addNewNetwork }) => {
   const t = useI18nContext();
   const history = useHistory();
+  const addPopularNetworkFeatureToggledOn = useSelector(
+    getIsCustomNetworkListEnabled,
+  );
+
   return addNewNetwork ? (
     <div className="networks-tab__subheader">
       <span className="networks-tab__sub-header-text">{t('networks')}</span>
+      <span className="networks-tab__sub-header-text">{'  >  '}</span>
+      <div className="networks-tab__sub-header-text">{t('addANetwork')}</div>
       <span>{'  >  '}</span>
-      <div className="networks-tab__subheader--break">{t('addANetwork')}</div>
+      <div className="networks-tab__subheader--break">
+        {t('addANetworkManually')}
+      </div>
     </div>
   ) : (
     <div className="settings-page__sub-header">
@@ -22,7 +35,9 @@ const NetworksFormSubheader = ({ addNewNetwork }) => {
           type="primary"
           onClick={(event) => {
             event.preventDefault();
-            history.push(ADD_NETWORK_ROUTE);
+            addPopularNetworkFeatureToggledOn
+              ? history.push(ADD_POPULAR_CUSTOM_NETWORK)
+              : history.push(ADD_NETWORK_ROUTE);
           }}
         >
           {t('addANetwork')}

ui/pages/settings/networks-tab/networks-tab-subheader/networks-tab-subheader.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
+import { waitFor } from '@testing-library/react';
 import { renderWithProvider } from '../../../../../test/jest/rendering';
 import NetworksTabSubheader from '.';
 
@@ -36,11 +37,11 @@ describe('NetworksTabSubheader Component', () => {
     expect(getByRole('button', { text: 'Add a network' })).toBeDefined();
   });
   it('should render add network form subheader correctly', () => {
-    const { queryByText } = renderComponent({
+    const { queryByText, getAllByText } = renderComponent({
       addNewNetwork: true,
     });
     expect(queryByText('Networks')).toBeInTheDocument();
-    expect(queryByText('>')).toBeInTheDocument();
+    waitFor(() => expect(getAllByText('>')).toBeInTheDocument());
     expect(queryByText('Add a network')).toBeInTheDocument();
   });
 });

ui/pages/settings/networks-tab/networks-tab.js

@@ -1,11 +1,12 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
   ADD_NETWORK_ROUTE,
+  ADD_POPULAR_CUSTOM_NETWORK,
   NETWORKS_FORM_ROUTE,
 } from '../../../helpers/constants/routes';
 import { setSelectedSettingsRpcUrl } from '../../../store/actions';
@@ -14,6 +15,7 @@ import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
 import {
   getFrequentRpcListDetail,
+  getIsCustomNetworkListEnabled,
   getNetworksTabSelectedRpcUrl,
   getProvider,
 } from '../../../selectors';
@@ -36,6 +38,7 @@ const NetworksTab = ({ addNewNetwork }) => {
   const t = useI18nContext();
   const dispatch = useDispatch();
   const { pathname } = useLocation();
+  const history = useHistory();
 
   const environmentType = getEnvironmentType();
   const isFullScreen = environmentType === ENVIRONMENT_TYPE_FULLSCREEN;
@@ -45,6 +48,9 @@ const NetworksTab = ({ addNewNetwork }) => {
   const frequentRpcListDetail = useSelector(getFrequentRpcListDetail);
   const provider = useSelector(getProvider);
   const networksTabSelectedRpcUrl = useSelector(getNetworksTabSelectedRpcUrl);
+  const addPopularNetworkFeatureToggledOn = useSelector(
+    getIsCustomNetworkListEnabled,
+  );
 
   const frequentRpcNetworkListDetails = frequentRpcListDetail.map((rpc) => {
     return {
@@ -118,9 +124,16 @@ const NetworksTab = ({ addNewNetwork }) => {
               <div className="networks-tab__networks-list-popup-footer">
                 <Button
                   type="primary"
-                  onClick={(event) => {
+                  onClick={() => {
-                    event.preventDefault();
+                    if (addPopularNetworkFeatureToggledOn) {
-                    global.platform.openExtensionInBrowser(ADD_NETWORK_ROUTE);
+                      history.push(ADD_POPULAR_CUSTOM_NETWORK);
+                    } else {
+                      isFullScreen
+                        ? history.push(ADD_NETWORK_ROUTE)
+                        : global.platform.openExtensionInBrowser(
+                            ADD_NETWORK_ROUTE,
+                          );
+                    }
                   }}
                 >
                   {t('addNetwork')}

ui/pages/settings/settings.component.js

@@ -23,9 +23,11 @@ import {
   CONTACT_VIEW_ROUTE,
   EXPERIMENTAL_ROUTE,
   ADD_NETWORK_ROUTE,
+  ADD_POPULAR_CUSTOM_NETWORK,
 } from '../../helpers/constants/routes';
 
 import { getSettingsRoutes } from '../../helpers/utils/settings-search';
+import AddNetwork from '../../components/app/add-network/add-network';
 import SettingsTab from './settings-tab';
 import AlertsTab from './alerts-tab';
 import NetworksTab from './networks-tab';
@@ -124,7 +126,6 @@ class SettingsPage extends PureComponent {
             )}
 
             {this.renderTitle()}
-
             <div
               className="settings-page__header__title-container__close-button"
               onClick={() => {
@@ -343,9 +344,15 @@ class SettingsPage extends PureComponent {
           render={() => <NetworksTab addNewNetwork />}
         />
         <Route
+          exact
           path={NETWORKS_ROUTE}
           render={() => <NetworksTab addNewNetwork={false} />}
         />
+        <Route
+          exact
+          path={ADD_POPULAR_CUSTOM_NETWORK}
+          render={() => <AddNetwork />}
+        />
         <Route exact path={SECURITY_ROUTE} component={SecurityTab} />
         <Route exact path={EXPERIMENTAL_ROUTE} component={ExperimentalTab} />
         <Route exact path={CONTACT_LIST_ROUTE} component={ContactListTab} />

ui/pages/settings/settings.container.js

@@ -27,6 +27,7 @@ import {
   ADD_NETWORK_ROUTE,
   SNAPS_LIST_ROUTE,
   SNAPS_VIEW_ROUTE,
+  ADD_POPULAR_CUSTOM_NETWORK,
 } from '../../helpers/constants/routes';
 import Settings from './settings.component';
 
@@ -46,6 +47,7 @@ const ROUTES_TO_I18N_KEYS = {
   [ADD_NETWORK_ROUTE]: 'networks',
   [SECURITY_ROUTE]: 'securityAndPrivacy',
   [EXPERIMENTAL_ROUTE]: 'experimental',
+  [ADD_POPULAR_CUSTOM_NETWORK]: 'addNetwork',
 };
 
 const mapStateToProps = (state, ownProps) => {
@@ -64,6 +66,9 @@ const mapStateToProps = (state, ownProps) => {
     Boolean(pathname.match(NETWORKS_FORM_ROUTE)) ||
     Boolean(pathname.match(ADD_NETWORK_ROUTE));
   const addNewNetwork = Boolean(pathname.match(ADD_NETWORK_ROUTE));
+  const isAddPopularCustomNetwork = Boolean(
+    pathname.match(ADD_POPULAR_CUSTOM_NETWORK),
+  );
 
   const isPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP;
   const pathnameI18nKey = ROUTES_TO_I18N_KEYS[pathname];
@@ -77,6 +82,8 @@ const mapStateToProps = (state, ownProps) => {
     backRoute = NETWORKS_ROUTE;
   } else if (isSnapViewPage) {
     backRoute = SNAPS_LIST_ROUTE;
+  } else if (isAddPopularCustomNetwork) {
+    backRoute = NETWORKS_ROUTE;
   }
 
   let initialBreadCrumbRoute;

ui/selectors/selectors.js

@@ -1062,3 +1062,13 @@ export function getDetectedTokensInCurrentNetwork(state) {
 export function getNewTokensImported(state) {
   return state.appState.newTokensImported;
 }
+
+/**
+ * To get the `customNetworkListEnabled` value which determines whether we use the custom network list
+ *
+ * @param {*} state
+ * @returns Boolean
+ */
+export function getIsCustomNetworkListEnabled(state) {
+  return state.metamask.customNetworkListEnabled;
+}

ui/store/actionConstants.js

@@ -92,6 +92,7 @@ export const SET_SELECTED_SETTINGS_RPC_URL = 'SET_SELECTED_SETTINGS_RPC_URL';
 export const SET_NEW_NETWORK_ADDED = 'SET_NEW_NETWORK_ADDED';
 export const SET_NEW_COLLECTIBLE_ADDED_MESSAGE =
   'SET_NEW_COLLECTIBLE_ADDED_MESSAGE';
+export const SET_NEW_CUSTOM_NETWORK_ADDED = 'SET_NEW_CUSTOM_NETWORK_ADDED';
 
 export const LOADING_METHOD_DATA_STARTED = 'LOADING_METHOD_DATA_STARTED';
 export const LOADING_METHOD_DATA_FINISHED = 'LOADING_METHOD_DATA_FINISHED';

ui/store/actions.js

@@ -42,6 +42,7 @@ import { isEqualCaseInsensitive } from '../../shared/modules/string-utils';
 ///: BEGIN:ONLY_INCLUDE_IN(flask)
 import { NOTIFICATIONS_EXPIRATION_DELAY } from '../helpers/constants/notifications';
 ///: END:ONLY_INCLUDE_IN
+import { setNewCustomNetworkAdded } from '../ducks/app/app';
 import * as actionConstants from './actionConstants';
 
 let background = null;
@@ -3728,6 +3729,18 @@ export function setEnableEIP1559V2NoticeDismissed() {
   return promisifiedBackground.setEnableEIP1559V2NoticeDismissed(true);
 }
 
+export function setCustomNetworkListEnabled(customNetworkListEnabled) {
+  return async () => {
+    try {
+      await promisifiedBackground.setCustomNetworkListEnabled(
+        customNetworkListEnabled,
+      );
+    } catch (error) {
+      log.error(error);
+    }
+  };
+}
+
 // QR Hardware Wallets
 export async function submitQRHardwareCryptoHDKey(cbor) {
   await promisifiedBackground.submitQRHardwareCryptoHDKey(cbor);
@@ -3754,3 +3767,29 @@ export function cancelQRHardwareSignRequest() {
     await promisifiedBackground.cancelQRHardwareSignRequest();
   };
 }
+
+export function addCustomNetwork(customRpc) {
+  return async (dispatch) => {
+    try {
+      dispatch(setNewCustomNetworkAdded(customRpc));
+      await promisifiedBackground.addCustomNetwork(customRpc);
+    } catch (error) {
+      log.error(error);
+      dispatch(displayWarning('Had a problem changing networks!'));
+    }
+  };
+}
+
+export function requestUserApproval(customRpc, originIsMetaMask) {
+  return async (dispatch) => {
+    try {
+      await promisifiedBackground.requestUserApproval(
+        customRpc,
+        originIsMetaMask,
+      );
+    } catch (error) {
+      log.error(error);
+      dispatch(displayWarning('Had a problem changing networks!'));
+    }
+  };
+}