chore: cherry-pick #12658 (#12721)

app/components/UI/Tokens/TokenList/TokenListFooter/index.tsx

@@ -32,6 +32,7 @@ import {
 import {
   selectChainId,
   selectIsAllNetworks,
+  selectIsPopularNetwork,
 } from '../../../../../selectors/networkController';
 import { TokenI } from '../../types';
 import { selectUseTokenDetection } from '../../../../../selectors/preferencesController';
@@ -48,12 +49,15 @@ const getDetectedTokensCount = (
   isAllNetworksSelected: boolean,
   allTokens: TokenI[],
   filteredTokens: TokenI[] | undefined,
+  isPopularNetworks: boolean,
 ): number => {
   if (!isPortfolioEnabled) {
     return filteredTokens?.length ?? 0;
   }
 
-  return isAllNetworksSelected ? allTokens.length : filteredTokens?.length ?? 0;
+  return isAllNetworksSelected && isPopularNetworks
+    ? allTokens.length
+    : filteredTokens?.length ?? 0;
 };
 
 export const TokenListFooter = ({
@@ -75,6 +79,7 @@ export const TokenListFooter = ({
   const isTokenDetectionEnabled = useSelector(selectUseTokenDetection);
   const chainId = useSelector(selectChainId);
   const isAllNetworks = useSelector(selectIsAllNetworks);
+  const isPopularNetworks = useSelector(selectIsPopularNetwork);
 
   const styles = createStyles(colors);
 
@@ -103,6 +108,7 @@ export const TokenListFooter = ({
     isAllNetworks,
     allDetectedTokens,
     detectedTokens,
+    isPopularNetworks,
   );
 
   const areTokensDetected = tokenCount > 0;

app/components/UI/Tokens/TokensBottomSheet/TokenFilterBottomSheet.test.tsx

@@ -4,6 +4,7 @@ import { TokenFilterBottomSheet } from './TokenFilterBottomSheet';
 import { useSelector } from 'react-redux';
 import Engine from '../../../../core/Engine';
 import {
+  selectAllPopularNetworkConfigurations,
   selectChainId,
   selectNetworkConfigurations,
 } from '../../../../selectors/networkController';
@@ -102,6 +103,8 @@ describe('TokenFilterBottomSheet', () => {
         return {}; // default to show all networks
       } else if (selector === selectNetworkConfigurations) {
         return mockNetworks; // default to show all networks
+      } else if (selector === selectAllPopularNetworkConfigurations) {
+        return mockNetworks; // default to show all networks
       }
       return null;
     });
@@ -114,14 +117,14 @@ describe('TokenFilterBottomSheet', () => {
   it('renders correctly with the default option (All Networks) selected', () => {
     const { queryByText } = render(<TokenFilterBottomSheet />);
 
-    expect(queryByText('All Networks')).toBeTruthy();
+    expect(queryByText('Popular networks')).toBeTruthy();
     expect(queryByText('Current Network')).toBeTruthy();
   });
 
   it('sets filter to All Networks and closes bottom sheet when first option is pressed', async () => {
     const { queryByText } = render(<TokenFilterBottomSheet />);
 
-    fireEvent.press(queryByText('All Networks'));
+    fireEvent.press(queryByText('Popular networks'));
 
     await waitFor(() => {
       expect(
@@ -152,6 +155,8 @@ describe('TokenFilterBottomSheet', () => {
         return { '0x1': true }; // filter by current network
       } else if (selector === selectNetworkConfigurations) {
         return mockNetworks;
+      } else if (selector === selectAllPopularNetworkConfigurations) {
+        return mockNetworks;
       }
       return null;
     });

app/components/UI/Tokens/TokensBottomSheet/TokenFilterBottomSheet.tsx

@@ -2,8 +2,8 @@ import React, { useRef, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import {
   selectChainId,
-  selectNetworkConfigurations,
   selectIsAllNetworks,
+  selectAllPopularNetworkConfigurations,
 } from '../../../../selectors/networkController';
 import { selectTokenNetworkFilter } from '../../../../selectors/preferencesController';
 import BottomSheet, {
@@ -29,7 +29,7 @@ enum FilterOption {
 
 const TokenFilterBottomSheet = () => {
   const sheetRef = useRef<BottomSheetRef>(null);
-  const allNetworks = useSelector(selectNetworkConfigurations);
+  const allNetworks = useSelector(selectAllPopularNetworkConfigurations);
   const { colors } = useTheme();
   const styles = createStyles(colors);
 
@@ -79,7 +79,9 @@ const TokenFilterBottomSheet = () => {
           verticalAlignment={VerticalAlignment.Center}
         >
           <Text style={styles.bottomSheetText}>
-            {strings('wallet.all_networks')}
+            {`${strings('app_settings.popular')} ${strings(
+              'app_settings.networks',
+            )}`}
           </Text>
         </ListItemSelect>
         <ListItemSelect

app/components/UI/Tokens/__snapshots__/index.test.tsx.snap

@@ -366,7 +366,7 @@ exports[`Tokens Portfolio View should match the snapshot when portfolio view is
                                 }
                               }
                             >
-                              All Networks
+                              Ethereum Main Network
                             </Text>
                             <SvgMock
                               color="#141618"

app/components/UI/Tokens/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, LegacyRef, useMemo, useEffect } from 'react';
+import React, { useRef, useState, LegacyRef, useMemo } from 'react';
 import { Hex } from '@metamask/utils';
 import { View, Text } from 'react-native';
 import ActionSheet from '@metamask/react-native-actionsheet';
@@ -15,6 +15,7 @@ import Logger from '../../../util/Logger';
 import {
   selectChainId,
   selectIsAllNetworks,
+  selectIsPopularNetwork,
   selectNetworkConfigurations,
 } from '../../../selectors/networkController';
 import {
@@ -138,10 +139,15 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
   const multiChainMarketData = useSelector(selectTokenMarketData);
   const multiChainTokenBalance = useSelector(selectTokensBalances);
   const multiChainCurrencyRates = useSelector(selectCurrencyRates);
+  const isPopularNetwork = useSelector(selectIsPopularNetwork);
 
   const styles = createStyles(colors);
 
   const tokensList = useMemo((): TokenI[] => {
+    // if it is not popular network, display tokens only for current network
+    const filteredAssetsParam = isPopularNetwork
+      ? tokenNetworkFilter
+      : { [currentChainId]: true };
     if (isPortfolioViewEnabled()) {
       // MultiChain implementation
       const allTokens = Object.values(
@@ -183,7 +189,7 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
       const filteredAssets = filterAssets(tokensToDisplay, [
         {
           key: 'chainId',
-          opts: tokenNetworkFilter,
+          opts: filteredAssetsParam,
           filterCallback: 'inclusive',
         },
       ]);
@@ -289,6 +295,7 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
     tokens,
     // Dependencies for multichain implementation
     selectedAccountTokensChains,
+    isPopularNetwork,
     tokenNetworkFilter,
     currentChainId,
     multiChainCurrencyRates,
@@ -404,15 +411,6 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
   const onActionSheetPress = (index: number) =>
     index === 0 ? removeToken() : null;
 
-  useEffect(() => {
-    const { PreferencesController } = Engine.context;
-    if (isTestNet(currentChainId)) {
-      PreferencesController.setTokenNetworkFilter({
-        [currentChainId]: true,
-      });
-    }
-  }, [currentChainId]);
-
   return (
     <View
       style={styles.wrapper}
@@ -425,20 +423,22 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
               testID={WalletViewSelectorsIDs.TOKEN_NETWORK_FILTER}
               label={
                 <Text style={styles.controlButtonText} numberOfLines={1}>
-                  {isAllNetworks
-                    ? strings('wallet.all_networks')
+                  {isAllNetworks && isPopularNetwork
+                    ? `${strings('app_settings.popular')} ${strings(
+                        'app_settings.networks',
+                      )}`
                     : networkName ?? strings('wallet.current_network')}
                 </Text>
               }
-              isDisabled={isTestNet(currentChainId)}
+              isDisabled={isTestNet(currentChainId) || !isPopularNetwork}
               onPress={showFilterControls}
               endIconName={IconName.ArrowDown}
               style={
-                isTestNet(currentChainId)
+                isTestNet(currentChainId) || !isPopularNetwork
                   ? styles.controlButtonDisabled
                   : styles.controlButton
               }
-              disabled={isTestNet(currentChainId)}
+              disabled={isTestNet(currentChainId) || !isPopularNetwork}
             />
             <View style={styles.controlButtonInnerWrapper}>
               <ButtonIcon

app/components/Views/DetectedTokens/index.tsx

@@ -36,6 +36,7 @@ import {
 import {
   selectChainId,
   selectIsAllNetworks,
+  selectIsPopularNetwork,
   selectNetworkClientId,
   selectNetworkConfigurations,
 } from '../../../selectors/networkController';
@@ -98,6 +99,7 @@ const DetectedTokens = () => {
   ) as TokenI[];
   const allNetworks = useSelector(selectNetworkConfigurations);
   const chainId = useSelector(selectChainId);
+  const isPopularNetworks = useSelector(selectIsPopularNetwork);
   const selectedNetworkClientId = useSelector(selectNetworkClientId);
   const [ignoredTokens, setIgnoredTokens] = useState<IgnoredTokensByAddress>(
     {},
@@ -108,7 +110,7 @@ const DetectedTokens = () => {
   const styles = createStyles(colors);
 
   const currentDetectedTokens =
-    isPortfolioViewEnabled() && isAllNetworks
+    isPortfolioViewEnabled() && isAllNetworks && isPopularNetworks
       ? allDetectedTokens
       : detectedTokens;
 

app/components/Views/NetworkSelector/NetworkSelector.tsx

@@ -27,8 +27,8 @@ import BottomSheet, {
 import { IconName } from '../../../component-library/components/Icons/Icon';
 import { useSelector } from 'react-redux';
 import {
-  selectNetworkConfigurations,
   selectIsAllNetworks,
+  selectNetworkConfigurations,
 } from '../../../selectors/networkController';
 import { selectShowTestNetworks } from '../../../selectors/preferencesController';
 import Networks, {
@@ -126,7 +126,7 @@ const NetworkSelector = () => {
   const styles = createStyles(colors);
   const sheetRef = useRef<BottomSheetRef>(null);
   const showTestNetworks = useSelector(selectShowTestNetworks);
-  const isAllNetworks = useSelector(selectIsAllNetworks);
+  const isAllNetwork = useSelector(selectIsAllNetworks);
 
   const networkConfigurations = useSelector(selectNetworkConfigurations);
 
@@ -179,14 +179,19 @@ const NetworkSelector = () => {
 
   const setTokenNetworkFilter = useCallback(
     (chainId: string) => {
+      const isPopularNetwork =
+        chainId === CHAIN_IDS.MAINNET ||
+        chainId === CHAIN_IDS.LINEA_MAINNET ||
+        PopularList.some((network) => network.chainId === chainId);
+
       const { PreferencesController } = Engine.context;
-      if (!isAllNetworks) {
+      if (!isAllNetwork && isPopularNetwork) {
         PreferencesController.setTokenNetworkFilter({
           [chainId]: true,
         });
       }
     },
-    [isAllNetworks],
+    [isAllNetwork],
   );
 
   const onRpcSelect = useCallback(

app/components/Views/Wallet/index.tsx

@@ -55,7 +55,6 @@ import {
   selectTokens,
   selectTokensByChainIdAndAddress,
 } from '../../../selectors/tokensController';
-import { selectTokenNetworkFilter } from '../../../selectors/preferencesController';
 import {
   NavigationProp,
   ParamListBase,
@@ -93,6 +92,7 @@ import { PortfolioBalance } from '../../UI/Tokens/TokenList/PortfolioBalance';
 import useCheckNftAutoDetectionModal from '../../hooks/useCheckNftAutoDetectionModal';
 import useCheckMultiRpcModal from '../../hooks/useCheckMultiRpcModal';
 import { selectContractBalances } from '../../../selectors/tokenBalancesController';
+import { selectTokenNetworkFilter } from '../../../selectors/preferencesController';
 
 const createStyles = ({ colors, typography }: Theme) =>
   StyleSheet.create({
@@ -310,6 +310,7 @@ const Wallet = ({
 
   const networkImageSource = useSelector(selectNetworkImageSource);
   const tokenNetworkFilter = useSelector(selectTokenNetworkFilter);
+
   /**
    * Shows Nft auto detect modal if the user is on mainnet, never saw the modal and have nft detection off
    */