0xtrails 0.6.6 → 0.7.0

package/src/widget/hooks/useWalletConnectUri.tsx

@@ -0,0 +1,228 @@
+import { useEffect, useCallback, useRef, useState } from "react"
+import { useConnect } from "wagmi"
+import { walletConnect } from "wagmi/connectors"
+import { useTrails } from "../providers/TrailsProvider.js"
+import { logger } from "../../logger.js"
+
+// Local singleton to avoid multiple Core initializations
+let wcConnectorSingleton: ReturnType<typeof walletConnect> | null = null
+function getWalletConnectConnector(projectId: string) {
+  if (!wcConnectorSingleton) {
+    logger.console.log(
+      "[trails-sdk] [useWalletConnectUri] Creating new connector with projectId:",
+      projectId,
+    )
+    wcConnectorSingleton = walletConnect({
+      projectId: projectId,
+      showQrModal: false,
+    })
+  }
+  return wcConnectorSingleton
+}
+
+/**
+ * Hook to get WalletConnect URI
+ * Returns the current WalletConnect URI and automatically starts connection
+ */
+export function useWalletConnectUri(projectId?: string): {
+  walletConnectUri: string | null
+  isConnecting: boolean
+  error: Error | null
+  reconnect: () => void
+} {
+  const config = useTrails()
+  const finalProjectId = projectId || config.walletConnectProjectId
+  const { connect, connectors, status } = useConnect() as any
+  const [wcUri, setWcUri] = useState<string | null>(null)
+  const [error, setError] = useState<Error | null>(null)
+  const listenerRef = useRef<(() => void) | null>(null)
+  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  // Debounced setWcUri to prevent rapid QR code changes
+  const debouncedSetWcUri = useCallback((uri: string | null) => {
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current)
+    }
+
+    debounceTimeoutRef.current = setTimeout(() => {
+      setWcUri(uri)
+    }, 500) // 500ms debounce delay
+  }, [])
+
+  const wcConnectorFromConfig = connectors.find((c: any) =>
+    (c.id || "").toLowerCase().includes("walletconnect"),
+  )
+
+  const handleConnect = useCallback(
+    async (force: boolean = false) => {
+      if (!finalProjectId) {
+        logger.console.error(
+          "[trails-sdk] [useWalletConnectUri] No projectId provided",
+        )
+        setError(new Error("WalletConnect projectId is required"))
+        return
+      }
+
+      logger.console.log("[trails-sdk] [useWalletConnectUri] handleConnect", {
+        status,
+        wcUri,
+      })
+
+      if ((status === "pending" || status === "success") && !force) return
+
+      const makeConnector = () => getWalletConnectConnector(finalProjectId)
+      const connector = wcConnectorFromConfig || makeConnector()
+
+      logger.console.log(
+        "[trails-sdk] [useWalletConnectUri] wcConnectorFromConfig",
+        wcConnectorFromConfig,
+      )
+      logger.console.log(
+        "[trails-sdk] [useWalletConnectUri] connector",
+        connector,
+      )
+
+      try {
+        logger.console.log(
+          "[trails-sdk] [useWalletConnectUri] Starting connection...",
+        )
+
+        // Set up message listener for display_uri events (like ConnectKit does)
+        const handleMessage = (message: any) => {
+          const { type, data } = message
+          logger.console.log(
+            "[trails-sdk] [useWalletConnectUri] Message received:",
+            type,
+            data,
+          )
+          if (type === "display_uri") {
+            logger.console.log(
+              "[trails-sdk] [useWalletConnectUri] Setting URI from display_uri event:",
+              data,
+            )
+            debouncedSetWcUri(data)
+            setError(null)
+          }
+        }
+
+        // Set up disconnect handler to regenerate QR code
+        const handleDisconnect = async () => {
+          logger.console.log(
+            "[trails-sdk] [useWalletConnectUri] Disconnected, regenerating QR code",
+          )
+          debouncedSetWcUri(null)
+          // Try to reconnect
+          try {
+            await connect({ connector })
+          } catch (error: any) {
+            logger.console.error(
+              "[trails-sdk] [useWalletConnectUri] Reconnection error:",
+              error,
+            )
+            setError(error instanceof Error ? error : new Error(String(error)))
+          }
+        }
+
+        // Add listeners to connector emitter
+        if ((connector as any).emitter) {
+          logger.console.log(
+            "[trails-sdk] [useWalletConnectUri] Adding listeners to connector emitter",
+          )
+          ;(connector as any).emitter.on("message", handleMessage)
+          ;(connector as any).emitter.on("disconnect", handleDisconnect)
+
+          // Store listeners for cleanup
+          listenerRef.current = () => {
+            ;(connector as any).emitter.off("message", handleMessage)
+            ;(connector as any).emitter.off("disconnect", handleDisconnect)
+          }
+        } else {
+          logger.console.log(
+            "[trails-sdk] [useWalletConnectUri] No emitter found on connector",
+          )
+        }
+
+        await connect({ connector })
+      } catch (err) {
+        logger.console.error(
+          "[trails-sdk] [useWalletConnectUri] connect error",
+          err,
+        )
+        const error = err instanceof Error ? err : new Error(String(err))
+        setError(error)
+
+        // If user rejected, try to regenerate QR code
+        if ((err as any).code === 4001) {
+          logger.console.log(
+            "[trails-sdk] [useWalletConnectUri] User rejected, regenerating QR code",
+          )
+          debouncedSetWcUri(null)
+          // Try to reconnect after a short delay
+          setTimeout(() => {
+            handleConnect()
+          }, 0)
+        }
+      }
+    },
+    [
+      connect,
+      wcConnectorFromConfig,
+      finalProjectId,
+      status,
+      wcUri,
+      debouncedSetWcUri,
+    ],
+  )
+
+  // Auto-start WalletConnect connection when component mounts (if not already connected)
+  useEffect(() => {
+    if (!wcUri && status !== "pending" && status !== "success") {
+      logger.console.log(
+        "[trails-sdk] [useWalletConnectUri] Auto-starting connection on mount",
+      )
+      handleConnect()
+    }
+  }, [wcUri, status, handleConnect])
+
+  // Force QR code regeneration when wcUri is cleared
+  useEffect(() => {
+    if (!wcUri && status !== "pending" && status !== "success") {
+      logger.console.log(
+        "[trails-sdk] [useWalletConnectUri] URI cleared, regenerating QR code",
+      )
+      handleConnect()
+    }
+  }, [wcUri, status, handleConnect])
+
+  // Cleanup listeners on unmount
+  useEffect(() => {
+    return () => {
+      try {
+        // Clean up the listener function if it exists
+        if (listenerRef.current) {
+          listenerRef.current()
+        }
+        // Clean up debounce timeout
+        if (debounceTimeoutRef.current) {
+          clearTimeout(debounceTimeoutRef.current)
+        }
+      } catch (err) {
+        logger.console.error(
+          "[trails-sdk] [useWalletConnectUri] Cleanup error:",
+          err,
+        )
+      }
+    }
+  }, [])
+
+  return {
+    walletConnectUri: wcUri,
+    isConnecting: status === "pending",
+    error,
+    reconnect: () => {
+      setError(null)
+      debouncedSetWcUri(null)
+      handleConnect(true)
+    },
+  }
+}

