Refactor Maket Page to use Aave-sdk (#2686)

Author: AGMASO

package.json

@@ -35,7 +35,7 @@
     "@aave/math-utils": "1.36.1",
     "@aave/react": "0.6.1",
     "@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.3.3",
     "@emotion/cache": "11.10.3",

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

@@ -20,6 +20,7 @@ interface ListMobileItemProps {
   showBorrowCapTooltips?: boolean;
   showDebtCeilingTooltips?: boolean;
   isIsolated: boolean;
+  onIconError?: () => void;
 }
 
 export const ListMobileItem = ({
@@ -35,6 +36,7 @@ export const ListMobileItem = ({
   showBorrowCapTooltips = false,
   showDebtCeilingTooltips = false,
   isIsolated,
+  onIconError,
 }: ListMobileItemProps) => {
   const { supplyCap, borrowCap, debtCeiling } = useAssetCaps();
   return (
@@ -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">

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

@@ -1,4 +1,6 @@
+import type { EmodeMarketCategory, Market, MarketUserState, Reserve } 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 +18,7 @@ import {
 import { usePoolReservesHumanized } from '../pool/usePoolReserves';
 import { useUserPoolReservesHumanized } from '../pool/useUserPoolReserves';
 import { FormattedUserReserves } from '../pool/useUserSummaryAndIncentives';
+import { useMarketsData } from './useMarketsData';
 
 /**
  * removes the marketPrefix from a symbol
@@ -40,9 +43,17 @@ export type ComputedUserReserveData = FormattedUserReserves;
  * @deprecated Use ExtendedFormattedUser type from useExtendedUserSummaryAndIncentives hook
  */
 export type ExtendedFormattedUser = _ExtendedFormattedUser;
-
+export type ReserveWithId = Reserve & { id: string };
 export interface AppDataContextType {
   loading: boolean;
+  /** SDK market snapshot */
+  market?: Market;
+  totalBorrows?: number;
+  supplyReserves: ReserveWithId[];
+  borrowReserves: ReserveWithId[];
+  eModeCategories: EmodeMarketCategory[];
+  userState?: MarketUserState;
+  /** Legacy fields (deprecated) kept temporarily for incremental migration */
   reserves: ComputedReserveData[];
   eModes: Record<number, EmodeCategory>;
   user?: ExtendedFormattedUser;
@@ -62,6 +73,34 @@ export const AppDataProvider: React.FC<PropsWithChildren> = ({ children }) => {
 
   const currentMarketData = useRootStore((state) => state.currentMarketData);
 
+  const { data, isPending } = useMarketsData({
+    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 +120,19 @@ export const AppDataProvider: React.FC<PropsWithChildren> = ({ children }) => {
   const isReservesLoading = reservesDataLoading || formattedPoolReservesLoading;
   const isUserDataLoading = userReservesDataLoading || userSummaryLoading;
 
+  const loading = isPending || isReservesLoading || (!!currentAccount && isUserDataLoading);
+
   return (
     <AppDataContext.Provider
       value={{
-        loading: isReservesLoading || (!!currentAccount && isUserDataLoading),
+        loading,
+        market: sdkMarket,
+        totalBorrows,
+        supplyReserves,
+        borrowReserves,
+        eModeCategories,
+        userState: marketUserState,
+        // 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/modules/dashboard/lists/ListMobileItemWrapper.tsx

@@ -32,6 +32,7 @@ interface ListMobileItemWrapperProps {
   showDebtCeilingTooltips?: boolean;
   isIsolated?: boolean;
   showExternalIncentivesTooltips?: ExternalIncentivesTooltipsConfig;
+  onIconError?: () => void;
 }
 
 export const ListMobileItemWrapper = ({
@@ -54,6 +55,7 @@ export const ListMobileItemWrapper = ({
     spkAirdrop: false,
     kernelPoints: false,
   },
+  onIconError,
 }: ListMobileItemWrapperProps) => {
   const WarningComponent: React.FC = () => {
     const showFrozenTooltip = frozen && symbol !== 'renFIL';
@@ -94,6 +96,7 @@ export const ListMobileItemWrapper = ({
       showSupplyCapTooltips={showSupplyCapTooltips}
       showBorrowCapTooltips={showBorrowCapTooltips}
       showDebtCeilingTooltips={showDebtCeilingTooltips}
+      onIconError={onIconError}
     >
       {children}
     </ListMobileItem>

src/modules/markets/MarketAssetsList.tsx

@@ -1,12 +1,13 @@
 import { Trans } from '@lingui/macro';
 import { useMediaQuery } from '@mui/material';
 import { useState } from 'react';
+import { mapAaveProtocolIncentives } from 'src/components/incentives/incentives.helper';
 import { VariableAPYTooltip } from 'src/components/infoTooltips/VariableAPYTooltip';
 import { ListColumn } from 'src/components/lists/ListColumn';
 import { ListHeaderTitle } from 'src/components/lists/ListHeaderTitle';
 import { ListHeaderWrapper } from 'src/components/lists/ListHeaderWrapper';
-import { ComputedReserveData } from 'src/hooks/app-data-provider/useAppDataProvider';
 
+import { ReserveWithId } from '../../hooks/app-data-provider/useAppDataProvider';
 import { MarketAssetsListItem } from './MarketAssetsListItem';
 import { MarketAssetsListItemLoader } from './MarketAssetsListItemLoader';
 import { MarketAssetsListMobileItem } from './MarketAssetsListMobileItem';
@@ -15,19 +16,19 @@ import { MarketAssetsListMobileItemLoader } from './MarketAssetsListMobileItemLo
 const listHeaders = [
   {
     title: <Trans>Asset</Trans>,
-    sortKey: 'symbol',
+    sortKey: 'underlyingToken.symbol',
   },
   {
     title: <Trans>Total supplied</Trans>,
-    sortKey: 'totalLiquidityUSD',
+    sortKey: 'size.usd',
   },
   {
     title: <Trans>Supply APY</Trans>,
-    sortKey: 'supplyAPY',
+    sortKey: 'supplyInfo.apy.value',
   },
   {
     title: <Trans>Total borrowed</Trans>,
-    sortKey: 'totalDebtUSD',
+    sortKey: 'borrowInfo.total.usd',
   },
   {
     title: (
@@ -37,37 +38,71 @@ const listHeaders = [
         variant="subheader2"
       />
     ),
-    sortKey: 'variableBorrowAPY',
+    sortKey: 'borrowInfo.apy.value',
   },
 ];
 
 type MarketAssetsListProps = {
-  reserves: ComputedReserveData[];
+  reserves: ReserveWithId[];
   loading: boolean;
 };
+export type ReserveWithProtocolIncentives = ReserveWithId & {
+  supplyProtocolIncentives: ReturnType<typeof mapAaveProtocolIncentives>;
+  borrowProtocolIncentives: ReturnType<typeof mapAaveProtocolIncentives>;
+};
 
 export default function MarketAssetsList({ reserves, loading }: MarketAssetsListProps) {
   const isTableChangedToCards = useMediaQuery('(max-width:1125px)');
   const [sortName, setSortName] = useState('');
   const [sortDesc, setSortDesc] = useState(false);
-  if (sortDesc) {
-    if (sortName === 'symbol') {
-      reserves.sort((a, b) => (a.symbol.toUpperCase() < b.symbol.toUpperCase() ? -1 : 1));
-    } else {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      reserves.sort((a, b) => a[sortName] - b[sortName]);
-    }
-  } else {
-    if (sortName === 'symbol') {
-      reserves.sort((a, b) => (b.symbol.toUpperCase() < a.symbol.toUpperCase() ? -1 : 1));
-    } else {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      reserves.sort((a, b) => b[sortName] - a[sortName]);
+  const sortedReserves = [...reserves].sort((a, b) => {
+    if (!sortName) return 0;
+
+    let aValue: number | string;
+    let bValue: number | string;
+
+    switch (sortName) {
+      case 'underlyingToken.symbol':
+        aValue = a.underlyingToken.symbol.toUpperCase();
+        bValue = b.underlyingToken.symbol.toUpperCase();
+        if (sortDesc) {
+          return aValue < bValue ? -1 : 1;
+        }
+        return bValue < aValue ? -1 : 1;
+
+      case 'size.usd':
+        aValue = Number(a.size.usd) || 0;
+        bValue = Number(b.size.usd) || 0;
+        break;
+
+      case 'supplyInfo.apy.value':
+        aValue = Number(a.supplyInfo.apy.value) || 0;
+        bValue = Number(b.supplyInfo.apy.value) || 0;
+        break;
+
+      case 'borrowInfo.total.usd':
+        aValue = Number(a.borrowInfo?.total.usd) || 0;
+        bValue = Number(b.borrowInfo?.total.usd) || 0;
+        break;
+
+      case 'borrowInfo.apy.value':
+        aValue = Number(a.borrowInfo?.apy.value) || 0;
+        bValue = Number(b.borrowInfo?.apy.value) || 0;
+        break;
+
+      default:
+        return 0;
     }
-  }
 
+    return sortDesc
+      ? (aValue as number) - (bValue as number)
+      : (bValue as number) - (aValue as number);
+  });
+  const reservesWithIncentives: ReserveWithProtocolIncentives[] = sortedReserves.map((reserve) => ({
+    ...reserve,
+    supplyProtocolIncentives: mapAaveProtocolIncentives(reserve.incentives, 'supply'),
+    borrowProtocolIncentives: mapAaveProtocolIncentives(reserve.incentives, 'borrow'),
+  }));
   // Show loading state when loading
   if (loading) {
     return isTableChangedToCards ? (
@@ -95,8 +130,8 @@ export default function MarketAssetsList({ reserves, loading }: MarketAssetsList
         <ListHeaderWrapper px={6}>
           {listHeaders.map((col) => (
             <ListColumn
-              isRow={col.sortKey === 'symbol'}
-              maxWidth={col.sortKey === 'symbol' ? 280 : undefined}
+              isRow={col.sortKey === 'underlyingToken.symbol'}
+              maxWidth={col.sortKey === 'underlyingToken.symbol' ? 280 : undefined}
               key={col.sortKey}
             >
               <ListHeaderTitle
@@ -115,7 +150,7 @@ export default function MarketAssetsList({ reserves, loading }: MarketAssetsList
         </ListHeaderWrapper>
       )}
 
-      {reserves.map((reserve) =>
+      {reservesWithIncentives.map((reserve) =>
         isTableChangedToCards ? (
           <MarketAssetsListMobileItem {...reserve} key={reserve.id} />
         ) : (