0xtrails 0.4.3 → 0.6.0

package/src/widget/hooks/useIsConnectedWalletSmartContract.ts

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react"
+import { useAccount } from "wagmi"
+import { isSmartContractWallet as checkIsSmartContractWallet } from "../../walletUtils.js"
+import { logger } from "../../logger.js"
+
+/**
+ * Hook to check if the currently connected wallet is a smart contract.
+ * @param chainId - The chain ID to check the wallet on
+ * @returns true if the connected wallet is a smart contract, false otherwise
+ */
+export function useIsConnectedWalletSmartContract(chainId?: number): boolean {
+  const { address } = useAccount()
+  const [isSmartContractWallet, setIsSmartContractWallet] = useState(false)
+
+  useEffect(() => {
+    const checkIfContract = async () => {
+      if (address && chainId) {
+        try {
+          const isContract = await checkIsSmartContractWallet(address, chainId)
+          setIsSmartContractWallet(isContract)
+        } catch (error) {
+          logger.console.error(
+            "[trails-sdk] Error checking if wallet is contract:",
+            error,
+          )
+          setIsSmartContractWallet(false)
+        }
+      } else {
+        setIsSmartContractWallet(false)
+      }
+    }
+
+    checkIfContract()
+  }, [address, chainId])
+
+  logger.console.log("[trails-sdk] isSmartContractWallet:", {
+    isSmartContractWallet,
+    address,
+    chainId,
+  })
+
+  return isSmartContractWallet
+}

package/src/widget/hooks/useIsSequenceWallet.ts

@@ -0,0 +1,17 @@
+import { useMemo } from "react"
+import { useAccount } from "wagmi"
+import { isSequenceWallet as checkIsSequenceWallet } from "../../walletUtils.js"
+
+/**
+ * Hook to check if the currently connected wallet is a Sequence wallet.
+ * @returns true if the connected wallet is a Sequence wallet, false otherwise
+ */
+export function useIsSequenceWallet(): boolean {
+  const { connector } = useAccount()
+
+  const isSequenceWallet = useMemo(() => {
+    return checkIsSequenceWallet(connector)
+  }, [connector])
+
+  return isSequenceWallet
+}

package/src/widget/hooks/useQuote.ts

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query"
-import { useRef, useMemo } from "react"
+import { useRef } from "react"
 import type { TransactionReceipt } from "viem"
 import { zeroAddress } from "viem"
 import { useIndexerGatewayClient } from "../../indexerClient.js"
@@ -7,26 +7,23 @@ import { getTokenBalancesWithPrices } from "../../tokenBalances.js"
 import { logger } from "../../logger.js"
 import { useSupportedTokens } from "../../tokens.js"
 import { useTrailsClient } from "../../trailsClient.js"
+import { useTrails } from "../../widget/providers/TrailsProvider.js"
 import { getExplorerUrl } from "../../explorer.js"
 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 type { TrailsClientConfig } from "../../trailsClient.js"
-import type { IndexerGatewayConfig } from "../../indexerClient.js"
-import type {
-  MetaTxnReceipt,
-  PrepareSendOptions,
-} from "../../transactionIntent/types.js"
+import type { IntentTransaction } from "@0xsequence/trails-api"
+import type { PrepareSendOptions } from "../../transactionIntent/types.js"
 import type { Chain } from "../../chains.js"
 import type { SupportedToken } from "../../tokens.js"
 import type { TransactionState } from "../../transactions.js"
 import type { PrepareSendFees } from "../../prepareSend.js"
-import type { SequenceEnv } from "../../config.js"
 import { getTokenPrice } from "../../prices.js"
 import { useCommitIntent, useExecuteIntent } from "../../mutations.js"
 import type { CheckoutOnHandlers } from "./useCheckout.js"
