fix: add percent change for 24h on asset list

app/component-library/components-temp/Price/AggregatedPercentage/NonEvmAggregatedPercentage.test.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { mockTheme } from '../../../../util/theme';
+import { useSelector } from 'react-redux';
+import { selectCurrentCurrency } from '../../../../selectors/currencyRateController';
+import {
+  FORMATTED_VALUE_PRICE_TEST_ID,
+  FORMATTED_PERCENTAGE_TEST_ID,
+} from './AggregatedPercentage.constants';
+import NonEvmAggregatedPercentage from './NonEvmAggregatedPercentage';
+// eslint-disable-next-line import/no-namespace
+import * as multichain from '../../../../selectors/multichain/multichain';
+import { selectMultichainAssetsRates } from '../../../../selectors/multichain/multichain';
+
+const mockGetMultichainNetworkAggregatedBalance = {
+  balances: {
+    'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/slip44:501': {
+      amount: '1',
+      unit: 'SOL',
+    },
+    'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/token:2zMMhcVQEXDtdE6vsFS7S7D5oUodfJHE8vd1gnBouauv':
+      {
+        amount: '5',
+        unit: 'PENGU',
+      },
+    'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/token:EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v':
+      {
+        amount: '10',
+        unit: 'USDC',
+      },
+  },
+  fiatBalances: {
+    'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/slip44:501': '1',
+    'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/token:2zMMhcVQEXDtdE6vsFS7S7D5oUodfJHE8vd1gnBouauv':
+      '5.4',
+    'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/token:EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v':
+      '10.',
+  },
+  totalBalanceFiat: 16.4,
+  totalNativeTokenBalance: {
+    amount: '1',
+    unit: 'SOL',
+  },
+};
+
+const mockMultichainAssetsRatesPositive = {
+  'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/slip44:501': {
+    marketData: {
+      pricePercentChange: {
+        P1D: +1.1,
+      },
+    },
+    rate: '147.98',
+  },
+  'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/token:2zMMhcVQEXDtdE6vsFS7S7D5oUodfJHE8vd1gnBouauv':
+    {
+      marketData: {
+        pricePercentChange: {
+          P1D: +2.7,
+        },
+      },
+      rate: '0.00624788',
+    },
+  'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/token:EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v':
+    {
+      marketData: {
+        pricePercentChange: {
+          P1D: +0.5,
+        },
+      },
+      rate: '0.999998',
+    },
+};
+
+const mockMultichainAssetsRatesNegative = {
+  'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/slip44:501': {
+    marketData: {
+      pricePercentChange: {
+        P1D: -1.1,
+      },
+    },
+    rate: '147.98',
+  },
+  'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/token:2zMMhcVQEXDtdE6vsFS7S7D5oUodfJHE8vd1gnBouauv':
+    {
+      marketData: {
+        pricePercentChange: {
+          P1D: -2.7,
+        },
+      },
+      rate: '0.00624788',
+    },
+  'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/token:EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v':
+    {
+      marketData: {
+        pricePercentChange: {
+          P1D: -0.5,
+        },
+      },
+      rate: '0.999998',
+    },
+};
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+describe('NonEvmAggregatedPercentage', () => {
+  beforeEach(() => {
+    (useSelector as jest.Mock).mockImplementation((selector) => {
+      if (selector === selectCurrentCurrency) return 'USD';
+    });
+  });
+  afterEach(() => {
+    (useSelector as jest.Mock).mockClear();
+  });
+
+  it('renders positive percentage change correctly', () => {
+    jest
+      .spyOn(multichain, 'getMultichainNetworkAggregatedBalance')
+      .mockReturnValue(mockGetMultichainNetworkAggregatedBalance);
+    (useSelector as jest.Mock).mockImplementation((selector) => {
+      if (selector === selectCurrentCurrency) return 'USD';
+      if (selector === selectMultichainAssetsRates)
+        return mockMultichainAssetsRatesPositive;
+    });
+    const { getByText } = render(<NonEvmAggregatedPercentage />);
+
+    expect(getByText('(+1.25%)')).toBeTruthy();
+    expect(getByText('+0.2 USD')).toBeTruthy();
+
+    expect(getByText('(+1.25%)').props.style).toMatchObject({
+      color: mockTheme.colors.success.default,
+    });
+  });
+
+  it('renders negative percentage change correctly', () => {
+    jest
+      .spyOn(multichain, 'getMultichainNetworkAggregatedBalance')
+      .mockReturnValue(mockGetMultichainNetworkAggregatedBalance);
+    (useSelector as jest.Mock).mockImplementation((selector) => {
+      if (selector === selectCurrentCurrency) return 'USD';
+      if (selector === selectMultichainAssetsRates)
+        return mockMultichainAssetsRatesNegative;
+    });
+    const { getByText } = render(<NonEvmAggregatedPercentage />);
+
+    expect(getByText('(-1.27%)')).toBeTruthy();
+    expect(getByText('-0.21 USD')).toBeTruthy();
+
+    expect(getByText('(-1.27%)').props.style).toMatchObject({
+      color: mockTheme.colors.error.default,
+    });
+  });
+
+  it('renders correctly with privacy mode on', () => {
+    jest
+      .spyOn(multichain, 'getMultichainNetworkAggregatedBalance')
+      .mockReturnValue(mockGetMultichainNetworkAggregatedBalance);
+    (useSelector as jest.Mock).mockImplementation((selector) => {
+      if (selector === selectCurrentCurrency) return 'USD';
+      if (selector === selectMultichainAssetsRates)
+        return mockMultichainAssetsRatesNegative;
+    });
+    const { getByTestId } = render(<NonEvmAggregatedPercentage privacyMode />);
+
+    const formattedPercentage = getByTestId(FORMATTED_PERCENTAGE_TEST_ID);
+    const formattedValuePrice = getByTestId(FORMATTED_VALUE_PRICE_TEST_ID);
+
+    expect(formattedPercentage.props.children).toBe('••••••••••');
+    expect(formattedValuePrice.props.children).toBe('••••••••••');
+  });
+});

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

