feat: implement underlying token APYs

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

@@ -76,15 +76,16 @@ export const AppDataProvider: React.FC = ({ children }) => {
 
   const currentMarketData = useRootStore((state) => state.currentMarketData);
   const currentMarket = useRootStore((state) => state.currentMarket);
-  // pool hooks
 
+  // pool hooks
   const { data: reservesData, isLoading: reservesDataLoading } =
     usePoolReservesHumanized(currentMarketData);
+
   const { data: formattedPoolReserves, isLoading: formattedPoolReservesLoading } =
     usePoolFormattedReserves(currentMarketData);
   const baseCurrencyData = reservesData?.baseCurrencyData;
-  // user hooks
 
+  // user hooks
   const eModes = reservesData?.reservesData ? formatEmodes(reservesData.reservesData) : {};
 
   const { data: userReservesData, isLoading: userReservesDataLoading } =

src/hooks/pool/usePoolFormattedReserves.ts

@@ -6,6 +6,7 @@ import {
 import { formatReservesAndIncentives } from '@aave/math-utils';
 import dayjs from 'dayjs';
 import memoize from 'micro-memoize';
+import { UnderlyingAPYs } from 'src/services/UnderlyingYieldService';
 import { reserveSortFn } from 'src/store/poolSelectors';
 import { MarketDataType } from 'src/ui-config/marketsConfig';
 import { fetchIconSymbolAndName, IconMapInterface } from 'src/ui-config/reservePatches';
@@ -14,6 +15,7 @@ import { getNetworkConfig, NetworkConfig } from 'src/utils/marketsAndNetworksCon
 import { selectBaseCurrencyData, selectReserves } from './selectors';
 import { usePoolsReservesHumanized } from './usePoolReserves';
 import { usePoolsReservesIncentivesHumanized } from './usePoolReservesIncentives';
+import { useUnderlyingYields } from './useUnderlyingYield';
 import { combineQueries, SimplifiedUseQueryResult } from './utils';
 
 export type FormattedReservesAndIncentives = ReturnType<
@@ -22,13 +24,16 @@ export type FormattedReservesAndIncentives = ReturnType<
   IconMapInterface & {
     isEmodeEnabled: boolean;
     isWrappedBaseAsset: boolean;
-  } & ReserveDataHumanized;
+  } & ReserveDataHumanized & {
+    underlyingAPY: number | null;
+  };
 
 const formatReserves = memoize(
   (
     reservesData: ReservesDataHumanized,
     incentivesData: ReservesIncentiveDataHumanized[],
-    networkConfig: NetworkConfig
+    networkConfig: NetworkConfig,
+    underlyingAPYs: UnderlyingAPYs
   ) => {
     const reserves = selectReserves(reservesData);
     const baseCurrencyData = selectBaseCurrencyData(reservesData);
@@ -45,6 +50,7 @@ const formatReserves = memoize(
         isEmodeEnabled: r.eModeCategoryId !== 0,
         isWrappedBaseAsset:
           r.symbol.toLowerCase() === networkConfig.wrappedBaseAssetSymbol?.toLowerCase(),
+        underlyingAPY: underlyingAPYs ? underlyingAPYs[r.symbol] : null,
       }))
       .sort(reserveSortFn);
   }
@@ -55,18 +61,23 @@ export const usePoolsFormattedReserves = (
 ): SimplifiedUseQueryResult<FormattedReservesAndIncentives[]>[] => {
   const poolsReservesQueries = usePoolsReservesHumanized(marketsData);
   const poolsReservesIncentivesQueries = usePoolsReservesIncentivesHumanized(marketsData);
+  const underlyingAPYs = useUnderlyingYields();
 
   return poolsReservesQueries.map((poolReservesQuery, index) => {
     const marketData = marketsData[index];
     const poolReservesIncentivesQuery = poolsReservesIncentivesQueries[index];
     const networkConfig = getNetworkConfig(marketData.chainId);
     const selector = (
       reservesData: ReservesDataHumanized,
-      incentivesData: ReservesIncentiveDataHumanized[]
+      incentivesData: ReservesIncentiveDataHumanized[],
+      underlyingAPYs: UnderlyingAPYs
     ) => {
-      return formatReserves(reservesData, incentivesData, networkConfig);
+      return formatReserves(reservesData, incentivesData, networkConfig, underlyingAPYs);
     };
-    return combineQueries([poolReservesQuery, poolReservesIncentivesQuery] as const, selector);
+    return combineQueries(
+      [poolReservesQuery, poolReservesIncentivesQuery, underlyingAPYs] as const,
+      selector
+    );
   });
 };
 

