feat: added support for multi incentives campaigns for a token

AGMASO · AGMASO · commit e6ff7c14507a · 2025-10-22T16:19:05.000+02:00
diff --git a/src/components/incentives/MerklIncentivesTooltipContent.tsx b/src/components/incentives/MerklIncentivesTooltipContent.tsx
@@ -130,48 +130,98 @@ export const MerklIncentivesTooltipContent = ({
               </Row>
             )}
 
-            {/* Merit Incentives */}
-            <Row
-              height={32}
-              caption={
-                <Box
-                  sx={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    mb: 0,
-                  }}
-                >
-                  <TokenIcon
-                    aToken={merklIncentivesFormatted.aToken}
-                    symbol={merklIncentivesFormatted.tokenIconSymbol}
-                    sx={{ fontSize: '20px', mr: 1 }}
+            {/* 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>
+                  );
+                })}
+              </>
+            ) : (
+              <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}>
-                    {merklIncentivesFormatted.symbol}
-                  </Typography>
-                  <Typography variant={typographyVariant} sx={{ ml: 0.5 }}>
-                    {merklIncentives.breakdown.isBorrow ? '(-)' : '(+)'}
+                  <Typography variant={typographyVariant} sx={{ ml: 1 }}>
+                    <Trans>APY</Trans>
                   </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>
-
+              </Row>
+            )}
             {/* Total APY */}
             <Box sx={{ mt: 2, pt: 2, borderTop: 1, borderColor: 'divider' }}>
               <Row
