Refactor provider config selector (#18905)

The provider configuration selector has been renamed from `getProvider`
to `getProviderConfig`, and it has been moved from the selectors module
into the MetaMask slice. A JSDoc description has been added as well.

This refactor was done to make a future PR simpler, and to make this
selector better aligned with best practices.

This relates to #18902

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

@@ -18,9 +18,9 @@ import { TOKEN_API_METASWAP_CODEFI_URL } from '../../../../shared/constants/toke
 import fetchWithCache from '../../../../shared/lib/fetch-with-cache';
 import {
   getNativeCurrencyImage,
-  getProvider,
   getUseTokenDetection,
 } from '../../../selectors';
+import { getProviderConfig } from '../../../ducks/metamask/metamask';
 import { IMPORT_TOKEN_ROUTE } from '../../../helpers/constants/routes';
 import Chip from '../chip/chip';
 import { setFirstTimeUsedNetwork } from '../../../store/actions';
@@ -34,22 +34,22 @@ const NewNetworkInfo = () => {
   const [showPopup, setShowPopup] = useState(true);
   const autoDetectToken = useSelector(getUseTokenDetection);
   const primaryTokenImage = useSelector(getNativeCurrencyImage);
-  const currentProvider = useSelector(getProvider);
+  const providerConfig = useSelector(getProviderConfig);
 
   const onCloseClick = () => {
     setShowPopup(false);
-    setFirstTimeUsedNetwork(currentProvider.chainId);
+    setFirstTimeUsedNetwork(providerConfig.chainId);
   };
 
   const addTokenManually = () => {
     history.push(IMPORT_TOKEN_ROUTE);
     setShowPopup(false);
-    setFirstTimeUsedNetwork(currentProvider.chainId);
+    setFirstTimeUsedNetwork(providerConfig.chainId);
   };
 
   const getIsTokenDetectionSupported = async () => {
     const fetchedTokenData = await fetchWithCache(
-      `${TOKEN_API_METASWAP_CODEFI_URL}${currentProvider.chainId}`,
+      `${TOKEN_API_METASWAP_CODEFI_URL}${providerConfig.chainId}`,
     );
 
     return !fetchedTokenData.error;
@@ -93,9 +93,9 @@ const NewNetworkInfo = () => {
         backgroundColor={Color.backgroundAlternative}
         maxContent={false}
         label={
-          currentProvider.type === NETWORK_TYPES.RPC
+          providerConfig.type === NETWORK_TYPES.RPC
-            ? currentProvider.nickname ?? t('privateNetwork')
+            ? providerConfig.nickname ?? t('privateNetwork')
-            : t(currentProvider.type)
+            : t(providerConfig.type)
         }
         labelProps={{
           color: Color.textDefault,
@@ -122,7 +122,7 @@ const NewNetworkInfo = () => {
         {t('thingsToKeep')}
       </Text>
       <Box marginRight={4} marginLeft={5} marginTop={6}>
-        {currentProvider.ticker ? (
+        {providerConfig.ticker ? (
           <Box
             display={DISPLAY.FLEX}
             alignItems={AlignItems.center}
@@ -147,7 +147,7 @@ const NewNetworkInfo = () => {
                   display={DISPLAY.INLINE_BLOCK}
                   key="ticker"
                 >
-                  {currentProvider.ticker}
+                  {providerConfig.ticker}
                 </Text>,
               ])}
             </Text>

ui/ducks/metamask/metamask.js

@@ -230,6 +230,16 @@ 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.
+ * @returns {object} The provider configuration for the current selected network.
+ */
+export function getProviderConfig(state) {
+  return state.metamask.provider;
+}
+
 export const getUnconnectedAccountAlertEnabledness = (state) =>
   getAlertEnabledness(state)[AlertTypes.unconnectedAccount];
 

ui/pages/institutional/custody/custody.js

@@ -40,7 +40,8 @@ import {
   CUSTODY_ACCOUNT_DONE_ROUTE,
   DEFAULT_ROUTE,
 } from '../../../helpers/constants/routes';
-import { getCurrentChainId, getProvider } from '../../../selectors';
+import { getCurrentChainId } from '../../../selectors';
+import { getProviderConfig } from '../../../ducks/metamask/metamask';
 import { getMMIConfiguration } from '../../../selectors/institutional/selectors';
 import CustodyAccountList from '../connect-custody/account-list';
 import JwtUrlForm from '../../../components/institutional/jwt-url-form';
@@ -53,7 +54,7 @@ const CustodyPage = () => {
 
   const mmiActions = mmiActionsFactory();
   const currentChainId = useSelector(getCurrentChainId);
-  const provider = useSelector(getProvider);
+  const providerConfig = useSelector(getProviderConfig);
   const { custodians } = useSelector(getMMIConfiguration);
 
   const [selectedAccounts, setSelectedAccounts] = useState({});
@@ -493,7 +494,7 @@ const CustodyPage = () => {
 
               setSelectedAccounts(selectedAccounts);
             }}
-            provider={provider}
+            provider={providerConfig}
             selectedAccounts={selectedAccounts}
             onAddAccounts={async () => {
               try {

ui/pages/send/gas-display/gas-display.js

@@ -22,7 +22,6 @@ import { NETWORK_TO_NAME_MAP } from '../../../../shared/constants/network';
 import TransactionDetail from '../../../components/app/transaction-detail';
 import ActionableMessage from '../../../components/ui/actionable-message';
 import {
-  getProvider,
   getPreferences,
   getIsBuyableChain,
   transactionFeeSelector,
@@ -32,7 +31,10 @@ import {
 
 import { INSUFFICIENT_TOKENS_ERROR } from '../send.constants';
 import { getCurrentDraftTransaction } from '../../../ducks/send';
-import { getNativeCurrency } from '../../../ducks/metamask/metamask';
+import {
+  getNativeCurrency,
+  getProviderConfig,
+} from '../../../ducks/metamask/metamask';
 import { showModal } from '../../../store/actions';
 import {
   addHexes,
@@ -53,21 +55,21 @@ export default function GasDisplay({ gasError }) {
 
   const { openBuyCryptoInPdapp } = useRamps();
 
-  const currentProvider = useSelector(getProvider);
+  const providerConfig = useSelector(getProviderConfig);
   const isTestnet = useSelector(getIsTestnet);
   const isBuyableChain = useSelector(getIsBuyableChain);
   const draftTransaction = useSelector(getCurrentDraftTransaction);
   const useCurrencyRateCheck = useSelector(getUseCurrencyRateCheck);
   const { showFiatInTestnets, useNativeCurrencyAsPrimaryCurrency } =
     useSelector(getPreferences);
-  const { provider, unapprovedTxs } = useSelector((state) => state.metamask);
+  const { unapprovedTxs } = useSelector((state) => state.metamask);
   const nativeCurrency = useSelector(getNativeCurrency);
-  const { chainId } = provider;
+  const { chainId } = providerConfig;
   const networkName = NETWORK_TO_NAME_MAP[chainId];
   const isInsufficientTokenError =
     draftTransaction?.amount.error === INSUFFICIENT_TOKENS_ERROR;
   const editingTransaction = unapprovedTxs[draftTransaction.id];
-  const currentNetworkName = networkName || currentProvider.nickname;
+  const currentNetworkName = networkName || providerConfig.nickname;
 
   const transactionData = {
     txParams: {

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

@@ -11,7 +11,7 @@ import { NETWORKS_ROUTE } from '../../../../helpers/constants/routes';
 import { setSelectedNetworkConfigurationId } from '../../../../store/actions';
 import { getEnvironmentType } from '../../../../../app/scripts/lib/util';
 import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../../shared/constants/app';
-import { getProvider } from '../../../../selectors';
+import { getProviderConfig } from '../../../../ducks/metamask/metamask';
 import Identicon from '../../../../components/ui/identicon';
 import UrlIcon from '../../../../components/ui/url-icon';
 
@@ -34,7 +34,7 @@ const NetworksListItem = ({
   const dispatch = useDispatch();
   const environmentType = getEnvironmentType();
   const isFullScreen = environmentType === ENVIRONMENT_TYPE_FULLSCREEN;
-  const provider = useSelector(getProvider);
+  const providerConfig = useSelector(getProviderConfig);
   const {
     label,
     labelKey,
@@ -46,10 +46,10 @@ const NetworksListItem = ({
   const listItemNetworkIsSelected =
     selectedNetworkConfigurationId &&
     selectedNetworkConfigurationId === networkConfigurationId;
-  const listItemUrlIsProviderUrl = rpcUrl === provider.rpcUrl;
+  const listItemUrlIsProviderUrl = rpcUrl === providerConfig.rpcUrl;
   const listItemTypeIsProviderNonRpcType =
-    provider.type !== NETWORK_TYPES.RPC &&
+    providerConfig.type !== NETWORK_TYPES.RPC &&
-    currentProviderType === provider.type;
+    currentProviderType === providerConfig.type;
   const listItemNetworkIsCurrentProvider =
     !networkIsSelected &&
     (listItemUrlIsProviderUrl || listItemTypeIsProviderNonRpcType);

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

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import NetworksForm from '../networks-form';
 import NetworksList from '../networks-list';
-import { getProvider } from '../../../../selectors';
+import { getProviderConfig } from '../../../../ducks/metamask/metamask';
 
 import {
   DEFAULT_ROUTE,
@@ -18,7 +18,7 @@ const NetworksTabContent = ({
   selectedNetwork,
   shouldRenderNetworkForm,
 }) => {
-  const provider = useSelector(getProvider);
+  const providerConfig = useSelector(getProviderConfig);
   const history = useHistory();
 
   return (
@@ -31,7 +31,7 @@ const NetworksTabContent = ({
       />
       {shouldRenderNetworkForm ? (
         <NetworksForm
-          isCurrentRpcTarget={provider.rpcUrl === selectedNetwork.rpcUrl}
+          isCurrentRpcTarget={providerConfig.rpcUrl === selectedNetwork.rpcUrl}
           networksToRender={networksToRender}
           selectedNetwork={selectedNetwork}
           submitCallback={() => history.push(DEFAULT_ROUTE)}

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

@@ -17,8 +17,8 @@ import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
 import {
   getNetworkConfigurations,
   getNetworksTabSelectedNetworkConfigurationId,
-  getProvider,
 } from '../../../selectors';
+import { getProviderConfig } from '../../../ducks/metamask/metamask';
 import {
   CHAIN_IDS,
   NETWORK_TYPES,
@@ -52,7 +52,7 @@ const NetworksTab = ({ addNewNetwork }) => {
     window.location.hash.split('#')[2] === 'blockExplorerUrl';
 
   const networkConfigurations = useSelector(getNetworkConfigurations);
-  const provider = useSelector(getProvider);
+  const providerConfig = useSelector(getProviderConfig);
   const networksTabSelectedNetworkConfigurationId = useSelector(
     getNetworksTabSelectedNetworkConfigurationId,
   );
@@ -92,9 +92,9 @@ const NetworksTab = ({ addNewNetwork }) => {
     selectedNetwork =
       networksToRender.find((network) => {
         return (
-          network.rpcUrl === provider.rpcUrl ||
+          network.rpcUrl === providerConfig.rpcUrl ||
           (network.providerType !== NETWORK_TYPES.RPC &&
-            network.providerType === provider.type)
+            network.providerType === providerConfig.type)
         );
       }) || {};
     networkDefaultedToProvider = true;
@@ -130,7 +130,7 @@ const NetworksTab = ({ addNewNetwork }) => {
               networkDefaultedToProvider={networkDefaultedToProvider}
               networkIsSelected={networkIsSelected}
               networksToRender={networksToRender}
-              providerUrl={provider.rpcUrl}
+              providerUrl={providerConfig.rpcUrl}
               selectedNetwork={selectedNetwork}
               shouldRenderNetworkForm={shouldRenderNetworkForm}
             />

ui/selectors/institutional/selectors.js

@@ -1,5 +1,6 @@
 import { toChecksumAddress } from 'ethereumjs-util';
-import { getSelectedIdentity, getAccountType, getProvider } from '../selectors';
+import { getSelectedIdentity, getAccountType } from '../selectors';
+import { getProviderConfig } from '../../ducks/metamask/metamask';
 
 export function getWaitForConfirmDeepLinkDialog(state) {
   return state.metamask.waitForConfirmDeepLinkDialog;
@@ -49,7 +50,7 @@ export function getCustodianIconForAddress(state, address) {
 export function getIsCustodianSupportedChain(state) {
   const selectedIdentity = getSelectedIdentity(state);
   const accountType = getAccountType(state);
-  const provider = getProvider(state);
+  const providerConfig = getProviderConfig(state);
 
   const supportedChains =
     accountType === 'custody'
@@ -58,7 +59,7 @@ export function getIsCustodianSupportedChain(state) {
 
   return supportedChains?.supportedChains
     ? supportedChains.supportedChains.includes(
-        Number(provider.chainId).toString(),
+        Number(providerConfig.chainId).toString(),
       )
     : true;
 }

ui/selectors/selectors.js

@@ -67,6 +67,7 @@ import { DAY } from '../../shared/constants/time';
 import { TERMS_OF_USE_LAST_UPDATED } from '../../shared/constants/terms';
 import {
   getNativeCurrency,
+  getProviderConfig,
   getConversionRate,
   isNotEIP1559Network,
   isEIP1559Network,
@@ -125,7 +126,7 @@ export function getMetaMetricsId(state) {
 }
 
 export function isCurrentProviderCustom(state) {
-  const provider = getProvider(state);
+  const provider = getProviderConfig(state);
   return (
     provider.type === NETWORK_TYPES.RPC &&
     !Object.values(CHAIN_IDS).includes(provider.chainId)
@@ -1152,10 +1153,6 @@ export function getNetworksTabSelectedNetworkConfigurationId(state) {
   return state.appState.selectedNetworkConfigurationId;
 }
 
-export function getProvider(state) {
-  return state.metamask.provider;
-}
-
 export function getNetworkConfigurations(state) {
   return state.metamask.networkConfigurations;
 }