feat: multi chain asset list

app/component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentageCrossChains.tsx

@@ -0,0 +1,183 @@
+import React, { useMemo } from 'react';
+import {
+  TextColor,
+  TextVariant,
+} from '../../../../component-library/components/Texts/Text';
+import SensitiveText from '../../../../component-library/components/Texts/SensitiveText';
+import { View } from 'react-native';
+import { renderFiat } from '../../../../util/number';
+import { useSelector } from 'react-redux';
+import { selectCurrentCurrency } from '../../../../selectors/currencyRateController';
+import styleSheet from './AggregatedPercentage.styles';
+import { useStyles } from '../../../hooks';
+import {
+  FORMATTED_VALUE_PRICE_TEST_ID,
+  FORMATTED_PERCENTAGE_TEST_ID,
+} from './AggregatedPercentage.constants';
+import { toChecksumAddress, zeroAddress } from 'ethereumjs-util';
+import { selectTokenMarketData } from '../../../../selectors/tokenRatesController';
+import {
+  MarketDataMapping,
+  TokensWithBalances,
+} from '../../../../components/hooks/useGetFormattedTokensPerChain';
+
+export interface AggregatedPercentageProps {
+  ethFiat: number;
+  tokenFiat: number;
+  tokenFiat1dAgo: number;
+  ethFiat1dAgo: number;
+}
+
+export const getCalculatedTokenAmount1dAgo = (
+  tokenFiatBalance: number,
+  tokenPricePercentChange1dAgo: number,
+) =>
+  tokenPricePercentChange1dAgo !== undefined && tokenFiatBalance
+    ? tokenFiatBalance / (1 + tokenPricePercentChange1dAgo / 100)
+    : tokenFiatBalance ?? 0;
+
+const isValidAmount = (amount: number | null | undefined): boolean =>
+  amount !== null && amount !== undefined && !Number.isNaN(amount);
+
+const AggregatedPercentageCrossChains = ({
+  privacyMode = false,
+  totalFiatCrossChains,
+  tokenFiatBalancesCrossChains,
+}: {
+  privacyMode?: boolean;
+  totalFiatCrossChains: number;
+  tokenFiatBalancesCrossChains: {
+    chainId: string;
+    nativeFiatValue: number;
+    tokenFiatBalances: number[];
+    tokensWithBalances: TokensWithBalances[];
+  }[];
+}) => {
+  const crossChainMarketData: MarketDataMapping = useSelector(
+    selectTokenMarketData,
+  );
+
+  const totalFiat1dAgoCrossChains = useMemo(() => {
+    const getPerChainTotalFiat1dAgo = (
+      chainId: string,
+      tokenFiatBalances: number[],
+      tokensWithBalances: TokensWithBalances[],
+    ) => {
+      const totalPerChain1dAgoERC20 = tokensWithBalances.reduce(
+        (total1dAgo: number, item: { address: string }, idx: number) => {
+          const found =
+            crossChainMarketData?.[chainId]?.[toChecksumAddress(item.address)];
+
+          const tokenFiat1dAgo = getCalculatedTokenAmount1dAgo(
+            tokenFiatBalances[idx],
+            found?.pricePercentChange1d,
+          );
+          return total1dAgo + Number(tokenFiat1dAgo);
+        },
+        0,
+      );
+
+      return totalPerChain1dAgoERC20;
+    };
+    return tokenFiatBalancesCrossChains.reduce(
+      (
+        total1dAgoCrossChains: number,
+        item: {
+          chainId: string;
+          nativeFiatValue: number;
+          tokenFiatBalances: number[];
+          tokensWithBalances: TokensWithBalances[];
+        },
+      ) => {
+        const perChainERC20Total = getPerChainTotalFiat1dAgo(
+          item.chainId,
+          item.tokenFiatBalances,
+          item.tokensWithBalances,
+        );
+
+        const nativePricePercentChange1d =
+          crossChainMarketData?.[item.chainId]?.[zeroAddress()]
+            ?.pricePercentChange1d;
+
+        const nativeFiat1dAgo = getCalculatedTokenAmount1dAgo(
+          item.nativeFiatValue,
+          nativePricePercentChange1d,
+        );
+        return (
+          total1dAgoCrossChains + perChainERC20Total + Number(nativeFiat1dAgo)
+        );
+      },
+      0,
+    );
+  }, [tokenFiatBalancesCrossChains, crossChainMarketData]);
+
+  const totalCrossChainBalance: number = Number(totalFiatCrossChains);
+  const crossChainTotalBalance1dAgo = totalFiat1dAgoCrossChains;
+
+  const amountChangeCrossChains =
+    totalCrossChainBalance - crossChainTotalBalance1dAgo;
+
+  const percentageChangeCrossChains =
+    (amountChangeCrossChains / crossChainTotalBalance1dAgo) * 100 || 0;
+
+  const validFormattedPercentChange = `(${
+    percentageChangeCrossChains >= 0 ? '+' : ''
+  }${percentageChangeCrossChains.toFixed(2)}%)`;
+
+  const formattedPercentChangeCrossChains = isValidAmount(
+    percentageChangeCrossChains,
+  )
+    ? validFormattedPercentChange
+    : '';
+  const currentCurrency = useSelector(selectCurrentCurrency);
+  const DECIMALS_TO_SHOW = 2;
+
+  const validFormattedAmountChange = `${
+    amountChangeCrossChains >= 0 ? '+' : ''
+  }${renderFiat(amountChangeCrossChains, currentCurrency, DECIMALS_TO_SHOW)} `;
+  const formattedAmountChangeCrossChains = isValidAmount(
+    amountChangeCrossChains,
+  )
+    ? validFormattedAmountChange
+    : '';
+
+  let percentageTextColor;
+
+  if (!privacyMode) {
+    if (percentageChangeCrossChains === 0) {
+      percentageTextColor = TextColor.Default;
+    } else if (percentageChangeCrossChains > 0) {
+      percentageTextColor = TextColor.Success;
+    } else {
+      percentageTextColor = TextColor.Error;
+    }
+  } else {
+    percentageTextColor = TextColor.Alternative;
+  }
+  const { styles } = useStyles(styleSheet, {});
+
+  return (
+    <View style={styles.wrapper}>
+      <SensitiveText
+        isHidden={privacyMode}
+        length="10"
+        color={percentageTextColor}
+        variant={TextVariant.BodyMDMedium}
+        testID={FORMATTED_VALUE_PRICE_TEST_ID}
+      >
+        {formattedAmountChangeCrossChains}
+      </SensitiveText>
+      <SensitiveText
+        isHidden={privacyMode}
+        length="10"
+        color={percentageTextColor}
+        variant={TextVariant.BodyMDMedium}
+        testID={FORMATTED_PERCENTAGE_TEST_ID}
+      >
+        {formattedPercentChangeCrossChains}
+      </SensitiveText>
+    </View>
+  );
+};
+
+export default AggregatedPercentageCrossChains;