@@ -0,0 +1,146 @@
+import React 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 { DECIMALS_TO_SHOW } from '../../../../components/UI/Tokens/constants';
+import {
+  getMultichainNetworkAggregatedBalance,
+  selectMultichainAssets,
+  selectMultichainAssetsRates,
+  selectMultichainBalances,
+} from '../../../../selectors/multichain/multichain';
+import { selectSelectedInternalAccount } from '../../../../selectors/accountsController';
+import { selectSelectedNonEvmNetworkChainId } from '../../../../selectors/multichainNetworkController';
+import { InternalAccount } from '@metamask/keyring-internal-api';
+import { CaipAssetType } from '@metamask/keyring-api';
+import { getCalculatedTokenAmount1dAgo } from './AggregatedPercentageCrossChains';
+
+const isValidAmount = (amount: number | null | undefined): boolean =>
+  amount !== null && amount !== undefined && !Number.isNaN(amount);
+
+const NonEvmAggregatedPercentage = ({
+  privacyMode = false,
+}: {
+  privacyMode?: boolean;
+}) => {
+  const { styles } = useStyles(styleSheet, {});
+
+  const currentCurrency = useSelector(selectCurrentCurrency);
+
+  const account = useSelector(selectSelectedInternalAccount);
+  const multichainBalances = useSelector(selectMultichainBalances);
+  const multichainAssets = useSelector(selectMultichainAssets);
+  const multichainAssetsRates = useSelector(selectMultichainAssetsRates);
+  const nonEvmChainId = useSelector(selectSelectedNonEvmNetworkChainId);
+
+  const nonEvmAccountBalance = getMultichainNetworkAggregatedBalance(
+    account as unknown as InternalAccount,
+    multichainBalances,
+    multichainAssets,
+    multichainAssetsRates,
+    nonEvmChainId,
+  );
+
+  const nonEvmFiatBalancesArray = Object.entries(
+    nonEvmAccountBalance?.fiatBalances ?? {},
+  ).map(([id, amount]) => ({
+    id: id as CaipAssetType,
+    fiatAmount: Number(amount),
+  }));
+
+  const getNonEvmTotalFiat1dAgo = () => {
+    const totalNonEvm1dAgo = nonEvmFiatBalancesArray.reduce(
+      (total1dAgo: number, item: { id: CaipAssetType; fiatAmount: number }) => {
+        const pricePercentChange1d =
+          multichainAssetsRates?.[item.id]?.marketData?.pricePercentChange
+            .P1D ?? 0;
+        const splTokenFiat1dAgo = getCalculatedTokenAmount1dAgo(
+          Number(item.fiatAmount),
+          pricePercentChange1d,
+        );
+        return total1dAgo + Number(splTokenFiat1dAgo);
+      },
+      0,
+    );
+
+    return totalNonEvm1dAgo;
+  };
+
+  const totalNonEvmBalance = nonEvmAccountBalance?.totalBalanceFiat;
+
+  if (!totalNonEvmBalance) {
+    return null;
+  }
+
+  const totalNonEvmBalance1dAgo = getNonEvmTotalFiat1dAgo();
+  const amountChange = totalNonEvmBalance - totalNonEvmBalance1dAgo;
+
+  const percentageChange =
+    ((totalNonEvmBalance - totalNonEvmBalance1dAgo) / totalNonEvmBalance1dAgo) *
+      100 || 0;
+
+  let percentageTextColor = TextColor.Default;
+
+  if (!privacyMode) {
+    if (percentageChange === 0) {
+      percentageTextColor = TextColor.Default;
+    } else if (percentageChange > 0) {
+      percentageTextColor = TextColor.Success;
+    } else {
+      percentageTextColor = TextColor.Error;
+    }
+  } else {
+    percentageTextColor = TextColor.Alternative;
+  }
+
+  const formattedPercentage = isValidAmount(percentageChange)
+    ? `(${(percentageChange as number) >= 0 ? '+' : ''}${(
+        percentageChange as number
+      ).toFixed(2)}%)`
+    : '';
+
+  const formattedValuePrice = isValidAmount(amountChange)
+    ? `${(amountChange as number) >= 0 ? '+' : ''}${renderFiat(
+        amountChange,
+        currentCurrency,
+        DECIMALS_TO_SHOW,
+      )} `
+    : '';
+
+  return (
+    <View style={styles.wrapper}>
+      <SensitiveText
+        isHidden={privacyMode}
+        length="10"
+        color={percentageTextColor}
+        variant={TextVariant.BodyMDMedium}
+        testID={FORMATTED_VALUE_PRICE_TEST_ID}
+      >
+        {formattedValuePrice}
+      </SensitiveText>
+      <SensitiveText
+        isHidden={privacyMode}
+        length="10"
+        color={percentageTextColor}
+        variant={TextVariant.BodyMDMedium}
+        testID={FORMATTED_PERCENTAGE_TEST_ID}
+      >
+        {formattedPercentage}
+      </SensitiveText>
+    </View>
+  );
+};
+
+export default NonEvmAggregatedPercentage;

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

