0xtrails 0.13.1 → 0.13.2

package/src/widget/widget.tsx

@@ -18,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,
@@ -85,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 {
@@ -113,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"
@@ -137,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"
 
@@ -203,6 +212,7 @@ export type FundMethodListOption =
   | "connected-wallet"
   | "crypto-transfer"
   | "cc-onramp"
+  | "exchange"
   | "exchange-onramp"
 
 export const WidgetFundMethod = {
@@ -220,6 +230,7 @@ export type TrailsWidgetProps = {
   trailsApiUrl?: string
   trailsAppUrl?: string
   sequenceNodeGatewayUrl?: string
+  sequenceMetadataUrl?: string
   sequenceApiUrl?: string
   toAddress?: string | null
   toAmount?: string | null
@@ -323,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"]
      */
@@ -349,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 {
@@ -658,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
@@ -674,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 {
@@ -811,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) => {
@@ -824,6 +865,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           setSellAmount,
           setBuyAmount,
           setPrepareSendQuote,
+          setSelectedMeshExchange,
         },
       )
 
@@ -831,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>(
@@ -1426,7 +1468,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
 
   const handleConnectWallet = async (
     walletId: string,
-    providedConnector?: Connector,
+    providedConnector?: WalletConnector,
   ) => {
     try {
       setError(null)
@@ -1441,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}`,
             )
@@ -2213,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)
@@ -2329,6 +2318,11 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
       })()
       return
     }
+
+    if (selectedFundMethod === "onramp-mesh") {
+      return
+    }
+
     navigate("wallet-confirmation")
   }
 
@@ -2495,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
@@ -2772,6 +2820,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             transactionStates={effectiveTransactionStates}
             quote={effectivePrepareSendQuote}
             onRampQuote={onrampProviderQuote}
+            fundMethod={selectedFundMethod}
             timestamp={hostTransactionTimestamp ?? undefined}
             onContinue={() => {
               logger.console.log("[trails-sdk] onContinue called")
@@ -2846,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) {
@@ -2952,7 +3018,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
               id: wallet.id,
               name: wallet.name,
               icon: wallet.icon,
-              connector: wallet.connector,
             }))}
           />
         )
@@ -3278,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)