0xtrails 0.13.0 → 0.13.2

package/src/widget/widget.tsx

@@ -6,6 +6,7 @@ import React, {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from "react"
@@ -17,6 +18,7 @@ import {
 } from "./providers/WidgetProviderTree.js"
 import { createWagmiConfig } from "./utils/createWagmiConfig.js"
 import { ShadowPortal } from "./components/ShadowPortal.js"
+import { QuoteDetails } from "./components/QuoteDetails.js"
 import type { Chain, WalletClient, EIP1193Provider } from "viem"
 import {
   createWalletClient,
@@ -84,14 +86,18 @@ import type { Theme } from "../theme.js"
 import type { Token } from "../tokens.js"
 import { getWethAddress } from "../tokens.js"
 import type { IntentTransaction } from "@0xtrails/api"
+import {
+  getQRCodeWallets,
+  getWalletIdFromRdns,
+  wagmiConnectorToWalletId,
+} from "@0xtrails/wallet-registry"
 import type { TransactionState } from "../transactions.js"
+import { useOnrampClient } from "../onrampClient.js"
 import {
-  useQRCodeWallets,
   useWallets,
   getWalletConnectConnector,
   getConnectorsInternal,
-  wagmiConnectorToWalletId,
-  WALLET_RDNS_MAP,
+  type WalletConnector,
 } from "../wallets.js"
 // import { useOpenConnectModal } from "@0xsequence/connect"
 import {
@@ -112,6 +118,7 @@ import Footer from "./components/Footer.js"
 import { Fund } from "./components/Fund.js"
 import { Withdraw } from "./components/Withdraw.js"
 import FundMethods from "./components/FundMethods.js"
+import { MeshExchangeSelection } from "./components/MeshExchangeSelection.js"
 import OnrampPaymentMethods from "./components/OnrampPaymentMethods.js"
 import Modal from "./components/Modal.js"
 import { Pay } from "./components/Pay.js"
@@ -136,6 +143,9 @@ import { WalletList } from "./components/WalletList.js"
 import { useCheckout } from "./hooks/useCheckout.js"
 import { useDebugScreens } from "./hooks/useDebugScreens.js"
 import { useExternalFundingReceiptSync } from "./hooks/useExternalFundingReceiptSync.js"
+import { getWidgetOnrampConfig } from "./utils/trailsOnrampConfig.js"
+import type { TrailsOnRampConfig } from "../onramp/TrailsOnRampProvider.js"
+import { trailsOnramp, type OnrampFactory } from "../onramp/trailsOnramp.js"
 import { useScreenTracking } from "./hooks/useScreenTracking.js"
 import { useEarnPool } from "./hooks/useEarnPool.js"
 
@@ -177,7 +187,7 @@ import {
 } from "../utils/address.js"
 import { isWalletConnectConnector } from "../walletUtils.js"
 import type { SendOptions, SwapReturn } from "./hooks/useQuote.js"
-import { hasFailedOrAbortedTransaction } from "./utils/transactionFailure.js"
+import { hasAnyFailedOrAbortedTransactions } from "./utils/transactionFailure.js"
 import {
   shouldClearTransferFlowOnNavigate,
   shouldRedirectToConnect,
@@ -202,6 +212,7 @@ export type FundMethodListOption =
   | "connected-wallet"
   | "crypto-transfer"
   | "cc-onramp"
+  | "exchange"
   | "exchange-onramp"
 
 export const WidgetFundMethod = {
@@ -219,6 +230,7 @@ export type TrailsWidgetProps = {
   trailsApiUrl?: string
   trailsAppUrl?: string
   sequenceNodeGatewayUrl?: string
+  sequenceMetadataUrl?: string
   sequenceApiUrl?: string
   toAddress?: string | null
   toAmount?: string | null
@@ -322,7 +334,10 @@ export type TrailsWidgetProps = {
      * - "connected-wallet"
      * - "crypto-transfer"
      * - "cc-onramp"
-     * - "exchange-onramp"
+     * - "exchange"
+     *
+     * Preferred values: "connected-wallet", "crypto-transfer", "exchange", "cc-onramp".
+     * Legacy alias "exchange-onramp" is still accepted.
      *
      * @example ["connected-wallet", "crypto-transfer"]
      */
@@ -348,27 +363,40 @@ export type TrailsWidgetProps = {
   payMessage?: string
   isSmartWallet?: boolean
   /**
-   * Optional onramp factory function (e.g., trailsOnramp from @0xtrails/onramp)
-   * If provided, enables exchange funding options in the widget
+   * Optional onramp configuration or factory.
+   * If provided, enables exchange funding options in the widget.
    *
    * @example
    * ```tsx
-   * import { trailsOnramp } from "@0xtrails/onramp"
-   * <TrailsWidget onramp={trailsOnramp({ config: { exchanges: ['coinbase'] } })} />
+   * <TrailsWidget
+   *   onramp={{
+   *     mesh: {
+   *       environment: "production",
+   *     },
+   *   }}
+   * />
    * ```
    */
-  onramp?: (handlers: {
-    setCurrentScreen: (screen: Screen) => void
-    onComplete?: (transferData: OnrampTransferResult) => void
-    onError?: (error: unknown) => void
-    onBack?: () => void
-    toTokenSymbol?: string
-    toTokenAmount?: string
-    toChainId?: number
-    toRecipientAddress?: string
-    toAmountUsd?: number
-    apiKey?: string
-  }) => React.ReactElement
+  onramp?:
+    | TrailsOnRampConfig
+    | ((handlers: {
+        setCurrentScreen: (screen: Screen) => void
+        onComplete?: (transferData: OnrampTransferResult) => void
+        onError?: (error: unknown) => void
+        onBack?: () => void
+        toTokenSymbol?: string
+        toTokenAmount?: string
+        toChainId?: number
+        toRecipientAddress?: string
+        toAmountUsd?: number
+        selectedExchange?: {
+          integrationId: string
+          exchangeKey: string
+          exchangeName: string
+        }
+        apiKey?: string
+        hostname?: string
+      }) => React.ReactElement)
 }
 
 export interface TrailsWidgetRef {
@@ -509,28 +537,15 @@ const useTransactionState = (
   const [destinationConfirmationCalled, setDestinationConfirmationCalled] =
     useState(false)
 
-  // Use refs to store the latest callback functions to avoid dependency issues
-  const onOriginConfirmationRef = useRef(onOriginConfirmation)
-  const onDestinationConfirmationRef = useRef(onDestinationConfirmation)
-
-  // Update refs when callbacks change
-  useEffect(() => {
-    onOriginConfirmationRef.current = onOriginConfirmation
-  }, [onOriginConfirmation])
-
-  useEffect(() => {
-    onDestinationConfirmationRef.current = onDestinationConfirmation
-  }, [onDestinationConfirmation])
-
   useEffect(() => {
     if (
-      onOriginConfirmationRef.current &&
+      onOriginConfirmation &&
       originTxHash &&
       originChainId &&
       !originConfirmationCalled
     ) {
       try {
-        onOriginConfirmationRef.current({
+        onOriginConfirmation({
           txHash: originTxHash,
           chainId: originChainId,
           sessionId: getSessionId(),
@@ -543,17 +558,22 @@ const useTransactionState = (
       }
       setOriginConfirmationCalled(true)
     }
-  }, [originTxHash, originChainId, originConfirmationCalled])
+  }, [
+    originTxHash,
+    originChainId,
+    originConfirmationCalled,
+    onOriginConfirmation,
+  ])
 
   useEffect(() => {
     if (
-      onDestinationConfirmationRef.current &&
+      onDestinationConfirmation &&
       destinationTxHash &&
       destinationChainId &&
       !destinationConfirmationCalled
     ) {
       try {
-        onDestinationConfirmationRef.current({
+        onDestinationConfirmation({
           txHash: destinationTxHash,
           chainId: destinationChainId,
           sessionId: getSessionId(),
@@ -566,7 +586,12 @@ const useTransactionState = (
       }
       setDestinationConfirmationCalled(true)
     }
-  }, [destinationTxHash, destinationChainId, destinationConfirmationCalled])
+  }, [
+    destinationTxHash,
+    destinationChainId,
+    destinationConfirmationCalled,
+    onDestinationConfirmation,
+  ])
 
   // Monitor transaction states for completion - this runs regardless of which screen is active
   useEffect(() => {
@@ -660,8 +685,9 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
   } = useWidgetProps()
   const { address, chainId, connector } = useAccount()
   const connectors = useConnectors()
-  const { trailsApiKey } = useTrails()
-  const qrCodeWallets = useQRCodeWallets()
+  const { trailsApiKey, trailsApiUrl } = useTrails()
+  const onrampClient = useOnrampClient()
+  const qrCodeWallets = useMemo(() => getQRCodeWallets(), [])
   // const { setOpenConnectModal } = useOpenConnectModal()
 
   // Check if the current connector is a Sequence wallet
@@ -676,7 +702,15 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
   const { wallets: allWallets } = useWallets()
   const { selectedToken, setSelectedToken, clearSelectedToken } =
     useSelectedToken()
-  const { onramp: onrampFactory } = useWidgetProps()
+  const { onramp } = useWidgetProps()
+  const meshOnrampConfig = getWidgetOnrampConfig(onramp)
+  const onrampFactory: OnrampFactory | undefined =
+    typeof onramp === "function"
+      ? (onramp as OnrampFactory)
+      : meshOnrampConfig
+        ? trailsOnramp({ config: meshOnrampConfig })
+        : undefined
+  const meshEnvironment = meshOnrampConfig?.mesh?.environment ?? "production"
 
   // Modal state is managed by TrailsModalProvider
   const {
@@ -813,7 +847,12 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
   const [previousAddress, setPreviousAddress] = useState<string | undefined>(
     address,
   )
-  const { selectedFundMethod, setSelectedFundMethod } = useSelectedFundMethod()
+  const {
+    selectedFundMethod,
+    selectedMeshExchange,
+    setSelectedFundMethod,
+    setSelectedMeshExchange,
+  } = useSelectedFundMethod()
   const fundMethodSelectionStartRef = useRef(selectedFundMethod)
   const clearStateForFundMethodSwitch = useCallback(
     (nextMethod: typeof selectedFundMethod) => {
@@ -826,6 +865,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           setSellAmount,
           setBuyAmount,
           setPrepareSendQuote,
+          setSelectedMeshExchange,
         },
       )
 
@@ -833,7 +873,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         fundMethodSelectionStartRef.current = nextMethod
       }
     },
-    [clearSelectedToken, setSellAmount, setBuyAmount],
+    [clearSelectedToken, setSellAmount, setBuyAmount, setSelectedMeshExchange],
   )
   const { selectedPool, setSelectedPool } = useEarnPool()
   const [selectedWalletId, setSelectedWalletId] = useState<string | null>(
@@ -1002,8 +1042,8 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
 
   const defaultButtonText = modeToButtonText[currentMode] ?? "Pay"
 
-  // Validate widget props
-  useEffect(() => {
+  // Validate widget props from current props/mode only.
+  const propValidationError = useMemo(() => {
     const isValidToAmount = isValidNumeric(toAmount)
     const isValidToChainId = isValidInteger(toChainId)
     const isValidToToken = isValidToToToken(toToken)
@@ -1031,8 +1071,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
       isValidToAddress &&
       isValidPaymasterUrls
     ) {
-      setError(null)
-      return
+      return null
     }
 
     // Validate toAmount - must be numeric if provided
@@ -1041,8 +1080,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         "[trails-sdk] Invalid toAmount prop: must be numeric. Received:",
         toAmount,
       )
-      setError("Invalid toAmount: must be a numeric value")
-      return
+      return "Invalid toAmount: must be a numeric value"
     }
 
     // Validate toChainId - must be numeric if provided
@@ -1051,8 +1089,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         "[trails-sdk] Invalid toChainId prop: must be numeric. Received:",
         toChainId,
       )
-      setError("Invalid toChainId: must be a numeric value")
-      return
+      return "Invalid toChainId: must be a numeric value"
     }
 
     // Validate toToken - must be "ETH", "USDC", or a valid hex address
@@ -1061,10 +1098,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         "[trails-sdk] Invalid toToken prop: must be a valid token symbol or a valid hex address. Received:",
         toToken,
       )
-      setError(
-        "Invalid toToken: must be a valid token symbol or a valid hex address",
-      )
-      return
+      return "Invalid toToken: must be a valid token symbol or a valid hex address"
     }
 
     if (!isValidToAddress) {
@@ -1072,8 +1106,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         "[trails-sdk] Invalid toAddress prop: must be a valid hex address. Received:",
         toAddress,
       )
-      setError("Invalid toAddress: must be a valid hex address")
-      return
+      return "Invalid toAddress: must be a valid hex address"
     }
 
     // Validate paymasterUrls
@@ -1082,29 +1115,28 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         "[trails-sdk] Invalid paymasterUrls prop: url must be a valid URL. Received:",
         invalidPaymasterUrl,
       )
-      setError("Invalid paymasterUrls: url must be a valid URL")
-      return
+      return "Invalid paymasterUrls: url must be a valid URL"
     }
 
     if (currentMode === "fund") {
       if (toAmount) {
-        setError("toAmount is not allowed in fund mode")
-        return
+        return "toAmount is not allowed in fund mode"
       }
       if (!toToken) {
-        setError("toToken is required in fund mode")
-        return
+        return "toToken is required in fund mode"
       }
     }
 
     if (currentMode === "pay") {
       if (!toToken) {
-        setError("toToken is required in pay mode")
-        return
+        return "toToken is required in pay mode"
       }
     }
+    return null
   }, [toAmount, toChainId, toToken, currentMode, toAddress, paymasterUrls])
 
+  const displayError = propValidationError || error
+
   const walletClient = useWalletManager(address, chainId, connector)
 
   // Function to save wallet ID to localStorage
@@ -1242,12 +1274,28 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     handleTransferComplete,
   )
 
-  // Auto-navigate from pending → receipt when first transaction is aborted or failed
-  const firstTx = transactionStates?.[0]
-  useScreenGuard(
-    screen === "pending" && !!firstTx && hasFailedOrAbortedTransaction(firstTx),
-    "receipt",
+  const effectivePrepareSendQuote = hostTransactionQuote ?? prepareSendQuote
+  const effectiveTransactionStates =
+    hostTransactionStates.length > 0 ? hostTransactionStates : transactionStates
+  const hostCompletionSeconds = useMemo(() => {
+    if (
+      hostTransactionState.status !== "success" ||
+      !hostTransactionTimestamp
+    ) {
+      return null
+    }
+
+    return Math.max(0, toSeconds(elapsed(hostTransactionTimestamp)))
+  }, [hostTransactionState.status, hostTransactionTimestamp])
+  const displayTotalCompletionSeconds =
+    hostCompletionSeconds ?? totalCompletionSeconds
+
+  // Auto-navigate from pending → receipt when any transaction is aborted or failed.
+  // This prevents the tracker from staying on pending when non-first steps fail.
+  const hasFailedTransactionState = hasAnyFailedOrAbortedTransactions(
+    effectiveTransactionStates,
   )
+  useScreenGuard(screen === "pending" && hasFailedTransactionState, "receipt")
 
   const { checkoutOnHandlers } = useCheckout({
     onCheckoutStart,
@@ -1267,12 +1315,12 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
   useExternalFundingReceiptSync({
     enabled:
       isExternalFundingMethod(selectedFundMethod) &&
-      !!prepareSendQuote?.intentId &&
+      !!effectivePrepareSendQuote?.intentId &&
       (screen === "direct-transfer-screen" ||
         screen === "onramp-confirmation" ||
         screen === "pending"),
-    intentId: prepareSendQuote?.intentId ?? undefined,
-    fallbackTransactionStates: prepareSendQuote?.transactionStates,
+    intentId: effectivePrepareSendQuote?.intentId ?? undefined,
+    fallbackTransactionStates: effectivePrepareSendQuote?.transactionStates,
     setTransactionStates,
     onStatusUpdate: checkoutOnHandlers?.triggerCheckoutStatusUpdate,
     onFundingObserved: () => {
@@ -1352,28 +1400,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     navigate,
   ])
 
-  useEffect(() => {
-    if (!hostTransactionQuote) {
-      return
-    }
-    setPrepareSendQuote(hostTransactionQuote)
-  }, [hostTransactionQuote])
-
-  useEffect(() => {
-    if (hostTransactionStates.length === 0) {
-      return
-    }
-    setTransactionStates(hostTransactionStates)
-  }, [hostTransactionStates, setTransactionStates])
-
-  useEffect(() => {
-    if (hostTransactionState.status === "success" && hostTransactionTimestamp) {
-      setTotalCompletionSeconds(
-        Math.max(0, toSeconds(elapsed(hostTransactionTimestamp))),
-      )
-    }
-  }, [hostTransactionState.status, hostTransactionTimestamp])
-
   // Handle account changes - navigate back to token list for specific screens
   useEffect(() => {
     if (previousAddress && address && previousAddress !== address) {
@@ -1442,7 +1468,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
 
   const handleConnectWallet = async (
     walletId: string,
-    providedConnector?: Connector,
+    providedConnector?: WalletConnector,
   ) => {
     try {
       setError(null)
@@ -1457,7 +1483,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         const eip6963Connector = connectors.find((c) => {
           if (c.type !== "injected") return false
           const rdns = (c as EIP6963Connector).info?.rdns
-          if (rdns && WALLET_RDNS_MAP[rdns] === walletId) {
+          if (getWalletIdFromRdns(rdns) === walletId) {
             logger.console.log(
               `[trails-sdk] Found EIP-6963 connector for ${walletId} with rdns ${rdns}`,
             )
@@ -2043,7 +2069,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     )
     logger.console.log("[trails-sdk] handleOnrampComplete state:", {
       hasOnrampContinueSend: !!onrampContinueSend,
-      hasPrepareSendQuote: !!prepareSendQuote,
+      hasPrepareSendQuote: !!effectivePrepareSendQuote,
       screen,
       onrampContinueSendInProgress,
     })
@@ -2092,11 +2118,11 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
       logger.console.log(
         "[trails-sdk] No onrampContinueSend callback, showing pending screen",
       )
-      if (prepareSendQuote) {
+      if (effectivePrepareSendQuote) {
         logger.console.log(
           "[trails-sdk] Setting transaction states from prepareSendQuote",
         )
-        setTransactionStates(prepareSendQuote.transactionStates)
+        setTransactionStates(effectivePrepareSendQuote.transactionStates)
       }
     }
   }
@@ -2229,59 +2255,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     }
   }
 
-  const _handleNavigateToOnramp = (
-    props: {
-      toTokenSymbol: string
-      toTokenAmount: string
-      toChainId: number
-      toRecipientAddress: string
-      toAmountUsd?: number
-    },
-    onRampMethod?: string,
-    quote?: PrepareSendQuote | null,
-    continueSend?: () => Promise<void>,
-  ) => {
-    setPrepareSendQuote(quote ?? null)
-    setOnrampProps(props)
-    setOnrampContinueSend(() => continueSend || null)
-
-    // Render onramp component directly - it manages its own routing
-    const targetScreen =
-      onRampMethod && onRampMethod === "onramp-meld"
-        ? "onramp-meld"
-        : "onramp-mesh"
-    navigate(targetScreen)
-
-    if (
-      targetScreen === "onramp-meld" &&
-      continueSend &&
-      !onrampContinueSendInProgress
-    ) {
-      logger.console.log(
-        "[trails-sdk] Starting intent execution after navigating to onramp-meld screen",
-      )
-      setOnrampContinueSendInProgress(true)
-      // Call asynchronously to avoid blocking navigation
-      Promise.resolve()
-        .then(() => continueSend())
-        .then(() => {
-          logger.console.log(
-            "[trails-sdk] onrampContinueSend completed successfully",
-          )
-        })
-        .catch((error) => {
-          logger.console.error(
-            "[trails-sdk] Error executing intent after onramp deposit:",
-            error,
-          )
-          handleSendError(error as Error)
-        })
-        .finally(() => {
-          setOnrampContinueSendInProgress(false)
-        })
-    }
-  }
-
   const handleSendError = (error: Error | string | null) => {
     if (error) {
       logger.console.error("[trails-sdk] Error sending transaction", error)
@@ -2345,6 +2318,11 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
       })()
       return
     }
+
+    if (selectedFundMethod === "onramp-mesh") {
+      return
+    }
+
     navigate("wallet-confirmation")
   }
 
@@ -2511,15 +2489,69 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
               }
             }}
             onSelectOnrampExchange={() => {
+              clearSelectedToken()
+              setSellAmount("")
+              setBuyAmount("")
+              setPrepareSendQuote(null)
+              setSelectedMeshExchange(null)
               clearStateForFundMethodSwitch("onramp-mesh")
               if (currentMode === "fund") {
-                navigate("fund-form")
+                navigate("mesh-exchanges")
               } else {
                 goHome()
               }
             }}
           />
         )
+      case "mesh-exchanges":
+        return (
+          <MeshExchangeSelection
+            onBack={() => navigate("fund-methods")}
+            onSelectExchange={async (exchange) => {
+              if (
+                selectedToken &&
+                selectedToken.chainId !== undefined &&
+                trailsApiKey &&
+                trailsApiUrl
+              ) {
+                try {
+                  const response = await onrampClient.getMeshSupportedTokens({
+                    environment: meshEnvironment,
+                    integrationId: exchange.integrationId,
+                    chainIds: [selectedToken.chainId.toString()],
+                  })
+
+                  const isSupported = (response.tokens || []).some(
+                    (token) =>
+                      Number(token.chainId) === selectedToken.chainId &&
+                      token.symbol?.toUpperCase() ===
+                        selectedToken.symbol?.toUpperCase(),
+                  )
+
+                  if (!isSupported) {
+                    clearSelectedToken()
+                    setSellAmount("")
+                    setBuyAmount("")
+                    setPrepareSendQuote(null)
+                  }
+                } catch (error) {
+                  logger.console.warn(
+                    "[trails-sdk] Failed to validate Mesh exchange token support, clearing selected token:",
+                    error,
+                  )
+                  clearSelectedToken()
+                  setSellAmount("")
+                  setBuyAmount("")
+                  setPrepareSendQuote(null)
+                }
+              }
+
+              setSelectedFundMethod("onramp-mesh")
+              setSelectedMeshExchange(exchange)
+              navigate("fund-form", { backTarget: "mesh-exchanges" })
+            }}
+          />
+        )
       case "payment-methods":
         return (
           <PaymentMethods
@@ -2713,7 +2745,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
               // Navigate to pending screen when intent is executed
               navigate("pending")
             }}
-            quote={prepareSendQuote}
+            quote={effectivePrepareSendQuote}
             onRampQuote={onrampProviderQuote}
             widgetCreationParams={widgetCreationParams}
             onCreateWidgetSession={createWidgetSession}
@@ -2748,7 +2780,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onRetry={
               isHookInitiated ? handleHookRetry : handleWalletConfirmRetry
             }
-            quote={prepareSendQuote}
+            quote={effectivePrepareSendQuote}
             onRampQuote={onrampProviderQuote}
           />
         )
@@ -2775,7 +2807,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
               }
             }}
             onChangeWallet={() => navigate("qr-code-wallet-select")}
-            quote={prepareSendQuote}
+            quote={effectivePrepareSendQuote}
             selectedWalletId={qrCodeWalletId}
             walletOptions={qrCodeWallets}
             onIntentExecuted={() => navigate("pending")}
@@ -2785,9 +2817,10 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         return (
           <TransferPending
             onElapsedTime={handleElapsedTime}
-            transactionStates={transactionStates}
-            quote={prepareSendQuote}
+            transactionStates={effectiveTransactionStates}
+            quote={effectivePrepareSendQuote}
             onRampQuote={onrampProviderQuote}
+            fundMethod={selectedFundMethod}
             timestamp={hostTransactionTimestamp ?? undefined}
             onContinue={() => {
               logger.console.log("[trails-sdk] onContinue called")
@@ -2810,9 +2843,9 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onSendAnother={receiptOnSendAnother}
             onClose={handleCloseModal}
             renderInline={renderInline}
-            transactionStates={transactionStates}
-            totalCompletionSeconds={totalCompletionSeconds ?? undefined}
-            quote={prepareSendQuote}
+            transactionStates={effectiveTransactionStates}
+            totalCompletionSeconds={displayTotalCompletionSeconds ?? undefined}
+            quote={effectivePrepareSendQuote}
             showCloseButton={false}
             actionButtonText={receiptActionText}
             onRampQuote={onrampProviderQuote}
@@ -2862,22 +2895,39 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         try {
           return (
             <div className="flex flex-col h-full">
-              {onrampFactory({
-                setCurrentScreen: (screen) => {
-                  navigate(screen)
-                },
-                onComplete: handleOnrampComplete,
-                onError: (error) => {
-                  logger.console.error("[trails-sdk] Onramp error:", error)
-                },
-                onBack: handleBack,
-                toTokenSymbol: onrampProps?.toTokenSymbol,
-                toTokenAmount: onrampProps?.toTokenAmount,
-                toChainId: onrampProps?.toChainId,
-                toRecipientAddress: onrampProps?.toRecipientAddress,
-                toAmountUsd: onrampProps?.toAmountUsd,
-                apiKey: trailsApiKey,
-              })}
+              <div className="flex-1 min-h-0">
+                {onrampFactory({
+                  setCurrentScreen: (screen) => {
+                    navigate(screen as Screen)
+                  },
+                  onComplete: (transferData) => {
+                    void handleOnrampComplete(
+                      transferData as OnrampTransferResult,
+                    )
+                  },
+                  onError: (error) => {
+                    logger.console.error("[trails-sdk] Onramp error:", error)
+                  },
+                  onBack: handleBack,
+                  toTokenSymbol: onrampProps?.toTokenSymbol,
+                  toTokenAmount: onrampProps?.toTokenAmount,
+                  toChainId: onrampProps?.toChainId,
+                  toRecipientAddress: onrampProps?.toRecipientAddress,
+                  toAmountUsd: onrampProps?.toAmountUsd,
+                  selectedExchange: selectedMeshExchange || undefined,
+                  apiKey: trailsApiKey,
+                  hostname: trailsApiUrl,
+                })}
+              </div>
+              {effectivePrepareSendQuote && (
+                <div className="mt-4">
+                  <QuoteDetails
+                    quote={effectivePrepareSendQuote}
+                    showContent={true}
+                    compact={true}
+                  />
+                </div>
+              )}
             </div>
           )
         } catch (error) {
@@ -2968,7 +3018,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
               id: wallet.id,
               name: wallet.name,
               icon: wallet.icon,
-              connector: wallet.connector,
             }))}
           />
         )
@@ -3085,7 +3134,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             }}
             selectedWalletId={selectedWalletId || ""}
             isConnecting={isConnecting}
-            error={error}
+            error={displayError}
             showRetry={showWalletConnectionRetry}
           />
         )
@@ -3163,14 +3212,14 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             >
               {renderScreenContent()}
               {/* Error Display */}
-              {error && (
+              {displayError && (
                 <div className="mt-2">
                   <ErrorDisplay
                     errorPrettified={getPrettifiedErrorMessage(
-                      error,
+                      displayError,
                       "An error occurred",
                     )}
-                    error={error}
+                    error={displayError}
                     severity="error"
                   />
                 </div>
@@ -3294,6 +3343,7 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       sequenceApiUrl: props.sequenceApiUrl,
       sequenceIndexerUrl: props.sequenceIndexerUrl,
       sequenceNodeGatewayUrl: props.sequenceNodeGatewayUrl,
+      sequenceMetadataUrl: props.sequenceMetadataUrl,
       walletConnectProjectId: props.walletConnectProjectId,
       slippageTolerance: props.slippageTolerance
         ? String(props.slippageTolerance)