0xtrails 0.13.0 → 0.13.2

package/src/widget/hooks/useQuote.ts

@@ -30,7 +30,7 @@ import type { Token } from "../../tokens.js"
 import type { TransactionState } from "../../transactions.js"
 import type { PrepareSendFees } from "../../prepareSend.js"
 import type { TrailsFeeBreakdown } from "../../fees.js"
-import { getTokenPrice } from "../../prices.js"
+import { getTokenPrice } from "../../query/price.queries.js"
 import { useCommitIntent, useExecuteIntent } from "../../mutations.js"
 import type { CheckoutOnHandlers } from "./useCheckout.js"
 import type {
@@ -41,6 +41,7 @@ import type {
 import type { OnrampTrackingData } from "../types/analytics.js"
 import { isZeroOrInvalidAmount } from "../../utils/validation.js"
 import { addressEqual } from "../../utils/address.js"
+import { HOUR_MS } from "../../utils/time.js"
 
 /**
  * Configuration options for the `useQuote` hook.
@@ -197,7 +198,7 @@ export type Quote = {
   originAmountUsdFormatted: string
   destinationAmountUsdFormatted: string
   // Locale display fields
-  intentProtocolVersion: string
+  intentProtocol: string
   originAmountFormattedLocale?: string
   originAmountUsdLocaleDisplay?: string
   destinationAmountFormattedLocale?: string
@@ -298,7 +299,7 @@ export type UseQuoteReturn = {
   /** A user-friendly error message string. */
   quoteErrorPrettified: string
   /** Function to manually refetch the quote (useful for refreshing stale quotes). */
-  refetchQuote: () => void
+  refetchQuote: () => Promise<void>
   /** Function to abort any in-flight quote requests. */
   abort: () => void
   /** Fee options available for this quote (e.g., pay gas in different tokens). */
@@ -586,9 +587,8 @@ export function useQuote({
       !!senderAddress &&
       !!fromChainId &&
       !hasCachedContractResult(senderAddress, fromChainId),
-    // Only cache for 24h if it's a contract, otherwise keep checking
     staleTime: (query) => (query.state.data === true ? Infinity : 0),
-    gcTime: Infinity,
+    gcTime: HOUR_MS,
   })
 
   // Query for sender on destination chain - skip if same chain as origin (reuse origin result)
@@ -605,7 +605,7 @@ export function useQuote({
       !isSameChain &&
       !hasCachedContractResult(senderAddress, toChainId),
     staleTime: (query) => (query.state.data === true ? Infinity : 0),
-    gcTime: Infinity,
+    gcTime: HOUR_MS,
   })
 
   // Query for recipient on destination chain - skip if same address as sender (reuse sender result)
@@ -622,7 +622,7 @@ export function useQuote({
       !isSameAddress &&
       !hasCachedContractResult(recipientAddress, toChainId),
     staleTime: (query) => (query.state.data === true ? Infinity : 0),
-    gcTime: Infinity,
+    gcTime: HOUR_MS,
   })
 
   // Derive the final values, reusing results where addresses/chains match
@@ -728,48 +728,54 @@ export function useQuote({
           const originChain = getChainInfo(fromChainId)
           const nativeTokenSymbol = originChain?.nativeCurrency?.symbol ?? ""
 
-          const [balanceResult, nativePriceResult] = await Promise.all([
-            queryClient
-              .ensureQueryData(
-                balanceQueries.withPrices(
-                  walletClient.account!.address,
-                  indexerGatewayClient,
-                  trailsClient,
-                ),
-              )
-              .catch((balanceError: unknown) => {
-                if (isNetworkError(balanceError)) {
-                  logger.console.warn(
-                    "[trails-sdk] [useQuote] Network error fetching balances, proceeding with quote using zero balance:",
-                    {
-                      error: balanceError,
-                      account: walletClient.account!.address,
-                    },
-                  )
-                  return { balances: [] }
-                }
-                throw balanceError
-              }),
-
-            nativeTokenSymbol
-              ? getTokenPrice(trailsClient, {
-                  tokenSymbol: nativeTokenSymbol,
-                  tokenAddress: zeroAddress,
-                  chainId: fromChainId,
-                }).catch((error) => {
-                  logger.console.error(
-                    "[trails-sdk] [useQuote] Error getting origin native token price:",
-                    error,
-                  )
-                  return null
-                })
-              : Promise.resolve(null),
-          ])
+          const balanceResult = await queryClient
+            .ensureQueryData(
+              balanceQueries.withPrices(
+                walletClient.account!.address,
+                indexerGatewayClient,
+                trailsClient,
+              ),
+            )
+            .catch((balanceError: unknown) => {
+              if (isNetworkError(balanceError)) {
+                logger.console.warn(
+                  "[trails-sdk] [useQuote] Network error fetching balances, proceeding with quote using zero balance:",
+                  {
+                    error: balanceError,
+                    account: walletClient.account!.address,
+                  },
+                )
+                return { balances: [] }
+              }
+              throw balanceError
+            })
 
           const balances = balanceResult.balances
-          const originNativeTokenPriceUsd = nativePriceResult?.priceUsd ?? 0
+          const nativeTokenFromBalances = balances.find(
+            (b: any) =>
+              b.chainId === fromChainId &&
+              (addressEqual(b.contractAddress, zeroAddress) || b.isNativeToken),
+          )
+          let originNativeTokenPriceUsd = nativeTokenFromBalances?.priceUsd ?? 0
+
+          // Reuse the price already fetched by balanceQueries.withPrices.
+          // Fallback only when native token is missing from the balances payload.
+          if (!originNativeTokenPriceUsd && nativeTokenSymbol) {
+            const nativePriceResult = await getTokenPrice(trailsClient, {
+              tokenSymbol: nativeTokenSymbol,
+              tokenAddress: zeroAddress,
+              chainId: fromChainId,
+            }).catch((error) => {
+              logger.console.error(
+                "[trails-sdk] [useQuote] Error getting origin native token price:",
+                error,
+              )
+              return null
+            })
+            originNativeTokenPriceUsd = nativePriceResult?.priceUsd ?? 0
+          }
 
-          if (nativePriceResult) {
+          if (originNativeTokenPriceUsd) {
             logger.console.log(
               "[trails-sdk] [useQuote] Origin native token price:",
               {
@@ -1065,7 +1071,7 @@ export function useQuote({
             destinationApproveAddress:
               prepareSendQuote.destinationApproveAddress ?? "",
             destinationCalldata: prepareSendQuote.destinationCalldata ?? "",
-            intentProtocolVersion: prepareSendQuote.intentProtocolVersion,
+            intentProtocol: prepareSendQuote.intentProtocol,
             // Fee breakdown fields
             trailsFeeBreakdown: prepareSendQuote.trailsFeeBreakdown ?? null,
             originGasUsd: prepareSendQuote.originGasUsd ?? null,
@@ -1203,7 +1209,9 @@ export function useQuote({
     isLoadingQuote: isFetching,
     quoteError: error,
     quoteErrorPrettified: getPrettifiedErrorMessage(error),
-    refetchQuote: () => refetch(),
+    refetchQuote: async () => {
+      await refetch()
+    },
     abort: () => {
       logger.console.log("[trails-sdk] useQuote abort() called")
       logger.console.log(

package/src/widget/hooks/useSelectedFundMethod.tsx

@@ -2,11 +2,19 @@ import { createContext, useContext, useState, type ReactNode } from "react"
 import { logger } from "../../logger.js"
 import type { FundMethod } from "../../transactionIntent/types.js"
 
+export interface SelectedMeshExchange {
+  integrationId: string
+  exchangeKey: string
+  exchangeName: string
+}
+
 interface SelectedFundMethodContextType {
   selectedFundMethod: FundMethod
   paymentMethod: { id: string; name: string }
+  selectedMeshExchange: SelectedMeshExchange | null
   setSelectedFundMethod: (method: FundMethod) => void
   setPaymentMethod: (paymentMethod: { id: string; name: string }) => void
+  setSelectedMeshExchange: (exchange: SelectedMeshExchange | null) => void
 }
 
 const SelectedFundMethodContext = createContext<
@@ -26,12 +34,16 @@ export const SelectedFundMethodProvider = ({
     id: string
     name: string
   }>({ id: "", name: "" })
+  const [selectedMeshExchange, setSelectedMeshExchange] =
+    useState<SelectedMeshExchange | null>(null)
 
   const value: SelectedFundMethodContextType = {
     selectedFundMethod,
     paymentMethod,
+    selectedMeshExchange,
     setSelectedFundMethod,
     setPaymentMethod,
+    setSelectedMeshExchange,
   }
 
   return (
@@ -71,7 +83,8 @@ export function useSkipBalanceFetch(): {
   // Check if current fund method should skip balance fetching
   const shouldSkipBalanceFetch =
     context.selectedFundMethod === "onramp-meld" ||
-    context.selectedFundMethod === "direct-transfer"
+    context.selectedFundMethod === "direct-transfer" ||
+    context.selectedFundMethod === "onramp-mesh"
 
   return {
     selectedFundMethod: context.selectedFundMethod,

package/src/widget/hooks/useSendForm.ts

@@ -15,7 +15,8 @@ import { useSupportedChains } from "../../query/chains.hooks.js"
 import { getFullErrorMessage, getIsNetworkError } from "../../error.js"
 import { TradeType, type PrepareSendQuote } from "../../prepareSend.js"
 import type { TransactionState } from "../../transactions.js"
-import { useTokenPrices, normalizeNumber } from "../../prices.js"
+import { useTokenPrices } from "../../query/price.hooks.js"
+import { normalizeNumber } from "../../utils/format.js"
 import {
   formatRawAmount,
   formatUsdAmountDisplay,
@@ -23,11 +24,8 @@ import {
   formatAmount,
   formatAmountDisplay,
 } from "../../utils/format.js"
-import {
-  useTokenBalances,
-  WIDGET_REFRESH_INTERVAL,
-} from "../../query/balance.hooks.js"
-import { useTokenWithFreshBalance } from "./useTokenWithFreshBalance.js"
+import { useTokenBalances } from "../../query/balance.hooks.js"
+import { useAccountTokenBalanceOnchain } from "../../query/balance.hooks.js"
 import type { Token } from "../../tokens.js"
 import {
   useSupportedTokens,
@@ -153,7 +151,6 @@ export type UseSendReturn = {
   selectedDestinationChain: ChainInfo | null
   selectedDestToken: Token | null
   setAmount: (amount: string) => void
-  setRecipient: (recipient: string) => void
   setRecipientInput: (recipientInput: string) => void
   setSelectedDestinationChain: (chain: ChainInfo) => void
   setSelectedDestToken: (token: Token | null) => void
@@ -224,20 +221,13 @@ export function useSendForm({
     tradeType === TradeType.EXACT_INPUT ? (fromAmount ?? "") : (toAmount ?? ""),
   )
   const [recipientInput, setRecipientInput] = useState(toRecipient ?? "")
-  const [recipient, setRecipient] = useState(toRecipient ?? "")
   const [error, setError] = useState<string | null>(null)
   const { data: supportedChains = [] } = useSupportedChains()
   const { ensAddress } = useResolveEnsAddress({
     textInput: recipientInput,
   })
 
-  useEffect(() => {
-    if (ensAddress) {
-      setRecipient(ensAddress)
-    } else {
-      setRecipient(recipientInput)
-    }
-  }, [ensAddress, recipientInput])
+  const recipient = ensAddress || recipientInput
 
   useEffect(() => {
     if (onError) {
@@ -420,6 +410,17 @@ export function useSendForm({
     }
   }, [selectedDestToken, defaultDestToken])
 
+  // Auto-derive destination chain from destination token.
+  // This removes the need for external chain-sync effects in ClassicSwap/Fund/Withdraw.
+  useEffect(() => {
+    if (selectedDestToken?.chainId) {
+      const chainInfo = getChainInfo(selectedDestToken.chainId)
+      if (chainInfo) {
+        setSelectedDestinationChain(chainInfo)
+      }
+    }
+  }, [selectedDestToken])
+
   // Verify that decimals are stable and loaded before calculating amountRaw
   const isDecimalsVerified = useMemo(() => {
     // Wait for supported tokens to load first
@@ -472,7 +473,7 @@ export function useSendForm({
   const { sortedTokens: feeTokenBalances } = useTokenBalances(
     skipFeeBalanceFetch ? null : (account?.address as Address | null),
     undefined,
-    { refetchInterval: WIDGET_REFRESH_INTERVAL },
+    { refetchInterval: false },
   )
 
   // Convert to TokenWithBalance format for setFeeOptions
@@ -488,9 +489,7 @@ export function useSendForm({
 
   // Use ref to store latest tokensWithBalance without triggering re-renders
   const tokensWithBalanceRef = useRef(tokensWithBalance)
-  useEffect(() => {
-    tokensWithBalanceRef.current = tokensWithBalance
-  }, [tokensWithBalance])
+  tokensWithBalanceRef.current = tokensWithBalance
 
   const destTokenAddress = useTokenAddress({
     chainId: selectedDestinationChain?.id,
@@ -501,7 +500,6 @@ export function useSendForm({
   // Skip only for onramp-meld mode where prices aren't needed
   // (for onramp-meld, source token is always USDC and amount comes from Meld quote)
   const combinedTokenPricesInput = useMemo(() => {
-    // Skip price fetching only for onramp-meld mode
     if (fundMethod === "onramp-meld") {
       return []
     }
@@ -604,22 +602,26 @@ export function useSendForm({
     isCustomToken,
   ])
 
-  // Update amount when toAmount prop changes (only for EXACT_OUTPUT)
+  // Sync amount from props: fromAmount drives EXACT_INPUT, toAmount drives EXACT_OUTPUT.
+  // This removes the need for external sync effects in ClassicSwap/Fund/Withdraw.
   useEffect(() => {
-    if (tradeType === TradeType.EXACT_OUTPUT) {
+    if (tradeType === TradeType.EXACT_INPUT && fromAmount !== undefined) {
+      setAmount(fromAmount)
+    } else if (tradeType === TradeType.EXACT_OUTPUT) {
       setAmount(toAmount ?? "")
     }
-  }, [toAmount, tradeType])
+  }, [fromAmount, toAmount, tradeType])
 
   const toAmountFormatted = useMemo(() => {
     return formatAmount(toAmount || 0)
   }, [toAmount])
 
-  // Update recipient when toRecipient prop changes
-  useEffect(() => {
+  // Update recipientInput when toRecipient prop changes (recipient is derived from recipientInput + ENS)
+  const [prevToRecipient, setPrevToRecipient] = useState(toRecipient)
+  if (toRecipient !== prevToRecipient) {
+    setPrevToRecipient(toRecipient)
     setRecipientInput(toRecipient ?? "")
-    setRecipient(toRecipient ?? "")
-  }, [toRecipient])
+  }
 
   const chainInfo = getChainInfo(selectedToken?.chainId)
   const [isSubmitting, setIsSubmitting] = useState(false)
@@ -647,7 +649,10 @@ export function useSendForm({
 
   // Get token with fresh balance data
   const { token: tokenWithFreshBalance, isLoadingBalance } =
-    useTokenWithFreshBalance(selectedToken, account?.address, skipBalanceFetch)
+    useAccountTokenBalanceOnchain(selectedToken, account?.address, {
+      disabled: skipBalanceFetch,
+      withPrices: true,
+    })
 
   // Use fresh balance if available
   const balanceFormatted =
@@ -1110,9 +1115,26 @@ export function useSendForm({
           throw new Error("[trails-sdk] Missing required props for onramp")
         }
 
-        // For onramp-mesh, we need to navigate to the onramp screen
         if (fundMethod === "onramp-mesh") {
-          // Use the navigation callback if provided
+          logger.console.log(
+            "[trails-sdk] Preparing Mesh onramp intent before navigation",
+            {
+              hasSendFn: !!sendFn,
+              intentId: quote?.intentId,
+            },
+          )
+
+          await sendFn!({
+            selectedFeeOption: selectedFeeOption ?? null,
+          })
+
+          logger.console.log(
+            "[trails-sdk] Mesh onramp intent prepared successfully",
+            {
+              intentId: quote?.intentId,
+            },
+          )
+
           if (onNavigateToOnrampMesh) {
             onNavigateToOnrampMesh({
               toTokenSymbol,
@@ -1334,7 +1356,6 @@ export function useSendForm({
     selectedDestinationChain,
     selectedDestToken,
     setAmount,
-    setRecipient,
     setRecipientInput,
     setSelectedDestinationChain,
     setSelectedDestToken,