0xtrails 0.1.2 → 0.1.4

package/src/widget/hooks/useTokenList.ts

@@ -1,4 +1,3 @@
-import type { SequenceIndexerGateway } from "@0xsequence/indexer"
 import { ResourceStatus } from "@0xsequence/indexer"
 import { Address } from "ox"
 import { useEffect, useMemo, useState } from "react"
@@ -16,7 +15,8 @@ import {
   useHasSufficientBalanceUsd,
   useTokenBalances,
 } from "../../tokenBalances.js"
-import { getFormatttedTokenName, getSupportedTokens } from "../../tokens.js"
+import { getFormatttedTokenName, useSupportedTokens } from "../../tokens.js"
+import { useIndexerGatewayClient } from "../../indexerClient.js"
 
 export interface Token {
   id: number
@@ -50,9 +50,9 @@ export type TokenFormatted = Token &
 export type UseTokenListProps = {
   onContinue: (selectedToken: Token) => void
   targetAmountUsd?: number | null
-  indexerGatewayClient: SequenceIndexerGateway
   onError: (error: Error | string | null) => void
   fundMethod?: string | null
+  allSupportedTokens?: boolean
 }
 
 export type UseTokenListReturn = {
@@ -76,27 +76,31 @@ export type UseTokenListReturn = {
 export function useTokenList({
   onContinue,
   targetAmountUsd,
-  indexerGatewayClient,
   onError,
   fundMethod,
+  allSupportedTokens = false,
 }: UseTokenListProps): UseTokenListReturn {
   const [selectedToken, setSelectedToken] = useState<Token | null>(null)
   const [searchQuery, setSearchQuery] = useState("")
-  const [allSupportedTokens, setAllSupportedTokens] = useState<any[]>([])
-  const [isLoadingSupportedTokens, setIsLoadingSupportedTokens] =
-    useState(false)
   const { address } = useAccount()
+  const indexerGatewayClient = useIndexerGatewayClient()
   const {
     sortedTokens: allSortedTokens,
     isLoadingSortedTokens,
     balanceError,
   } = useTokenBalances(address as Address.Address, indexerGatewayClient)
 
-  // Determine loading state based on fund method
+  // Use cached supported tokens hook
+  const { supportedTokens, isLoadingTokens: isLoadingSupportedTokens } =
+    useSupportedTokens()
+
+  // Determine loading state based on fund method and allSupportedTokens
   const isLoadingTokens =
     fundMethod === "qr-code" || fundMethod === "exchange"
       ? isLoadingSupportedTokens
-      : isLoadingSortedTokens
+      : allSupportedTokens
+        ? isLoadingSortedTokens || isLoadingSupportedTokens
+        : isLoadingSortedTokens
 
   const {
     totalBalanceUsd,
@@ -111,32 +115,17 @@ export function useTokenList({
   const showContinueButton = false
   const { supportedChains: supportedToChains } = useSupportedChains()
 
-  // Fetch all supported tokens when fundMethod is "qr-code" or "exchange"
-  useEffect(() => {
-    if (fundMethod === "qr-code" || fundMethod === "exchange") {
-      setIsLoadingSupportedTokens(true)
-      getSupportedTokens()
-        .then((tokens) => {
-          setAllSupportedTokens(tokens)
-        })
-        .catch((error) => {
-          console.error("[trails-sdk] Failed to fetch supported tokens:", error)
-        })
-        .finally(() => {
-          setIsLoadingSupportedTokens(false)
-        })
-    }
-  }, [fundMethod])
+  // Note: Supported tokens are now fetched via useSupportedTokens hook with caching
 
   const supportedChainIds = useMemo(() => {
     return new Set(supportedToChains.map((c) => c.id))
   }, [supportedToChains])
 
   const sortedTokens = useMemo<Array<TokenBalanceExtended>>(() => {
-    // If fundMethod is "qr-code" or "exchange", use all supported tokens instead of account-specific tokens
+    // If fundMethod is "qr-code" or "exchange", use filtered supported tokens
     if (fundMethod === "qr-code" || fundMethod === "exchange") {
       // Filter to only show specific tokens for QR code and exchange modes
-      const filteredTokens = allSupportedTokens.filter((token) => {
+      const filteredTokens = supportedTokens.filter((token: any) => {
         const symbol = token.symbol.toUpperCase()
         return ["ETH", "POL", "USDC", "USDT", "DAI", "BAT", "WETH"].includes(
           symbol,
@@ -144,7 +133,7 @@ export function useTokenList({
       })
 
       // Convert SupportedToken to TokenBalanceExtended format
-      return filteredTokens.map((token) => {
+      return filteredTokens.map((token: any) => {
         // Check if it's a native token (like ETH)
         if (
           token.contractAddress === "0x0000000000000000000000000000000000000000"
@@ -199,16 +188,10 @@ export function useTokenList({
       }
       return true
     })
-  }, [
-    allSortedTokens,
-    supportedChainIds,
-    fundMethod,
-    allSupportedTokens,
-    address,
-  ])
+  }, [allSortedTokens, supportedChainIds, fundMethod, supportedTokens, address])
 
   useEffect(() => {
-    if (onError) {
+    if (onError && balanceError) {
       onError(balanceError)
     }
   }, [balanceError, onError])
@@ -359,95 +342,145 @@ export function useTokenList({
   }, [sortedTokens, searchQuery])
 
   const filteredTokensFormatted = useMemo(() => {
-    return filteredTokens.map((token: TokenBalanceExtended): TokenFormatted => {
-      const isNative = !("contractAddress" in token)
-      const chainInfo = getChainInfo(token.chainId)
-      const nativeSymbol = chainInfo?.nativeCurrency.symbol || "ETH"
-      const tokenSymbol = isNative
-        ? nativeSymbol
-        : token.contractInfo?.symbol || "???"
-      const contractAddress = isNative ? zeroAddress : token.contractAddress
-      let imageContractAddress = contractAddress
-      if (tokenSymbol === "WETH") {
-        imageContractAddress = zeroAddress
-      }
-      const imageUrl = `https://assets.sequence.info/images/tokens/small/${token.chainId}/${imageContractAddress}.webp`
-      const currentTokenName =
-        (token as TokenBalanceWithPrice).contractInfo?.name || ""
-      const tokenName = getFormatttedTokenName(
-        currentTokenName,
-        tokenSymbol,
-        token.chainId,
-      )
-      const formattedBalance = formatRawAmount(
-        token.balance,
-        isNative ? 18 : token.contractInfo?.decimals,
-      )
-      const priceUsd = Number(token.price?.value) ?? 0
-      const balanceUsdFormatted = token.balanceUsdFormatted ?? ""
-      const decimals = isNative ? 18 : (token.contractInfo?.decimals ?? 18)
-      let isSufficientBalance = true
-      if (targetAmountUsd) {
-        isSufficientBalance = (token.balanceUsd ?? 0) >= targetAmountUsd
-      }
-      const chainName = chainInfo?.name || ""
-
-      return {
-        ...token,
-        id: token.chainId,
-        contractInfo: {
-          ...(token as TokenBalanceWithPrice).contractInfo,
-          chainId: Number(token.chainId),
-          source: (token as TokenBalanceWithPrice).contractInfo?.source || "",
-          type: (token as TokenBalanceWithPrice).contractInfo?.type || "",
-          logoURI: (token as TokenBalanceWithPrice).contractInfo?.logoURI || "",
-          deployed:
-            (token as TokenBalanceWithPrice).contractInfo?.deployed || false,
-          bytecodeHash:
-            (token as TokenBalanceWithPrice).contractInfo?.bytecodeHash || "",
-          updatedAt:
-            (token as TokenBalanceWithPrice).contractInfo?.updatedAt || "",
-          queuedAt:
-            (token as TokenBalanceWithPrice).contractInfo?.queuedAt || "",
-          extensions: (token as TokenBalanceWithPrice).contractInfo
-            ?.extensions || {
-            link: "",
-            description: "",
-            categories: [],
-            ogImage: "",
-            ogName: "",
-            originChainId: 0,
-            originAddress: "",
-            blacklist: false,
-            verified: false,
-            featureIndex: 0,
-            verifiedBy: "",
-            featured: false,
+    // Get base formatted tokens
+    const baseFormattedTokens = filteredTokens.map(
+      (token: TokenBalanceExtended): TokenFormatted => {
+        const isNative = !("contractAddress" in token)
+        const chainInfo = getChainInfo(token.chainId)
+        const nativeSymbol = chainInfo?.nativeCurrency.symbol || "ETH"
+        const tokenSymbol = isNative
+          ? nativeSymbol
+          : token.contractInfo?.symbol || "???"
+        const contractAddress = isNative ? zeroAddress : token.contractAddress
+        let imageContractAddress = contractAddress
+        if (tokenSymbol === "WETH") {
+          imageContractAddress = zeroAddress
+        }
+        const imageUrl = `https://assets.sequence.info/images/tokens/small/${token.chainId}/${imageContractAddress}.webp`
+        const currentTokenName =
+          (token as TokenBalanceWithPrice).contractInfo?.name || ""
+        const tokenName = getFormatttedTokenName(
+          currentTokenName,
+          tokenSymbol,
+          token.chainId,
+        )
+        const formattedBalance = formatRawAmount(
+          token.balance,
+          isNative ? 18 : token.contractInfo?.decimals,
+        )
+        const priceUsd = Number(token.price?.value) ?? 0
+        const balanceUsdFormatted = token.balanceUsdFormatted ?? ""
+        const decimals = isNative ? 18 : (token.contractInfo?.decimals ?? 18)
+        let isSufficientBalance = true
+        if (targetAmountUsd) {
+          isSufficientBalance = (token.balanceUsd ?? 0) >= targetAmountUsd
+        }
+        const chainName = chainInfo?.name || ""
+
+        return {
+          ...token,
+          id: token.chainId,
+          contractInfo: {
+            ...(token as TokenBalanceWithPrice).contractInfo,
+            chainId: Number(token.chainId),
+            source: (token as TokenBalanceWithPrice).contractInfo?.source || "",
+            type: (token as TokenBalanceWithPrice).contractInfo?.type || "",
+            logoURI:
+              (token as TokenBalanceWithPrice).contractInfo?.logoURI || "",
+            deployed:
+              (token as TokenBalanceWithPrice).contractInfo?.deployed || false,
+            bytecodeHash:
+              (token as TokenBalanceWithPrice).contractInfo?.bytecodeHash || "",
+            updatedAt:
+              (token as TokenBalanceWithPrice).contractInfo?.updatedAt || "",
+            queuedAt:
+              (token as TokenBalanceWithPrice).contractInfo?.queuedAt || "",
+            extensions: (token as TokenBalanceWithPrice).contractInfo
+              ?.extensions || {
+              link: "",
+              description: "",
+              categories: [],
+              ogImage: "",
+              ogName: "",
+              originChainId: 0,
+              originAddress: "",
+              blacklist: false,
+              verified: false,
+              featureIndex: 0,
+              verifiedBy: "",
+              featured: false,
+            },
+            status:
+              (token as TokenBalanceWithPrice).contractInfo?.status ||
+              ResourceStatus.NOT_AVAILABLE,
+            address: contractAddress,
+            name: tokenName,
+            symbol: tokenSymbol,
+            decimals: decimals,
           },
-          status:
-            (token as TokenBalanceWithPrice).contractInfo?.status ||
-            ResourceStatus.NOT_AVAILABLE,
-          address: contractAddress,
           name: tokenName,
           symbol: tokenSymbol,
-          decimals: decimals,
-        },
-        name: tokenName,
-        symbol: tokenSymbol,
-        balanceFormatted: formattedBalance,
-        imageUrl,
-        chainId: token.chainId,
-        contractAddress: contractAddress,
-        balanceUsdFormatted,
-        tokenPriceUsd: priceUsd,
-        isNative: isNative,
-        tokenName: tokenName,
-        priceUsd: priceUsd,
-        isSufficientBalance,
-        chainName,
-      }
-    })
-  }, [filteredTokens, targetAmountUsd])
+          balanceFormatted: formattedBalance,
+          imageUrl,
+          chainId: token.chainId,
+          contractAddress: contractAddress,
+          balanceUsdFormatted,
+          tokenPriceUsd: priceUsd,
+          isNative: isNative,
+          tokenName: tokenName,
+          priceUsd: priceUsd,
+          isSufficientBalance,
+          chainName,
+        }
+      },
+    )
+
+    // If allSupportedTokens is true, combine with supported tokens
+    if (allSupportedTokens) {
+      // Create a set of existing token keys for quick lookup
+      const existingTokenKeys = new Set(
+        baseFormattedTokens.map(
+          (token) => `${token.chainId}-${token.contractAddress.toLowerCase()}`,
+        ),
+      )
+
+      // Add supported tokens that don't exist in the base list
+      const additionalSupportedTokens = supportedTokens
+        .filter((supportedToken) => {
+          const key = `${supportedToken.chainId}-${supportedToken.contractAddress.toLowerCase()}`
+          return !existingTokenKeys.has(key)
+        })
+        .map((supportedToken) => {
+          const tokenName = getFormatttedTokenName(
+            supportedToken.name,
+            supportedToken.symbol,
+            supportedToken.chainId,
+          )
+
+          return {
+            ...supportedToken,
+            tokenName: tokenName,
+            contractInfo: {
+              decimals: supportedToken.decimals,
+              symbol: supportedToken.symbol,
+              name: supportedToken.name,
+            },
+            // Add minimal required properties to make it work
+            balance: "",
+            balanceFormatted: "",
+            balanceUsdFormatted: "",
+            priceUsd: 0,
+            isSufficientBalance: true,
+            // Use any type to bypass strict type checking for now
+          } as any
+        })
+
+      // Combine lists with base tokens taking precedence
+      return [...baseFormattedTokens, ...additionalSupportedTokens]
+    }
+
+    return baseFormattedTokens
+  }, [filteredTokens, targetAmountUsd, allSupportedTokens, supportedTokens])
 
   const showInsufficientBalance = useMemo(() => {
     return (