0xtrails 0.1.2 → 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 {
@@ -9,11 +9,9 @@ import {
   type WalletClient,
   zeroAddress,
 } from "viem"
-import { mainnet } from "viem/chains"
-import { useEnsAddress } from "wagmi"
 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,
@@ -37,6 +35,8 @@ import {
   useTokenInfo,
 } from "../../tokens.js"
 import type { CheckoutOnHandlers } from "./useCheckout.js"
+import { useResolveEnsAddress } from "../../ens.js"
+import * as chains from "viem/chains"
 
 export interface Token {
   id: number
@@ -100,6 +100,7 @@ export type UseSendProps = {
   toChainId?: number
   toToken?: string
   toCalldata?: string
+  refundAddress?: string
   walletClient: WalletClient
   onTransactionStateChange: (transactionStates: TransactionState[]) => void
   onError: (error: Error | string | null) => void
@@ -109,12 +110,12 @@ export type UseSendProps = {
   onSend: (amount: string, recipient: string) => void
   onConfirm: () => void
   onComplete: (result: OnCompleteProps) => void
-  selectedToken: Token
+  selectedToken?: Token
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   tradeType?: TradeType
   quoteProvider?: string
-  fundMethod?: string | null
-  mode?: "pay" | "fund" | "earn"
+  fundMethod?: string
+  mode?: "pay" | "fund" | "earn" | "swap" | "receive"
   onNavigateToMeshConnect?: (
     props: {
       toTokenSymbol: string
@@ -125,6 +126,7 @@ export type UseSendProps = {
     quote?: PrepareSendQuote | null,
   ) => void
   checkoutOnHandlers?: CheckoutOnHandlers
+  refetchTrigger?: number
 }
 
 export type UseSendReturn = {
@@ -161,7 +163,7 @@ export type UseSendReturn = {
   isValidRecipient: boolean
   destTokenPrices: TokenPrice[] | null
   sourceTokenPrices: TokenPrice[] | null
-  selectedToken: Token
+  selectedToken?: Token
   selectedFeeToken: TokenInfo | null
   setIsChainDropdownOpen: (isOpen: boolean) => void
   setIsTokenDropdownOpen: (isOpen: boolean) => void
@@ -170,6 +172,9 @@ export type UseSendReturn = {
   isValidCustomToken: boolean
   prepareSendQuote: PrepareSendQuote | null
   toAmountDisplay: string
+  quoteError: string | null
+  quoteErrorPrettified: string | null
+  isSameTokenWithoutCustomCalldata: boolean
 }
 
 export function useSendForm({
@@ -179,6 +184,7 @@ export function useSendForm({
   toChainId, // Custom specified destination chain id
   toToken, // Custom specified destination token address or symbol
   toCalldata, // Custom specified destination calldata
+  refundAddress, // Custom specified refund address
   walletClient,
   onTransactionStateChange,
   onError,
@@ -196,24 +202,36 @@ 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(() => {
+    if (!quoteProvider || quoteProvider === "auto") {
+      if (
+        selectedToken?.chainId === chains.etherlink.id ||
+        toChainId === chains.etherlink.id
+      ) {
+        return "lifi"
+      }
+    }
+    return quoteProvider
+  }, [quoteProvider, selectedToken?.chainId, toChainId])
+
   const [amount, setAmount] = useState(
     tradeType === TradeType.EXACT_INPUT ? "" : (toAmount ?? ""),
   )
   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 { data: ensAddress } = useEnsAddress({
-    name: recipientInput?.endsWith(".eth") ? recipientInput : undefined,
-    chainId: mainnet.id,
-    query: {
-      enabled: !!recipientInput && recipientInput.endsWith(".eth"),
-    },
+  const { ensAddress } = useResolveEnsAddress({
+    textInput: recipientInput,
   })
 
-  console.log("GENERATED CALLLDATA", toCalldata)
-
   useEffect(() => {
     if (ensAddress) {
       setRecipient(ensAddress)
@@ -287,13 +305,17 @@ export function useSendForm({
   }, [errorCustomToken, isCustomToken, isLoadingCustomToken])
 
   const defaultDestToken = useMemo(() => {
+    if (mode === "swap") {
+      return null
+    }
+
     if (selectedDestinationChain) {
       return supportedTokens.find(
         (token) => token.chainId === selectedDestinationChain.id,
       )
     }
     return supportedTokens?.[0] as TokenInfo
-  }, [supportedTokens, selectedDestinationChain])
+  }, [supportedTokens, selectedDestinationChain, mode])
 
   const [isChainDropdownOpen, setIsChainDropdownOpen] = useState(false)
   const [isTokenDropdownOpen, setIsTokenDropdownOpen] = useState(false)
@@ -366,7 +388,7 @@ export function useSendForm({
 
   // Update selectedDestToken when toToken prop changes
   useEffect(() => {
-    if (toToken && !isCustomToken) {
+    if (toToken && !isCustomToken && selectedDestinationChain?.id) {
       const isToTokenAddress = isAddress(toToken)
       const newToken = supportedTokens.find(
         (token) =>
@@ -385,7 +407,7 @@ export function useSendForm({
     toToken,
     supportedTokens,
     toChainId,
-    selectedDestinationChain.id,
+    selectedDestinationChain?.id,
     isCustomToken,
   ])
 
@@ -406,7 +428,7 @@ export function useSendForm({
     setRecipient(toRecipient ?? "")
   }, [toRecipient])
 
-  const chainInfo = getChainInfo(selectedToken.chainId)
+  const chainInfo = getChainInfo(selectedToken?.chainId)
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [isWaitingForWalletConfirm, setIsWaitingForWalletConfirm] =
     useState(false)
@@ -422,11 +444,13 @@ export function useSendForm({
     [onTransactionStateChange],
   )
 
-  const balanceFormatted = formatRawAmount(
-    selectedToken.balance,
-    selectedToken.contractInfo?.decimals,
-  )
-  const balanceUsdDisplay = selectedToken.balanceUsdFormatted ?? ""
+  const balanceFormatted = selectedToken
+    ? formatRawAmount(
+        selectedToken.balance,
+        selectedToken.contractInfo?.decimals,
+      )
+    : "0"
+  const balanceUsdDisplay = selectedToken?.balanceUsdFormatted ?? ""
   const isValidRecipient = Boolean(recipient && isAddress(recipient))
 
   // Calculate USD value based on trade type
@@ -460,7 +484,7 @@ export function useSendForm({
 
   // Calculate raw amount (in wei/smallest unit)
   const amountRaw = useMemo(() => {
-    if (!amount) {
+    if (!amount || !selectedToken?.contractInfo?.decimals) {
       return "0"
     }
 
@@ -472,6 +496,12 @@ export function useSendForm({
         : selectedDestToken?.decimals
 
     if (!decimals) {
+      console.warn("[trails-sdk] Missing token decimals for quote", {
+        decimals,
+        selectedToken,
+        selectedDestToken,
+        tradeType,
+      })
       return "0"
     }
 
@@ -482,8 +512,10 @@ export function useSendForm({
     }
   }, [
     amount,
+    selectedDestToken,
+    selectedToken,
     selectedDestToken?.decimals,
-    selectedToken.contractInfo?.decimals,
+    selectedToken?.contractInfo?.decimals,
     tradeType,
   ])
 
@@ -498,8 +530,10 @@ export function useSendForm({
       !selectedDestinationChain ||
       amount === "0" ||
       !amountRaw ||
-      amountRaw === "0"
+      amountRaw === "0" ||
+      !selectedToken
     ) {
+      setQuoteError(null)
       setPrepareSendResult(null)
       return
     }
@@ -507,6 +541,7 @@ export function useSendForm({
     try {
       setIsLoadingQuote(true)
       setError(null)
+      setQuoteError(null)
 
       const originRelayer = getRelayer(undefined, selectedToken.chainId)
       const destinationRelayer = getRelayer(
@@ -602,6 +637,7 @@ export function useSendForm({
         destinationTokenAddress,
         swapAmount: amountRaw,
         tradeType,
+        originTokenSymbol: selectedToken.symbol,
         destinationTokenSymbol: selectedDestToken.symbol,
         fee: "0",
         client: walletClient,
@@ -609,6 +645,7 @@ export function useSendForm({
         originRelayer,
         destinationRelayer,
         destinationCalldata: toCalldata,
+        refundAddress,
         dryMode: isDryMode,
         onTransactionStateChange: handleTransactionStateChange,
         sourceTokenPriceUsd,
@@ -621,7 +658,8 @@ export function useSendForm({
           )?.url ?? undefined,
         gasless,
         originNativeTokenPriceUsd: nativeTokenPriceUsd,
-        quoteProvider,
+        quoteProvider: effectiveQuoteProvider,
+        mode,
         fundMethod,
         checkoutOnHandlers,
       }
@@ -634,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)
     }
@@ -653,6 +692,7 @@ export function useSendForm({
     selectedToken?.balance,
     selectedToken?.tokenPriceUsd,
     toCalldata,
+    refundAddress,
     paymasterUrls,
     gasless,
     handleTransactionStateChange,
@@ -662,10 +702,11 @@ export function useSendForm({
     selectedDestToken,
     selectedDestinationChain,
     selectedToken,
-    quoteProvider,
+    effectiveQuoteProvider,
     fundMethod,
     amountRaw,
     checkoutOnHandlers,
+    mode,
   ])
 
   // Auto-fetch quotes when inputs change (debounced)
@@ -695,6 +736,7 @@ export function useSendForm({
     selectedDestToken?.symbol,
     selectedDestinationChain?.id,
     toCalldata,
+    refetchTrigger,
   ])
 
   // Calculate destination amount from quote if available
@@ -734,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,
@@ -865,10 +907,12 @@ export function useSendForm({
 
   // Get button text based on recipient and calldata
   const buttonText = useMemo(() => {
+    if (!selectedToken) return "Select a token"
+    if (!amount) return "Enter an amount"
+    if (!selectedDestToken?.symbol) return "Select a token"
     if (isWaitingForWalletConfirm) return "Waiting for wallet..."
     if (isSubmitting) return "Processing..."
-    if (!amount) return "Enter amount"
-    if (!isValidRecipient) return "Enter recipient"
+    if (!isValidRecipient) return "Enter a recipient"
     if (isLoadingQuote) return "Getting quote..."
     if (!prepareSendResult) return "No quote available"
 
@@ -886,11 +930,15 @@ export function useSendForm({
     )
 
     try {
-      const isSameChain = selectedToken.chainId === selectedDestinationChain.id
+      const isSameChain = selectedToken.chainId === selectedDestinationChain?.id
       const isSameToken = selectedToken.symbol === selectedDestToken.symbol
       const checksummedRecipient = getAddress(recipient)
       const checksummedAccount = getAddress(account.address)
 
+      if (mode === "swap") {
+        return `Swap ${amountDisplay} ${tokenSymbol}`
+      }
+
       if (fundMethod === "exchange") {
         return `Continue to Exchange`
       }
@@ -936,11 +984,36 @@ export function useSendForm({
     selectedToken,
     tradeType,
     prepareSendResult?.quote?.originAmountFormatted,
-    selectedDestinationChain.id,
+    selectedDestinationChain?.id,
     mode,
     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,
@@ -984,5 +1057,8 @@ export function useSendForm({
     destinationTokenAddress,
     isValidCustomToken,
     prepareSendQuote: prepareSendResult?.quote ?? null,
+    quoteError,
+    quoteErrorPrettified,
+    isSameTokenWithoutCustomCalldata,
   }
 }