fix: wrong network shown in unknown network badge when popular networ…

…ks filtered
MetaMask · Jan 30, 2025 · 99c6f19 · 99c6f19
1 parent 3d13811
commit 99c6f19
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 10 deletions.
diff --git a/app/components/UI/AssetOverview/Balance/Balance.tsx b/app/components/UI/AssetOverview/Balance/Balance.tsx
@@ -6,8 +6,10 @@ import { useStyles } from '../../../../component-library/hooks';
 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 {
+  selectChainId,
+  selectNetworkConfigurationByChainId,
+} from '../../../../selectors/networkController';
 import {
   getTestNetImageByChainId,
   getDefaultNetworkByChainId,
@@ -35,6 +37,7 @@ import {
   UnpopularNetworkList,
   CustomNetworkImgMapping,
 } from '../../../../util/networks/customNetworks';
+import { RootState } from '../../../../reducers';
 
 interface BalanceProps {
   asset: TokenI;
@@ -91,7 +94,9 @@ export const NetworkBadgeSource = (chainId: Hex, ticker: string) => {
 const Balance = ({ asset, mainBalance, secondaryBalance }: BalanceProps) => {
   const { styles } = useStyles(styleSheet, {});
   const navigation = useNavigation();
-  const networkName = useSelector(selectNetworkName);
+  const networkConfigurationByChainId = useSelector((state: RootState) =>
+    selectNetworkConfigurationByChainId(state, asset.chainId as Hex),
+  );
   const chainId = useSelector(selectChainId);
 
   const tokenChainId = isPortfolioViewEnabled() ? asset.chainId : chainId;
@@ -156,7 +161,7 @@ const Balance = ({ asset, mainBalance, secondaryBalance }: BalanceProps) => {
             <Badge
               variant={BadgeVariant.Network}
               imageSource={NetworkBadgeSource(tokenChainId as Hex, ticker)}
-              name={networkName || ''}
+              name={networkConfigurationByChainId?.name}
             />
           }
         >

diff --git a/app/components/UI/Stake/components/StakingBalance/StakingBalance.tsx b/app/components/UI/Stake/components/StakingBalance/StakingBalance.tsx
@@ -10,7 +10,6 @@ import Text, {
 import { useStyles } from '../../../../../component-library/hooks';
 import AssetElement from '../../../AssetElement';
 import NetworkMainAssetLogo from '../../../NetworkMainAssetLogo';
-import { selectNetworkName } from '../../../../../selectors/networkInfos';
 import { useSelector } from 'react-redux';
 import styleSheet from './StakingBalance.styles';
 import { View } from 'react-native';
@@ -48,6 +47,8 @@ import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics';
 import { EVENT_LOCATIONS, EVENT_PROVIDERS } from '../../constants/events';
 import NetworkAssetLogo from '../../../NetworkAssetLogo';
 import { isPortfolioViewEnabled } from '../../../../../util/networks';
+import { selectNetworkConfigurationByChainId } from '../../../../../selectors/networkController';
+import { RootState } from '../../../../../reducers';
 
 export interface StakingBalanceProps {
   asset: TokenI;
@@ -61,7 +62,9 @@ const StakingBalanceContent = ({ asset }: StakingBalanceProps) => {
     setHasSentViewingStakingRewardsMetric,
   ] = useState(false);
 
-  const networkName = useSelector(selectNetworkName);
+  const networkConfigurationByChainId = useSelector((state: RootState) =>
+    selectNetworkConfigurationByChainId(state, asset.chainId as Hex),
+  );
 
   const { isEligible: isEligibleForPooledStaking } = useStakingEligibility();
 
@@ -216,7 +219,7 @@ const StakingBalanceContent = ({ asset }: StakingBalanceProps) => {
                   asset.chainId as Hex,
                   asset.ticker ?? asset.symbol,
                 )}
-                name={networkName}
+                name={networkConfigurationByChainId?.name}
               />
             }
           >

diff --git a/app/components/UI/Tokens/TokenList/TokenListItem/index.tsx b/app/components/UI/Tokens/TokenList/TokenListItem/index.tsx
@@ -14,6 +14,7 @@ import {
   selectProviderConfig,
   selectTicker,
   selectNetworkConfigurations,
+  selectNetworkConfigurationByChainId,
 } from '../../../../../selectors/networkController';
 import {
   selectContractExchangeRates,
@@ -26,7 +27,6 @@ import {
   selectCurrentCurrency,
   selectCurrencyRates,
 } from '../../../../../selectors/currencyRateController';
-import { selectNetworkName } from '../../../../../selectors/networkInfos';
 import { RootState } from '../../../../../reducers';
 import { safeToChecksumAddress } from '../../../../../util/address';
 import {
@@ -99,7 +99,9 @@ export const TokenListItem = React.memo(
       ticker,
       type,
     );
-    const networkName = useSelector(selectNetworkName);
+    const networkConfigurationByChainId = useSelector((state: RootState) =>
+      selectNetworkConfigurationByChainId(state, asset.chainId as Hex),
+    );
     const primaryCurrency = useSelector(
       (state: RootState) => state.settings.primaryCurrency,
     );
@@ -327,7 +329,7 @@ export const TokenListItem = React.memo(
             <Badge
               variant={BadgeVariant.Network}
               imageSource={networkBadgeSource(chainId)}
-              name={networkName}
+              name={networkConfigurationByChainId?.name}
             />
           }
         >