feat(farm-v1): depositAndJoin (#2058)

* feat: support deposit and join

* chore: update farm apr tooltip

* feat: deposit and join

* update env to prod

* fix: disable deposited

* sort ranges

* revert env

src/components/HoverInlineText/index.tsx

@@ -45,7 +45,7 @@ const HoverInlineText = ({
 
   if (text.length > maxCharacters) {
     return (
-      <Tooltip text={text} show={showHover}>
+      <Tooltip text={text} show={showHover} width="fit-content">
         <TextWrapper
           onMouseEnter={() => setShowHover(true)}
           onMouseLeave={() => setShowHover(false)}

src/components/YieldPools/ElasticFarmGroup/PostionDetail.tsx

@@ -16,6 +16,7 @@ import { FarmingPool, NFTPosition } from 'state/farms/elastic/types'
 import { Bound } from 'state/mint/proamm/type'
 import { formatTickPrice } from 'utils/formatTickPrice'
 import { formatDollarAmount } from 'utils/numbers'
+import { unwrappedToken } from 'utils/wrappedCurrency'
 
 import FeeTarget from './FeeTarget'
 import { ButtonColorScheme, MinimalActionButton } from './buttons'
@@ -144,16 +145,16 @@ const PositionDetail = ({
           dropdownContent={
             <>
               <Flex alignItems="center" key={item.amount0.currency.address}>
-                <CurrencyLogo currency={item.amount0.currency} size="16px" />
+                <CurrencyLogo currency={unwrappedToken(item.amount0.currency)} size="16px" />
                 <Text fontSize="12px" marginLeft="4px" fontWeight="500">
-                  {item.amount0.toSignificant(8)} {item.amount0.currency.symbol}
+                  {item.amount0.toSignificant(8)} {unwrappedToken(item.amount0.currency).symbol}
                 </Text>
               </Flex>
 
               <Flex alignItems="center" key={item.amount1.currency.address}>
-                <CurrencyLogo currency={item.amount1.currency} size="16px" />
+                <CurrencyLogo currency={unwrappedToken(item.amount1.currency)} size="16px" />
                 <Text fontSize="12px" marginLeft="4px" fontWeight="500">
-                  {item.amount1.toSignificant(8)} {item.amount1.currency.symbol}
+                  {item.amount1.toSignificant(8)} {unwrappedToken(item.amount1.currency).symbol}
                 </Text>
               </Flex>
             </>
@@ -176,7 +177,7 @@ const PositionDetail = ({
             <Flex alignItems="center" key={rw.currency.wrapped.address}>
               <CurrencyLogo currency={rw.currency} size="16px" />
               <Text fontSize="12px" marginLeft="4px" fontWeight="500">
-                {rw.toSignificant(8)} {rw.currency.wrapped.symbol}
+                {rw.toSignificant(8)} {rw.currency.symbol}
               </Text>
             </Flex>
           ))}

src/components/YieldPools/ElasticFarmGroup/Row.tsx

@@ -23,9 +23,10 @@ import { NETWORKS_INFO, isEVM } from 'constants/networks'
 import { TOBE_EXTENDED_FARMING_POOLS } from 'constants/v2'
 import { useActiveWeb3React } from 'hooks'
 import { useProMMFarmContract } from 'hooks/useContract'
+import { useProAmmPositions } from 'hooks/useProAmmPositions'
 import useTheme from 'hooks/useTheme'
 import { useShareFarmAddress } from 'state/farms/classic/hooks'
-import { useElasticFarms } from 'state/farms/elastic/hooks'
+import { useElasticFarms, usePositionFilter } from 'state/farms/elastic/hooks'
 import { FarmingPool, NFTPosition } from 'state/farms/elastic/types'
 import { useViewMode } from 'state/user/hooks'
 import { VIEW_MODE } from 'state/user/reducer'
@@ -65,7 +66,7 @@ const Row = ({
   onHarvest: () => void
   tokenPrices: { [key: string]: number }
 }) => {
-  const { chainId, networkInfo } = useActiveWeb3React()
+  const { chainId, networkInfo, account } = useActiveWeb3React()
   const theme = useTheme()
   const currentTimestamp = Math.floor(Date.now() / 1000)
   const [viewMode] = useViewMode()
@@ -74,17 +75,19 @@ const Row = ({
   const [isRevertPrice, setIsRevertPrice] = useState(false)
   const { userFarmInfo } = useElasticFarms()
   const joinedPositions = userFarmInfo?.[fairlaunchAddress]?.joinedPositions[farmingPool.pid] || []
+
   const depositedPositions =
     userFarmInfo?.[fairlaunchAddress]?.depositedPositions.filter(pos => {
       return (
+        pos.liquidity.toString() !== '0' &&
         farmingPool.poolAddress.toLowerCase() ===
-        computePoolAddress({
-          factoryAddress: NETWORKS_INFO[isEVM(chainId) ? chainId : ChainId.MAINNET].elastic.coreFactory,
-          tokenA: pos.pool.token0,
-          tokenB: pos.pool.token1,
-          fee: pos.pool.fee,
-          initCodeHashManualOverride: NETWORKS_INFO[isEVM(chainId) ? chainId : ChainId.MAINNET].elastic.initCodeHash,
-        }).toLowerCase()
+          computePoolAddress({
+            factoryAddress: NETWORKS_INFO[isEVM(chainId) ? chainId : ChainId.MAINNET].elastic.coreFactory,
+            tokenA: pos.pool.token0,
+            tokenB: pos.pool.token1,
+            fee: pos.pool.fee,
+            initCodeHashManualOverride: NETWORKS_INFO[isEVM(chainId) ? chainId : ChainId.MAINNET].elastic.initCodeHash,
+          }).toLowerCase()
       )
     }) || []
 
@@ -142,15 +145,17 @@ const Row = ({
     getFeeTargetInfo()
   }, [contract, farmingPool.feeTarget, fairlaunchAddress, farmingPool.pid, userFarmInfo])
 
-  const canStake =
-    farmingPool.endTime > currentTimestamp &&
-    depositedPositions.some(pos => {
-      const stakedPos = joinedPositions.find(j => j.nftId.toString() === pos.nftId.toString())
-      return !stakedPos
-        ? true
-        : BigNumber.from(pos.liquidity.toString()).gt(BigNumber.from(stakedPos.liquidity.toString()))
-    })
+  const { positions } = useProAmmPositions(account)
+
+  const { eligiblePositions } = usePositionFilter(positions || [], [farmingPool.poolAddress.toLowerCase()])
 
+  const canUpdateLiquidity = depositedPositions.some(pos => {
+    const stakedPos = joinedPositions.find(j => j.nftId.toString() === pos.nftId.toString())
+    return !stakedPos
+      ? true
+      : BigNumber.from(pos.liquidity.toString()).gt(BigNumber.from(stakedPos.liquidity.toString()))
+  })
+  const canStake = farmingPool.endTime > currentTimestamp && (eligiblePositions.length > 0 || canUpdateLiquidity)
   const canHarvest = rewardPendings.some(amount => amount.greaterThan(0))
 
   const canUnstake = !!joinedPositions.length

src/components/YieldPools/ElasticFarmGroup/buttons.tsx

@@ -114,16 +114,14 @@ export const WithdrawButton: React.FC<React.ComponentPropsWithoutRef<'button'>>
   style,
   ...others
 }) => {
-  const upToExtraSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToExtraSmall}px)`)
-
   const renderButton = () => {
     return (
       <ButtonOutlined
         colorScheme={ButtonColorScheme.Red}
         onClick={onClick}
         disabled={disabled}
         style={{
-          width: upToExtraSmall ? '100%' : 'max-content',
+          width: 'max-content',
           height: '38px',
           padding: '12px',
           ...style,
@@ -158,16 +156,14 @@ export const HarvestAllButton: React.FC<React.ComponentPropsWithoutRef<'button'>
   style,
   ...others
 }) => {
-  const upToExtraSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToExtraSmall}px)`)
-
   return (
     <ButtonPrimary
       onClick={onClick}
       disabled={disabled}
       style={{
         boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.16)',
         whiteSpace: 'nowrap',
-        width: upToExtraSmall ? '100%' : 'max-content',
+        width: 'max-content',
         height: '38px',
         ...style,
       }}