chore: navigate to smart exit list

Author: viet-nv

apps/kyberswap-interface/src/assets/svg/ic_exit.svg

@@ -7,6 +7,7 @@ import { ReactComponent as OverviewIcon } from 'assets/svg/earn/ic_earn_overview
 import { ReactComponent as PoolsIcon } from 'assets/svg/earn/ic_earn_pools.svg'
 import { ReactComponent as PositionsIcon } from 'assets/svg/earn/ic_earn_positions.svg'
 import { ReactComponent as FarmingIcon } from 'assets/svg/earn/ic_farming.svg'
+import { ReactComponent as ListIcon } from 'assets/svg/ic_exit.svg'
 import { ReactComponent as KemIcon } from 'assets/svg/kyber/kem.svg'
 import NavGroup from 'components/Header/groups/NavGroup'
 import { DropdownTextAnchor, StyledNavLink } from 'components/Header/styleds'
@@ -25,6 +26,7 @@ const EarnNavGroup = () => {
     APP_PATHS.EARN_POOLS,
     APP_PATHS.EARN_POSITIONS,
     APP_PATHS.EARN_POSITION_DETAIL,
+    APP_PATHS.EARN_SMART_EXIT,
   ].some(path => pathname.includes(path))
 
   return (
@@ -102,6 +104,12 @@ const EarnNavGroup = () => {
               {t`My Positions`}
             </Flex>
           </StyledNavLink>
+          <StyledNavLink data-testid="earn-positions-nav-link" to={{ pathname: `${APP_PATHS.EARN_SMART_EXIT}` }}>
+            <Flex sx={{ gap: '12px' }} alignItems="center">
+              <ListIcon width={16} height={16} />
+              {t`Smart Exit Orders`}
+            </Flex>
+          </StyledNavLink>
         </Flex>
       }
     />

apps/kyberswap-interface/src/components/Header/groups/EarnNavGroup.tsx

@@ -24,6 +24,7 @@ export interface PermitNftParams {
   tokenId: string
   spender: string
   deadline?: number
+  version?: 'v3' | 'v4' | 'auto' // specify version or auto-detect
 }
 
 export interface PermitNftResult {
@@ -36,26 +37,49 @@ export interface PermitNftResult {
 // NFT Position Manager ABI for permit functionality
 const NFT_PERMIT_ABI = [
   'function name() view returns (string)',
-  'function nonces(address owner, uint256 word) view returns (uint256 bitmap)',
+  'function nonces(address owner, uint256 word) view returns (uint256 bitmap)', // V4 unordered nonces
+  'function positions(uint256 tokenId) view returns (uint96 nonce, address operator, address token0, address token1, uint24 fee, int24 tickLower, int24 tickUpper, uint128 liquidity, uint256 feeGrowthInside0LastX128, uint256 feeGrowthInside1LastX128, uint128 tokensOwed0, uint128 tokensOwed1)', // V3 ordered nonces
   'function permit(address spender, uint256 tokenId, uint256 deadline, uint256 nonce, bytes signature) payable',
 ]
 
 // 30 days validity buffer
 const PERMIT_NFT_VALIDITY_BUFFER = 30 * 24 * 60 * 60
 
-export const usePermitNft = ({ contractAddress, tokenId, spender, deadline }: PermitNftParams) => {
+export const usePermitNft = ({ contractAddress, tokenId, spender, deadline, version = 'auto' }: PermitNftParams) => {
   const { account, chainId } = useActiveWeb3React()
   const { library } = useWeb3React()
   const notify = useNotify()
   const [isSigningInProgress, setIsSigningInProgress] = useState(false)
   const [permitData, setPermitData] = useState<PermitNftResult | null>(null)
+  const [detectedVersion, setDetectedVersion] = useState<'v3' | 'v4' | null>(null)
 
   const nftContract = useReadingContract(contractAddress, NFT_PERMIT_ABI)
 
-  // Get nonces bitmap for word 0
+  // Get nonces bitmap for word 0 (V4 style)
   const noncesState = useSingleCallResult(nftContract, 'nonces', [account, 0])
+  // Get position data (V3 style) - only call if we have a tokenId
+  const positionsState = useSingleCallResult(nftContract, 'positions', tokenId ? [tokenId] : undefined)
   const nameState = useSingleCallResult(nftContract, 'name', [])
 
+  // Auto-detect version based on available data
+  const actualVersion = useMemo(() => {
+    if (version !== 'auto') return version
+
+    if (detectedVersion) return detectedVersion
+
+    // Try to detect based on available data
+    if (positionsState?.result && !positionsState.error) {
+      setDetectedVersion('v3')
+      return 'v3'
+    }
+    if (noncesState?.result && !noncesState.error) {
+      setDetectedVersion('v4')
+      return 'v4'
+    }
+
+    return 'v4' // Default to v4 if uncertain
+  }, [version, detectedVersion, positionsState, noncesState])
+
   const permitState = useMemo(() => {
     if (!account || !contractAddress || !tokenId || !spender) {
       return PermitNftState.NOT_APPLICABLE
@@ -79,12 +103,38 @@ export const usePermitNft = ({ contractAddress, tokenId, spender, deadline }: Pe
     throw new Error('No free nonce in word 0; pick a different word.')
   }, [])
 
+  // Get nonce based on version
+  const getNonce = useCallback((): BigNumber | null => {
+    if (actualVersion === 'v3') {
+      // Use ordered nonce from positions function
+      if (positionsState?.result?.[0] !== undefined) {
+        return BigNumber.from(positionsState.result[0]).add(1) // Next nonce is current + 1
+      }
+    } else {
+      // Use unordered nonce from bitmap (V4)
+      if (noncesState?.result?.[0]) {
+        return findFreeNonce(noncesState.result[0], 0)
+      }
+    }
+    return null
+  }, [actualVersion, positionsState?.result, noncesState?.result, findFreeNonce])
+
   const signPermitNft = useCallback(async (): Promise<PermitNftResult | null> => {
-    if (!library || !account || !chainId || !noncesState?.result?.[0] || !nameState?.result?.[0]) {
+    if (!library || !account || !chainId || !nameState?.result?.[0]) {
       console.error('Missing required data for NFT permit')
       return null
     }
 
+    // Check version-specific requirements
+    if (actualVersion === 'v3' && !positionsState?.result) {
+      console.error('Missing positions data for V3 NFT permit')
+      return null
+    }
+    if (actualVersion === 'v4' && !noncesState?.result?.[0]) {
+      console.error('Missing nonces data for V4 NFT permit')
+      return null
+    }
+
     if (permitState !== PermitNftState.READY_TO_SIGN) {
       console.error('NFT permit not ready to sign')
       return null
@@ -94,8 +144,12 @@ export const usePermitNft = ({ contractAddress, tokenId, spender, deadline }: Pe
 
     try {
       const contractName = nameState.result[0]
-      const bitmap = noncesState.result[0]
-      const nonce = findFreeNonce(bitmap, 0)
+      const nonce = getNonce()
+
+      if (!nonce) {
+        throw new Error(`Failed to get nonce for ${actualVersion}`)
+      }
+
       const permitDeadline = deadline || Math.floor(Date.now() / 1000) + PERMIT_NFT_VALIDITY_BUFFER
 
       // EIP-712 domain and types for NFT permit
@@ -135,17 +189,18 @@ export const usePermitNft = ({ contractAddress, tokenId, spender, deadline }: Pe
         message,
       })
 
-      console.log('Signing NFT permit with data:', typedData)
+      console.log(`Signing ${actualVersion} NFT permit with data:`, typedData)
 
       const signature = await library.send('eth_signTypedData_v4', [account.toLowerCase(), typedData])
 
       // Encode permit data for contract call
       const permitData = defaultAbiCoder.encode(['uint256', 'uint256', 'bytes'], [permitDeadline, nonce, signature])
 
+      const v = actualVersion.toUpperCase()
       notify({
         type: NotificationType.SUCCESS,
         title: t`NFT Permit Signed`,
-        summary: t`Successfully signed permit for NFT #${tokenId}`,
+        summary: t`Successfully signed ${v} permit for NFT #${tokenId}`,
       })
 
       const result = {
@@ -180,16 +235,32 @@ export const usePermitNft = ({ contractAddress, tokenId, spender, deadline }: Pe
     spender,
     deadline,
     permitState,
+    actualVersion,
     noncesState?.result,
+    positionsState?.result,
     nameState?.result,
-    findFreeNonce,
+    getNonce,
     notify,
   ])
 
+  // Check readiness based on version
+  const isReady = useMemo(() => {
+    if (permitState !== PermitNftState.READY_TO_SIGN || !nameState?.result) {
+      return false
+    }
+
+    if (actualVersion === 'v3') {
+      return !!positionsState?.result
+    } else {
+      return !!noncesState?.result
+    }
+  }, [permitState, nameState?.result, actualVersion, positionsState?.result, noncesState?.result])
+
   return {
     permitState,
     signPermitNft,
     permitData,
-    isReady: permitState === PermitNftState.READY_TO_SIGN && !!noncesState?.result && !!nameState?.result,
+    isReady,
+    version: actualVersion,
   }
 }

apps/kyberswap-interface/src/hooks/usePermitNft.ts

@@ -1,11 +1,12 @@
 import { Trans } from '@lingui/macro'
-import { useEffect, useState } from 'react'
+import { Trash2 } from 'react-feather'
 import { useNavigate } from 'react-router'
 import { Flex, Text } from 'rebass'
 import { useGetSmartExitOrdersQuery } from 'services/smartExit'
 import { useUserPositionsQuery } from 'services/zapEarn'
 import styled from 'styled-components'
 
+import LocalLoader from 'components/LocalLoader'
 import TokenLogo from 'components/TokenLogo'
 import { useActiveWeb3React } from 'hooks'
 import useTheme from 'hooks/useTheme'
@@ -18,6 +19,17 @@ import useFilter from '../UserPositions/useFilter'
 import { earnSupportedChains, earnSupportedExchanges } from '../constants'
 import useSupportedDexesAndChains from '../hooks/useSupportedDexesAndChains'
 
+const Trash = styled.div`
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  color: ${({ theme }) => theme.subText};
+
+  :hover {
+    color: ${({ theme }) => theme.red};
+  }
+`
+
 const TableHeader = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr 0.5fr 40px;
@@ -35,44 +47,37 @@ const TableRow = styled(TableHeader)`
 const SmartExit = () => {
   const theme = useTheme()
   const navigate = useNavigate()
-  const { account, chainId } = useActiveWeb3React()
+  const { account } = useActiveWeb3React()
 
-  const [loading, setLoading] = useState(false)
   const { filters, updateFilters } = useFilter()
   const { supportedDexes, supportedChains } = useSupportedDexesAndChains(filters)
 
   // Fetch smart exit orders
   const {
     data: orders = [],
-    isLoading: ordersLoading,
+    isLoading: smartExitLoading,
     error: ordersError,
   } = useGetSmartExitOrdersQuery(
     {
-      chainId: chainId,
+      // chainId: chainId,
       userWallet: account || '',
     },
     {
-      skip: !account || !chainId,
+      skip: !account,
       pollingInterval: 30000, // Poll every 30 seconds
     },
   )
 
-  useEffect(() => {
-    if (ordersLoading) {
-      setLoading(true)
-    } else {
-      setLoading(false)
-    }
-  }, [ordersLoading])
-
-  const { data: userPosition } = useUserPositionsQuery(
+  const { data: userPosition, isLoading: userPosLoading } = useUserPositionsQuery(
     { chainIds: earnSupportedChains.join(','), addresses: account || '', protocols: earnSupportedExchanges.join(',') },
     {
       skip: !account,
       pollingInterval: 15_000,
     },
   )
 
+  const loading = smartExitLoading || userPosLoading
+
   return (
     <PoolPageWrapper>
       <Flex alignItems="center" sx={{ gap: 3 }}>
@@ -88,7 +93,6 @@ const SmartExit = () => {
         filters={filters}
         updateFilters={(...args) => {
           updateFilters(...args)
-          setLoading(true)
         }}
       />
 
@@ -108,9 +112,7 @@ const SmartExit = () => {
 
         {loading ? (
           <Flex justifyContent="center" padding="20px">
-            <Text color="subText">
-              <Trans>Loading orders...</Trans>
-            </Text>
+            <LocalLoader />
           </Flex>
         ) : ordersError ? (
           <Flex justifyContent="center" padding="20px">
@@ -126,14 +128,27 @@ const SmartExit = () => {
           </Flex>
         ) : (
           orders.map(order => {
-            const posDetail = userPosition?.find(
-              us => us.tokenId === order.positionId && +us.chainId === +order.chainId,
-            )
+            const posDetail = userPosition?.find(us => order.positionId === us.id)
             if (!posDetail) return null
             const token0 = posDetail.currentAmounts[0].token
             const token1 = posDetail.currentAmounts[1].token
+            const tokenId = order.positionId.split('-')[1]
 
             const { conditions, op } = order.condition.logical
+
+            const protocol = (() => {
+              switch (posDetail.pool.project) {
+                case 'Uniswap V3':
+                  return
+                case 'Uniswap V4':
+                  return 'V4'
+                case 'Uniswap V4 FairFlow':
+                  return 'FairFlow'
+                default:
+                  return posDetail.pool.project
+              }
+            })()
+
             return (
               <TableRow key={order.id}>
                 <div>
@@ -151,7 +166,7 @@ const SmartExit = () => {
                   <Flex alignItems="center" sx={{ gap: '4px' }} mt="4px" ml="1rem">
                     <TokenLogo src={posDetail.pool.projectLogo} size={16} />
                     <Text color={theme.subText}>
-                      {posDetail.pool.project} #{order.positionId}
+                      {protocol} #{tokenId}
                     </Text>
                   </Flex>
                 </div>
@@ -221,7 +236,9 @@ const SmartExit = () => {
                       : order.status.charAt(0).toUpperCase() + order.status.slice(1)}
                   </Badge>
                 </Flex>
-                <div></div>
+                <Trash>
+                  <Trash2 size={18} />
+                </Trash>
               </TableRow>
             )
           })