0xtrails 0.4.1 → 0.4.3

package/src/transactionIntent/quote/quoteHelpers.ts

@@ -1,5 +1,4 @@
 import type { QuoteIntentRequest } from "@0xsequence/trails-api"
-import { QuoteProviderType } from "@0xsequence/trails-api"
 import { getIsCustomCalldata } from "../../contractUtils.js"
 import type { TradeType } from "../types.js"
 
@@ -20,8 +19,9 @@ export function getIntentArgs(
 ): QuoteIntentRequest {
   const hasCustomCalldata = getIsCustomCalldata(destinationCalldata)
 
-  if (!provider || provider === "auto") {
-    provider = undefined
+  let effectiveProvider = provider
+  if (provider === "auto") {
+    effectiveProvider = undefined
   }
 
   const intentArgs: QuoteIntentRequest = {
@@ -37,14 +37,7 @@ export function getIntentArgs(
     destinationCallValue: "0",
     options: {
       slippageTolerance: Number(slippageTolerance),
-      quoteProvider:
-        provider === "relay"
-          ? QuoteProviderType.RELAY
-          : provider === "cctp"
-            ? QuoteProviderType.CCTPV2
-            : provider === "lifi"
-              ? QuoteProviderType.LIFI
-              : undefined,
+      quoteProvider: effectiveProvider || undefined,
     },
     tradeType,
   }

package/src/transactionIntent/types.ts

@@ -72,7 +72,7 @@ export type PrepareSendOptions = {
   quoteProvider?: string | null
   fundMethod?: string
   mode?: "pay" | "fund" | "earn" | "swap" | "receive"
-  checkoutOnHandlers?: CheckoutOnHandlers
+  checkoutOnHandlers?: Partial<CheckoutOnHandlers>
   refundAddress?: string
   selectedFeeToken?: SelectedFeeToken
   walletId?: string

package/src/widget/components/FeeOptions.tsx

@@ -11,6 +11,7 @@ import { getTokenImageUrl } from "../../tokens.js"
 import { TokenImage } from "./TokenImage.js"
 import { ethAddress, zeroAddress } from "viem"
 import type { FeeOption as APIFeeOption } from "../../widget/hooks/useSelectedFeeToken.js"
+import { SelectedFeeToken } from "../../prepareSend.js"
 
 const ZERO_ADDRESS = zeroAddress.toLowerCase()
 const ETH_ADDRESS = ethAddress.toLowerCase()
@@ -67,7 +68,7 @@ const safeFormatUsdDisplay = (option: APIFeeOption): string => {
 
 interface FeeOptionsProps {
   feeOptions: APIFeeOption[]
-  selectedFeeToken: APIFeeOption | null
+  selectedFeeToken: APIFeeOption | SelectedFeeToken | null
   setSelectedFeeToken: (token: APIFeeOption | null) => void
   chainId?: number
   isRefetching?: boolean // When true, the fee quote is stale and being refreshed, so hide the component

package/src/widget/components/PoolDeposit.tsx

@@ -5,10 +5,10 @@ import {
   Search,
   Loader2,
 } from "lucide-react"
-import { useEffect, useState, useRef } from "react"
+import { useEffect, useState, useRef, useMemo } from "react"
 import type React from "react"
 import type { Account, WalletClient } from "viem"
-import { zeroAddress } from "viem"
+import { parseUnits, zeroAddress } from "viem"
 import type { TransactionState } from "../../transactions.js"
 import type { OnCompleteProps } from "../hooks/useSendForm.js"
 import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
@@ -36,6 +36,9 @@ import type { SupportedToken } from "../../tokens.js"
 import { logger } from "../../logger.js"
 import { DynamicSizeInputField } from "./DynamicSizeInputField.js"
 import { FeeOptions } from "./FeeOptions.js"
+import { generateAaveDepositCalldata } from "../../aave.js"
+import { generateMorphoDepositCalldata } from "../../morpho.js"
+import { TRAILS_ROUTER_PLACEHOLDER_AMOUNT } from "../../trailsRouter.js"
 
 interface PoolDepositProps {
   account?: Account
@@ -106,6 +109,67 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
     allSupportedTokens: false,
   })
 
+  // Memoized generated calldata
+  const generatedDepositCalldata = useMemo(() => {
+    if (!selectedPool || !amount || !walletClient || Number(amount) <= 0) {
+      logger.console.log(
+        "Skipping calldata generation: missing pool/amount/wallet or invalid amount",
+      )
+      return undefined
+    }
+
+    try {
+      const decimals = selectedPool.token.decimals
+      if (typeof decimals !== "number" || decimals < 0 || decimals > 18) {
+        throw new Error(`Invalid decimals: ${decimals}`)
+      }
+
+      // Check if same-chain same-token for direct amount usage
+      const isSameChainSameToken =
+        originToken &&
+        originToken.chainId === selectedPool.chainId &&
+        (originToken.contractAddress ?? zeroAddress).toLowerCase() ===
+          selectedPool.token.address.toLowerCase()
+
+      let amountForCalldata: string
+      if (isSameChainSameToken) {
+        // Parse real amount with pool decimals for direct deposit
+        const parsedAmount = parseUnits(amount, decimals)
+        amountForCalldata = parsedAmount.toString()
+        logger.console.log(
+          `Same-chain same-token deposit: Parsed amount: ${amount} -> ${parsedAmount} wei (decimals: ${decimals})`,
+        )
+      } else {
+        // Use placeholder for wrapping in routed flows
+        amountForCalldata = TRAILS_ROUTER_PLACEHOLDER_AMOUNT.toString()
+        logger.console.log(
+          `Routed deposit (different-token or cross-chain): Using placeholder for ${selectedPool.protocol} pool: ${selectedPool.name}`,
+        )
+      }
+
+      logger.console.log(
+        `Generating deposit calldata for ${selectedPool.protocol} pool: ${selectedPool.name} (amount: ${amountForCalldata})`,
+      )
+
+      switch (selectedPool.protocol.toLowerCase()) {
+        case "aave":
+          return generateAaveDepositCalldata(
+            walletClient,
+            selectedPool,
+            amountForCalldata,
+          )
+        case "morpho":
+          return generateMorphoDepositCalldata(walletClient, amountForCalldata)
+        default:
+          logger.console.warn(`Unsupported protocol: ${selectedPool.protocol}`)
+          return undefined
+      }
+    } catch (error) {
+      logger.console.error("Error generating deposit calldata:", error)
+      return undefined
+    }
+  }, [walletClient, selectedPool, amount, originToken])
+
   // Use useSendForm for quote functionality when both token and pool are selected
   const {
     balanceFormatted,
@@ -125,7 +189,7 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
     toRecipient: selectedPool?.depositAddress,
     toChainId: selectedPool?.chainId,
     toToken: selectedPool?.token.address,
-    toCalldata: undefined,
+    toCalldata: generatedDepositCalldata,
     walletClient,
     onTransactionStateChange,
     onError,
@@ -521,7 +585,7 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
       {/* Fee Options */}
       <FeeOptions
         feeOptions={feeOptions || []}
-        selectedFeeToken={selectedFeeToken}
+        selectedFeeToken={selectedFeeToken as any}
         setSelectedFeeToken={(token) => setSelectedFeeToken(token as any)}
         chainId={originToken?.chainId}
         isRefetching={isLoadingQuote}

package/src/widget/hooks/useDebugScreens.ts

@@ -182,7 +182,7 @@ export const useDebugScreens = ({
                 "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
               chainId: 137,
               state: "pending",
-              label: "Transfer",
+              label: "Deposit",
             },
             {
               transactionHash:
@@ -207,7 +207,7 @@ export const useDebugScreens = ({
                 "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
               chainId: 137,
               state: "confirmed",
-              label: "Transfer",
+              label: "Deposit",
             },
             {
               transactionHash:
@@ -232,7 +232,7 @@ export const useDebugScreens = ({
                 "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
               chainId: 137,
               state: "confirmed",
-              label: "Transfer",
+              label: "Deposit",
             },
             {
               transactionHash:
@@ -257,7 +257,7 @@ export const useDebugScreens = ({
                 "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
               chainId: 137,
               state: "pending",
-              label: "Transfer",
+              label: "Deposit",
             },
             {
               transactionHash:
@@ -291,7 +291,7 @@ export const useDebugScreens = ({
                 "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
               chainId: 137,
               state: "confirmed",
-              label: "Transfer",
+              label: "Deposit",
             },
             {
               transactionHash:
@@ -325,7 +325,7 @@ export const useDebugScreens = ({
                 "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
               chainId: 137,
               state: "confirmed",
-              label: "Transfer",
+              label: "Deposit",
             },
             {
               transactionHash:
@@ -359,7 +359,7 @@ export const useDebugScreens = ({
                 "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
               chainId: 137,
               state: "confirmed",
-              label: "Transfer",
+              label: "Deposit",
             },
             {
               transactionHash:
@@ -393,7 +393,7 @@ export const useDebugScreens = ({
                 "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
               chainId: 137,
               state: "confirmed",
-              label: "Transfer",
+              label: "Deposit",
             },
             {
               transactionHash:
@@ -436,7 +436,7 @@ export const useDebugScreens = ({
                 "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
               chainId: 137,
               state: "confirmed",
-              label: "Transfer",
+              label: "Deposit",
             },
             {
               transactionHash:
@@ -470,7 +470,7 @@ export const useDebugScreens = ({
                 "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
               chainId: 137,
               state: "confirmed",
-              label: "Transfer",
+              label: "Deposit",
             },
             {
               transactionHash:
@@ -502,7 +502,7 @@ export const useDebugScreens = ({
                 "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
               chainId: 137,
               state: "confirmed",
-              label: "Transfer",
+              label: "Deposit",
             },
             {
               transactionHash:

package/src/widget/hooks/useQuote.ts

@@ -15,7 +15,10 @@ import { TradeType } from "../../prepareSend.js"
 import { getChainInfo } from "../../chains.js"
 import type { TrailsClientConfig } from "../../trailsClient.js"
 import type { IndexerGatewayConfig } from "../../indexerClient.js"
-import type { MetaTxnReceipt } from "../../transactionIntent/types.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"
@@ -23,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
@@ -37,6 +41,35 @@ 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
@@ -114,6 +147,7 @@ export function useQuote({
   toCalldata,
   slippageTolerance,
   onStatusUpdate,
+  checkoutOnHandlers,
   quoteProvider,
   paymasterUrl,
   selectedFeeToken,
@@ -325,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,
@@ -353,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,