diff --git a/app/components/UI/AssetOverview/Balance/Balance.tsx b/app/components/UI/AssetOverview/Balance/Balance.tsx
index 8dc96b67932..dd0efd0032b 100644
--- 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) => {
}
>
diff --git a/app/components/UI/Stake/components/StakingBalance/StakingBalance.tsx b/app/components/UI/Stake/components/StakingBalance/StakingBalance.tsx
index 42bdc954291..ee8cbc831fc 100644
--- 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
index 2a809dd8e10..3d1d5a5234e 100644
--- 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(
}
>