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( } >