0xtrails 0.6.0 → 0.6.2

package/src/widget/hooks/useIntentTransactionHistory.ts

@@ -1,4 +1,5 @@
-import { useState, useEffect, useCallback } from "react"
+import { useEffect, useCallback, useState } from "react"
+import { useQuery } from "@tanstack/react-query"
 import {
   getAccountTransactionHistory,
   type IntentTransaction,
@@ -9,12 +10,12 @@ import { logger } from "../../logger.js"
 import { useTrails } from "../providers/TrailsProvider.js"
 import { commonTokenImages } from "../../tokens.js"
 import { getTrailsClient } from "../../trailsClient.js"
-import { SortOrder, type IntentSummary } from "@0xsequence/trails-api"
+import type { IntentSummary } from "@0xsequence/trails-api"
 import {
   decodeTrailsTokenSweeperEvents,
   decodeGuestModuleEvents,
 } from "../../decoders.js"
-import { getPublicRpcClient } from "../../chains.js"
+import { getChainRpcClient } from "../../chains.js"
 import { getChainInfo } from "../../chains.js"
 import { isNativeToken } from "../../utils.js"
 
@@ -443,7 +444,7 @@ async function decodeTransactionEvents(
         continue
       }
 
-      const publicClient = getPublicRpcClient(chainInfo)
+      const publicClient = getChainRpcClient(chainInfo.id)
       const receipt = await publicClient.getTransactionReceipt({
         hash: hash as `0x${string}`,
       })
@@ -724,46 +725,57 @@ export type UseIntentTransactionHistoryReturn = {
   totalPages?: number
 }
 
+// ============================================================================
+// Main Hook
+// ============================================================================
+
 export function useIntentTransactionHistory({
   accountAddress,
   pageSize = 10,
   enabled = true,
 }: UseIntentTransactionHistoryParams): UseIntentTransactionHistoryReturn {
   const trailsConfig = useTrails()
-  const [transactions, setTransactions] = useState<IntentTransaction[]>([])
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
+
+  // Page state - store the full page object from API
   const [page, setPage] = useState(0)
-  const [hasMore, setHasMore] = useState(false)
-
-  /**
-   * Fetches intent transaction history from the API
-   */
-  const fetchIntentTransactionHistoryFromApi = useCallback(
-    async (
-      accountAddress: string,
-      pageSize: number,
-      pageNum: number,
-      apiKey: string,
-      apiUrl: string,
-    ) => {
-      if (!apiKey) {
-        throw new Error("Trails api key is required")
+  const [pageHistory, setPageHistory] = useState<any[]>([undefined]) // undefined = first page (no page param needed)
+
+  // Get current page object
+  const currentPageObject = pageHistory[page]
+
+  // TanStack Query for fetching paginated data
+  const { data, isLoading, error, refetch, isFetching } = useQuery({
+    queryKey: [
+      "intentTransactionHistory",
+      accountAddress,
+      pageSize,
+      page, // Include page index in key for proper caching
+      enabled,
+    ],
+    queryFn: async () => {
+      if (!accountAddress || !trailsConfig.trailsApiKey) {
+        throw new Error("Account address and API key required")
       }
 
-      const trailsClient = getTrailsClient({ apiKey, hostname: apiUrl })
+      const trailsClient = getTrailsClient({
+        apiKey: trailsConfig.trailsApiKey,
+        hostname: trailsConfig.trailsApiUrl!,
+      })
 
-      const requestParams = {
+      const requestParams: any = {
         byOwnerAddress: accountAddress,
-        page: {
+      }
+
+      // Build page object with pageSize for first request
+      // For subsequent requests, pass the opaque nextPage object which includes pageSize
+      if (currentPageObject) {
+        // Subsequent pages - use the opaque nextPage object as-is
+        requestParams.page = currentPageObject
+      } else {
+        // First page - set initial pageSize
+        requestParams.page = {
           pageSize,
-          sort: [
-            {
-              column: "created_at",
-              order: SortOrder.DESC,
-            },
-          ],
-        },
+        }
       }
 
       logger.console.log(
@@ -776,142 +788,101 @@ export function useIntentTransactionHistory({
 
       logger.console.log("[trails-sdk] getIntentTransactionHistory response:", {
         intentCount: apiResult.intents?.length || 0,
-        hasNextPage: !!apiResult.nextPage,
-        firstIntent: apiResult.intents?.[0],
+        hasNextPage: apiResult.nextPage?.more ?? false,
+        pageObject: apiResult.nextPage,
       })
 
-      // Map API response to IntentTransaction
+      // Map and enrich transactions
       const mappedTransactions: IntentTransaction[] = (
         apiResult.intents || []
       ).map(mapIntentSummaryToTransaction)
 
+      const supportedTokens = await getSupportedTokens()
+
+      const enrichedTransactions = await Promise.all(
+        mappedTransactions.map(async (transaction) =>
+          enrichTransaction(transaction, supportedTokens, trailsConfig),
+        ),
+      )
+
       return {
-        transactions: mappedTransactions,
-        page: apiResult.nextPage
-          ? {
-              page: pageNum,
-              pageSize,
-              more: apiResult.nextPage.more || false,
-            }
-          : {
-              page: pageNum,
-              pageSize,
-              more: false,
-            },
+        transactions: enrichedTransactions,
+        nextPage: apiResult.nextPage,
+        hasMore: apiResult.nextPage?.more ?? false,
       }
     },
-    [],
-  )
-
-  const fetchTransactions = useCallback(
-    async (pageNum: number = 0, append: boolean = false) => {
-      if (!accountAddress || !enabled) return
-
-      setLoading(true)
-      setError(null)
-
-      try {
-        const apiKey = trailsConfig.trailsApiKey || ""
-        const apiUrl = trailsConfig.trailsApiUrl!
+    enabled: enabled && !!accountAddress && !!trailsConfig.trailsApiKey,
+    staleTime: 1000 * 60 * 5, // 5 minutes
+    placeholderData: (previousData) => previousData, // Keep previous data while fetching
+  })
 
-        // Fetch intent transaction history from API
-        const result = await fetchIntentTransactionHistoryFromApi(
-          accountAddress,
-          pageSize,
-          pageNum,
-          apiKey,
-          apiUrl,
-        )
+  const transactions = data?.transactions ?? []
+  const hasMore = data?.hasMore ?? false
+  const nextPageObject = data?.nextPage
 
-        // Get supported tokens once for all transactions
-        const supportedTokens = await getSupportedTokens()
+  const refetchPage = useCallback(() => {
+    refetch()
+  }, [refetch])
 
-        // Enrich transactions with token information, transaction hashes, and status
-        const enrichedTransactions = await Promise.all(
-          (result.transactions || []).map(async (transaction) =>
-            enrichTransaction(transaction, supportedTokens, trailsConfig),
-          ),
-        )
+  const nextPageHandler = useCallback(() => {
+    if (!hasMore || isLoading) return
 
-        if (append) {
-          setTransactions((prev) => [...prev, ...enrichedTransactions])
-        } else {
-          setTransactions(enrichedTransactions)
-        }
+    // Check if next page is already cached
+    if (pageHistory[page + 1]) {
+      logger.console.log("[trails-sdk] Using cached page", page + 1)
+      setPage((p) => p + 1)
+      return
+    }
 
-        setHasMore(result.page?.more || false)
-        setPage(pageNum)
-      } catch (err) {
-        const errorMessage =
-          err instanceof Error
-            ? err.message
-            : "Failed to fetch intent transaction history"
-        setError(errorMessage)
-        logger.console.error(
-          "[trails-sdk] Error in useIntentTransactionHistory:",
-          err,
-        )
-      } finally {
-        setLoading(false)
-      }
-    },
-    [
-      accountAddress,
-      enabled,
-      pageSize,
-      trailsConfig,
-      fetchIntentTransactionHistoryFromApi,
-    ],
-  )
+    // Fetch next page by storing the nextPage object and incrementing page index
+    if (nextPageObject) {
+      setPageHistory((prev) => {
+        const newHistory = [...prev]
+        newHistory[page + 1] = nextPageObject
+        return newHistory
+      })
+      setPage((p) => p + 1)
+    }
+  }, [hasMore, isLoading, nextPageObject, page, pageHistory])
 
-  const refetch = () => {
-    fetchTransactions(page, false)
-  }
+  const prevPageHandler = useCallback(() => {
+    if (page <= 0 || isLoading) return
 
-  const loadMore = () => {
-    if (hasMore && !loading) {
-      const nextPage = page + 1
-      fetchTransactions(nextPage, true)
-    }
-  }
+    // Go back to previous page
+    logger.console.log("[trails-sdk] Going to previous page", page - 1)
+    setPage((p) => p - 1)
+  }, [page, isLoading])
 
-  const nextPage = () => {
-    if (hasMore && !loading) {
-      const next = page + 1
-      fetchTransactions(next, false)
-    }
-  }
+  const loadMoreHandler = useCallback(() => {
+    if (!hasMore || isFetching) return
 
-  const prevPage = () => {
-    if (page > 0 && !loading) {
-      const prev = page - 1
-      fetchTransactions(prev, false)
+    if (nextPageObject) {
+      setPageHistory((prev) => {
+        const newHistory = [...prev]
+        newHistory[page + 1] = nextPageObject
+        return newHistory
+      })
+      setPage((p) => p + 1)
     }
-  }
-
-  const hasPrev = page > 0
+  }, [hasMore, isFetching, nextPageObject, page])
 
+  // Reset on account change
+  // biome-ignore lint/correctness/useExhaustiveDependencies: accountAddress is an external dependency
   useEffect(() => {
-    if (accountAddress && enabled) {
-      fetchTransactions(0, false)
-    } else {
-      setTransactions([])
-      setError(null)
-      setHasMore(false)
-      setPage(0)
-    }
-  }, [accountAddress, enabled, fetchTransactions])
+    setPage(0)
+    setPageHistory([undefined])
+  }, [accountAddress])
 
   return {
     transactions,
-    loading,
-    error,
-    refetch,
-    loadMore,
+    loading: isLoading || isFetching,
+    error: error instanceof Error ? error.message : null,
+    refetch: refetchPage,
+    loadMore: loadMoreHandler,
     hasMore,
     page,
-    nextPage,
-    prevPage,
-    hasPrev,
+    nextPage: nextPageHandler,
+    prevPage: prevPageHandler,
+    hasPrev: page > 0,
   }
 }

package/src/widget/hooks/useQuote.ts

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query"
 import { useRef } from "react"
 import type { TransactionReceipt } from "viem"
-import { zeroAddress } from "viem"
+import { zeroAddress, erc20Abi } from "viem"
 import { useIndexerGatewayClient } from "../../indexerClient.js"
 import { getTokenBalancesWithPrices } from "../../tokenBalances.js"
 import { logger } from "../../logger.js"
@@ -13,7 +13,7 @@ import { getFullErrorMessage, getPrettifiedErrorMessage } from "../../error.js"
 import { prepareSend } from "../../prepareSend.js"
 import { abortControllerRegistry } from "../../abortController.js"
 import { TradeType } from "../../prepareSend.js"
-import { getChainInfo } from "../../chains.js"
+import { getChainInfo, useChainRpcClient } from "../../chains.js"
 import type { IntentTransaction } from "@0xsequence/trails-api"
 import type { PrepareSendOptions } from "../../transactionIntent/types.js"
 import type { Chain } from "../../chains.js"
@@ -188,6 +188,10 @@ export function useQuote({
   })
   const indexerGatewayClient = useIndexerGatewayClient()
 
+  // Get RPC clients for known chainIds using hooks (reads from TrailsProvider context)
+  const originPublicClient = useChainRpcClient(fromChainId ?? undefined)
+  const destinationPublicClient = useChainRpcClient(toChainId ?? undefined)
+
   const { supportedTokens } = useSupportedTokens()
 
   // Get mutation hooks for passing to prepareSend
@@ -312,6 +316,52 @@ export function useQuote({
           )
         }
 
+        // Helper function to fetch decimals on-chain if not found in token list
+        const fetchDecimalsOnChain = async (
+          tokenAddress: string,
+          chainId: number,
+        ): Promise<number | null> => {
+          try {
+            // Use the hook-based RPC clients that are already available
+            const publicClient =
+              chainId === fromChainId
+                ? originPublicClient
+                : chainId === toChainId
+                  ? destinationPublicClient
+                  : null
+
+            if (!publicClient) {
+              logger.console.warn(
+                `[trails-sdk] No RPC client available for chain ${chainId}`,
+              )
+              return null
+            }
+
+            // For native tokens, return 18 decimals
+            if (tokenAddress.toLowerCase() === zeroAddress.toLowerCase()) {
+              const chainInfo = getChainInfo(chainId)
+              return chainInfo?.nativeCurrency.decimals ?? 18
+            }
+
+            const decimals = await publicClient.readContract({
+              address: tokenAddress as `0x${string}`,
+              abi: erc20Abi,
+              functionName: "decimals",
+            })
+
+            logger.console.log(
+              `[trails-sdk] Fetched decimals on-chain for token ${tokenAddress} on chain ${chainId}: ${decimals}`,
+            )
+            return decimals
+          } catch (error) {
+            logger.console.error(
+              `[trails-sdk] Error fetching decimals on-chain for token ${tokenAddress} on chain ${chainId}:`,
+              error,
+            )
+            return null
+          }
+        }
+
         const originToken = supportedTokens?.find(
           (token) =>
             token.contractAddress?.toLowerCase() ===
@@ -323,10 +373,27 @@ export function useQuote({
               toTokenAddress?.toLowerCase() && token.chainId === toChainId,
         )
 
-        const sourceTokenDecimals = originToken?.decimals
+        let sourceTokenDecimals = originToken?.decimals
+        if (!sourceTokenDecimals && fromTokenAddress && fromChainId) {
+          logger.console.warn(
+            "[trails-sdk] [useQuote] Source token decimals not found in token list, fetching on-chain:",
+            {
+              originToken,
+              fromTokenAddress,
+              fromChainId,
+            },
+          )
+          const onChainDecimals = await fetchDecimalsOnChain(
+            fromTokenAddress,
+            fromChainId,
+          )
+          if (onChainDecimals !== null) {
+            sourceTokenDecimals = onChainDecimals
+          }
+        }
         if (!sourceTokenDecimals) {
           logger.console.error(
-            "[trails-sdk] [useQuote] Missing source token decimals:",
+            "[trails-sdk] [useQuote] Source token decimals not found:",
             {
               originToken,
               fromTokenAddress,
@@ -335,10 +402,27 @@ export function useQuote({
           )
           throw new Error("Source token decimals not found")
         }
-        const destinationTokenDecimals = destinationToken?.decimals
+        let destinationTokenDecimals = destinationToken?.decimals
+        if (!destinationTokenDecimals && toTokenAddress && toChainId) {
+          logger.console.warn(
+            "[trails-sdk] Destination token decimals not found in token list, fetching on-chain:",
+            {
+              destinationToken,
+              toTokenAddress,
+              toChainId,
+            },
+          )
+          const onChainDecimals = await fetchDecimalsOnChain(
+            toTokenAddress,
+            toChainId,
+          )
+          if (onChainDecimals !== null) {
+            destinationTokenDecimals = onChainDecimals
+          }
+        }
         if (!destinationTokenDecimals) {
           logger.console.error(
-            "[trails-sdk] Missing destination token decimals:",
+            "[trails-sdk] Destination token decimals not found:",
             {
               destinationToken,
               toTokenAddress,
@@ -381,6 +465,8 @@ export function useQuote({
           checkoutOnHandlers,
           sequenceIndexerUrl,
           sequenceProjectAccessKey,
+          originPublicClient: originPublicClient ?? undefined,
+          destinationPublicClient: destinationPublicClient ?? undefined,
         }
 
         logger.console.log("[trails-sdk] options", options)

package/src/widget/hooks/useSelectedFeeOption.tsx

@@ -13,6 +13,8 @@ import { logger } from "../../index.js"
 import { isNativeToken, normalizeAddress } from "../../utils.js"
 import { isAddressEqual } from "viem"
 
+const FEE_OPTION_PREFERENCE_KEY = "trails-fee-option-preference"
+
 const createBalanceKey = (
   chainId?: number,
   tokenAddress?: string | null,
@@ -101,8 +103,7 @@ export const SelectedFeeOptionProvider: React.FC<
 > = ({ children, initialToken = null }) => {
   const [selectedFeeOption, setSelectedFeeOptionInternalRaw] =
     useState<FeeOption | null>(initialToken)
-  const [hasUserSelectedFeeOption, setHasUserSelectedFeeOption] =
-    useState(false)
+  const [hasUserSelected, setHasUserSelected] = useState(false)
   const [feeOptions, setFeeOptionsInternal] = useState<FeeOption[]>([])
   const [originTokenChainId, setOriginTokenChainId] = useState<
     number | undefined
@@ -123,12 +124,23 @@ export const SelectedFeeOptionProvider: React.FC<
   // Wrapper to track when user makes an explicit selection
   const setSelectedFeeOption = useCallback((token: FeeOption | null) => {
     setSelectedFeeOptionInternalRaw(token)
-    setHasUserSelectedFeeOption(true)
+    setHasUserSelected(true)
+
+    // Save preference to localStorage: "native" or "erc20"
+    const preference = token === null ? "native" : "erc20"
+    try {
+      localStorage.setItem(FEE_OPTION_PREFERENCE_KEY, preference)
+    } catch (error) {
+      logger.console.warn(
+        "[trails-sdk] Failed to save fee option preference to localStorage",
+        error,
+      )
+    }
   }, [])
 
   const clearSelectedFeeOption = useCallback(() => {
     setSelectedFeeOptionInternalRaw(null)
-    setHasUserSelectedFeeOption(false)
+    setHasUserSelected(false)
   }, [])
 
   // Process raw fee options with balance checks
@@ -169,44 +181,89 @@ export const SelectedFeeOptionProvider: React.FC<
       )
   }, [feeOptions, originTokenChainId, tokenBalanceLookup])
 
-  // Auto-select first fee option (ERC20 or native gas) with sufficient balance
-  // NOTE: If sufficient balance, it will usually resolve to the native gas option because native gas is the first option in the list returned by the API
+  // Auto-select fee option: check preference, then fallback to first option
   useEffect(() => {
+    // Clear selection if no options available
     if (processedFeeOptions.length === 0) {
       if (selectedFeeOption !== null) {
         setSelectedFeeOptionInternalRaw(null)
-        setHasUserSelectedFeeOption(false)
+        setHasUserSelected(false)
       }
       return
     }
 
-    const selectionStillValid = selectedFeeOption
-      ? processedFeeOptions.some((option) =>
-          isAddressEqual(
-            option.tokenAddress as `0x${string}`,
-            selectedFeeOption.tokenAddress as `0x${string}`,
-          ),
-        )
-      : false
+    // If user has made a selection, validate and update it
+    if (hasUserSelected) {
+      // Check if current selection is still valid
+      const isSelectionValid =
+        selectedFeeOption === null
+          ? processedFeeOptions.some((option) =>
+              isNativeToken(option.tokenAddress),
+            )
+          : processedFeeOptions.some((option) =>
+              isAddressEqual(
+                option.tokenAddress as `0x${string}`,
+                selectedFeeOption.tokenAddress as `0x${string}`,
+              ),
+            )
 
-    if (selectedFeeOption && !selectionStillValid) {
-      setSelectedFeeOptionInternalRaw(null)
-      setHasUserSelectedFeeOption(false)
-      return
+      if (isSelectionValid) {
+        // Update to latest object if it's an ERC20 token
+        if (selectedFeeOption !== null) {
+          const updatedOption = processedFeeOptions.find((option) =>
+            isAddressEqual(
+              option.tokenAddress as `0x${string}`,
+              selectedFeeOption.tokenAddress as `0x${string}`,
+            ),
+          )
+          if (updatedOption && updatedOption !== selectedFeeOption) {
+            setSelectedFeeOptionInternalRaw(updatedOption)
+          }
+        }
+        return // Keep user's selection
+      } else {
+        // Selection is invalid, clear it and allow auto-selection below
+        setSelectedFeeOptionInternalRaw(null)
+        setHasUserSelected(false)
+      }
     }
 
-    if (!hasUserSelectedFeeOption && !selectedFeeOption) {
-      const fallbackOption =
-        processedFeeOptions.find((option) => !option.notEnoughBalance) ??
-        processedFeeOptions[0] ??
-        null
+    // No user selection - auto-select based on preference or fallback
 
-      // Only fallback if the fallback option is erc20
-      if (fallbackOption && !isNativeToken(fallbackOption.tokenAddress)) {
-        setSelectedFeeOptionInternalRaw(fallbackOption)
+    // Load preference from localStorage
+    let preferredType: "native" | "erc20" | null = null
+    try {
+      const stored = localStorage.getItem(FEE_OPTION_PREFERENCE_KEY)
+      if (stored === "native" || stored === "erc20") {
+        preferredType = stored
+      }
+    } catch {
+      // Ignore localStorage errors
+    }
+
+    // Try to select based on preference
+    if (preferredType) {
+      const isNative = preferredType === "native"
+      const preferredOption = processedFeeOptions.find(
+        (option) => isNativeToken(option.tokenAddress) === isNative,
+      )
+
+      if (preferredOption) {
+        setSelectedFeeOptionInternalRaw(isNative ? null : preferredOption)
+        return
+      }
+    }
+
+    // Fallback: select first available option
+    if (processedFeeOptions.length > 0) {
+      const firstOption = processedFeeOptions[0]
+      if (firstOption) {
+        setSelectedFeeOptionInternalRaw(
+          isNativeToken(firstOption.tokenAddress) ? null : firstOption,
+        )
       }
     }
-  }, [processedFeeOptions, selectedFeeOption, hasUserSelectedFeeOption])
+  }, [processedFeeOptions, selectedFeeOption, hasUserSelected])
 
   // Function to set raw fee options and process them
   const setFeeOptions = useCallback(
@@ -221,9 +278,9 @@ export const SelectedFeeOptionProvider: React.FC<
       setOriginTokenChainId(originChainId)
       setAvailableTokens(tokens)
 
+      // Only clear selection if fee options are empty
       if (normalized.length === 0) {
         setSelectedFeeOptionInternalRaw(null)
-        setHasUserSelectedFeeOption(false)
       }
     },
     [],