From d76e6646fc4427eeccc1d3c9d6f8d92ebd45df34 Mon Sep 17 00:00:00 2001 From: Vinay Singh Date: Sat, 23 Dec 2023 18:01:37 +0530 Subject: [PATCH] remove liquidity page fixes --- src/hooks/useV3Positions.ts | 18 +++++++++++++++--- src/pages/Pool/PositionPage.tsx | 4 ++-- src/pages/RemoveLiquidity/V3.tsx | 16 ++++++++-------- src/state/burn/v3/hooks.tsx | 21 +++++++++++++++------ 4 files changed, 40 insertions(+), 19 deletions(-) diff --git a/src/hooks/useV3Positions.ts b/src/hooks/useV3Positions.ts index eb7eccb6..633ea98c 100644 --- a/src/hooks/useV3Positions.ts +++ b/src/hooks/useV3Positions.ts @@ -40,6 +40,11 @@ interface UseV3PositionsResults { positions?: PositionDetails[] } +interface UseV3PositionsResult { + loading: boolean + position?: PositionDetails[] +} + const flattenedPositionsV3 = (positionsV3: FlattenedPositions): FlattenedPositions => { let flattened: any = {} @@ -70,8 +75,8 @@ const fetchV3Positions = (tokenIds: number[]): UseV3Positions[] => { }) } -export function useV3PositionsFromTokenId(tokenIds: number[]) { - const results = fetchV3Positions(tokenIds) +export function useV3PositionsFromTokenId(tokenIds: number[] | undefined) { + const results = fetchV3Positions(tokenIds ? tokenIds : []) const loading = useMemo(() => results.some(({ loading }) => loading), [results]) const error = useMemo(() => results.some(({ error }) => error), [results]) @@ -100,7 +105,6 @@ export function useV3PositionsFromTokenId(tokenIds: number[]) { } return undefined }, [loading, error, results, tokenIds]) - console.log('🚀 ~ file: useV3Positions.ts:100 ~ positions ~ positions:', positions) return { loading, @@ -152,6 +156,14 @@ interface UseV3PositionResults { position?: PositionDetails } +export function useV3PosFromTokenId(tokenId: number | undefined) { + const position = useV3PositionsFromTokenId(tokenId ? [tokenId] : undefined) + return { + loading: position.loading, + position: position.positions?.[0], + } +} + export function useV3PositionFromTokenId(tokenId: BigNumber | undefined): UseV3PositionResults { const position = useV3PositionsFromTokenIds(tokenId ? [tokenId] : undefined) return { diff --git a/src/pages/Pool/PositionPage.tsx b/src/pages/Pool/PositionPage.tsx index 8e4abdda..29b740c1 100644 --- a/src/pages/Pool/PositionPage.tsx +++ b/src/pages/Pool/PositionPage.tsx @@ -610,11 +610,11 @@ function PositionPageContent() { }) const ownsNFT = useMemo(() => { - if (!isLoading && !error && ownerOf) { + if (!isLoading && !error && ownerOf && address) { return validateAndParseAddress(ownerOf) === validateAndParseAddress(address) } return false - }, [ownerOf]) + }, [ownerOf, address]) const feeValueUpper = inverted ? feeValue0 : feeValue1 const feeValueLower = inverted ? feeValue1 : feeValue0 diff --git a/src/pages/RemoveLiquidity/V3.tsx b/src/pages/RemoveLiquidity/V3.tsx index 31809d4b..8813f879 100644 --- a/src/pages/RemoveLiquidity/V3.tsx +++ b/src/pages/RemoveLiquidity/V3.tsx @@ -28,7 +28,7 @@ import { isSupportedChain } from 'constants/chains' import { useV3NFTPositionManagerContract } from 'hooks/useContract' import useDebouncedChangeHandler from 'hooks/useDebouncedChangeHandler' import useTransactionDeadline from 'hooks/useTransactionDeadline' -import { useV3PositionFromTokenId } from 'hooks/useV3Positions' +import { useV3PosFromTokenId, useV3PositionFromTokenId, useV3PositionsFromTokenId } from 'hooks/useV3Positions' import useNativeCurrency from 'lib/hooks/useNativeCurrency' import { PositionPageUnsupportedContent } from 'pages/Pool/PositionPage' import { useBurnV3ActionHandlers, useBurnV3State, useDerivedV3BurnInfo } from 'state/burn/v3/hooks' @@ -54,23 +54,24 @@ export default function RemoveLiquidityV3() { const location = useLocation() const parsedTokenId = useMemo(() => { try { - return BigNumber.from(tokenId) + return Number(tokenId) } catch { return null } }, [tokenId]) - const { position, loading } = useV3PositionFromTokenId(parsedTokenId ?? undefined) - if (parsedTokenId === null || parsedTokenId.eq(0)) { + const { positions, loading } = useV3PositionsFromTokenId([Number(tokenId ? tokenId : undefined)]) + const existingPositionDetails = positions && positions?.[0] + if (parsedTokenId === null || parsedTokenId === 0) { return } - if (isSupportedChain(chainId) && (loading || position)) { + if (isSupportedChain(chainId) && (loading || existingPositionDetails)) { return } return } -function Remove({ tokenId }: { tokenId: BigNumber }) { - const { position } = useV3PositionFromTokenId(tokenId) +function Remove({ tokenId }: { tokenId: number }) { + const { position } = useV3PosFromTokenId(tokenId) const theme = useTheme() const { address: account, chainId } = useAccountDetails() const { provider } = useProvider() @@ -94,7 +95,6 @@ function Remove({ tokenId }: { tokenId: BigNumber }) { error, } = useDerivedV3BurnInfo(position, receiveWETH) const { onPercentSelect } = useBurnV3ActionHandlers() - const removed = position?.liquidity?.eq(0) // boilerplate for the slider diff --git a/src/state/burn/v3/hooks.tsx b/src/state/burn/v3/hooks.tsx index 77080ce6..5d0ece68 100644 --- a/src/state/burn/v3/hooks.tsx +++ b/src/state/burn/v3/hooks.tsx @@ -12,13 +12,15 @@ import { unwrappedToken } from 'utils/unwrappedToken' import { AppState } from '../../reducer' import { selectPercent } from './actions' +import { FlattenedPositions } from 'hooks/useV3Positions' +import { BigNumber } from 'ethers' export function useBurnV3State(): AppState['burnV3'] { return useAppSelector((state) => state.burnV3) } export function useDerivedV3BurnInfo( - position?: PositionDetails, + position?: FlattenedPositions, asWETH = false ): { position?: Position @@ -40,12 +42,15 @@ export function useDerivedV3BurnInfo( const positionSDK = useMemo( () => - pool && position?.liquidity && typeof position?.tickLower === 'number' && typeof position?.tickUpper === 'number' + pool && + position?.liquidity && + typeof position?.tick_lower === 'number' && + typeof position?.tick_upper === 'number' ? new Position({ pool, liquidity: position.liquidity.toString(), - tickLower: position.tickLower, - tickUpper: position.tickUpper, + tickLower: position.tick_lower, + tickUpper: position.tick_upper, }) : undefined, [pool, position] @@ -69,10 +74,14 @@ export function useDerivedV3BurnInfo( ? CurrencyAmount.fromRawAmount(asWETH ? token1 : unwrappedToken(token1), discountedAmount1) : undefined - const [feeValue0, feeValue1] = useV3PositionFees(pool ?? undefined, position?.tokenId, asWETH) + const [feeValue0, feeValue1] = useV3PositionFees( + pool ?? undefined, + position?.tokenId ? BigNumber.from(position?.tokenId) : undefined, + asWETH + ) const outOfRange = - pool && position ? pool.tickCurrent < position.tickLower || pool.tickCurrent > position.tickUpper : false + pool && position ? pool.tickCurrent < position.tick_lower || pool.tickCurrent > position.tick_upper : false let error: ReactNode | undefined if (!account) {