0xtrails 0.1.2 → 0.1.3

package/src/widget/hooks/useCheckout.ts

@@ -1,4 +1,5 @@
 import { useCallback, useRef } from "react"
+import { getSessionId } from "../../analytics.js"
 
 export type CheckoutCallbacks = {
   onCheckoutStart?: (data: { sessionId: string }) => void
@@ -38,10 +39,10 @@ export function useCheckout({
   onCheckoutError,
   onCheckoutStatusUpdate,
 }: UseCheckoutProps): UseCheckoutReturn {
-  const sessionIdRef = useRef<string>(Date.now().toString())
+  const sessionIdRef = useRef<string>(getSessionId())
 
   const startCheckout = useCallback(() => {
-    sessionIdRef.current = Date.now().toString()
+    sessionIdRef.current = getSessionId()
   }, [])
 
   const triggerCheckoutStart = useCallback(() => {

package/src/widget/hooks/useSendForm.ts

@@ -9,8 +9,6 @@ import {
   type WalletClient,
   zeroAddress,
 } from "viem"
-import { mainnet } from "viem/chains"
-import { useEnsAddress } from "wagmi"
 import { useAPIClient } from "../../apiClient.js"
 import { getChainInfo, useSupportedChains } from "../../chains.js"
 import { getFullErrorMessage } from "../../error.js"
@@ -37,6 +35,8 @@ import {
   useTokenInfo,
 } from "../../tokens.js"
 import type { CheckoutOnHandlers } from "./useCheckout.js"
+import { useResolveEnsAddress } from "../../ens.js"
+import * as chains from "viem/chains"
 
 export interface Token {
   id: number
@@ -100,6 +100,7 @@ export type UseSendProps = {
   toChainId?: number
   toToken?: string
   toCalldata?: string
+  refundAddress?: string
   walletClient: WalletClient
   onTransactionStateChange: (transactionStates: TransactionState[]) => void
   onError: (error: Error | string | null) => void
@@ -109,12 +110,12 @@ export type UseSendProps = {
   onSend: (amount: string, recipient: string) => void
   onConfirm: () => void
   onComplete: (result: OnCompleteProps) => void
-  selectedToken: Token
+  selectedToken?: Token
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   tradeType?: TradeType
   quoteProvider?: string
-  fundMethod?: string | null
-  mode?: "pay" | "fund" | "earn"
+  fundMethod?: string
+  mode?: "pay" | "fund" | "earn" | "swap"
   onNavigateToMeshConnect?: (
     props: {
       toTokenSymbol: string
@@ -161,7 +162,7 @@ export type UseSendReturn = {
   isValidRecipient: boolean
   destTokenPrices: TokenPrice[] | null
   sourceTokenPrices: TokenPrice[] | null
-  selectedToken: Token
+  selectedToken?: Token
   selectedFeeToken: TokenInfo | null
   setIsChainDropdownOpen: (isOpen: boolean) => void
   setIsTokenDropdownOpen: (isOpen: boolean) => void
@@ -179,6 +180,7 @@ export function useSendForm({
   toChainId, // Custom specified destination chain id
   toToken, // Custom specified destination token address or symbol
   toCalldata, // Custom specified destination calldata
+  refundAddress, // Custom specified refund address
   walletClient,
   onTransactionStateChange,
   onError,
@@ -197,6 +199,19 @@ export function useSendForm({
   onNavigateToMeshConnect,
   checkoutOnHandlers,
 }: UseSendProps): UseSendReturn {
+  // Auto-set quoteProvider to "lifi" if either from or to chain is etherlink
+  const effectiveQuoteProvider = useMemo(() => {
+    if (!quoteProvider || quoteProvider === "auto") {
+      if (
+        selectedToken?.chainId === chains.etherlink.id ||
+        toChainId === chains.etherlink.id
+      ) {
+        return "lifi"
+      }
+    }
+    return quoteProvider
+  }, [quoteProvider, selectedToken?.chainId, toChainId])
+
   const [amount, setAmount] = useState(
     tradeType === TradeType.EXACT_INPUT ? "" : (toAmount ?? ""),
   )
@@ -204,16 +219,10 @@ export function useSendForm({
   const [recipient, setRecipient] = useState(toRecipient ?? "")
   const [error, setError] = useState<string | null>(null)
   const { supportedChains } = useSupportedChains()
-  const { data: ensAddress } = useEnsAddress({
-    name: recipientInput?.endsWith(".eth") ? recipientInput : undefined,
-    chainId: mainnet.id,
-    query: {
-      enabled: !!recipientInput && recipientInput.endsWith(".eth"),
-    },
+  const { ensAddress } = useResolveEnsAddress({
+    textInput: recipientInput,
   })
 
-  console.log("GENERATED CALLLDATA", toCalldata)
-
   useEffect(() => {
     if (ensAddress) {
       setRecipient(ensAddress)
@@ -287,13 +296,17 @@ export function useSendForm({
   }, [errorCustomToken, isCustomToken, isLoadingCustomToken])
 
   const defaultDestToken = useMemo(() => {
+    if (mode === "swap") {
+      return null
+    }
+
     if (selectedDestinationChain) {
       return supportedTokens.find(
         (token) => token.chainId === selectedDestinationChain.id,
       )
     }
     return supportedTokens?.[0] as TokenInfo
-  }, [supportedTokens, selectedDestinationChain])
+  }, [supportedTokens, selectedDestinationChain, mode])
 
   const [isChainDropdownOpen, setIsChainDropdownOpen] = useState(false)
   const [isTokenDropdownOpen, setIsTokenDropdownOpen] = useState(false)
@@ -366,7 +379,7 @@ export function useSendForm({
 
   // Update selectedDestToken when toToken prop changes
   useEffect(() => {
-    if (toToken && !isCustomToken) {
+    if (toToken && !isCustomToken && selectedDestinationChain?.id) {
       const isToTokenAddress = isAddress(toToken)
       const newToken = supportedTokens.find(
         (token) =>
@@ -385,7 +398,7 @@ export function useSendForm({
     toToken,
     supportedTokens,
     toChainId,
-    selectedDestinationChain.id,
+    selectedDestinationChain?.id,
     isCustomToken,
   ])
 
@@ -406,7 +419,7 @@ export function useSendForm({
     setRecipient(toRecipient ?? "")
   }, [toRecipient])
 
-  const chainInfo = getChainInfo(selectedToken.chainId)
+  const chainInfo = getChainInfo(selectedToken?.chainId)
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [isWaitingForWalletConfirm, setIsWaitingForWalletConfirm] =
     useState(false)
@@ -422,11 +435,13 @@ export function useSendForm({
     [onTransactionStateChange],
   )
 
-  const balanceFormatted = formatRawAmount(
-    selectedToken.balance,
-    selectedToken.contractInfo?.decimals,
-  )
-  const balanceUsdDisplay = selectedToken.balanceUsdFormatted ?? ""
+  const balanceFormatted = selectedToken
+    ? formatRawAmount(
+        selectedToken.balance,
+        selectedToken.contractInfo?.decimals,
+      )
+    : "0"
+  const balanceUsdDisplay = selectedToken?.balanceUsdFormatted ?? ""
   const isValidRecipient = Boolean(recipient && isAddress(recipient))
 
   // Calculate USD value based on trade type
@@ -460,7 +475,7 @@ export function useSendForm({
 
   // Calculate raw amount (in wei/smallest unit)
   const amountRaw = useMemo(() => {
-    if (!amount) {
+    if (!amount || !selectedToken?.contractInfo?.decimals) {
       return "0"
     }
 
@@ -472,6 +487,12 @@ export function useSendForm({
         : selectedDestToken?.decimals
 
     if (!decimals) {
+      console.warn("[trails-sdk] Missing token decimals for quote", {
+        decimals,
+        selectedToken,
+        selectedDestToken,
+        tradeType,
+      })
       return "0"
     }
 
@@ -482,8 +503,10 @@ export function useSendForm({
     }
   }, [
     amount,
+    selectedDestToken,
+    selectedToken,
     selectedDestToken?.decimals,
-    selectedToken.contractInfo?.decimals,
+    selectedToken?.contractInfo?.decimals,
     tradeType,
   ])
 
@@ -498,7 +521,8 @@ export function useSendForm({
       !selectedDestinationChain ||
       amount === "0" ||
       !amountRaw ||
-      amountRaw === "0"
+      amountRaw === "0" ||
+      !selectedToken
     ) {
       setPrepareSendResult(null)
       return
@@ -609,6 +633,7 @@ export function useSendForm({
         originRelayer,
         destinationRelayer,
         destinationCalldata: toCalldata,
+        refundAddress,
         dryMode: isDryMode,
         onTransactionStateChange: handleTransactionStateChange,
         sourceTokenPriceUsd,
@@ -621,7 +646,8 @@ export function useSendForm({
           )?.url ?? undefined,
         gasless,
         originNativeTokenPriceUsd: nativeTokenPriceUsd,
-        quoteProvider,
+        quoteProvider: effectiveQuoteProvider,
+        mode,
         fundMethod,
         checkoutOnHandlers,
       }
@@ -653,6 +679,7 @@ export function useSendForm({
     selectedToken?.balance,
     selectedToken?.tokenPriceUsd,
     toCalldata,
+    refundAddress,
     paymasterUrls,
     gasless,
     handleTransactionStateChange,
@@ -662,10 +689,11 @@ export function useSendForm({
     selectedDestToken,
     selectedDestinationChain,
     selectedToken,
-    quoteProvider,
+    effectiveQuoteProvider,
     fundMethod,
     amountRaw,
     checkoutOnHandlers,
+    mode,
   ])
 
   // Auto-fetch quotes when inputs change (debounced)
@@ -865,10 +893,12 @@ export function useSendForm({
 
   // Get button text based on recipient and calldata
   const buttonText = useMemo(() => {
+    if (!selectedToken) return "Select a token"
+    if (!amount) return "Enter an amount"
+    if (!selectedDestToken?.symbol) return "Select a token"
     if (isWaitingForWalletConfirm) return "Waiting for wallet..."
     if (isSubmitting) return "Processing..."
-    if (!amount) return "Enter amount"
-    if (!isValidRecipient) return "Enter recipient"
+    if (!isValidRecipient) return "Enter a recipient"
     if (isLoadingQuote) return "Getting quote..."
     if (!prepareSendResult) return "No quote available"
 
@@ -886,11 +916,15 @@ export function useSendForm({
     )
 
     try {
-      const isSameChain = selectedToken.chainId === selectedDestinationChain.id
+      const isSameChain = selectedToken.chainId === selectedDestinationChain?.id
       const isSameToken = selectedToken.symbol === selectedDestToken.symbol
       const checksummedRecipient = getAddress(recipient)
       const checksummedAccount = getAddress(account.address)
 
+      if (mode === "swap") {
+        return `Swap ${amountDisplay} ${tokenSymbol}`
+      }
+
       if (fundMethod === "exchange") {
         return `Continue to Exchange`
       }
@@ -936,7 +970,7 @@ export function useSendForm({
     selectedToken,
     tradeType,
     prepareSendResult?.quote?.originAmountFormatted,
-    selectedDestinationChain.id,
+    selectedDestinationChain?.id,
     mode,
     fundMethod,
   ])

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"
@@ -17,6 +16,7 @@ import {
   useTokenBalances,
 } from "../../tokenBalances.js"
 import { getFormatttedTokenName, getSupportedTokens } 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,30 @@ 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 [supportedTokens, setSupportedTokens] = 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
+  // 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,13 +114,18 @@ export function useTokenList({
   const showContinueButton = false
   const { supportedChains: supportedToChains } = useSupportedChains()
 
-  // Fetch all supported tokens when fundMethod is "qr-code" or "exchange"
+  // Fetch all supported tokens when fundMethod is "qr-code" or "exchange" or when allSupportedTokens is true
   useEffect(() => {
-    if (fundMethod === "qr-code" || fundMethod === "exchange") {
+    if (
+      fundMethod === "qr-code" ||
+      fundMethod === "exchange" ||
+      allSupportedTokens
+    ) {
       setIsLoadingSupportedTokens(true)
       getSupportedTokens()
         .then((tokens) => {
-          setAllSupportedTokens(tokens)
+          // Store supported tokens for use in filteredTokensFormatted
+          setSupportedTokens(tokens)
         })
         .catch((error) => {
           console.error("[trails-sdk] Failed to fetch supported tokens:", error)
@@ -126,17 +134,17 @@ export function useTokenList({
           setIsLoadingSupportedTokens(false)
         })
     }
-  }, [fundMethod])
+  }, [fundMethod, allSupportedTokens])
 
   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) => {
         const symbol = token.symbol.toUpperCase()
         return ["ETH", "POL", "USDC", "USDT", "DAI", "BAT", "WETH"].includes(
           symbol,
@@ -199,16 +207,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 +361,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 (