Refactor/dashboard page

package.json

@@ -32,10 +32,11 @@
   },
   "dependencies": {
     "@aave/contract-helpers": "1.36.1",
+    "@aave/graphql": "^0.7.0",
     "@aave/math-utils": "1.36.1",
-    "@aave/react": "0.6.1",
+    "@aave/react": "^0.7.0",
     "@amplitude/analytics-browser": "^2.13.0",
-    "@bgd-labs/aave-address-book": "^4.31.0",
+    "@bgd-labs/aave-address-book": "^4.34.1",
     "@cowprotocol/app-data": "^3.1.0",
     "@cowprotocol/cow-sdk": "6.0.0-RC.47",
     "@emotion/cache": "11.10.3",

pages/reserve-overview.page.tsx

@@ -7,9 +7,11 @@ import StyledToggleButton from 'src/components/StyledToggleButton';
 import StyledToggleButtonGroup from 'src/components/StyledToggleButtonGroup';
 import {
   ComputedReserveData,
+  ReserveWithId,
   useAppDataContext,
 } from 'src/hooks/app-data-provider/useAppDataProvider';
 import { AssetCapsProvider } from 'src/hooks/useAssetCaps';
+import { AssetCapsProviderSDK } from 'src/hooks/useAssetCapsSDK';
 import { MainLayout } from 'src/layouts/MainLayout';
 import { ReserveActions } from 'src/modules/reserve-overview/ReserveActions';
 import { ReserveConfigurationWrapper } from 'src/modules/reserve-overview/ReserveConfigurationWrapper';
@@ -44,23 +46,28 @@ const UnStakeModal = dynamic(() =>
 
 export default function ReserveOverview() {
   const router = useRouter();
-  const { reserves } = useAppDataContext();
+  const { supplyReserves, reserves } = useAppDataContext();
   const underlyingAsset = router.query.underlyingAsset as string;
 
   const [mode, setMode] = useState<'overview' | 'actions' | ''>('overview');
   const trackEvent = useRootStore((store) => store.trackEvent);
 
-  const reserve = reserves.find(
-    (reserve) => reserve.underlyingAsset === underlyingAsset
-  ) as ComputedReserveData;
+  //With SDK
+  const reserve = supplyReserves.find((reserve) => {
+    return reserve.underlyingToken.address.toLowerCase() === underlyingAsset?.toLowerCase();
+  }) as ReserveWithId;
 
+  //With Reserves
+  const reserveLegacy = reserves.find((reserve) => {
+    return reserve.underlyingAsset.toLowerCase() === underlyingAsset?.toLowerCase();
+  }) as ComputedReserveData;
   const [pageEventCalled, setPageEventCalled] = useState(false);
 
   useEffect(() => {
-    if (!pageEventCalled && reserve && reserve.iconSymbol && underlyingAsset) {
+    if (!pageEventCalled && reserve && reserve.underlyingToken.symbol && underlyingAsset) {
       trackEvent('Page Viewed', {
         'Page Name': 'Reserve Overview',
-        Reserve: reserve.iconSymbol,
+        Reserve: reserve.underlyingToken.symbol,
         Asset: underlyingAsset,
       });
       setPageEventCalled(true);
@@ -70,7 +77,7 @@ export default function ReserveOverview() {
   const isOverview = mode === 'overview';
 
   return (
-    <AssetCapsProvider asset={reserve}>
+    <AssetCapsProviderSDK asset={reserve}>
       <ReserveTopDetailsWrapper underlyingAsset={underlyingAsset} />
 
       <ContentContainer>
@@ -120,11 +127,14 @@ export default function ReserveOverview() {
               width: { xs: '100%', lg: '416px' },
             }}
           >
-            <ReserveActions reserve={reserve} />
+            {/* Wrapped in AssetCapsProvider to provide the data using legacy method to avoid braking actions */}
+            <AssetCapsProvider asset={reserveLegacy}>
+              <ReserveActions reserve={reserveLegacy} />
+            </AssetCapsProvider>
           </Box>
         </Box>
       </ContentContainer>
-    </AssetCapsProvider>
+    </AssetCapsProviderSDK>
   );
 }
 

src/components/incentives/incentives.helper.ts

@@ -0,0 +1,55 @@
+import type { AaveBorrowIncentive, AaveSupplyIncentive, ReserveIncentive } from '@aave/graphql';
+import type { ReserveIncentiveResponse } from '@aave/math-utils/dist/esm/formatters/incentive/calculate-reserve-incentives';
+
+//Typescript GUARDS
+const isAaveSupplyIncentive = (incentive: ReserveIncentive): incentive is AaveSupplyIncentive => {
+  return incentive.__typename === 'AaveSupplyIncentive';
+};
+
+const isAaveBorrowIncentive = (incentive: ReserveIncentive): incentive is AaveBorrowIncentive => {
+  return incentive.__typename === 'AaveBorrowIncentive';
+};
+
+export const isAaveProtocolIncentive = (incentive: ReserveIncentive): boolean => {
+  return isAaveSupplyIncentive(incentive) || isAaveBorrowIncentive(incentive);
+};
+
+export const getIncentiveAPR = (incentive: ReserveIncentive): string => {
+  // For AaveSupplyIncentive
+  if (isAaveSupplyIncentive(incentive) && incentive.extraSupplyApr?.value) {
+    return incentive.extraSupplyApr.value.toString();
+  }
+
+  // For AaveBorrowIncentive
+  if (isAaveBorrowIncentive(incentive) && incentive.borrowAprDiscount?.value) {
+    return incentive.borrowAprDiscount.value.toString();
+  }
+
+  // Fallback for previous structure)
+  if ('incentiveAPR' in incentive) {
+    return String(incentive.incentiveAPR);
+  }
+
+  return '0';
+};
+
+// Mapping sdk structure to legacy structure used in incentives card logic
+export const mapAaveProtocolIncentives = (
+  incentives: ReserveIncentive[] | undefined,
+  direction: 'supply' | 'borrow'
+): ReserveIncentiveResponse[] => {
+  if (!incentives || incentives.length === 0) {
+    return [];
+  }
+
+  const typedIncentives =
+    direction === 'supply'
+      ? incentives.filter(isAaveSupplyIncentive)
+      : incentives.filter(isAaveBorrowIncentive);
+
+  return typedIncentives.map((incentive) => ({
+    incentiveAPR: getIncentiveAPR(incentive),
+    rewardTokenAddress: incentive.rewardTokenAddress,
+    rewardTokenSymbol: incentive.rewardTokenSymbol,
+  }));
+};

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';
@@ -20,6 +20,7 @@ interface ListMobileItemProps {
   showBorrowCapTooltips?: boolean;
   showDebtCeilingTooltips?: boolean;
   isIsolated: boolean;
+  onIconError?: () => void;
 }
 
 export const ListMobileItem = ({
@@ -35,8 +36,9 @@ export const ListMobileItem = ({
   showBorrowCapTooltips = false,
   showDebtCeilingTooltips = false,
   isIsolated,
+  onIconError,
 }: ListMobileItemProps) => {
-  const { supplyCap, borrowCap, debtCeiling } = useAssetCaps();
+  const { supplyCap, borrowCap, debtCeiling } = useAssetCapsSDK();
   return (
     <Box>
       <Divider />
@@ -59,7 +61,7 @@ export const ListMobileItem = ({
                 href={ROUTES.reserveOverview(underlyingAsset, currentMarket)}
                 sx={{ display: 'inline-flex', alignItems: 'center' }}
               >
-                <TokenIcon symbol={iconSymbol} sx={{ fontSize: '40px' }} />
+                <TokenIcon symbol={iconSymbol} sx={{ fontSize: '40px' }} onError={onIconError} />
                 <Box sx={{ ml: 2 }}>
                   <Typography variant="h4">{name}</Typography>
                   <Box display="flex" alignItems="center">
@@ -73,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,15 @@
+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';
 import { EmodeCategory } from 'src/helpers/types';
 import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
@@ -16,6 +27,9 @@ import {
 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
@@ -40,9 +54,28 @@ export type ComputedUserReserveData = FormattedUserReserves;
  * @deprecated Use ExtendedFormattedUser type from useExtendedUserSummaryAndIncentives hook
  */
 export type ExtendedFormattedUser = _ExtendedFormattedUser;
-
+export type ReserveWithId = Reserve & {
+  id: string;
+  supplyAPY?: number;
+  borrowAPY?: number;
+  underlyingBalance?: string;
+  usageAsCollateralEnabledOnUser?: boolean;
+  isCollateralPosition?: boolean;
+  apyPosition?: PercentValue;
+  balancePosition?: TokenAmount;
+};
 export interface AppDataContextType {
   loading: boolean;
+  /** SDK market snapshot */
+  market?: Market;
+  totalBorrows?: number;
+  supplyReserves: ReserveWithId[];
+  borrowReserves: ReserveWithId[];
+  eModeCategories: EmodeMarketCategory[];
+  userState?: MarketUserState;
+  userSupplies?: MarketUserReserveSupplyPosition[];
+  userBorrows?: MarketUserReserveBorrowPosition[];
+  /** Legacy fields (deprecated) kept temporarily for incremental migration */
   reserves: ComputedReserveData[];
   eModes: Record<number, EmodeCategory>;
   user?: ExtendedFormattedUser;
@@ -62,6 +95,46 @@ export const AppDataProvider: React.FC<PropsWithChildren> = ({ children }) => {
 
   const currentMarketData = useRootStore((state) => state.currentMarketData);
 
+  const { data, isPending } = useMarketsData({
+    client,
+    marketData: currentMarketData,
+    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);
+
+  const totalBorrows = sdkMarket?.borrowReserves.reduce((acc, reserve) => {
+    const value = reserve.borrowInfo?.total?.usd ?? 0;
+    return acc + Number(value);
+  }, 0);
+
+  const supplyReserves = (sdkMarket?.supplyReserves ?? []).map((reserve) => ({
+    ...reserve,
+    id: `${sdkMarket?.address}-${reserve.underlyingToken.address}`,
+  }));
+
+  const borrowReserves = (sdkMarket?.borrowReserves ?? []).map((reserve) => ({
+    ...reserve,
+    id: `${sdkMarket?.address}-${reserve.underlyingToken.address}`,
+  }));
+
+  const eModeCategories = sdkMarket?.eModeCategories ?? [];
+  const marketUserState = sdkMarket?.userState ?? undefined;
+
   const { data: reservesData, isPending: reservesDataLoading } =
     usePoolReservesHumanized(currentMarketData);
   const { data: formattedPoolReserves, isPending: formattedPoolReservesLoading } =
@@ -81,10 +154,26 @@ export const AppDataProvider: React.FC<PropsWithChildren> = ({ children }) => {
   const isReservesLoading = reservesDataLoading || formattedPoolReservesLoading;
   const isUserDataLoading = userReservesDataLoading || userSummaryLoading;
 
+  const loading =
+    isPending ||
+    userSuppliesLoading ||
+    userBorrowsLoading ||
+    isReservesLoading ||
+    (!!currentAccount && isUserDataLoading);
+
   return (
     <AppDataContext.Provider
       value={{
-        loading: isReservesLoading || (!!currentAccount && isUserDataLoading),
+        loading,
+        market: sdkMarket,
+        totalBorrows,
+        supplyReserves,
+        borrowReserves,
+        eModeCategories,
+        userState: marketUserState,
+        userSupplies: userSuppliesData,
+        userBorrows: userBorrowsData,
+        // Legacy fields (to be removed once consumers migrate)
         reserves: formattedPoolReserves || [],
         eModes,
         user: userSummary,

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

@@ -0,0 +1,38 @@
+import { AaveClient, chainId, evmAddress, OrderDirection } from '@aave/client';
+import { markets } 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 UseMarketsDataParams = {
+  client: AaveClient;
+  marketData: MarketDataType;
+  account?: string | null;
+};
+
+export const useMarketsData = ({ client, marketData, account }: UseMarketsDataParams) => {
+  const userAddress = account ? evmAddress(account) : undefined;
+  const marketKey = [
+    ...queryKeysFactory.market(marketData),
+    ...queryKeysFactory.user(userAddress ?? 'anonymous'),
+  ];
+
+  return useQuery({
+    queryKey: marketKey,
+    enabled: !!client,
+    queryFn: async () => {
+      const response = await markets(client, {
+        chainIds: [chainId(marketData.chainId)],
+        user: userAddress,
+        suppliesOrderBy: { tokenName: OrderDirection.Asc },
+        borrowsOrderBy: { tokenName: OrderDirection.Asc },
+      });
+
+      if (response.isErr()) {
+        throw response.error;
+      }
+
+      return response.value;
+    },
+  });
+};

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;
+    },
+  });
+};