Fix built-in networks switch-ethereum-chain, Including RPC url in switchEthereumChain requestData (#11268)

* Moving RPC Urls to network constants

* Including RPC url in switchEthereumChain requestData

* Setting project id to var

* Fix built-in networks switch-ethereum-chain

`switch-ethereum-chain` did not work correctly with built-in networks.
It was treating them as custom networks, rather than as built-in
networks. This affected how they were displayed in the network
dropdown, and resulted in slight differences to the network stack used
as well.

The problem was that `updateRpcTarget` was used, which was meant for
custom networks only. Now that `setProviderType` is used in the case of
a built-in network, the behaviour should match the network switcher
exactly.

Co-authored-by: Mark Stacey <markjstacey@gmail.com>

app/scripts/lib/rpc-method-middleware/handlers/switch-ethereum-chain.js

@@ -5,6 +5,7 @@ import {
   ETH_SYMBOL,
   CHAIN_ID_TO_TYPE_MAP,
   NETWORK_TO_NAME_MAP,
+  CHAIN_ID_TO_RPC_URL_MAP,
 } from '../../../../../shared/constants/network';
 import {
   isPrefixedFormattedHexString,
@@ -21,8 +22,10 @@ function findExistingNetwork(chainId, findCustomRpcBy) {
   if (chainId in CHAIN_ID_TO_TYPE_MAP) {
     return {
       chainId,
-      nickname: NETWORK_TO_NAME_MAP[chainId],
       ticker: ETH_SYMBOL,
+      nickname: NETWORK_TO_NAME_MAP[chainId],
+      rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[chainId],
+      type: CHAIN_ID_TO_TYPE_MAP[chainId],
     };
   }
 
@@ -34,7 +37,13 @@ async function switchEthereumChainHandler(
   res,
   _next,
   end,
-  { getCurrentChainId, findCustomRpcBy, updateRpcTarget, requestUserApproval },
+  {
+    getCurrentChainId,
+    findCustomRpcBy,
+    setProviderType,
+    updateRpcTarget,
+    requestUserApproval,
+  },
 ) {
   if (!req.params?.[0] || typeof req.params[0] !== 'object') {
     return end(
@@ -78,26 +87,24 @@ async function switchEthereumChainHandler(
     );
   }
 
-  const existingNetwork = findExistingNetwork(_chainId, findCustomRpcBy);
-
-  if (existingNetwork) {
+  const requestData = findExistingNetwork(_chainId, findCustomRpcBy);
+  if (requestData) {
     const currentChainId = getCurrentChainId();
     if (currentChainId === _chainId) {
       res.result = null;
       return end();
     }
     try {
-      await updateRpcTarget(
-        await requestUserApproval({
-          origin,
-          type: MESSAGE_TYPE.SWITCH_ETHEREUM_CHAIN,
-          requestData: {
-            chainId: existingNetwork.chainId,
-            nickname: existingNetwork.nickname,
-            ticker: existingNetwork.ticker,
-          },
-        }),
-      );
+      const approvedRequestData = await requestUserApproval({
+        origin,
+        type: MESSAGE_TYPE.SWITCH_ETHEREUM_CHAIN,
+        requestData,
+      });
+      if (chainId in CHAIN_ID_TO_TYPE_MAP) {
+        setProviderType(approvedRequestData.type);
+      } else {
+        await updateRpcTarget(approvedRequestData);
+      }
       res.result = null;
     } catch (error) {
       return end(error);

app/scripts/metamask-controller.js

@@ -2217,6 +2217,9 @@ export default class MetamaskController extends EventEmitter {
             nickname,
           );
         },
+        setProviderType: this.networkController.setProviderType.bind(
+          this.networkController,
+        ),
         addCustomRpc: async ({
           chainId,
           blockExplorerUrl,

shared/constants/network.js

@@ -32,6 +32,16 @@ export const KOVAN_DISPLAY_NAME = 'Kovan';
 export const MAINNET_DISPLAY_NAME = 'Ethereum Mainnet';
 export const GOERLI_DISPLAY_NAME = 'Goerli';
 
+const infuraProjectId = process.env.INFURA_PROJECT_ID;
+const getRpcUrl = (network) =>
+  `https://${network}.infura.io/v3/${infuraProjectId}`;
+
+export const ROPSTEN_RPC_URL = getRpcUrl('ropsten');
+export const RINKEBY_RPC_URL = getRpcUrl('rinkeby');
+export const KOVAN_RPC_URL = getRpcUrl('kovan');
+export const MAINNET_RPC_URL = getRpcUrl('mainnet');
+export const GOERLI_RPC_URL = getRpcUrl('goerli');
+
 export const ETH_SYMBOL = 'ETH';
 export const WETH_SYMBOL = 'WETH';
 export const TEST_ETH_SYMBOL = 'TESTETH';
@@ -50,6 +60,9 @@ export const TEST_CHAINS = [
   KOVAN_CHAIN_ID,
 ];
 
+/**
+ * Map of all build-in Infura networks to their network and chain IDs.
+ */
 export const NETWORK_TYPE_TO_ID_MAP = {
   [ROPSTEN]: { networkId: ROPSTEN_NETWORK_ID, chainId: ROPSTEN_CHAIN_ID },
   [RINKEBY]: { networkId: RINKEBY_NETWORK_ID, chainId: RINKEBY_CHAIN_ID },
@@ -85,6 +98,14 @@ export const CHAIN_ID_TO_TYPE_MAP = Object.entries(
   return chainIdToTypeMap;
 }, {});
 
+export const CHAIN_ID_TO_RPC_URL_MAP = {
+  [ROPSTEN_CHAIN_ID]: ROPSTEN_RPC_URL,
+  [RINKEBY_CHAIN_ID]: RINKEBY_RPC_URL,
+  [KOVAN_CHAIN_ID]: KOVAN_RPC_URL,
+  [GOERLI_CHAIN_ID]: GOERLI_RPC_URL,
+  [MAINNET_CHAIN_ID]: MAINNET_RPC_URL,
+};
+
 export const CHAIN_ID_TO_NETWORK_ID_MAP = Object.values(
   NETWORK_TYPE_TO_ID_MAP,
 ).reduce((chainIdToNetworkIdMap, { chainId, networkId }) => {

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

@@ -1,8 +1,5 @@
 import { ethErrors } from 'eth-rpc-errors';
-import {
-  CHAIN_ID_TO_TYPE_MAP,
-  NETWORK_TYPE_RPC,
-} from '../../../../shared/constants/network';
+import { NETWORK_TYPE_RPC } from '../../../../shared/constants/network';
 import {
   JUSTIFY_CONTENT,
   SEVERITIES,
@@ -27,14 +24,6 @@ async function getAlerts() {
   return [PENDING_TX_DROP_NOTICE];
 }
 
-function getNetworkType(chainId) {
-  if (chainId in CHAIN_ID_TO_TYPE_MAP) {
-    return CHAIN_ID_TO_TYPE_MAP[chainId];
-  }
-
-  return NETWORK_TYPE_RPC;
-}
-
 function getValues(pendingApproval, t, actions) {
   return {
     content: [
@@ -76,7 +65,7 @@ function getValues(pendingApproval, t, actions) {
             colored: false,
             outline: true,
             targetNetwork: {
-              type: getNetworkType(pendingApproval.requestData.chainId),
+              type: pendingApproval.requestData.type || NETWORK_TYPE_RPC,
               nickname: pendingApproval.requestData.nickname,
             },
           },

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

@@ -1,14 +1,19 @@
 import {
   GOERLI,
   GOERLI_CHAIN_ID,
+  GOERLI_RPC_URL,
   KOVAN,
   KOVAN_CHAIN_ID,
+  KOVAN_RPC_URL,
   MAINNET,
   MAINNET_CHAIN_ID,
+  MAINNET_RPC_URL,
   RINKEBY,
   RINKEBY_CHAIN_ID,
+  RINKEBY_RPC_URL,
   ROPSTEN,
   ROPSTEN_CHAIN_ID,
+  ROPSTEN_RPC_URL,
 } from '../../../../shared/constants/network';
 
 const defaultNetworksData = [
@@ -16,7 +21,7 @@ const defaultNetworksData = [
     labelKey: MAINNET,
     iconColor: '#29B6AF',
     providerType: MAINNET,
-    rpcUrl: `https://mainnet.infura.io/v3/${process.env.INFURA_PROJECT_ID}`,
+    rpcUrl: MAINNET_RPC_URL,
     chainId: MAINNET_CHAIN_ID,
     ticker: 'ETH',
     blockExplorerUrl: 'https://etherscan.io',
@@ -25,7 +30,7 @@ const defaultNetworksData = [
     labelKey: ROPSTEN,
     iconColor: '#FF4A8D',
     providerType: ROPSTEN,
-    rpcUrl: `https://ropsten.infura.io/v3/${process.env.INFURA_PROJECT_ID}`,
+    rpcUrl: ROPSTEN_RPC_URL,
     chainId: ROPSTEN_CHAIN_ID,
     ticker: 'ETH',
     blockExplorerUrl: 'https://ropsten.etherscan.io',
@@ -34,7 +39,7 @@ const defaultNetworksData = [
     labelKey: RINKEBY,
     iconColor: '#F6C343',
     providerType: RINKEBY,
-    rpcUrl: `https://rinkeby.infura.io/v3/${process.env.INFURA_PROJECT_ID}`,
+    rpcUrl: RINKEBY_RPC_URL,
     chainId: RINKEBY_CHAIN_ID,
     ticker: 'ETH',
     blockExplorerUrl: 'https://rinkeby.etherscan.io',
@@ -43,7 +48,7 @@ const defaultNetworksData = [
     labelKey: GOERLI,
     iconColor: '#3099f2',
     providerType: GOERLI,
-    rpcUrl: `https://goerli.infura.io/v3/${process.env.INFURA_PROJECT_ID}`,
+    rpcUrl: GOERLI_RPC_URL,
     chainId: GOERLI_CHAIN_ID,
     ticker: 'ETH',
     blockExplorerUrl: 'https://goerli.etherscan.io',
@@ -52,7 +57,7 @@ const defaultNetworksData = [
     labelKey: KOVAN,
     iconColor: '#9064FF',
     providerType: KOVAN,
-    rpcUrl: `https://kovan.infura.io/v3/${process.env.INFURA_PROJECT_ID}`,
+    rpcUrl: KOVAN_RPC_URL,
     chainId: KOVAN_CHAIN_ID,
     ticker: 'ETH',
     blockExplorerUrl: 'https://kovan.etherscan.io',