0xtrails 0.2.6 → 0.4.0

package/src/widget/components/Swap.tsx

@@ -24,7 +24,6 @@ interface SwapProps {
   onError: (error: Error | string | null) => void
   onWaitingForWalletConfirm: (props: PrepareSendQuote) => void
   paymasterUrls?: Array<{ chainId: number; url: string }>
-  gasless?: boolean
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
   fundMethod?: string

package/src/widget/components/TransferPendingVertical.tsx

@@ -477,15 +477,19 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
       )}
 
       {/* Details Section */}
-      <div
-        className={`w-full max-w-sm transition-all duration-500 ease-out delay-200 ${
-          showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
-        }`}
-      >
-        <div className="mt-4">
-          <QuoteDetails quote={quote} showContent={true} compact={true} />
+      {quote && (
+        <div
+          className={`w-full max-w-sm transition-all duration-500 ease-out delay-200 ${
+            showContent
+              ? "opacity-100 translate-y-0"
+              : "opacity-0 translate-y-4"
+          }`}
+        >
+          <div className="mt-4">
+            <QuoteDetails quote={quote} showContent={true} compact={true} />
+          </div>
         </div>
-      </div>
+      )}
 
       {/* Timeout Warning */}
       {showTimeoutWarning && !showContinueButton && (

package/src/widget/components/WaasFeeOptions.tsx

@@ -91,7 +91,6 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
 
   // Initialize with first option when fee options become available
   useEffect(() => {
-    setIsError?.(false)
     if (pendingFeeOptionConfirmation) {
       console.log(
         "[trails-sdk] Pending fee options: ",
@@ -119,7 +118,7 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
         }
       }
     }
-  }, [pendingFeeOptionConfirmation, onFeeOptionsLoaded, setIsError])
+  }, [pendingFeeOptionConfirmation, onFeeOptionsLoaded])
 
   // Handle fee option selection and confirmation
   const handleConfirmFee = async (tokenAddress: string | null) => {
@@ -154,7 +153,7 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
       await navigator.clipboard.writeText(address)
       setCopiedAddress(address)
       setTimeout(() => setCopiedAddress(null), 2000)
-    } catch (error) {
+    } catch (_error) {
       try {
         const textArea = document.createElement("textarea")
         textArea.value = address
@@ -204,10 +203,27 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
   if (!hasTokenForFee) {
     return (
       <div className="space-y-4 py-6">
-        <div className="text-center space-y-1">
-          <p className="text-xs trails-text-muted">
-            Fund your wallet with one of the following tokens
-          </p>
+        {/* Warning Message */}
+        <div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+          <div className="flex items-start space-x-2">
+            <svg
+              className="w-5 h-5 text-red-600 dark:text-red-400 shrink-0 mt-0.5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+              />
+            </svg>
+            <p className="text-sm text-red-800 dark:text-red-200 font-medium">
+              No available tokens for fees, please transfer any of these tokens
+              to your wallet.
+            </p>
+          </div>
         </div>
 
         <div className="flex flex-col space-y-2">

package/src/widget/components/WalletConfirmation.tsx

@@ -83,7 +83,7 @@ export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
           <div
             className={`mx-auto flex items-center justify-center transition-all duration-500 ease-out relative mb-4 ${showContent ? "transform -translate-y-8" : ""}`}
           >
-            {feeOptionsError === true ? (
+            {feeOptionsError ? (
               <ErrorAnimationIcon />
             ) : retryEnabled ? (
               <div className={`h-24 w-24`} />

package/src/widget/hooks/useAmountUsd.ts

@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query"
 import { useTokenPrice } from "../../prices.js"
 import { formatUsdAmountDisplay } from "../../tokenBalances.js"
 import { useTokenAddress } from "../../tokens.js"
-import { useAPIClient } from "../../apiClient.js"
+import { useTrailsClient } from "../../trailsClient.js"
 
 type UseAmountUsdProps = {
   amount?: string | null
@@ -14,7 +14,7 @@ export function useAmountUsd({ amount, token, chainId }: UseAmountUsdProps): {
   amountUsd: number | null
   amountUsdFormatted: string
 } {
-  const apiClient = useAPIClient()
+  const trailsClient = useTrailsClient()
   const isTokenAddress = token?.startsWith("0x")
   const resolvedTokenAddress = useTokenAddress({
     chainId,
@@ -25,26 +25,26 @@ export function useAmountUsd({ amount, token, chainId }: UseAmountUsdProps): {
   const { tokenPrice } = useTokenPrice(
     token && tokenAddress && chainId
       ? {
-          tokenId: token,
-          contractAddress: tokenAddress,
+          tokenSymbol: token,
+          tokenAddress: tokenAddress,
           chainId: Number(chainId),
         }
       : null,
-    apiClient,
+    trailsClient,
   )
 
   const { data: amountUsd } = useQuery({
-    queryKey: ["amountUsd", amount, tokenPrice?.price?.value],
+    queryKey: ["amountUsd", amount, tokenPrice?.priceUsd],
     queryFn: () => {
-      if (!amount || !tokenPrice?.price?.value) {
+      if (!amount || !tokenPrice?.priceUsd) {
         return null
       }
 
-      const tokenPriceValue = tokenPrice.price.value
+      const tokenPriceValue = tokenPrice.priceUsd
       const value = Number(amount) * tokenPriceValue
       return value
     },
-    enabled: !!amount && !!tokenPrice?.price?.value,
+    enabled: !!amount && !!tokenPrice?.priceUsd,
   })
 
   return {

package/src/widget/hooks/useCheckout.ts

@@ -2,13 +2,25 @@ import { useCallback, useRef } from "react"
 import { getSessionId } from "../../analytics.js"
 import { logger } from "../../logger.js"
 import { updatePersistentToast } from "../../toast.js"
-import { getPrettifiedErrorMessage } from "../../error.js"
+import {
+  getPrettifiedErrorMessage,
+  getIsUserRejectionError,
+  UserRejectionError,
+  getErrorString,
+} from "../../error.js"
+import { invalidateTokenBalancesCache } from "../../tokenBalances.js"
 
 export type CheckoutCallbacks = {
   onCheckoutStart?: (data: { sessionId: string }) => void
   onCheckoutQuote?: (data: { sessionId: string; quote: any }) => void
+  onCheckoutSignatureRequest?: (data: { sessionId: string }) => void
+  onCheckoutSignatureConfirmed?: (data: { sessionId: string }) => void
+  onCheckoutSignatureRejected?: (data: {
+    sessionId: string
+    error: unknown
+  }) => void
   onCheckoutComplete?: (data: { sessionId: string }) => void
-  onCheckoutError?: (data: { sessionId: string; error: string }) => void
+  onCheckoutError?: (data: { sessionId: string; error: unknown }) => void
   onCheckoutStatusUpdate?: (data: {
     sessionId: string
     transactionStates: any[]
@@ -18,8 +30,14 @@ export type CheckoutCallbacks = {
 export type CheckoutOnHandlers = {
   triggerCheckoutStart: () => void
   triggerCheckoutQuote: (quote: any) => void
-  triggerCheckoutComplete: (txStatus: "success" | "fail") => void
-  triggerCheckoutError: (error: string) => void
+  triggerCheckoutSignatureRequest: () => void
+  triggerCheckoutSignatureConfirmed: () => void
+  triggerCheckoutSignatureRejected: (error: unknown) => void
+  triggerCheckoutComplete: (
+    txStatus: "success" | "fail",
+    accountAddress?: string,
+  ) => void
+  triggerCheckoutError: (error: unknown) => void
   triggerCheckoutStatusUpdate: (transactionStates: any[]) => void
 }
 
@@ -38,6 +56,9 @@ export type UseCheckoutReturn = {
 export function useCheckout({
   onCheckoutStart,
   onCheckoutQuote,
+  onCheckoutSignatureRequest,
+  onCheckoutSignatureConfirmed,
+  onCheckoutSignatureRejected,
   onCheckoutComplete,
   onCheckoutError,
   onCheckoutStatusUpdate,
@@ -82,8 +103,57 @@ export function useCheckout({
     [onCheckoutQuote],
   )
 
+  const triggerCheckoutSignatureRequest = useCallback(() => {
+    if (onCheckoutSignatureRequest && sessionIdRef.current) {
+      try {
+        onCheckoutSignatureRequest({
+          sessionId: sessionIdRef.current,
+        })
+      } catch (error) {
+        logger.console.error(
+          "[trails-sdk] Error calling onCheckoutSignatureRequest:",
+          error,
+        )
+      }
+    }
+  }, [onCheckoutSignatureRequest])
+
+  const triggerCheckoutSignatureConfirmed = useCallback(() => {
+    if (onCheckoutSignatureConfirmed && sessionIdRef.current) {
+      try {
+        onCheckoutSignatureConfirmed({
+          sessionId: sessionIdRef.current,
+        })
+      } catch (error) {
+        logger.console.error(
+          "[trails-sdk] Error calling onCheckoutSignatureConfirmed:",
+          error,
+        )
+      }
+    }
+  }, [onCheckoutSignatureConfirmed])
+
+  const triggerCheckoutSignatureRejected = useCallback(
+    (error: unknown) => {
+      if (onCheckoutSignatureRejected && sessionIdRef.current) {
+        try {
+          onCheckoutSignatureRejected({
+            sessionId: sessionIdRef.current,
+            error,
+          })
+        } catch (callbackError) {
+          logger.console.error(
+            "[trails-sdk] Error calling onCheckoutSignatureRejected:",
+            callbackError,
+          )
+        }
+      }
+    },
+    [onCheckoutSignatureRejected],
+  )
+
   const triggerCheckoutComplete = useCallback(
-    (txStatus: "success" | "fail") => {
+    (txStatus: "success" | "fail", accountAddress?: string) => {
       if (onCheckoutComplete && sessionIdRef.current) {
         try {
           onCheckoutComplete({
@@ -98,6 +168,9 @@ export function useCheckout({
       }
 
       if (txStatus === "success") {
+        // Invalidate token balances cache to trigger a refresh
+        invalidateTokenBalancesCache(accountAddress)
+
         updatePersistentToast(
           "Transaction Complete",
           "Your transaction has been successfully processed",
@@ -116,12 +189,24 @@ export function useCheckout({
   )
 
   const triggerCheckoutError = useCallback(
-    (error: string) => {
+    (error: unknown) => {
+      // Wrap user rejection errors in custom UserRejectionError class
+      let processedError = error
+      const isUserRejection = getIsUserRejectionError(error)
+
+      if (isUserRejection) {
+        const errorMessage = getErrorString(error)
+        processedError = new UserRejectionError(errorMessage)
+
+        // Trigger signature rejected callback for user rejections
+        triggerCheckoutSignatureRejected(processedError)
+      }
+
       if (onCheckoutError && sessionIdRef.current) {
         try {
           onCheckoutError({
             sessionId: sessionIdRef.current,
-            error,
+            error: processedError,
           })
         } catch (error) {
           logger.console.error(
@@ -134,13 +219,13 @@ export function useCheckout({
       updatePersistentToast(
         "Transaction Failed",
         getPrettifiedErrorMessage(
-          error,
+          processedError,
           "An error occurred while processing your transaction",
         ),
         "error",
       )
     },
-    [onCheckoutError],
+    [onCheckoutError, triggerCheckoutSignatureRejected],
   )
 
   const triggerCheckoutStatusUpdate = useCallback(
@@ -168,6 +253,9 @@ export function useCheckout({
     checkoutOnHandlers: {
       triggerCheckoutStart,
       triggerCheckoutQuote,
+      triggerCheckoutSignatureRequest,
+      triggerCheckoutSignatureConfirmed,
+      triggerCheckoutSignatureRejected,
       triggerCheckoutComplete,
       triggerCheckoutError,
       triggerCheckoutStatusUpdate,

package/src/widget/hooks/useDefaultTokenSelection.tsx

@@ -462,28 +462,34 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
 
       const decimals = destToken?.decimals
       if (!decimals) {
-        throw new Error("Decimals not found")
-      }
-
-      destinationToken = destToken
-        ? {
-            id: destToken.chainId,
-            name: destToken.name,
-            symbol: destToken.symbol,
-            balance: "0", // Destination token doesn't have balance yet
-            imageUrl: destToken.imageUrl || "",
-            chainId: destToken.chainId,
-            contractAddress: destToken.contractAddress || zeroAddress,
-            balanceUsdFormatted: "0",
-            tokenPriceUsd: 0,
-            decimals, // Top-level decimals
-            contractInfo: {
-              decimals,
-              symbol: destToken.symbol,
+        logger.console.warn(
+          "[trails-sdk] Missing decimals for destination token, skipping:",
+          {
+            token: destToken,
+          },
+        )
+        destinationToken = null
+      } else {
+        destinationToken = destToken
+          ? {
+              id: destToken.chainId,
               name: destToken.name,
-            },
-          }
-        : null
+              symbol: destToken.symbol,
+              balance: "0", // Destination token doesn't have balance yet
+              imageUrl: destToken.imageUrl || "",
+              chainId: destToken.chainId,
+              contractAddress: destToken.contractAddress || zeroAddress,
+              balanceUsdFormatted: "0",
+              tokenPriceUsd: 0,
+              decimals, // Top-level decimals
+              contractInfo: {
+                decimals,
+                symbol: destToken.symbol,
+                name: destToken.name,
+              },
+            }
+          : null
+      }
     }
 
     logger.console.log("[trails-sdk] Default token selection:", {

package/src/widget/hooks/useQuote.ts

@@ -2,26 +2,25 @@ import { useQuery } from "@tanstack/react-query"
 import { useRef } from "react"
 import type { TransactionReceipt } from "viem"
 import { zeroAddress } from "viem"
-import { useAPIClient } from "../../apiClient.js"
 import { useIndexerGatewayClient } from "../../indexerClient.js"
 import { getTokenBalancesWithPrices } from "../../tokenBalances.js"
 import { logger } from "../../logger.js"
-import { getSequenceEnv } from "../../config.js"
 import { useSupportedTokens } from "../../tokens.js"
 import { useTrailsClient } from "../../trailsClient.js"
 import { getExplorerUrl } from "../../explorer.js"
-import { getFullErrorMessage } from "../../error.js"
+import { getFullErrorMessage, getPrettifiedErrorMessage } from "../../error.js"
 import { prepareSend } from "../../prepareSend.js"
 import { abortControllerRegistry } from "../../abortController.js"
-import { useRelayers } from "../../relayer.js"
 import { TradeType } from "../../prepareSend.js"
+import { getChainInfo } from "../../chains.js"
+import type { MetaTxnReceipt } 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 { MetaTxnReceipt } from "../../relayer.js"
-import type { RelayerEnv } from "../../relayer.js"
 import type { SequenceEnv } from "../../config.js"
+import { getTokenPrice } from "../../prices.js"
+import { useCommitIntent, useExecuteIntent } from "../../mutations.js"
 
 export type UseQuoteProps = {
   walletClient?: any // TODO: fix this, has to do with viem/wagmi versions
@@ -36,7 +35,6 @@ export type UseQuoteProps = {
   slippageTolerance?: string | number | null
   onStatusUpdate?: ((transactionStates: TransactionState[]) => void) | null
   quoteProvider?: string | null
-  gasless?: boolean
   paymasterUrl?: string
   selectedFeeToken?: {
     tokenAddress: string
@@ -95,10 +93,12 @@ export type UseQuoteReturn = {
   swap: (() => Promise<SwapReturn | null>) | null
   isLoadingQuote: boolean
   quoteError: unknown
+  quoteErrorPrettified: string
   refetchQuote: () => void
   abort: () => void
 }
 
+// TODO: consolidate useSendForm, prepareSend, and useQuote hooks into a single hook
 export function useQuote({
   walletClient,
   fromTokenAddress,
@@ -112,14 +112,12 @@ export function useQuote({
   slippageTolerance,
   onStatusUpdate,
   quoteProvider,
-  gasless,
   paymasterUrl,
   selectedFeeToken,
-  relayerEnv,
   nodeGatewayEnv,
   abortSignal: externalAbortSignal,
 }: Partial<
-  UseQuoteProps & { relayerEnv?: RelayerEnv; nodeGatewayEnv?: SequenceEnv }
+  UseQuoteProps & { nodeGatewayEnv?: SequenceEnv }
 > = {}): UseQuoteReturn {
   // Set node gateway environment override for this quote session
   if (nodeGatewayEnv) {
@@ -149,18 +147,18 @@ export function useQuote({
       })()
     : abortControllerRef.current.signal
 
-  const apiClient = useAPIClient()
   const trailsClient = useTrailsClient()
-  const { getRelayer } = useRelayers({
-    env: relayerEnv || (getSequenceEnv() as RelayerEnv),
-  })
   const indexerGatewayClient = useIndexerGatewayClient()
 
   const { supportedTokens } = useSupportedTokens()
 
+  // Get mutation hooks for passing to prepareSend
+  const commitIntentMutation = useCommitIntent()
+  const executeIntentMutation = useExecuteIntent()
+
   const { data, isLoading, error, refetch } = useQuery({
     queryKey: [
-      "quote",
+      "prepareSend",
       fromTokenAddress,
       fromChainId,
       toTokenAddress,
@@ -184,7 +182,6 @@ export function useQuote({
 
         if (
           !walletClient ||
-          !apiClient ||
           !trailsClient ||
           !fromTokenAddress ||
           !toTokenAddress ||
@@ -198,11 +195,38 @@ export function useQuote({
         }
 
         // Get token balance using async method
-        const { balances } = await getTokenBalancesWithPrices({
-          account: walletClient.account!.address,
-          indexerGatewayClient,
-          apiClient,
-        })
+        let balances: any[] = []
+        try {
+          const result = await getTokenBalancesWithPrices({
+            account: walletClient.account!.address,
+            indexerGatewayClient,
+            trailsClient,
+          })
+          balances = result.balances
+        } catch (balanceError) {
+          const balanceErrorMessage = getFullErrorMessage(balanceError)
+          const isCorsError =
+            balanceErrorMessage.includes("Cross-Origin") ||
+            balanceErrorMessage.includes("CORS") ||
+            balanceErrorMessage.includes("Same Origin Policy")
+          const isNetworkError =
+            balanceErrorMessage.includes("fetch failed") ||
+            balanceErrorMessage.includes("network")
+
+          if (isCorsError || isNetworkError) {
+            logger.console.warn(
+              "[trails-sdk] [useQuote] Network or CORS error fetching balances, proceeding with quote using zero balance:",
+              {
+                error: balanceErrorMessage,
+                account: walletClient.account!.address,
+              },
+            )
+            // Continue with empty balances instead of crashing
+            balances = []
+          } else {
+            throw balanceError
+          }
+        }
 
         const originTokenBalance = balances.find(
           (b) =>
@@ -213,8 +237,6 @@ export function useQuote({
         )
 
         const originTokenBalanceAmount = originTokenBalance?.balance ?? "0"
-        const destinationRelayer = getRelayer(toChainId)
-        const originRelayer = getRelayer(fromChainId)
 
         // Note: Disable this check for now to allow fetching a quote even when the origin balance is zero
         // if (originTokenBalanceAmount === "0") {
@@ -223,6 +245,34 @@ export function useQuote({
 
         // logger.console.log("supportedTokens", supportedTokens)
 
+        // Get native token price for origin chain (for gas cost calculation)
+        let originNativeTokenPriceUsd = 0
+        try {
+          const originChain = getChainInfo(fromChainId)
+          const nativeTokenSymbol = originChain?.nativeCurrency?.symbol ?? ""
+          if (nativeTokenSymbol) {
+            const nativePrice = await getTokenPrice(trailsClient, {
+              tokenSymbol: nativeTokenSymbol,
+              tokenAddress: zeroAddress,
+              chainId: fromChainId,
+            })
+            originNativeTokenPriceUsd = nativePrice?.priceUsd ?? 0
+            logger.console.log(
+              "[trails-sdk] [useQuote] Origin native token price:",
+              {
+                chainId: fromChainId,
+                symbol: nativeTokenSymbol,
+                priceUsd: originNativeTokenPriceUsd,
+              },
+            )
+          }
+        } catch (error) {
+          logger.console.error(
+            "[trails-sdk] [useQuote] Error getting origin native token price:",
+            error,
+          )
+        }
+
         const originToken = supportedTokens?.find(
           (token) =>
             token.contractAddress?.toLowerCase() ===
@@ -275,10 +325,7 @@ export function useQuote({
           destinationTokenSymbol: destinationTokenSymbol,
           destinationCalldata: toCalldata as string,
           client: walletClient,
-          apiClient,
           trailsClient,
-          originRelayer,
-          destinationRelayer,
           sourceTokenDecimals,
           destinationTokenDecimals,
           fee: "0",
@@ -286,10 +333,12 @@ export function useQuote({
           onTransactionStateChange: onStatusUpdate ?? (() => {}),
           slippageTolerance: slippageTolerance?.toString(),
           quoteProvider: quoteProvider,
-          gasless: gasless ?? false,
           paymasterUrl: paymasterUrl,
           selectedFeeToken: selectedFeeToken ?? undefined,
           abortSignal: combinedAbortSignal,
+          originNativeTokenPriceUsd: originNativeTokenPriceUsd,
+          commitIntentFn: commitIntentMutation.mutateAsync,
+          executeIntentFn: executeIntentMutation.mutateAsync,
         }
 
         logger.console.log("[trails-sdk] options", options)
@@ -325,7 +374,7 @@ export function useQuote({
 
         const swap = async (): Promise<SwapReturn> => {
           const {
-            originUserTxReceipt,
+            depositUserTxnReceipt,
             destinationMetaTxnReceipt,
             totalCompletionSeconds,
           } = await send({
@@ -334,12 +383,12 @@ export function useQuote({
 
           return {
             originTransaction: {
-              transactionHash: originUserTxReceipt?.transactionHash,
+              transactionHash: depositUserTxnReceipt?.transactionHash,
               explorerUrl: getExplorerUrl({
-                txHash: originUserTxReceipt?.transactionHash as string,
+                txHash: depositUserTxnReceipt?.transactionHash as string,
                 chainId: fromChainId,
               }),
-              receipt: originUserTxReceipt,
+              receipt: depositUserTxnReceipt,
             },
             destinationTransaction: {
               transactionHash: destinationMetaTxnReceipt?.txnHash,
@@ -368,14 +417,17 @@ export function useQuote({
     // Prevent unnecessary refetching
     enabled: Boolean(
       walletClient &&
-        apiClient &&
+        trailsClient &&
         fromTokenAddress &&
         toTokenAddress &&
         swapAmount &&
         toRecipient &&
         fromChainId &&
         toChainId &&
-        indexerGatewayClient,
+        indexerGatewayClient &&
+        // !isLoadingTokens &&
+        supportedTokens &&
+        supportedTokens.length > 0,
     ),
     staleTime: 30 * 1000, // Consider data fresh for 30 seconds
     refetchOnWindowFocus: false, // Don't refetch when window regains focus
@@ -390,6 +442,7 @@ export function useQuote({
     swap: data?.swap || null,
     isLoadingQuote: isLoading,
     quoteError: error,
+    quoteErrorPrettified: getPrettifiedErrorMessage(error),
     refetchQuote: () => refetch(),
     abort: () => {
       logger.console.log("[trails-sdk] useQuote abort() called")