move getProviderConfig out of ducks/metamask.js to `selectors/net…

…works.ts`

`getProviderConfig` is so widely used in the codebase, and makes use of multiple selectors itself, it makes it very complicated to untangle. I've put it in its own file just to, hopefully temporarily, simplify untangling other circular dependency issues.

app/scripts/lib/ppom/ppom-middleware.ts

@@ -15,7 +15,7 @@ import { PreferencesController } from '../../controllers/preferences-controller'
 import { AppStateController } from '../../controllers/app-state-controller';
 import { LOADING_SECURITY_ALERT_RESPONSE } from '../../../../shared/constants/security-provider';
 // eslint-disable-next-line import/no-restricted-paths
-import { getProviderConfig } from '../../../../ui/ducks/metamask/metamask';
+import { getProviderConfig } from '../../../../ui/selectors';
 import { trace, TraceContext, TraceName } from '../../../../shared/lib/trace';
 import {
   generateSecurityAlertId,

app/scripts/lib/ppom/ppom-util.ts

@@ -135,7 +135,7 @@ export async function isChainSupported(chainId: Hex): Promise<boolean> {
       `Error fetching supported chains from security alerts API`,
     );
   }
-  return supportedChainIds.includes(chainId);
+  return supportedChainIds.includes(chainId as Hex);
 }
 
 function normalizePPOMRequest(

app/scripts/metamask-controller.js

@@ -237,10 +237,10 @@ import {
 } from '../../shared/lib/transactions-controller-utils';
 // TODO: Remove restricted import
 // eslint-disable-next-line import/no-restricted-paths
-import { getCurrentChainId } from '../../ui/selectors';
+import { getCurrentChainId } from '../../ui/selectors/selectors';
 // TODO: Remove restricted import
 // eslint-disable-next-line import/no-restricted-paths
-import { getProviderConfig } from '../../ui/ducks/metamask/metamask';
+import { getProviderConfig } from '../../ui/selectors/networks';
 import { endTrace, trace } from '../../shared/lib/trace';
 // eslint-disable-next-line import/no-restricted-paths
 import { isSnapId } from '../../ui/helpers/utils/snaps';

shared/constants/bridge.ts

@@ -13,6 +13,8 @@ export const ALLOWED_BRIDGE_CHAIN_IDS = [
   CHAIN_IDS.BASE,
 ];
 
+export type AllowedBridgeChainIds = (typeof ALLOWED_BRIDGE_CHAIN_IDS)[number];
+
 export const BRIDGE_DEV_API_BASE_URL = 'https://bridge.dev-api.cx.metamask.io';
 export const BRIDGE_PROD_API_BASE_URL = 'https://bridge.api.cx.metamask.io';
 export const BRIDGE_API_BASE_URL = process.env.BRIDGE_USE_DEV_APIS

shared/constants/multichain/networks.ts

@@ -18,6 +18,8 @@ export type MultichainProviderConfig = ProviderConfigWithImageUrl & {
   isAddressCompatible: (address: string) => boolean;
 };
 
+export type MultichainNetworkIds = `${MultichainNetworks}`;
+
 export enum MultichainNetworks {
   BITCOIN = 'bip122:000000000019d6689c085ae165831e93',
   BITCOIN_TESTNET = 'bip122:000000000933ea01ad0ee984209779ba',

shared/constants/network.ts

@@ -87,6 +87,8 @@ export const NETWORK_TYPES = {
   LINEA_MAINNET: 'linea-mainnet',
 } as const;
 
+export type NetworkTypes = (typeof NETWORK_TYPES)[keyof typeof NETWORK_TYPES];
+
 /**
  * An object containing shortcut names for any non-builtin network. We need
  * this to be able to differentiate between networks that require custom

shared/modules/selectors/smart-transactions.ts

@@ -14,9 +14,11 @@ import {
 } from '../../../ui/selectors/selectors'; // TODO: Migrate shared selectors to this file.
 import { isProduction } from '../environment';
 
-// TODO: Remove restricted import
+// TODO: Remove restricted imports
 // eslint-disable-next-line import/no-restricted-paths
 import { MultichainState } from '../../../ui/selectors/multichain';
+// eslint-disable-next-line import/no-restricted-paths
+import { NetworkState } from '../../../ui/selectors/networks';
 
 type SmartTransactionsMetaMaskState = {
   metamask: {
@@ -120,9 +122,7 @@ export const getCurrentChainSupportsSmartTransactions = (
   return getAllowedSmartTransactionsChainIds().includes(chainId);
 };
 
-const getIsAllowedRpcUrlForSmartTransactions = (
-  state: SmartTransactionsMetaMaskState,
-) => {
+const getIsAllowedRpcUrlForSmartTransactions = (state: NetworkState) => {
   const chainId = getCurrentChainId(state);
   if (!isProduction() || SKIP_STX_RPC_URL_CHECK_CHAIN_IDS.includes(chainId)) {
     // Allow any STX RPC URL in development and testing environments or for specific chain IDs.
@@ -151,7 +151,7 @@ const hasNonZeroBalance = (state: SmartTransactionsMetaMaskState) => {
 };
 
 export const getIsSmartTransactionsOptInModalAvailable = (
-  state: SmartTransactionsMetaMaskState,
+  state: SmartTransactionsMetaMaskState & NetworkState,
 ) => {
   return (
     getCurrentChainSupportsSmartTransactions(state) &&
@@ -162,7 +162,7 @@ export const getIsSmartTransactionsOptInModalAvailable = (
 };
 
 export const getSmartTransactionsEnabled = (
-  state: SmartTransactionsMetaMaskState,
+  state: SmartTransactionsMetaMaskState & NetworkState,
 ): boolean => {
   const supportedAccount = accountSupportsSmartTx(state);
   // TODO: Create a new proxy service only for MM feature flags.
@@ -181,7 +181,7 @@ export const getSmartTransactionsEnabled = (
 };
 
 export const getIsSmartTransaction = (
-  state: SmartTransactionsMetaMaskState,
+  state: SmartTransactionsMetaMaskState & NetworkState,
 ): boolean => {
   const smartTransactionsPreferenceEnabled =
     getSmartTransactionsPreferenceEnabled(state);

test/data/mock-state.json

@@ -392,26 +392,30 @@
         "name": "Custom Mainnet RPC",
         "nativeCurrency": "ETH",
         "defaultRpcEndpointIndex": 0,
+        "ticker": "ETH",
         "rpcEndpoints": [
           {
             "type": "custom",
             "url": "https://testrpc.com",
             "networkClientId": "testNetworkConfigurationId"
           }
-        ]
+        ],
+        "blockExplorerUrls": []
       },
       "0x5": {
         "chainId": "0x5",
         "name": "Goerli",
         "nativeCurrency": "ETH",
         "defaultRpcEndpointIndex": 0,
+        "ticker": "ETH",
         "rpcEndpoints": [
           {
             "type": "custom",
             "url": "https://goerli.com",
             "networkClientId": "goerli"
           }
-        ]
+        ],
+        "blockExplorerUrls": []
       }
     },
     "internalAccounts": {

ui/components/app/currency-input/currency-input.js

@@ -5,10 +5,8 @@ import { Box } from '../../component-library';
 import { BlockSize } from '../../../helpers/constants/design-system';
 import UnitInput from '../../ui/unit-input';
 import CurrencyDisplay from '../../ui/currency-display';
-import {
-  getNativeCurrency,
-  getProviderConfig,
-} from '../../../ducks/metamask/metamask';
+import { getNativeCurrency } from '../../../ducks/metamask/metamask';
+import { getProviderConfig } from '../../../selectors/networks';
 import {
   getCurrentChainId,
   getCurrentCurrency,

ui/components/app/loading-network-screen/loading-network-screen.container.js

@@ -6,7 +6,7 @@ import {
   getNetworkIdentifier,
   isNetworkLoading,
 } from '../../../selectors';
-import { getProviderConfig } from '../../../ducks/metamask/metamask';
+import { getProviderConfig } from '../../../selectors/networks';
 import LoadingNetworkScreen from './loading-network-screen.component';
 
 const DEPRECATED_TEST_NET_CHAINIDS = ['0x3', '0x2a', '0x4'];

ui/components/app/modals/transaction-already-confirmed/transaction-already-confirmed.tsx

@@ -2,7 +2,6 @@ import React, { useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { getBlockExplorerLink } from '@metamask/etherscan-link';
 import { type TransactionMeta } from '@metamask/transaction-controller';
-import { type NetworkClientConfiguration } from '@metamask/network-controller';
 import {
   getRpcPrefsForCurrentProvider,
   getTransaction,
@@ -38,19 +37,15 @@ export default function TransactionAlreadyConfirmed() {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       (getTransaction as any)(state, originalTransactionId),
   );
-  const rpcPrefs: NetworkClientConfiguration = useSelector(
-    getRpcPrefsForCurrentProvider,
-  );
+  const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider);
 
   const viewTransaction = () => {
     // TODO: Fix getBlockExplorerLink arguments compatible with the actual controller types
     const blockExplorerLink = getBlockExplorerLink(
       // TODO: Replace `any` with type
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       transaction as any,
-      // TODO: Replace `any` with type
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      rpcPrefs as any,
+      rpcPrefs,
     );
     global.platform.openTab({
       url: blockExplorerLink,

ui/components/app/selected-account/selected-account.container.js

@@ -10,7 +10,7 @@ import {
   getCustodyAccountDetails,
   getIsCustodianSupportedChain,
 } from '../../../selectors/institutional/selectors';
-import { getProviderConfig } from '../../../ducks/metamask/metamask';
+import { getProviderConfig } from '../../../selectors/networks';
 ///: END:ONLY_INCLUDE_IF
 import SelectedAccount from './selected-account.component';
 

ui/components/institutional/wrong-network-notification/wrong-network-notification.tsx

@@ -11,16 +11,13 @@ import {
 import { getSelectedAccountCachedBalance } from '../../../selectors';
 import { getIsCustodianSupportedChain } from '../../../selectors/institutional/selectors';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import { getProviderConfig } from '../../../ducks/metamask/metamask';
+import { getProviderConfig } from '../../../selectors/networks';
 import { Icon, IconName, IconSize, Box, Text } from '../../component-library';
 
 const WrongNetworkNotification: React.FC = () => {
   const t = useI18nContext();
-  const providerConfig = useSelector<
-    object,
-    { nickname?: string; type: string } | undefined
-  >(getProviderConfig);
-  const balance = useSelector(getSelectedAccountCachedBalance);
+  const providerConfig = useSelector(getProviderConfig);
+  const balance = useSelector<string | null>(getSelectedAccountCachedBalance);
 
   const isCustodianSupportedChain = useSelector(getIsCustodianSupportedChain);
 

ui/components/multichain/address-copy-button/address-copy-button.js

@@ -8,7 +8,7 @@ import {
   getIsCustodianSupportedChain,
   getCustodianIconForAddress,
 } from '../../../selectors/institutional/selectors';
-import { getProviderConfig } from '../../../ducks/metamask/metamask';
+import { getProviderConfig } from '../../../selectors/networks';
 ///: END:ONLY_INCLUDE_IF
 import { ButtonBase, IconName, Box } from '../../component-library';
 import {

ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal-network.tsx

@@ -19,8 +19,10 @@ import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../../shared/constan
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 ///: END:ONLY_INCLUDE_IF
 import { NetworkListItem } from '../../network-list-item';
-import { getNetworkConfigurationsByChainId } from '../../../../selectors';
-import { getProviderConfig } from '../../../../ducks/metamask/metamask';
+import {
+  getNetworkConfigurationsByChainId,
+  getProviderConfig,
+} from '../../../../selectors';
 
 /**
  * AssetPickerModalNetwork component displays a modal for selecting a network in the asset picker.

ui/components/ui/new-network-info/new-network-info.js

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { TOKEN_API_METASWAP_CODEFI_URL } from '../../../../shared/constants/tokens';
 import fetchWithCache from '../../../../shared/lib/fetch-with-cache';
 import { I18nContext } from '../../../contexts/i18n';
-import { getProviderConfig } from '../../../ducks/metamask/metamask';
+import { getProviderConfig } from '../../../selectors/networks';
 import {
   AlignItems,
   BackgroundColor,

ui/ducks/bridge/selectors.ts

@@ -1,10 +1,6 @@
-import {
-  NetworkConfiguration,
-  NetworkState,
-} from '@metamask/network-controller';
+import { NetworkConfiguration } from '@metamask/network-controller';
 import { uniqBy } from 'lodash';
 import {
-  getNetworkConfigurationsByChainId,
   getIsBridgeEnabled,
   getSwapsDefaultToken,
   SwapsEthToken,
@@ -17,12 +13,17 @@ import {
   // eslint-disable-next-line import/no-restricted-paths
 } from '../../../app/scripts/controllers/bridge/types';
 import { createDeepEqualSelector } from '../../selectors/util';
-import { getProviderConfig } from '../metamask/metamask';
+import {
+  NetworkState,
+  getProviderConfig,
+  getNetworkConfigurationsByChainId,
+} from '../../selectors/networks';
 import { SwapsTokenObject } from '../../../shared/constants/swaps';
 import { BridgeState } from './bridge';
 
-type BridgeAppState = {
-  metamask: NetworkState & { bridgeState: BridgeControllerState } & {
+// TODO add swaps state
+type BridgeAppState = NetworkState & {
+  metamask: { bridgeState: BridgeControllerState } & {
     useExternalServices: boolean;
   };
   bridge: BridgeState;

ui/ducks/metamask/metamask.js

@@ -1,7 +1,6 @@
 import { addHexPrefix, isHexString } from 'ethereumjs-util';
 import { createSelector } from 'reselect';
 import { mergeGasFeeEstimates } from '@metamask/transaction-controller';
-import { RpcEndpointType } from '@metamask/network-controller';
 import { AlertTypes } from '../../../shared/constants/alerts';
 import {
   GasEstimateTypes,
@@ -16,9 +15,11 @@ import {
   accountsWithSendEtherInfoSelector,
   checkNetworkAndAccountSupports1559,
   getAddressBook,
-  getSelectedNetworkClientId,
-  getNetworkConfigurationsByChainId,
 } from '../../selectors/selectors';
+import {
+  getProviderConfig,
+  getSelectedNetworkClientId,
+} from '../../selectors/networks';
 import { getSelectedInternalAccount } from '../../selectors/accounts';
 import * as actionConstants from '../../store/actionConstants';
 import { updateTransactionGasFees } from '../../store/actions';
@@ -274,42 +275,6 @@ export function updateGasFees({
 
 export const getAlertEnabledness = (state) => state.metamask.alertEnabledness;
 
-/**
- * Get the provider configuration for the current selected network.
- *
- * @param {object} state - Redux state object.
- */
-export const getProviderConfig = createSelector(
-  (state) => getNetworkConfigurationsByChainId(state),
-  (state) => getSelectedNetworkClientId(state),
-  (networkConfigurationsByChainId, selectedNetworkClientId) => {
-    for (const network of Object.values(networkConfigurationsByChainId)) {
-      for (const rpcEndpoint of network.rpcEndpoints) {
-        if (rpcEndpoint.networkClientId === selectedNetworkClientId) {
-          const blockExplorerUrl =
-            network.blockExplorerUrls?.[network.defaultBlockExplorerUrlIndex];
-
-          return {
-            chainId: network.chainId,
-            ticker: network.nativeCurrency,
-            rpcPrefs: { ...(blockExplorerUrl && { blockExplorerUrl }) },
-            type:
-              rpcEndpoint.type === RpcEndpointType.Custom
-                ? 'rpc'
-                : rpcEndpoint.networkClientId,
-            ...(rpcEndpoint.type === RpcEndpointType.Custom && {
-              id: rpcEndpoint.networkClientId,
-              nickname: network.name,
-              rpcUrl: rpcEndpoint.url,
-            }),
-          };
-        }
-      }
-    }
-    return undefined; // should not be reachable
-  },
-);
-
 export const getUnconnectedAccountAlertEnabledness = (state) =>
   getAlertEnabledness(state)[AlertTypes.unconnectedAccount];
 

ui/ducks/send/send.js

@@ -101,9 +101,9 @@ import {
 import {
   getGasEstimateType,
   getNativeCurrency,
-  getProviderConfig,
   getTokens,
 } from '../metamask/metamask';
+import { getProviderConfig } from '../../selectors/networks';
 
 import { resetDomainResolution } from '../domains';
 import {

ui/hooks/bridge/useBridging.ts

@@ -13,6 +13,9 @@ import {
   SwapsEthToken,
   ///: END:ONLY_INCLUDE_IF
 } from '../../selectors';
+///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
+import { getProviderConfig } from '../../selectors/networks';
+///: END:ONLY_INCLUDE_IF
 import { MetaMetricsContext } from '../../contexts/metametrics';
 import {
   MetaMetricsEventCategory,
@@ -30,7 +33,6 @@ import { isHardwareKeyring } from '../../helpers/utils/hardware';
 import { getPortfolioUrl } from '../../helpers/utils/portfolio';
 import { setSwapsFromToken } from '../../ducks/swaps/swaps';
 import { SwapsTokenObject } from '../../../shared/constants/swaps';
-import { getProviderConfig } from '../../ducks/metamask/metamask';
 ///: END:ONLY_INCLUDE_IF
 
 const useBridging = () => {