feat: added point based incentives for ink

src/components/incentives/IncentivesButton.tsx

@@ -6,7 +6,8 @@ import { useState } from 'react';
 import { useEthenaIncentives } from 'src/hooks/useEthenaIncentives';
 import { useEtherfiIncentives } from 'src/hooks/useEtherfiIncentives';
 import { useMeritIncentives } from 'src/hooks/useMeritIncentives';
-import { useMerklIncentives } from 'src/hooks/useMerklIncentives';
+import { ExtendedReserveIncentiveResponse, useMerklIncentives } from 'src/hooks/useMerklIncentives';
+import { useMerklPointsIncentives } from 'src/hooks/useMerklPointsIncentives';
 import { useSonicIncentives } from 'src/hooks/useSonicIncentives';
 import { useRootStore } from 'src/store/root';
 import { DASHBOARD } from 'src/utils/events';
@@ -174,19 +175,28 @@ export const MerklIncentivesButton = (params: {
 }) => {
   const [open, setOpen] = useState(false);
   const { data: merklIncentives } = useMerklIncentives(params);
+  const { data: merklPointsIncentives } = useMerklPointsIncentives(params);
 
-  if (!merklIncentives) {
+  const incentiveData = merklIncentives?.breakdown
+    ? merklIncentives
+    : merklPointsIncentives?.breakdown
+    ? merklPointsIncentives
+    : undefined;
+
+  const incentiveAPR = incentiveData?.incentiveAPR ? +incentiveData.incentiveAPR : 0;
+
+  if (!incentiveData) {
     return null;
   }
 
   return (
     <ContentWithTooltip
-      tooltipContent={<MerklIncentivesTooltipContent merklIncentives={merklIncentives} />}
+      tooltipContent={<MerklIncentivesTooltipContent merklIncentives={incentiveData} />}
       withoutHover
       setOpen={setOpen}
       open={open}
     >
-      <Content incentives={[merklIncentives]} incentivesNetAPR={+merklIncentives.incentiveAPR} />
+      <Content incentives={[incentiveData]} incentivesNetAPR={incentiveAPR} />
     </ContentWithTooltip>
   );
 };
@@ -335,13 +345,12 @@ const Content = ({
       return null;
     }
   }
+  const hasPointsBreakdown = incentives.some(
+    (incentive) => (incentive as ExtendedReserveIncentiveResponse)?.breakdown?.points !== undefined
+  );
 
-  if (incentivesNetAPR === 0) {
-    if (displayBlank) {
-      return <BlankIncentives />;
-    } else {
-      return null;
-    }
+  if (incentivesNetAPR === 0 && !hasPointsBreakdown) {
+    return displayBlank ? <BlankIncentives /> : null;
   }
 
   const incentivesButtonValue = () => {

src/components/incentives/IncentivesCard.tsx

@@ -5,6 +5,7 @@ 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 { useMerklPointsIncentives } from 'src/hooks/useMerklPointsIncentives';
 
 import { FormattedNumber } from '../primitives/FormattedNumber';
 import { NoData } from '../primitives/NoData';
@@ -73,13 +74,24 @@ export const IncentivesCard = ({
     protocolIncentives: incentives || [],
   });
 
+  const { data: merklPointsIncentives } = useMerklPointsIncentives({
+    market,
+    rewardedAsset: address,
+    protocolAction,
+    protocolAPY,
+    protocolIncentives: incentives || [],
+  });
+
   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 merklIncentivesAPR = merklPointsIncentives?.breakdown?.points
+    ? merklPointsIncentives.breakdown.merklIncentivesAPR || 0
+    : merklIncentives?.breakdown?.merklIncentivesAPR || 0;
 
   const isBorrow = protocolAction === ProtocolAction.borrow;
 

src/components/incentives/IncentivesTooltipContent.tsx

@@ -182,6 +182,11 @@ const IncentivesSymbolMap: {
     symbol: 'aUSDe',
     aToken: true,
   },
+  tydroInkPoints: {
+    tokenIconSymbol: 'TydroInkPoints',
+    symbol: 'TydroInkPoints',
+    aToken: false,
+  },
 };
 
 interface IncentivesTooltipContentProps {

src/components/incentives/MerklIncentivesTooltipContent.tsx

@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro';
 import { Box, Typography, useTheme } from '@mui/material';
 import { ExtendedReserveIncentiveResponse } from 'src/hooks/useMerklIncentives';
 
+import { PointsBasedCampaignTooltip } from '../infoTooltips/PointsBasedCampaignTooltip';
 import { FormattedNumber } from '../primitives/FormattedNumber';
 import { Link } from '../primitives/Link';
 import { Row } from '../primitives/Row';
@@ -19,6 +20,8 @@ export const MerklIncentivesTooltipContent = ({
 
   const merklIncentivesFormatted = getSymbolMap(merklIncentives);
 
+  const isPointsBased = Boolean(merklIncentives?.breakdown?.points);
+
   return (
     <Box
       sx={{
@@ -146,56 +149,7 @@ export const MerklIncentivesTooltipContent = ({
             )}
 
             {/* Merkl Incentives */}
-            {merklIncentives.allOpportunities && merklIncentives.allOpportunities.length > 1 ? (
-              <>
-                {merklIncentives.allOpportunities.map((opportunity, index) => {
-                  const { tokenIconSymbol, symbol, aToken } = getSymbolMap({
-                    rewardTokenSymbol: opportunity.rewardToken.symbol,
-                    rewardTokenAddress: opportunity.rewardToken.address,
-                    incentiveAPR: opportunity.apy.toString(),
-                  });
-                  return (
-                    <Row
-                      key={index}
-                      height={32}
-                      caption={
-                        <Box
-                          sx={{
-                            display: 'flex',
-                            alignItems: 'center',
-                            mb: 0,
-                          }}
-                        >
-                          <TokenIcon
-                            symbol={tokenIconSymbol}
-                            aToken={aToken}
-                            sx={{ fontSize: '20px', mr: 1 }}
-                          />
-                          <Typography variant={typographyVariant}>{symbol}</Typography>
-                          <Typography variant={typographyVariant} sx={{ ml: 0.5 }}>
-                            {merklIncentives.breakdown.isBorrow ? '(-)' : '(+)'}
-                          </Typography>
-                        </Box>
-                      }
-                      width="100%"
-                    >
-                      <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
-                        <FormattedNumber
-                          value={
-                            merklIncentives.breakdown.isBorrow ? -opportunity.apy : opportunity.apy
-                          }
-                          percent
-                          variant={typographyVariant}
-                        />
-                        <Typography variant={typographyVariant} sx={{ ml: 1 }}>
-                          <Trans>APY</Trans>
-                        </Typography>
-                      </Box>
-                    </Row>
-                  );
-                })}
-              </>
-            ) : (
+            {isPointsBased ? (
               <Row
                 height={32}
                 caption={
@@ -206,37 +160,130 @@ export const MerklIncentivesTooltipContent = ({
                       mb: 0,
                     }}
                   >
-                    <TokenIcon
+                    <Typography variant={typographyVariant}>Points</Typography>
+                    <PointsBasedCampaignTooltip
                       aToken={merklIncentivesFormatted.aToken}
-                      symbol={merklIncentivesFormatted.tokenIconSymbol}
-                      sx={{ fontSize: '20px', mr: 1 }}
+                      tokenIconSymbol={merklIncentivesFormatted.tokenIconSymbol}
+                      symbol={merklIncentivesFormatted.symbol}
+                      isBorrow={merklIncentives.breakdown.isBorrow}
+                      pointsPerThousandUsd={
+                        merklIncentives.breakdown.points?.pointsPerThousandUsd || 0
+                      }
+                      sx={{ marginLeft: 1 }}
                     />
-                    <Typography variant={typographyVariant}>
-                      {merklIncentivesFormatted.symbol}
-                    </Typography>
-                    <Typography variant={typographyVariant} sx={{ ml: 0.5 }}>
-                      {merklIncentives.breakdown.isBorrow ? '(-)' : '(+)'}
-                    </Typography>
                   </Box>
                 }
                 width="100%"
               >
                 <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
                   <FormattedNumber
-                    value={
-                      merklIncentives.breakdown.isBorrow
-                        ? -merklIncentives.breakdown.merklIncentivesAPR
-                        : merklIncentives.breakdown.merklIncentivesAPR
-                    }
-                    percent
+                    value={merklIncentives.breakdown.points?.pointsPerThousandUsd || 0}
+                    visibleDecimals={2}
                     variant={typographyVariant}
                   />
                   <Typography variant={typographyVariant} sx={{ ml: 1 }}>
-                    <Trans>APY</Trans>
+                    <Trans>Points</Trans>
                   </Typography>
                 </Box>
               </Row>
+            ) : (
+              <>
+                {merklIncentives.allOpportunities && merklIncentives.allOpportunities.length > 1 ? (
+                  <>
+                    {merklIncentives.allOpportunities.map((opportunity, index) => {
+                      const { tokenIconSymbol, symbol, aToken } = getSymbolMap({
+                        rewardTokenSymbol: opportunity.rewardToken.symbol,
+                        rewardTokenAddress: opportunity.rewardToken.address,
+                        incentiveAPR: opportunity.apy.toString(),
+                      });
+                      return (
+                        <Row
+                          key={index}
+                          height={32}
+                          caption={
+                            <Box
+                              sx={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                mb: 0,
+                              }}
+                            >
+                              <TokenIcon
+                                symbol={tokenIconSymbol}
+                                aToken={aToken}
+                                sx={{ fontSize: '20px', mr: 1 }}
+                              />
+                              <Typography variant={typographyVariant}>{symbol}</Typography>
+                              <Typography variant={typographyVariant} sx={{ ml: 0.5 }}>
+                                {merklIncentives.breakdown.isBorrow ? '(-)' : '(+)'}
+                              </Typography>
+                            </Box>
+                          }
+                          width="100%"
+                        >
+                          <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
+                            <FormattedNumber
+                              value={
+                                merklIncentives.breakdown.isBorrow
+                                  ? -opportunity.apy
+                                  : opportunity.apy
+                              }
+                              percent
+                              variant={typographyVariant}
+                            />
+                            <Typography variant={typographyVariant} sx={{ ml: 1 }}>
+                              <Trans>APY</Trans>
+                            </Typography>
+                          </Box>
+                        </Row>
+                      );
+                    })}
+                  </>
+                ) : (
+                  <Row
+                    height={32}
+                    caption={
+                      <Box
+                        sx={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          mb: 0,
+                        }}
+                      >
+                        <TokenIcon
+                          aToken={merklIncentivesFormatted.aToken}
+                          symbol={merklIncentivesFormatted.tokenIconSymbol}
+                          sx={{ fontSize: '20px', mr: 1 }}
+                        />
+                        <Typography variant={typographyVariant}>
+                          {merklIncentivesFormatted.symbol}
+                        </Typography>
+                        <Typography variant={typographyVariant} sx={{ ml: 0.5 }}>
+                          {merklIncentives.breakdown.isBorrow ? '(-)' : '(+)'}
+                        </Typography>
+                      </Box>
+                    }
+                    width="100%"
+                  >
+                    <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
+                      <FormattedNumber
+                        value={
+                          merklIncentives.breakdown.isBorrow
+                            ? -merklIncentives.breakdown.merklIncentivesAPR
+                            : merklIncentives.breakdown.merklIncentivesAPR
+                        }
+                        percent
+                        variant={typographyVariant}
+                      />
+                      <Typography variant={typographyVariant} sx={{ ml: 1 }}>
+                        <Trans>APY</Trans>
+                      </Typography>
+                    </Box>
+                  </Row>
+                )}
+              </>
             )}
+
             {/* Total APY */}
             <Box sx={{ mt: 2, pt: 2, borderTop: 1, borderColor: 'divider' }}>
               <Row