refactor: Consistent provider config naming

The `providerConfig` property of the `NetworkController` used to be named `provider`, which was very easily confused with the `provider` instance (and with various other things that we call "provider"). When that renaming happened, not all local variables and function names were updated accordingly. All references to `providerConfig` now use the term "providerConfig". This change was done to simplify PR #6872, which is part of MetaMask/mobile-planning#798
MetaMask · Jul 24, 2023 · da122aa · da122aa
1 parent 7760842
commit da122aa
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 56 deletions.
diff --git a/app/components/Nav/Main/MainNavigator.js b/app/components/Nav/Main/MainNavigator.js
@@ -304,8 +304,8 @@ const HomeTabs = () => {
   const accountsLength = useSelector(selectAccountsLength);
 
   const chainId = useSelector((state) => {
-    const provider = selectProviderConfig(state);
-    return NetworksChainId[provider.type];
+    const providerConfig = selectProviderConfig(state);
+    return NetworksChainId[providerConfig.type];
   });
 
   const amountOfBrowserOpenTabs = useSelector(

diff --git a/app/components/Nav/Main/index.js b/app/components/Nav/Main/index.js
@@ -55,7 +55,7 @@ import usePrevious from '../../hooks/usePrevious';
 import { colors as importedColors } from '../../../styles/common';
 import {
   getNetworkImageSource,
-  getNetworkNameFromProvider,
+  getNetworkNameFromProviderConfig,
 } from '../../../util/networks';
 import {
   ToastContext,
@@ -222,23 +222,23 @@ const Main = (props) => {
   /**
    * Current network
    */
-  const networkProvider = useSelector(selectProviderConfig);
-  const prevNetworkProvider = useRef(undefined);
+  const providerConfig = useSelector(selectProviderConfig);
+  const previousProviderConfig = useRef(undefined);
   const { toastRef } = useContext(ToastContext);
 
   // Show network switch confirmation.
   useEffect(() => {
     if (
-      prevNetworkProvider.current &&
-      (networkProvider.chainId !== prevNetworkProvider.current.chainId ||
-        networkProvider.type !== prevNetworkProvider.current.type)
+      previousProviderConfig.current &&
+      (providerConfig.chainId !== previousProviderConfig.current.chainId ||
+        providerConfig.type !== previousProviderConfig.current.type)
     ) {
-      const { type, chainId } = networkProvider;
+      const { type, chainId } = providerConfig;
       const networkImage = getNetworkImageSource({
         networkType: type,
         chainId,
       });
-      const networkName = getNetworkNameFromProvider(networkProvider);
+      const networkName = getNetworkNameFromProviderConfig(providerConfig);
       toastRef?.current?.showToast({
         variant: ToastVariants.Network,
         labelOptions: [
@@ -252,8 +252,8 @@ const Main = (props) => {
         networkImageSource: networkImage,
       });
     }
-    prevNetworkProvider.current = networkProvider;
-  }, [networkProvider, toastRef]);
+    previousProviderConfig.current = providerConfig;
+  }, [providerConfig, toastRef]);
 
   useEffect(() => {
     if (locale.current !== I18n.locale) {

diff --git a/app/components/UI/AccountRightButton/index.tsx b/app/components/UI/AccountRightButton/index.tsx
@@ -26,14 +26,13 @@ import Avatar, {
 } from '../../../component-library/components/Avatars/Avatar';
 import {
   getNetworkImageSource,
-  getNetworkNameFromProvider,
+  getNetworkNameFromProviderConfig,
 } from '../../../util/networks';
 import Badge, {
   BadgeVariant,
 } from '../../../component-library/components/Badges/Badge';
 import BadgeWrapper from '../../../component-library/components/Badges/BadgeWrapper';
 import { selectProviderConfig } from '../../../selectors/networkController';
-import { ProviderConfig } from '@metamask/network-controller';
 import Routes from '../../../constants/navigation/Routes';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 import Analytics from '../../../core/Analytics/Analytics';
@@ -76,7 +75,7 @@ const AccountRightButton = ({
   /**
    * Current network
    */
-  const networkProvider: ProviderConfig = useSelector(selectProviderConfig);
+  const providerConfig = useSelector(selectProviderConfig);
 
   const handleKeyboardVisibility = useCallback(
     (visibility: boolean) => () => {
@@ -125,7 +124,7 @@ const AccountRightButton = ({
       Analytics.trackEventWithParameters(
         MetaMetricsEvents.NETWORK_SELECTOR_PRESSED,
         {
-          chain_id: networkProvider.chainId,
+          chain_id: providerConfig.chainId,
         },
       );
     } else {
@@ -137,21 +136,21 @@ const AccountRightButton = ({
     isNetworkVisible,
     onPress,
     navigate,
-    networkProvider.chainId,
+    providerConfig.chainId,
   ]);
 
   const networkName = useMemo(
-    () => getNetworkNameFromProvider(networkProvider),
-    [networkProvider],
+    () => getNetworkNameFromProviderConfig(providerConfig),
+    [providerConfig],
   );
 
   const networkImageSource = useMemo(
     () =>
       getNetworkImageSource({
-        networkType: networkProvider.type,
-        chainId: networkProvider.chainId,
+        networkType: providerConfig.type,
+        chainId: providerConfig.chainId,
       }),
-    [networkProvider],
+    [providerConfig],
   );
 
   const renderAvatarAccount = () => (

diff --git a/app/components/UI/ApproveTransactionHeader/ApproveTransactionHeader.tsx b/app/components/UI/ApproveTransactionHeader/ApproveTransactionHeader.tsx
@@ -20,7 +20,7 @@ import {
 } from '../../../util/browser';
 import {
   getNetworkImageSource,
-  getNetworkNameFromProvider,
+  getNetworkNameFromProviderConfig,
 } from '../../../util/networks';
 import { WALLET_CONNECT_ORIGIN } from '../../../util/walletconnect';
 import useAddressBalance from '../../hooks/useAddressBalance/useAddressBalance';
@@ -53,8 +53,8 @@ const ApproveTransactionHeader = ({
   const identities = useSelector(selectIdentities);
   const activeAddress = toChecksumAddress(from);
 
-  const networkProvider = useSelector(selectProviderConfig);
-  const networkName = getNetworkNameFromProvider(networkProvider);
+  const providerConfig = useSelector(selectProviderConfig);
+  const networkName = getNetworkNameFromProviderConfig(providerConfig);
 
   const useBlockieIcon = useSelector(
     (state: any) => state.settings.useBlockieIcon,
@@ -80,8 +80,8 @@ const ApproveTransactionHeader = ({
   }, [accounts, identities, activeAddress, origin]);
 
   const networkImage = getNetworkImageSource({
-    networkType: networkProvider.type,
-    chainId: networkProvider.chainId,
+    networkType: providerConfig.type,
+    chainId: providerConfig.chainId,
   });
 
   const domainTitle = useMemo(() => {

diff --git a/app/components/UI/NetworkInfo/index.tsx b/app/components/UI/NetworkInfo/index.tsx
@@ -18,12 +18,11 @@ import { selectProviderConfig } from '../../../selectors/networkController';
 import { selectUseTokenDetection } from '../../../selectors/preferencesController';
 import {
   getNetworkImageSource,
-  getNetworkNameFromProvider,
+  getNetworkNameFromProviderConfig,
 } from '../../../util/networks';
 import Avatar, {
   AvatarVariants,
 } from '../../../component-library/components/Avatars/Avatar';
-import { ProviderConfig } from '@metamask/network-controller';
 import generateTestId from '../../../../wdio/utils/generateTestId';
 
 const createStyles = (colors: {
@@ -117,8 +116,8 @@ interface NetworkInfoProps {
 
 const NetworkInfo = (props: NetworkInfoProps) => {
   const { onClose, ticker, isTokenDetectionEnabled } = props;
-  const networkProvider: ProviderConfig = useSelector(selectProviderConfig);
-  const { type, ticker: networkTicker, rpcTarget, chainId } = networkProvider;
+  const providerConfig = useSelector(selectProviderConfig);
+  const { type, ticker: networkTicker, rpcTarget, chainId } = providerConfig;
   const { colors } = useTheme();
   const styles = createStyles(colors);
   const isTokenDetectionSupported =
@@ -134,15 +133,15 @@ const NetworkInfo = (props: NetworkInfoProps) => {
   const networkImageSource = useMemo(
     () =>
       getNetworkImageSource({
-        networkType: networkProvider.type,
-        chainId: networkProvider.chainId,
+        networkType: providerConfig.type,
+        chainId: providerConfig.chainId,
       }),
-    [networkProvider],
+    [providerConfig],
   );
 
   const networkName = useMemo(
-    () => getNetworkNameFromProvider(networkProvider),
-    [networkProvider],
+    () => getNetworkNameFromProviderConfig(providerConfig),
+    [providerConfig],
   );
 
   return (

diff --git a/app/components/UI/Tokens/index.tsx b/app/components/UI/Tokens/index.tsx
@@ -30,7 +30,7 @@ import { useTheme } from '../../../util/theme';
 import NotificationManager from '../../../core/NotificationManager';
 import {
   getDecimalChainId,
-  getNetworkNameFromProvider,
+  getNetworkNameFromProviderConfig,
   getTestNetImageByChainId,
   isLineaMainnetByChainId,
   isMainnetByChainId,
@@ -104,7 +104,7 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
 
   const networkName = useSelector((state: EngineState) => {
     const providerConfig = selectProviderConfig(state);
-    return getNetworkNameFromProvider(providerConfig);
+    return getNetworkNameFromProviderConfig(providerConfig);
   });
   const chainId = useSelector(selectChainId);
   const ticker = useSelector(selectTicker);

diff --git a/...ents/Views/AccountPermissions/AccountPermissionsConnected/AccountPermissionsConnected.tsx b/...ents/Views/AccountPermissions/AccountPermissionsConnected/AccountPermissionsConnected.tsx
@@ -12,7 +12,7 @@ import { strings } from '../../../../../locales/i18n';
 import TagUrl from '../../../../component-library/components/Tags/TagUrl';
 import PickerNetwork from '../../../../component-library/components/Pickers/PickerNetwork';
 import {
-  getNetworkNameFromProvider,
+  getNetworkNameFromProviderConfig,
   getNetworkImageSource,
 } from '../../../../util/networks';
 import AccountSelectorList from '../../../../components/UI/AccountSelectorList';
@@ -56,7 +56,7 @@ const AccountPermissionsConnected = ({
   const providerConfig: ProviderConfig = useSelector(selectProviderConfig);
 
   const networkName = useMemo(
-    () => getNetworkNameFromProvider(providerConfig),
+    () => getNetworkNameFromProviderConfig(providerConfig),
     [providerConfig],
   );
   const networkImageSource = useMemo(() => {

diff --git a/app/components/Views/Wallet/index.tsx b/app/components/Views/Wallet/index.tsx
@@ -28,7 +28,7 @@ import Logger from '../../../util/Logger';
 import Routes from '../../../constants/navigation/Routes';
 import {
   getNetworkImageSource,
-  getNetworkNameFromProvider,
+  getNetworkNameFromProviderConfig,
 } from '../../../util/networks';
 import generateTestId from '../../../../wdio/utils/generateTestId';
 import {
@@ -37,7 +37,6 @@ import {
 } from '../../../selectors/networkController';
 import { selectTokens } from '../../../selectors/tokensController';
 import { useNavigation } from '@react-navigation/native';
-import { ProviderConfig } from '@metamask/network-controller';
 import { WalletAccount } from '../../../components/UI/WalletAccount';
 import {
   selectConversionRate,
@@ -114,22 +113,22 @@ const Wallet = ({ navigation }: any) => {
    */
   const wizardStep = useSelector((state: any) => state.wizard.step);
   /**
-   * Current network
+   * Provider configuration for the current selected network
    */
-  const networkProvider: ProviderConfig = useSelector(selectProviderConfig);
+  const providerConfig = useSelector(selectProviderConfig);
 
   const networkName = useMemo(
-    () => getNetworkNameFromProvider(networkProvider),
-    [networkProvider],
+    () => getNetworkNameFromProviderConfig(providerConfig),
+    [providerConfig],
   );
 
   const networkImageSource = useMemo(
     () =>
       getNetworkImageSource({
-        networkType: networkProvider.type,
-        chainId: networkProvider.chainId,
+        networkType: providerConfig.type,
+        chainId: providerConfig.chainId,
       }),
-    [networkProvider],
+    [providerConfig],
   );
 
   /**
@@ -142,10 +141,10 @@ const Wallet = ({ navigation }: any) => {
     Analytics.trackEventWithParameters(
       MetaMetricsEvents.NETWORK_SELECTOR_PRESSED,
       {
-        chain_id: networkProvider.chainId,
+        chain_id: providerConfig.chainId,
       },
     );
-  }, [navigate, networkProvider.chainId]);
+  }, [navigate, providerConfig.chainId]);
   const { colors: themeColors } = useTheme();
 
   useEffect(() => {

diff --git a/app/util/networks/index.js b/app/util/networks/index.js
@@ -350,15 +350,15 @@ export function blockTagParamIndex(payload) {
 /**
  * Gets the current network name given the network provider.
  *
- * @param {Object} provider - Network provider state from the NetworkController.
+ * @param {Object} providerConfig - The provider configuration for the current selected network.
  * @returns {string} Name of the network.
  */
-export const getNetworkNameFromProvider = (provider) => {
+export const getNetworkNameFromProviderConfig = (providerConfig) => {
   let name = strings('network_information.unknown_network');
-  if (provider.nickname) {
-    name = provider.nickname;
+  if (providerConfig.nickname) {
+    name = providerConfig.nickname;
   } else {
-    const networkType = provider.type;
+    const networkType = providerConfig.type;
     name = NetworkList?.[networkType]?.name || NetworkList.rpc.name;
   }
   return name;