chore: adds support for useChain hooks to all the others UI components

app/component-library/components/Navigation/TabBar/TabBar.tsx

@@ -11,7 +11,6 @@ import { useStyles } from '../../../hooks';
 import Routes from '../../../../constants/navigation/Routes';
 import { useTheme } from '../../../../util/theme';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
-import { selectChainId } from '../../../../selectors/networkController';
 import { getDecimalChainId } from '../../../../util/networks';
 import { useMetrics } from '../../../../components/hooks/useMetrics';
 
@@ -22,13 +21,14 @@ import { ICON_BY_TAB_BAR_ICON_KEY } from './TabBar.constants';
 import { colors as importedColors } from '../../../../styles/common';
 import { AvatarSize } from '../../Avatars/Avatar';
 import OnboardingWizard from '../../../../components/UI/OnboardingWizard';
+import { useChainId } from '../../../../selectors/hooks';
 
 const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
   const { colors } = useTheme();
   const { trackEvent } = useMetrics();
   const { bottom: bottomInset } = useSafeAreaInsets();
   const { styles } = useStyles(styleSheet, { bottomInset });
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
   const tabBarRef = useRef(null);
   /**
    * Current onboarding wizard step

app/components/Base/RemoteImage/index.js

@@ -21,10 +21,7 @@ import Badge, {
   BadgeVariant,
 } from '../../../component-library/components/Badges/Badge';
 import { useSelector } from 'react-redux';
-import {
-  selectChainId,
-  selectTicker,
-} from '../../../selectors/networkController';
+import { selectTicker } from '../../../selectors/networkController';
 import {
   getTestNetImageByChainId,
   isLineaMainnet,
@@ -38,6 +35,7 @@ import { BadgeAnchorElementShape } from '../../../component-library/components/B
 import useSvgUriViewBox from '../../hooks/useSvgUriViewBox';
 import { AvatarSize } from '../../../component-library/components/Avatars/Avatar';
 import Logger from '../../../util/Logger';
+import { useChainId } from '../../../selectors/hooks';
 
 const createStyles = () =>
   StyleSheet.create({
@@ -64,7 +62,7 @@ const RemoteImage = (props) => {
   const isImageUrl = isUrl(props?.source?.uri);
   const ipfsGateway = useIpfsGateway();
   const styles = createStyles();
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
   const ticker = useSelector(selectTicker);
   const networkName = useSelector(selectNetworkName);
   const resolvedIpfsUrl = useMemo(() => {

app/components/UI/AddToAddressBookWrapper/AddToAddressBookWrapper.tsx

@@ -1,17 +1,16 @@
 import React, { ReactElement, useState } from 'react';
-import { useSelector } from 'react-redux';
 import { View, Platform, TextInput, TouchableOpacity } from 'react-native';
 
 import generateTestId from '../../../../wdio/utils/generateTestId';
 import { AddAddressModalSelectorsIDs } from '../../../../e2e/selectors/Modals/AddAddressModal.selectors';
 import { strings } from '../../../../locales/i18n';
 import Engine from '../../../core/Engine';
 import { baseStyles } from '../../../styles/common';
-import { selectChainId } from '../../../selectors/networkController';
 import { useTheme } from '../../../util/theme';
 import Text from '../../Base/Text';
 import useExistingAddress from '../../hooks/useExistingAddress';
 import ActionModal from '../ActionModal';
+import { useChainId } from '../../../selectors/hooks';
 
 import createStyles from './styles';
 
@@ -28,7 +27,7 @@ export const AddToAddressBookWrapper = ({
   setToAddressName,
   defaultNull = false,
 }: AddToAddressBookWrapperProps) => {
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
 
   const existingContact = useExistingAddress(address);
   const { colors, themeAppearance } = useTheme();

app/components/UI/AssetOverview/Balance/Balance.tsx

@@ -6,7 +6,6 @@ import styleSheet from './Balance.styles';
 import AssetElement from '../../AssetElement';
 import { useSelector } from 'react-redux';
 import { selectNetworkName } from '../../../../selectors/networkInfos';
-import { selectChainId } from '../../../../selectors/networkController';
 import {
   getTestNetImageByChainId,
   isLineaMainnetByChainId,
@@ -27,6 +26,7 @@ import { TokenI } from '../../Tokens/types';
 import { useNavigation } from '@react-navigation/native';
 import { isPooledStakingFeatureEnabled } from '../../Stake/constants';
 import StakingBalance from '../../Stake/components/StakingBalance/StakingBalance';
+import { useChainId } from '../../../../selectors/hooks';
 
 interface BalanceProps {
   asset: TokenI;
@@ -51,7 +51,7 @@ const Balance = ({ asset, mainBalance, secondaryBalance }: BalanceProps) => {
   const { styles } = useStyles(styleSheet, {});
   const navigation = useNavigation();
   const networkName = useSelector(selectNetworkName);
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
 
   return (
     <View style={styles.wrapper}>

app/components/UI/Bridge/utils/useGoToBridge.ts

@@ -4,21 +4,21 @@ import { MetaMetricsEvents } from '../../../../core/Analytics';
 
 import { useSelector } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
-import { selectChainId } from '../../../../selectors/networkController';
 
 import type { BrowserTab } from '../../Tokens/types';
 import type { BrowserParams } from '../../../../components/Views/Browser/Browser.types';
 import { getDecimalChainId } from '../../../../util/networks';
 import { useMetrics } from '../../../../components/hooks/useMetrics';
 import { isBridgeUrl } from '../../../../util/url';
+import { useChainId } from '../../../../selectors/hooks';
 
 /**
  * Returns a function that is used to navigate to the MetaMask Bridges webpage.
  * @param location location of navigation call – used for analytics.
  * @returns A function that can be used to navigate to the existing Bridges page in the browser. If there isn't an existing bridge page, one is created based on the current chain ID and passed token address (if provided).
  */
 export default function useGoToBridge(location: string) {
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
   // TODO: Replace "any" with type
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const browserTabs = useSelector((state: any) => state.browser.tabs);

app/components/UI/Drawer/index.tsx

@@ -27,7 +27,6 @@ import styles from './styles';
 import { useTheme } from '../../../util/theme';
 import { useDispatch, useSelector } from 'react-redux';
 import { toggleInfoNetworkModal } from '../../../actions/modals';
-import { selectChainId } from '../../../selectors/networkController';
 import { getIsNetworkOnboarded } from '../../../util/networks';
 import Animated, {
   interpolate,
@@ -38,6 +37,8 @@ import Animated, {
   withTiming,
   Extrapolate,
 } from 'react-native-reanimated';
+import { useChainId } from '../../../selectors/hooks';
+
 /**
  * This indicates that 60% of the sheet needs to be offscreen to meet the distance threshold.
  */
@@ -82,7 +83,7 @@ const Drawer = forwardRef<DrawerRef, Props>((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (state: any) => state.networkOnboarded.networkOnboardedState,
   );
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
 
   useEffect(() => {
     if (prevNetwork.current !== chainId && chainId) {

app/components/UI/SimulationDetails/useBalanceChanges.ts

@@ -25,8 +25,8 @@ import {
   selectConversionRate,
   selectCurrentCurrency,
 } from '../../../selectors/currencyRateController';
-import { selectChainId } from '../../../selectors/networkController';
 import { useAsyncResultOrThrow } from '../../hooks/useAsyncResult';
+import { useChainId } from '../../../selectors/hooks';
 
 const NATIVE_DECIMALS = 18;
 
@@ -177,7 +177,7 @@ export default function useBalanceChanges(
 ): { pending: boolean; value: BalanceChange[] } {
   const nativeFiatRate = useSelector(selectConversionRate) as number;
   const fiatCurrency = useSelector(selectCurrentCurrency);
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
 
   const { nativeBalanceChange, tokenBalanceChanges = [] } =
     simulationData ?? {};
@@ -200,7 +200,7 @@ export default function useBalanceChanges(
     [JSON.stringify(erc20TokenAddresses), chainId, fiatCurrency],
   );
 
-  if (erc20Decimals.pending || erc20FiatRates.pending || !simulationData ) {
+  if (erc20Decimals.pending || erc20FiatRates.pending || !simulationData) {
     return { pending: true, value: [] };
   }
 

app/components/UI/Swaps/SwapsLiveness.ts

@@ -1,6 +1,5 @@
 import { swapsUtils } from '@metamask/swaps-controller';
 import { useCallback, useEffect } from 'react';
-import { selectChainId } from '../../../selectors/networkController';
 import { AppState } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import AppConstants from '../../../core/AppConstants';
@@ -11,12 +10,13 @@ import {
 import Logger from '../../../util/Logger';
 import useInterval from '../../hooks/useInterval';
 import { isSwapsAllowed } from './utils';
+import { useChainId } from '../../../selectors/hooks';
 
 const POLLING_FREQUENCY = AppConstants.SWAPS.LIVENESS_POLLING_FREQUENCY;
 
 function SwapLiveness() {
   const isLive = useSelector(swapsLivenessSelector);
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
   const dispatch = useDispatch();
   const setLiveness = useCallback(
     (_chainId, featureFlags) => {

app/components/Views/QRScanner/index.tsx

@@ -11,15 +11,13 @@ import Text, {
   TextVariant,
 } from '../../../component-library/components/Texts/Text';
 import { RNCamera } from 'react-native-camera';
-import { useSelector } from 'react-redux';
 import { strings } from '../../../../locales/i18n';
 import { PROTOCOLS } from '../../../constants/deeplinks';
 import Routes from '../../../constants/navigation/Routes';
 import { MM_SDK_DEEPLINK } from '../../../constants/urls';
 import AppConstants from '../../../core/AppConstants';
 import SharedDeeplinkManager from '../../../core/DeeplinkManager/SharedDeeplinkManager';
 import Engine from '../../../core/Engine';
-import { selectChainId } from '../../../selectors/networkController';
 import { isValidAddressInputViaQRCode } from '../../../util/address';
 import { getURLProtocol } from '../../../util/general';
 import {
@@ -29,6 +27,7 @@ import {
 import createStyles from './styles';
 import { useTheme } from '../../../util/theme';
 import { ScanSuccess, StartScan } from '../QRTabSwitcher';
+import { useChainId } from '../../../selectors/hooks';
 
 const frameImage = require('../../../images/frame.png'); // eslint-disable-line import/no-commonjs
 
@@ -51,7 +50,7 @@ const QRScanner = ({
   const mountedRef = useRef<boolean>(true);
   const shouldReadBarCodeRef = useRef<boolean>(true);
 
-  const currentChainId = useSelector(selectChainId);
+  const currentChainId = useChainId();
   const theme = useTheme();
   const styles = createStyles(theme);
 

app/components/Views/Settings/NetworksSettings/NetworkSettings/CustomNetworkView/CustomNetwork.tsx

@@ -11,14 +11,12 @@ import { useTheme } from '../../../../../../util/theme';
 import { PopularList } from '../../../../../../util/networks/customNetworks';
 import createStyles from '../styles';
 import { CustomNetworkProps, Network } from './CustomNetwork.types';
-import {
-  selectChainId,
-  selectNetworkConfigurations,
-} from '../../../../../../selectors/networkController';
+import { selectNetworkConfigurations } from '../../../../../../selectors/networkController';
 import AvatarNetwork from '../../../../../../component-library/components/Avatars/Avatar/variants/AvatarNetwork';
 import { AvatarSize } from '../../../../../../component-library/components/Avatars/Avatar';
 import { isNetworkUiRedesignEnabled } from '../../../../../../util/networks/isNetworkUiRedesignEnabled';
 import { useSafeChains } from '../../../../../../components/hooks/useSafeChains';
+import { useChainId } from '../../../../../../selectors/hooks';
 
 const CustomNetwork = ({
   showPopularNetworkModal,
@@ -37,7 +35,7 @@ const CustomNetwork = ({
   hideWarningIcons = false,
 }: CustomNetworkProps) => {
   const networkConfigurations = useSelector(selectNetworkConfigurations);
-  const selectedChainId = useSelector(selectChainId);
+  const selectedChainId = useChainId();
   const { safeChains } = useSafeChains();
 
   const supportedNetworkList = (customNetworksList ?? PopularList).map(

app/components/Views/WalletActions/WalletActions.tsx

@@ -10,10 +10,7 @@ import BottomSheet, {
   BottomSheetRef,
 } from '../../../component-library/components/BottomSheets/BottomSheet';
 import AppConstants from '../../../core/AppConstants';
-import {
-  selectChainId,
-  selectTicker,
-} from '../../../selectors/networkController';
+import { selectTicker } from '../../../selectors/networkController';
 import { swapsLivenessSelector } from '../../../reducers/swaps';
 import { isSwapsAllowed } from '../../../components/UI/Swaps/utils';
 import isBridgeAllowed from '../../UI/Bridge/utils/isBridgeAllowed';
@@ -39,14 +36,15 @@ import {
   createBuyNavigationDetails,
   createSellNavigationDetails,
 } from '../../UI/Ramp/routes/utils';
+import { useChainId } from '../../../selectors/hooks';
 
 const WalletActions = () => {
   const { styles } = useStyles(styleSheet, {});
   const sheetRef = useRef<BottomSheetRef>(null);
   const { navigate } = useNavigation();
   const goToBridge = useGoToBridge('TabBar');
 
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
   const ticker = useSelector(selectTicker);
   const swapsIsLive = useSelector(swapsLivenessSelector);
   const dispatch = useDispatch();

app/components/Views/confirmations/components/EditGasFeeLegacyUpdate/index.tsx

@@ -22,7 +22,6 @@ import Text, {
 } from '../../../../../component-library/components/Texts/Text';
 import { MetaMetricsEvents } from '../../../../../core/Analytics';
 import { useGasTransaction } from '../../../../../core/GasPolling/GasPolling';
-import { selectChainId } from '../../../../../selectors/networkController';
 import {
   getDecimalChainId,
   isMainnetByChainId,
@@ -45,6 +44,7 @@ import { useMetrics } from '../../../../../components/hooks/useMetrics';
 import { selectGasFeeEstimates } from '../../../../../selectors/confirmTransaction';
 import { selectPrimaryCurrency } from '../../../../../selectors/settings';
 import { selectGasFeeControllerEstimateType } from '../../../../../selectors/gasFeeController';
+import { useChainId } from '../../../../../selectors/hooks';
 
 const EditGasFeeLegacy = ({
   onCancel,
@@ -85,7 +85,7 @@ const EditGasFeeLegacy = ({
 
   const gasEstimateType = useSelector(selectGasFeeControllerEstimateType);
 
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
 
   const gasTransaction = useGasTransaction({
     onlyGas,