feat: add aggregated comp

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import { fontStyles } from '../../../../styles/common';
+import Text from '../../../../component-library/components/Texts/Text';
+import { View, StyleSheet } from 'react-native';
+import { useTheme } from '../../../../util/theme';
+import { Colors } from '../../../../util/theme/models';
+import { renderFiat } from '../../../../util/number';
+import { useSelector } from 'react-redux';
+import { selectCurrentCurrency } from '../../../../selectors/currencyRateController';
+
+const createStyles = (colors: Colors) =>
+  StyleSheet.create({
+    wrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    balancePositiveStyle: {
+      color: colors.success.default,
+      ...fontStyles.normal,
+      textTransform: 'uppercase',
+    },
+    balanceNegativeStyle: {
+      color: colors.error.default,
+      ...fontStyles.normal,
+      textTransform: 'uppercase',
+    },
+  });
+
+const isValidAmount = (amount: number | null | undefined): boolean =>
+  amount !== null && amount !== undefined && !Number.isNaN(amount);
+
+const AggregatedPercentage = ({
+  ethFiat,
+  tokenFiat,
+  tokenFiat1dAgo,
+  ethFiat1dAgo,
+}: {
+  ethFiat: number;
+  tokenFiat: number;
+  tokenFiat1dAgo: number;
+  ethFiat1dAgo: number;
+}) => {
+  const { colors } = useTheme();
+  const styles = createStyles(colors);
+  const currentCurrency = useSelector(selectCurrentCurrency);
+  const DECIMALS_TO_SHOW = 2;
+
+  const totalBalance = ethFiat + tokenFiat;
+  const totalBalance1dAgo = ethFiat1dAgo + tokenFiat1dAgo;
+
+  const amountChange = totalBalance - totalBalance1dAgo;
+  const percentageChange =
+    ((totalBalance - totalBalance1dAgo) / totalBalance1dAgo) * 100;
+
+  const percentageStyle =
+    amountChange && amountChange >= 0
+      ? styles.balancePositiveStyle
+      : styles.balanceNegativeStyle;
+
+  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}>
+      <Text style={percentageStyle}>{formattedValuePrice}</Text>
+      <Text style={percentageStyle}>{formattedPercentage}</Text>
+    </View>
+  );
+};
+
+export default AggregatedPercentage;

app/component-library/components-temp/Price/AggregatedPercentage/index.ts

@@ -0,0 +1 @@
+export { default } from './AgregatedPercentage';

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

@@ -73,6 +73,13 @@ const initialState = {
           '0x01': 0.005,
           '0x02': 0.005,
         },
+        marketData: {
+          '0x1': {
+            '0x0': { value: 0.005, pricePercentChange1d: 0.2 },
+            '0x01': { value: 0.005, pricePercentChange1d: 0.2 },
+            '0x02': { value: 0.005, pricePercentChange1d: 0.2 },
+          },
+        },
       },
       CurrencyRateController: {
         currentCurrency: 'USD',
@@ -89,6 +96,11 @@ const initialState = {
           '0x02': new BN(0),
         },
       },