app/component-library/components-temp/Price/AggregatedPercentage/__snapshots__/AggregatedPercentageCrossChains.test.tsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AggregatedPercentageCrossChains should match snapshot 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "flexDirection": "row",
+    }
+  }
+>
+  <Text
+    accessibilityRole="text"
+    style={
+      {
+        "color": "#141618",
+        "fontFamily": "EuclidCircularB-Medium",
+        "fontSize": 14,
+        "fontWeight": "500",
+        "letterSpacing": 0,
+        "lineHeight": 22,
+      }
+    }
+    testID="formatted-value-price-test-id"
+  >
+    +0 USD 
+  </Text>
+  <Text
+    accessibilityRole="text"
+    style={
+      {
+        "color": "#141618",
+        "fontFamily": "EuclidCircularB-Medium",
+        "fontSize": 14,
+        "fontWeight": "500",
+        "letterSpacing": 0,
+        "lineHeight": 22,
+      }
+    }
+    testID="formatted-percentage-test-id"
+  >
+    (+0.00%)
+  </Text>
+</View>
+`;

app/components/UI/AccountApproval/index.test.tsx

@@ -48,6 +48,13 @@ const mockInitialState = {
           },
         },
       },
+      TokensController: {
+        allTokens: {
+          '0x1': {
+            '0xc4966c0d659d99699bfd7eb54d8fafee40e4a756': [],
+          },
+        },
+      },
     },
   },
 };

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

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

app/components/UI/AssetOverview/AssetOverview.test.tsx

@@ -10,8 +10,13 @@ import {
   MOCK_ADDRESS_2,
 } from '../../../util/test/accountsControllerTestUtils';
 import { createBuyNavigationDetails } from '../Ramp/routes/utils';
-import { getDecimalChainId } from '../../../util/networks';
+import {
+  getDecimalChainId,
+  isPortfolioViewEnabled,
+} from '../../../util/networks';
 import { TokenOverviewSelectorsIDs } from '../../../../e2e/selectors/TokenOverview.selectors';
+// eslint-disable-next-line import/no-namespace
+import * as networks from '../../../util/networks';
 
 const MOCK_CHAIN_ID = '0x1';
 
@@ -43,6 +48,15 @@ const mockInitialState = {
         },
       } as const,
     },
+    CurrencyRateController: {
+      conversionRate: {
+        ETH: {
+          conversionDate: 1732572535.47,
+          conversionRate: 3432.53,
+          usdConversionRate: 3432.53,
+        },
+      },
+    },
   },
   settings: {
     primaryCurrency: 'ETH',
@@ -51,6 +65,15 @@ const mockInitialState = {
 
 const mockNavigate = jest.fn();
 const navigate = mockNavigate;
+const mockNetworkConfiguration = {
+  rpcEndpoints: [
+    {
+      networkClientId: 'mockNetworkClientId',
+    },
+  ],
+  defaultRpcEndpointIndex: 0,
+};
+
 jest.mock('@react-navigation/native', () => {
   const actualNav = jest.requireActual('@react-navigation/native');
   return {
@@ -72,9 +95,21 @@ jest.mock('../../hooks/useStyles', () => ({
   }),
 }));
 
+jest.mock('../../../core/Engine', () => ({
+  context: {
+    NetworkController: {
+      getNetworkConfigurationByChainId: jest
+        .fn()
+        .mockReturnValue(mockNetworkConfiguration),
+      setActiveNetwork: jest.fn().mockResolvedValue(undefined),
+    },
+  },
+}));
+
 const asset = {
   balance: '400',
   balanceFiat: '1500',
+  chainId: MOCK_CHAIN_ID,
   logo: 'https://upload.wikimedia.org/wikipedia/commons/0/05/Ethereum_logo_2014.svg',
   symbol: 'ETH',
   name: 'Ethereum',
@@ -87,6 +122,10 @@ const asset = {
 };
 
 describe('AssetOverview', () => {
+  beforeEach(() => {
+    jest.spyOn(networks, 'isPortfolioViewEnabled').mockReturnValue(false);
+  });
+
   it('should render correctly', async () => {
     const container = renderWithProvider(
       <AssetOverview asset={asset} displayBuyButton displaySwapsButton />,
@@ -95,6 +134,16 @@ describe('AssetOverview', () => {
     expect(container).toMatchSnapshot();
   });
 
+  it('should render correctly when portfolio view is enabled', async () => {
+    jest.spyOn(networks, 'isPortfolioViewEnabled').mockReturnValue(true);
+
+    const container = renderWithProvider(
+      <AssetOverview asset={asset} displayBuyButton displaySwapsButton />,
+      { state: mockInitialState },
+    );
+    expect(container).toMatchSnapshot();
+  });
+
   it('should handle buy button press', async () => {
     const { getByTestId } = renderWithProvider(
       <AssetOverview asset={asset} displayBuyButton displaySwapsButton />,
@@ -133,13 +182,34 @@ describe('AssetOverview', () => {
     const swapButton = getByTestId('token-swap-button');
     fireEvent.press(swapButton);
 
-    expect(navigate).toHaveBeenCalledWith('Swaps', {
-      params: {
-        sourcePage: 'MainView',
-        sourceToken: asset.address,
-      },
-      screen: 'SwapsAmountView',
-    });
+    if (isPortfolioViewEnabled()) {
+      expect(navigate).toHaveBeenCalledTimes(3);
+      expect(navigate).toHaveBeenNthCalledWith(1, 'RampBuy', {
+        screen: 'GetStarted',
+        params: {
+          address: asset.address,
+          chainId: getDecimalChainId(MOCK_CHAIN_ID),
+        },
+      });
+      expect(navigate).toHaveBeenNthCalledWith(2, 'SendFlowView', {});
+      expect(navigate).toHaveBeenNthCalledWith(3, 'Swaps', {
+        screen: 'SwapsAmountView',
+        params: {
+          sourcePage: 'MainView',
+          address: asset.address,
+          chainId: MOCK_CHAIN_ID,
+        },
+      });
+    } else {
+      expect(navigate).toHaveBeenCalledWith('Swaps', {
+        screen: 'SwapsAmountView',
+        params: {
+          sourcePage: 'MainView',
+          sourceToken: asset.address,
+          chainId: '0x1',
+        },
+      });
+    }
   });
 
   it('should not render swap button if displaySwapsButton is false', async () => {