0xtrails 0.2.5 → 0.3.0

package/src/widget/components/WaasFeeOptions.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react"
 import { useWaasFeeOptions } from "@0xsequence/connect"
 import { TokenImage } from "./TokenImage.js"
-import { ChevronDown, ChevronUp } from "lucide-react"
+import { ChevronDown, ChevronUp, Copy } from "lucide-react"
 import { formatUnits } from "viem"
 
 // Define types based on the @0xsequence/connect documentation
@@ -29,12 +29,14 @@ interface WaasFeeOptionsProps {
   chainId?: number
   setIsFeeOptionConfirmed: (isFeeOptionConfirmed: boolean) => void
   onFeeOptionsLoaded?: () => void
+  setIsError?: (isError: boolean) => void
 }
 
 export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
   chainId,
   setIsFeeOptionConfirmed,
   onFeeOptionsLoaded,
+  setIsError,
 }) => {
   const [
     pendingFeeOptionConfirmation,
@@ -47,6 +49,7 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
   const [isExpanded, setIsExpanded] = useState(false)
   const [isProcessing, setIsProcessing] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
+  const [copiedAddress, setCopiedAddress] = useState<string | null>(null)
 
   // Debug logging
   useEffect(() => {
@@ -97,7 +100,10 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
       // Notify parent that fee options are loaded
       if (
         onFeeOptionsLoaded &&
-        pendingFeeOptionConfirmation.options?.length > 0
+        pendingFeeOptionConfirmation.options?.length > 0 &&
+        pendingFeeOptionConfirmation.options.find(
+          (option: any) => option.hasEnoughBalanceForFee,
+        )
       ) {
         onFeeOptionsLoaded()
       }
@@ -139,6 +145,30 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
     }
   }
 
+  // Handle copy address to clipboard
+  const handleCopyAddress = async (address: string, e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    try {
+      await navigator.clipboard.writeText(address)
+      setCopiedAddress(address)
+      setTimeout(() => setCopiedAddress(null), 2000)
+    } catch (_error) {
+      try {
+        const textArea = document.createElement("textarea")
+        textArea.value = address
+        document.body.appendChild(textArea)
+        textArea.select()
+        document.execCommand("copy")
+        document.body.removeChild(textArea)
+        setCopiedAddress(address)
+        setTimeout(() => setCopiedAddress(null), 2000)
+      } catch (fallbackError) {
+        console.error("Fallback copy failed:", fallbackError)
+      }
+    }
+  }
+
   // Don't render if no pending fee confirmation
   if (!pendingFeeOptionConfirmation) {
     return null
@@ -162,6 +192,111 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
     | FeeOptionExtended
     | undefined
 
+  const hasTokenForFee = pendingFeeOptionConfirmation.options.find(
+    (option: any) => option.hasEnoughBalanceForFee,
+  )
+
+  if (!hasTokenForFee) {
+    setIsError?.(true)
+  }
+
+  if (!hasTokenForFee) {
+    return (
+      <div className="space-y-4 py-6">
+        {/* 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">
+          {pendingFeeOptionConfirmation.options.map((option: any) => {
+            const contractAddress = option.token.contractAddress
+
+            return (
+              <div
+                key={option.token.symbol || contractAddress}
+                className="flex items-center space-x-3 p-3 trails-bg-secondary trails-border-radius-container border border-transparent"
+              >
+                <div className="flex items-center shrink-0">
+                  <TokenImage
+                    symbol={option.token.symbol}
+                    imageUrl={(option.token as any).logoURL}
+                    chainId={chainId}
+                    size={32}
+                  />
+                </div>
+                <div className="flex-1 min-w-0 flex flex-col items-start">
+                  <span className="text-sm font-bold trails-text-primary leading-tight">
+                    {option.token.symbol}
+                  </span>
+                  {contractAddress ? (
+                    <div className="flex items-center space-x-1.5 mt-0.5">
+                      <span className="text-xs trails-text-muted leading-tight">
+                        {contractAddress.slice(0, 4)}...
+                        {contractAddress.slice(-4)}
+                      </span>
+                      <button
+                        type="button"
+                        onClick={(e) => handleCopyAddress(contractAddress, e)}
+                        className="shrink-0 p-0.5 rounded transition-colors cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center justify-center"
+                        title={
+                          copiedAddress === contractAddress
+                            ? "Copied!"
+                            : "Copy address"
+                        }
+                      >
+                        {copiedAddress === contractAddress ? (
+                          <svg
+                            className="w-3 h-3 text-green-600 dark:text-green-400"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                            aria-label="Copied"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M5 13l4 4L19 7"
+                            />
+                          </svg>
+                        ) : (
+                          <Copy className="w-3 h-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
+                        )}
+                      </button>
+                    </div>
+                  ) : (
+                    <span className="text-xs trails-text-muted mt-0.5 leading-tight">
+                      Native Token
+                    </span>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="space-y-2">
       {/* Header */}
@@ -208,7 +343,7 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
             {/* Display balance info if available */}
             {selectedOption && "balanceFormatted" in selectedOption && (
               <div className="text-right">
-                <div className="text-xs trails-text-muted">
+                <div className="text-xs text-gray-500 dark:text-gray-400">
                   Balance: {String(selectedOption.balanceFormatted)}
                 </div>
                 {!selectedOption.hasEnoughBalanceForFee && (
@@ -266,7 +401,7 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
                 {/* Display balance info if available */}
                 {"balanceFormatted" in option && (
                   <div className="text-right">
-                    <div className="text-xs trails-text-muted">
+                    <div className="text-xs text-gray-500 dark:text-gray-400">
                       Balance: {String(option.balanceFormatted)}
                     </div>
                     <div className="text-xs trails-text-muted">

package/src/widget/components/WalletConfirmation.tsx

@@ -1,4 +1,5 @@
 import { TokenImage } from "./TokenImage.js"
+import { ErrorAnimationIcon } from "./ErrorAnimationIcon.js"
 import { ChevronLeft } from "lucide-react"
 import type React from "react"
 import { useEffect, useMemo, useState } from "react"
@@ -25,9 +26,11 @@ export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
   const [showTimeoutWarning, setShowTimeoutWarning] = useState(false)
   const [isFeeOptionConfirmed, setIsFeeOptionConfirmed] = useState(false)
   const [areFeeOptionsLoaded, setAreFeeOptionsLoaded] = useState(false)
+  const [feeOptionsError, setFeeOptionsError] = useState<boolean>(false)
   const { connector } = useAccount()
 
   useEffect(() => {
+    setAreFeeOptionsLoaded(false)
     setShowContent(true)
   }, [])
 
@@ -80,21 +83,25 @@ 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" : ""}`}
           >
-            {retryEnabled ? (
+            {feeOptionsError ? (
+              <ErrorAnimationIcon />
+            ) : retryEnabled ? (
               <div className={`h-24 w-24`} />
             ) : (
               <div className="animate-spin rounded-full h-24 w-24 border-solid border-b-2 border-blue-500 dark:border-blue-400" />
             )}
 
-            <div className="absolute">
-              <TokenImage
-                imageUrl={quote?.originToken.imageUrl}
-                symbol={quote?.originToken.symbol}
-                chainId={quote?.originChain.id}
-                contractAddress={quote?.originToken.contractAddress}
-                size={64}
-              />
-            </div>
+            {!feeOptionsError && (
+              <div className="absolute">
+                <TokenImage
+                  imageUrl={quote?.originToken.imageUrl}
+                  symbol={quote?.originToken.symbol}
+                  chainId={quote?.originChain.id}
+                  contractAddress={quote?.originToken.contractAddress}
+                  size={64}
+                />
+              </div>
+            )}
           </div>
 
           <div
@@ -109,7 +116,9 @@ export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
                     ? "Waiting for wallet…"
                     : areFeeOptionsLoaded
                       ? "Waiting for fee selection…"
-                      : "Waiting for fee options…"}
+                      : feeOptionsError
+                        ? "No fee token found"
+                        : "Waiting for fee options…"}
             </h2>
             <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
               {!isSequenceWaas
@@ -127,6 +136,7 @@ export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
               <WaasFeeOptions
                 chainId={quote?.originChain.id}
                 setIsFeeOptionConfirmed={setIsFeeOptionConfirmed}
+                setIsError={setFeeOptionsError}
                 onFeeOptionsLoaded={() => {
                   console.log("[trails-sdk] Fee options loaded callback called")
                   setAreFeeOptionsLoaded(true)
@@ -144,7 +154,7 @@ export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
             <div className="p-4 trails-border-radius-container text-sm bg-yellow-50 border border-solid border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-700/50">
               <div className="flex items-start space-x-3">
                 <svg
-                  className="w-5 h-5 mt-0.5 flex-shrink-0 text-yellow-600 dark:text-yellow-400"
+                  className="w-5 h-5 mt-0.5 shrink-0 text-yellow-600 dark:text-yellow-400"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -187,7 +197,7 @@ export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
         )}
 
         {/* Transaction Details */}
-        <QuoteDetails quote={quote} showContent={true} />
+        <QuoteDetails quote={quote} showContent={true} compact={true} />
       </div>
     </div>
   )

package/src/widget/components/WalletConnect.tsx

@@ -44,6 +44,7 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
   const { isConnected, address, connector } = useAccount()
   const [wcUri, setWcUri] = React.useState<string | null>(null)
   const [showUri, setShowUri] = React.useState(false)
+  const [copied, setCopied] = React.useState(false)
   const listenerRef = React.useRef<(() => void) | null>(null)
   const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
@@ -57,6 +58,21 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
       setWcUri(uri)
     }, 500) // 300ms debounce delay
   }, [])
+
+  // Copy URI to clipboard
+  const handleCopyUri = useCallback(async () => {
+    if (!wcUri) return
+    try {
+      await navigator.clipboard.writeText(wcUri)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      logger.console.error(
+        "[trails-sdk] [WalletConnect] Failed to copy URI",
+        err,
+      )
+    }
+  }, [wcUri])
   const isWalletConnectConnector = React.useMemo(() => {
     return connector?.name === "WalletConnect" && isConnected
   }, [connector, isConnected])
@@ -68,18 +84,13 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
     (c.id || "").toLowerCase().includes("walletconnect"),
   )
 
-  // Only auto-navigate back if we successfully connect a new wallet
+  // Only auto-navigate to home if we successfully connect a new wallet
   // Don't auto-navigate if user was already connected when they entered this screen
   useEffect(() => {
-    if (
-      isConnected &&
-      status === "success" &&
-      !wasConnectedOnMount.current &&
-      onBack
-    ) {
-      onBack()
+    if (isConnected && status === "success" && !wasConnectedOnMount.current) {
+      onContinue()
     }
-  }, [isConnected, status, onBack])
+  }, [isConnected, status, onContinue])
 
   const handleConnect = useCallback(
     async (force: boolean = false) => {
@@ -306,29 +317,82 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
                       getWalletIcon("walletconnect")
                     }
                   />
-                  <button
-                    onClick={() => setShowUri(!showUri)}
-                    className="mt-2 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:underline cursor-pointer flex items-center gap-1"
-                  >
-                    {showUri ? "Hide URI" : "Show URI"}
-                    <svg
-                      className={`w-3 h-3 transition-transform ${showUri ? "rotate-180" : ""}`}
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
+                  <div className="flex items-center justify-center gap-2 mt-2">
+                    <button
+                      type="button"
+                      onClick={handleCopyUri}
+                      className="text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 cursor-pointer flex items-center gap-1 hover:underline"
+                      title="Copy URI to clipboard"
                     >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M19 9l-7 7-7-7"
-                      />
-                    </svg>
-                  </button>
+                      {copied ? (
+                        <>
+                          <svg
+                            className="w-3 h-3"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                            aria-hidden="true"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M5 13l4 4L19 7"
+                            />
+                          </svg>
+                          Copied!
+                        </>
+                      ) : (
+                        <>
+                          <svg
+                            className="w-3 h-3"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                            aria-hidden="true"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+                            />
+                          </svg>
+                          Copy URI
+                        </>
+                      )}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setShowUri(!showUri)}
+                      className="text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:underline cursor-pointer flex items-center gap-1"
+                    >
+                      {showUri ? "Hide URI" : "Show URI"}
+                      <svg
+                        className={`w-3 h-3 transition-transform ${showUri ? "rotate-180" : ""}`}
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        aria-hidden="true"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M19 9l-7 7-7-7"
+                        />
+                      </svg>
+                    </button>
+                  </div>
                   {showUri && (
-                    <p className="mt-2 text-xs text-gray-600 dark:text-gray-400 break-all">
+                    <button
+                      type="button"
+                      className="mt-2 text-xs text-gray-600 dark:text-gray-400 break-all cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 p-2 rounded transition-colors text-left w-full"
+                      onClick={handleCopyUri}
+                      title="Click to copy URI"
+                    >
                       {wcUri}
-                    </p>
+                    </button>
                   )}
                 </div>
               ) : (

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,