0xtrails 0.2.0 → 0.2.1

package/src/widget/hooks/useSelectedFeeToken.tsx

@@ -0,0 +1,299 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+  useMemo,
+  type ReactNode,
+} from "react"
+import { logger } from "../../logger.js"
+import { zeroAddress } from "viem"
+
+// Define the FeeOption interface with balance check properties
+export interface FeeOption {
+  tokenAddress: string
+  tokenSymbol: string
+  tokenDecimals: number
+  amount: string
+  amountUSD: number
+  notEnoughBalance?: boolean
+  tokenImageUrl?: string
+  chainId?: number
+}
+
+// Token type with balance information
+export interface TokenWithBalance {
+  chainId: number
+  contractAddress?: string
+  balance?: string
+  imageUrl?: string
+}
+
+interface SelectedFeeTokenContextType {
+  selectedFeeToken: FeeOption | null
+  setSelectedFeeToken: (token: FeeOption | null) => void
+  clearSelectedFeeToken: () => void
+  processedFeeOptions: FeeOption[]
+  setRawFeeOptions: (
+    feeOptions: any[] | null | undefined,
+    originChainId: number | undefined,
+    availableTokens: TokenWithBalance[],
+  ) => void
+}
+
+const SelectedFeeTokenContext = createContext<
+  SelectedFeeTokenContextType | undefined
+>(undefined)
+
+interface SelectedFeeTokenProviderProps {
+  children: ReactNode
+  initialToken?: FeeOption | null
+}
+
+export const SelectedFeeTokenProvider: React.FC<
+  SelectedFeeTokenProviderProps
+> = ({ children, initialToken = null }) => {
+  const [selectedFeeToken, setSelectedFeeTokenInternalRaw] =
+    useState<FeeOption | null>(initialToken)
+  const [hasUserSelectedFeeOption, setHasUserSelectedFeeOption] =
+    useState(false)
+  const [rawFeeOptions, setRawFeeOptionsInternal] = useState<any[]>([])
+  const [originTokenChainId, setOriginTokenChainId] = useState<
+    number | undefined
+  >(undefined)
+  const [availableTokens, setAvailableTokens] = useState<TokenWithBalance[]>([])
+
+  // Wrapper to log all state changes to selectedFeeToken
+  const setSelectedFeeTokenInternal = useCallback(
+    (token: FeeOption | null) => {
+      logger.console.log(
+        "[trails-sdk] [FEE-SELECT] selectedFeeToken state changing:",
+        {
+          from: selectedFeeToken,
+          to: token,
+          fromNull: selectedFeeToken === null,
+          toNull: token === null,
+          stackTrace: new Error().stack?.split("\n").slice(2, 5).join("\n"), // Get call stack
+        },
+      )
+      setSelectedFeeTokenInternalRaw(token)
+    },
+    [selectedFeeToken],
+  )
+
+  // Wrapper to track when user makes an explicit selection
+  const setSelectedFeeToken = useCallback(
+    (token: FeeOption | null) => {
+      logger.console.log(
+        "[trails-sdk] [FEE-SELECT] setSelectedFeeToken called (user selection):",
+        {
+          token,
+          isNull: token === null,
+          isUndefined: token === undefined,
+        },
+      )
+      setSelectedFeeTokenInternal(token)
+      setHasUserSelectedFeeOption(true)
+    },
+    [setSelectedFeeTokenInternal],
+  )
+
+  const clearSelectedFeeToken = useCallback(() => {
+    logger.console.log("[trails-sdk] [FEE-SELECT] Clearing selected fee token")
+    setSelectedFeeTokenInternal(null)
+    setHasUserSelectedFeeOption(false)
+  }, [setSelectedFeeTokenInternal])
+
+  // Process raw fee options with balance checks
+  const processedFeeOptions = useMemo(() => {
+    if (!rawFeeOptions || rawFeeOptions.length === 0) {
+      return []
+    }
+
+    logger.console.log("[trails-sdk] [FEE-SELECT] Processing fee options:", {
+      rawFeeOptions,
+      originTokenChainId,
+      availableTokensCount: availableTokens.length,
+    })
+
+    // Add balance check and additional properties to each fee option
+    const feeOptionsWithBalanceCheck = rawFeeOptions.map((option: any) => {
+      // For native token (zero address), check if user has enough native balance
+      if (option.tokenAddress === zeroAddress) {
+        // Find the native token balance for the origin chain
+        const nativeTokenInfo = availableTokens.find(
+          (token) =>
+            token.contractAddress?.toLowerCase() ===
+              zeroAddress.toLowerCase() && token.chainId === originTokenChainId,
+        )
+
+        const nativeBalance = nativeTokenInfo?.balance || "0"
+        const requiredAmount = option.amount
+        const notEnoughBalance = BigInt(nativeBalance) < BigInt(requiredAmount)
+
+        return {
+          ...option,
+          notEnoughBalance,
+          tokenImageUrl: nativeTokenInfo?.imageUrl,
+          chainId: originTokenChainId, // Native token is on the same chain as origin
+        }
+      }
+
+      // For ERC-20 tokens, check user's token balances
+      const userTokenBalance = availableTokens.find(
+        (token) =>
+          token.contractAddress?.toLowerCase() ===
+            option.tokenAddress.toLowerCase() &&
+          token.chainId === originTokenChainId,
+      )
+
+      if (userTokenBalance) {
+        const userBalance = userTokenBalance.balance || "0"
+        const requiredAmount = option.amount
+        const notEnoughBalance = BigInt(userBalance) < BigInt(requiredAmount)
+
+        return {
+          ...option,
+          notEnoughBalance,
+          tokenImageUrl: userTokenBalance.imageUrl,
+          chainId: userTokenBalance.chainId, // Use the actual token's chain ID
+        }
+      }
+
+      // If token balance not found, assume insufficient balance
+      return {
+        ...option,
+        notEnoughBalance: true,
+        tokenImageUrl: undefined,
+        chainId: originTokenChainId, // Fallback to origin chain
+      }
+    })
+
+    // Sort fee options: available options first, then disabled options at the bottom
+    const sortedFeeOptions = feeOptionsWithBalanceCheck.sort(
+      (a: FeeOption, b: FeeOption) => {
+        // If both have the same balance status, maintain original order
+        if (a.notEnoughBalance === b.notEnoughBalance) {
+          return 0
+        }
+        // Put available options (notEnoughBalance: false) before disabled options (notEnoughBalance: true)
+        return a.notEnoughBalance ? 1 : -1
+      },
+    )
+
+    logger.console.log(
+      "[trails-sdk] [FEE-SELECT] Processed and sorted fee options:",
+      sortedFeeOptions,
+    )
+
+    return sortedFeeOptions
+  }, [rawFeeOptions, originTokenChainId, availableTokens])
+
+  // Auto-select first fee option with sufficient balance (non-native token)
+  // Only auto-select on initial load, not when user explicitly chooses native gas
+  // If no ERC20 fee options are available, selectedFeeToken stays null (native gas)
+  useEffect(() => {
+    logger.console.log(
+      "[trails-sdk] [FEE-SELECT] Auto-selection useEffect triggered:",
+      {
+        processedFeeOptionsLength: processedFeeOptions.length,
+        hasUserSelectedFeeOption,
+        selectedFeeToken,
+        willAutoSelect:
+          processedFeeOptions.length > 0 &&
+          !hasUserSelectedFeeOption &&
+          !selectedFeeToken,
+      },
+    )
+
+    // Only auto-select if:
+    // 1. We have fee options
+    // 2. User hasn't made an explicit selection yet
+    // 3. No fee token is currently selected
+    if (
+      processedFeeOptions.length > 0 &&
+      !hasUserSelectedFeeOption &&
+      !selectedFeeToken
+    ) {
+      // Find first non-native token option with sufficient balance
+      const firstValidOption = processedFeeOptions.find(
+        (option: FeeOption) =>
+          option.tokenAddress !== zeroAddress && !option.notEnoughBalance,
+      )
+
+      if (firstValidOption) {
+        logger.console.log(
+          "[trails-sdk] [FEE-SELECT] Auto-selecting first valid fee option:",
+          firstValidOption,
+        )
+        // Strip extra fields to match the format expected by prepareSend
+        const cleanOption: FeeOption = {
+          tokenAddress: firstValidOption.tokenAddress,
+          tokenSymbol: firstValidOption.tokenSymbol,
+          tokenDecimals: firstValidOption.tokenDecimals,
+          amount: firstValidOption.amount,
+          amountUSD: firstValidOption.amountUSD,
+        }
+        // Use internal setter to avoid marking as user selection
+        setSelectedFeeTokenInternal(cleanOption)
+      } else {
+        logger.console.log(
+          "[trails-sdk] [FEE-SELECT] No valid ERC20 fee options available, will use native gas",
+        )
+      }
+    }
+  }, [
+    processedFeeOptions,
+    selectedFeeToken,
+    hasUserSelectedFeeOption,
+    setSelectedFeeTokenInternal,
+  ])
+
+  // Function to set raw fee options and process them
+  const setRawFeeOptions = useCallback(
+    (
+      feeOptions: any[] | null | undefined,
+      originChainId: number | undefined,
+      tokens: TokenWithBalance[],
+    ) => {
+      const apiFeeOptions = feeOptions ?? []
+      setRawFeeOptionsInternal(apiFeeOptions)
+      setOriginTokenChainId(originChainId)
+      setAvailableTokens(tokens)
+
+      logger.console.log("[trails-sdk] [FEE-SELECT] Raw fee options set:", {
+        feeOptionsCount: apiFeeOptions.length,
+        originChainId: originChainId,
+        tokensCount: tokens.length,
+      })
+    },
+    [],
+  )
+
+  const value: SelectedFeeTokenContextType = {
+    selectedFeeToken,
+    setSelectedFeeToken,
+    clearSelectedFeeToken,
+    processedFeeOptions,
+    setRawFeeOptions,
+  }
+
+  return (
+    <SelectedFeeTokenContext.Provider value={value}>
+      {children}
+    </SelectedFeeTokenContext.Provider>
+  )
+}
+
+export const useSelectedFeeToken = (): SelectedFeeTokenContextType => {
+  const context = useContext(SelectedFeeTokenContext)
+
+  if (context === undefined) {
+    throw new Error(
+      "useSelectedFeeToken must be used within a SelectedFeeTokenProvider",
+    )
+  }
+
+  return context
+}

