diff --git a/src/pages/AddLiquidityV2/index.tsx b/src/pages/AddLiquidityV2/index.tsx index f6c63843f8..a2baac7ae7 100644 --- 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(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 = ( @@ -1001,34 +1004,35 @@ export default function AddLiquidity() { )} - {showFarmRangeSelect && !!farmV2 && ( + {showFarmRangeSelect && !!activeRanges.length && farmV2S?.[0] && ( - {farmV2.ranges.map(range => { + {activeRanges.map(range => { if (range.isRemoved) return null return ( { 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} > {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, )} {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, )} @@ -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 diff --git a/src/pages/Farm/ElasticFarmv2/components/FarmCard.tsx b/src/pages/Farm/ElasticFarmv2/components/FarmCard.tsx index 3ad2d138bc..a1defa6ae8 100644 --- a/src/pages/Farm/ElasticFarmv2/components/FarmCard.tsx +++ b/src/pages/Farm/ElasticFarmv2/components/FarmCard.tsx @@ -369,7 +369,7 @@ function FarmCard({ {range?.isRemoved ? ( Idle Range ) : ( - + Add Liquidity ↗ )} diff --git a/src/pages/Farm/ElasticFarmv2/components/NewRangesNotiModal.tsx b/src/pages/Farm/ElasticFarmv2/components/NewRangesNotiModal.tsx index d73e137ebb..d1e932ec84 100644 --- 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 ? ( Idle Range ) : ( - + Add Liquidity ↗ )} diff --git a/src/pages/Farm/ElasticFarmv2/components/StakeWithNFTsModal.tsx b/src/pages/Farm/ElasticFarmv2/components/StakeWithNFTsModal.tsx index 645fa4742c..c6a0e0be58 100644 --- 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 index 0187c353d3..05b488c73f 100644 --- 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 } = {} + 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 } = {} - 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 + return ( +
+ +
+ ) } if (res?.loading) return if (isApprovedForAll) { return ( - - + + + + Deposited Liquidity + + + + + {formatDollarAmount(depositedUsd)} + + ) : ( + '--' + ) + } + hideIcon={!account || !depositedUsd} + dropdownContent={ + Object.values(depositedTokenAmounts).some(amount => amount.greaterThan(0)) ? ( + + {Object.values(depositedTokenAmounts).map( + amount => + amount.greaterThan(0) && ( + + + + {amount.toSignificant(8)} {amount.currency.symbol} + + + ), + )} + + ) : ( + '' + ) + } + /> + + + - - Deposited Liquidity - - - - - {formatDollarAmount(depositedUsd)} - - ) : ( - '--' - ) - } - hideIcon={!account || !depositedUsd} - dropdownContent={ - Object.values(depositedTokenAmounts).some(amount => amount.greaterThan(0)) ? ( - - {Object.values(depositedTokenAmounts).map( - amount => - amount.greaterThan(0) && ( - - - - {amount.toSignificant(8)} {amount.currency.symbol} - - - ), - )} - - ) : ( - '' - ) - } - /> + + Rewards + + + + {formatDollarAmount(rewardUsd)} + + ) : ( + '--' + ) + } + hideIcon={!account || !depositedUsd} + dropdownContent={ + Object.values(rewardTokenAmounts).some(amount => amount.greaterThan(0)) ? ( + + {Object.values(rewardTokenAmounts).map( + amount => + amount.greaterThan(0) && ( + + + + {amount.toSignificant(8)} {amount.currency.symbol} + + + ), + )} + + ) : ( + '' + ) + } + /> +
) } @@ -350,7 +421,7 @@ export default function ElasticFarmv2({ Static Farms @@ -366,7 +437,7 @@ export default function ElasticFarmv2({ - {renderApproveButton()} + {renderApproveButton()}