src/hooks/pool/useUnderlyingYield.ts

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query';
+import { UnderlyingAPYs } from 'src/services/UnderlyingYieldService';
+import { POLLING_INTERVAL, queryKeysFactory } from 'src/ui-config/queries';
+import { useSharedDependencies } from 'src/ui-config/SharedDependenciesProvider';
+
+import { SimplifiedUseQueryResult } from './utils';
+
+export const useUnderlyingYields = (): SimplifiedUseQueryResult<UnderlyingAPYs> => {
+  const { underlyingYieldService } = useSharedDependencies();
+  return useQuery({
+    queryKey: queryKeysFactory.underlyingYields(),
+    queryFn: () => underlyingYieldService.getUnderlyingAPYs(),
+    refetchInterval: POLLING_INTERVAL,
+  });
+};

src/hooks/pool/useUserYield.ts

@@ -30,7 +30,7 @@ const formatUserYield = memoize(
     formattedGhoUserData: FormattedGhoUserData | undefined,
     user: FormatUserSummaryAndIncentivesResponse,
     currentMarket: string
-  ) => {
+  ): UserYield => {
     const proportions = user.userReservesData.reduce(
       (acc, value) => {
         const reserve = formattedPoolReserves.find(
@@ -42,6 +42,12 @@ const formatUserYield = memoize(
             acc.positiveProportion = acc.positiveProportion.plus(
               new BigNumber(reserve.supplyAPY).multipliedBy(value.underlyingBalanceUSD)
             );
+
+            if (reserve.underlyingAPY) {
+              acc.positiveProportion = acc.positiveProportion.plus(
+                new BigNumber(reserve.underlyingAPY).multipliedBy(value.underlyingBalanceUSD)
+              );
+            }
             if (reserve.aIncentivesData) {
               reserve.aIncentivesData.forEach((incentive) => {
                 acc.positiveProportion = acc.positiveProportion.plus(

src/locales/en/messages.po

@@ -3350,6 +3350,7 @@ msgstr "withdrew"
 #: src/layouts/TopBarNotify.tsx
 #: src/layouts/TopBarNotify.tsx
 #: src/modules/dashboard/DashboardEModeButton.tsx
+#: src/modules/dashboard/lists/ListAPYDetails.tsx
 #: src/modules/reserve-overview/ReserveTopDetailsWrapper.tsx
 #: src/modules/staking/GhoDiscountProgram.tsx
 msgid "{0}"

src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsList.tsx

@@ -160,6 +160,7 @@ export const BorrowAssetsList = () => {
     'asset',
     filteredReserves as unknown as DashboardReserve[]
   );
+
   const borrowDisabled = !sortedReserves.length && !ghoReserve;
 
   const RenderHeader: React.FC = () => {

src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsListItem.tsx

@@ -10,6 +10,7 @@ import { CapsHint } from '../../../../components/caps/CapsHint';
 import { CapType } from '../../../../components/caps/helper';
 import { Link, ROUTES } from '../../../../components/primitives/Link';
 import { ListAPRColumn } from '../ListAPRColumn';
+import { ListAPYDetails } from '../ListAPYDetails';
 import { ListButtonsColumn } from '../ListButtonsColumn';
 import { ListItemWrapper } from '../ListItemWrapper';
 import { ListValueColumn } from '../ListValueColumn';
@@ -26,6 +27,7 @@ export const BorrowAssetsListItem = ({
   vIncentivesData,
   underlyingAsset,
   isFreezed,
+  underlyingAPY,
 }: DashboardReserve) => {
   const { openBorrow } = useModalContext();
   const { currentMarket } = useProtocolDataContext();
@@ -59,15 +61,17 @@ export const BorrowAssetsListItem = ({
         }
       />
       <ListAPRColumn
-        value={Number(variableBorrowRate)}
+        value={
+          underlyingAPY ? Number(variableBorrowRate) + underlyingAPY : Number(variableBorrowRate)
+        }
+        tooltip={
+          underlyingAPY ? (
+            <ListAPYDetails borrowAPY={Number(variableBorrowRate)} underlyingAPY={underlyingAPY} />
+          ) : null
+        }
         incentives={vIncentivesData}
         symbol={symbol}
       />
-      {/* <ListAPRColumn
-        value={Number(stableBorrowRate)}
-        incentives={sIncentivesData}
-        symbol={symbol}
-      /> */}
       <ListButtonsColumn>
         <Button
           disabled={disableBorrow}

src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsListMobileItem.tsx

@@ -10,6 +10,7 @@ import { IncentivesCard } from '../../../../components/incentives/IncentivesCard
 import { Link, ROUTES } from '../../../../components/primitives/Link';
 import { Row } from '../../../../components/primitives/Row';
 import { useModalContext } from '../../../../hooks/useModal';
+import { ListAPYDetails } from '../ListAPYDetails';
 import { ListMobileItemWrapper } from '../ListMobileItemWrapper';
 import { ListValueRow } from '../ListValueRow';
 
@@ -25,6 +26,7 @@ export const BorrowAssetsListMobileItem = ({
   vIncentivesData,
   underlyingAsset,
   isFreezed,
+  underlyingAPY,
 }: DashboardReserve) => {
   const { openBorrow } = useModalContext();
   const { currentMarket } = useProtocolDataContext();
@@ -66,7 +68,17 @@ export const BorrowAssetsListMobileItem = ({
         mb={2}
       >
         <IncentivesCard
-          value={Number(variableBorrowRate)}
+          value={
+            underlyingAPY ? Number(variableBorrowRate) + underlyingAPY : Number(variableBorrowRate)
+          }
+          tooltip={
+            underlyingAPY ? (
+              <ListAPYDetails
+                borrowAPY={Number(variableBorrowRate)}
+                underlyingAPY={underlyingAPY}
+              />
+            ) : null
+          }
           incentives={vIncentivesData}
           symbol={symbol}
           variant="secondary14"

src/modules/dashboard/lists/BorrowedPositionsList/BorrowedPositionsListItem.tsx

@@ -13,6 +13,7 @@ import { isFeatureEnabled } from 'src/utils/marketsAndNetworksConfig';
 
 import { ListColumn } from '../../../../components/lists/ListColumn';
 import { ListAPRColumn } from '../ListAPRColumn';
+import { ListAPYDetails } from '../ListAPYDetails';
 import { ListButtonsColumn } from '../ListButtonsColumn';
 import { ListItemAPYButton } from '../ListItemAPYButton';
 import { ListItemWrapper } from '../ListItemWrapper';
@@ -137,7 +138,16 @@ const BorrowedPositionsListItemDesktop = ({
     >
       <ListValueColumn symbol={reserve.symbol} value={totalBorrows} subValue={totalBorrowsUSD} />
 
-      <ListAPRColumn value={borrowAPY} incentives={incentives} symbol={reserve.symbol} />
+      <ListAPRColumn
+        value={reserve.underlyingAPY ? borrowAPY + reserve.underlyingAPY : borrowAPY}
+        tooltip={
+          reserve.underlyingAPY ? (
+            <ListAPYDetails borrowAPY={borrowAPY} underlyingAPY={reserve.underlyingAPY} />
+          ) : null
+        }
+        incentives={incentives}
+        symbol={reserve.symbol}
+      />
 
       <ListColumn>
         <ListItemAPYButton
@@ -226,7 +236,12 @@ const BorrowedPositionsListItemMobile = ({
 
       <Row caption={<Trans>APY</Trans>} align="flex-start" captionVariant="description" mb={2}>
         <IncentivesCard
-          value={borrowAPY}
+          value={reserve.underlyingAPY ? borrowAPY + reserve.underlyingAPY : borrowAPY}
+          tooltip={
+            reserve.underlyingAPY ? (
+              <ListAPYDetails borrowAPY={borrowAPY} underlyingAPY={reserve.underlyingAPY} />
+            ) : null
+          }
           incentives={incentives}
           symbol={symbol}
           variant="secondary14"

src/modules/dashboard/lists/ListAPYDetails.tsx

@@ -0,0 +1,44 @@
+import { Trans } from '@lingui/macro';
+import { Box } from '@mui/material';
+import { IncentivesCard } from 'src/components/incentives/IncentivesCard';
+import { TextWithTooltip } from 'src/components/TextWithTooltip';
+
+interface ListAPYDetailsProps {
+  underlyingAPY: number;
+  supplyAPY?: number;
+  borrowAPY?: number;
+}
+
+const APYBox = ({ symbol, value }: { symbol: string; value: number }) => {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '4px',
+        alignItems: 'baseline',
+      }}
+    >
+      <Trans>{symbol + ':'}</Trans>
+      <IncentivesCard symbol={symbol} value={value} />
+    </Box>
+  );
+};
+
+export const ListAPYDetails = ({ underlyingAPY, supplyAPY, borrowAPY }: ListAPYDetailsProps) => {
+  return (
+    <TextWithTooltip>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '4px',
+        }}
+      >
+        {supplyAPY !== undefined && <APYBox symbol="Supply APY" value={supplyAPY} />}
+        {borrowAPY !== undefined && <APYBox symbol="Borrow APY" value={borrowAPY} />}
+        <APYBox symbol="Underlying APY" value={underlyingAPY} />
+      </Box>
+    </TextWithTooltip>
+  );
+};

src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsListItem.tsx

@@ -11,6 +11,7 @@ import { ListColumn } from '../../../../components/lists/ListColumn';
 import { useProtocolDataContext } from '../../../../hooks/useProtocolDataContext';
 import { isFeatureEnabled } from '../../../../utils/marketsAndNetworksConfig';
 import { ListAPRColumn } from '../ListAPRColumn';
+import { ListAPYDetails } from '../ListAPYDetails';
 import { ListButtonsColumn } from '../ListButtonsColumn';
 import { ListItemUsedAsCollateral } from '../ListItemUsedAsCollateral';
 import { ListItemWrapper } from '../ListItemWrapper';
@@ -66,7 +67,19 @@ export const SuppliedPositionsListItem = ({
       />
 
       <ListAPRColumn
-        value={Number(reserve.supplyAPY)}
+        value={
+          reserve.underlyingAPY
+            ? Number(reserve.supplyAPY) + reserve.underlyingAPY
+            : Number(reserve.supplyAPY)
+        }
+        tooltip={
+          reserve.underlyingAPY ? (
+            <ListAPYDetails
+              supplyAPY={Number(reserve.supplyAPY)}
+              underlyingAPY={reserve.underlyingAPY}
+            />
+          ) : null
+        }
         incentives={aIncentivesData}
         symbol={reserve.symbol}
       />

src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsListMobileItem.tsx

@@ -9,6 +9,7 @@ import { Row } from '../../../../components/primitives/Row';
 import { useModalContext } from '../../../../hooks/useModal';
 import { useProtocolDataContext } from '../../../../hooks/useProtocolDataContext';
 import { isFeatureEnabled } from '../../../../utils/marketsAndNetworksConfig';
+import { ListAPYDetails } from '../ListAPYDetails';
 import { ListItemUsedAsCollateral } from '../ListItemUsedAsCollateral';
 import { ListMobileItemWrapper } from '../ListMobileItemWrapper';
 import { ListValueRow } from '../ListValueRow';
@@ -35,6 +36,7 @@ export const SuppliedPositionsListMobileItem = ({
     isFrozen,
     isActive,
     isPaused,
+    underlyingAPY,
   } = reserve;
 
   const canBeEnabledAsCollateral = user
@@ -74,7 +76,12 @@ export const SuppliedPositionsListMobileItem = ({
         mb={2}
       >
         <IncentivesCard
-          value={Number(supplyAPY)}
+          value={underlyingAPY ? Number(supplyAPY) + underlyingAPY : Number(supplyAPY)}
+          tooltip={
+            underlyingAPY ? (
+              <ListAPYDetails supplyAPY={Number(supplyAPY)} underlyingAPY={underlyingAPY} />
+            ) : null
+          }
           incentives={aIncentivesData}
           symbol={symbol}
           variant="secondary14"