+      NetworkController: {
+        providerConfig: {
+          chainId: '0x1',
+        },
+      },
     },
   },
   settings: {
@@ -226,6 +238,11 @@ describe('Tokens', () => {
             contractExchangeRates: {
               '0x02': undefined,
             },
+            marketData: {
+              '0x1': {
+                '0x02': { value: undefined },
+              },
+            },
           },
           CurrencyRateController: {
             currentCurrency: 'USD',

app/components/UI/Tokens/index.tsx

@@ -69,7 +69,6 @@ import { useNavigation } from '@react-navigation/native';
 import { EngineState } from '../../../selectors/types';
 import { StackNavigationProp } from '@react-navigation/stack';
 import createStyles from './styles';
-import SkeletonText from '../Ramp/components/SkeletonText';
 import Routes from '../../../constants/navigation/Routes';
 import { TOKEN_BALANCE_LOADING, TOKEN_RATE_UNDEFINED } from './constants';
 import AppConstants from '../../../core/AppConstants';
@@ -108,6 +107,7 @@ import Box from '../../UI/Ramp/components/Box';
 import SheetHeader from '../../../../app/component-library/components/Sheet/SheetHeader';
 import { isPortfolioUrl } from '../../../../app/util/url';
 import PercentageChange from '../../../component-library/components-temp/Price/PercentageChange';
+import AggregatedPercentage from '../../../component-library/components-temp/Price/AggregatedPercentage';
 
 const Tokens: React.FC<TokensI> = ({ tokens }) => {
   const { colors } = useTheme();
@@ -356,6 +356,8 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
         balanceToFiatNumber(balance, conversionRate, exchangeRate),
     );
 
+    // console.log('balanceFiatCalculation ----', balanceFiatCalculation);
+
     const balanceFiat =
       balanceFiatCalculation >= 0.01 || balanceFiatCalculation === 0
         ? addCurrencySymbol(balanceFiatCalculation, currentCurrency)
@@ -628,7 +630,13 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
           >
             {fiatBalance}
           </Text>
-          <PercentageChange value={2} />
+
+          <AggregatedPercentage
+            ethFiat={balance?.ethFiat}
+            tokenFiat={balance?.tokenFiat}
+            tokenFiat1dAgo={balance?.tokenFiat1dAgo}
+            ethFiat1dAgo={balance?.ethFiat1dAgo}
+          />
         </View>
         <Button
           variant={ButtonVariants.Secondary}

app/components/Views/confirmations/Send/index.test.tsx

@@ -124,7 +124,9 @@ const initialState = {
         },
       },
       TokenRatesController: {
-        contractExchangeRates: {},
+        marketData: {
+          '0x1': {},
+        },
       },
       TransactionController: {
         methodData: {},

app/components/Views/confirmations/SendFlow/Amount/index.test.tsx

@@ -372,6 +372,11 @@ describe('Amount', () => {
             contractExchangeRates: {
               '0x514910771AF9Ca656af840dff83E8264EcF986CA': 0.005,
             },
+            marketData: {
+              '0x1': {
+                '0x514910771AF9Ca656af840dff83E8264EcF986CA': { value: 0.005 },
+              },
+            },
           },
           CurrencyRateController: {
             currentCurrency: 'usd',
@@ -472,6 +477,11 @@ describe('Amount', () => {
             contractExchangeRates: {
               '0x514910771AF9Ca656af840dff83E8264EcF986CA': 0.005,
             },
+            marketData: {
+              '0x1': {
+                '0x514910771AF9Ca656af840dff83E8264EcF986CA': { value: 0.005 },
+              },
+            },
           },
           CurrencyRateController: {
             currentCurrency: 'usd',
@@ -523,6 +533,9 @@ describe('Amount', () => {
           ...initialState.engine.backgroundState,
           TokenRatesController: {
             contractExchangeRates: {},
+            marketData: {
+              '0x1': {},
+            },
           },
           CurrencyRateController: {},
         },
@@ -564,6 +577,11 @@ describe('Amount', () => {
             contractExchangeRates: {
               '0x514910771AF9Ca656af840dff83E8264EcF986CA': 0.005,
             },
+            marketData: {
+              '0x1': {
+                '0x514910771AF9Ca656af840dff83E8264EcF986CA': { value: 0.005 },
+              },
+            },
           },
           CurrencyRateController: {},
         },
@@ -606,6 +624,9 @@ describe('Amount', () => {
           ...initialState.engine.backgroundState,
           TokenRatesController: {
             contractExchangeRates: {},
+            marketData: {
+              '0x1': {},
+            },
           },
           CurrencyRateController: {},
         },

app/components/Views/confirmations/SendFlow/Confirm/index.test.tsx

@@ -25,6 +25,11 @@ const mockInitialState = {
           '0xe64dD0AB5ad7e8C5F2bf6Ce75C34e187af8b920A': { balance: '0' },
         },
       },
+      TokenRatesController: {
+        marketData: {
+          '0x1': {},
+        },
+      },
       CurrencyRateController: {
         currentCurrency: 'USD',
         currencyRates: {

app/components/Views/confirmations/components/TransactionReview/TransactionReviewEIP1559Update/index.test.tsx

@@ -30,6 +30,11 @@ const initialState = {
         contractExchangeRates: {
           '0x326836cc6cd09B5aa59B81A7F72F25FcC0136b95': 1,
         },
+        marketData: {
+          '0x1': {
+            '0x326836cc6cd09B5aa59B81A7F72F25FcC0136b95': { value: 1 },
+          },
+        },
       },
       TokenBalancesController: {
         contractBalances: {

app/core/Engine.test.js

@@ -53,6 +53,13 @@ describe('Engine', () => {
           lib: 'original',
         },
       },
+      TokenRatesController: {
+        contractExchangeRates: {},
+        contractExchangeRatesByChainId: {},
+        marketData: {
+          '0x1': {},
+        },
+      },
     };
 
     expect(backgroundState).toStrictEqual(initialState);

app/core/Engine.ts

@@ -190,6 +190,7 @@ import {
   networkIdUpdated,
   networkIdWillUpdate,
 } from '../core/redux/slices/inpageProvider';
+import { zeroAddress } from 'ethereumjs-util';
 
 const NON_EMPTY = 'NON_EMPTY';
 
@@ -1426,6 +1427,8 @@ class Engine {
   getTotalFiatAccountBalance = (): {
     ethFiat: number;
     tokenFiat: number;
+    tokenFiat1dAgo: number;
+    ethFiat1dAgo: number;
   } => {
     const {
       CurrencyRateController,
@@ -1443,10 +1446,13 @@ class Engine {
       CurrencyRateController.state?.currencyRates?.[networkProvider?.ticker]
         ?.conversionRate ?? 0;
     const { accountsByChainId } = AccountTrackerController.state;
+    const { marketData: tokenExchangeRates } = TokenRatesController.state;
 
     const { tokens } = TokensController.state;
     let ethFiat = 0;
+    let ethFiat1dAgo = 0;
     let tokenFiat = 0;
+    let tokenFiat1dAgo = 0;
     const decimalsToShow = (currentCurrency === 'usd' && 2) || undefined;
     if (
       accountsByChainId?.[toHexadecimal(networkProvider.chainId)]?.[
@@ -1460,17 +1466,27 @@ class Engine {
         conversionRate,
         decimalsToShow,
       );
+
+      ethFiat1dAgo =
+        ethFiat +
+          (ethFiat *
+            tokenExchangeRates?.[networkProvider.chainId]?.[zeroAddress()]
+              ?.pricePercentChange1d) /
+            100 || 0;
     }
     if (tokens.length > 0) {
       const { contractBalances: tokenBalances } = TokenBalancesController.state;
-      const { contractExchangeRates: tokenExchangeRates } =
-        TokenRatesController.state;
+
       tokens.forEach(
         (item: { address: string; balance?: string; decimals: number }) => {
           const exchangeRate =
-            item.address in tokenExchangeRates
-              ? tokenExchangeRates[item.address]
+            item.address.toLowerCase() in
+            tokenExchangeRates[networkProvider.chainId]
+              ? tokenExchangeRates?.[networkProvider.chainId]?.[
+                  item.address.toLowerCase()
+                ]?.value
               : undefined;
+
           const tokenBalance =
             item.balance ||
             (item.address in tokenBalances
@@ -1487,14 +1503,26 @@ class Engine {
             exchangeRate,
             decimalsToShow,
           );
+
+          const tokenBalance1dAgo =
+            tokenBalanceFiat +
+              (tokenBalanceFiat *
+                tokenExchangeRates?.[networkProvider.chainId]?.[
+                  item.address.toLowerCase()
+                ]?.pricePercentChange1d) /
+                100 || 0;
+
           tokenFiat += tokenBalanceFiat;
+          tokenFiat1dAgo += tokenBalance1dAgo;
         },
       );
     }
 
     return {
       ethFiat: ethFiat ?? 0,
+      ethFiat1dAgo: ethFiat1dAgo ?? 0,
       tokenFiat: tokenFiat ?? 0,
+      tokenFiat1dAgo: tokenFiat1dAgo ?? 0,
     };
   };
 

app/selectors/tokenRatesController.ts

@@ -2,14 +2,28 @@
 import { createSelector } from 'reselect';
 import { TokenRatesState } from '@metamask/assets-controllers';
 import { RootState } from '../reducers';
+import { selectChainId } from './networkController';
 
 const selectTokenRatesControllerState = (state: RootState) =>
   state.engine.backgroundState.TokenRatesController;
 
 export const selectContractExchangeRates = createSelector(
   selectTokenRatesControllerState,
-  (tokenRatesControllerState: TokenRatesState) =>
-    tokenRatesControllerState.contractExchangeRates,
+  selectChainId,
+  (tokenRatesControllerState: TokenRatesState, chainId: `0x${string}`) => {
+    const contractMarketData = tokenRatesControllerState.marketData?.[chainId];
+
+    return Object.entries(contractMarketData).reduce(
+      (
+        acc: { [address: string]: number | undefined },
+        [address, marketData],
+      ) => {
+        acc[address] = marketData.value;
+        return acc;
+      },
+      {},
+    );
+  },
 );
 
 export const selectDataMarket = createSelector(