Refactor/dashboard page

src/components/lists/ListMobileItem.tsx

@@ -1,7 +1,7 @@
 import { Box, Divider, Skeleton, Typography } from '@mui/material';
 import { ReactNode } from 'react';
 import { IsolatedEnabledBadge } from 'src/components/isolationMode/IsolatedBadge';
-import { useAssetCaps } from 'src/hooks/useAssetCaps';
+import { useAssetCapsSDK } from 'src/hooks/useAssetCapsSDK';
 import { CustomMarket } from 'src/ui-config/marketsConfig';
 
 import { Link, ROUTES } from '../primitives/Link';
@@ -38,7 +38,7 @@ export const ListMobileItem = ({
   isIsolated,
   onIconError,
 }: ListMobileItemProps) => {
-  const { supplyCap, borrowCap, debtCeiling } = useAssetCaps();
+  const { supplyCap, borrowCap, debtCeiling } = useAssetCapsSDK();
   return (
     <Box>
       <Divider />
@@ -75,6 +75,7 @@ export const ListMobileItem = ({
                     )}
                   </Box>
                 </Box>
+
                 {showSupplyCapTooltips && supplyCap.displayMaxedTooltip({ supplyCap })}
                 {showBorrowCapTooltips && borrowCap.displayMaxedTooltip({ borrowCap })}
                 {showDebtCeilingTooltips && debtCeiling.displayMaxedTooltip({ debtCeiling })}

src/hooks/app-data-provider/useAppDataProvider.tsx

@@ -1,4 +1,13 @@
-import type { EmodeMarketCategory, Market, MarketUserState, Reserve } from '@aave/graphql';
+import type {
+  EmodeMarketCategory,
+  Market,
+  MarketUserReserveBorrowPosition,
+  MarketUserReserveSupplyPosition,
+  MarketUserState,
+  PercentValue,
+  Reserve,
+  TokenAmount,
+} from '@aave/graphql';
 import { UserReserveData } from '@aave/math-utils';
 import { client } from 'pages/_app.page';
 import React, { PropsWithChildren, useContext } from 'react';
@@ -19,6 +28,8 @@ import { usePoolReservesHumanized } from '../pool/usePoolReserves';
 import { useUserPoolReservesHumanized } from '../pool/useUserPoolReserves';
 import { FormattedUserReserves } from '../pool/useUserSummaryAndIncentives';
 import { useMarketsData } from './useMarketsData';
+import { useUserBorrows } from './useUserBorrows';
+import { useUserSupplies } from './useUserSupplies';
 
 /**
  * removes the marketPrefix from a symbol
@@ -43,7 +54,17 @@ export type ComputedUserReserveData = FormattedUserReserves;
  * @deprecated Use ExtendedFormattedUser type from useExtendedUserSummaryAndIncentives hook
  */
 export type ExtendedFormattedUser = _ExtendedFormattedUser;
-export type ReserveWithId = Reserve & { id: string };
+export type ReserveWithId = Reserve & {
+  id: string;
+  supplyAPY?: number;
+  borrowAPY?: number;
+  underlyingBalance?: string;
+  usageAsCollateralEnabledOnUser?: boolean;
+  isCollateralPosition?: boolean;
+  canBeEnabledAsCollateral?: boolean;
+  apyPosition?: PercentValue;
+  balancePosition?: TokenAmount;
+};
 export interface AppDataContextType {
   loading: boolean;
   /** SDK market snapshot */
@@ -53,6 +74,8 @@ export interface AppDataContextType {
   borrowReserves: ReserveWithId[];
   eModeCategories: EmodeMarketCategory[];
   userState?: MarketUserState;
+  userSupplies?: MarketUserReserveSupplyPosition[];
+  userBorrows?: MarketUserReserveBorrowPosition[];
   /** Legacy fields (deprecated) kept temporarily for incremental migration */
   reserves: ComputedReserveData[];
   eModes: Record<number, EmodeCategory>;
@@ -79,6 +102,18 @@ export const AppDataProvider: React.FC<PropsWithChildren> = ({ children }) => {
     account: currentAccount,
   });
 
+  const { data: userSuppliesData, isPending: userSuppliesLoading } = useUserSupplies({
+    client,
+    marketData: currentMarketData,
+    account: currentAccount,
+  });
+
+  const { data: userBorrowsData, isPending: userBorrowsLoading } = useUserBorrows({
+    client,
+    marketData: currentMarketData,
+    account: currentAccount,
+  });
+
   const marketAddress = currentMarketData.addresses.LENDING_POOL.toLowerCase();
 
   const sdkMarket = data?.find((item) => item.address.toLowerCase() === marketAddress);
@@ -120,7 +155,12 @@ export const AppDataProvider: React.FC<PropsWithChildren> = ({ children }) => {
   const isReservesLoading = reservesDataLoading || formattedPoolReservesLoading;
   const isUserDataLoading = userReservesDataLoading || userSummaryLoading;
 
-  const loading = isPending || isReservesLoading || (!!currentAccount && isUserDataLoading);
+  const loading =
+    isPending ||
+    userSuppliesLoading ||
+    userBorrowsLoading ||
+    isReservesLoading ||
+    (!!currentAccount && isUserDataLoading);
 
   return (
     <AppDataContext.Provider
@@ -132,6 +172,8 @@ export const AppDataProvider: React.FC<PropsWithChildren> = ({ children }) => {
         borrowReserves,
         eModeCategories,
         userState: marketUserState,
+        userSupplies: userSuppliesData,
+        userBorrows: userBorrowsData,
         // Legacy fields (to be removed once consumers migrate)
         reserves: formattedPoolReserves || [],
         eModes,

src/hooks/app-data-provider/useUserBorrows.ts

@@ -0,0 +1,39 @@
+import { AaveClient, chainId, evmAddress, OrderDirection } from '@aave/client';
+import { userBorrows } from '@aave/client/actions';
+import { useQuery } from '@tanstack/react-query';
+import { MarketDataType } from 'src/ui-config/marketsConfig';
+import { queryKeysFactory } from 'src/ui-config/queries';
+
+type UseUserBorrowsDataParams = {
+  client: AaveClient;
+  marketData: MarketDataType;
+  account?: string | null;
+};
+
+export const useUserBorrows = ({ client, marketData, account }: UseUserBorrowsDataParams) => {
+  const userAddress = account ? evmAddress(account) : undefined;
+
+  return useQuery({
+    queryKey: [
+      ...queryKeysFactory.market(marketData),
+      ...queryKeysFactory.user(userAddress ?? 'anonymous'),
+      'userBorrows',
+    ],
+    enabled: !!client && !!userAddress,
+    queryFn: async () => {
+      const response = await userBorrows(client, {
+        markets: [
+          {
+            chainId: chainId(marketData.chainId),
+            address: evmAddress(marketData.addresses.LENDING_POOL),
+          },
+        ],
+        user: userAddress!,
+        orderBy: { debt: OrderDirection.Asc },
+      });
+
+      if (response.isErr()) throw response.error;
+      return response.value;
+    },
+  });
+};

src/hooks/app-data-provider/useUserSupplies.ts

@@ -0,0 +1,39 @@
+import { AaveClient, chainId, evmAddress, OrderDirection } from '@aave/client';
+import { userSupplies } from '@aave/client/actions';
+import { useQuery } from '@tanstack/react-query';
+import { MarketDataType } from 'src/ui-config/marketsConfig';
+import { queryKeysFactory } from 'src/ui-config/queries';
+
+type UseUserSuppliesDataParams = {
+  client: AaveClient;
+  marketData: MarketDataType;
+  account?: string | null;
+};
+
+export const useUserSupplies = ({ client, marketData, account }: UseUserSuppliesDataParams) => {
+  const userAddress = account ? evmAddress(account) : undefined;
+
+  return useQuery({
+    queryKey: [
+      ...queryKeysFactory.market(marketData),
+      ...queryKeysFactory.user(userAddress ?? 'anonymous'),
+      'userSupplies',
+    ],
+    enabled: !!client && !!userAddress,
+    queryFn: async () => {
+      const response = await userSupplies(client, {
+        markets: [
+          {
+            chainId: chainId(marketData.chainId),
+            address: evmAddress(marketData.addresses.LENDING_POOL),
+          },
+        ],
+        user: userAddress!,
+        orderBy: { balance: OrderDirection.Asc },
+      });
+
+      if (response.isErr()) throw response.error;
+      return response.value;
+    },
+  });
+};

src/hooks/useWrappedTokens.tsx

@@ -1,8 +1,6 @@
-import { normalize } from '@aave/math-utils';
 import { AaveV3Ethereum } from '@bgd-labs/aave-address-book';
 import { useRootStore } from 'src/store/root';
 import { CustomMarket } from 'src/ui-config/marketsConfig';
-import { amountToUsd } from 'src/utils/utils';
 
 import { useAppDataContext } from './app-data-provider/useAppDataProvider';
 
@@ -37,57 +35,42 @@ const wrappedTokenConfig: {
 };
 
 export const useWrappedTokens = () => {
-  const { marketReferencePriceInUsd, marketReferenceCurrencyDecimals, reserves } =
-    useAppDataContext();
+  const { supplyReserves } = useAppDataContext();
   const currentMarket = useRootStore((store) => store.currentMarket);
-
-  if (!reserves || reserves.length === 0) {
+  if (!supplyReserves || supplyReserves.length === 0) {
     return [];
   }
 
   const wrappedTokens = wrappedTokenConfig[currentMarket] ?? [];
   let wrappedTokenReserves: WrappedTokenConfig[] = [];
 
   wrappedTokenReserves = wrappedTokens.map<WrappedTokenConfig>((config) => {
-    const tokenInReserve = reserves.find((reserve) => reserve.underlyingAsset === config.tokenIn);
-    const tokenOutReserve = reserves.find((reserve) => reserve.underlyingAsset === config.tokenOut);
+    const tokenInReserve = supplyReserves.find(
+      (reserve) => reserve.underlyingToken.address.toLowerCase() === config.tokenIn
+    );
+
+    const tokenOutReserve = supplyReserves.find(
+      (reserve) => reserve.underlyingToken.address.toLowerCase() === config.tokenOut
+    );
 
     if (!tokenInReserve || !tokenOutReserve) {
       throw new Error('wrapped token reserves not found');
     }
 
-    const tokenInFormattedPriceInMarketReferenceCurrency = normalize(
-      tokenInReserve.priceInMarketReferenceCurrency,
-      marketReferenceCurrencyDecimals
-    );
-
-    const tokenOutFormattedPriceInMarketReferenceCurrency = normalize(
-      tokenOutReserve.priceInMarketReferenceCurrency,
-      marketReferenceCurrencyDecimals
-    );
-
     return {
       tokenIn: {
-        symbol: tokenInReserve.symbol,
-        underlyingAsset: tokenInReserve.underlyingAsset,
-        decimals: tokenInReserve.decimals,
-        priceInUSD: amountToUsd(
-          1,
-          tokenInFormattedPriceInMarketReferenceCurrency,
-          marketReferencePriceInUsd
-        ).toString(),
-        formattedPriceInMarketReferenceCurrency: tokenInFormattedPriceInMarketReferenceCurrency,
+        symbol: tokenInReserve.underlyingToken.symbol,
+        underlyingAsset: tokenInReserve.underlyingToken.address,
+        decimals: tokenInReserve.underlyingToken.decimals,
+        priceInUSD: tokenInReserve.usdExchangeRate,
+        formattedPriceInMarketReferenceCurrency: tokenInReserve.size.usdPerToken,
       },
       tokenOut: {
-        symbol: tokenOutReserve.symbol,
-        underlyingAsset: tokenOutReserve.underlyingAsset,
-        decimals: tokenOutReserve.decimals,
-        priceInUSD: amountToUsd(
-          1,
-          tokenOutFormattedPriceInMarketReferenceCurrency,
-          marketReferencePriceInUsd
-        ).toString(),
-        formattedPriceInMarketReferenceCurrency: tokenOutFormattedPriceInMarketReferenceCurrency,
+        symbol: tokenOutReserve.underlyingToken.symbol,
+        underlyingAsset: tokenOutReserve.underlyingToken.address,
+        decimals: tokenOutReserve.underlyingToken.decimals,
+        priceInUSD: tokenOutReserve.usdExchangeRate,
+        formattedPriceInMarketReferenceCurrency: tokenOutReserve.size.usdPerToken,
       },
       tokenWrapperAddress: config.tokenWrapperContractAddress,
     };

src/locales/en/messages.po

@@ -539,6 +539,10 @@ msgstr "Total"
 msgid "{stepName}"
 msgstr "{stepName}"
 
+#: src/modules/dashboard/DashboardEModeButton.tsx
+msgid "DISABLED"
+msgstr "DISABLED"
+
 #: src/components/transactions/FlowCommons/TxModalDetails.tsx
 #: src/modules/dashboard/DashboardTopPanel.tsx
 #: src/modules/dashboard/LiquidationRiskParametresModal/LiquidationRiskParametresModal.tsx
@@ -1450,7 +1454,6 @@ msgstr "No voting power"
 
 #: src/modules/dashboard/lists/SupplyAssetsList/SupplyAssetsList.tsx
 #: src/modules/dashboard/lists/SupplyAssetsList/SupplyAssetsListItem.tsx
-#: src/modules/dashboard/lists/SupplyAssetsList/SupplyAssetsListMobileItem.tsx
 #: src/modules/reserve-overview/SupplyInfo.tsx
 msgid "Can be collateral"
 msgstr "Can be collateral"
@@ -2008,7 +2011,6 @@ msgstr "Send cancel"
 #: src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsListItem.tsx
 #: src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsListMobileItem.tsx
 #: src/modules/dashboard/lists/SupplyAssetsList/SupplyAssetsListItem.tsx
-#: src/modules/dashboard/lists/SupplyAssetsList/SupplyAssetsListMobileItem.tsx
 #: src/modules/markets/MarketAssetsListItem.tsx
 msgid "Details"
 msgstr "Details"
@@ -2429,7 +2431,6 @@ msgstr "supply"
 #: src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsListMobileItem.tsx
 #: src/modules/dashboard/lists/SupplyAssetsList/SupplyAssetsListItem.tsx
 #: src/modules/dashboard/lists/SupplyAssetsList/SupplyAssetsListItem.tsx
-#: src/modules/dashboard/lists/SupplyAssetsList/SupplyAssetsListMobileItem.tsx
 #: src/modules/history/actions/ActionDetails.tsx
 #: src/modules/history/HistoryFilterMenu.tsx
 #: src/modules/reserve-overview/ReserveActions.tsx
@@ -3426,7 +3427,6 @@ msgstr "Staked"
 #: src/components/transactions/Supply/SupplyModalContent.tsx
 #: src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsListMobileItem.tsx
 #: src/modules/dashboard/lists/SupplyAssetsList/SupplyAssetsListItem.tsx
-#: src/modules/dashboard/lists/SupplyAssetsList/SupplyAssetsListMobileItem.tsx
 #: src/modules/markets/MarketAssetsList.tsx
 #: src/modules/markets/MarketAssetsListMobileItem.tsx
 msgid "Supply APY"
@@ -4071,7 +4071,6 @@ msgstr "Remaining debt"
 #: src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsListMobileItem.tsx
 #: src/modules/dashboard/lists/SupplyAssetsList/SupplyAssetsListItem.tsx
 #: src/modules/dashboard/lists/SupplyAssetsList/SupplyAssetsListItem.tsx
-#: src/modules/dashboard/lists/SupplyAssetsList/SupplyAssetsListMobileItem.tsx
 msgid "Supply balance"
 msgstr "Supply balance"
 

src/modules/dashboard/DashboardEModeButton.tsx

@@ -13,15 +13,14 @@ import LightningBoltGradient from '/public/lightningBoltGradient.svg';
 import { Link } from '../../components/primitives/Link';
 import { Row } from '../../components/primitives/Row';
 import { TypographyGradient } from '../../components/primitives/TypographyGradient';
-import { getEmodeMessage } from '../../components/transactions/Emode/EmodeNaming';
 
 interface DashboardEModeButtonProps {
   userEmodeCategoryId: number;
 }
 
 export const DashboardEModeButton = ({ userEmodeCategoryId }: DashboardEModeButtonProps) => {
   const { openEmode } = useModalContext();
-  const { eModes: _eModes } = useAppDataContext();
+  const { eModeCategories: _eModes } = useAppDataContext();
   const trackEvent = useRootStore((store) => store.trackEvent);
 
   const iconButtonSize = 12;
@@ -39,9 +38,12 @@ export const DashboardEModeButton = ({ userEmodeCategoryId }: DashboardEModeButt
 
   const isEModeDisabled = userEmodeCategoryId === 0;
 
-  const EModeLabelMessage = () => (
-    <Trans>{getEmodeMessage(_eModes[userEmodeCategoryId].label)}</Trans>
-  );
+  const EModeLabelMessage = () => {
+    if (isEModeDisabled) {
+      return <Trans>DISABLED</Trans>;
+    }
+    return <Trans>{_eModes[userEmodeCategoryId]?.label}</Trans>;
+  };
 
   return (
     <Box