chore: more token/NFT components supporting useChainId

MetaMask · Oct 14, 2024 · 86a7dd8 · 86a7dd8
1 parent 19e3b81
commit 86a7dd8
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 44 deletions.
diff --git a/app/components/UI/AddCustomCollectible/index.tsx b/app/components/UI/AddCustomCollectible/index.tsx
@@ -1,12 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import {
-  Alert,
-  Text,
-  TextInput,
-  View,
-  StyleSheet,
-} from 'react-native';
+import { Alert, Text, TextInput, View, StyleSheet } from 'react-native';
 import { fontStyles } from '../../../styles/common';
 import Engine from '../../../core/Engine';
 import { strings } from '../../../../locales/i18n';
@@ -18,10 +12,10 @@ import { MetaMetricsEvents } from '../../../core/Analytics';
 
 import { useTheme } from '../../../util/theme';
 import { NFTImportScreenSelectorsIDs } from '../../../../e2e/selectors/wallet/ImportNFTView.selectors';
-import { selectChainId } from '../../../selectors/networkController';
 import { selectSelectedInternalAccountChecksummedAddress } from '../../../selectors/accountsController';
 import { getDecimalChainId } from '../../../util/networks';
 import { useMetrics } from '../../../components/hooks/useMetrics';
+import { useChainId } from '../../../selectors/hooks';
 
 // TODO: Replace "any" with type
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -92,7 +86,7 @@ const AddCustomCollectible = ({
   const selectedAddress = useSelector(
     selectSelectedInternalAccountChecksummedAddress,
   );
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
 
   useEffect(() => {
     setMounted(true);
@@ -223,10 +217,7 @@ const AddCustomCollectible = ({
   };
 
   return (
-    <View
-      style={styles.wrapper}
-      testID={NFTImportScreenSelectorsIDs.CONTAINER}
-    >
+    <View style={styles.wrapper} testID={NFTImportScreenSelectorsIDs.CONTAINER}>
       <ActionView
         cancelText={strings('add_asset.collectibles.cancel_add_collectible')}
         confirmText={strings('add_asset.collectibles.add_collectible')}

diff --git a/app/components/UI/SearchTokenAutocomplete/index.tsx b/app/components/UI/SearchTokenAutocomplete/index.tsx
@@ -17,10 +17,7 @@ import { useSelector } from 'react-redux';
 import { FORMATTED_NETWORK_NAMES } from '../../../constants/on-ramp';
 import NotificationManager from '../../../core/NotificationManager';
 import { useTheme } from '../../../util/theme';
-import {
-  selectChainId,
-  selectTicker,
-} from '../../../selectors/networkController';
+import { selectTicker } from '../../../selectors/networkController';
 import { selectNetworkName } from '../../../selectors/networkInfos';
 import { selectUseTokenDetection } from '../../../selectors/preferencesController';
 import { getDecimalChainId } from '../../../util/networks';
@@ -34,6 +31,7 @@ import Button, {
   ButtonWidthTypes,
 } from '../../../component-library/components/Buttons/Button';
 import { ImportTokenViewSelectorsIDs } from '../../../../e2e/selectors/wallet/ImportTokenView.selectors';
+import { useChainId } from '../../../selectors/hooks';
 
 // TODO: Replace "any" with type
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -91,7 +89,7 @@ const SearchTokenAutocomplete = ({ navigation }: Props) => {
   const styles = createStyles(colors);
 
   const isTokenDetectionEnabled = useSelector(selectUseTokenDetection);
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
   const ticker = useSelector(selectTicker);
 
   const setFocusState = useCallback(

diff --git a/app/components/UI/SimulationDetails/AssetPill/AssetPill.tsx b/app/components/UI/SimulationDetails/AssetPill/AssetPill.tsx
@@ -9,16 +9,14 @@ import Text, {
 } from '../../../../component-library/components/Texts/Text';
 import AvatarNetwork from '../../../../component-library/components/Avatars/Avatar/variants/AvatarNetwork';
 import { AvatarSize } from '../../../../component-library/components/Avatars/Avatar/Avatar.types';
-import {
-  selectChainId,
-  selectTicker,
-} from '../../../../selectors/networkController';
+import { selectTicker } from '../../../../selectors/networkController';
 import { NetworkList } from '../../../../util/networks';
 import { useStyles } from '../../../hooks/useStyles';
 import Name from '../../Name/Name';
 import { NameType } from '../../Name/Name.types';
 import { AssetIdentifier, AssetType } from '../types';
 import styleSheet from './AssetPill.styles';
+import { useChainId } from '../../../../selectors/hooks';
 
 interface AssetPillProperties extends ViewProps {
   asset: AssetIdentifier;
@@ -38,7 +36,7 @@ const getNetworkImage = (chainId: Hex) => {
 const NativeAssetPill: React.FC = () => {
   const { styles } = useStyles(styleSheet, {});
   const ticker = useSelector(selectTicker);
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
   const imageSource = getNetworkImage(chainId);
 
   return (

diff --git a/app/components/Views/AddAsset/AddAsset.tsx b/app/components/Views/AddAsset/AddAsset.tsx
@@ -14,10 +14,7 @@ import {
   getNetworkNavbarOptions,
 } from '../../UI/Navbar';
 import { isTokenDetectionSupportedForNetwork } from '@metamask/assets-controllers';
-import {
-  selectChainId,
-  selectProviderConfig,
-} from '../../../selectors/networkController';
+import { selectProviderConfig } from '../../../selectors/networkController';
 import { selectNetworkName } from '../../../selectors/networkInfos';
 import { selectDisplayNftMedia } from '../../../selectors/preferencesController';
 import Banner from '../../../component-library/components/Banners/Banner/Banner';
@@ -36,6 +33,7 @@ import { AddAssetParams } from './AddAsset.types';
 import Routes from '../../../constants/navigation/Routes';
 import { NFT_TITLE, TOKEN, TOKEN_TITLE } from './AddAsset.constants';
 import { AddAssetViewSelectorsIDs } from '../../../../e2e/selectors/AddAssetView.selectors';
+import { useChainId } from '../../../selectors/hooks';
 
 const AddAsset = () => {
   const navigation = useNavigation();
@@ -47,7 +45,7 @@ const AddAsset = () => {
   } = useStyles(styleSheet, {});
 
   const providerConfig = useSelector(selectProviderConfig);
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
   const displayNftMedia = useSelector(selectDisplayNftMedia);
 
   const isTokenDetectionSupported =

diff --git a/app/components/Views/AssetDetails/index.tsx b/app/components/Views/AssetDetails/index.tsx
@@ -31,10 +31,7 @@ import WarningMessage from '../confirmations/SendFlow/WarningMessage';
 import { useTheme } from '../../../util/theme';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 import Routes from '../../../constants/navigation/Routes';
-import {
-  selectChainId,
-  selectProviderConfig,
-} from '../../../selectors/networkController';
+import { selectProviderConfig } from '../../../selectors/networkController';
 import {
   selectConversionRate,
   selectCurrentCurrency,
@@ -47,6 +44,7 @@ import { RootState } from 'app/reducers';
 import { Colors } from '../../../util/theme/models';
 import { Hex } from '@metamask/utils';
 import { RpcEndpointType } from '@metamask/network-controller';
+import { useChainId } from '../../../selectors/hooks';
 
 const createStyles = (colors: Colors) =>
   StyleSheet.create({
@@ -116,7 +114,7 @@ const AssetDetails = (props: Props) => {
   const tokens = useSelector(selectTokens);
   const conversionRate = useSelector(selectConversionRate);
   const currentCurrency = useSelector(selectCurrentCurrency);
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
   const primaryCurrency = useSelector(
     (state: RootState) => state.settings.primaryCurrency,
   );

diff --git a/app/components/Views/AssetOptions/AssetOptions.tsx b/app/components/Views/AssetOptions/AssetOptions.tsx
@@ -14,7 +14,6 @@ import Icon, {
 } from '../../../component-library/components/Icons/Icon';
 import useBlockExplorer from '../../../components/UI/Swaps/utils/useBlockExplorer';
 import {
-  selectChainId,
   selectNetworkConfigurations,
   selectProviderConfig,
 } from '../../../selectors/networkController';
@@ -28,6 +27,8 @@ import { getDecimalChainId } from '../../../util/networks';
 import { isPortfolioUrl } from '../../../util/url';
 import { BrowserTab } from '../../../components/UI/Tokens/types';
 import { RootState } from '../../../reducers';
+import { useChainId } from '../../../selectors/hooks';
+
 interface Option {
   label: string;
   onPress: () => void;
@@ -52,7 +53,7 @@ const AssetOptions = (props: Props) => {
   const providerConfig = useSelector(selectProviderConfig);
   const networkConfigurations = useSelector(selectNetworkConfigurations);
   const tokenList = useSelector(selectTokenList);
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const browserTabs = useSelector((state: any) => state.browser.tabs);
   const isDataCollectionForMarketingEnabled = useSelector(

diff --git a/app/components/Views/DetectedTokens/index.tsx b/app/components/Views/DetectedTokens/index.tsx
@@ -20,15 +20,13 @@ import { getDecimalChainId } from '../../../util/networks';
 import { createNavigationDetails } from '../../../util/navigation/navUtils';
 import Routes from '../../../constants/navigation/Routes';
 import { selectDetectedTokens } from '../../../selectors/tokensController';
-import {
-  selectChainId,
-  selectNetworkClientId,
-} from '../../../selectors/networkController';
+import { selectNetworkClientId } from '../../../selectors/networkController';
 import BottomSheet, {
   BottomSheetRef,
 } from '../../../component-library/components/BottomSheets/BottomSheet';
 import { useMetrics } from '../../../components/hooks/useMetrics';
 import { DetectedTokensSelectorIDs } from '../../../../e2e/selectors/wallet/DetectedTokensView.selectors';
+import { useChainId } from '../../../selectors/hooks';
 
 // TODO: Replace "any" with type
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -79,7 +77,7 @@ const DetectedTokens = () => {
   const { trackEvent } = useMetrics();
   const sheetRef = useRef<BottomSheetRef>(null);
   const detectedTokens = useSelector(selectDetectedTokens);
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
   const networkClientId = useSelector(selectNetworkClientId);
   const [ignoredTokens, setIgnoredTokens] = useState<IgnoredTokensByAddress>(
     {},

diff --git a/app/components/Views/NftOptions/NftOptions.tsx b/app/components/Views/NftOptions/NftOptions.tsx
@@ -8,7 +8,6 @@ import { strings } from '../../../../locales/i18n';
 import Icon, {
   IconName,
 } from '../../../component-library/components/Icons/Icon';
-import { selectChainId } from '../../../selectors/networkController';
 import ReusableModal, { ReusableModalRef } from '../../UI/ReusableModal';
 import styleSheet from './NftOptions.styles';
 import Text, {
@@ -26,6 +25,7 @@ import {
   MetaMetricsEvents,
 } from '../../../components/hooks/useMetrics';
 import { getDecimalChainId } from '../../../util/networks';
+import { useChainId } from '../../../selectors/hooks';
 
 interface Props {
   route: {
@@ -41,7 +41,7 @@ const NftOptions = (props: Props) => {
   const safeAreaInsets = useSafeAreaInsets();
   const navigation = useNavigation();
   const modalRef = useRef<ReusableModalRef>(null);
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
   const { trackEvent } = useMetrics();
   const selectedAddress = useSelector(
     selectSelectedInternalAccountChecksummedAddress,

diff --git a/app/components/Views/confirmations/components/WatchAssetRequest/index.js b/app/components/Views/confirmations/components/WatchAssetRequest/index.js
@@ -14,13 +14,13 @@ import { MetaMetricsEvents } from '../../../../../core/Analytics';
 import useTokenBalance from '../../../../hooks/useTokenBalance';
 import { useTheme } from '../../../../../util/theme';
 import NotificationManager from '../../../../../core/NotificationManager';
-import { selectChainId } from '../../../../../selectors/networkController';
 import ApproveTransactionHeader from '../ApproveTransactionHeader';
 import { getActiveTabUrl } from '../../../../../util/transactions';
 import { isEqual } from 'lodash';
 import { AssetWatcherSelectorsIDs } from '../../../../../../e2e/selectors/Modals/AssetWatcher.selectors';
 import { getDecimalChainId } from '../../../../../util/networks';
 import { useMetrics } from '../../../../../components/hooks/useMetrics';
+import { useChainId } from '../../../../../selectors/hooks';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -107,7 +107,7 @@ const WatchAssetRequest = ({
   const { trackEvent } = useMetrics();
   const styles = createStyles(colors);
   const [balance, , error] = useTokenBalance(asset.address, interactingAddress);
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
   const balanceWithSymbol = error
     ? strings('transaction.failed')
     : `${renderFromTokenMinimalUnit(balance, asset.decimals)} ${asset.symbol}`;