feat: display uniswap reward (#2909)

* Display bonusApr in pool explorer

Fix

Update apr detail tooltip

* Display bonusApr in zap-in widget

* Display merkl reward

Remove debug

Check pool address

Chore

Update

* Update share modal info

* Update show reward in my positions

Cont

Cont

* Only show on IN RANGE

* Fix filter rewards by position tokenId

* Chore

* Cont

* Chore

* F
x

* Filter farming pool

* Cont

* Revert api

* Cont

* Cont

Author: neikop

apps/kyberswap-interface/src/assets/svg/kyber/uni_bonus.svg

@@ -6,6 +6,7 @@ import { PoolQueryParams } from 'services/zapEarn'
 
 import { ReactComponent as FarmingIcon } from 'assets/svg/kyber/kem.svg'
 import { ReactComponent as FarmingLmIcon } from 'assets/svg/kyber/kemLm.svg'
+import { ReactComponent as UniBonusIcon } from 'assets/svg/kyber/uni_bonus.svg'
 import Loader from 'components/Loader'
 import TokenLogo from 'components/TokenLogo'
 import { MouseoverTooltipDesktopOnly } from 'components/Tooltip'
@@ -23,7 +24,7 @@ export const kemFarming = (pool: ParsedEarnPool) => {
   const isFarmingLm = programs.includes(ProgramType.LM)
 
   return isFarming ? (
-    <AprDetailTooltip feeApr={pool.feeApr} egApr={pool.kemEGApr || 0} lmApr={pool.kemLMApr || 0}>
+    <AprDetailTooltip feeApr={pool.feeApr || 0} egApr={pool.kemEGApr || 0} lmApr={pool.kemLMApr || 0}>
       {isFarmingLm ? (
         <FarmingLmIcon width={24} height={24} style={{ marginLeft: 4 }} />
       ) : (
@@ -33,6 +34,16 @@ export const kemFarming = (pool: ParsedEarnPool) => {
   ) : null
 }
 
+export const uniReward = (pool: ParsedEarnPool) => {
+  const hasReward = pool.bonusApr > 0
+
+  return hasReward ? (
+    <AprDetailTooltip uniApr={pool.bonusApr}>
+      <UniBonusIcon width={24} height={24} style={{ marginLeft: 4 }} />
+    </AprDetailTooltip>
+  ) : null
+}
+
 const DesktopTableRow = ({
   pool,
   filters,
@@ -87,7 +98,7 @@ const DesktopTableRow = ({
         <FeeTier>{formatDisplayNumber(pool.feeTier, { significantDigits: 4 })}%</FeeTier>
       </Flex>
       <Apr value={pool.apr}>
-        {formatAprNumber(pool.apr)}% {kemFarming(pool)}
+        {formatAprNumber(pool.apr)}% {kemFarming(pool)} {uniReward(pool)}
       </Apr>
       {isFarmingFiltered && (
         <Flex justifyContent="flex-end" onClick={e => handleOpenZapInWidget(e, true)}>

apps/kyberswap-interface/src/pages/Earns/PoolExplorer/DesktopTableRow.tsx

@@ -7,7 +7,7 @@ import { PoolQueryParams } from 'services/zapEarn'
 import CopyHelper from 'components/Copy'
 import TokenLogo from 'components/TokenLogo'
 import useTheme from 'hooks/useTheme'
-import { kemFarming } from 'pages/Earns/PoolExplorer/DesktopTableRow'
+import { kemFarming, uniReward } from 'pages/Earns/PoolExplorer/DesktopTableRow'
 import { FilterTag } from 'pages/Earns/PoolExplorer/Filter'
 import {
   Apr,
@@ -82,6 +82,7 @@ const MobileTableRow = ({
           <Flex alignItems="center" sx={{ gap: '2px' }}>
             <Apr value={pool.apr}>{formatAprNumber(pool.apr)}%</Apr>
             {kemFarming(pool)}
+            {uniReward(pool)}
           </Flex>
           <Star
             size={16}

apps/kyberswap-interface/src/pages/Earns/PoolExplorer/MobileTableRow.tsx

@@ -57,7 +57,7 @@ const TableContent = ({
         dexLogo: dexInfo.logoURL,
         dexName: dexInfo.name,
         feeApr: pool.apr,
-        apr: (pool.kemEGApr || 0) + (pool.kemLMApr || 0) + pool.apr,
+        apr: pool.apr + (pool.kemEGApr || 0) + (pool.kemLMApr || 0) + (pool.bonusApr || 0),
       }
     })
   }, [poolData?.data?.pools, dexLookupMap])

apps/kyberswap-interface/src/pages/Earns/PoolExplorer/TableContent.tsx

@@ -6,16 +6,25 @@ import { Flex, Text } from 'rebass'
 import { useCycleConfigQuery } from 'services/kyberdata'
 
 import { ReactComponent as FarmingIcon } from 'assets/svg/kyber/kem.svg'
+import { ReactComponent as UniBonusIcon } from 'assets/svg/kyber/uni_bonus.svg'
 import InfoHelper from 'components/InfoHelper'
 import Loader from 'components/Loader'
 import TokenLogo from 'components/TokenLogo'
+import { MouseoverTooltip } from 'components/Tooltip'
 import { NETWORKS_INFO } from 'constants/networks'
 import useTheme from 'hooks/useTheme'
-import { NextDistribution, PositionAction, RewardDetailInfo, RewardsSection } from 'pages/Earns/PositionDetail/styles'
+import {
+  NextDistribution,
+  PositionAction,
+  RewardDetailInfo,
+  RewardLink,
+  RewardsSection,
+} from 'pages/Earns/PositionDetail/styles'
 import { HorizontalDivider } from 'pages/Earns/UserPositions/styles'
 import PositionSkeleton from 'pages/Earns/components/PositionSkeleton'
 import RewardSyncing from 'pages/Earns/components/RewardSyncing'
 import useKemRewards from 'pages/Earns/hooks/useKemRewards'
+import useMerklRewards from 'pages/Earns/hooks/useMerklRewards'
 import { ParsedPosition, PositionStatus, TokenRewardInfo } from 'pages/Earns/types'
 import { checkEarlyPosition } from 'pages/Earns/utils/position'
 import { formatDisplayNumber } from 'utils/numbers'
@@ -50,6 +59,11 @@ const RewardSection = ({
     onOpenClaim: onOpenClaimRewards,
     claiming: rewardsClaiming,
   } = useKemRewards(refetchPositions)
+
+  const { rewardsByPosition } = useMerklRewards({ positions: position ? [position] : undefined })
+  const merklRewards = position ? rewardsByPosition[position.id]?.rewards || [] : []
+  const merklRewardsTotalUsd = position ? rewardsByPosition[position.id]?.totalUsdValue || 0 : 0
+
   const rewardInfoThisPosition = !position ? undefined : rewardInfo?.nfts.find(item => item.nftId === position.tokenId)
 
   const chain = position?.chain.id ? NETWORKS_INFO[position.chain.id as ChainId]?.route || '' : ''
@@ -83,6 +97,11 @@ const RewardSection = ({
         <Flex alignItems={'center'} justifyContent={'space-between'} sx={{ gap: '20px' }}>
           <Flex alignItems={'center'} sx={{ gap: 1 }}>
             <FarmingIcon width={20} height={20} />
+            {merklRewards.length > 0 && (
+              <MouseoverTooltip text={merklRewardTooltip(merklRewards, theme.text)} placement="top" width="160px">
+                <UniBonusIcon width={20} height={20} />
+              </MouseoverTooltip>
+            )}
             <Text fontSize={14} color={theme.subText} lineHeight={'20PX'}>
               {t`Total Rewards`}
             </Text>
@@ -96,7 +115,7 @@ const RewardSection = ({
           ) : (
             <Flex alignItems={'center'} sx={{ gap: 1 }}>
               <Text fontSize={20}>
-                {formatDisplayNumber(rewardInfoThisPosition?.totalUsdValue || 0, {
+                {formatDisplayNumber((rewardInfoThisPosition?.totalUsdValue || 0) + merklRewardsTotalUsd, {
                   significantDigits: 4,
                   style: 'currency',
                 })}
@@ -105,6 +124,7 @@ const RewardSection = ({
                 text={totalRewardTooltip({
                   lmTokens: rewardInfoThisPosition?.lmTokens || [],
                   egTokens: rewardInfoThisPosition?.egTokens || [],
+                  merklRewards,
                   textColor: theme.text,
                 })}
                 placement="top"
@@ -315,17 +335,35 @@ export const inProgressRewardTooltip = ({
   )
 }
 
+const merklRewardTooltip = (merklRewards: Array<TokenRewardInfo>, textColor: string) => (
+  <Flex flexDirection={'column'} sx={{ gap: 1 }}>
+    <Text lineHeight={'16px'} fontSize={12}>
+      {t`Uniswap Bonus:`}
+    </Text>
+    {merklRewards.map(token => (
+      <Flex alignItems={'center'} sx={{ gap: 1 }} flexWrap={'wrap'} key={token.address}>
+        <TokenLogo src={token.logo} size={16} />
+        <RewardLink href="https://app.uniswap.org/positions" target="_blank">
+          <Text color={textColor}>{formatDisplayNumber(token.totalAmount, { significantDigits: 4 })}</Text>
+          <Text color={textColor}>{token.symbol}</Text>
+        </RewardLink>
+      </Flex>
+    ))}
+  </Flex>
+)
+
 export const totalRewardTooltip = ({
   lmTokens,
   egTokens,
+  merklRewards = [],
   textColor,
 }: {
   lmTokens: Array<TokenRewardInfo>
   egTokens: Array<TokenRewardInfo>
+  merklRewards?: Array<TokenRewardInfo>
   textColor: string
 }) => (
   <Flex flexDirection={'column'} sx={{ gap: 1 }}>
-    <HorizontalDivider />
     <Text lineHeight={'16px'} fontSize={12}>
       {t`LM Reward:`}
       {!lmTokens.length ? ' 0' : ''}
@@ -337,6 +375,8 @@ export const totalRewardTooltip = ({
         <Text color={textColor}>{token.symbol}</Text>
       </Flex>
     ))}
+
+    <HorizontalDivider />
     <Text lineHeight={'16px'} fontSize={12}>
       {t`EG Sharing Reward:`}
       {!egTokens.length ? ' 0' : ''}
@@ -348,6 +388,13 @@ export const totalRewardTooltip = ({
         <Text color={textColor}>{token.symbol}</Text>
       </Flex>
     ))}
+
+    {merklRewards.length > 0 && (
+      <>
+        <HorizontalDivider />
+        {merklRewardTooltip(merklRewards, textColor)}
+      </>
+    )}
   </Flex>
 )
 

apps/kyberswap-interface/src/pages/Earns/PositionDetail/RewardSection.tsx

@@ -12,6 +12,7 @@ import { ReactComponent as IconEarnNotFound } from 'assets/svg/earn/ic_earn_not_
 import { ReactComponent as IconUserEarnPosition } from 'assets/svg/earn/ic_user_earn_position.svg'
 import { ReactComponent as FarmingIcon } from 'assets/svg/kyber/kem.svg'
 import { ReactComponent as FarmingLmIcon } from 'assets/svg/kyber/kemLm.svg'
+import { ReactComponent as UniBonusIcon } from 'assets/svg/kyber/uni_bonus.svg'
 import { ReactComponent as RocketIcon } from 'assets/svg/rocket.svg'
 import { Loader2 } from 'components/Loader'
 import TokenLogo from 'components/TokenLogo'
@@ -360,7 +361,7 @@ const PositionDetail = () => {
             },
             position: {
               apr: {
-                total: position.apr[aprInterval],
+                total: position.apr[aprInterval] + position.bonusApr,
                 eg: position.kemEGApr[aprInterval],
                 lm: position.kemLMApr[aprInterval],
               },
@@ -384,9 +385,10 @@ const PositionDetail = () => {
         </Text>
         {position?.pool.isFarming && !isUnfinalized && (
           <AprDetailTooltip
-            feeApr={position?.feeApr[aprInterval] || 0}
-            egApr={position?.kemEGApr[aprInterval] || 0}
-            lmApr={position?.kemLMApr[aprInterval] || 0}
+            feeApr={position.feeApr[aprInterval] || 0}
+            egApr={position.kemEGApr[aprInterval] || 0}
+            lmApr={position.kemLMApr[aprInterval] || 0}
+            uniApr={position.bonusApr}
           >
             <Info color={theme.subText} size={16} />
           </AprDetailTooltip>
@@ -407,12 +409,13 @@ const PositionDetail = () => {
             ) : position?.pool.isFarming ? (
               <FarmingIcon width={20} height={20} />
             ) : null}
+            {position?.bonusApr ? <UniBonusIcon width={20} height={20} /> : null}
             <Text
               fontSize={20}
               marginRight={1}
               color={position?.apr && position.apr[aprInterval] > 0 ? theme.primary : theme.text}
             >
-              {formatAprNumber(position?.apr[aprInterval] || 0)}%
+              {formatAprNumber((position?.apr[aprInterval] || 0) + (position?.bonusApr || 0))}%
             </Text>
             {!initialLoading &&
               !isUnfinalized &&

apps/kyberswap-interface/src/pages/Earns/PositionDetail/index.tsx

@@ -1,4 +1,5 @@
 import { rgba } from 'polished'
+import { Link } from 'rebass'
 import styled from 'styled-components'
 
 import { ReactComponent as IconArrowLeftSvg } from 'assets/svg/ic_left_arrow.svg'
@@ -286,3 +287,9 @@ export const ShareButtonWrapper = styled.div`
     filter: brightness(1.05);
   }
 `
+
+export const RewardLink = styled(Link)`
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px dashed ${({ theme }) => theme.text};
+`