Expand usage of getProviderConfig selector (#18906)

The `getProviderConfig` selector is now used anywhere the `provider`
state was previously referenced directly. This was done to simplify
renaming this state from `provider` to `providerConfig` in a later PR.

Note that there are many opportunities left to use more-specific
selectors (e.g. `getChainId()` over `getProviderConfig().chainId`), but
that was intentionally omitted from this PR to reduce the size. I
started going down this path and it quickly exploded in scope.

Relates to #18902

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

@@ -7,6 +7,7 @@ import { pickBy } from 'lodash';
 import Button from '../../ui/button';
 import * as actions from '../../../store/actions';
 import { openAlert as displayInvalidCustomNetworkAlert } from '../../../ducks/alerts/invalid-custom-network';
+import { getProviderConfig } from '../../../ducks/metamask/metamask';
 import {
   BUILT_IN_NETWORKS,
   CHAIN_ID_TO_RPC_URL_MAP,
@@ -55,7 +56,7 @@ const DROP_DOWN_MENU_ITEM_STYLE = {
 
 function mapStateToProps(state) {
   return {
-    provider: state.metamask.provider,
+    provider: getProviderConfig(state),
     shouldShowTestNetworks: getShowTestNetworks(state),
     networkConfigurations: state.metamask.networkConfigurations,
     networkDropdownOpen: state.appState.networkDropdownOpen,

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

@@ -2,25 +2,23 @@ import { connect } from 'react-redux';
 import { NETWORK_TYPES } from '../../../../shared/constants/network';
 import * as actions from '../../../store/actions';
 import { getNetworkIdentifier, isNetworkLoading } from '../../../selectors';
+import { getProviderConfig } from '../../../ducks/metamask/metamask';
 import LoadingNetworkScreen from './loading-network-screen.component';
 
 const DEPRECATED_TEST_NET_CHAINIDS = ['0x3', '0x2a', '0x4'];
 
 const mapStateToProps = (state) => {
   const { loadingMessage } = state.appState;
-  const { provider } = state.metamask;
+  const provider = getProviderConfig(state);
   const { rpcUrl, chainId, ticker, nickname, type } = provider;
 
   const setProviderArgs =
-    type === NETWORK_TYPES.RPC
+    type === NETWORK_TYPES.RPC ? [rpcUrl, chainId, ticker, nickname] : [type];
-      ? [rpcUrl, chainId, ticker, nickname]
-      : [provider.type];
 
-  const providerChainId = provider?.chainId;
+  const providerChainId = chainId;
   const isDeprecatedNetwork =
     DEPRECATED_TEST_NET_CHAINIDS.includes(providerChainId);
-  const isInfuraRpcUrl =
+  const isInfuraRpcUrl = rpcUrl && new URL(rpcUrl).host.endsWith('.infura.io');
-    provider?.rpcUrl && new URL(provider.rpcUrl).host.endsWith('.infura.io');
   const showDeprecatedRpcUrlWarning = isDeprecatedNetwork && isInfuraRpcUrl;
 
   return {

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

@@ -19,6 +19,7 @@ import Chip from '../../ui/chip/chip';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { isNetworkLoading } from '../../../selectors';
 import { Icon, IconName, IconSize } from '../../component-library';
+import { getProviderConfig } from '../../../ducks/metamask/metamask';
 
 export default function NetworkDisplay({
   indicatorSize,
@@ -28,13 +29,10 @@ export default function NetworkDisplay({
   onClick,
 }) {
   const networkIsLoading = useSelector(isNetworkLoading);
-  const currentNetwork = useSelector((state) => ({
+  const providerConfig = useSelector(getProviderConfig);
-    nickname: state.metamask.provider.nickname,
-    type: state.metamask.provider.type,
-  }));
   const t = useI18nContext();
 
-  const { nickname, type: networkType } = targetNetwork ?? currentNetwork;
+  const { nickname, type: networkType } = targetNetwork ?? providerConfig;
 
   return (
     <Chip

ui/components/app/signature-request-original/signature-request-original.container.js

@@ -23,6 +23,7 @@ import { getMostRecentOverviewPage } from '../../../ducks/history/history';
 import {
   isAddressLedger,
   getNativeCurrency,
+  getProviderConfig,
 } from '../../../ducks/metamask/metamask';
 import SignatureRequestOriginal from './signature-request-original.component';
 
@@ -30,7 +31,7 @@ function mapStateToProps(state, ownProps) {
   const {
     msgParams: { from },
   } = ownProps.txData;
-  const { provider } = state.metamask;
+  const provider = getProviderConfig(state);
 
   const hardwareWalletRequiresConnection =
     doesAddressRequireLedgerHidConnection(state, from);

ui/components/app/signature-request/signature-request.container.js

@@ -17,6 +17,7 @@ import {
 import {
   isAddressLedger,
   getNativeCurrency,
+  getProviderConfig,
 } from '../../../ducks/metamask/metamask';
 import { getAccountByAddress, valuesFor } from '../../../helpers/utils/util';
 import { MESSAGE_TYPE } from '../../../../shared/constants/app';
@@ -30,7 +31,7 @@ function mapStateToProps(state, ownProps) {
   const {
     msgParams: { from },
   } = txData;
-  const { provider } = state.metamask;
+  const provider = getProviderConfig(state);
 
   const hardwareWalletRequiresConnection =
     doesAddressRequireLedgerHidConnection(state, from);

ui/ducks/metamask/metamask.js

@@ -234,7 +234,7 @@ export const getAlertEnabledness = (state) => state.metamask.alertEnabledness;
  * Get the provider configuration for the current selected network.
  *
  * @param {object} state - Redux state object.
- * @returns {object} The provider configuration for the current selected network.
+ * @returns {import('../../../app/scripts/controllers/network/network-controller').NetworkControllerState['provider']} The provider configuration for the current selected network.
  */
 export function getProviderConfig(state) {
   return state.metamask.provider;
@@ -259,12 +259,9 @@ export function getNftsDropdownState(state) {
 
 export const getNfts = (state) => {
   const {
-    metamask: {
+    metamask: { allNfts, selectedAddress },
-      allNfts,
-      provider: { chainId },
-      selectedAddress,
-    },
   } = state;
+  const { chainId } = getProviderConfig(state);
 
   const chainIdAsDecimal = hexToDecimal(chainId);
 
@@ -273,12 +270,9 @@ export const getNfts = (state) => {
 
 export const getNftContracts = (state) => {
   const {
-    metamask: {
+    metamask: { allNftContracts, selectedAddress },
-      allNftContracts,
-      provider: { chainId },
-      selectedAddress,
-    },
   } = state;
+  const { chainId } = getProviderConfig(state);
 
   const chainIdAsDecimal = hexToDecimal(chainId);
 
@@ -297,7 +291,7 @@ export function getNativeCurrency(state) {
   const useCurrencyRateCheck = getUseCurrencyRateCheck(state);
   return useCurrencyRateCheck
     ? state.metamask.nativeCurrency
-    : state.metamask.provider.ticker;
+    : getProviderConfig(state).ticker;
 }
 
 export function getSendHexDataFeatureFlagState(state) {

ui/ducks/send/send.js

@@ -78,6 +78,7 @@ import {
 } from '../../helpers/utils/util';
 import {
   getGasEstimateType,
+  getProviderConfig,
   getTokens,
   getUnapprovedTxs,
 } from '../metamask/metamask';
@@ -1967,7 +1968,7 @@ export function updateRecipientUserInput(userInput) {
 export function updateSendAmount(amount) {
   return async (dispatch, getState) => {
     const state = getState();
-    const { metamask } = state;
+    const { ticker } = getProviderConfig(state);
     const draftTransaction =
       state[name].draftTransactions[state[name].currentTransactionUUID];
     let logAmount = amount;
@@ -1992,9 +1993,7 @@ export function updateSendAmount(amount) {
         toCurrency: EtherDenomination.ETH,
         numberOfDecimals: 8,
       });
-      logAmount = `${ethValue} ${
+      logAmount = `${ethValue} ${ticker || EtherDenomination.ETH}`;
-        metamask?.provider?.ticker || EtherDenomination.ETH
-      }`;
     }
     await dispatch(
       addHistoryEntry(`sendFlow - user set amount to ${logAmount}`),
@@ -2024,6 +2023,7 @@ export function updateSendAsset(
 ) {
   return async (dispatch, getState) => {
     const state = getState();
+    const { ticker } = getProviderConfig(state);
     const draftTransaction =
       state[name].draftTransactions[state[name].currentTransactionUUID];
     const sendingAddress =
@@ -2038,7 +2038,7 @@ export function updateSendAsset(
       await dispatch(
         addHistoryEntry(
           `sendFlow - user set asset of type ${AssetType.native} with symbol ${
-            state.metamask.provider?.ticker ?? EtherDenomination.ETH
+            ticker ?? EtherDenomination.ETH
           }`,
         ),
       );

ui/hooks/experiences/useRamps.ts

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 import { useSelector } from 'react-redux';
+import type { Hex } from '@metamask/utils';
 import { ChainId, CHAIN_IDS } from '../../../shared/constants/network';
 import { getCurrentChainId } from '../../selectors';
 
@@ -13,7 +14,7 @@ const portfolioUrl = process.env.PORTFOLIO_URL;
 const useRamps = (): IUseRamps => {
   const chainId = useSelector(getCurrentChainId);
 
-  const getBuyURI = useCallback((_chainId: ChainId) => {
+  const getBuyURI = useCallback((_chainId: Hex) => {
     switch (_chainId) {
       case CHAIN_IDS.SEPOLIA:
         return 'https://faucet.sepolia.dev/';

ui/hooks/useTransactionInfo.js

@@ -1,14 +1,14 @@
 import { useSelector } from 'react-redux';
+import { getProviderConfig } from '../ducks/metamask/metamask';
 import { hexToDecimal } from '../../shared/modules/conversion.utils';
 
 import { isEqualCaseInsensitive } from '../../shared/modules/string-utils';
 
 export const useTransactionInfo = (txData = {}) => {
-  const {
+  const { allNftContracts, selectedAddress } = useSelector(
-    allNftContracts,
+    (state) => state.metamask,
-    selectedAddress,
+  );
-    provider: { chainId },
+  const { chainId } = useSelector(getProviderConfig);
-  } = useSelector((state) => state.metamask);
 
   const isNftTransfer = Boolean(
     allNftContracts?.[selectedAddress]?.[hexToDecimal(chainId)]?.find(

ui/pages/confirm-signature-request/index.js

@@ -19,6 +19,7 @@ import {
 import { MESSAGE_TYPE } from '../../../shared/constants/app';
 import { TransactionStatus } from '../../../shared/constants/transaction';
 import { getSendTo } from '../../ducks/send';
+import { getProviderConfig } from '../../ducks/metamask/metamask';
 
 const SIGN_MESSAGE_TYPE = {
   MESSAGE: 'message',
@@ -70,8 +71,8 @@ const ConfirmTxScreen = ({ match }) => {
     unapprovedTypedMessages,
     networkId,
     blockGasLimit,
-    provider: { chainId },
   } = useSelector((state) => state.metamask);
+  const { chainId } = useSelector(getProviderConfig);
   const { txId: index } = useSelector((state) => state.appState);
 
   ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)

ui/pages/confirm-transaction-base/confirm-transaction-base.container.js

@@ -46,6 +46,7 @@ import {
   getIsGasEstimatesLoading,
   getNativeCurrency,
   getSendToAccounts,
+  getProviderConfig,
 } from '../../ducks/metamask/metamask';
 import { addHexPrefix } from '../../../app/scripts/lib/util';
 
@@ -104,8 +105,8 @@ const mapStateToProps = (state, ownProps) => {
     networkId,
     unapprovedTxs,
     nextNonce,
-    provider: { chainId },
   } = metamask;
+  const { chainId } = getProviderConfig(state);
   const { tokenData, txData, tokenProps, nonce } = confirmTransaction;
   const { txParams = {}, id: transactionId, type } = txData;
   const txId = transactionId || Number(paramsTransactionId);

ui/pages/confirmation/components/confirmation-network-switch/confirmation-network-switch.js

@@ -18,13 +18,10 @@ import {
   CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
   NETWORK_TO_NAME_MAP,
 } from '../../../../../shared/constants/network';
+import { getProviderConfig } from '../../../../ducks/metamask/metamask';
 
 export default function ConfirmationNetworkSwitch({ newNetwork }) {
-  const currentNetwork = useSelector((state) => ({
+  const { chainId, nickname, type } = useSelector(getProviderConfig);
-    nickname: state.metamask.provider.nickname,
-    type: state.metamask.provider.type,
-    chainId: state.metamask.provider.chainId,
-  }));
 
   return (
     <Box
@@ -38,10 +35,10 @@ export default function ConfirmationNetworkSwitch({ newNetwork }) {
         className="confirmation-network-switch__icon"
         display={DISPLAY.BLOCK}
       >
-        {currentNetwork.chainId in CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP ? (
+        {chainId in CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP ? (
           <SiteIcon
-            icon={CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[currentNetwork.chainId]}
+            icon={CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[chainId]}
-            name={currentNetwork.nickname}
+            name={nickname}
             size={64}
           />
         ) : (
@@ -59,7 +56,7 @@ export default function ConfirmationNetworkSwitch({ newNetwork }) {
             justifyContent: JustifyContent.center,
           }}
         >
-          {currentNetwork.nickname || NETWORK_TO_NAME_MAP[currentNetwork.type]}
+          {nickname || NETWORK_TO_NAME_MAP[type]}
         </Typography>
       </Box>
       <Box

ui/pages/import-token/import-token.container.js

@@ -6,6 +6,7 @@ import {
   getTokenStandardAndDetails,
 } from '../../store/actions';
 import { getMostRecentOverviewPage } from '../../ducks/history/history';
+import { getProviderConfig } from '../../ducks/metamask/metamask';
 import {
   getRpcPrefsForCurrentProvider,
   getIsTokenDetectionSupported,
@@ -23,11 +24,11 @@ const mapStateToProps = (state) => {
       identities,
       tokens,
       pendingTokens,
-      provider: { chainId },
       useTokenDetection,
       selectedAddress,
     },
   } = state;
+  const { chainId } = getProviderConfig(state);
 
   const isTokenDetectionInactiveOnMainnet =
     getIsTokenDetectionInactiveOnMainnet(state);

ui/pages/routes/routes.container.js

@@ -24,6 +24,7 @@ import {
 import { pageChanged } from '../../ducks/history/history';
 import { prepareToLeaveSwaps } from '../../ducks/swaps/swaps';
 import { getSendStage } from '../../ducks/send';
+import { getProviderConfig } from '../../ducks/metamask/metamask';
 import Routes from './routes.component';
 
 function mapStateToProps(state) {
@@ -46,7 +47,7 @@ function mapStateToProps(state) {
     browserEnvironmentOs: state.metamask.browserEnvironment?.os,
     browserEnvironmentContainter: state.metamask.browserEnvironment?.browser,
     providerId: getNetworkIdentifier(state),
-    providerType: state.metamask.provider?.type,
+    providerType: getProviderConfig(state).type,
     theme: getTheme(state),
     sendStage: getSendStage(state),
     isNetworkUsed: getIsNetworkUsed(state),

ui/pages/settings/contact-list-tab/edit-contact/edit-contact.container.js

@@ -2,6 +2,7 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { getAddressBookEntry } from '../../../../selectors';
+import { getProviderConfig } from '../../../../ducks/metamask/metamask';
 import {
   CONTACT_VIEW_ROUTE,
   CONTACT_LIST_ROUTE,
@@ -25,7 +26,7 @@ const mapStateToProps = (state, ownProps) => {
     getAddressBookEntry(state, address) || state.metamask.identities[address];
   const { memo, name } = contact || {};
 
-  const { chainId } = state.metamask.provider;
+  const { chainId } = getProviderConfig(state);
 
   return {
     address: contact ? address : null,

ui/pages/token-details/token-details-page.js

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Redirect, useHistory, useParams } from 'react-router-dom';
-import { getTokens } from '../../ducks/metamask/metamask';
+import { getProviderConfig, getTokens } from '../../ducks/metamask/metamask';
 import { getTokenList } from '../../selectors';
 import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
 import Identicon from '../../components/ui/identicon';
@@ -54,12 +54,7 @@ export default function TokenDetailsPage() {
     token?.symbol,
   );
 
-  const currentNetwork = useSelector((state) => ({
+  const { nickname, type: networkType } = useSelector(getProviderConfig);
-    nickname: state.metamask.provider.nickname,
-    type: state.metamask.provider.type,
-  }));
-
-  const { nickname, type: networkType } = currentNetwork;
 
   const [copied, handleCopy] = useCopyToClipboard();
 

ui/selectors/selectors.js

@@ -101,22 +101,18 @@ export function isNetworkLoading(state) {
 }
 
 export function getNetworkIdentifier(state) {
-  const {
+  const { type, nickname, rpcUrl } = getProviderConfig(state);
-    metamask: {
-      provider: { type, nickname, rpcUrl },
-    },
-  } = state;
 
   return nickname || rpcUrl || type;
 }
 
 export function getMetricsNetworkIdentifier(state) {
-  const { provider } = state.metamask;
+  const provider = getProviderConfig(state);
   return provider.type === NETWORK_TYPES.RPC ? provider.rpcUrl : provider.type;
 }
 
 export function getCurrentChainId(state) {
-  const { chainId } = state.metamask.provider;
+  const { chainId } = getProviderConfig(state);
   return chainId;
 }
 
@@ -658,8 +654,8 @@ export function getTargetSubjectMetadata(state, origin) {
 }
 
 export function getRpcPrefsForCurrentProvider(state) {
-  const { provider: { rpcPrefs = {} } = {} } = state.metamask;
+  const { rpcPrefs } = getProviderConfig(state);
-  return rpcPrefs;
+  return rpcPrefs || {};
 }
 
 export function getKnownMethodData(state, data) {

ui/selectors/selectors.test.js

@@ -35,9 +35,9 @@ describe('Selectors', () => {
   });
 
   describe('#getRpcPrefsForCurrentProvider', () => {
-    it('returns an empty object if state.metamask.provider is undefined', () => {
+    it('returns an empty object if state.metamask.provider is empty', () => {
       expect(
-        selectors.getRpcPrefsForCurrentProvider({ metamask: {} }),
+        selectors.getRpcPrefsForCurrentProvider({ metamask: { provider: {} } }),
       ).toStrictEqual({});
     });
     it('returns rpcPrefs from the provider', () => {

ui/selectors/transactions.js

@@ -11,6 +11,7 @@ import {
 } from '../../shared/constants/transaction';
 import { transactionMatchesNetwork } from '../../shared/modules/transaction.utils';
 import { hexToDecimal } from '../../shared/modules/conversion.utils';
+import { getProviderConfig } from '../ducks/metamask/metamask';
 import {
   getCurrentChainId,
   deprecatedGetCurrentNetworkId,
@@ -28,10 +29,8 @@ export const incomingTxListSelector = (state) => {
     return [];
   }
 
-  const {
+  const { networkId } = state.metamask;
-    networkId,
+  const { chainId } = getProviderConfig(state);
-    provider: { chainId },
-  } = state.metamask;
   const selectedAddress = getSelectedAddress(state);
   return Object.values(state.metamask.incomingTransactions).filter(
     (tx) =>

ui/store/actions.ts

@@ -43,7 +43,10 @@ import {
   DraftTransaction,
 } from '../ducks/send';
 import { switchedToUnconnectedAccount } from '../ducks/alerts/unconnected-account';
-import { getUnconnectedAccountAlertEnabledness } from '../ducks/metamask/metamask';
+import {
+  getProviderConfig,
+  getUnconnectedAccountAlertEnabledness,
+} from '../ducks/metamask/metamask';
 import { toChecksumHexAddress } from '../../shared/modules/hexstring-utils';
 import {
   HardwareDeviceNames,
@@ -1765,13 +1768,15 @@ export function updateMetamaskState(
   newState: MetaMaskReduxState['metamask'],
 ): ThunkAction<void, MetaMaskReduxState, unknown, AnyAction> {
   return (dispatch, getState) => {
-    const { metamask: currentState } = getState();
+    const state = getState();
+    const providerConfig = getProviderConfig(state);
+    const { metamask: currentState } = state;
 
-    const { currentLocale, selectedAddress, provider } = currentState;
+    const { currentLocale, selectedAddress } = currentState;
     const {
       currentLocale: newLocale,
       selectedAddress: newSelectedAddress,
-      provider: newProvider,
+      provider: newProviderConfig,
     } = newState;
 
     if (currentLocale && newLocale && currentLocale !== newLocale) {
@@ -1782,8 +1787,10 @@ export function updateMetamaskState(
       dispatch({ type: actionConstants.SELECTED_ADDRESS_CHANGED });
     }
 
-    const newAddressBook = newState.addressBook?.[newProvider?.chainId] ?? {};
+    const newAddressBook =
-    const oldAddressBook = currentState.addressBook?.[provider?.chainId] ?? {};
+      newState.addressBook?.[newProviderConfig?.chainId] ?? {};
+    const oldAddressBook =
+      currentState.addressBook?.[providerConfig?.chainId] ?? {};
     const newAccounts: { [address: string]: Record<string, any> } =
       getMetaMaskAccounts({ metamask: newState });
     const oldAccounts: { [address: string]: Record<string, any> } =
@@ -1832,10 +1839,10 @@ export function updateMetamaskState(
       type: actionConstants.UPDATE_METAMASK_STATE,
       value: newState,
     });
-    if (provider.chainId !== newProvider.chainId) {
+    if (providerConfig.chainId !== newProviderConfig.chainId) {
       dispatch({
         type: actionConstants.CHAIN_CHANGED,
-        payload: newProvider.chainId,
+        payload: newProviderConfig.chainId,
       });
       // We dispatch this action to ensure that the send state stays up to date
       // after the chain changes. This async thunk will fail gracefully in the
@@ -2615,7 +2622,7 @@ export function addToAddressBook(
   log.debug(`background.addToAddressBook`);
 
   return async (dispatch, getState) => {
-    const { chainId } = getState().metamask.provider;
+    const { chainId } = getProviderConfig(getState());
 
     let set;
     try {