✨ Implement incentives to all remaining components

src/components/incentives/IncentivesButton.tsx

@@ -8,8 +8,11 @@ import { useMeritIncentives } from 'src/hooks/useMeritIncentives';
 import { useZkSyncIgniteIncentives } from 'src/hooks/useZkSyncIgniteIncentives';
 import { useRootStore } from 'src/store/root';
 import { DASHBOARD } from 'src/utils/mixPanelEvents';
+import { getNoAprExternalIncentivesTooltipConfig } from 'src/utils/utils';
 
 import { ContentWithTooltip } from '../ContentWithTooltip';
+import { SpkAirdropTooltip } from '../infoTooltips/SpkAirdropTooltip';
+import { SuperFestTooltip } from '../infoTooltips/SuperFestTooltip';
 import { FormattedNumber } from '../primitives/FormattedNumber';
 import { TokenIcon } from '../primitives/TokenIcon';
 import { getSymbolMap, IncentivesTooltipContent } from './IncentivesTooltipContent';
@@ -22,6 +25,12 @@ interface IncentivesButtonProps {
   displayBlank?: boolean;
 }
 
+interface NoAprExternalIncentiveTooltipProps {
+  market: string;
+  symbol?: string;
+  protocolAction?: ProtocolAction;
+}
+
 const BlankIncentives = () => {
   return (
     <Box
@@ -92,10 +101,33 @@ export const ZkIgniteIncentivesButton = (params: {
   );
 };
 
+export const NoAprExternalIncentiveTooltip = ({
+  market,
+  symbol,
+  protocolAction,
+}: NoAprExternalIncentiveTooltipProps) => {
+  if (!symbol || !protocolAction) {
+    return null;
+  }
+
+  const noAprExternalIncentivesTooltips = getNoAprExternalIncentivesTooltipConfig(
+    symbol,
+    market,
+    protocolAction
+  );
+
+  return (
+    <>
+      {noAprExternalIncentivesTooltips.superFestRewards && <SuperFestTooltip />}
+      {noAprExternalIncentivesTooltips.spkAirdrop && <SpkAirdropTooltip />}
+    </>
+  );
+};
+
 export const IncentivesButton = ({ incentives, symbol, displayBlank }: IncentivesButtonProps) => {
   const [open, setOpen] = useState(false);
 
-  if (!(incentives && incentives.length > 0)) {
+  if (!(incentives && incentives.filter((i) => i.incentiveAPR !== '0').length > 0)) {
     if (displayBlank) {
       return <BlankIncentives />;
     } else {

src/components/incentives/IncentivesCard.tsx

@@ -8,37 +8,139 @@ import { NoData } from '../primitives/NoData';
 import {
   IncentivesButton,
   MeritIncentivesButton,
+  NoAprExternalIncentiveTooltip,
   ZkIgniteIncentivesButton,
 } from './IncentivesButton';
 
 interface IncentivesCardProps {
   symbol: string;
   value: string | number;
+  market: string;
   incentives?: ReserveIncentiveResponse[];
   address?: string;
   variant?: 'main14' | 'main16' | 'secondary14';
   symbolsVariant?: 'secondary14' | 'secondary16';
-  align?: 'center' | 'flex-end';
+  align?: 'center' | 'flex-end' | 'start';
   color?: string;
   tooltip?: ReactNode;
+  protocolAction?: ProtocolAction;
+  displayBlank?: boolean;
+}
+
+interface IncentivesBoxProps {
+  symbol: string;
   market: string;
+  incentives?: ReserveIncentiveResponse[];
+  address?: string;
   protocolAction?: ProtocolAction;
+  isInModal?: boolean;
+  displayBlank?: boolean;
+  displayNone?: boolean;
 }
 
-export const IncentivesCard = ({
+export const hasIncentivesCheck = (props: IncentivesBoxProps) => {
+  const lmIncentives = IncentivesButton({
+    symbol: props.symbol,
+    incentives: props.incentives,
+  });
+
+  const meritIncentives = MeritIncentivesButton({
+    symbol: props.symbol,
+    market: props.market,
+    protocolAction: props.protocolAction,
+  });
+
+  const zkIgniteIncentives = ZkIgniteIncentivesButton({
+    market: props.market,
+    rewardedAsset: props.address,
+    protocolAction: props.protocolAction,
+  });
+
+  if (lmIncentives || meritIncentives || zkIgniteIncentives) {
+    return true;
+  } else {
+    return false;
+  }
+};
+
+export const IncentivesBox = ({
   symbol,
-  value,
   incentives,
   address,
-  variant = 'secondary14',
-  symbolsVariant,
-  align,
-  color,
-  tooltip,
   market,
   protocolAction,
-}: IncentivesCardProps) => {
+  isInModal,
+  displayBlank,
+}: IncentivesBoxProps) => {
+  const incentivesBoxProps: IncentivesBoxProps = {
+    symbol,
+    incentives,
+    address,
+    market,
+    protocolAction,
+    isInModal,
+    displayBlank,
+  };
+
   const isTableChangedToCards = useMediaQuery('(max-width:1125px)');
+  const hasIncentives = hasIncentivesCheck(incentivesBoxProps);
+
+  return (
+    <Box
+      sx={
+        isTableChangedToCards && !isInModal
+          ? {
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              gap: '4px',
+            }
+          : {
+              display: 'flex',
+              justifyContent: 'center',
+              gap: '4px',
+              flexWrap: 'wrap',
+              flex: '0 0 50%', // 2 items per row
+              width: isInModal ? 'min-content' : 'auto', // 1 item per row in modal mode
+            }
+      }
+    >
+      <IncentivesButton
+        incentives={incentives}
+        symbol={symbol}
+        displayBlank={displayBlank && !hasIncentives}
+      />
+      <MeritIncentivesButton symbol={symbol} market={market} protocolAction={protocolAction} />
+      <ZkIgniteIncentivesButton
+        market={market}
+        rewardedAsset={address}
+        protocolAction={protocolAction}
+      />
+      <NoAprExternalIncentiveTooltip
+        market={market}
+        symbol={symbol}
+        protocolAction={protocolAction}
+      />
+    </Box>
+  );
+};
+
+export const IncentivesCard = (incentivesCardProps: IncentivesCardProps) => {
+  const {
+    symbol,
+    value,
+    incentives,
+    address,
+    variant = 'secondary14',
+    symbolsVariant,
+    align,
+    color,
+    tooltip,
+    market,
+    protocolAction,
+    displayBlank,
+  } = incentivesCardProps;
+
   return (
     <Box
       sx={{
@@ -65,27 +167,14 @@ export const IncentivesCard = ({
       ) : (
         <NoData variant={variant} color={color || 'text.secondary'} />
       )}
-      <Box
-        sx={
-          isTableChangedToCards
-            ? { display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: '4px' }
-            : {
-                display: 'flex',
-                justifyContent: 'center',
-                gap: '4px',
-                flexWrap: 'wrap',
-                flex: '0 0 50%', // 2 items per row
-              }
-        }
-      >
-        <IncentivesButton incentives={incentives} symbol={symbol} />
-        <MeritIncentivesButton symbol={symbol} market={market} protocolAction={protocolAction} />
-        <ZkIgniteIncentivesButton
-          market={market}
-          rewardedAsset={address}
-          protocolAction={protocolAction}
-        />
-      </Box>
+      <IncentivesBox
+        symbol={symbol}
+        incentives={incentives}
+        address={address}
+        market={market}
+        protocolAction={protocolAction}
+        displayBlank={displayBlank}
+      />
     </Box>
   );
 };

src/components/infoTooltips/SpkAirdropTooltip.tsx

@@ -6,7 +6,7 @@ import { TextWithTooltip } from '../TextWithTooltip';
 export const SpkAirdropTooltip = () => {
   return (
     <TextWithTooltip
-      wrapperProps={{ ml: 2 }}
+      wrapperProps={{ alignSelf: 'center' }}
       color="warning.main"
       iconSize={20}
       icon={<image href="/icons/other/spark.svg" width={25} height={25} />}

src/components/infoTooltips/SuperFestTooltip.tsx

@@ -6,7 +6,7 @@ import { TextWithTooltip } from '../TextWithTooltip';
 export const SuperFestTooltip = () => {
   return (
     <TextWithTooltip
-      wrapperProps={{ ml: 2 }}
+      wrapperProps={{ alignSelf: 'center' }}
       color="warning.main"
       iconSize={20}
       icon={<image href="/icons/other/superfest.svg" width={25} height={25} />}

src/components/transactions/Borrow/BorrowModalContent.tsx

@@ -1,4 +1,4 @@
-import { API_ETH_MOCK_ADDRESS } from '@aave/contract-helpers';
+import { API_ETH_MOCK_ADDRESS, ProtocolAction } from '@aave/contract-helpers';
 import {
   calculateHealthFactorFromBalancesBigUnits,
   USD_DECIMALS,
@@ -18,6 +18,7 @@ import { useRootStore } from 'src/store/root';
 import { getMaxAmountAvailableToBorrow } from 'src/utils/getMaxAmountAvailableToBorrow';
 import { GENERAL } from 'src/utils/mixPanelEvents';
 import { roundToTokenDecimals } from 'src/utils/utils';
+import { useShallow } from 'zustand/shallow';
 
 import { CapType } from '../../caps/helper';
 import { AssetInput } from '../AssetInput';
@@ -56,12 +57,19 @@ export const BorrowModalContent = ({
 }) => {
   const { mainTxState: borrowTxState, gasLimit, txError } = useModalContext();
   const { marketReferencePriceInUsd } = useAppDataContext();
-  const currentNetworkConfig = useRootStore((store) => store.currentNetworkConfig);
   const { borrowCap } = useAssetCaps();
 
   const [amount, setAmount] = useState('');
   const [riskCheckboxAccepted, setRiskCheckboxAccepted] = useState(false);
 
+  const [, currentMarketData, currentNetworkConfig] = useRootStore(
+    useShallow((state) => [
+      state.poolComputed.minRemainingBaseTokenBalance,
+      state.currentMarketData,
+      state.currentNetworkConfig,
+    ])
+  );
+
   // amount calculations
   const maxAmountToBorrow = getMaxAmountAvailableToBorrow(poolReserve, user);
 
@@ -196,6 +204,9 @@ export const BorrowModalContent = ({
         <DetailsIncentivesLine
           incentives={poolReserve.vIncentivesData}
           symbol={poolReserve.symbol}
+          market={currentMarketData.market}
+          address={poolReserve.variableDebtTokenAddress}
+          protocolAction={ProtocolAction.borrow}
         />
         <DetailsHFLine
           visibleHfChange={!!amount}

src/components/transactions/DebtSwitch/DebtSwitchModalDetails.tsx

@@ -1,3 +1,4 @@
+import { ProtocolAction } from '@aave/contract-helpers';
 import { valueToBigNumber } from '@aave/math-utils';
 import { ArrowNarrowRightIcon } from '@heroicons/react/solid';
 import { Trans } from '@lingui/macro';
@@ -141,10 +142,14 @@ export const DebtSwitchModalDetails = ({
       </Row>
 
       <DetailsIncentivesLine
-        incentives={switchSource.reserve.aIncentivesData}
+        incentives={switchSource.reserve.vIncentivesData}
         symbol={switchSource.reserve.symbol}
-        futureIncentives={switchSource.reserve.aIncentivesData}
-        futureSymbol={switchSource.reserve.symbol}
+        market={currentMarket}
+        address={switchSource.reserve.variableDebtTokenAddress}
+        protocolAction={ProtocolAction.borrow}
+        futureIncentives={switchTarget.reserve.vIncentivesData}
+        futureAddress={switchTarget.reserve.variableDebtTokenAddress}
+        futureSymbol={switchTarget.reserve.symbol}
         loading={loading}
       />