0xtrails 0.4.2 → 0.5.0

package/src/widget/components/ConfigDisplay.tsx

@@ -1,20 +1,12 @@
 import type React from "react"
-import { useEffect, useState } from "react"
-import {
-  globalConfig,
-  getSequenceEnv,
-  getTrailsApiUrl,
-  getSequenceIndexerUrl,
-  getSequenceProjectAccessKey,
-  getWalletConnectProjectId,
-  getSlippageTolerance,
-  getDebug,
-} from "../../config.js"
+import { useMemo } from "react"
+import { useTrails } from "../providers/TrailsProvider.js"
 import { getChainInfo } from "../../chains.js"
 import { mainnet } from "viem/chains"
 import { logger } from "../../logger.js"
 import { useWidgetProps } from "../hooks/useWidgetProps.js"
 import { useTargetAmount } from "../hooks/useTargetAmount.js"
+import { getQueryParam } from "../../queryParams.js"
 
 interface ConfigDisplayProps {
   className?: string
@@ -31,45 +23,14 @@ export const ConfigDisplay: React.FC<ConfigDisplayProps> = ({
     toCalldata,
   } = useWidgetProps()
   const { targetAmountUsdFormatted } = useTargetAmount()
-  const [sequenceEnv, setSequenceEnv] = useState(getSequenceEnv())
-  const [trailsApiUrl, setTrailsApiUrl] = useState(getTrailsApiUrl())
-  const [sequenceIndexerUrl, setSequenceIndexerUrl] = useState(
-    getSequenceIndexerUrl(),
-  )
-  const [projectAccessKey, setProjectAccessKey] = useState(
-    getSequenceProjectAccessKey(),
-  )
-  const [walletConnectProjectId, setWalletConnectProjectId] = useState(
-    getWalletConnectProjectId(),
-  )
-  const [slippageTolerance, setSlippageTolerance] = useState(
-    getSlippageTolerance(),
-  )
-  const [debugMode, setDebugMode] = useState(getDebug())
-  const [rpcNodeUrl, setRpcNodeUrl] = useState(() => {
-    const mainnetChain = getChainInfo(mainnet.id)
-    return mainnetChain?.rpcUrls?.default?.http?.[0] || "N/A"
-  })
-
-  // Update configuration values in real time
-  useEffect(() => {
-    const updateConfig = () => {
-      logger.console.log("[trails-sdk] globalConfig", globalConfig)
-      setSequenceEnv(getSequenceEnv())
-      setTrailsApiUrl(getTrailsApiUrl())
-      setSequenceIndexerUrl(getSequenceIndexerUrl())
-      setProjectAccessKey(getSequenceProjectAccessKey())
-      setWalletConnectProjectId(getWalletConnectProjectId())
-      setSlippageTolerance(getSlippageTolerance())
-      setDebugMode(getDebug())
+  const config = useTrails()
 
-      // Update RPC Node URL for mainnet
-      const mainnetChain = getChainInfo(mainnet.id)
-      setRpcNodeUrl(mainnetChain?.rpcUrls?.default?.http?.[0] || "N/A")
-    }
+  logger.console.log("[trails-sdk] Config from context:", config)
 
-    // Update immediately
-    updateConfig()
+  const debugMode = config.debug || getQueryParam("debug") === "true"
+  const rpcNodeUrl = useMemo(() => {
+    const mainnetChain = getChainInfo(mainnet.id)
+    return mainnetChain?.rpcUrls?.default?.http?.[0] || "N/A"
   }, [])
 
   const truncateString = (str: string, maxLength: number = 30) => {
@@ -82,16 +43,15 @@ export const ConfigDisplay: React.FC<ConfigDisplayProps> = ({
     value: string
     display: string
   }>[] = [
-    { label: "Sequence ENV", value: sequenceEnv, display: sequenceEnv },
     {
       label: "API URL",
-      value: trailsApiUrl,
-      display: truncateString(trailsApiUrl),
+      value: config.trailsApiUrl,
+      display: truncateString(config.trailsApiUrl || "N/A"),
     },
     {
       label: "Indexer URL",
-      value: sequenceIndexerUrl,
-      display: truncateString(sequenceIndexerUrl),
+      value: config.sequenceIndexerUrl,
+      display: truncateString(config.sequenceIndexerUrl! || "N/A"),
     },
     {
       label: "RPC Node URL (1)",
@@ -99,16 +59,16 @@ export const ConfigDisplay: React.FC<ConfigDisplayProps> = ({
       display: truncateString(rpcNodeUrl),
     },
     {
-      label: "Project Access Key",
-      value: projectAccessKey,
-      display: truncateString(projectAccessKey),
+      label: "Trails API Key",
+      value: config.trailsApiKey,
+      display: truncateString(config.trailsApiKey),
     },
     {
       label: "WalletConnect Project ID",
-      value: truncateString(walletConnectProjectId),
-      display: truncateString(walletConnectProjectId),
+      value: truncateString(config.walletConnectProjectId! || "N/A"),
+      display: truncateString(config.walletConnectProjectId! || "N/A"),
     },
-    { label: "Slippage Tolerance", value: `${slippageTolerance}%` },
+    { label: "Slippage Tolerance", value: `${config.slippageTolerance}%` },
     { label: "Debug Mode", value: debugMode ? "Enabled" : "Disabled" },
     { label: "Toast Notifications", value: toast ? "Enabled" : "Disabled" },
     {

package/src/widget/components/FeeOptions.tsx

@@ -11,7 +11,7 @@ import { getTokenImageUrl } from "../../tokens.js"
 import { TokenImage } from "./TokenImage.js"
 import { ethAddress, zeroAddress } from "viem"
 import type { FeeOption as APIFeeOption } from "../../widget/hooks/useSelectedFeeToken.js"
-import { SelectedFeeToken } from "../../prepareSend.js"
+import type { SelectedFeeToken } from "../../prepareSend.js"
 
 const ZERO_ADDRESS = zeroAddress.toLowerCase()
 const ETH_ADDRESS = ethAddress.toLowerCase()

package/src/widget/components/SlippageToleranceSettings.tsx

@@ -1,7 +1,7 @@
 import type React from "react"
 import { useState, useEffect } from "react"
 import { HelpCircle } from "lucide-react"
-import { getSlippageTolerance, setSlippageTolerance } from "../../config.js"
+import { useTrails } from "../providers/TrailsProvider.js"
 
 // Convert decimal format to percentage for display
 // Format: "0.05" (5%) -> "5"
@@ -17,6 +17,20 @@ const percentageToDecimal = (percentage: string): string => {
   return (num / 100).toString()
 }
 
+// Local storage key for user's slippage preference
+const SLIPPAGE_STORAGE_KEY = "trails-slippage-tolerance"
+
+// Helper function to get current slippage tolerance (for use in SDK functions)
+// Returns the user's stored preference or falls back to the provided default
+export const getSlippageToleranceValue = (defaultValue: string): string => {
+  try {
+    const stored = localStorage.getItem(SLIPPAGE_STORAGE_KEY)
+    return stored || defaultValue
+  } catch (_error) {
+    return defaultValue
+  }
+}
+
 interface SlippageToleranceSettingsProps {
   className?: string
 }
@@ -24,14 +38,25 @@ interface SlippageToleranceSettingsProps {
 export const SlippageToleranceSettings: React.FC<
   SlippageToleranceSettingsProps
 > = ({ className = "" }) => {
+  const config = useTrails()
   const [displayValue, setDisplayValue] = useState("")
   const [showTooltip, setShowTooltip] = useState(false)
 
-  // Initialize display value from current config
+  // Initialize display value from local storage or config
   useEffect(() => {
-    const currentSlippage = getSlippageTolerance()
-    setDisplayValue(decimalToPercentage(currentSlippage))
-  }, [])
+    try {
+      const stored = localStorage.getItem(SLIPPAGE_STORAGE_KEY)
+      if (stored) {
+        setDisplayValue(decimalToPercentage(stored))
+      } else {
+        // Default to config value
+        setDisplayValue(decimalToPercentage(String(config.slippageTolerance)))
+      }
+    } catch (_error) {
+      // Fallback to config if localStorage fails
+      setDisplayValue(decimalToPercentage(String(config.slippageTolerance)))
+    }
+  }, [config.slippageTolerance])
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value
@@ -49,9 +74,17 @@ export const SlippageToleranceSettings: React.FC<
 
   const handleInputBlur = () => {
     if (displayValue === "") {
-      // Reset to current value if empty
-      const currentSlippage = getSlippageTolerance()
-      setDisplayValue(decimalToPercentage(currentSlippage))
+      // Reset to stored value or config default
+      try {
+        const stored = localStorage.getItem(SLIPPAGE_STORAGE_KEY)
+        if (stored) {
+          setDisplayValue(decimalToPercentage(stored))
+        } else {
+          setDisplayValue(decimalToPercentage(String(config.slippageTolerance)))
+        }
+      } catch (_error) {
+        setDisplayValue(decimalToPercentage(String(config.slippageTolerance)))
+      }
       return
     }
 
@@ -59,15 +92,27 @@ export const SlippageToleranceSettings: React.FC<
 
     // Validate range (0.01% to 50%)
     if (percentage < 0.01 || percentage > 50) {
-      // Reset to current value if invalid
-      const currentSlippage = getSlippageTolerance()
-      setDisplayValue(decimalToPercentage(currentSlippage))
+      // Reset to stored value or config default
+      try {
+        const stored = localStorage.getItem(SLIPPAGE_STORAGE_KEY)
+        if (stored) {
+          setDisplayValue(decimalToPercentage(stored))
+        } else {
+          setDisplayValue(decimalToPercentage(String(config.slippageTolerance)))
+        }
+      } catch (_error) {
+        setDisplayValue(decimalToPercentage(String(config.slippageTolerance)))
+      }
       return
     }
 
-    // Convert to decimal format and save
+    // Convert to decimal format and save to localStorage
     const decimalValue = percentageToDecimal(displayValue)
-    setSlippageTolerance(decimalValue)
+    try {
+      localStorage.setItem(SLIPPAGE_STORAGE_KEY, decimalValue)
+    } catch (error) {
+      console.warn("Failed to save slippage tolerance to localStorage:", error)
+    }
 
     // Update display to show formatted value
     setDisplayValue(percentage.toString())
@@ -83,7 +128,11 @@ export const SlippageToleranceSettings: React.FC<
     const percentageStr = percentage.toString()
     setDisplayValue(percentageStr)
     const decimalValue = percentageToDecimal(percentageStr)
-    setSlippageTolerance(decimalValue)
+    try {
+      localStorage.setItem(SLIPPAGE_STORAGE_KEY, decimalValue)
+    } catch (error) {
+      console.warn("Failed to save slippage tolerance to localStorage:", error)
+    }
   }
 
   return (

package/src/widget/components/WalletConnect.tsx

@@ -3,7 +3,7 @@ import { useAccount, useConnect, useDisconnect } from "wagmi"
 import { walletConnect } from "wagmi/connectors"
 import { QrCode } from "./QrCode.js"
 import { TruncatedAddress } from "./TruncatedAddress.js"
-import { getWalletConnectProjectId } from "../../config.js"
+import { useTrails } from "../providers/TrailsProvider.js"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { getWalletIcon, getWalletName } from "../../wallets.js"
 import { logger } from "../../logger.js"
@@ -18,14 +18,14 @@ export interface WalletConnectProps {
 
 // Local singleton to avoid multiple Core initializations from this screen
 let wcConnectorSingleton: ReturnType<typeof walletConnect> | null = null
-function getWalletConnectConnector(projectId?: string) {
+function getWalletConnectConnector(projectId: string) {
   if (!wcConnectorSingleton) {
     logger.console.log(
       "[trails-sdk] [WalletConnect] Creating new connector with projectId:",
-      projectId || getWalletConnectProjectId(),
+      projectId,
     )
     wcConnectorSingleton = walletConnect({
-      projectId: projectId || getWalletConnectProjectId(),
+      projectId: projectId,
       showQrModal: false,
     })
   }
@@ -35,16 +35,17 @@ function getWalletConnectConnector(projectId?: string) {
 export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
   onBack,
   onContinue,
-  projectId,
+  projectId: projectIdProp,
   onReconnectPreviousWallet,
   selectedWalletId,
 }) => {
+  const config = useTrails()
+  const projectId = projectIdProp || config.walletConnectProjectId
   const { connect, connectors, status } = useConnect() as any
   const { disconnect } = useDisconnect()
   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)
 
@@ -58,21 +59,6 @@ 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])
@@ -84,13 +70,18 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
     (c.id || "").toLowerCase().includes("walletconnect"),
   )
 
-  // Only auto-navigate to home if we successfully connect a new wallet
+  // Only auto-navigate back 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) {
-      onContinue()
+    if (
+      isConnected &&
+      status === "success" &&
+      !wasConnectedOnMount.current &&
+      onBack
+    ) {
+      onBack()
     }
-  }, [isConnected, status, onContinue])
+  }, [isConnected, status, onBack])
 
   const handleConnect = useCallback(
     async (force: boolean = false) => {
@@ -101,7 +92,7 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
       })
       if ((status === "pending" || status === "success") && !force) return
 
-      const makeConnector = () => getWalletConnectConnector(projectId)
+      const makeConnector = () => getWalletConnectConnector(projectId!)
       const connector = wcConnectorFromConfig || makeConnector()
 
       logger.console.log(
@@ -317,82 +308,29 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
                       getWalletIcon("walletconnect")
                     }
                   />
-                  <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"
+                  <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"
                     >
-                      {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>
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M19 9l-7 7-7-7"
+                      />
+                    </svg>
+                  </button>
                   {showUri && (
-                    <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"
-                    >
+                    <p className="mt-2 text-xs text-gray-600 dark:text-gray-400 break-all">
                       {wcUri}
-                    </button>
+                    </p>
                   )}
                 </div>
               ) : (

package/src/widget/hooks/useIntentTransactionHistory.ts

@@ -8,6 +8,7 @@ import {
 import { getTokenInfo, getSupportedTokens } from "../../tokens.js"
 import { getExplorerUrl } from "../../explorer.js"
 import { logger } from "../../logger.js"
+import { useTrails } from "../providers/TrailsProvider.js"
 
 export type UseIntentTransactionHistoryParams = {
   accountAddress?: string
@@ -34,6 +35,7 @@ export function useIntentTransactionHistory({
   pageSize = 10,
   enabled = true,
 }: UseIntentTransactionHistoryParams): UseIntentTransactionHistoryReturn {
+  const trailsConfig = useTrails()
   const [transactions, setTransactions] = useState<IntentTransaction[]>([])
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
@@ -53,6 +55,8 @@ export function useIntentTransactionHistory({
             accountAddress,
             pageSize,
             page: pageNum,
+            apiKey: trailsConfig.trailsApiKey,
+            apiUrl: trailsConfig.trailsApiUrl!,
           })
 
         // Enrich transactions with token information
@@ -268,6 +272,8 @@ export function useIntentTransactionHistory({
                   pageSize: 10, // Fetch more to find both deposit and action txs
                   page: 0,
                   includeMetadata: true, // Need metadata to check transfer direction
+                  apiKey: trailsConfig.trailsApiKey,
+                  indexerUrl: trailsConfig.sequenceIndexerUrl!,
                 })
                 if (
                   originHistory?.transactions &&
@@ -329,6 +335,8 @@ export function useIntentTransactionHistory({
                   pageSize: 10, // Fetch more to find both deposit and action txs
                   page: 0,
                   includeMetadata: true, // Need metadata to check transfer direction
+                  apiKey: trailsConfig.trailsApiKey,
+                  indexerUrl: trailsConfig.sequenceIndexerUrl!,
                 })
                 if (
                   destinationHistory?.transactions &&
@@ -483,7 +491,7 @@ export function useIntentTransactionHistory({
         setLoading(false)
       }
     },
-    [accountAddress, enabled, pageSize],
+    [accountAddress, enabled, pageSize, trailsConfig],
   )
 
   const refetch = () => {

package/src/widget/hooks/useQuote.ts

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query"
-import { useRef, useMemo } from "react"
+import { useRef } from "react"
 import type { TransactionReceipt } from "viem"
 import { zeroAddress } from "viem"
 import { useIndexerGatewayClient } from "../../indexerClient.js"
@@ -7,14 +7,13 @@ import { getTokenBalancesWithPrices } from "../../tokenBalances.js"
 import { logger } from "../../logger.js"
 import { useSupportedTokens } from "../../tokens.js"
 import { useTrailsClient } from "../../trailsClient.js"
+import { useTrails } from "../../widget/providers/TrailsProvider.js"
 import { getExplorerUrl } from "../../explorer.js"
 import { getFullErrorMessage, getPrettifiedErrorMessage } from "../../error.js"
 import { prepareSend } from "../../prepareSend.js"
 import { abortControllerRegistry } from "../../abortController.js"
 import { TradeType } from "../../prepareSend.js"
 import { getChainInfo } from "../../chains.js"
-import type { TrailsClientConfig } from "../../trailsClient.js"
-import type { IndexerGatewayConfig } from "../../indexerClient.js"
 import type {
   MetaTxnReceipt,
   PrepareSendOptions,
@@ -23,7 +22,6 @@ import type { Chain } from "../../chains.js"
 import type { SupportedToken } from "../../tokens.js"
 import type { TransactionState } from "../../transactions.js"
 import type { PrepareSendFees } from "../../prepareSend.js"
-import type { SequenceEnv } from "../../config.js"
 import { getTokenPrice } from "../../prices.js"
 import { useCommitIntent, useExecuteIntent } from "../../mutations.js"
 import type { CheckoutOnHandlers } from "./useCheckout.js"
@@ -77,6 +75,7 @@ export type UseQuoteProps = {
   } | null
   abortSignal?: AbortSignal
   apiKey?: string | null
+  nodeGatewayEnv?: "prod" | "dev" | "local" | "cors-anywhere"
 }
 
 export type SwapReturn = {
@@ -154,9 +153,7 @@ export function useQuote({
   nodeGatewayEnv,
   abortSignal: externalAbortSignal,
   apiKey,
-}: Partial<
-  UseQuoteProps & { nodeGatewayEnv?: SequenceEnv }
-> = {}): UseQuoteReturn {
+}: Partial<UseQuoteProps> = {}): UseQuoteReturn {
   // Set node gateway environment override for this quote session
   if (nodeGatewayEnv) {
     ;(globalThis as any).__testNodeGatewayEnv = nodeGatewayEnv
@@ -185,17 +182,13 @@ export function useQuote({
       })()
     : abortControllerRef.current.signal
 
-  const trailsClientConfig = useMemo<TrailsClientConfig>(() => {
-    return apiKey ? { apiKey } : {}
-  }, [apiKey])
-  const indexerGatewayClientConfig = useMemo<IndexerGatewayConfig>(() => {
-    return apiKey ? { projectAccessKey: apiKey } : {}
-  }, [apiKey])
+  const { trailsApiKey, trailsApiUrl, sequenceIndexerUrl } = useTrails()
 
-  const trailsClient = useTrailsClient(trailsClientConfig)
-  const indexerGatewayClient = useIndexerGatewayClient(
-    indexerGatewayClientConfig,
-  )
+  const trailsClient = useTrailsClient({
+    apiKey: trailsApiKey,
+    hostname: trailsApiUrl,
+  })
+  const indexerGatewayClient = useIndexerGatewayClient()
 
   const { supportedTokens } = useSupportedTokens()
 
@@ -388,6 +381,7 @@ export function useQuote({
           commitIntentFn: commitIntentMutation.mutateAsync,
           executeIntentFn: executeIntentMutation.mutateAsync,
           checkoutOnHandlers,
+          sequenceIndexerUrl,
         }
 
         logger.console.log("[trails-sdk] options", options)

package/src/widget/hooks/useSendForm.ts

@@ -40,6 +40,7 @@ import { etherlink } from "viem/chains"
 import { logger } from "../../logger.js"
 import { getIsContract } from "../../contractUtils.js"
 import { useTrailsClient } from "../../trailsClient.js"
+import { useTrails } from "../providers/TrailsProvider.js"
 import { useTokenList } from "./useTokenList.js"
 import { useSelectedFeeToken } from "./useSelectedFeeToken.js"
 
@@ -433,6 +434,7 @@ export function useSendForm({
   }, [selectedDestToken, defaultDestToken])
 
   const trailsClient = useTrailsClient()
+  const { sequenceIndexerUrl } = useTrails()
 
   // Get user's token balances for balance checking
   const { filteredTokensFormatted } = useTokenList({
@@ -849,6 +851,7 @@ export function useSendForm({
         checkoutOnHandlers,
         selectedFeeToken: selectedFeeToken ?? undefined,
         walletId,
+        sequenceIndexerUrl,
       }
 
       logger.console.log(
@@ -879,6 +882,7 @@ export function useSendForm({
     selectedDestToken?.decimals,
     recipient,
     destinationTokenAddress,
+    sequenceIndexerUrl,
     selectedDestToken?.symbol,
     selectedDestinationChain?.id,
     selectedToken?.contractAddress,

package/src/widget/index.tsx

@@ -5,3 +5,11 @@ export {
   createModalController,
   TrailsWidget,
 } from "./widget.js"
+
+// Export config provider and hooks
+export {
+  TrailsProvider,
+  useTrails,
+  type TrailsConfig,
+  type SequenceEnv,
+} from "./providers/TrailsProvider.js"