Pool farm improvement (#2178)

* feat: show static farm total reward * fix: addliquidity multiple pos for farm * env proid * revert env
KyberNetwork · Aug 18, 2023 · cfc9f63 · cfc9f63
1 parent 6acc313
commit cfc9f63
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 68 deletions.
diff --git a/src/pages/AddLiquidityV2/index.tsx b/src/pages/AddLiquidityV2/index.tsx
@@ -224,21 +224,24 @@ export default function AddLiquidity() {
   const poolAddress = useProAmmPoolInfo(baseCurrency, currencyB, feeAmount)
 
   const { farms } = useElasticFarmsV2()
-  const farmV2 = farms?.find(
+
+  const farmV2S = farms?.filter(
     item =>
       !item.isSettled &&
       item.endTime > Date.now() / 1000 &&
       item.poolAddress.toLowerCase() === poolAddress.toLowerCase(),
   )
 
-  const activeRanges = farmV2?.ranges.filter(r => !r.isRemoved) || []
+  const activeRanges =
+    farmV2S?.map(farm => farm.ranges.filter(item => !item.isRemoved).map(item => ({ ...item, farm }))).flat() || []
 
-  const isFarmV2Available = !!farmV2
+  const isFarmV2Available = !!farmV2S?.length
 
   const [showFarmRangeSelect, setShowFarmRangeSelect] = useState(() => isFarmV2Available)
   const [searchParams, setSearchParams] = useSearchParams()
   const activeRangeIndex = Number(searchParams.get('farmRange') || '0')
-  const range = activeRanges.find(i => i.index === activeRangeIndex)
+  const defaultFId = Number(searchParams.get('fId') || '0')
+  const range = activeRanges.find(i => i.index === activeRangeIndex && i.farm.fId === defaultFId)
 
   const canJoinFarm =
     isFarmV2Available &&
@@ -928,7 +931,7 @@ export default function AddLiquidity() {
   const [shownTooltip, setShownTooltip] = useState<RANGE | null>(null)
   const pairFactor = usePairFactor([tokenA, tokenB])
 
-  const isReverseWithFarm = baseCurrency?.wrapped.address !== farmV2?.token0.wrapped.address
+  const isReverseWithFarm = baseCurrency?.wrapped.address !== farmV2S?.[0]?.token0.wrapped.address
 
   const chart = (
     <ChartWrapper ref={chartRef}>
@@ -1001,34 +1004,35 @@ export default function AddLiquidity() {
                   </>
                 )}
               </Flex>
-              {showFarmRangeSelect && !!farmV2 && (
+              {showFarmRangeSelect && !!activeRanges.length && farmV2S?.[0] && (
                 <Flex sx={{ gap: '8px' }} flexWrap="wrap">
-                  {farmV2.ranges.map(range => {
+                  {activeRanges.map(range => {
                     if (range.isRemoved) return null
                     return (
                       <RangeBtn
                         style={{ width: 'fit-content' }}
-                        key={range.index}
+                        key={range.farm.fId + '_' + range.index}
                         onClick={() => {
                           searchParams.set('farmRange', range.index.toString())
+                          searchParams.set('fId', range.farm.fId.toString())
                           setSearchParams(searchParams)
                           onFarmRangeSelected(+range.tickLower, +range.tickUpper)
                         }}
-                        isSelected={activeRangeIndex === range.index}
+                        isSelected={activeRangeIndex === range.index && defaultFId === range.farm.fId}
                       >
                         <Flex alignItems="center" sx={{ gap: '2px' }}>
                           {convertTickToPrice(
-                            isReverseWithFarm ? farmV2.token1 : farmV2.token0,
-                            isReverseWithFarm ? farmV2.token0 : farmV2.token1,
+                            isReverseWithFarm ? farmV2S[0].token1 : farmV2S[0].token0,
+                            isReverseWithFarm ? farmV2S[0].token0 : farmV2S[0].token1,
                             isReverseWithFarm ? range.tickUpper : range.tickLower,
-                            farmV2.pool.fee,
+                            farmV2S[0].pool.fee,
                           )}
                           <TwoWayArrow />
                           {convertTickToPrice(
-                            isReverseWithFarm ? farmV2.token1 : farmV2.token0,
-                            isReverseWithFarm ? farmV2.token0 : farmV2.token1,
+                            isReverseWithFarm ? farmV2S[0].token1 : farmV2S[0].token0,
+                            isReverseWithFarm ? farmV2S[0].token0 : farmV2S[0].token1,
                             isReverseWithFarm ? range.tickLower : range.tickUpper,
-                            farmV2.pool.fee,
+                            farmV2S[0].pool.fee,
                           )}
                         </Flex>
                       </RangeBtn>
@@ -1314,11 +1318,22 @@ export default function AddLiquidity() {
   )
 
   useEffect(() => {
-    if (isFarmV2Available && range?.tickUpper && range?.tickUpper) {
+    if (isFarmV2Available) {
       setShowFarmRangeSelect(true)
-      onFarmRangeSelected(range.tickLower, range.tickUpper)
     } else setShowFarmRangeSelect(false)
-  }, [isFarmV2Available, range?.tickUpper, range?.tickLower, onFarmRangeSelected])
+  }, [isFarmV2Available])
+
+  useEffect(() => {
+    if (
+      isFarmV2Available &&
+      range?.tickUpper &&
+      range?.tickUpper &&
+      !positionsState[pIndex].leftRangeTypedValue &&
+      !positionsState[pIndex].rightRangeTypedValue
+    ) {
+      onFarmRangeSelected(range.tickLower, range.tickUpper)
+    }
+  }, [isFarmV2Available, range?.tickUpper, range?.tickLower, onFarmRangeSelected, positionsState, pIndex])
 
   if (!isEVM) return <Navigate to="/" />
 

diff --git a/src/pages/Farm/ElasticFarmv2/components/FarmCard.tsx b/src/pages/Farm/ElasticFarmv2/components/FarmCard.tsx
@@ -369,7 +369,7 @@ function FarmCard({
                         {range?.isRemoved ? (
                           <Trans>Idle Range</Trans>
                         ) : (
-                          <Link to={`${addliquidityElasticPool}?farmRange=${activeRangeIndex}`}>
+                          <Link to={`${addliquidityElasticPool}?farmRange=${activeRangeIndex}&fId=${farm.fId}`}>
                             <Trans>Add Liquidity ↗</Trans>
                           </Link>
                         )}

diff --git a/src/pages/Farm/ElasticFarmv2/components/NewRangesNotiModal.tsx b/src/pages/Farm/ElasticFarmv2/components/NewRangesNotiModal.tsx
@@ -160,7 +160,7 @@ export default function NewRangesNotiModal({ updatedFarms }: { updatedFarms: Ela
                     {range.isRemoved ? (
                       <Trans>Idle Range</Trans>
                     ) : (
-                      <Link to={`${addliquidityElasticPool}?farmRange=${range.index}`}>
+                      <Link to={`${addliquidityElasticPool}?farmRange=${range.index}&fId=${range.farm.fId}`}>
                         <Trans>Add Liquidity ↗</Trans>
                       </Link>
                     )}

diff --git a/src/pages/Farm/ElasticFarmv2/components/StakeWithNFTsModal.tsx b/src/pages/Farm/ElasticFarmv2/components/StakeWithNFTsModal.tsx
@@ -301,7 +301,9 @@ const StakeWithNFTsModal = ({
 
   const addliquidityElasticPool = `/${networkInfo.route}${APP_PATHS.ELASTIC_CREATE_POOL}/${
     farm.token0.isNative ? farm.token0.symbol : farm.token0.address
-  }/${farm.token1.isNative ? farm.token1.symbol : farm.token1.address}/${farm.pool.fee}?farmRange=${activeRange.index}`
+  }/${farm.token1.isNative ? farm.token1.symbol : farm.token1.address}/${farm.pool.fee}?farmRange=${
+    activeRange.index
+  }&fId=${farm.fId}`
 
   const upToMedium = useMedia(`(max-width: ${MEDIA_WIDTHS.upToMedium}px)`)
 

diff --git a/src/pages/Farm/ElasticFarmv2/index.tsx b/src/pages/Farm/ElasticFarmv2/index.tsx
@@ -15,7 +15,6 @@ import CurrencyLogo from 'components/CurrencyLogo'
 import Divider from 'components/Divider'
 import HoverDropdown from 'components/HoverDropdown'
 import InfoHelper from 'components/InfoHelper'
-import { RowFit } from 'components/Row'
 import { MouseoverTooltip, MouseoverTooltipDesktopOnly, TextDashed } from 'components/Tooltip'
 import { ConnectWalletButton } from 'components/YieldPools/ElasticFarmGroup/buttons'
 import { FarmList } from 'components/YieldPools/ElasticFarmGroup/styleds'
@@ -68,7 +67,7 @@ export default function ElasticFarmv2({
   const theme = useTheme()
   const { account } = useActiveWeb3React()
   const above1000 = useMedia('(min-width: 1000px)')
-  const upToExtraSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToExtraSmall}px)`)
+  const upToSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToSmall}px)`)
 
   const [searchParams, setSearchParams] = useSearchParams()
 
@@ -79,8 +78,20 @@ export default function ElasticFarmv2({
   const depositedUsd =
     userInfo?.reduce((acc, cur) => (cur.farmAddress === farmAddress ? acc + cur.positionUsdValue : acc), 0) || 0
 
+  const rewardUsd =
+    userInfo?.reduce((acc, cur) => (cur.farmAddress === farmAddress ? acc + cur.unclaimedRewardsUsd : acc), 0) || 0
+
+  const rewardTokenAmounts: { [address: string]: CurrencyAmount<Currency> } = {}
+  userInfo?.forEach(item => {
+    item.unclaimedRewards.forEach(rw => {
+      const address = rw.currency.isNative ? rw.currency.symbol || 'eth' : rw.currency.wrapped.address
+      if (!rewardTokenAmounts[address]) rewardTokenAmounts[address] = rw
+      else rewardTokenAmounts[address] = rewardTokenAmounts[address].add(rw)
+    })
+  })
+
   const depositedTokenAmounts: { [address: string]: CurrencyAmount<Currency> } = {}
-  userInfo?.map(item => {
+  userInfo?.forEach(item => {
     const address0 = item.position.amount0.currency.wrapped.address
     const address1 = item.position.amount1.currency.wrapped.address
     if (!depositedTokenAmounts[address0]) depositedTokenAmounts[address0] = item.position.amount0
@@ -110,53 +121,113 @@ export default function ElasticFarmv2({
   const toggleWalletModal = useWalletModalToggle()
   const renderApproveButton = () => {
     if (!account) {
-      return <ConnectWalletButton onClick={toggleWalletModal} />
+      return (
+        <div style={{ width: 'max-content' }}>
+          <ConnectWalletButton onClick={toggleWalletModal} />
+        </div>
+      )
     }
     if (res?.loading) return <Dots />
 
     if (isApprovedForAll) {
       return (
-        <Flex sx={{ gap: '8px' }} alignItems="center">
-          <MouseoverTooltip
-            text={t`Total value of liquidity positions (i.e. NFT tokens) you've deposited into the farming contract`}
+        <Flex
+          sx={{ gap: '8px' }}
+          alignItems="center"
+          flexDirection={upToSmall ? 'column' : 'row'}
+          width={upToSmall ? '100%' : undefined}
+        >
+          <Flex
+            sx={{ gap: '8px' }}
+            alignItems="center"
+            justifyContent={upToSmall ? 'space-between' : undefined}
+            width={upToSmall ? '100%' : undefined}
+          >
+            <MouseoverTooltip
+              text={t`Total value of liquidity positions (i.e. NFT tokens) you've deposited into the farming contract`}
+            >
+              <TextDashed fontSize="12px" fontWeight="500" color={theme.subText}>
+                <Trans>Deposited Liquidity</Trans>
+              </TextDashed>
+            </MouseoverTooltip>
+
+            <HoverDropdown
+              style={{ padding: '0', color: theme.text }}
+              content={
+                account ? (
+                  <Text as="span" fontSize="20px" fontWeight="500">
+                    {formatDollarAmount(depositedUsd)}
+                  </Text>
+                ) : (
+                  '--'
+                )
+              }
+              hideIcon={!account || !depositedUsd}
+              dropdownContent={
+                Object.values(depositedTokenAmounts).some(amount => amount.greaterThan(0)) ? (
+                  <AutoColumn>
+                    {Object.values(depositedTokenAmounts).map(
+                      amount =>
+                        amount.greaterThan(0) && (
+                          <Flex alignItems="center" key={amount.currency.wrapped.address}>
+                            <CurrencyLogo currency={amount.currency} size="16px" />
+                            <Text fontSize="12px" marginLeft="4px" fontWeight="500">
+                              {amount.toSignificant(8)} {amount.currency.symbol}
+                            </Text>
+                          </Flex>
+                        ),
+                    )}
+                  </AutoColumn>
+                ) : (
+                  ''
+                )
+              }
+            />
+          </Flex>
+
+          <Flex
+            alignItems="center"
+            justifyContent={upToSmall ? 'space-between' : undefined}
+            sx={{ gap: '8px' }}
+            width={upToSmall ? '100%' : undefined}
           >
-            <TextDashed fontSize="12px" fontWeight="500" color={theme.subText}>
-              <Trans>Deposited Liquidity</Trans>
-            </TextDashed>
-          </MouseoverTooltip>
-
-          <HoverDropdown
-            style={{ padding: '0', color: theme.text }}
-            content={
-              account ? (
-                <Text as="span" fontSize="20px" fontWeight="500">
-                  {formatDollarAmount(depositedUsd)}
-                </Text>
-              ) : (
-                '--'
-              )
-            }
-            hideIcon={!account || !depositedUsd}
-            dropdownContent={
-              Object.values(depositedTokenAmounts).some(amount => amount.greaterThan(0)) ? (
-                <AutoColumn>
-                  {Object.values(depositedTokenAmounts).map(
-                    amount =>
-                      amount.greaterThan(0) && (
-                        <Flex alignItems="center" key={amount.currency.wrapped.address}>
-                          <CurrencyLogo currency={amount.currency} size="16px" />
-                          <Text fontSize="12px" marginLeft="4px" fontWeight="500">
-                            {amount.toSignificant(8)} {amount.currency.symbol}
-                          </Text>
-                        </Flex>
-                      ),
-                  )}
-                </AutoColumn>
-              ) : (
-                ''
-              )
-            }
-          />
+            <Text fontSize={12} color={theme.subText} fontWeight="500">
+              <Trans>Rewards</Trans>
+            </Text>
+
+            <HoverDropdown
+              style={{ padding: '0', color: theme.text }}
+              content={
+                account ? (
+                  <Text as="span" fontSize="20px" fontWeight="500">
+                    {formatDollarAmount(rewardUsd)}
+                  </Text>
+                ) : (
+                  '--'
+                )
+              }
+              hideIcon={!account || !depositedUsd}
+              dropdownContent={
+                Object.values(rewardTokenAmounts).some(amount => amount.greaterThan(0)) ? (
+                  <AutoColumn>
+                    {Object.values(rewardTokenAmounts).map(
+                      amount =>
+                        amount.greaterThan(0) && (
+                          <Flex alignItems="center" key={amount.currency.wrapped.address}>
+                            <CurrencyLogo currency={amount.currency} size="16px" />
+                            <Text fontSize="12px" marginLeft="4px" fontWeight="500">
+                              {amount.toSignificant(8)} {amount.currency.symbol}
+                            </Text>
+                          </Flex>
+                        ),
+                    )}
+                  </AutoColumn>
+                ) : (
+                  ''
+                )
+              }
+            />
+          </Flex>
         </Flex>
       )
     }
@@ -350,7 +421,7 @@ export default function ElasticFarmv2({
       <Flex
         justifyContent="space-between"
         sx={{ gap: '1rem' }}
-        flexDirection={isApprovedForAll && upToExtraSmall ? 'column' : 'row'}
+        flexDirection={isApprovedForAll && upToSmall ? 'column' : 'row'}
       >
         <Flex fontSize="16px" alignItems="center" color={theme.text} sx={{ gap: '6px' }}>
           <Trans>Static Farms</Trans>
@@ -366,7 +437,7 @@ export default function ElasticFarmv2({
             <QuestionSquareIcon />
           </Text>
         </Flex>
-        <RowFit>{renderApproveButton()}</RowFit>
+        {renderApproveButton()}
       </Flex>
       <Divider />
       <FarmList

diff --git a/src/state/index.ts b/src/state/index.ts
@@ -134,7 +134,8 @@ const store = configureStore({
       .concat(routeApi.middleware)
       .concat(earningApi.middleware)
       .concat(socialApi.middleware)
-      .concat(tokenApi.middleware),
+      .concat(tokenApi.middleware)
+      .concat(blockServiceApi.middleware),
   preloadedState,
 })