feat: multi chain list and network filter (experimental)

android/.project

@@ -14,4 +14,15 @@
 	<natures>
 		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
 	</natures>
+	<filteredResources>
+		<filter>
+			<id>1731607498998</id>
+			<name></name>
+			<type>30</type>
+			<matcher>
+				<id>org.eclipse.core.resources.regexFilterMatcher</id>
+				<arguments>node_modules|\.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
+			</matcher>
+		</filter>
+	</filteredResources>
 </projectDescription>

android/.settings/org.eclipse.buildship.core.prefs

@@ -1,2 +1,13 @@
+arguments=
+auto.sync=false
+build.scans.enabled=false
+connection.gradle.distribution=GRADLE_DISTRIBUTION(WRAPPER)
 connection.project.dir=
 eclipse.preferences.version=1
+gradle.user.home=
+java.home=
+jvm.arguments=
+offline.mode=false
+override.workspace.settings=false
+show.console.view=false
+show.executions.view=false

app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.test.tsx

@@ -38,8 +38,12 @@ const mockInitialState: DeepPartial<RootState> = {
         },
       },
       TokenBalancesController: {
-        contractBalances: {
-          '0x326836cc6cd09B5aa59B81A7F72F25FcC0136b95': '0x5',
+        tokenBalances: {
+          '0x326836cc6cd09B5aa59B81A7F72F25FcC0136b95': {
+            '0x5': {
+              '0x326836cc6cd09B5aa59B81A7F72F25FcC0136b95': '0x2b46',
+            },
+          },
         },
       },
       AccountsController: MOCK_ACCOUNTS_CONTROLLER_STATE,

app/components/UI/AssetElement/index.tsx

@@ -94,8 +94,7 @@ const AssetElement: React.FC<AssetElementProps> = ({
         {balance && (
           <SensitiveText
             variant={
-              asset?.hasBalanceError ||
-              asset.balanceFiat === TOKEN_RATE_UNDEFINED
+              asset?.hasBalanceError
                 ? TextVariant.BodySM
                 : TextVariant.BodyLGMedium
             }

app/components/UI/AssetOverview/Price/Price.tsx

@@ -90,7 +90,10 @@ const Price = ({
           <Text variant={TextVariant.BodyMDMedium}>{asset.symbol}</Text>
         )}
         {!isNaN(price) && (
-          <Text testID={TokenOverviewSelectorsIDs.TOKEN_PRICE} variant={TextVariant.HeadingLG}>
+          <Text
+            testID={TokenOverviewSelectorsIDs.TOKEN_PRICE}
+            variant={TextVariant.HeadingLG}
+          >
             {isLoading ? (
               <View style={styles.loadingPrice}>
                 <SkeletonPlaceholder>

app/components/UI/NetworkAssetLogo/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { ChainId } from '@metamask/controller-utils';
+import TokenIcon from '../Swaps/components/TokenIcon';
+
+interface NetworkAssetLogoProps {
+  chainId: string;
+  ticker: string;
+  style: object;
+  big: boolean;
+  biggest: boolean;
+  testID: string;
+}
+
+function NetworkAssetLogo({
+  chainId,
+  ticker,
+  style,
+  big,
+  biggest,
+  testID,
+}: NetworkAssetLogoProps) {
+  if (chainId === ChainId.mainnet) {
+    return (
+      <TokenIcon
+        big={big}
+        biggest={biggest}
+        symbol={'ETH'}
+        style={style}
+        testID={testID}
+      />
+    );
+  }
+  return (
+    <TokenIcon
+      big={big}
+      biggest={biggest}
+      symbol={ticker}
+      style={style}
+      testID={testID}
+    />
+  );
+}
+
+export default NetworkAssetLogo;

app/components/UI/NetworkModal/index.tsx

@@ -109,6 +109,23 @@ const NetworkModals = (props: NetworkProps) => {
     return true;
   };
 
+  const customNetworkInformation = {
+    chainId,
+    blockExplorerUrl,
+    chainName: nickname,
+    rpcUrl,
+    icon: imageUrl,
+    ticker,
+    alerts,
+  };
+
+  const onUpdateNetworkFilter = useCallback(() => {
+    const { PreferencesController } = Engine.context;
+    PreferencesController.setTokenNetworkFilter({
+      [customNetworkInformation.chainId]: true,
+    });
+  }, [customNetworkInformation.chainId]);
+
   const addNetwork = async () => {
     const isValidUrl = validateRpcUrl(rpcUrl);
     if (showPopularNetworkModal) {
@@ -172,16 +189,6 @@ const NetworkModals = (props: NetworkProps) => {
     selectNetworkConfigurations,
   );
 
-  const customNetworkInformation = {
-    chainId,
-    blockExplorerUrl,
-    chainName: nickname,
-    rpcUrl,
-    icon: imageUrl,
-    ticker,
-    alerts,
-  };
-
   const checkNetwork = useCallback(async () => {
     if (useSafeChainsListValidation) {
       const alertsNetwork = await checkSafeNetwork(
@@ -245,6 +252,7 @@ const NetworkModals = (props: NetworkProps) => {
     }
 
     if (networkClientId) {
+      onUpdateNetworkFilter();
       await NetworkController.setActiveNetwork(networkClientId);
     }
 
@@ -270,7 +278,7 @@ const NetworkModals = (props: NetworkProps) => {
     const { networkClientId } =
       updatedNetwork?.rpcEndpoints?.[updatedNetwork.defaultRpcEndpointIndex] ??
       {};
-
+    onUpdateNetworkFilter();
     await NetworkController.setActiveNetwork(networkClientId);
   };
 
@@ -339,6 +347,7 @@ const NetworkModals = (props: NetworkProps) => {
         addedNetwork?.rpcEndpoints?.[addedNetwork.defaultRpcEndpointIndex] ??
         {};
 
+      onUpdateNetworkFilter();
       NetworkController.setActiveNetwork(networkClientId);
     }
     onClose();

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

@@ -8,7 +8,10 @@ import Text, {
 import { WalletViewSelectorsIDs } from '../../../../../../e2e/selectors/wallet/WalletView.selectors';
 import { strings } from '../../../../../../locales/i18n';
 import { useSelector } from 'react-redux';
-import { selectDetectedTokens } from '../../../../../selectors/tokensController';
+import {
+  selectDetectedTokens,
+  selectAllDetectedTokensFlat,
+} from '../../../../../selectors/tokensController';
 import { isZero } from '../../../../../util/lodash';
 import useRampNetwork from '../../../Ramp/hooks/useRampNetwork';
 import { createBuyNavigationDetails } from '../../../Ramp/routes/utils';
@@ -23,9 +26,15 @@ import {
   useMetrics,
 } from '../../../../../components/hooks/useMetrics';
 import { getDecimalChainId } from '../../../../../util/networks';
-import { selectChainId } from '../../../../../selectors/networkController';
+import {
+  selectChainId,
+  selectNetworkConfigurations,
+} from '../../../../../selectors/networkController';
 import { TokenI } from '../../types';
-import { selectUseTokenDetection } from '../../../../../selectors/preferencesController';
+import {
+  selectUseTokenDetection,
+  selectTokenNetworkFilter,
+} from '../../../../../selectors/preferencesController';
 
 interface TokenListFooterProps {
   tokens: TokenI[];
@@ -34,6 +43,21 @@ interface TokenListFooterProps {
   isAddTokenEnabled: boolean;
 }
 
+const isPortfolioViewEnabled = process.env.PORTFOLIO_VIEW === 'true';
+
+const getDetectedTokensCount = (
+  isPortfolioEnabled: boolean,
+  isAllNetworksSelected: boolean,
+  allTokens: TokenI[],
+  filteredTokens: TokenI[] | undefined,
+): number => {
+  if (!isPortfolioEnabled) {
+    return filteredTokens?.length ?? 0;
+  }
+
+  return isAllNetworksSelected ? allTokens.length : filteredTokens?.length ?? 0;
+};
+
 export const TokenListFooter = ({
   tokens,
   goToAddToken,
@@ -45,9 +69,19 @@ export const TokenListFooter = ({
   const { trackEvent } = useMetrics();
   const [isNetworkRampSupported, isNativeTokenRampSupported] = useRampNetwork();
 
-  const detectedTokens = useSelector(selectDetectedTokens);
+  const detectedTokens = useSelector(selectDetectedTokens) as TokenI[];
+  const allDetectedTokens = useSelector(
+    selectAllDetectedTokensFlat,
+  ) as TokenI[];
+
   const isTokenDetectionEnabled = useSelector(selectUseTokenDetection);
   const chainId = useSelector(selectChainId);
+  // TODO: Can probably create "isAllNetworks" selector for these
+  // since they are re-used in multiple places
+  const tokenNetworkFilter = useSelector(selectTokenNetworkFilter); // X
+  const allNetworks = useSelector(selectNetworkConfigurations); // X
+  const isAllNetworks =
+    Object.keys(tokenNetworkFilter).length === Object.keys(allNetworks).length; // X
 
   const styles = createStyles(colors);
 
@@ -67,10 +101,19 @@ export const TokenListFooter = ({
     });
   };
 
+  const tokenCount = getDetectedTokensCount(
+    isPortfolioViewEnabled,
+    isAllNetworks,
+    allDetectedTokens,
+    detectedTokens,
+  );
+
+  const areTokensDetected = tokenCount > 0;
+
   return (
     <>
       {/* renderTokensDetectedSection */}
-      {detectedTokens?.length !== 0 && isTokenDetectionEnabled && (
+      {areTokensDetected && isTokenDetectionEnabled && (
         <TouchableOpacity
           style={styles.tokensDetectedButton}
           onPress={showDetectedTokens}
@@ -80,8 +123,8 @@ export const TokenListFooter = ({
             testID={WalletViewSelectorsIDs.WALLET_TOKEN_DETECTION_LINK_BUTTON}
           >
             {strings('wallet.tokens_detected_in_account', {
-              tokenCount: detectedTokens.length,
-              tokensLabel: detectedTokens.length > 1 ? 'tokens' : 'token',
+              tokenCount,
+              tokensLabel: tokenCount > 1 ? 'tokens' : 'token',
             })}
           </Text>
         </TouchableOpacity>