remove liquidity page fixes

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 {

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

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 <Navigate to={{ ...location, pathname: '/pools' }} replace />
   }
-  if (isSupportedChain(chainId) && (loading || position)) {
+  if (isSupportedChain(chainId) && (loading || existingPositionDetails)) {
     return <Remove tokenId={parsedTokenId} />
   }
   return <PositionPageUnsupportedContent />
 }
-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

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) {