0xtrails 0.1.3 → 0.1.4

package/src/widget/hooks/useSendForm.ts

@@ -1,4 +1,4 @@
-import type { TokenPrice } from "@0xsequence/api"
+import type { TokenPrice } from "@0xsequence/trails-api"
 import type React from "react"
 import { useCallback, useEffect, useMemo, useState } from "react"
 import {
@@ -11,7 +11,7 @@ import {
 } from "viem"
 import { useAPIClient } from "../../apiClient.js"
 import { getChainInfo, useSupportedChains } from "../../chains.js"
-import { getFullErrorMessage } from "../../error.js"
+import { getFullErrorMessage, getPrettifiedErrorMessage } from "../../error.js"
 import {
   prepareSend,
   TradeType,
@@ -115,7 +115,7 @@ export type UseSendProps = {
   tradeType?: TradeType
   quoteProvider?: string
   fundMethod?: string
-  mode?: "pay" | "fund" | "earn" | "swap"
+  mode?: "pay" | "fund" | "earn" | "swap" | "receive"
   onNavigateToMeshConnect?: (
     props: {
       toTokenSymbol: string
@@ -126,6 +126,7 @@ export type UseSendProps = {
     quote?: PrepareSendQuote | null,
   ) => void
   checkoutOnHandlers?: CheckoutOnHandlers
+  refetchTrigger?: number
 }
 
 export type UseSendReturn = {
@@ -171,6 +172,9 @@ export type UseSendReturn = {
   isValidCustomToken: boolean
   prepareSendQuote: PrepareSendQuote | null
   toAmountDisplay: string
+  quoteError: string | null
+  quoteErrorPrettified: string | null
+  isSameTokenWithoutCustomCalldata: boolean
 }
 
 export function useSendForm({
@@ -198,6 +202,7 @@ export function useSendForm({
   mode,
   onNavigateToMeshConnect,
   checkoutOnHandlers,
+  refetchTrigger = 0,
 }: UseSendProps): UseSendReturn {
   // Auto-set quoteProvider to "lifi" if either from or to chain is etherlink
   const effectiveQuoteProvider = useMemo(() => {
@@ -218,6 +223,10 @@ export function useSendForm({
   const [recipientInput, setRecipientInput] = useState(toRecipient ?? "")
   const [recipient, setRecipient] = useState(toRecipient ?? "")
   const [error, setError] = useState<string | null>(null)
+  const [quoteError, setQuoteError] = useState<string | null>(null)
+  const [quoteErrorPrettified, setQuoteErrorPrettified] = useState<
+    string | null
+  >(null)
   const { supportedChains } = useSupportedChains()
   const { ensAddress } = useResolveEnsAddress({
     textInput: recipientInput,
@@ -524,6 +533,7 @@ export function useSendForm({
       amountRaw === "0" ||
       !selectedToken
     ) {
+      setQuoteError(null)
       setPrepareSendResult(null)
       return
     }
@@ -531,6 +541,7 @@ export function useSendForm({
     try {
       setIsLoadingQuote(true)
       setError(null)
+      setQuoteError(null)
 
       const originRelayer = getRelayer(undefined, selectedToken.chainId)
       const destinationRelayer = getRelayer(
@@ -626,6 +637,7 @@ export function useSendForm({
         destinationTokenAddress,
         swapAmount: amountRaw,
         tradeType,
+        originTokenSymbol: selectedToken.symbol,
         destinationTokenSymbol: selectedDestToken.symbol,
         fee: "0",
         client: walletClient,
@@ -660,6 +672,7 @@ export function useSendForm({
       setIsLoadingQuote(false)
     } catch (error) {
       console.error("[trails-sdk] Error getting quote:", error)
+      setQuoteError(getFullErrorMessage(error))
       setPrepareSendResult(null)
       setIsLoadingQuote(false)
     }
@@ -723,6 +736,7 @@ export function useSendForm({
     selectedDestToken?.symbol,
     selectedDestinationChain?.id,
     toCalldata,
+    refetchTrigger,
   ])
 
   // Calculate destination amount from quote if available
@@ -762,7 +776,7 @@ export function useSendForm({
           quote.originAmountFormatted,
         ).toString() // MeshConnect will deposit origin token amount
         const toChainId = quote?.originChain?.id // MeshConnect will deposit to origin chain
-        const toRecipientAddress = quote.originAddress // MeshConnect will deposit to origin address
+        const toRecipientAddress = quote.originDepositAddress // MeshConnect will deposit to origin address
 
         console.log("[trails-sdk] Navigating to mesh-connect with props:", {
           toTokenSymbol,
@@ -975,6 +989,31 @@ export function useSendForm({
     fundMethod,
   ])
 
+  useEffect(() => {
+    if (quoteError) {
+      setQuoteErrorPrettified(getPrettifiedErrorMessage(quoteError))
+    } else {
+      setQuoteErrorPrettified(null)
+    }
+  }, [quoteError])
+
+  // Check if origin and destination tokens are the same (same contract address on same chain)
+  // Only block same-token transactions when there's no custom calldata
+  const isSameTokenWithoutCustomCalldata = useMemo(() => {
+    if (!selectedToken || !destinationTokenAddress) return false
+    const isSameChainAndToken =
+      selectedToken.contractAddress.toLowerCase() ===
+        destinationTokenAddress.toLowerCase() &&
+      selectedToken.chainId === selectedDestinationChain?.id
+    // Allow same-token transactions if there's custom calldata (e.g., NFT minting)
+    return isSameChainAndToken && !toCalldata
+  }, [
+    selectedToken,
+    destinationTokenAddress,
+    selectedDestinationChain,
+    toCalldata,
+  ])
+
   return {
     amount,
     amountRaw,
@@ -1018,5 +1057,8 @@ export function useSendForm({
     destinationTokenAddress,
     isValidCustomToken,
     prepareSendQuote: prepareSendResult?.quote ?? null,
+    quoteError,
+    quoteErrorPrettified,
+    isSameTokenWithoutCustomCalldata,
   }
 }

package/src/widget/hooks/useTokenList.ts

@@ -15,7 +15,7 @@ import {
   useHasSufficientBalanceUsd,
   useTokenBalances,
 } from "../../tokenBalances.js"
-import { getFormatttedTokenName, getSupportedTokens } from "../../tokens.js"
+import { getFormatttedTokenName, useSupportedTokens } from "../../tokens.js"
 import { useIndexerGatewayClient } from "../../indexerClient.js"
 
 export interface Token {
@@ -82,9 +82,6 @@ export function useTokenList({
 }: UseTokenListProps): UseTokenListReturn {
   const [selectedToken, setSelectedToken] = useState<Token | null>(null)
   const [searchQuery, setSearchQuery] = useState("")
-  const [supportedTokens, setSupportedTokens] = useState<any[]>([])
-  const [isLoadingSupportedTokens, setIsLoadingSupportedTokens] =
-    useState(false)
   const { address } = useAccount()
   const indexerGatewayClient = useIndexerGatewayClient()
   const {
@@ -93,6 +90,10 @@ export function useTokenList({
     balanceError,
   } = useTokenBalances(address as Address.Address, indexerGatewayClient)
 
+  // Use cached supported tokens hook
+  const { supportedTokens, isLoadingTokens: isLoadingSupportedTokens } =
+    useSupportedTokens()
+
   // Determine loading state based on fund method and allSupportedTokens
   const isLoadingTokens =
     fundMethod === "qr-code" || fundMethod === "exchange"
@@ -114,27 +115,7 @@ export function useTokenList({
   const showContinueButton = false
   const { supportedChains: supportedToChains } = useSupportedChains()
 
-  // Fetch all supported tokens when fundMethod is "qr-code" or "exchange" or when allSupportedTokens is true
-  useEffect(() => {
-    if (
-      fundMethod === "qr-code" ||
-      fundMethod === "exchange" ||
-      allSupportedTokens
-    ) {
-      setIsLoadingSupportedTokens(true)
-      getSupportedTokens()
-        .then((tokens) => {
-          // Store supported tokens for use in filteredTokensFormatted
-          setSupportedTokens(tokens)
-        })
-        .catch((error) => {
-          console.error("[trails-sdk] Failed to fetch supported tokens:", error)
-        })
-        .finally(() => {
-          setIsLoadingSupportedTokens(false)
-        })
-    }
-  }, [fundMethod, allSupportedTokens])
+  // Note: Supported tokens are now fetched via useSupportedTokens hook with caching
 
   const supportedChainIds = useMemo(() => {
     return new Set(supportedToChains.map((c) => c.id))
@@ -144,7 +125,7 @@ export function useTokenList({
     // If fundMethod is "qr-code" or "exchange", use filtered supported tokens
     if (fundMethod === "qr-code" || fundMethod === "exchange") {
       // Filter to only show specific tokens for QR code and exchange modes
-      const filteredTokens = supportedTokens.filter((token) => {
+      const filteredTokens = supportedTokens.filter((token: any) => {
         const symbol = token.symbol.toUpperCase()
         return ["ETH", "POL", "USDC", "USDT", "DAI", "BAT", "WETH"].includes(
           symbol,
@@ -152,7 +133,7 @@ export function useTokenList({
       })
 
       // Convert SupportedToken to TokenBalanceExtended format
-      return filteredTokens.map((token) => {
+      return filteredTokens.map((token: any) => {
         // Check if it's a native token (like ETH)
         if (
           token.contractAddress === "0x0000000000000000000000000000000000000000"