package/src/widget/hooks/useSelectedMeshExchange.tsx

@@ -0,0 +1,46 @@
+import { createContext, useContext, useState, useMemo } from "react"
+
+export interface SelectedMeshExchange {
+  integrationId: string
+  exchangeName: string
+}
+
+interface SelectedMeshExchangeContextType {
+  selectedExchange: SelectedMeshExchange | null
+  setSelectedExchange: (exchange: SelectedMeshExchange | null) => void
+}
+
+const SelectedMeshExchangeContext = createContext<
+  SelectedMeshExchangeContextType | undefined
+>(undefined)
+
+export const SelectedMeshExchangeProvider: React.FC<{
+  children: React.ReactNode
+}> = ({ children }) => {
+  const [selectedExchange, setSelectedExchange] =
+    useState<SelectedMeshExchange | null>(null)
+
+  const value = useMemo(
+    () => ({
+      selectedExchange,
+      setSelectedExchange,
+    }),
+    [selectedExchange],
+  )
+
+  return (
+    <SelectedMeshExchangeContext.Provider value={value}>
+      {children}
+    </SelectedMeshExchangeContext.Provider>
+  )
+}
+
+export const useSelectedMeshExchange = () => {
+  const context = useContext(SelectedMeshExchangeContext)
+  if (context === undefined) {
+    throw new Error(
+      "useSelectedMeshExchange must be used within a SelectedMeshExchangeProvider",
+    )
+  }
+  return context
+}

package/src/widget/hooks/useSendForm.ts

@@ -40,6 +40,8 @@ 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
@@ -117,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 = {
@@ -436,6 +433,14 @@ export function useSendForm({
   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,
@@ -569,9 +574,14 @@ 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)
@@ -794,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,
@@ -827,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)
@@ -873,6 +894,7 @@ export function useSendForm({
     amountRaw,
     checkoutOnHandlers,
     mode,
+    selectedFeeToken,
   ])
 
   // Auto-fetch quotes when inputs change (debounced)
@@ -907,6 +929,7 @@ export function useSendForm({
     selectedToken?.chainId,
     selectedToken?.balance,
     selectedToken?.tokenPriceUsd,
+    // selectedFeeToken is passed to send() at execution time, not needed here
   ])
 
   // Calculate destination amount from quote if available
@@ -922,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 {
@@ -1008,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 {
@@ -1017,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,
@@ -1078,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) => {