diff --git a/src/hooks/useMerklIncentives.ts b/src/hooks/useMerklIncentives.ts
@@ -80,6 +80,16 @@ type ReserveIncentiveAdditionalData = {
 export type ExtendedReserveIncentiveResponse = ReserveIncentiveResponse &
   ReserveIncentiveAdditionalData & {
     breakdown: MerklIncentivesBreakdown;
+    allOpportunities?: {
+      name: string;
+      apy: number;
+      rewardToken: {
+        address: string;
+        symbol: string;
+        icon: string;
+        price: number;
+      };
+    }[];
   };
 
 export type MerklIncentivesBreakdown = {
@@ -98,7 +108,80 @@ type WhitelistApiResponse = {
   whitelistedRewardTokens: string[];
   additionalIncentiveInfo: Record<string, ReserveIncentiveAdditionalData>;
 };
+// TODO: Remove mock before production
+const ethfiMockOpportunity: MerklOpportunity = {
+  chainId: 9745,
+  type: 'AAVE_SUPPLY',
+  identifier: '0xaf1a7a488c8348b41d5860c04162af7d3d38a996' as Address,
+  name: 'Lend weETH on Aave (ETHFI Bonus)',
+  status: OpportunityStatus.LIVE,
+  action: OpportunityAction.LEND,
+  tvl: 1000000,
+  apr: 5.0,
+  dailyRewards: 500,
+  tags: [],
+  id: 'mock-ethfi-campaign-2',
+  explorerAddress: '0xaf1a7a488c8348b41d5860c04162af7d3d38a996' as Address,
+  tokens: [
+    {
+      id: '14178706307683891785',
+      name: 'Aave Plasma weETH',
+      chainId: 9745,
+      address: '0xaf1a7a488c8348b41d5860c04162af7d3d38a996' as Address,
+      decimals: 18,
+      icon: '',
+      verified: false,
+      isTest: false,
+      price: 4156.526571271317,
+      symbol: 'aPlaweETH',
+    },
+    {
+      id: '3885658325202072166',
+      name: 'Wrapped eETH',
+      chainId: 9745,
+      address: '0xa3d68b74bf0528fdd07263c60d6488749044914b' as Address,
+      decimals: 18,
+      icon: 'https://storage.googleapis.com/merkl-static-assets/tokens/weETH.webp',
+      verified: true,
+      isTest: false,
+      price: 4156.526571271317,
+      symbol: 'weETH',
+    },
+  ],
+  rewardsRecord: {
+    id: 'mock-ethfi-rewards-record',
+    total: 500,
+    timestamp: '1761125029',
+    breakdowns: [
+      {
+        token: {
+          id: 'ethfi-token-id',
+          name: 'Ether.fi Governance Token',
+          chainId: 9745,
+          address: '0xfe0c30065b384f05761f15d0cc899d4f9f9cc0eb',
+          decimals: 18,
+          symbol: 'ETHFI',
+          displaySymbol: 'ETHFI',
+          icon: 'https://assets.coingecko.com/coins/images/35958/standard/etherfi.png',
+          verified: true,
+          isTest: false,
+          type: 'TOKEN',
+          isNative: false,
+          price: 3.25,
+        },
+        amount: '153846153846153846153',
+        value: 500,
+        distributionType: 'DUTCH_AUCTION',
+        id: 'mock-ethfi-breakdown-id',
+        campaignId: 'mock-ethfi-campaign-id',
+        dailyRewardsRecordId: 'mock-ethfi-daily-rewards-id',
+      },
+    ],
+  },
+};
 
+// TODO: Remove mock before production
+const mockaddressWeETH = '0xfe0c30065b384f05761f15d0cc899d4f9f9cc0eb';
 const MERKL_ENDPOINT = 'https://api.merkl.xyz/v4/opportunities?mainProtocolId=aave'; // Merkl API
 const WHITELIST_ENDPOINT = 'https://apps.aavechan.com/api/aave/merkl/whitelist-token-list'; // Endpoint to fetch whitelisted tokens
 const checkOpportunityAction = (
@@ -121,7 +204,13 @@ const useWhitelistedTokens = () => {
       if (!response.ok) {
         throw new Error('Failed to fetch whitelisted tokens');
       }
-      return response.json();
+      const data = await response.json();
+
+      // TODO: Remove mock before production
+      if (!data.whitelistedRewardTokens.includes(mockaddressWeETH.toLowerCase())) {
+        data.whitelistedRewardTokens.push(mockaddressWeETH.toLowerCase());
+      }
+      return data;
     },
     queryKey: ['whitelistedTokens'],
     staleTime: 1000 * 60 * 5, // 5 minutes
@@ -148,6 +237,8 @@ export const useMerklIncentives = ({
     queryFn: async () => {
       const response = await fetch(`${MERKL_ENDPOINT}`);
       const merklOpportunities: MerklOpportunity[] = await response.json();
+      // TODO: Remove mock before production
+      merklOpportunities.push(ethfiMockOpportunity);
       return merklOpportunities;
     },
     queryKey: ['merklIncentives', market],
@@ -159,29 +250,22 @@ export const useMerklIncentives = ({
           opportunitiy.explorerAddress &&
           opportunitiy.explorerAddress.toLowerCase() === rewardedAsset.toLowerCase() &&
           protocolAction &&
-          checkOpportunityAction(opportunitiy.action, protocolAction) &&
-          opportunitiy.chainId === currentChainId
+          checkOpportunityAction(opportunitiy.action, protocolAction)
+        // disabled to allow cross-chain incentives e.g. ethfi on weETH
+        // opportunitiy.chainId === currentChainId
       );
 
       if (opportunities.length === 0) {
         return null;
       }
 
-      const opportunity = opportunities[0];
-
-      if (opportunity.status !== OpportunityStatus.LIVE) {
-        return null;
-      }
-
-      if (opportunity.apr <= 0) {
+      const validOpportunities = opportunities.filter(
+        (opp) => opp.status === OpportunityStatus.LIVE && opp.apr > 0
+      );
+      if (validOpportunities.length === 0) {
         return null;
       }
 
-      const merklIncentivesAPR = opportunity.apr / 100;
-      const merklIncentivesAPY = convertAprToApy(merklIncentivesAPR);
-
-      const rewardToken = opportunity.rewardsRecord.breakdowns[0].token;
-
       if (!whitelistData?.whitelistedRewardTokens) {
         return null;
       }
@@ -190,10 +274,24 @@ export const useMerklIncentives = ({
         whitelistData.whitelistedRewardTokens.map((token) => token.toLowerCase())
       );
 
-      if (!whitelistedTokensSet.has(rewardToken.address.toLowerCase())) {
+      const whitelistedOpportunities = validOpportunities.filter((opp) => {
+        const rewardToken = opp.rewardsRecord.breakdowns[0]?.token;
+        return rewardToken && whitelistedTokensSet.has(rewardToken.address.toLowerCase());
+      });
+
+      if (whitelistedOpportunities.length === 0) {
         return null;
       }
 
+      const totalMerklAPR = whitelistedOpportunities.reduce((sum, opp) => {
+        return sum + opp.apr / 100;
+      }, 0);
+
+      const merklIncentivesAPY = convertAprToApy(totalMerklAPR);
+
+      const primaryOpportunity = whitelistedOpportunities[0];
+      const rewardToken = primaryOpportunity.rewardsRecord.breakdowns[0].token;
+
       const protocolIncentivesAPR = protocolIncentives.reduce((sum, inc) => {
         return sum + (inc.incentiveAPR === 'Infinity' ? 0 : +inc.incentiveAPR);
       }, 0);
@@ -211,6 +309,11 @@ export const useMerklIncentives = ({
         rewardTokenAddress: rewardToken.address,
         rewardTokenSymbol: rewardToken.symbol,
         ...incentiveAdditionalData,
+        allOpportunities: whitelistedOpportunities.map((opp) => ({
+          name: opp.name,
+          apy: convertAprToApy(opp.apr / 100),
+          rewardToken: opp.rewardsRecord.breakdowns[0].token,
+        })),
         breakdown: {
           protocolAPY,
           protocolIncentivesAPR,
diff --git a/src/locales/en/messages.po b/src/locales/en/messages.po
@@ -3434,6 +3434,7 @@ msgstr "Selected supply assets"
 #: src/components/incentives/MerklIncentivesTooltipContent.tsx
 #: src/components/incentives/MerklIncentivesTooltipContent.tsx
 #: src/components/incentives/MerklIncentivesTooltipContent.tsx
+#: src/components/incentives/MerklIncentivesTooltipContent.tsx
 #: src/modules/dashboard/lists/BorrowedPositionsList/BorrowedPositionsList.tsx
 #: src/modules/dashboard/lists/BorrowedPositionsList/BorrowedPositionsList.tsx
 #: src/modules/dashboard/lists/BorrowedPositionsList/BorrowedPositionsListItem.tsx
