0xtrails 0.2.4 → 0.2.6

package/src/widget/hooks/usePayMessage.tsx

@@ -8,6 +8,7 @@ import { truncateAddress } from "../../utils.js"
 import { getExplorerUrlForAddress } from "../../explorer.js"
 import ChainImage from "../components/ChainImage.js"
 import TokenImage from "../components/TokenImage.js"
+import { Identicon } from "../components/Identicon.js"
 import { logger } from "../../logger.js"
 
 export interface PayMessagePart {
@@ -85,25 +86,23 @@ export function usePayMessage(): UsePayMessageReturn {
   })
 
   const parsed = useMemo(() => {
-    // Default message if no payMessage provided
-    const defaultMessage = appName
-      ? `Pay {APP_IMAGE} {APP_NAME} {TO_AMOUNT_USD}`
-      : `Pay {TO_AMOUNT_USD}`
-
-    const template = payMessage || defaultMessage
+    // If no payMessage provided, return empty parts (default layout handled separately)
+    if (!payMessage) {
+      return []
+    }
 
     // Parse the template into parts
     const parts: PayMessagePart[] = []
     const regex = /\{([^}]+)\}/g
     let lastIndex = 0
-    let match: RegExpExecArray | null = regex.exec(template)
+    let match: RegExpExecArray | null = regex.exec(payMessage)
 
     while (match !== null) {
       // Add text before the placeholder
       if (match.index > lastIndex) {
         parts.push({
           type: "text",
-          value: template.substring(lastIndex, match.index),
+          value: payMessage.substring(lastIndex, match.index),
         })
       }
 
@@ -176,14 +175,14 @@ export function usePayMessage(): UsePayMessageReturn {
       }
 
       lastIndex = regex.lastIndex
-      match = regex.exec(template)
+      match = regex.exec(payMessage)
     }
 
     // Add remaining text
-    if (lastIndex < template.length) {
+    if (lastIndex < payMessage.length) {
       parts.push({
         type: "text",
-        value: template.substring(lastIndex),
+        value: payMessage.substring(lastIndex),
       })
     }
 
@@ -206,6 +205,78 @@ export function usePayMessage(): UsePayMessageReturn {
 
   // Render the message
   const message = useMemo(() => {
+    // If no payMessage provided, render default layout
+    if (!payMessage) {
+      return (
+        <div className="flex flex-col items-center justify-center px-8 py-4 space-y-4 min-w-full">
+          {/* App image above the amount if it exists */}
+          {appImageUrl && (
+            <img
+              src={appImageUrl}
+              alt={appName || "App"}
+              className="w-12 h-12 rounded-lg"
+              onError={(e) => {
+                logger.console.error(
+                  `Error loading app image: ${e}, appImageUrl: ${appImageUrl}`,
+                )
+                // Hide image on error
+                e.currentTarget.style.display = "none"
+              }}
+            />
+          )}
+
+          {/* Large amount in center */}
+          <div className="font-bold text-center">
+            {(() => {
+              const amountToShow = targetAmountUsdFormatted || toAmount || "0"
+              const tokenSymbol = tokenInfo?.symbol || ""
+              const displayText = targetAmountUsdFormatted
+                ? amountToShow
+                : `${amountToShow} ${tokenSymbol}`.trim()
+
+              // Dynamic font size based on text length
+              const textLength = displayText.length
+              let fontSize = "text-6xl" // Default large size
+
+              if (textLength > 12) {
+                fontSize = "text-2xl"
+              } else if (textLength > 10) {
+                fontSize = "text-3xl"
+              } else if (textLength > 8) {
+                fontSize = "text-4xl"
+              } else if (textLength > 6) {
+                fontSize = "text-5xl"
+              }
+
+              return <div className={fontSize}>{displayText}</div>
+            })()}
+          </div>
+
+          {/* Recipient info below */}
+          {toAddress && (
+            <div className="flex items-center space-x-2 text-center">
+              <span className="text-sm text-gray-600 dark:text-gray-400">
+                to
+              </span>
+              <Identicon value={toAddress} size={20} />
+              <a
+                href={getExplorerUrlForAddress({
+                  address: toAddress,
+                  chainId: toChainId ? Number(toChainId) : 1,
+                })}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm hover:underline cursor-pointer text-blue-600 dark:text-blue-400"
+              >
+                {truncateAddress(toAddress)}
+              </a>
+            </div>
+          )}
+        </div>
+      )
+    }
+
+    // Render user-provided message with handlebar interpolation
     return (
       <>
         {parsed.map((part) => {
@@ -354,6 +425,7 @@ export function usePayMessage(): UsePayMessageReturn {
       </>
     )
   }, [
+    payMessage,
     parsed,
     appName,
     appUrl,
@@ -361,6 +433,9 @@ export function usePayMessage(): UsePayMessageReturn {
     appDescription,
     tokenInfo,
     toChainId,
+    toAddress,
+    targetAmountUsdFormatted,
+    toAmount,
   ])
 
   return {

package/src/widget/hooks/useQuote.ts

@@ -0,0 +1,413 @@
+import { useQuery } from "@tanstack/react-query"
+import { useRef } from "react"
+import type { TransactionReceipt } from "viem"
+import { zeroAddress } from "viem"
+import { useAPIClient } from "../../apiClient.js"
+import { useIndexerGatewayClient } from "../../indexerClient.js"
+import { getTokenBalancesWithPrices } from "../../tokenBalances.js"
+import { logger } from "../../logger.js"
+import { getSequenceEnv } from "../../config.js"
+import { useSupportedTokens } from "../../tokens.js"
+import { useTrailsClient } from "../../trailsClient.js"
+import { getExplorerUrl } from "../../explorer.js"
+import { getFullErrorMessage } from "../../error.js"
+import { prepareSend } from "../../prepareSend.js"
+import { abortControllerRegistry } from "../../abortController.js"
+import { useRelayers } from "../../relayer.js"
+import { TradeType } from "../../prepareSend.js"
+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 { MetaTxnReceipt } from "../../relayer.js"
+import type { RelayerEnv } from "../../relayer.js"
+import type { SequenceEnv } from "../../config.js"
+
+export type UseQuoteProps = {
+  walletClient?: any // TODO: fix this, has to do with viem/wagmi versions
+  fromTokenAddress?: string | null
+  fromChainId?: number | null
+  toTokenAddress?: string | null
+  toChainId?: number | null
+  toCalldata?: string | null
+  swapAmount?: string | bigint
+  toRecipient?: string | null
+  tradeType?: TradeType | null
+  slippageTolerance?: string | number | null
+  onStatusUpdate?: ((transactionStates: TransactionState[]) => void) | null
+  quoteProvider?: string | null
+  gasless?: boolean
+  paymasterUrl?: string
+  selectedFeeToken?: {
+    tokenAddress: string
+    tokenSymbol?: string
+  } | null
+  abortSignal?: AbortSignal
+}
+
+export type SwapReturn = {
+  originTransaction: {
+    transactionHash?: string | null
+    explorerUrl?: string | null
+    receipt: TransactionReceipt | MetaTxnReceipt | null
+  }
+  destinationTransaction: {
+    transactionHash?: string | null
+    explorerUrl?: string | null
+    receipt: MetaTxnReceipt | null
+  }
+  totalCompletionSeconds?: number
+}
+
+export type QuoteProviderInfo = {
+  id: string
+  name: string
+  url: string
+}
+
+export type Quote = {
+  fromAmount: string
+  fromAmountMin: string
+  toAmount: string
+  toAmountMin: string
+  originToken: SupportedToken
+  destinationToken: SupportedToken
+  originChain: Chain
+  destinationChain: Chain
+  fees: PrepareSendFees
+  slippageTolerance: string
+  priceImpact: string
+  completionEstimateSeconds: number
+  transactionStates?: TransactionState[]
+  originTokenRate?: string
+  quoteProvider?: QuoteProviderInfo | null
+  destinationTokenRate?: string
+  fromAmountUsdDisplay?: string
+  toAmountUsdDisplay?: string
+  gasCostUsd?: number
+  gasCostUsdDisplay?: string
+  gasCost?: string
+  gasCostFormatted?: string
+}
+
+export type UseQuoteReturn = {
+  quote: Quote | null
+  swap: (() => Promise<SwapReturn | null>) | null
+  isLoadingQuote: boolean
+  quoteError: unknown
+  refetchQuote: () => void
+  abort: () => void
+}
+
+export function useQuote({
+  walletClient,
+  fromTokenAddress,
+  fromChainId,
+  toTokenAddress,
+  toChainId,
+  swapAmount,
+  tradeType,
+  toRecipient,
+  toCalldata,
+  slippageTolerance,
+  onStatusUpdate,
+  quoteProvider,
+  gasless,
+  paymasterUrl,
+  selectedFeeToken,
+  relayerEnv,
+  nodeGatewayEnv,
+  abortSignal: externalAbortSignal,
+}: Partial<
+  UseQuoteProps & { relayerEnv?: RelayerEnv; nodeGatewayEnv?: SequenceEnv }
+> = {}): UseQuoteReturn {
+  // Set node gateway environment override for this quote session
+  if (nodeGatewayEnv) {
+    ;(globalThis as any).__testNodeGatewayEnv = nodeGatewayEnv
+  }
+
+  // Create abort controller for this hook instance
+  const abortControllerRef = useRef<AbortController>(new AbortController())
+
+  // Combine external abort signal with internal abort controller
+  const combinedAbortSignal = externalAbortSignal
+    ? (() => {
+        const controller = new AbortController()
+
+        // Listen to external abort signal
+        externalAbortSignal.addEventListener("abort", () => {
+          controller.abort()
+          abortControllerRef.current?.abort()
+        })
+
+        // Listen to internal abort controller
+        abortControllerRef.current?.signal.addEventListener("abort", () => {
+          controller.abort()
+        })
+
+        return controller.signal
+      })()
+    : abortControllerRef.current.signal
+
+  const apiClient = useAPIClient()
+  const trailsClient = useTrailsClient()
+  const { getRelayer } = useRelayers({
+    env: relayerEnv || (getSequenceEnv() as RelayerEnv),
+  })
+  const indexerGatewayClient = useIndexerGatewayClient()
+
+  const { supportedTokens } = useSupportedTokens()
+
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: [
+      "quote",
+      fromTokenAddress,
+      fromChainId,
+      toTokenAddress,
+      toChainId,
+      swapAmount?.toString(),
+      toRecipient,
+      toCalldata,
+      tradeType,
+      slippageTolerance,
+      quoteProvider,
+    ],
+    queryFn: async () => {
+      try {
+        // Reset the abort controller for new queries to ensure fresh state
+        if (abortControllerRef.current.signal.aborted) {
+          logger.console.log(
+            "[trails-sdk] Resetting aborted controller for new query",
+          )
+          abortControllerRef.current = new AbortController()
+        }
+
+        if (
+          !walletClient ||
+          !apiClient ||
+          !trailsClient ||
+          !fromTokenAddress ||
+          !toTokenAddress ||
+          !swapAmount ||
+          !toRecipient ||
+          !fromChainId ||
+          !toChainId ||
+          !indexerGatewayClient
+        ) {
+          return null
+        }
+
+        // Get token balance using async method
+        const { balances } = await getTokenBalancesWithPrices({
+          account: walletClient.account!.address,
+          indexerGatewayClient,
+          apiClient,
+        })
+
+        const originTokenBalance = balances.find(
+          (b) =>
+            b.chainId === fromChainId &&
+            (b.contractAddress?.toLowerCase() ===
+              fromTokenAddress.toLowerCase() ||
+              (!b.contractAddress && fromTokenAddress === zeroAddress)),
+        )
+
+        const originTokenBalanceAmount = originTokenBalance?.balance ?? "0"
+        const destinationRelayer = getRelayer(toChainId)
+        const originRelayer = getRelayer(fromChainId)
+
+        // Note: Disable this check for now to allow fetching a quote even when the origin balance is zero
+        // if (originTokenBalanceAmount === "0") {
+        //   return null
+        // }
+
+        // logger.console.log("supportedTokens", supportedTokens)
+
+        const originToken = supportedTokens?.find(
+          (token) =>
+            token.contractAddress?.toLowerCase() ===
+              fromTokenAddress?.toLowerCase() && token.chainId === fromChainId,
+        )
+        const destinationToken = supportedTokens?.find(
+          (token) =>
+            token.contractAddress?.toLowerCase() ===
+              toTokenAddress?.toLowerCase() && token.chainId === toChainId,
+        )
+
+        const sourceTokenDecimals = originToken?.decimals
+        if (!sourceTokenDecimals) {
+          logger.console.error(
+            "[trails-sdk] [useQuote] Missing source token decimals:",
+            {
+              originToken,
+              fromTokenAddress,
+              fromChainId,
+            },
+          )
+          throw new Error("Source token decimals not found")
+        }
+        const destinationTokenDecimals = destinationToken?.decimals
+        if (!destinationTokenDecimals) {
+          logger.console.error(
+            "[trails-sdk] Missing destination token decimals:",
+            {
+              destinationToken,
+              toTokenAddress,
+              toChainId,
+            },
+          )
+          throw new Error("Destination token decimals not found")
+        }
+        const destinationTokenSymbol = destinationToken?.symbol ?? ""
+        const originTokenSymbol = originToken?.symbol ?? ""
+
+        const options = {
+          account: walletClient.account!,
+          originTokenAddress: fromTokenAddress,
+          originChainId: fromChainId,
+          originTokenBalance: originTokenBalanceAmount,
+          destinationChainId: toChainId,
+          recipient: toRecipient,
+          destinationTokenAddress: toTokenAddress,
+          swapAmount: swapAmount.toString(),
+          tradeType: tradeType ?? TradeType.EXACT_OUTPUT,
+          originTokenSymbol: originTokenSymbol,
+          destinationTokenSymbol: destinationTokenSymbol,
+          destinationCalldata: toCalldata as string,
+          client: walletClient,
+          apiClient,
+          trailsClient,
+          originRelayer,
+          destinationRelayer,
+          sourceTokenDecimals,
+          destinationTokenDecimals,
+          fee: "0",
+          dryMode: false,
+          onTransactionStateChange: onStatusUpdate ?? (() => {}),
+          slippageTolerance: slippageTolerance?.toString(),
+          quoteProvider: quoteProvider,
+          gasless: gasless ?? false,
+          paymasterUrl: paymasterUrl,
+          selectedFeeToken: selectedFeeToken ?? undefined,
+          abortSignal: combinedAbortSignal,
+        }
+
+        logger.console.log("[trails-sdk] options", options)
+
+        const { quote: prepareSendQuote, send } = await prepareSend(options)
+
+        const quote = {
+          fromAmount: prepareSendQuote.originAmount,
+          toAmount: prepareSendQuote.destinationAmount,
+          fromAmountMin: prepareSendQuote.originAmountMin,
+          toAmountMin: prepareSendQuote.destinationAmountMin,
+          originToken: prepareSendQuote.originToken,
+          destinationToken: prepareSendQuote.destinationToken,
+          originChain: prepareSendQuote.originChain,
+          destinationChain: prepareSendQuote.destinationChain,
+          fees: prepareSendQuote.fees,
+          priceImpact: prepareSendQuote.priceImpact,
+          completionEstimateSeconds: prepareSendQuote.completionEstimateSeconds,
+          slippageTolerance: prepareSendQuote.slippageTolerance,
+          transactionStates: prepareSendQuote.transactionStates,
+          originTokenRate: prepareSendQuote.originTokenRate,
+          destinationTokenRate: prepareSendQuote.destinationTokenRate,
+          quoteProvider: prepareSendQuote.quoteProvider,
+          fromAmountUsdDisplay:
+            prepareSendQuote.originAmountUsdDisplay ?? undefined,
+          toAmountUsdDisplay:
+            prepareSendQuote.destinationAmountUsdDisplay ?? undefined,
+          gasCostUsd: prepareSendQuote.gasCostUsd ?? undefined,
+          gasCostUsdDisplay: prepareSendQuote.gasCostUsdDisplay ?? undefined,
+          gasCost: prepareSendQuote.gasCost ?? undefined,
+          gasCostFormatted: prepareSendQuote.gasCostFormatted ?? undefined,
+        }
+
+        const swap = async (): Promise<SwapReturn> => {
+          const {
+            originUserTxReceipt,
+            destinationMetaTxnReceipt,
+            totalCompletionSeconds,
+          } = await send({
+            selectedFeeToken: selectedFeeToken ?? undefined,
+          })
+
+          return {
+            originTransaction: {
+              transactionHash: originUserTxReceipt?.transactionHash,
+              explorerUrl: getExplorerUrl({
+                txHash: originUserTxReceipt?.transactionHash as string,
+                chainId: fromChainId,
+              }),
+              receipt: originUserTxReceipt,
+            },
+            destinationTransaction: {
+              transactionHash: destinationMetaTxnReceipt?.txnHash,
+              explorerUrl: getExplorerUrl({
+                txHash: destinationMetaTxnReceipt?.txnHash as string,
+                chainId: toChainId,
+              }),
+              receipt: destinationMetaTxnReceipt,
+            },
+            totalCompletionSeconds,
+          }
+        }
+
+        return {
+          quote,
+          swap,
+        }
+      } catch (error) {
+        logger.console.error(
+          "[trails-sdk] [useQuote] Error getting quote:",
+          error,
+        )
+        throw getFullErrorMessage(error)
+      }
+    },
+    // Prevent unnecessary refetching
+    enabled: Boolean(
+      walletClient &&
+        apiClient &&
+        fromTokenAddress &&
+        toTokenAddress &&
+        swapAmount &&
+        toRecipient &&
+        fromChainId &&
+        toChainId &&
+        indexerGatewayClient,
+    ),
+    staleTime: 30 * 1000, // Consider data fresh for 30 seconds
+    refetchOnWindowFocus: false, // Don't refetch when window regains focus
+    refetchOnMount: false, // Don't refetch on component remount if data exists
+    refetchInterval: false, // Disable automatic polling
+    retry: 2, // Limit retry attempts
+    refetchOnReconnect: true, // Refetch when network reconnects
+  })
+
+  return {
+    quote: data?.quote || null,
+    swap: data?.swap || null,
+    isLoadingQuote: isLoading,
+    quoteError: error,
+    refetchQuote: () => refetch(),
+    abort: () => {
+      logger.console.log("[trails-sdk] useQuote abort() called")
+      logger.console.log(
+        "[trails-sdk] Active operations before abort:",
+        abortControllerRegistry.getAll(),
+      )
+
+      // Abort the internal abort controller
+      abortControllerRef.current.abort()
+
+      // Also abort all active polling operations in prepareSend
+      abortControllerRegistry.abortAll()
+
+      logger.console.log(
+        "[trails-sdk] Abort completed, active operations:",
+        abortControllerRegistry.getAll(),
+      )
+    },
+  }
+}

package/src/widget/hooks/useSelectedFundMethod.tsx

@@ -0,0 +1,41 @@
+import { createContext, useContext, useState, type ReactNode } from "react"
+
+interface SelectedFundMethodContextType {
+  selectedFundMethod: string
+  setSelectedFundMethod: (method: string) => void
+}
+
+const SelectedFundMethodContext = createContext<
+  SelectedFundMethodContextType | undefined
+>(undefined)
+
+interface SelectedFundMethodProviderProps {
+  children: ReactNode
+}
+
+export const SelectedFundMethodProvider = ({
+  children,
+}: SelectedFundMethodProviderProps) => {
+  const [selectedFundMethod, setSelectedFundMethod] = useState<string>("wallet")
+
+  const value: SelectedFundMethodContextType = {
+    selectedFundMethod,
+    setSelectedFundMethod,
+  }
+
+  return (
+    <SelectedFundMethodContext.Provider value={value}>
+      {children}
+    </SelectedFundMethodContext.Provider>
+  )
+}
+
+export const useSelectedFundMethod = (): SelectedFundMethodContextType => {
+  const context = useContext(SelectedFundMethodContext)
+  if (context === undefined) {
+    throw new Error(
+      "useSelectedFundMethod must be used within a SelectedFundMethodProvider",
+    )
+  }
+  return context
+}

package/src/widget/hooks/useSelectedRecipient.tsx

@@ -2,8 +2,10 @@ import React, {
   createContext,
   useContext,
   useState,
+  useEffect,
   type ReactNode,
 } from "react"
+import { useAccount } from "wagmi"
 
 interface SelectedRecipientContextType {
   selectedRecipient: string | null
@@ -21,10 +23,18 @@ interface SelectedRecipientProviderProps {
 export const SelectedRecipientProvider: React.FC<
   SelectedRecipientProviderProps
 > = ({ children }) => {
+  const { address } = useAccount()
   const [selectedRecipient, setSelectedRecipient] = useState<string | null>(
     null,
   )
 
+  // Set recipient to address only if address exists and no recipient is selected
+  useEffect(() => {
+    if (address && !selectedRecipient) {
+      setSelectedRecipient(address)
+    }
+  }, [address, selectedRecipient])
+
   return (
     <SelectedRecipientContext.Provider
       value={{