@@ -73,8 +73,8 @@ const mockInitialState = {
           logo: 'https://upload.wikimedia.org/wikipedia/commons/0/05/Ethereum_logo_2014.svg',
           name: 'Ethereum',
           symbol: 'ETH',
-          price: {}
-        }
+          price: {},
+        },
       ],
     },
   },
@@ -129,12 +129,14 @@ jest.mock('../../../core/Engine', () => ({
   },
 }));
 
-const mockAddPopularNetwork = jest.fn().mockImplementation(() => Promise.resolve());
+const mockAddPopularNetwork = jest
+  .fn()
+  .mockImplementation(() => Promise.resolve());
 jest.mock('../../../components/hooks/useAddNetwork', () => ({
   useAddNetwork: jest.fn().mockImplementation(() => ({
-      addPopularNetwork: mockAddPopularNetwork,
-      networkModal: null,
-    }))
+    addPopularNetwork: mockAddPopularNetwork,
+    networkModal: null,
+  })),
 }));
 
 const asset = {
@@ -437,6 +439,7 @@ describe('AssetOverview', () => {
       <AssetOverview
         asset={{
           ...asset,
+          address: 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/slip44:501',
           chainId: SolScope.Mainnet,
           isNative: true,
         }}
@@ -455,6 +458,13 @@ describe('AssetOverview', () => {
               MultichainNetworkController: {
                 selectedMultichainNetworkChainId: SolScope.Mainnet,
               },
+              MultichainAssetsRatesController: {
+                conversionRates: {
+                  'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/slip44:501': {
+                    rate: '151.23',
+                  },
+                },
+              },
             },
           },
         },
@@ -488,12 +498,15 @@ describe('AssetOverview', () => {
         destinationToken: assetFromSearch.address,
         sourcePage: 'MainView',
         chainId: assetFromSearch.chainId,
-      }
+      },
     });
   });
 
   it('should prompt to add the network if coming from search and on a different chain', async () => {
-    (Engine.context.NetworkController.getNetworkConfigurationByChainId as jest.Mock).mockReturnValueOnce(null);
+    (
+      Engine.context.NetworkController
+        .getNetworkConfigurationByChainId as jest.Mock
+    ).mockReturnValueOnce(null);
     const differentChainAssetFromSearch = {
       ...assetFromSearch,
       chainId: '0xa',