Merge pull request #1489 from curvefi/feat/merkl

feat: add merkl rewards

Author: 0xAlunara

apps/main/src/dex/components/PagePool/PoolDetails/PoolStats/Rewards.tsx

@@ -17,9 +17,9 @@ import Tooltip from '@ui/Tooltip/TooltipButton'
 import IconTooltip from '@ui/Tooltip/TooltipIcon'
 import { Chip } from '@ui/Typography'
 import { FORMAT_OPTIONS, formatNumber } from '@ui/utils'
-import { useCampaignsByNetwork } from '@ui-kit/entities/campaigns'
+import { useCampaignsByAddress } from '@ui-kit/entities/campaigns'
 import { t } from '@ui-kit/lib/i18n'
-import { copyToClipboard } from '@ui-kit/utils'
+import { copyToClipboard, type Address } from '@ui-kit/utils'
 
 type RewardsProps = {
   chainId: ChainId
@@ -31,8 +31,10 @@ const Rewards = ({ chainId, poolData, rewardsApy }: RewardsProps) => {
   const { base, other } = rewardsApy ?? {}
   const { haveBase, haveOther, haveCrv } = haveRewardsApy(rewardsApy ?? {})
   const network = useStore((state) => state.networks.networks[chainId])
-  const { data: campaigns } = useCampaignsByNetwork(network.networkId as Chain)
-  const campaignRewardsPool = campaigns?.[poolData.pool.address]
+  const { data: campaigns } = useCampaignsByAddress({
+    blockchainId: network.networkId as Chain,
+    address: poolData.pool.address as Address,
+  })
   const { isLite, scanTokenPath } = useStore((state) => state.networks.networks[chainId])
 
   const baseAPYS = [
@@ -135,10 +137,10 @@ const Rewards = ({ chainId, poolData, rewardsApy }: RewardsProps) => {
           )}
         </RewardsContainer>
       )}
