0xtrails 0.7.0 → 0.8.0

package/src/widget/components/TokenImage.tsx

@@ -4,6 +4,7 @@ import { ChainImage } from "./ChainImage.js"
 import { getCommonTokenImageUrl } from "../../tokens.js"
 import { logger } from "../../logger.js"
 import { commonTokenImages } from "../../tokens.js"
+import { useChainInfo } from "../../chains.js"
 
 function normalizeImageUrl(
   imageUrl?: string | null,
@@ -51,6 +52,7 @@ export const TokenImage: React.FC<TokenImageProps> = ({
     height: number
   } | null>(null)
   const previousUrlRef = useRef<string | null>(null)
+  const chainInfo = useChainInfo(chainId || undefined)
 
   const effectiveImageUrl = useMemo<string | null>(() => {
     return normalizeImageUrl(imageUrl, symbol, chainId, contractAddress)
@@ -118,7 +120,7 @@ export const TokenImage: React.FC<TokenImageProps> = ({
         height: size,
         backgroundColor: symbol === "ETH" ? "#627eeb" : undefined,
       }}
-      title={`${symbol}${chainId ? ` on chain ${chainId}` : ""}`}
+      title={`${symbol}${chainId ? ` on ${chainInfo?.name || "chain"} (${chainId})` : ""}`}
     >
       {shouldShowText ? (
         <div

package/src/widget/components/TransactionDetails.tsx

@@ -1,10 +1,12 @@
 import type React from "react"
+import { useState } from "react"
 import type { IntentTransaction } from "../../transactions.js"
 import { TokenImage } from "./TokenImage.js"
 import { ChainImage } from "./ChainImage.js"
 import { getExplorerUrlForAddress } from "../../explorer.js"
 import { truncateAddress } from "../../utils.js"
 import { formatRawAmount } from "../../tokenBalances.js"
+import { logger } from "../../logger.js"
 
 interface TransactionDetailsProps {
   transaction: IntentTransaction
@@ -15,8 +17,114 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
   transaction,
   className = "",
 }) => {
+  const [copiedIntentId, setCopiedIntentId] = useState<string | null>(null)
+
+  const handleCopyIntentId = async (intentId: string, e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    try {
+      await navigator.clipboard.writeText(intentId)
+      setCopiedIntentId(intentId)
+      setTimeout(() => setCopiedIntentId(null), 2000) // Clear after 2 seconds
+      logger.console.log(
+        "[trails-sdk] Successfully copied intent ID:",
+        intentId,
+      )
+    } catch (error) {
+      logger.console.error("[trails-sdk] Failed to copy intent ID:", error)
+      // Fallback for older browsers or when clipboard API is not available
+      try {
+        const textArea = document.createElement("textarea")
+        textArea.value = intentId
+        document.body.appendChild(textArea)
+        textArea.select()
+        document.execCommand("copy")
+        document.body.removeChild(textArea)
+        setCopiedIntentId(intentId)
+        setTimeout(() => setCopiedIntentId(null), 2000)
+        logger.console.log(
+          "[trails-sdk] Successfully copied intent ID using fallback:",
+          intentId,
+        )
+      } catch (fallbackError) {
+        logger.console.error(
+          "[trails-sdk] Fallback copy also failed:",
+          fallbackError,
+        )
+      }
+    }
+  }
+
   return (
     <div className={`space-y-2 text-sm ${className}`}>
+      {/* Intent ID */}
+      {transaction.intentId && (
+        <div className="flex justify-between items-center">
+          <span className="text-xs text-gray-600 dark:text-gray-400">
+            Intent ID:
+          </span>
+          <div className="flex items-center gap-1">
+            <span className="text-xs font-mono text-gray-900 dark:text-gray-100">
+              {truncateAddress(transaction.intentId)}
+            </span>
+            <button
+              type="button"
+              onClick={(e) => {
+                if (transaction.intentId) {
+                  handleCopyIntentId(transaction.intentId, e)
+                }
+              }}
+              onMouseDown={(e) => e.stopPropagation()}
+              onMouseUp={(e) => e.stopPropagation()}
+              className={`p-0.5 rounded transition-all duration-200 cursor-pointer z-10 relative ${
+                copiedIntentId === transaction.intentId
+                  ? "bg-green-100 dark:bg-green-900/30"
+                  : "hover:bg-gray-200 dark:hover:bg-gray-600"
+              }`}
+              title={
+                copiedIntentId === transaction.intentId
+                  ? "Copied!"
+                  : "Copy full intent ID"
+              }
+            >
+              {copiedIntentId === transaction.intentId ? (
+                <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"
+                >
+                  <title>Copied</title>
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M5 13l4 4L19 7"
+                  />
+                </svg>
+              ) : (
+                <svg
+                  className="w-3 h-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  aria-label="Copy"
+                >
+                  <title>Copy</title>
+                  <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>
+              )}
+            </button>
+          </div>
+        </div>
+      )}
+
       {/* Origin Intent */}
       {transaction.originIntentAddress && transaction.originToken && (
         <div className="flex justify-between items-center">

package/src/widget/hooks/useAmountUsd.ts

@@ -2,7 +2,6 @@ import { useQuery } from "@tanstack/react-query"
 import { useTokenPrice } from "../../prices.js"
 import { formatUsdAmountDisplay } from "../../tokenBalances.js"
 import { useTokenAddress } from "../../tokens.js"
-import { useTrailsClient } from "../../trailsClient.js"
 
 type UseAmountUsdProps = {
   amount?: string | null
@@ -14,7 +13,6 @@ export function useAmountUsd({ amount, token, chainId }: UseAmountUsdProps): {
   amountUsd: number | null
   amountUsdFormatted: string
 } {
-  const trailsClient = useTrailsClient()
   const isTokenAddress = token?.startsWith("0x")
   const resolvedTokenAddress = useTokenAddress({
     chainId,
@@ -30,7 +28,6 @@ export function useAmountUsd({ amount, token, chainId }: UseAmountUsdProps): {
           chainId: Number(chainId),
         }
       : null,
-    trailsClient,
   )
 
   const { data: amountUsd } = useQuery({

package/src/widget/hooks/useDefaultTokenSelection.tsx

@@ -9,7 +9,6 @@ import { useTargetAmount } from "./useTargetAmount.js"
 import { useTokenBalances } from "../../tokenBalances.js"
 import type { Token } from "../../tokens.js"
 import { isNativeToken } from "../../utils.js"
-import { useIndexerGatewayClient } from "../../indexerClient.js"
 import { useSupportedTokens } from "../../tokens.js"
 import { getChainInfo } from "../../chains.js"
 import { logger } from "../../logger.js"
@@ -99,11 +98,9 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
   const { toToken, toChainId } = useWidgetProps()
   const { targetAmountUsd } = useTargetAmount()
   const { address } = useAccount()
-  const indexerGatewayClient = useIndexerGatewayClient()
 
   const { sortedTokens, isLoadingSortedTokens } = useTokenBalances(
     address as Address.Address,
-    indexerGatewayClient,
   )
 
   const { supportedTokens, isLoadingTokens: isLoadingSupportedTokens } =

package/src/widget/hooks/useGetIntent.ts

@@ -0,0 +1,53 @@
+import { useQuery } from "@tanstack/react-query"
+import { useTrailsClient } from "../../trailsClient.js"
+import { getIntent } from "../../intents.js"
+import { useTrails } from "../providers/TrailsProvider.js"
+
+export interface UseGetIntentParams {
+  intentId: string | undefined
+  enabled?: boolean
+}
+
+export interface UseGetIntentReturn {
+  intent: import("@0xtrails/api").Intent | null
+  isLoading: boolean
+  isError: boolean
+  error: Error | null
+  refetch: () => void
+}
+
+/**
+ * Hook to fetch intent data from the Trails API
+ * @param params - Object containing intentId and optional enabled flag
+ * @returns Intent data, loading state, error state, and refetch function
+ */
+export function useGetIntent({
+  intentId,
+  enabled = true,
+}: UseGetIntentParams): UseGetIntentReturn {
+  const trailsConfig = useTrails()
+  const trailsClient = useTrailsClient()
+
+  const { data, isLoading, isError, error, refetch } = useQuery({
+    queryKey: ["getIntent", intentId],
+    queryFn: async () => {
+      if (!intentId || !trailsConfig.trailsApiKey) {
+        throw new Error("Intent ID and API key required")
+      }
+
+      const response = await getIntent(trailsClient, intentId)
+      return response.intent
+    },
+    enabled: enabled && !!intentId && !!trailsConfig.trailsApiKey,
+  })
+
+  return {
+    intent: data ?? null,
+    isLoading,
+    isError,
+    error: error as Error | null,
+    refetch: () => {
+      refetch()
+    },
+  }
+}

package/src/widget/hooks/useIntentTransactionHistory.ts

@@ -39,6 +39,8 @@ function mapApiStatusToUiStatus(apiStatus: string): string {
       return "failed"
     case "CREATED":
       return "created"
+    case "ABORTED":
+      return "aborted"
     default:
       return apiStatus?.toLowerCase() || "unknown"
   }
@@ -50,16 +52,55 @@ function mapApiStatusToUiStatus(apiStatus: string): string {
 function mapIntentSummaryToTransaction(
   intent: IntentSummary,
 ): IntentTransaction {
+  // Determine effective status based on transaction status fields
+  // Priority: destinationTransactionStatus > originTransactionStatus > depositTransactionStatus > main status
+  let effectiveStatus = mapApiStatusToUiStatus(intent.status)
+
+  const depositStatus = intent.depositTransactionStatus
+  const originStatus = intent.originTransactionStatus
+  const destinationStatus = intent.destinationTransactionStatus
+
+  // If destinationTransactionStatus exists and is not ABORTED, use it
+  if (destinationStatus && destinationStatus !== "ABORTED") {
+    effectiveStatus = mapApiStatusToUiStatus(destinationStatus)
+  }
+  // If destinationTransactionStatus doesn't exist but originTransactionStatus exists and is not ABORTED, use it
+  else if (!destinationStatus && originStatus && originStatus !== "ABORTED") {
+    effectiveStatus = mapApiStatusToUiStatus(originStatus)
+  }
+  // If depositTransactionStatus is ABORTED but origin/destination have non-ABORTED statuses, don't use aborted
+  // Only use aborted if deposit is ABORTED and origin/destination are also ABORTED or don't exist
+  else if (depositStatus === "ABORTED") {
+    // Check if origin or destination have non-ABORTED statuses
+    const hasNonAbortedOrigin = originStatus && originStatus !== "ABORTED"
+    const hasNonAbortedDestination =
+      destinationStatus && destinationStatus !== "ABORTED"
+
+    if (!hasNonAbortedOrigin && !hasNonAbortedDestination) {
+      // Only mark as aborted if no non-aborted statuses exist
+      effectiveStatus = "aborted"
+    }
+  }
+  // If originTransactionStatus is ABORTED and no destination status, use aborted
+  else if (originStatus === "ABORTED" && !destinationStatus) {
+    effectiveStatus = "aborted"
+  }
+  // If destinationTransactionStatus is ABORTED, use aborted
+  else if (destinationStatus === "ABORTED") {
+    effectiveStatus = "aborted"
+  }
+
   return {
     originIntentAddress: intent.originIntentAddress,
     destinationIntentAddress: intent.destinationIntentAddress,
     mainSigner: intent.ownerAddress,
+    intentId: intent.intentId,
     metaTxnId: intent.intentId,
     txnHash:
       intent.originTransactionHash ||
       intent.destinationTransactionHash ||
       undefined,
-    executionStatus: mapApiStatusToUiStatus(intent.status),
+    executionStatus: effectiveStatus,
     originChainId: intent.originChainId,
     destinationChainId: intent.destinationChainId,
     originTokenAddress: intent.originTokenAddress,
@@ -70,6 +111,9 @@ function mapIntentSummaryToTransaction(
     createdAt: intent.createdAt,
     originTransactionHash: intent.originTransactionHash,
     destinationTransactionHash: intent.destinationTransactionHash,
+    depositTransactionStatus: intent.depositTransactionStatus,
+    originTransactionStatus: intent.originTransactionStatus,
+    destinationTransactionStatus: intent.destinationTransactionStatus,
     originToken: intent.originTokenMetadata
       ? ({
           symbol: intent.originTokenMetadata.symbol || "",
@@ -514,6 +558,40 @@ function getEffectiveExecutionStatus(
     createdAt,
   } = transaction
 
+  // Check for aborted status in transaction status fields
+  // Priority: destinationTransactionStatus > originTransactionStatus > depositTransactionStatus
+  const depositStatus = transaction.depositTransactionStatus
+  const originStatus = transaction.originTransactionStatus
+  const destinationStatus = transaction.destinationTransactionStatus
+
+  // If destinationTransactionStatus exists and is not ABORTED, use it (don't mark as aborted)
+  if (destinationStatus && destinationStatus !== "ABORTED") {
+    return mapApiStatusToUiStatus(destinationStatus)
+  }
+  // If destinationTransactionStatus doesn't exist but originTransactionStatus exists and is not ABORTED, use it
+  if (!destinationStatus && originStatus && originStatus !== "ABORTED") {
+    return mapApiStatusToUiStatus(originStatus)
+  }
+  // If depositTransactionStatus is ABORTED but origin/destination have non-ABORTED statuses, don't use aborted
+  if (depositStatus === "ABORTED") {
+    const hasNonAbortedOrigin = originStatus && originStatus !== "ABORTED"
+    const hasNonAbortedDestination =
+      destinationStatus && destinationStatus !== "ABORTED"
+
+    // Only mark as aborted if no non-aborted statuses exist
+    if (!hasNonAbortedOrigin && !hasNonAbortedDestination) {
+      return "aborted"
+    }
+  }
+  // If originTransactionStatus is ABORTED and no destination status, use aborted
+  if (originStatus === "ABORTED" && !destinationStatus) {
+    return "aborted"
+  }
+  // If destinationTransactionStatus is ABORTED, use aborted
+  if (destinationStatus === "ABORTED") {
+    return "aborted"
+  }
+
   // If we decoded a refund, return "refunded"
   if (decodedEvents.refunded) {
     return "refunded"
@@ -524,8 +602,12 @@ function getEffectiveExecutionStatus(
     return "failed"
   }
 
-  // If API provided a status, use it
-  if (executionStatus && executionStatus !== "unknown") {
+  // If API provided a status, use it (but skip if it's "executing" when we know it's aborted)
+  if (
+    executionStatus &&
+    executionStatus !== "unknown" &&
+    executionStatus !== "executing"
+  ) {
     return executionStatus
   }
 

package/src/widget/hooks/useQuote.ts

@@ -23,7 +23,7 @@ import type { PrepareSendFees } from "../../prepareSend.js"
 import { getTokenPrice } from "../../prices.js"
 import { useCommitIntent, useExecuteIntent } from "../../mutations.js"
 import type { CheckoutOnHandlers } from "./useCheckout.js"
-import type { FeeOption } from "@0xtrails/api"
+import type { FeeOption, RouteProvider } from "@0xtrails/api"
 
 /**
  * Configuration options for the `useQuote` hook.
@@ -55,8 +55,10 @@ export type UseQuoteProps = {
   slippageTolerance?: string | number | null
   /** Optional callback function that receives transaction state updates during swap execution. */
   onStatusUpdate?: ((transactionStates: TransactionState[]) => void) | null
-  /** Optional quote provider ID to use. If not specified, the best available provider will be selected. */
-  quoteProvider?: string | null
+  /** Optional quote swap provider ID to use. If not specified, the best available provider will be selected. */
+  swapProvider?: RouteProvider | null
+  /** Optional quote bridge provider ID to use. If not specified, the best available provider will be selected. */
+  bridgeProvider?: RouteProvider | null
   /**
    * Optional checkout event handlers for tracking the states of a Trails transaction.
    *
@@ -123,7 +125,7 @@ export type SwapReturn = {
 /**
  * Information about a quote provider (LiFi, CCTP, Relay, etc.) used for routing the swap.
  */
-export type QuoteProviderInfo = {
+export type RouteProviderInfo = {
   id: string
   name: string
   url: string
@@ -152,7 +154,7 @@ export type Quote = {
   completionEstimateSeconds: number
   transactionStates?: TransactionState[]
   originTokenRate?: string
-  quoteProvider?: QuoteProviderInfo | null
+  routeProviders?: RouteProviderInfo[]
   destinationTokenRate?: string
   fromAmountUsdDisplay?: string
   toAmountUsdDisplay?: string
@@ -271,7 +273,8 @@ export type UseQuoteReturn = {
  * @param props.slippageTolerance - Slippage tolerance as a decimal string or number (e.g., '0.005' for 0.5%, '0.01' for 1%). Defaults to a reasonable value if not provided
  * @param props.toCalldata - Optional custom calldata for the destination chain. Used for executing arbitrary contract calls (e.g., swap and mint an NFT on destination chain)
  * @param props.onStatusUpdate - Optional callback function that receives transaction state updates during swap execution
- * @param props.quoteProvider - Optional quote provider ID to use (auto, lifi, relay, cctp, direct). If not specified, the best available provider will be selected
+ * @param props.swapProvider - Optional swap provider ID to use (auto, lifi, relay, cctp, direct). If not specified, the best available provider will be selected
+ * @param props.bridgeProvider - Optional bridge provider ID to use (auto, lifi, relay, cctp, direct). If not specified, the best available provider will be selected
  * @param props.checkoutOnHandlers - Optional event handlers for tracking checkout/transaction lifecycle events
  * @param props.paymasterUrl - Optional paymaster URL for gasless ERC-4337 transactions
  * @param props.selectedFeeOption - Optional fee option selection (e.g., user selects USDC as the fee token instead of ETH)
@@ -314,7 +317,8 @@ export function useQuote({
   slippageTolerance,
   onStatusUpdate,
   checkoutOnHandlers,
-  quoteProvider,
+  swapProvider,
+  bridgeProvider,
   paymasterUrl,
   selectedFeeOption,
   nodeGatewayEnv,
@@ -382,7 +386,8 @@ export function useQuote({
       toCalldata,
       tradeType,
       slippageTolerance,
-      quoteProvider,
+      swapProvider,
+      bridgeProvider,
       apiKey,
       isSmartWallet,
     ],
@@ -628,7 +633,8 @@ export function useQuote({
           dryMode: false,
           onTransactionStateChange: onStatusUpdate ?? (() => {}),
           slippageTolerance: slippageTolerance?.toString(),
-          quoteProvider: quoteProvider,
+          swapProvider: swapProvider,
+          bridgeProvider: bridgeProvider,
           paymasterUrl: paymasterUrl,
           selectedFeeOption: selectedFeeOption ?? null,
           abortSignal: combinedAbortSignal,
@@ -668,7 +674,7 @@ export function useQuote({
           transactionStates: prepareSendQuote.transactionStates,
           originTokenRate: prepareSendQuote.originTokenRate,
           destinationTokenRate: prepareSendQuote.destinationTokenRate,
-          quoteProvider: prepareSendQuote.quoteProvider,
+          routeProviders: prepareSendQuote.routeProviders,
           fromAmountUsdDisplay:
             prepareSendQuote.originAmountUsdDisplay ?? undefined,
           toAmountUsdDisplay:

package/src/widget/hooks/useSendForm.ts

@@ -1,4 +1,4 @@
-import type { TokenPrice, FeeOption } from "@0xtrails/api"
+import type { TokenPrice, FeeOption, RouteProvider } from "@0xtrails/api"
 import { JsonEncode } from "@0xtrails/api"
 import type React from "react"
 import { useCallback, useEffect, useMemo, useState, useRef } from "react"
@@ -89,7 +89,8 @@ export type UseSendProps = {
   selectedToken?: Token
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   tradeType?: TradeType
-  quoteProvider?: string
+  swapProvider?: string
+  bridgeProvider?: string
   fundMethod?: string
   mode?: "pay" | "fund" | "earn" | "swap"
   onNavigateToOnramp?: (
@@ -175,7 +176,8 @@ export function useSendForm({
   onComplete,
   setWalletConfirmRetryHandler,
   tradeType = TradeType.EXACT_OUTPUT,
-  quoteProvider,
+  swapProvider,
+  bridgeProvider,
   fundMethod,
   mode,
   onNavigateToOnramp,
@@ -189,9 +191,9 @@ export function useSendForm({
   // Read isSmartWallet from widget props
   const { isSmartWallet } = useWidgetProps()
 
-  // Auto-set quoteProvider to "lifi" if either from or to chain is etherlink
-  const effectiveQuoteProvider = useMemo(() => {
-    if (!quoteProvider || quoteProvider === "auto") {
+  // Auto-set swapProvider and bridgeProvider to "lifi" if either from or to chain is etherlink
+  const effectiveSwapProvider = useMemo(() => {
+    if (!swapProvider || swapProvider === "auto") {
       if (
         selectedToken?.chainId === etherlink.id ||
         toChainId === etherlink.id
@@ -199,8 +201,20 @@ export function useSendForm({
         return "lifi"
       }
     }
-    return quoteProvider
-  }, [quoteProvider, selectedToken?.chainId, toChainId])
+    return swapProvider
+  }, [swapProvider, selectedToken?.chainId, toChainId])
+
+  const effectiveBridgeProvider = useMemo(() => {
+    if (!bridgeProvider || bridgeProvider === "auto") {
+      if (
+        selectedToken?.chainId === etherlink.id ||
+        toChainId === etherlink.id
+      ) {
+        return "lifi"
+      }
+    }
+    return bridgeProvider
+  }, [bridgeProvider, selectedToken?.chainId, toChainId])
 
   const [amount, setAmount] = useState(
     tradeType === TradeType.EXACT_INPUT ? "" : (toAmount ?? ""),
@@ -561,10 +575,7 @@ export function useSendForm({
     return input
   }, [selectedDestToken, destTokenAddress, selectedDestinationChain?.id])
 
-  const { tokenPrices: destTokenPrices } = useTokenPrices(
-    destTokenPricesInput,
-    trailsClient,
-  )
+  const { tokenPrices: destTokenPrices } = useTokenPrices(destTokenPricesInput)
 
   const { tokenPrices: sourceTokenPrices } = useTokenPrices(
     selectedToken
@@ -576,7 +587,6 @@ export function useSendForm({
           },
         ]
       : [],
-    trailsClient,
   )
 
   // Update selectedChain when toChainId prop changes
@@ -1071,7 +1081,11 @@ export function useSendForm({
               p.chainId.toString() === (selectedToken.chainId || 0).toString(),
           )?.url ?? undefined,
         originNativeTokenPriceUsd: nativeTokenPriceUsd,
-        quoteProvider: effectiveQuoteProvider,
+        swapProvider: effectiveSwapProvider as RouteProvider | null | undefined,
+        bridgeProvider: effectiveBridgeProvider as
+          | RouteProvider
+          | null
+          | undefined,
         mode,
         fundMethod,
         checkoutOnHandlers,
@@ -1166,7 +1180,8 @@ export function useSendForm({
     selectedDestToken,
     selectedDestinationChain,
     selectedToken,
-    effectiveQuoteProvider,
+    effectiveSwapProvider,
+    effectiveBridgeProvider,
     fundMethod,
     amountRaw,
     checkoutOnHandlers,

package/src/widget/hooks/useTokenList.ts

@@ -13,7 +13,6 @@ import {
   formatPriceFields,
 } from "../../tokenBalances.js"
 import { useSupportedTokens, useGetTokenImageUrl } from "../../tokens.js"
-import { useIndexerGatewayClient } from "../../indexerClient.js"
 import { useTrailsClient } from "../../trailsClient.js"
 import { useTokenPrices } from "../../prices.js"
 import { logger } from "../../logger.js"
@@ -182,14 +181,13 @@ export function useTokenList({
   const [selectedToken, setSelectedToken] = useState<Token | null>(null)
   const [searchQuery, setSearchQuery] = useState("")
   const { address } = useAccount()
-  const indexerGatewayClient = useIndexerGatewayClient()
   const trailsClient = useTrailsClient()
   const { getTokenImageUrl } = useGetTokenImageUrl()
   const {
     sortedTokens: allSortedTokens,
     isLoadingSortedTokens,
     balanceError,
-  } = useTokenBalances(address as Address.Address, indexerGatewayClient)
+  } = useTokenBalances(address as Address.Address)
 
   // Use cached supported tokens hook
   const { supportedTokens, isLoadingTokens: isLoadingSupportedTokens } =
@@ -364,7 +362,7 @@ export function useTokenList({
   const {
     tokenPrices: supportedTokenPrices,
     isLoadingTokenPrices: isLoadingSupportedTokenPrices,
-  } = useTokenPrices(supportedTokensForPricing, trailsClient)
+  } = useTokenPrices(supportedTokensForPricing)
 
   // Determine loading state based on fund method and allSupportedTokens
   const isLoadingTokens =

package/src/widget/hooks/useTrailsSendTransaction.ts

@@ -481,7 +481,8 @@ export function useTrailsSendTransaction(
       paymasterUrl: params?.paymasterUrl,
       slippageTolerance: params?.slippageTolerance?.toString(),
       originNativeTokenPriceUsd,
-      quoteProvider: params?.quoteProvider,
+      swapProvider: params?.swapProvider,
+      bridgeProvider: params?.bridgeProvider,
       commitIntentFn: commitIntentMutation.mutateAsync,
       executeIntentFn: executeIntentMutation.mutateAsync,
       checkoutOnHandlers: params?.checkoutOnHandlers,

package/src/widget/widget.tsx

@@ -199,7 +199,8 @@ export type TrailsWidgetProps = {
   buttonText?: string
   customCss?: string | Record<string, string>
   disableCss?: boolean
-  quoteProvider?: string
+  swapProvider?: string
+  bridgeProvider?: string
   slippageTolerance?: number | string
   priceImpactWarningThresholdBps?: number
   priceImpactWarningMessage?: string
@@ -479,7 +480,8 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     onClose,
     paymasterUrls,
     buttonText,
-    quoteProvider,
+    swapProvider,
+    bridgeProvider,
     priceImpactWarningThresholdBps,
     priceImpactWarningMessage,
     priceImpactFallbackBridgeUrl,
@@ -1960,7 +1962,8 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onError={handleSendError}
             paymasterUrls={paymasterUrls}
             setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
-            quoteProvider={quoteProvider}
+            swapProvider={swapProvider}
+            bridgeProvider={bridgeProvider}
             fundMethod={selectedFundMethod}
             onNavigateToOnramp={handleNavigateToOnramp}
             onAmountUpdate={(amount: string) => {
@@ -2015,7 +2018,8 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onError={handleSendError}
             paymasterUrls={paymasterUrls}
             setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
-            quoteProvider={quoteProvider}
+            swapProvider={swapProvider}
+            bridgeProvider={bridgeProvider}
             fundMethod={selectedFundMethod}
             onNavigateToOnramp={handleNavigateToOnramp}
             checkoutOnHandlers={checkoutOnHandlers}
@@ -2271,7 +2275,8 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onSend={handleOnSend}
             paymasterUrls={paymasterUrls}
             setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
-            quoteProvider={quoteProvider}
+            swapProvider={swapProvider}
+            bridgeProvider={bridgeProvider}
             fundMethod={selectedFundMethod}
             onNavigateToOnramp={handleNavigateToOnramp}
             checkoutOnHandlers={checkoutOnHandlers}
@@ -2311,7 +2316,8 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onError={handleSendError}
             paymasterUrls={paymasterUrls}
             setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
-            quoteProvider={quoteProvider}
+            swapProvider={swapProvider}
+            bridgeProvider={bridgeProvider}
             fundMethod={selectedFundMethod}
             onNavigateToOnramp={handleNavigateToOnramp}
             onAmountUpdate={undefined}