+import type { FeeOption } from "@0xsequence/trails-api"
 
 export type UseQuoteProps = {
   walletClient?: any // TODO: fix this, has to do with viem/wagmi versions
@@ -71,24 +68,22 @@ export type UseQuoteProps = {
    */
   checkoutOnHandlers?: Partial<CheckoutOnHandlers>
   paymasterUrl?: string
-  selectedFeeToken?: {
-    tokenAddress: string
-    tokenSymbol?: string
-  } | null
+  selectedFeeOption?: FeeOption | null
   abortSignal?: AbortSignal
   apiKey?: string | null
+  nodeGatewayEnv?: "prod" | "dev" | "local" | "cors-anywhere"
 }
 
 export type SwapReturn = {
   originTransaction: {
     transactionHash?: string | null
     explorerUrl?: string | null
-    receipt: TransactionReceipt | MetaTxnReceipt | null
+    receipt: TransactionReceipt | IntentTransaction | null
   }
   destinationTransaction: {
     transactionHash?: string | null
     explorerUrl?: string | null
-    receipt: MetaTxnReceipt | null
+    receipt: IntentTransaction | null
   }
   totalCompletionSeconds?: number
 }
@@ -150,13 +145,11 @@ export function useQuote({
   checkoutOnHandlers,
   quoteProvider,
   paymasterUrl,
-  selectedFeeToken,
+  selectedFeeOption,
   nodeGatewayEnv,
   abortSignal: externalAbortSignal,
   apiKey,
-}: Partial<
-  UseQuoteProps & { nodeGatewayEnv?: SequenceEnv }
-> = {}): UseQuoteReturn {
+}: Partial<UseQuoteProps> = {}): UseQuoteReturn {
   // Set node gateway environment override for this quote session
   if (nodeGatewayEnv) {
     ;(globalThis as any).__testNodeGatewayEnv = nodeGatewayEnv
@@ -185,17 +178,15 @@ export function useQuote({
       })()
     : abortControllerRef.current.signal
 
-  const trailsClientConfig = useMemo<TrailsClientConfig>(() => {
-    return apiKey ? { apiKey } : {}
-  }, [apiKey])
-  const indexerGatewayClientConfig = useMemo<IndexerGatewayConfig>(() => {
-    return apiKey ? { projectAccessKey: apiKey } : {}
-  }, [apiKey])
+  const { trailsApiKey, trailsApiUrl, sequenceIndexerUrl } = useTrails()
+  // trailsApiKey is the same as sequenceProjectAccessKey
+  const sequenceProjectAccessKey = trailsApiKey
 
-  const trailsClient = useTrailsClient(trailsClientConfig)
-  const indexerGatewayClient = useIndexerGatewayClient(
-    indexerGatewayClientConfig,
-  )
+  const trailsClient = useTrailsClient({
+    apiKey: trailsApiKey,
+    hostname: trailsApiUrl,
+  })
+  const indexerGatewayClient = useIndexerGatewayClient()
 
   const { supportedTokens } = useSupportedTokens()
 
@@ -382,12 +373,14 @@ export function useQuote({
           slippageTolerance: slippageTolerance?.toString(),
           quoteProvider: quoteProvider,
           paymasterUrl: paymasterUrl,
-          selectedFeeToken: selectedFeeToken ?? undefined,
+          selectedFeeOption: selectedFeeOption ?? null,
           abortSignal: combinedAbortSignal,
           originNativeTokenPriceUsd: originNativeTokenPriceUsd,
           commitIntentFn: commitIntentMutation.mutateAsync,
           executeIntentFn: executeIntentMutation.mutateAsync,
           checkoutOnHandlers,
+          sequenceIndexerUrl,
+          sequenceProjectAccessKey,
         }
 
         logger.console.log("[trails-sdk] options", options)
@@ -424,10 +417,10 @@ export function useQuote({
         const swap = async (): Promise<SwapReturn> => {
           const {
             depositUserTxnReceipt,
-            destinationMetaTxnReceipt,
+            destinationIntentTransaction,
             totalCompletionSeconds,
           } = await send({
-            selectedFeeToken: selectedFeeToken ?? undefined,
+            selectedFeeOption: selectedFeeOption ?? null,
           })
 
           return {
@@ -440,12 +433,12 @@ export function useQuote({
               receipt: depositUserTxnReceipt,
             },
             destinationTransaction: {
-              transactionHash: destinationMetaTxnReceipt?.txnHash,
+              transactionHash: destinationIntentTransaction?.txnHash,
               explorerUrl: getExplorerUrl({
-                txHash: destinationMetaTxnReceipt?.txnHash as string,
+                txHash: destinationIntentTransaction?.txnHash as string,
                 chainId: toChainId,
               }),
-              receipt: destinationMetaTxnReceipt,
+              receipt: destinationIntentTransaction,
             },
             totalCompletionSeconds,
           }

package/src/widget/hooks/useRecentTokens.ts

@@ -1,3 +1,4 @@
+import { JsonEncode } from "@0xsequence/trails-api"
 import { useState, useEffect, useCallback } from "react"
 import type { SupportedToken } from "../../tokens.js"
 import { logger } from "../../logger.js"
@@ -66,7 +67,7 @@ export function useRecentTokens(accountAddress?: string) {
 
         // Update storage
         allRecentTokens[accountKey] = accountTokens
-        localStorage.setItem(RECENT_TOKENS_KEY, JSON.stringify(allRecentTokens))
+        localStorage.setItem(RECENT_TOKENS_KEY, JsonEncode(allRecentTokens))
 
         // Update state
         setRecentTokens(accountTokens)

package/src/widget/hooks/useSelectedFeeOption.tsx

@@ -0,0 +1,257 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+  useMemo,
+  type ReactNode,
+} from "react"
+import type { FeeOption } from "@0xsequence/trails-api"
+import { formatRawAmount, formatUsdAmountDisplay } from "../../tokenBalances.js"
+import { logger } from "../../index.js"
+import { isNativeToken, normalizeAddress } from "../../utils.js"
+import { isAddressEqual } from "viem"
+
+const createBalanceKey = (
+  chainId?: number,
+  tokenAddress?: string | null,
+): string =>
+  `${chainId ?? "unknown"}:${
+    !tokenAddress || isNativeToken(tokenAddress)
+      ? "native"
+      : normalizeAddress(tokenAddress)
+  }`
+
+const safeFormatAmountWithSymbol = (option: FeeOption): string => {
+  const tokenDecimals =
+    typeof option.tokenDecimals === "number" &&
+    option.tokenDecimals > 0 &&
+    option.tokenDecimals <= 18
+      ? option.tokenDecimals
+      : isNativeToken(option.tokenAddress)
+        ? 18
+        : undefined
+
+  if (tokenDecimals === undefined) {
+    logger.console.warn("[trails-sdk] [FEE-OPTIONS] Missing token decimals", {
+      tokenAddress: option.tokenAddress,
+      tokenSymbol: option.tokenSymbol,
+    })
+    return option.tokenSymbol ? `-- ${option.tokenSymbol}` : "--"
+  }
+
+  try {
+    const formattedAmount = formatRawAmount(option.amount, tokenDecimals)
+    return option.tokenSymbol
+      ? `${formattedAmount} ${option.tokenSymbol}`
+      : formattedAmount
+  } catch (error) {
+    logger.console.warn(
+      "[trails-sdk] [FEE-OPTIONS] Failed to format fee option amount",
+      {
+        option,
+        tokenDecimals,
+        error,
+      },
+    )
+    return option.tokenSymbol ? `-- ${option.tokenSymbol}` : "--"
+  }
+}
+
+export type ProcessedFeeOption = FeeOption & {
+  notEnoughBalance?: boolean
+  tokenImageUrl?: string
+  chainId?: number
+  amountFormatted: string
+  amountUsdDisplay?: string
+}
+
+// Token type with balance information
+export interface TokenWithBalance {
+  chainId: number
+  contractAddress?: string
+  balance?: string
+  imageUrl?: string
+}
+
+interface SelectedFeeOptionContextType {
+  selectedFeeOption: FeeOption | null
+  setSelectedFeeOption: (token: FeeOption | null) => void
+  clearSelectedFeeOption: () => void
+  processedFeeOptions: ProcessedFeeOption[]
+  setFeeOptions: (
+    feeOptions: ReadonlyArray<FeeOption> | null | undefined,
+    originChainId: number | undefined,
+    availableTokens: TokenWithBalance[],
+  ) => void
+}
+
+const SelectedFeeOptionContext = createContext<
+  SelectedFeeOptionContextType | undefined
+>(undefined)
+
+interface SelectedFeeOptionProviderProps {
+  children: ReactNode
+  initialToken?: FeeOption | null
+}
+
+export const SelectedFeeOptionProvider: React.FC<
+  SelectedFeeOptionProviderProps
+> = ({ children, initialToken = null }) => {
+  const [selectedFeeOption, setSelectedFeeOptionInternalRaw] =
+    useState<FeeOption | null>(initialToken)
+  const [hasUserSelectedFeeOption, setHasUserSelectedFeeOption] =
+    useState(false)
+  const [feeOptions, setFeeOptionsInternal] = useState<FeeOption[]>([])
+  const [originTokenChainId, setOriginTokenChainId] = useState<
+    number | undefined
+  >(undefined)
+  const [availableTokens, setAvailableTokens] = useState<TokenWithBalance[]>([])
+
+  const tokenBalanceLookup = useMemo(() => {
+    const map = new Map<string, TokenWithBalance>()
+    for (const token of availableTokens) {
+      map.set(
+        createBalanceKey(token.chainId, token.contractAddress ?? null),
+        token,
+      )
+    }
+    return map
+  }, [availableTokens])
+
+  // Wrapper to track when user makes an explicit selection
+  const setSelectedFeeOption = useCallback((token: FeeOption | null) => {
+    setSelectedFeeOptionInternalRaw(token)
+    setHasUserSelectedFeeOption(true)
+  }, [])
+
+  const clearSelectedFeeOption = useCallback(() => {
+    setSelectedFeeOptionInternalRaw(null)
+    setHasUserSelectedFeeOption(false)
+  }, [])
+
+  // Process raw fee options with balance checks
+  const processedFeeOptions: ProcessedFeeOption[] = useMemo(() => {
+    if (!feeOptions.length) {
+      return []
+    }
+
+    return feeOptions
+      .map((option) => {
+        const balanceRecord =
+          originTokenChainId !== undefined
+            ? tokenBalanceLookup.get(
+                createBalanceKey(originTokenChainId, option.tokenAddress),
+              )
+            : undefined
+
+        const hasBalanceInfo =
+          Boolean(balanceRecord?.balance) && originTokenChainId !== undefined
+        const userBalance = balanceRecord?.balance ?? "0"
+        const requiredAmount = option.amount ? option.amount.toString() : "0"
+        const notEnoughBalance = hasBalanceInfo
+          ? BigInt(userBalance) < BigInt(requiredAmount)
+          : true
+        const amountFormatted = safeFormatAmountWithSymbol(option)
+
+        return {
+          ...option,
+          notEnoughBalance,
+          tokenImageUrl: balanceRecord?.imageUrl,
+          chainId: balanceRecord?.chainId ?? originTokenChainId,
+          amountUsdDisplay: formatUsdAmountDisplay(option.amountUsd ?? 0),
+          amountFormatted,
+        }
+      })
+      .sort(
+        (a, b) => Number(!!a.notEnoughBalance) - Number(!!b.notEnoughBalance),
+      )
+  }, [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
+  useEffect(() => {
+    if (processedFeeOptions.length === 0) {
+      if (selectedFeeOption !== null) {
+        setSelectedFeeOptionInternalRaw(null)
+        setHasUserSelectedFeeOption(false)
+      }
+      return
+    }
+
+    const selectionStillValid = selectedFeeOption
+      ? processedFeeOptions.some((option) =>
+          isAddressEqual(
+            option.tokenAddress as `0x${string}`,
+            selectedFeeOption.tokenAddress as `0x${string}`,
+          ),
+        )
+      : false
+
+    if (selectedFeeOption && !selectionStillValid) {
+      setSelectedFeeOptionInternalRaw(null)
+      setHasUserSelectedFeeOption(false)
+      return
+    }
+
+    if (!hasUserSelectedFeeOption && !selectedFeeOption) {
+      const fallbackOption =
+        processedFeeOptions.find((option) => !option.notEnoughBalance) ??
+        processedFeeOptions[0] ??
+        null
+
+      // Only fallback if the fallback option is erc20
+      if (fallbackOption && !isNativeToken(fallbackOption.tokenAddress)) {
+        setSelectedFeeOptionInternalRaw(fallbackOption)
+      }
+    }
+  }, [processedFeeOptions, selectedFeeOption, hasUserSelectedFeeOption])
+
+  // Function to set raw fee options and process them
+  const setFeeOptions = useCallback(
+    (
+      feeOptions: ReadonlyArray<FeeOption> | null | undefined,
+      originChainId: number | undefined,
+      tokens: TokenWithBalance[],
+    ) => {
+      const normalized = feeOptions ? [...feeOptions] : []
+
+      setFeeOptionsInternal(normalized)
+      setOriginTokenChainId(originChainId)
+      setAvailableTokens(tokens)
+
+      if (normalized.length === 0) {
+        setSelectedFeeOptionInternalRaw(null)
+        setHasUserSelectedFeeOption(false)
+      }
+    },
+    [],
+  )
+
+  const value: SelectedFeeOptionContextType = {
+    selectedFeeOption,
+    setSelectedFeeOption,
+    clearSelectedFeeOption,
+    processedFeeOptions,
+    setFeeOptions,
+  }
+
+  return (
+    <SelectedFeeOptionContext.Provider value={value}>
+      {children}
+    </SelectedFeeOptionContext.Provider>
+  )
+}
+
+export const useSelectedFeeOption = (): SelectedFeeOptionContextType => {
+  const context = useContext(SelectedFeeOptionContext)
+
+  if (context === undefined) {
+    throw new Error(
+      "useSelectedFeeOption must be used within a SelectedFeeOptionProvider",
+    )
+  }
+
+  return context
+}