-      {campaignRewardsPool && (
+      {campaigns.length > 0 && (
         <CampaignRewardsWrapper>
           <h4>{t`Additional external rewards`}</h4>
-          <CampaignRewardsRow rewardItems={campaignRewardsPool} />
+          <CampaignRewardsRow rewardItems={campaigns} />
         </CampaignRewardsWrapper>
       )}
     </RewardsWrapper>

apps/main/src/dex/components/PagePool/components/CampaignRewardsBanner.tsx

@@ -3,8 +3,9 @@ import CampaignBannerComp from 'ui/src/CampaignRewards/CampaignBannerComp'
 import useStore from '@/dex/store/useStore'
 import type { ChainId } from '@/dex/types/main.types'
 import type { Chain } from '@curvefi/prices-api'
-import { useCampaignsByNetwork } from '@ui-kit/entities/campaigns'
+import { useCampaignsByAddress } from '@ui-kit/entities/campaigns'
 import { t } from '@ui-kit/lib/i18n'
+import type { Address } from '@ui-kit/utils'
 
 interface CampaignRewardsBannerProps {
   chainId: ChainId
@@ -13,15 +14,17 @@ interface CampaignRewardsBannerProps {
 
 const CampaignRewardsBanner = ({ chainId, address }: CampaignRewardsBannerProps) => {
   const network = useStore((state) => state.networks.networks[chainId])
-  const { data: campaigns } = useCampaignsByNetwork(network.networkId as Chain)
-  const campaignRewardsPool = campaigns?.[address] ?? []
-  const message = campaignRewardsPool.some((rewardItem) => rewardItem.tags.includes('points'))
+  const { data: campaigns } = useCampaignsByAddress({
+    blockchainId: network.networkId as Chain,
+    address: address as Address,
+  })
+  const message = campaigns.some((campaign) => campaign.tags.includes('points'))
     ? t`Liquidity providers in this pool also earn points!`
     : t`Liquidity providers in this pool also earn additional tokens!`
   return (
-    campaignRewardsPool.length > 0 && (
+    campaigns.length > 0 && (
       <CampaignRewardsBannerWrapper>
-        <CampaignBannerComp campaignRewardsPool={campaignRewardsPool} message={message} />
+        <CampaignBannerComp campaignRewardsPool={campaigns} message={message} />
       </CampaignRewardsBannerWrapper>
     )
   )

apps/main/src/dex/components/PagePoolList/components/TableRow.tsx

@@ -13,9 +13,10 @@ import { PoolData, PoolDataCache, RewardsApy, Tvl, Volume } from '@/dex/types/ma
 import type { Chain } from '@curvefi/prices-api'
 import Box from '@ui/Box'
 import { CellInPool, Td, Tr } from '@ui/Table'
-import { useCampaignsByNetwork } from '@ui-kit/entities/campaigns'
+import { useCampaignsByAddress } from '@ui-kit/entities/campaigns'
 import useIntersectionObserver from '@ui-kit/hooks/useIntersectionObserver'
 import { t } from '@ui-kit/lib/i18n'
+import type { Address } from '@ui-kit/utils'
 
 export type TableRowProps = {
   index: number
@@ -58,7 +59,10 @@ const TableRow = ({
 }: TableRowProps) => {
   const { searchTextByTokensAndAddresses, searchTextByOther } = formValues
   const { searchText, sortBy } = searchParams
-  const { data: campaigns } = useCampaignsByNetwork(blockchainId as Chain)
+  const { data: campaigns } = useCampaignsByAddress({
+    blockchainId: blockchainId as Chain,
+    address: poolData?.pool?.address as Address,
+  })
 
   return (
     <LazyItem id={`${poolId}-${index}`} className="row--info" onClick={({ target }) => handleCellClick(target)}>
@@ -97,9 +101,7 @@ const TableRow = ({
                     <TableCellRewardsOthers isHighlight={sortBy === 'rewardsOther'} rewardsApy={rewardsApy} />
                   </>
                 )}
-                {poolData && campaigns?.[poolData.pool.address] && (
-                  <CampaignRewardsRow rewardItems={campaigns[poolData.pool.address]} />
-                )}
+                {campaigns.length > 0 && <CampaignRewardsRow rewardItems={campaigns} />}
               </Box>
             </Td>
           )}
@@ -124,9 +126,7 @@ const TableRow = ({
                   {rewardsApy && (
                     <TableCellRewardsOthers isHighlight={sortBy === 'rewardsOther'} rewardsApy={rewardsApy} />
                   )}
-                  {poolData && campaigns?.[poolData.pool.address] && (
-                    <CampaignRewardsRow rewardItems={campaigns[poolData.pool.address]} />
-                  )}
+                  {campaigns.length > 0 && <CampaignRewardsRow rewardItems={campaigns} />}
                 </Box>
               </Td>
             </>
@@ -141,9 +141,7 @@ const TableRow = ({
                   isHighlightOther={sortBy === 'rewardsOther'}
                   rewardsApy={rewardsApy}
                 />
-                {poolData && campaigns?.[poolData.pool.address] && (
-                  <CampaignRewardsRow rewardItems={campaigns[poolData.pool.address]} />
-                )}
+                {campaigns.length > 0 && <CampaignRewardsRow rewardItems={campaigns} />}
               </Box>
             </Td>
           )}

apps/main/src/dex/components/PagePoolList/components/TableRowMobile.tsx

@@ -19,9 +19,10 @@ import IconButton from '@ui/IconButton'
 import ListInfoItem, { ListInfoItems } from '@ui/ListInfo'
 import { CellInPool } from '@ui/Table'
 import { formatNumber } from '@ui/utils'
-import { useCampaignsByNetwork } from '@ui-kit/entities/campaigns'
+import { useCampaignsByAddress } from '@ui-kit/entities/campaigns'
 import { t } from '@ui-kit/lib/i18n'
 import type { ThemeKey } from '@ui-kit/themes/basic-theme'
+import type { Address } from '@ui-kit/utils'
 
 type TableRowMobileProps = Omit<TableRowProps, 'isMdUp'> & {
   showDetail: string
@@ -51,7 +52,10 @@ const TableRowMobile = ({
   handleCellClick,
   setShowDetail,
 }: TableRowMobileProps) => {
-  const { data: campaigns } = useCampaignsByNetwork(blockchainId as Chain)
+  const { data: campaigns } = useCampaignsByAddress({
+    blockchainId: blockchainId as Chain,
+    address: poolData?.pool?.address as Address,
+  })
   const { searchTextByTokensAndAddresses, searchTextByOther } = formValues
   const { searchText, sortBy } = searchParams
   const isShowDetail = showDetail === poolId
@@ -152,9 +156,9 @@ const TableRowMobile = ({
                           />
                         </ListInfoItem>
                       )}
-                      {poolData && campaigns?.[poolData.pool.address] && (
+                      {campaigns.length > 0 && (
                         <ListInfoItem title={t`Additional external rewards`}>
-                          <CampaignRewardsRow rewardItems={campaigns[poolData.pool.address]} mobile />
+                          <CampaignRewardsRow rewardItems={campaigns} mobile />
                         </ListInfoItem>
                       )}
                     </>

apps/main/src/dex/store/createPoolListSlice.ts

@@ -24,7 +24,9 @@ import {
   type ValueMapperCached,
 } from '@/dex/types/main.types'
 import type { Chain } from '@curvefi/prices-api'
-import { getCampaigns } from '@ui-kit/entities/campaigns'
+import { combineCampaigns } from '@ui-kit/entities/campaigns'
+import { getCampaignsExternal } from '@ui-kit/entities/campaigns/campaigns-external'
+import { getCampaignsMerkl } from '@ui-kit/entities/campaigns/campaigns-merkl'
 import { groupSearchTerms, searchByText, takeTopWithMin } from '@ui-kit/utils'
 
 type StateKey = keyof typeof DEFAULT_STATE
@@ -201,13 +203,20 @@ const createPoolListSlice = (set: SetState<State>, get: GetState<State>): PoolLi
         const blockchainId = networks[chainId].networkId as Chain
         return orderBy(
           poolDatas,
-          ({ pool }) =>
-            Math.max(
+          ({ pool }) => {
+            const externalCampaigns = getCampaignsExternal({})
+            const merklCampaigns = getCampaignsMerkl({})
+            const campaigns = combineCampaigns({
+              campaigns: [externalCampaigns, merklCampaigns],
+              filter: (campaign) => campaign.network === blockchainId,
+            })
+            const rewards = campaigns[pool.address.toLowerCase()] ?? []
+
+            return Math.max(
               0,
-              ...(getCampaigns({})?.[pool.address.toLowerCase()] ?? [])
-                .filter((x) => x.network === blockchainId)
-                .map((x) => (x.multiplier && typeof x.multiplier === 'number' ? x.multiplier : 0)),
-            ),
+              ...rewards.map((x) => (x.multiplier && typeof x.multiplier === 'number' ? x.multiplier : 0)),
+            )
+          },
           [order],
         )
       }

apps/main/src/lend/components/CampaignRewardsBanner.tsx

@@ -2,8 +2,9 @@ import CampaignBannerComp from 'ui/src/CampaignRewards/CampaignBannerComp'
 import networks from '@/lend/networks'
 import { ChainId } from '@/lend/types/lend.types'
 import type { Chain } from '@curvefi/prices-api'
-import { useCampaigns } from '@ui-kit/entities/campaigns'
+import { useCampaignsByAddress } from '@ui-kit/entities/campaigns'
 import { t } from '@ui-kit/lib/i18n'
+import type { Address } from '@ui-kit/utils'
 
 interface CampaignRewardsBannerProps {
   chainId: ChainId
@@ -13,17 +14,17 @@ interface CampaignRewardsBannerProps {
 
 const CampaignRewardsBanner = ({ chainId, borrowAddress, supplyAddress }: CampaignRewardsBannerProps) => {
   const blockchainId = networks[chainId].id as Chain
-  const { data: campaigns } = useCampaigns({ blockchainId })
-  const supplyCampaignRewardsPool = campaigns?.[supplyAddress] ?? []
-  const borrowCampaignRewardsPool = campaigns?.[borrowAddress] ?? []
+  const { data: supplyCampaigns } = useCampaignsByAddress({ blockchainId, address: supplyAddress as Address })
+  const { data: borrowCampaigns } = useCampaignsByAddress({ blockchainId, address: borrowAddress as Address })
+
   return (
-    supplyCampaignRewardsPool.length + borrowCampaignRewardsPool.length > 0 && (
+    supplyCampaigns.length + borrowCampaigns.length > 0 && (
       <CampaignBannerComp
-        campaignRewardsPool={[...supplyCampaignRewardsPool, ...borrowCampaignRewardsPool]}
+        campaignRewardsPool={[...supplyCampaigns, ...borrowCampaigns]}
         message={
-          supplyCampaignRewardsPool.length && borrowCampaignRewardsPool.length
+          supplyCampaigns.length && borrowCampaigns.length
             ? t`Supplying and borrowing in this pool earns points!`
-            : supplyCampaignRewardsPool
+            : supplyCampaigns
               ? t`Supplying in this pool earns points!`
               : t`Borrowing in this pool earns points!`
         }

apps/main/src/lend/hooks/useBorrowPositionDetails.ts

@@ -9,7 +9,7 @@ import type { BorrowPositionDetailsProps } from '@/llamalend/features/market-pos
 import { calculateRangeToLiquidation } from '@/llamalend/features/market-position-details/utils'
 import { calculateLtv } from '@/llamalend/llama.utils'
 import type { Address, Chain } from '@curvefi/prices-api'
-import { useCampaignsByNetwork } from '@ui-kit/entities/campaigns'
+import { useCampaignsByAddress } from '@ui-kit/entities/campaigns'
 import { useLendingSnapshots } from '@ui-kit/entities/lending-snapshots'
 import { useTokenUsdRate } from '@ui-kit/lib/model/entities/token-usd-rate'
 import { LlamaMarketType } from '@ui-kit/types/market'
@@ -48,7 +48,7 @@ export const useBorrowPositionDetails = ({
   const prices = useStore((state) => state.markets.pricesMapper[chainId]?.[marketId])
 
   const blockchainId = networks[chainId].id as Chain
-  const { data: campaigns } = useCampaignsByNetwork(blockchainId)
+  const { data: campaigns } = useCampaignsByAddress({ blockchainId, address: controller as Address })
   const { data: onChainRatesData, isLoading: isOnchainRatesLoading } = useMarketOnChainRates({
     chainId,
     marketId,
@@ -82,10 +82,6 @@ export const useBorrowPositionDetails = ({
     if (!collateralUsdRate || !collateral || !borrowed) return null
     return Number(collateral) * Number(collateralUsdRate) + Number(borrowed)
   }, [collateral, borrowed, collateralUsdRate])
-  const campaignRewards = useMemo(() => {
-    if (!campaigns || !controller) return []
-    return [...(campaigns[controller.toLowerCase()] ?? [])]
-  }, [campaigns, controller])
 
   const rebasingYield = lendSnapshots?.[lendSnapshots.length - 1]?.collateralToken?.rebasingYield // take most recent rebasing yield
   return {
@@ -106,7 +102,7 @@ export const useBorrowPositionDetails = ({
       averageRebasingYield: averageRebasingYield ?? null,
       totalBorrowRate: borrowApy == null ? null : Number(borrowApy) - (rebasingYield ?? 0),
       totalAverageBorrowRate: averageRate == null ? null : averageRate - (averageRebasingYield ?? 0),
-      extraRewards: campaignRewards,
+      extraRewards: campaigns,
       loading: !market || isOnchainRatesLoading || isLendSnapshotsLoading || !market?.addresses.controller,
     },
     liquidationRange: {

apps/main/src/lend/hooks/useMarketDetails.tsx

@@ -6,7 +6,7 @@ import useStore from '@/lend/store/useStore'
 import type { ChainId, OneWayMarketTemplate } from '@/lend/types/lend.types'
 import type { MarketDetailsProps } from '@/llamalend/features/market-details'
 import type { Chain, Address } from '@curvefi/prices-api'
-import { useCampaignsByNetwork } from '@ui-kit/entities/campaigns'
+import { useCampaignsByAddress } from '@ui-kit/entities/campaigns'
 import { useLendingSnapshots } from '@ui-kit/entities/lending-snapshots'
 import { useTokenUsdRate } from '@ui-kit/lib/model/entities/token-usd-rate'
 import { LlamaMarketType } from '@ui-kit/types/market'
@@ -51,7 +51,10 @@ export const useMarketDetails = ({
     chainId,
     tokenAddress: borrowed_token?.address,
   })
-  const { data: campaigns } = useCampaignsByNetwork(blockchainId)
+
+  const { data: campaignsVault } = useCampaignsByAddress({ blockchainId, address: vault as Address })
+  const { data: campaignsController } = useCampaignsByAddress({ blockchainId, address: controller as Address })
+  const campaigns = [...campaignsVault, ...campaignsController]
 
   const {
     borrowApy: averageBorrowApy,
@@ -89,10 +92,6 @@ export const useMarketDetails = ({
   const supplyAprCrvMaxBoost = crvRates?.[1] ?? lendingSnapshots?.[0]?.lendAprCrvMaxBoost ?? 0
   const collateralRebasingYield = lendingSnapshots?.[lendingSnapshots.length - 1]?.collateralToken?.rebasingYield // take only most recent rebasing yield
   const borrowRebasingYield = lendingSnapshots?.[lendingSnapshots.length - 1]?.borrowedToken?.rebasingYield // take only most recent rebasing yield
-  const campaignRewards =
-    campaigns && vault && controller
-      ? [...(campaigns[vault.toLowerCase()] ?? []), ...(campaigns[controller.toLowerCase()] ?? [])]
-      : []
   const extraIncentivesTotalApr = sum(rewardsApr?.map((r) => r.apy) ?? [])
   const totalSupplyRateMinBoost =
     supplyApy == null
@@ -145,7 +144,7 @@ export const useMarketDetails = ({
       averageRebasingYield: averageBorrowRebasingYield ?? null,
       totalBorrowRate: borrowApy == null ? null : Number(borrowApy) - (collateralRebasingYield ?? 0),
       totalAverageBorrowRate,
-      extraRewards: campaignRewards,
+      extraRewards: campaigns,
       loading: !llamma || isSnapshotsLoading || isMarketDetailsLoading.marketOnChainRates,
     },
     supplyAPY: {
@@ -171,7 +170,7 @@ export const useMarketDetails = ({
             address: r.tokenAddress,
           }))
         : [],
-      extraRewards: campaignRewards,
+      extraRewards: campaigns,
       loading: !llamma || isSnapshotsLoading || isMarketDetailsLoading.marketOnChainRates,
     },
     availableLiquidity: {

apps/main/src/lend/hooks/useSupplyPositionDetails.ts

@@ -6,7 +6,7 @@ import networks from '@/lend/networks'
 import { ChainId, OneWayMarketTemplate } from '@/lend/types/lend.types'
 import type { SupplyPositionDetailsProps } from '@/llamalend/features/market-position-details'
 import type { Address, Chain } from '@curvefi/prices-api'
-import { useCampaignsByNetwork } from '@ui-kit/entities/campaigns'
+import { useCampaignsByAddress } from '@ui-kit/entities/campaigns'
 import { useLendingSnapshots } from '@ui-kit/entities/lending-snapshots'
 import { useTokenUsdRate } from '@ui-kit/lib/model/entities/token-usd-rate'
 import { calculateAverageRates } from '@ui-kit/utils/averageRates'
@@ -26,7 +26,10 @@ export const useSupplyPositionDetails = ({
   marketId,
 }: UseSupplyPositionDetailsProps): SupplyPositionDetailsProps => {
   const blockchainId = networks[chainId].id as Chain
-  const { data: campaigns } = useCampaignsByNetwork(blockchainId)
+  const { data: campaigns } = useCampaignsByAddress({
+    blockchainId,
+    address: market?.addresses?.vault?.toLocaleLowerCase() as Address,
+  })
   const { data: userBalances, isLoading: isUserBalancesLoading } = useUserMarketBalances({ chainId, marketId })
   const { data: marketPricePerShare, isLoading: isMarketPricePerShareLoading } = useMarketPricePerShare({
     chainId,
@@ -103,11 +106,6 @@ export const useSupplyPositionDetails = ({
         (averageTotalExtraIncentivesApr ?? 0) +
         (averageSupplyAprCrvMaxBoost ?? 0)
 
-  const campaignRewards = useMemo(() => {
-    if (!campaigns || !market?.addresses?.vault) return []
-    return [...(campaigns[market?.addresses?.vault.toLowerCase()] ?? [])]
-  }, [campaigns, market?.addresses?.vault])
-
   return {
     supplyAPY: {
       rate: supplyApy,
@@ -134,7 +132,7 @@ export const useSupplyPositionDetails = ({
           }))
         : [],
       averageTotalExtraIncentivesApr: averageTotalExtraIncentivesApr ?? null,
-      extraRewards: campaignRewards,
+      extraRewards: campaigns,
       loading: islendingSnapshotsLoading || isOnChainRatesLoading || isUserBalancesLoading,
     },
     boost: {