0xtrails 0.1.13 → 0.2.1

package/src/widget/hooks/useSendForm.ts

@@ -39,6 +39,9 @@ import { useResolveEnsAddress } from "../../ens.js"
 import { etherlink } from "viem/chains"
 import { logger } from "../../logger.js"
 import { getIsContract } from "../../contractUtils.js"
+import { useTrailsClient } from "../../trailsClient.js"
+import { useTokenList } from "./useTokenList.js"
+import { useSelectedFeeToken } from "./useSelectedFeeToken.js"
 
 export interface Token {
   id: number
@@ -116,19 +119,14 @@ export type UseSendProps = {
 }
 
 export type FeeOption = {
-  token: {
-    chainId: number
-    name: string
-    symbol: string
-    type: string
-    decimals: number
-    logoURL: string
-    contractAddress: string | null
-    tokenID: string | null
-  }
-  to: string
-  value: string
-  gasLimit: number
+  tokenAddress: string
+  tokenSymbol: string
+  tokenDecimals: number
+  amount: string
+  amountUSD: number
+  notEnoughBalance?: boolean
+  tokenImageUrl?: string
+  chainId?: number
 }
 
 export type UseSendReturn = {
@@ -178,6 +176,8 @@ export type UseSendReturn = {
   quoteErrorPrettified: string | null
   isSameTokenWithoutCustomCalldata: boolean
   isRecipientContract: boolean
+  isSenderContractOnOrigin: boolean
+  isSenderContractOnDestination: boolean
 }
 
 export function useSendForm({
@@ -277,6 +277,7 @@ export function useSendForm({
             recipient as `0x${string}`,
             selectedDestinationChain.id,
           )
+          logger.console.log("[trails-sdk] isRecipientContract:", isContract)
           setIsRecipientContract(isContract)
         } catch (error) {
           logger.console.error(
@@ -293,6 +294,64 @@ export function useSendForm({
     checkRecipientContract()
   }, [recipient, selectedDestinationChain?.id])
 
+  // Check if sender is a contract address on origin chain
+  useEffect(() => {
+    const checkSenderContractOnOrigin = async () => {
+      if (account?.address && selectedToken?.chainId) {
+        try {
+          const isContract = await getIsContract(
+            account.address as `0x${string}`,
+            selectedToken.chainId,
+          )
+          logger.console.log(
+            "[trails-sdk] isSenderContractOnOrigin:",
+            isContract,
+          )
+          setIsSenderContractOnOrigin(isContract)
+        } catch (error) {
+          logger.console.error(
+            "[trails-sdk] Error checking if sender is contract on origin:",
+            error,
+          )
+          setIsSenderContractOnOrigin(false)
+        }
+      } else {
+        setIsSenderContractOnOrigin(false)
+      }
+    }
+
+    checkSenderContractOnOrigin()
+  }, [account?.address, selectedToken?.chainId])
+
+  // Check if sender is a contract address on destination chain
+  useEffect(() => {
+    const checkSenderContractOnDestination = async () => {
+      if (account?.address && selectedDestinationChain?.id) {
+        try {
+          const isContract = await getIsContract(
+            account.address as `0x${string}`,
+            selectedDestinationChain.id,
+          )
+          logger.console.log(
+            "[trails-sdk] isSenderContractOnDestination:",
+            isContract,
+          )
+          setIsSenderContractOnDestination(isContract)
+        } catch (error) {
+          logger.console.error(
+            "[trails-sdk] Error checking if sender is contract on destination:",
+            error,
+          )
+          setIsSenderContractOnDestination(false)
+        }
+      } else {
+        setIsSenderContractOnDestination(false)
+      }
+    }
+
+    checkSenderContractOnDestination()
+  }, [account?.address, selectedDestinationChain?.id])
+
   const isCustomToken = useMemo(() => toToken?.startsWith("0x"), [toToken])
 
   const {
@@ -354,7 +413,7 @@ export function useSendForm({
       token = supportedTokens.find(
         (token) =>
           (isToTokenAddress // Match by specified destination token address or symbol
-            ? token.contractAddress === toToken
+            ? token.contractAddress.toLowerCase() === toToken.toLowerCase()
             : token.symbol === toToken) &&
           (toChainId // Match by specified destination chain id
             ? token.chainId === toChainId
@@ -372,22 +431,38 @@ export function useSendForm({
   }, [selectedDestToken, defaultDestToken])
 
   const apiClient = useAPIClient()
+  const trailsClient = useTrailsClient()
+
+  // Get user's token balances for balance checking
+  const { filteredTokensFormatted } = useTokenList({
+    onContinue: () => {}, // Not used for balance checking
+    onError: () => {}, // Not used for balance checking
+    fundMethod: undefined,
+    allSupportedTokens: true, // Get all tokens for balance checking
+  })
 
   const destTokenAddress = useTokenAddress({
     chainId: selectedDestinationChain?.id,
     tokenSymbol: selectedDestToken?.symbol,
   })
 
+  const destTokenPricesInput = useMemo(() => {
+    const input =
+      selectedDestToken && destTokenAddress && selectedDestinationChain?.id
+        ? [
+            {
+              tokenId: selectedDestToken.symbol,
+              contractAddress: destTokenAddress,
+              chainId: selectedDestinationChain.id,
+            },
+          ]
+        : []
+
+    return input
+  }, [selectedDestToken, destTokenAddress, selectedDestinationChain?.id])
+
   const { tokenPrices: destTokenPrices } = useTokenPrices(
-    selectedDestToken && destTokenAddress
-      ? [
-          {
-            tokenId: selectedDestToken.symbol,
-            contractAddress: destTokenAddress,
-            chainId: selectedDestinationChain.id,
-          },
-        ]
-      : [],
+    destTokenPricesInput,
     apiClient,
   )
 
@@ -421,7 +496,7 @@ export function useSendForm({
       const newToken = supportedTokens.find(
         (token) =>
           (isToTokenAddress // Match by specified destination token address or symbol
-            ? token.contractAddress === toToken
+            ? token.contractAddress.toLowerCase() === toToken.toLowerCase()
             : token.symbol === toToken) &&
           (toChainId // Match by specified destination chain id
             ? token.chainId === toChainId
@@ -479,12 +554,13 @@ export function useSendForm({
     [onTransactionStateChange],
   )
 
-  const balanceFormatted = selectedToken
-    ? formatRawAmount(
-        selectedToken.balance,
-        selectedToken.contractInfo?.decimals,
-      )
-    : "0"
+  const balanceFormatted =
+    selectedToken?.balance && selectedToken?.contractInfo?.decimals
+      ? formatRawAmount(
+          selectedToken.balance,
+          selectedToken.contractInfo?.decimals!,
+        )
+      : "0"
   const balanceUsdDisplay = selectedToken?.balanceUsdFormatted ?? ""
   const isValidRecipient = Boolean(recipient && isAddress(recipient))
 
@@ -498,10 +574,19 @@ export function useSendForm({
     return formatUsdAmountDisplay(amountUsd)
   }, [amount, destTokenPrices, sourceTokenPrices, tradeType])
 
-  const [selectedFeeToken, setSelectedFeeToken] = useState<FeeOption | null>(
-    null,
-  )
+  // Use the fee token selection hook
+  const {
+    selectedFeeToken,
+    setSelectedFeeToken,
+    processedFeeOptions: feeOptions,
+    setRawFeeOptions,
+  } = useSelectedFeeToken()
+
   const [isRecipientContract, setIsRecipientContract] = useState(false)
+  const [isSenderContractOnOrigin, setIsSenderContractOnOrigin] =
+    useState(false)
+  const [isSenderContractOnDestination, setIsSenderContractOnDestination] =
+    useState(false)
 
   const { hasParam } = useQueryParams()
   const isDryMode = hasParam("dryMode", "true")
@@ -520,7 +605,39 @@ export function useSendForm({
 
   // Calculate raw amount (in wei/smallest unit)
   const amountRaw = useMemo(() => {
-    if (!amount || !selectedToken?.contractInfo?.decimals) {
+    if (
+      !amount &&
+      !(selectedToken?.contractInfo?.decimals || selectedDestToken?.decimals)
+    ) {
+      logger.console.warn("[trails-sdk] Missing token decimals for quote", {
+        amount,
+        selectedToken,
+        selectedDestToken,
+        tradeType,
+      })
+      return "0"
+    }
+
+    if (
+      tradeType === TradeType.EXACT_INPUT &&
+      !selectedToken?.contractInfo?.decimals
+    ) {
+      logger.console.warn(
+        "[trails-sdk] Missing source token decimals for quote",
+        {
+          selectedToken,
+          tradeType,
+        },
+      )
+      return "0"
+    } else if (!selectedDestToken?.decimals) {
+      logger.console.warn(
+        "[trails-sdk] Missing destination token decimals for quote",
+        {
+          selectedDestToken,
+          tradeType,
+        },
+      )
       return "0"
     }
 
@@ -528,7 +645,7 @@ export function useSendForm({
     // For EXACT_OUTPUT: use destination token decimals (user enters destination amount)
     const decimals =
       tradeType === TradeType.EXACT_INPUT
-        ? selectedToken.contractInfo?.decimals
+        ? selectedToken?.contractInfo?.decimals
         : selectedDestToken?.decimals
 
     if (!decimals) {
@@ -569,6 +686,18 @@ export function useSendForm({
       amountRaw === "0" ||
       !selectedToken
     ) {
+      logger.console.log(
+        "[trails-sdk] Skipping quote because of missing inputs",
+        {
+          amount,
+          destinationTokenAddress,
+          isValidRecipient,
+          selectedDestToken,
+          selectedDestinationChain,
+          amountRaw,
+          selectedToken,
+        },
+      )
       setQuoteError(null)
       setPrepareSendResult(null)
       return
@@ -589,7 +718,13 @@ export function useSendForm({
       const destinationTokenDecimals = selectedDestToken.decimals
 
       if (!sourceTokenDecimals || !destinationTokenDecimals) {
-        logger.console.warn("[trails-sdk] Missing token decimals for quote")
+        logger.console.warn("[trails-sdk] Missing token decimals for quote", {
+          sourceTokenDecimals,
+          destinationTokenDecimals,
+          selectedToken,
+          selectedDestToken,
+          tradeType,
+        })
         setPrepareSendResult(null)
         setIsLoadingQuote(false)
         return
@@ -669,7 +804,10 @@ export function useSendForm({
         originChainId: selectedToken.chainId,
         originTokenBalance:
           fundMethod === "qr-code" || fundMethod === "exchange"
-            ? "1"
+            ? parseUnits(
+                "100",
+                selectedToken.contractInfo?.decimals ?? 18,
+              ).toString() // needs to be an amount that is greater than the minimum amount for the swap
             : selectedToken.balance,
         destinationChainId: selectedDestinationChain.id,
         recipient,
@@ -681,6 +819,7 @@ export function useSendForm({
         fee: "0",
         client: walletClient,
         apiClient,
+        trailsClient,
         originRelayer,
         destinationRelayer,
         destinationCalldata: toCalldata,
@@ -701,8 +840,16 @@ export function useSendForm({
         mode,
         fundMethod,
         checkoutOnHandlers,
+        selectedFeeToken,
       }
 
+      logger.console.log(
+        "[trails-sdk] [FEE-SELECT] getQuote using selectedFeeToken:",
+        {
+          selectedFeeToken,
+        },
+      )
+
       const result = await prepareSend(options)
 
       logger.console.log("[trails-sdk] prepareSend quote:", result.quote)
@@ -721,6 +868,7 @@ export function useSendForm({
     account,
     walletClient,
     apiClient,
+    trailsClient,
     selectedDestToken?.decimals,
     recipient,
     destinationTokenAddress,
@@ -746,6 +894,7 @@ export function useSendForm({
     amountRaw,
     checkoutOnHandlers,
     mode,
+    selectedFeeToken,
   ])
 
   // Auto-fetch quotes when inputs change (debounced)
@@ -776,6 +925,11 @@ export function useSendForm({
     selectedDestinationChain?.id,
     toCalldata,
     refetchTrigger,
+    selectedToken?.contractAddress,
+    selectedToken?.chainId,
+    selectedToken?.balance,
+    selectedToken?.tokenPriceUsd,
+    // selectedFeeToken is passed to send() at execution time, not needed here
   ])
 
   // Calculate destination amount from quote if available
@@ -791,9 +945,31 @@ export function useSendForm({
     return formatAmountDisplay(quotedDestinationAmount || "0")
   }, [quotedDestinationAmount])
 
-  const feeOptions = useMemo(() => {
-    return prepareSendResult?.feeOptions?.options ?? []
-  }, [prepareSendResult])
+  // Set raw fee options in the hook whenever prepareSendResult or tokens change
+  useEffect(() => {
+    const apiFeeOptions = prepareSendResult?.feeOptions?.feeOptions ?? []
+    logger.console.log(
+      "[trails-sdk] [FEE-SELECT] useSendForm setting raw fee options:",
+      {
+        prepareSendResult,
+        feeOptions: prepareSendResult?.feeOptions,
+        apiFeeOptions,
+        length: apiFeeOptions.length,
+      },
+    )
+
+    setRawFeeOptions(
+      apiFeeOptions,
+      selectedToken?.chainId,
+      filteredTokensFormatted,
+    )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    prepareSendResult,
+    selectedToken?.chainId,
+    filteredTokensFormatted,
+    setRawFeeOptions,
+  ])
 
   const processSend = useCallback(async () => {
     try {
@@ -877,7 +1053,17 @@ export function useSendForm({
 
       async function handleSend() {
         logger.console.log(
-          "[trails-sdk] handleRetry called, about to call send()",
+          "[trails-sdk] [FEE-SELECT] [GASLESS-FLOW] handleSend called, about to call send()",
+        )
+        logger.console.log(
+          "[trails-sdk] [FEE-SELECT] [GASLESS-FLOW] selectedFeeToken value at send() call time:",
+          {
+            selectedFeeToken,
+            isNull: selectedFeeToken === null,
+            isUndefined: selectedFeeToken === undefined,
+            type: typeof selectedFeeToken,
+            stringified: JSON.stringify(selectedFeeToken),
+          },
         )
         // Wait for full send to complete
         const {
@@ -886,7 +1072,7 @@ export function useSendForm({
           destinationMetaTxnReceipt,
         } = await send({
           onOriginSend,
-          feeTokenAddress: selectedFeeToken?.token.contractAddress,
+          selectedFeeToken, // Pass current value at execution time
         })
         logger.console.log("[trails-sdk] send() completed, receipts:", {
           originUserTxReceipt,
@@ -947,7 +1133,7 @@ export function useSendForm({
     onError,
     fundMethod,
     onNavigateToMeshConnect,
-    selectedFeeToken?.token.contractAddress,
+    selectedFeeToken, // Include so handleSend captures latest value
   ])
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -991,9 +1177,13 @@ export function useSendForm({
       const checksummedRecipient = getAddress(recipient)
       const checksummedAccount = getAddress(account.address)
 
-      if (mode === "swap") {
-        return `Swap ${amountDisplay} ${tokenSymbol}`
-      }
+      logger.console.log("[trails-sdk] buttonText:", {
+        mode,
+        fundMethod,
+        isSameChain,
+        isSameToken,
+        checksummedRecipient,
+      })
 
       if (fundMethod === "exchange") {
         return `Continue to Exchange`
@@ -1003,6 +1193,14 @@ export function useSendForm({
         return `Continue to QR Code`
       }
 
+      if (!fundMethod || fundMethod === "wallet") {
+        return `Continue on wallet`
+      }
+
+      if (mode === "swap") {
+        return `Swap ${amountDisplay} ${tokenSymbol}`
+      }
+
       if (mode === "earn") {
         return `Deposit ${destinationAmountDisplay} ${destinationTokenSymbol}`
       }
@@ -1054,7 +1252,7 @@ export function useSendForm({
   }, [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
+  // Only block same-token transactions when there's no custom calldata AND recipient is the same as sender
   const isSameTokenWithoutCustomCalldata = useMemo(() => {
     if (
       !selectedToken ||
@@ -1069,14 +1267,22 @@ export function useSendForm({
       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
+
+    // Allow same-token transactions if:
+    // 1. There's custom calldata (e.g., NFT minting)
+    // 2. Recipient is different from sender (simple transfer to another address)
+    const recipientIsSameAsSender =
+      recipient?.toLowerCase() === account?.address?.toLowerCase()
+
+    return isSameChainAndToken && !toCalldata && recipientIsSameAsSender
   }, [
     selectedToken,
     destinationTokenAddress,
     selectedDestinationChain,
     toCalldata,
     selectedToken?.chainId,
+    recipient,
+    account?.address,
   ])
 
   return {
@@ -1126,5 +1332,7 @@ export function useSendForm({
     quoteErrorPrettified,
     isSameTokenWithoutCustomCalldata,
     isRecipientContract,
+    isSenderContractOnOrigin,
+    isSenderContractOnDestination,
   }
 }

package/src/widget/hooks/useSwapAmount.tsx

@@ -0,0 +1,50 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  type ReactNode,
+} from "react"
+
+interface SwapAmountContextType {
+  amount: string
+  setAmount: (amount: string) => void
+  clearAmount: () => void
+}
+
+const SwapAmountContext = createContext<SwapAmountContextType | undefined>(
+  undefined,
+)
+
+interface SwapAmountProviderProps {
+  children: ReactNode
+}
+
+export const SwapAmountProvider: React.FC<SwapAmountProviderProps> = ({
+  children,
+}) => {
+  const [amount, setAmount] = useState<string>("")
+
+  const clearAmount = () => {
+    setAmount("")
+  }
+
+  return (
+    <SwapAmountContext.Provider
+      value={{
+        amount,
+        setAmount,
+        clearAmount,
+      }}
+    >
+      {children}
+    </SwapAmountContext.Provider>
+  )
+}
+
+export const useSwapAmount = () => {
+  const context = useContext(SwapAmountContext)
+  if (context === undefined) {
+    throw new Error("useSwapAmount must be used within a SwapAmountProvider")
+  }
+  return context
+}

package/src/widget/hooks/useSwapSettings.tsx

@@ -0,0 +1,100 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  type ReactNode,
+} from "react"
+import { logger } from "../../logger.js"
+
+interface SwapSettingsContextType {
+  isSimpleSwapMode: boolean
+  setIsSimpleSwapMode: (simple: boolean) => void
+  setIsSimpleSwapModeWithStorage: (simple: boolean) => void
+  toggleSimpleSwapMode: () => void
+  resetSwapSettings: () => void
+}
+
+const SwapSettingsContext = createContext<SwapSettingsContextType | undefined>(
+  undefined,
+)
+
+interface SwapSettingsProviderProps {
+  children: ReactNode
+  initialSimpleMode?: boolean
+}
+
+const SIMPLE_SWAP_MODE_KEY = "trails-simple-swap-mode"
+
+export const SwapSettingsProvider: React.FC<SwapSettingsProviderProps> = ({
+  children,
+  initialSimpleMode = false,
+}) => {
+  // Initialize state from localStorage or use initialSimpleMode as fallback
+  const [isSimpleSwapMode, setIsSimpleSwapMode] = useState<boolean>(() => {
+    try {
+      const stored = localStorage.getItem(SIMPLE_SWAP_MODE_KEY)
+      return stored !== null ? JSON.parse(stored) : initialSimpleMode
+    } catch (error) {
+      logger.console.warn(
+        "Failed to read simple swap mode from localStorage:",
+        error,
+      )
+      return initialSimpleMode
+    }
+  })
+
+  // Function that updates state and saves to localStorage (for user preferences)
+  const setIsSimpleSwapModeWithStorage = useCallback((simple: boolean) => {
+    setIsSimpleSwapMode(simple)
+    try {
+      localStorage.setItem(SIMPLE_SWAP_MODE_KEY, JSON.stringify(simple))
+    } catch (error) {
+      logger.console.warn(
+        "Failed to save simple swap mode to localStorage:",
+        error,
+      )
+    }
+  }, [])
+
+  const toggleSimpleSwapMode = useCallback(() => {
+    const newMode = !isSimpleSwapMode
+    setIsSimpleSwapModeWithStorage(newMode)
+  }, [isSimpleSwapMode, setIsSimpleSwapModeWithStorage])
+
+  const resetSwapSettings = useCallback(() => {
+    try {
+      localStorage.removeItem(SIMPLE_SWAP_MODE_KEY)
+      setIsSimpleSwapMode(false) // Default: advanced swap mode
+    } catch (error) {
+      logger.console.warn("Failed to reset swap settings:", error)
+      setIsSimpleSwapMode(false) // Still reset state even if localStorage fails
+    }
+  }, [])
+
+  const value: SwapSettingsContextType = {
+    isSimpleSwapMode,
+    setIsSimpleSwapMode, // This one doesn't save to localStorage
+    setIsSimpleSwapModeWithStorage, // This one saves to localStorage
+    toggleSimpleSwapMode,
+    resetSwapSettings,
+  }
+
+  return (
+    <SwapSettingsContext.Provider value={value}>
+      {children}
+    </SwapSettingsContext.Provider>
+  )
+}
+
+export const useSwapSettings = (): SwapSettingsContextType => {
+  const context = useContext(SwapSettingsContext)
+
+  if (context === undefined) {
+    throw new Error(
+      "useSwapSettings must be used within a SwapSettingsProvider",
+    )
+  }
+
+  return context
+}

package/src/widget/hooks/useTargetAmount.ts

@@ -0,0 +1,23 @@
+import { useAmountUsd } from "./useAmountUsd.js"
+import { useWidgetProps } from "./useWidgetProps.js"
+
+export function useTargetAmount(): {
+  targetAmountUsd: number | null
+  targetAmountUsdFormatted: string
+} {
+  const { toAmount, toToken, toChainId } = useWidgetProps()
+
+  const {
+    amountUsd: targetAmountUsd,
+    amountUsdFormatted: targetAmountUsdFormatted,
+  } = useAmountUsd({
+    amount: toAmount,
+    token: toToken,
+    chainId: Number(toChainId),
+  })
+
+  return {
+    targetAmountUsd,
+    targetAmountUsdFormatted,
+  }
+}