0xtrails 0.4.0 → 0.4.2

package/src/widget/hooks/useQuote.ts

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query"
-import { useRef } from "react"
+import { useRef, useMemo } from "react"
 import type { TransactionReceipt } from "viem"
 import { zeroAddress } from "viem"
 import { useIndexerGatewayClient } from "../../indexerClient.js"
@@ -13,7 +13,12 @@ import { prepareSend } from "../../prepareSend.js"
 import { abortControllerRegistry } from "../../abortController.js"
 import { TradeType } from "../../prepareSend.js"
 import { getChainInfo } from "../../chains.js"
-import type { MetaTxnReceipt } from "../../transactionIntent/types.js"
+import type { TrailsClientConfig } from "../../trailsClient.js"
+import type { IndexerGatewayConfig } from "../../indexerClient.js"
+import type {
+  MetaTxnReceipt,
+  PrepareSendOptions,
+} from "../../transactionIntent/types.js"
 import type { Chain } from "../../chains.js"
 import type { SupportedToken } from "../../tokens.js"
 import type { TransactionState } from "../../transactions.js"
@@ -21,6 +26,7 @@ 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"
 
 export type UseQuoteProps = {
   walletClient?: any // TODO: fix this, has to do with viem/wagmi versions
@@ -35,12 +41,42 @@ export type UseQuoteProps = {
   slippageTolerance?: string | number | null
   onStatusUpdate?: ((transactionStates: TransactionState[]) => void) | null
   quoteProvider?: string | null
+  /**
+   * Optional checkout event handlers for tracking the states of a Trails transaction.
+   *
+   * @example
+   * ```ts
+   * checkoutOnHandlers: {
+   *   triggerCheckoutStart: () => {
+   *     console.log('Checkout started')
+   *   },
+   *   triggerCheckoutQuote: (quote) => {
+   *     console.log('Quote received:', quote)
+   *   },
+   *   triggerCheckoutComplete: (status, accountAddress) => {
+   *     console.log('Checkout completed:', status, accountAddress)
+   *   }
+   * }
+   * ```
+   *
+   * Available handlers:
+   * - `triggerCheckoutStart`
+   * - `triggerCheckoutQuote`
+   * - `triggerCheckoutSignatureRequest`
+   * - `triggerCheckoutSignatureConfirmed`
+   * - `triggerCheckoutSignatureRejected`
+   * - `triggerCheckoutComplete`
+   * - `triggerCheckoutError`
+   * - `triggerCheckoutStatusUpdate`
+   */
+  checkoutOnHandlers?: Partial<CheckoutOnHandlers>
   paymasterUrl?: string
   selectedFeeToken?: {
     tokenAddress: string
     tokenSymbol?: string
   } | null
   abortSignal?: AbortSignal
+  apiKey?: string | null
 }
 
 export type SwapReturn = {
@@ -111,11 +147,13 @@ export function useQuote({
   toCalldata,
   slippageTolerance,
   onStatusUpdate,
+  checkoutOnHandlers,
   quoteProvider,
   paymasterUrl,
   selectedFeeToken,
   nodeGatewayEnv,
   abortSignal: externalAbortSignal,
+  apiKey,
 }: Partial<
   UseQuoteProps & { nodeGatewayEnv?: SequenceEnv }
 > = {}): UseQuoteReturn {
@@ -147,8 +185,17 @@ export function useQuote({
       })()
     : abortControllerRef.current.signal
 
-  const trailsClient = useTrailsClient()
-  const indexerGatewayClient = useIndexerGatewayClient()
+  const trailsClientConfig = useMemo<TrailsClientConfig>(() => {
+    return apiKey ? { apiKey } : {}
+  }, [apiKey])
+  const indexerGatewayClientConfig = useMemo<IndexerGatewayConfig>(() => {
+    return apiKey ? { projectAccessKey: apiKey } : {}
+  }, [apiKey])
+
+  const trailsClient = useTrailsClient(trailsClientConfig)
+  const indexerGatewayClient = useIndexerGatewayClient(
+    indexerGatewayClientConfig,
+  )
 
   const { supportedTokens } = useSupportedTokens()
 
@@ -169,6 +216,7 @@ export function useQuote({
       tradeType,
       slippageTolerance,
       quoteProvider,
+      apiKey,
     ],
     queryFn: async () => {
       try {
@@ -311,7 +359,7 @@ export function useQuote({
         const destinationTokenSymbol = destinationToken?.symbol ?? ""
         const originTokenSymbol = originToken?.symbol ?? ""
 
-        const options = {
+        const options: PrepareSendOptions = {
           account: walletClient.account!,
           originTokenAddress: fromTokenAddress,
           originChainId: fromChainId,
@@ -339,6 +387,7 @@ export function useQuote({
           originNativeTokenPriceUsd: originNativeTokenPriceUsd,
           commitIntentFn: commitIntentMutation.mutateAsync,
           executeIntentFn: executeIntentMutation.mutateAsync,
+          checkoutOnHandlers,
         }
 
         logger.console.log("[trails-sdk] options", options)

package/src/widget/hooks/useSendForm.ts

@@ -163,7 +163,7 @@ export type UseSendReturn = {
   destTokenPrices: TokenPrice[] | null
   sourceTokenPrices: TokenPrice[] | null
   selectedToken?: Token
-  selectedFeeToken: SelectedFeeToken | undefined
+  selectedFeeToken: SelectedFeeToken | null
   setIsChainDropdownOpen: (isOpen: boolean) => void
   setIsTokenDropdownOpen: (isOpen: boolean) => void
   toAmountFormatted: string
@@ -1336,7 +1336,7 @@ export function useSendForm({
     destTokenPrices: destTokenPrices ?? null,
     sourceTokenPrices: sourceTokenPrices ?? null,
     selectedToken,
-    selectedFeeToken: selectedFeeToken ?? undefined,
+    selectedFeeToken: selectedFeeToken ?? null,
     setIsChainDropdownOpen,
     setIsTokenDropdownOpen,
     toAmountFormatted: quotedDestinationAmount,