feat: show boosted incentives in debt and collateral swap

src/components/incentives/IncentivesCard.tsx

@@ -3,8 +3,7 @@ import { ReserveIncentiveResponse } from '@aave/math-utils/dist/esm/formatters/i
 import { Box, Typography } from '@mui/material';
 import { useRouter } from 'next/router';
 import { ReactNode } from 'react';
-import { ENABLE_SELF_CAMPAIGN, useMeritIncentives } from 'src/hooks/useMeritIncentives';
-import { useMerklIncentives } from 'src/hooks/useMerklIncentives';
+import { useBoostedAPY } from 'src/hooks/useBoostedAPY';
 
 import { FormattedNumber } from '../primitives/FormattedNumber';
 import { NoData } from '../primitives/NoData';
@@ -49,48 +48,16 @@ export const IncentivesCard = ({
   const router = useRouter();
   const protocolAPY = typeof value === 'string' ? parseFloat(value) : value;
 
-  const protocolIncentivesAPR =
-    incentives?.reduce((sum, inc) => {
-      if (inc.incentiveAPR === 'Infinity' || sum === 'Infinity') {
-        return 'Infinity';
-      }
-      return sum + +inc.incentiveAPR;
-    }, 0 as number | 'Infinity') || 0;
-
-  const { data: meritIncentives } = useMeritIncentives({
+  const boostedAPY = useBoostedAPY({
     symbol,
     market,
     protocolAction,
     protocolAPY,
-    protocolIncentives: incentives || [],
-  });
-
-  const { data: merklIncentives } = useMerklIncentives({
-    market,
-    rewardedAsset: address,
-    protocolAction,
-    protocolAPY,
-    protocolIncentives: incentives || [],
+    incentives,
+    address,
   });
 
-  const meritIncentivesAPR = meritIncentives?.breakdown?.meritIncentivesAPR || 0;
-
-  // TODO: This is a one-off for the Self campaign.
-  // Remove once the Self incentives are finished.
-  const selfAPY = ENABLE_SELF_CAMPAIGN ? meritIncentives?.variants?.selfAPY ?? 0 : 0;
-  const totalMeritAPY = meritIncentivesAPR + selfAPY;
-  const merklIncentivesAPR = merklIncentives?.breakdown?.merklIncentivesAPR || 0;
-
-  const isBorrow = protocolAction === ProtocolAction.borrow;
-
-  // If any incentive is infinite, the total should be infinite
-  const hasInfiniteIncentives = protocolIncentivesAPR === 'Infinity';
-
-  const displayAPY = hasInfiniteIncentives
-    ? 'Infinity'
-    : isBorrow
-    ? protocolAPY - (protocolIncentivesAPR as number) - totalMeritAPY - merklIncentivesAPR
-    : protocolAPY + (protocolIncentivesAPR as number) + totalMeritAPY + merklIncentivesAPR;
+  const { displayAPY } = boostedAPY;
 
   const isSghoPage =
     typeof router?.asPath === 'string' && router.asPath.toLowerCase().startsWith('/sgho');

src/components/transactions/DebtSwitch/DebtSwitchModalContent.tsx

@@ -66,6 +66,7 @@ export const DebtSwitchModalContent = ({
   const { reserves } = useAppDataContext();
   const currentChainId = useRootStore((store) => store.currentChainId);
   const currentNetworkConfig = useRootStore((store) => store.currentNetworkConfig);
+  const currentMarketData = useRootStore((store) => store.currentMarketData);
   const { currentAccount } = useWeb3Context();
   const { gasLimit, mainTxState, txError, setTxError } = useModalContext();
 
@@ -302,6 +303,7 @@ export const DebtSwitchModalContent = ({
           sourceBalance={maxAmountToSwitch}
           sourceBorrowAPY={poolReserve.variableBorrowAPY}
           targetBorrowAPY={switchTarget.reserve.variableBorrowAPY}
+          market={currentMarketData.market}
         />
       </TxModalDetails>
 

src/components/transactions/DebtSwitch/DebtSwitchModalDetails.tsx

@@ -1,12 +1,12 @@
+import { ProtocolAction } from '@aave/contract-helpers';
 import { valueToBigNumber } from '@aave/math-utils';
-import { ArrowNarrowRightIcon } from '@heroicons/react/solid';
 import { Trans } from '@lingui/macro';
-import { Box, Skeleton, SvgIcon } from '@mui/material';
+import { Box, Skeleton } from '@mui/material';
 import React from 'react';
 import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
 import { Row } from 'src/components/primitives/Row';
 import { TokenIcon } from 'src/components/primitives/TokenIcon';
-import { DetailsIncentivesLine } from 'src/components/transactions/FlowCommons/TxModalDetails';
+import { DetailsAPYTransitionLine } from 'src/components/transactions/FlowCommons/TxModalDetails';
 
 import { ComputedUserReserveData } from '../../../hooks/app-data-provider/useAppDataProvider';
 
@@ -19,12 +19,8 @@ export type DebtSwitchModalDetailsProps = {
   sourceBalance: string;
   sourceBorrowAPY: string;
   targetBorrowAPY: string;
+  market?: string;
 };
-const ArrowRightIcon = (
-  <SvgIcon color="primary" sx={{ fontSize: '14px', mx: 1 }}>
-    <ArrowNarrowRightIcon />
-  </SvgIcon>
-);
 
 export const DebtSwitchModalDetails = ({
   switchSource,
@@ -35,6 +31,7 @@ export const DebtSwitchModalDetails = ({
   sourceBalance,
   sourceBorrowAPY,
   targetBorrowAPY,
+  market,
 }: DebtSwitchModalDetailsProps) => {
   const sourceAmountAfterSwap = valueToBigNumber(sourceBalance).minus(valueToBigNumber(fromAmount));
 
@@ -56,27 +53,22 @@ export const DebtSwitchModalDetails = ({
 
   return (
     <>
-      <Row caption={<Trans>Borrow apy</Trans>} captionVariant="description" mb={4}>
-        <Box sx={{ display: 'flex', alignItems: 'center' }}>
-          {loading ? (
-            <Skeleton variant="rectangular" height={20} width={100} sx={{ borderRadius: '4px' }} />
-          ) : (
-            <>
-              <FormattedNumber value={sourceBorrowAPY} variant="secondary14" percent />
-              {ArrowRightIcon}
-              <FormattedNumber value={targetBorrowAPY} variant="secondary14" percent />
-            </>
-          )}
-        </Box>
-      </Row>
-
-      <DetailsIncentivesLine
-        incentives={switchSource.reserve.aIncentivesData}
-        symbol={switchSource.reserve.symbol}
-        futureIncentives={switchSource.reserve.aIncentivesData}
-        futureSymbol={switchSource.reserve.symbol}
-        loading={loading}
-      />
+      {market && (
+        <DetailsAPYTransitionLine
+          symbol={switchSource.reserve.symbol}
+          market={market}
+          protocolAction={ProtocolAction.borrow}
+          protocolAPY={+sourceBorrowAPY}
+          incentives={switchSource.reserve.vIncentivesData}
+          address={switchSource.reserve.variableDebtTokenAddress}
+          futureSymbol={switchTarget.reserve.symbol}
+          futureMarket={market}
+          futureProtocolAPY={+targetBorrowAPY}
+          futureIncentives={switchTarget.reserve.vIncentivesData}
+          futureAddress={switchTarget.reserve.variableDebtTokenAddress}
+          loading={loading}
+        />
+      )}
 
       <Row
         caption={<Trans>Borrow balance after switch</Trans>}

src/components/transactions/FlowCommons/DetailsAPYLine.tsx

@@ -0,0 +1,98 @@
+import { ProtocolAction } from '@aave/contract-helpers';
+import { ReserveIncentiveResponse } from '@aave/math-utils/dist/esm/formatters/incentive/calculate-reserve-incentives';
+import { Trans } from '@lingui/macro';
+import { Box, Skeleton, Typography } from '@mui/material';
+import React from 'react';
+import { useBoostedAPY } from 'src/hooks/useBoostedAPY';
+
+import {
+  EthenaIncentivesButton,
+  EtherfiIncentivesButton,
+  IncentivesButton,
+  MeritIncentivesButton,
+  MerklIncentivesButton,
+  SonicIncentivesButton,
+} from '../../incentives/IncentivesButton';
+import { FormattedNumber } from '../../primitives/FormattedNumber';
+import { Row } from '../../primitives/Row';
+
+interface DetailsAPYLineProps {
+  symbol: string;
+  market: string;
+  protocolAction?: ProtocolAction;
+  protocolAPY: number;
+  incentives?: ReserveIncentiveResponse[];
+  address?: string;
+  loading?: boolean;
+}
+
+export const DetailsAPYLine = ({
+  symbol,
+  market,
+  protocolAction,
+  protocolAPY,
+  incentives = [],
+  address,
+  loading = false,
+}: DetailsAPYLineProps) => {
+  const boostedData = useBoostedAPY({
+    symbol,
+    market,
+    protocolAction,
+    protocolAPY,
+    incentives,
+    address,
+  });
+
+  const { displayAPY, hasIncentives } = boostedData;
+
+  // Create incentive buttons
+  const incentivesContent = (
+    <>
+      <IncentivesButton
+        incentives={incentives}
+        symbol={symbol}
+        market={market}
+        protocolAction={protocolAction}
+        protocolAPY={protocolAPY}
+        address={address}
+      />
+      <MeritIncentivesButton
+        symbol={symbol}
+        market={market}
+        protocolAction={protocolAction}
+        protocolAPY={protocolAPY}
+        protocolIncentives={incentives}
+      />
+      <MerklIncentivesButton
+        market={market}
+        rewardedAsset={address}
+        protocolAction={protocolAction}
+        protocolAPY={protocolAPY}
+        protocolIncentives={incentives}
+      />
+      <EthenaIncentivesButton rewardedAsset={address} />
+      <EtherfiIncentivesButton symbol={symbol} market={market} protocolAction={protocolAction} />
+      <SonicIncentivesButton rewardedAsset={address} />
+    </>
+  );
+
+  return (
+    <Row caption={<Trans>APY</Trans>} captionVariant="description" mb={4}>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexWrap: 'wrap' }}>
+        {loading ? (
+          <Skeleton variant="rectangular" height={20} width={100} sx={{ borderRadius: '4px' }} />
+        ) : (
+          <>
+            {displayAPY === 'Infinity' ? (
+              <Typography variant="secondary14">∞ %</Typography>
+            ) : (
+              <FormattedNumber value={displayAPY} percent variant="secondary14" />
+            )}
+            {hasIncentives && incentivesContent}
+          </>
+        )}
+      </Box>
+    </Row>
+  );
+};