package/src/widget/hooks/useWidgetProps.tsx

@@ -6,7 +6,9 @@ interface WidgetPropsContextType {
   props: TrailsWidgetProps
 }
 
-const WidgetPropsContext = createContext<WidgetPropsContextType | null>(null)
+export const WidgetPropsContext = createContext<WidgetPropsContextType | null>(
+  null,
+)
 
 export function WidgetPropsProvider({
   children,

package/src/widget/index.tsx

@@ -13,3 +13,15 @@ export {
   type TrailsConfig,
   type SequenceEnv,
 } from "./providers/TrailsProvider.js"
+
+// Export modal provider and hooks
+export {
+  TrailsModalProvider,
+  useTrailsModal,
+  type TrailsModalContextType,
+  type ModalSelectionParams,
+} from "./providers/TrailsModalProvider.js"
+
+// Export TrailsHookModal for use with useTrailsSendTransaction
+// Must be rendered inside WagmiProvider for the modal to work
+export { TrailsHookModal } from "./components/TrailsHookModal.js"

package/src/widget/providers/TrailsModalProvider.tsx

@@ -0,0 +1,195 @@
+import { createContext, useContext, useState, useCallback, useRef } from "react"
+import { AnimatePresence } from "motion/react"
+import { logger } from "../../logger.js"
+import type { PrepareSendQuote } from "../../prepareSend.js"
+import type { TransactionState } from "../../transactions.js"
+import { TrailsHookModal } from "../components/TrailsHookModal.js"
+
+export interface ModalSelectionParams {
+  fromTokenAddress: string
+  fromChainId: number
+  fromAmount?: string
+}
+
+export type HostTransactionStatus =
+  | "idle"
+  | "awaiting-origin"
+  | "awaiting-amount"
+  | "confirmation"
+  | "pending"
+  | "success"
+  | "error"
+
+export interface HostTransactionDetails {
+  to?: string
+  tokenAddress?: string
+  tokenAmount?: string
+  toChainId?: number
+  data?: string
+}
+
+export interface HostTransactionResultLinks {
+  originTxHash?: string
+  originExplorerUrl?: string
+  destinationTxHash?: string
+  destinationExplorerUrl?: string
+}
+
+export interface HostTransactionState {
+  status: HostTransactionStatus
+  details?: HostTransactionDetails
+  error?: string
+  result?: HostTransactionResultLinks
+  retryEnabled?: boolean
+}
+
+export interface TrailsModalContextType {
+  isModalOpen: boolean
+  openModal: () => void
+  closeModal: () => void
+  pendingSelection?: {
+    resolve: (selection: ModalSelectionParams) => void
+    reject: (error: Error) => void
+    requireAmountInput?: boolean
+  }
+  setPendingSelection: (
+    pending:
+      | {
+          resolve: (selection: ModalSelectionParams) => void
+          reject: (error: Error) => void
+          requireAmountInput?: boolean
+        }
+      | undefined,
+  ) => void
+  hostTransactionState: HostTransactionState
+  setHostTransactionState: (
+    next:
+      | HostTransactionState
+      | ((prev: HostTransactionState) => HostTransactionState),
+  ) => void
+  resetHostTransactionState: () => void
+  hostTransactionQuote: PrepareSendQuote | null
+  setHostTransactionQuote: (
+    quote:
+      | PrepareSendQuote
+      | null
+      | ((prev: PrepareSendQuote | null) => PrepareSendQuote | null),
+  ) => void
+  hostTransactionStates: TransactionState[]
+  setHostTransactionStates: (
+    states:
+      | TransactionState[]
+      | ((prev: TransactionState[]) => TransactionState[]),
+  ) => void
+  hostTransactionTimestamp: number | null
+  setHostTransactionTimestamp: (
+    value: number | null | ((prev: number | null) => number | null),
+  ) => void
+  receiptActionButtonText: string | null
+  setReceiptActionButtonText: (text: string | null) => void
+  onReceiptAction: (() => void) | null
+  setOnReceiptAction: (callback: (() => void) | null) => void
+  retryTransactionRef: { current: (() => void) | null }
+}
+
+const TrailsModalContext = createContext<TrailsModalContextType | null>(null)
+
+export interface TrailsModalProviderProps {
+  children: React.ReactNode
+}
+
+export const TrailsModalProvider = ({ children }: TrailsModalProviderProps) => {
+  // Modal state management for useTrailsSendTransaction hook
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [pendingSelection, setPendingSelection] = useState<
+    | {
+        resolve: (selection: ModalSelectionParams) => void
+        reject: (error: Error) => void
+        requireAmountInput?: boolean
+      }
+    | undefined
+  >(undefined)
+  const [hostTransactionState, setHostTransactionState] =
+    useState<HostTransactionState>({ status: "idle" })
+  const [hostTransactionQuote, setHostTransactionQuote] =
+    useState<PrepareSendQuote | null>(null)
+  const [hostTransactionStates, setHostTransactionStates] = useState<
+    TransactionState[]
+  >([])
+  const [hostTransactionTimestamp, setHostTransactionTimestamp] = useState<
+    number | null
+  >(null)
+  const [receiptActionButtonText, setReceiptActionButtonText] = useState<
+    string | null
+  >(null)
+  const [onReceiptAction, setOnReceiptAction] = useState<(() => void) | null>(
+    null,
+  )
+  const retryTransactionRef = useRef<(() => void) | null>(null)
+
+  const openModal = useCallback(() => {
+    logger.console.log("[trails-sdk] [TrailsModalProvider] openModal called")
+    setIsModalOpen(true)
+  }, [])
+
+  const closeModal = useCallback(() => {
+    setIsModalOpen(false)
+    // Reject any pending selection if modal is closed
+    if (pendingSelection) {
+      pendingSelection.reject(
+        new Error("Modal was closed before selection completed"),
+      )
+      setPendingSelection(undefined)
+    }
+  }, [pendingSelection])
+
+  const resetHostTransactionState = useCallback(() => {
+    setHostTransactionState({ status: "idle" })
+    setHostTransactionQuote(null)
+    setHostTransactionStates([])
+    setHostTransactionTimestamp(null)
+    setReceiptActionButtonText(null)
+    setOnReceiptAction(null)
+    retryTransactionRef.current = null
+  }, [])
+
+  const value: TrailsModalContextType = {
+    isModalOpen,
+    openModal,
+    closeModal,
+    pendingSelection,
+    setPendingSelection,
+    hostTransactionState,
+    setHostTransactionState,
+    resetHostTransactionState,
+    hostTransactionQuote,
+    setHostTransactionQuote,
+    hostTransactionStates,
+    setHostTransactionStates,
+    hostTransactionTimestamp,
+    setHostTransactionTimestamp,
+    receiptActionButtonText,
+    setReceiptActionButtonText,
+    onReceiptAction,
+    setOnReceiptAction,
+    retryTransactionRef,
+  }
+
+  return (
+    <TrailsModalContext.Provider value={value}>
+      {children}
+      {/* Render TrailsHookModal with AnimatePresence for proper exit animations */}
+      <AnimatePresence>{isModalOpen && <TrailsHookModal />}</AnimatePresence>
+    </TrailsModalContext.Provider>
+  )
+}
+
+export function useTrailsModal(): TrailsModalContextType {
+  const context = useContext(TrailsModalContext)
+
+  if (!context) {
+    throw new Error("useTrailsModal must be used within a TrailsModalProvider")
+  }
+
+  return context
+}

package/src/widget/providers/TrailsProvider.tsx

@@ -1,6 +1,7 @@
 import { SequenceHooksProvider } from "@0xsequence/hooks"
 import { createContext, useContext, useMemo, useEffect } from "react"
 import type { ComponentProps } from "react"
+import { TrailsModalProvider } from "./TrailsModalProvider.js"
 import {
   DEFAULT_SLIPPAGE_TOLERANCE,
   DEFAULT_WALLETCONNECT_PROJECT_ID,
@@ -90,9 +91,14 @@ export const TrailsProvider = ({ children, config }: TrailsProviderProps) => {
   useEffect(() => {
     updateGlobalConfig({
       trailsApiKey: trailsConfig.trailsApiKey,
+      trailsApiUrl: trailsConfig.trailsApiUrl,
       sequenceNodeGatewayUrl: trailsConfig.sequenceNodeGatewayUrl,
     })
-  }, [trailsConfig.trailsApiKey, trailsConfig.sequenceNodeGatewayUrl])
+  }, [
+    trailsConfig.trailsApiKey,
+    trailsConfig.trailsApiUrl,
+    trailsConfig.sequenceNodeGatewayUrl,
+  ])
 
   // Create a sequence hooks config based on the trails config
   const sequenceHooksConfig = useMemo(() => {
@@ -112,13 +118,13 @@ export const TrailsProvider = ({ children, config }: TrailsProviderProps) => {
   return (
     <TrailsContext.Provider value={trailsConfig}>
       <SequenceHooksProvider config={sequenceHooksConfig}>
-        {children}
+        <TrailsModalProvider>{children}</TrailsModalProvider>
       </SequenceHooksProvider>
     </TrailsContext.Provider>
   )
 }
 
-export const useTrails = (): Readonly<TrailsConfig> => {
+export function useTrails(): Readonly<TrailsConfig> {
   const context = useContext(TrailsContext)
 
   if (!context) {

package/src/widget/types.ts

@@ -1,23 +1,22 @@
-// UI Types
-export interface FeeToken {
-  chainId: number
-  name: string
-  symbol: string
-  type: string
-  decimals: number
-  logoURL?: string
-  contractAddress: string
-  tokenID?: string
-}
+import type { Token } from "../tokens.js"
 
+/**
+ * Processed FeeOption with Token
+ * Note: This is a local processed type. The API FeeOption from @0xtrails/api uses a different structure.
+ */
 export interface FeeOption {
-  token: FeeToken
+  token: Token
   to: string
   value: string
   gasLimit: number
   feeValue: string
   decimals: number
-  price: {
+  priceUsd?: number
+  priceUsdFormatted?: string
+  priceUsdDisplay?: string
+  // Legacy price object for backward compatibility (deprecated)
+  /** @deprecated Use priceUsd, priceUsdFormatted, priceUsdDisplay instead */
+  price?: {
     value: number
     currency: string
   }
@@ -33,13 +32,6 @@ export interface RelayerFeeOptions {
   quote?: FeeQuote
 }
 
-export interface FeeTokenMetadata {
-  symbol: string
-  name: string
-  imageUrl: string
-  contractAddress: string
-}
-
 // Raw API Types
 export interface RawFeeOption {
   token: string