feat: add all incentives in the whole app

src/components/incentives/IncentivesCard.tsx

@@ -25,7 +25,7 @@ interface IncentivesCardProps {
   protocolAction?: ProtocolAction;
 }
 
-const hasIncentivesCheck = (incentives: IncentivesCardProps) => {
+export const hasIncentivesCheck = (incentives: IncentivesBoxProps) => {
   const lmIncentives = IncentivesButton({
     symbol: incentives.symbol,
     incentives: incentives.incentives,
@@ -47,6 +47,74 @@ const hasIncentivesCheck = (incentives: IncentivesCardProps) => {
   }
 };
 
+interface IncentivesBoxProps {
+  symbol: string;
+  market: string;
+  incentives?: ReserveIncentiveResponse[];
+  address?: string;
+  protocolAction?: ProtocolAction;
+  isInModal?: boolean;
+  displayBlank?: boolean;
+  displayNone?: boolean;
+}
+
+export const IncentivesBox = ({
+  symbol,
+  incentives,
+  address,
+  market,
+  protocolAction,
+  isInModal,
+  displayBlank = true,
+}: 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}
+      />
+    </Box>
+  );
+};
+
 export const IncentivesCard = (incentivesCardProps: IncentivesCardProps) => {
   const {
     symbol,
@@ -62,9 +130,6 @@ export const IncentivesCard = (incentivesCardProps: IncentivesCardProps) => {
     protocolAction,
   } = incentivesCardProps;
 
-  const isTableChangedToCards = useMediaQuery('(max-width:1125px)');
-  const hasIncentives = hasIncentivesCheck(incentivesCardProps);
-
   return (
     <Box
       sx={{
@@ -91,27 +156,13 @@ export const IncentivesCard = (incentivesCardProps: IncentivesCardProps) => {
       ) : (
         <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} displayBlank={!hasIncentives} />
-        <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}
+      />
     </Box>
   );
 };

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';
@@ -143,6 +144,9 @@ export const DebtSwitchModalDetails = ({
       <DetailsIncentivesLine
         incentives={switchSource.reserve.aIncentivesData}
         symbol={switchSource.reserve.symbol}
+        market={currentMarket}
+        address={switchSource.reserve.aTokenAddress}
+        protocolAction={ProtocolAction.supply}
         futureIncentives={switchSource.reserve.aIncentivesData}
         futureSymbol={switchSource.reserve.symbol}
         loading={loading}

src/components/transactions/FlowCommons/TxModalDetails.tsx

@@ -1,9 +1,11 @@
+import { ProtocolAction } from '@aave/contract-helpers';
 import { ReserveIncentiveResponse } from '@aave/math-utils/dist/esm/formatters/incentive/calculate-reserve-incentives';
 import { ArrowNarrowRightIcon } from '@heroicons/react/solid';
 import { Trans } from '@lingui/macro';
 import { Box, FormControlLabel, Skeleton, SvgIcon, Switch, Typography } from '@mui/material';
 import { parseUnits } from 'ethers/lib/utils';
 import React, { ReactNode } from 'react';
+import { hasIncentivesCheck, IncentivesBox } from 'src/components/incentives/IncentivesCard';
 import {
   IsolatedDisabledBadge,
   IsolatedEnabledBadge,
@@ -13,7 +15,6 @@ import { Row } from 'src/components/primitives/Row';
 import { CollateralType } from 'src/helpers/types';
 
 import { HealthFactorNumber } from '../../HealthFactorNumber';
-import { IncentivesButton } from '../../incentives/IncentivesButton';
 import { FormattedNumber, FormattedNumberProps } from '../../primitives/FormattedNumber';
 import { TokenIcon } from '../../primitives/TokenIcon';
 import { GasStation } from '../GasStation/GasStation';
@@ -239,40 +240,82 @@ export const CollateralState = ({ collateralType }: CollateralStateProps) => {
 };
 
 interface DetailsIncentivesLineProps {
-  futureIncentives?: ReserveIncentiveResponse[];
-  futureSymbol?: string;
   incentives?: ReserveIncentiveResponse[];
   // the token yielding the incentive, not the incentive itself
   symbol: string;
+  market: string;
+  address: string;
+  protocolAction: ProtocolAction;
   loading?: boolean;
+  futureAddress?: string;
+  futureIncentives?: ReserveIncentiveResponse[];
+  futureSymbol?: string;
 }
 
 export const DetailsIncentivesLine = ({
   incentives,
   symbol,
+  market,
+  address,
+  protocolAction,
+  futureAddress,
   futureIncentives,
   futureSymbol,
   loading = false,
 }: DetailsIncentivesLineProps) => {
-  if (!incentives || incentives.filter((i) => i.incentiveAPR !== '0').length === 0) return null;
+  const hasIncentives = hasIncentivesCheck({
+    symbol: symbol,
+    incentives: incentives,
+    market,
+    protocolAction,
+  });
+
+  if (!hasIncentives) return null;
+
+  const hasFutureIncentives = hasIncentivesCheck({
+    symbol: futureSymbol || '',
+    incentives: futureIncentives,
+    market,
+    protocolAction,
+  });
+
   return (
     <Row caption={<Trans>Rewards APR</Trans>} captionVariant="description" mb={4} minHeight={24}>
-      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          width: 'min-content',
+        }}
+      >
         {loading ? (
           <Skeleton variant="rectangular" height={20} width={100} sx={{ borderRadius: '4px' }} />
         ) : (
           <>
-            <IncentivesButton incentives={incentives} symbol={symbol} />
-            {futureSymbol && (
+            <IncentivesBox
+              symbol={symbol}
+              incentives={incentives || []}
+              market={market}
+              address={address}
+              protocolAction={protocolAction}
+            />
+            {ArrowRightIcon}
+            {hasFutureIncentives ? (
               <>
-                {ArrowRightIcon}
-                <IncentivesButton incentives={futureIncentives} symbol={futureSymbol} />
-                {futureIncentives && futureIncentives.length === 0 && (
-                  <Typography variant="secondary14">
-                    <Trans>None</Trans>
-                  </Typography>
-                )}
+                <IncentivesBox
+                  symbol={futureSymbol || ''}
+                  incentives={futureIncentives || []}
+                  market={market}
+                  address={futureAddress}
+                  protocolAction={protocolAction}
+                  isInModal={true}
+                />
               </>
+            ) : (
+              <Typography variant="secondary14">
+                <Trans>None</Trans>
+              </Typography>
             )}
           </>
         )}

src/components/transactions/Supply/SupplyModalContent.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 { USD_DECIMALS, valueToBigNumber } from '@aave/math-utils';
 import { Trans } from '@lingui/macro';
 import { Skeleton, Stack, Typography } from '@mui/material';
@@ -261,6 +261,9 @@ export const SupplyModalContent = React.memo(
           <DetailsIncentivesLine
             incentives={poolReserve.aIncentivesData}
             symbol={poolReserve.symbol}
+            market={currentMarketData.market}
+            address={poolReserve.aTokenAddress}
+            protocolAction={ProtocolAction.supply}
           />
           <DetailsCollateralLine collateralType={collateralType} />
           <DetailsHFLine
@@ -456,6 +459,9 @@ export const SupplyWrappedTokenModalContent = ({
         <DetailsIncentivesLine
           incentives={poolReserve.aIncentivesData}
           symbol={poolReserve.symbol}
+          market={currentMarketData.market}
+          address={poolReserve.aTokenAddress}
+          protocolAction={ProtocolAction.supply}
         />
         <DetailsCollateralLine collateralType={collateralType} />
         <DetailsHFLine

src/components/transactions/Swap/SwapModalDetails.tsx

@@ -1,3 +1,4 @@
+import { ProtocolAction } from '@aave/contract-helpers';
 import { valueToBigNumber } from '@aave/math-utils';
 import { ArrowNarrowRightIcon } from '@heroicons/react/outline';
 import { Trans } from '@lingui/macro';
@@ -13,6 +14,8 @@ import {
   DetailsNumberLine,
 } from 'src/components/transactions/FlowCommons/TxModalDetails';
 import { CollateralType } from 'src/helpers/types';
+import { useRootStore } from 'src/store/root';
+import { useShallow } from 'zustand/shallow';
 
 import { ComputedUserReserveData } from '../../../hooks/app-data-provider/useAppDataProvider';
 
@@ -37,6 +40,14 @@ export const SwapModalDetails = ({
   fromAmount,
   loading,
 }: SupplyModalDetailsProps) => {
+  const [, currentMarketData] = useRootStore(
+    useShallow((state) => [
+      state.poolComputed.minRemainingBaseTokenBalance,
+      state.currentMarketData,
+      state.currentNetworkConfig,
+    ])
+  );
+
   const sourceAmountAfterSwap = valueToBigNumber(swapSource.underlyingBalance).minus(
     valueToBigNumber(fromAmount)
   );
@@ -103,6 +114,10 @@ export const SwapModalDetails = ({
       <DetailsIncentivesLine
         incentives={swapSource.reserve.aIncentivesData}
         symbol={swapSource.reserve.symbol}
+        market={currentMarketData.market}
+        address={swapSource.reserve.aTokenAddress}
+        protocolAction={ProtocolAction.supply}
+        futureAddress={swapTarget.reserve.aTokenAddress}
         futureIncentives={swapTarget.reserve.aIncentivesData}
         futureSymbol={swapTarget.reserve.symbol}
         loading={loading}