chore: adds useChainId hook to more token related components

MetaMask · Oct 14, 2024 · 19e3b81 · 19e3b81
1 parent 9c967a8
commit 19e3b81
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 9 deletions.
diff --git a/app/components/UI/Tokens/TokenList/PortfolioBalance/index.tsx b/app/components/UI/Tokens/TokenList/PortfolioBalance/index.tsx
@@ -10,7 +10,6 @@ import Engine from '../../../../../core/Engine';
 import Routes from '../../../../../constants/navigation/Routes';
 import { MetaMetricsEvents } from '../../../../../core/Analytics';
 import {
-  selectChainId,
   selectProviderConfig,
   selectTicker,
 } from '../../../../../selectors/networkController';
@@ -31,6 +30,7 @@ import { IconName } from '../../../../../component-library/components/Icons/Icon
 import { BrowserTab } from '../../types';
 import { WalletViewSelectorsIDs } from '../../../../../../e2e/selectors/wallet/WalletView.selectors';
 import { strings } from '../../../../../../locales/i18n';
+import { useChainId } from '../../../../../selectors/hooks';
 
 export const PortfolioBalance = () => {
   const { colors } = useTheme();
@@ -40,7 +40,7 @@ export const PortfolioBalance = () => {
   const { trackEvent, isEnabled } = useMetrics();
 
   const { type } = useSelector(selectProviderConfig);
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
   const ticker = useSelector(selectTicker);
   const isDataCollectionForMarketingEnabled = useSelector(
     (state: RootState) => state.security.dataCollectionForMarketing,

diff --git a/app/components/UI/Tokens/TokenList/ScamWarningIcon/index.tsx b/app/components/UI/Tokens/TokenList/ScamWarningIcon/index.tsx
@@ -3,7 +3,6 @@ import { TokenI } from '../../types';
 import useIsOriginalNativeTokenSymbol from '../../../../hooks/useIsOriginalNativeTokenSymbol/useIsOriginalNativeTokenSymbol';
 import { useSelector } from 'react-redux';
 import {
-  selectChainId,
   selectProviderConfig,
   selectTicker,
 } from '../../../../../selectors/networkController';
@@ -14,6 +13,7 @@ import {
   IconColor,
   IconName,
 } from '../../../../../component-library/components/Icons/Icon';
+import { useChainId } from '../../../../../selectors/hooks';
 
 interface ScamWarningIconProps {
   asset: TokenI;
@@ -25,7 +25,7 @@ export const ScamWarningIcon = ({
   setShowScamWarningModal,
 }: ScamWarningIconProps) => {
   const { type } = useSelector(selectProviderConfig);
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
   const ticker = useSelector(selectTicker);
   const isOriginalNativeTokenSymbol = useIsOriginalNativeTokenSymbol(
     chainId,

diff --git a/app/components/UI/Tokens/TokenList/StakeButton/index.tsx b/app/components/UI/Tokens/TokenList/StakeButton/index.tsx
@@ -10,7 +10,6 @@ import {
   useMetrics,
 } from '../../../../../components/hooks/useMetrics';
 import { getDecimalChainId } from '../../../../../util/networks';
-import { selectChainId } from '../../../../../selectors/networkController';
 import { Pressable } from 'react-native';
 import Text, {
   TextColor,
@@ -26,7 +25,7 @@ import Icon, {
 } from '../../../../../component-library/components/Icons/Icon';
 import { strings } from '../../../../../../locales/i18n';
 import { RootState } from '../../../../../reducers';
-
+import { useChainId } from '../../../../../selectors/hooks';
 interface StakeButtonProps {
   asset: TokenI;
 }
@@ -38,7 +37,7 @@ export const StakeButton = ({ asset }: StakeButtonProps) => {
   const { trackEvent } = useMetrics();
 
   const browserTabs = useSelector((state: RootState) => state.browser.tabs);
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
 
   const onStakeButtonPress = () => {
     if (isPooledStakingFeatureEnabled()) {

diff --git a/app/components/UI/Tokens/TokenList/TokenListFooter/index.tsx b/app/components/UI/Tokens/TokenList/TokenListFooter/index.tsx
@@ -23,8 +23,8 @@ import {
   useMetrics,
 } from '../../../../../components/hooks/useMetrics';
 import { getDecimalChainId } from '../../../../../util/networks';
-import { selectChainId } from '../../../../../selectors/networkController';
 import { TokenI } from '../../types';
+import { useChainId } from '../../../../../selectors/hooks';
 
 interface TokenListFooterProps {
   tokens: TokenI[];
@@ -45,7 +45,7 @@ export const TokenListFooter = ({
   const [isNetworkRampSupported, isNativeTokenRampSupported] = useRampNetwork();
 
   const detectedTokens = useSelector(selectDetectedTokens);
-  const chainId = useSelector(selectChainId);
+  const chainId = useChainId();
 
   const styles = createStyles(colors);