0xtrails 0.1.13 → 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/useSelectedRecipient.tsx

@@ -0,0 +1,48 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  type ReactNode,
+} from "react"
+
+interface SelectedRecipientContextType {
+  selectedRecipient: string | null
+  setSelectedRecipient: (recipient: string | null) => void
+}
+
+const SelectedRecipientContext = createContext<
+  SelectedRecipientContextType | undefined
+>(undefined)
+
+interface SelectedRecipientProviderProps {
+  children: ReactNode
+}
+
+export const SelectedRecipientProvider: React.FC<
+  SelectedRecipientProviderProps
+> = ({ children }) => {
+  const [selectedRecipient, setSelectedRecipient] = useState<string | null>(
+    null,
+  )
+
+  return (
+    <SelectedRecipientContext.Provider
+      value={{
+        selectedRecipient,
+        setSelectedRecipient,
+      }}
+    >
+      {children}
+    </SelectedRecipientContext.Provider>
+  )
+}
+
+export const useSelectedRecipient = () => {
+  const context = useContext(SelectedRecipientContext)
+  if (context === undefined) {
+    throw new Error(
+      "useSelectedRecipient must be used within a SelectedRecipientProvider",
+    )
+  }
+  return context
+}