refactor: simplify useAutoDetectErc4626

Author: OnlyJousting

apps/main/src/dex/components/PageCreatePool/TokensInPool/SelectToken.tsx

@@ -1,5 +1,6 @@
 import { Key } from 'react'
 import { styled } from 'styled-components'
+import { type Address } from 'viem'
 import {
   STABLESWAP,
   CRYPTOSWAP,
@@ -13,6 +14,7 @@ import {
   TOKEN_H,
   NG_ASSET_TYPE,
 } from '@/dex/components/PageCreatePool/constants'
+import { useAutoDetectErc4626 } from '@/dex/components/PageCreatePool/hooks/useAutoDetectErc4626'
 import {
   CreateToken,
   TokenState,
@@ -61,6 +63,10 @@ const SelectToken = ({
   const clearToken = useStore((state) => state.createPool.clearToken)
   const tokensInPool = useStore((state) => state.createPool.tokensInPool)
   const { data: network } = useNetworkByChain({ chainId })
+  void useAutoDetectErc4626({
+    tokenId,
+    address: token.address as Address,
+  })
 
   const getTokenName = (tokenId: TokenId) => {
     if (tokenId === TOKEN_D) return t`Token D`

apps/main/src/dex/components/PageCreatePool/TokensInPool/index.tsx

@@ -1,7 +1,6 @@
 import lodash from 'lodash'
 import { useMemo, useCallback } from 'react'
 import { styled } from 'styled-components'
-import type { Address } from 'viem'
 import SwitchTokensButton from '@/dex/components/PageCreatePool/components/SwitchTokensButton'
 import WarningBox from '@/dex/components/PageCreatePool/components/WarningBox'
 import {
@@ -18,7 +17,6 @@ import {
   FXSWAP,
   NG_ASSET_TYPE,
 } from '@/dex/components/PageCreatePool/constants'
-import { useAutoDetectErc4626 } from '@/dex/components/PageCreatePool/hooks/useAutoDetectErc4626'
 import SelectToken from '@/dex/components/PageCreatePool/TokensInPool/SelectToken'
 import SetOracle from '@/dex/components/PageCreatePool/TokensInPool/SetOracle'
 import { CreateToken, TokenId, TokensInPoolState } from '@/dex/components/PageCreatePool/types'
@@ -55,7 +53,6 @@ const TokensInPool = ({ curve, chainId, haveSigner }: Props) => {
   const userBalances = useStore((state) => state.userBalances.userBalancesMapper)
   const { tokensMapper } = useTokensMapper(chainId)
   const nativeToken = curve.getNetworkConstants().NATIVE_TOKEN
-  const { scheduleCheck: scheduleErc4626Check } = useAutoDetectErc4626({ tokensInPool })
   const {
     data: { createDisabledTokens, stableswapFactory, tricryptoFactory, twocryptoFactory },
   } = useNetworkByChain({ chainId })
@@ -523,12 +520,8 @@ const TokensInPool = ({ curve, chainId, haveSigner }: Props) => {
         updatedFormValues[TOKEN_G],
         updatedFormValues[TOKEN_H],
       )
-
-      if (updatedFormValues[name].address.toLowerCase() === normalizedValue) {
-        scheduleErc4626Check(name, value as Address)
-      }
     },
-    [tokensInPool, updateTokensInPool, curve, findSymbol, swapType, basePools, updateNgAssetType, scheduleErc4626Check],
+    [tokensInPool, updateTokensInPool, curve, findSymbol, swapType, basePools, updateNgAssetType],
   )
 
   const addToken = useCallback(() => {

apps/main/src/dex/components/PageCreatePool/hooks/useAutoDetectErc4626.ts

@@ -1,92 +1,29 @@
-import { useCallback, useState } from 'react'
-import { isAddress, isAddressEqual, type Address } from 'viem'
+import { useMemo } from 'react'
+import { type Address } from 'viem'
 import { NG_ASSET_TYPE } from '@/dex/components/PageCreatePool/constants'
 import { useIsErc4626 } from '@/dex/components/PageCreatePool/hooks/useIsErc4626'
-import { TokenId, TokenState, TokensInPoolState } from '@/dex/components/PageCreatePool/types'
-import { DEFAULT_ERC4626_STATUS } from '@/dex/store/createCreatePoolSlice'
+import { TokenId } from '@/dex/components/PageCreatePool/types'
 import useStore from '@/dex/store/useStore'
 
-type Candidate = {
+type UseAutoDetectErc4626Params = {
   tokenId: TokenId
   address: Address
 }
 
-type UseAutoDetectErc4626Params = {
-  tokensInPool: TokensInPoolState
-}
-
 /**
  * This hook is used to automatically detect if a token is an ERC4626 token and set the asset type to ERC4626
- * @param tokensInPool - The tokens in the pool
- * @returns A function to schedule a check for an ERC4626 token
  */
-export const useAutoDetectErc4626 = ({ tokensInPool }: UseAutoDetectErc4626Params) => {
+export const useAutoDetectErc4626 = ({ tokenId, address }: UseAutoDetectErc4626Params) => {
   const updateNgAssetType = useStore((state) => state.createPool.updateNgAssetType)
   const updateTokenErc4626Status = useStore((state) => state.createPool.updateTokenErc4626Status)
-  const [candidate, setCandidate] = useState<Candidate | null>(null)
-  const { isErc4626, isLoading, error, isSuccess } = useIsErc4626({ address: candidate?.address })
-
-  const setStatus = useCallback(
-    (tokenId: TokenId, status: TokenState['erc4626']) => {
-      updateTokenErc4626Status(tokenId, status)
-    },
-    [updateTokenErc4626Status],
-  )
-
-  const scheduleCheck = useCallback(
-    (tokenId: TokenId, address: Address) => {
-      setCandidate({ tokenId, address })
-      setStatus(tokenId, {
-        ...DEFAULT_ERC4626_STATUS,
-        isLoading: true,
-      })
-    },
-    [setStatus],
-  )
-
-  if (candidate) {
-    const currentToken = tokensInPool[candidate.tokenId]
-    if (!currentToken) {
-      setCandidate(null)
-    } else {
-      const nextStatus: TokenState['erc4626'] = {
-        isErc4626: Boolean(isErc4626 && isSuccess),
-        isLoading,
-        error,
-        isSuccess,
-      }
-
-      const currentStatus = currentToken.erc4626
-      const statusChanged =
-        currentStatus.isErc4626 !== nextStatus.isErc4626 ||
-        currentStatus.isLoading !== nextStatus.isLoading ||
-        currentStatus.error !== nextStatus.error ||
-        currentStatus.isSuccess !== nextStatus.isSuccess
-
-      if (statusChanged) {
-        setStatus(candidate.tokenId, nextStatus)
-      }
-
-      if (!isLoading) {
-        const currentAddress = tokensInPool[candidate.tokenId].address
-        const addressesMatch = isAddress(currentAddress) && isAddressEqual(currentAddress, candidate.address)
-
-        if (!addressesMatch) {
-          if (currentStatus.isErc4626 || currentStatus.isLoading || currentStatus.error || currentStatus.isSuccess) {
-            setStatus(candidate.tokenId, { ...DEFAULT_ERC4626_STATUS })
-          }
-          setCandidate(null)
-        } else {
-          if (isErc4626) {
-            updateNgAssetType(candidate.tokenId, NG_ASSET_TYPE.ERC4626)
-          }
-          setCandidate(null)
-        }
-      }
+  // check if the status is already set to avoid overriding the user's choice when switching the order of tokens
+  const statusAlreadySet = useStore((state) => state.createPool.tokensInPool[tokenId].erc4626.isSuccess)
+  const { isErc4626, isLoading, error, isSuccess } = useIsErc4626({ address })
+
+  useMemo(() => {
+    if (isErc4626 && isSuccess && !statusAlreadySet) {
+      updateNgAssetType(tokenId, NG_ASSET_TYPE.ERC4626)
+      updateTokenErc4626Status(tokenId, { isErc4626, isLoading, error, isSuccess })
     }
-  }
-
-  return {
-    scheduleCheck,
-  }
+  }, [tokenId, isErc4626, isSuccess, isLoading, error, updateNgAssetType, updateTokenErc4626Status, statusAlreadySet])
 }