0xtrails 0.13.1 → 0.14.0

package/src/widget/hooks/useRecentTokens.ts

@@ -1,159 +0,0 @@
-import { JsonEncode } from "@0xtrails/api"
-import { useState, useEffect, useCallback } from "react"
-import type { Token } from "../../tokens.js"
-import { logger } from "../../logger.js"
-
-import { normalizeAddress } from "../../utils/address.js"
-// Token metadata without balance information
-type StoredTokenMetadata = Omit<
-  Token,
-  | "balance"
-  | "balanceFormatted"
-  | "balanceUsd"
-  | "isSufficientBalance"
-  | "priceUsd"
->
-
-interface RecentTokensStorage {
-  [accountAddress: string]: StoredTokenMetadata[]
-}
-
-const RECENT_TOKENS_KEY = "trails_recent_tokens"
-const MAX_RECENT_TOKENS = 10
-
-export function useRecentTokens(accountAddress?: string) {
-  const [recentTokens, setRecentTokens] = useState<Token[]>([])
-
-  // Load recent tokens from localStorage for the current account
-  useEffect(() => {
-    if (!accountAddress) {
-      setRecentTokens([])
-      return
-    }
-
-    try {
-      const stored = localStorage.getItem(RECENT_TOKENS_KEY)
-      if (stored) {
-        const allRecentTokens: RecentTokensStorage = JSON.parse(stored)
-        const accountTokens =
-          allRecentTokens[normalizeAddress(accountAddress)] || []
-
-        // Strip any balance data that might be in old localStorage entries
-        const sanitizedTokens: Token[] = accountTokens.map((token) => ({
-          symbol: token.symbol,
-          name: token.name,
-          decimals: token.decimals,
-          contractAddress: token.contractAddress,
-          tokenId: token.tokenId,
-          chainId: token.chainId,
-          chainName: token.chainName,
-          imageUrl: token.imageUrl,
-          isCustomToken: token.isCustomToken,
-          isNativeToken: token.isNativeToken,
-          // Explicitly exclude any balance properties
-        }))
-
-        logger.console.log("[trails-sdk] Loaded and sanitized recent tokens", {
-          accountAddress: normalizeAddress(accountAddress),
-          tokenCount: sanitizedTokens.length,
-          tokens: sanitizedTokens.map((t, i) => ({
-            symbol: t.symbol,
-            chainId: t.chainId,
-            hasBalance: accountTokens[i] && "balance" in accountTokens[i], // Check if old data had balance
-          })),
-        })
-
-        setRecentTokens(sanitizedTokens)
-      }
-    } catch (error) {
-      logger.console.warn(
-        "[trails-sdk] Failed to load recent tokens from localStorage:",
-        error,
-      )
-    }
-  }, [accountAddress])
-
-  // Add or update a recent token
-  const addRecentToken = useCallback(
-    (token: Token) => {
-      if (!accountAddress) return
-
-      try {
-        const stored = localStorage.getItem(RECENT_TOKENS_KEY)
-        const allRecentTokens: RecentTokensStorage = stored
-          ? JSON.parse(stored)
-          : {}
-
-        const accountKey = normalizeAddress(accountAddress)
-        let accountTokens = allRecentTokens[accountKey] || []
-
-        // Strip balance-related data before storing to avoid stale balances
-        const tokenMetadata: StoredTokenMetadata = {
-          symbol: token.symbol,
-          name: token.name,
-          decimals: token.decimals,
-          contractAddress: token.contractAddress,
-          tokenId: token.tokenId,
-          chainId: token.chainId,
-          chainName: token.chainName,
-          imageUrl: token.imageUrl,
-          isCustomToken: token.isCustomToken,
-          isNativeToken: token.isNativeToken,
-          // Intentionally exclude: balance, balanceRaw, balanceFormatted, etc.
-        }
-
-        // Remove the token if it already exists (to avoid duplicates)
-        accountTokens = accountTokens.filter(
-          (t) =>
-            !(
-              t.contractAddress === tokenMetadata.contractAddress &&
-              (t.chainId || 0) === (tokenMetadata.chainId || 0)
-            ),
-        )
-
-        // Add the token to the beginning (most recent)
-        accountTokens.unshift(tokenMetadata)
-
-        // Keep only the most recent tokens
-        accountTokens = accountTokens.slice(0, MAX_RECENT_TOKENS)
-
-        // Update storage
-        allRecentTokens[accountKey] = accountTokens
-        localStorage.setItem(RECENT_TOKENS_KEY, JsonEncode(allRecentTokens))
-
-        // Update state
-        setRecentTokens(accountTokens)
-      } catch (error) {
-        logger.console.warn(
-          "[trails-sdk] Failed to save recent token to localStorage:",
-          error,
-        )
-      }
-    },
-    [accountAddress],
-  )
-
-  // Clear recent tokens for current account
-  const clearRecentTokens = useCallback(() => {
-    if (!accountAddress) return
-
-    try {
-      const stored = localStorage.getItem(RECENT_TOKENS_KEY)
-      if (stored) {
-        const allRecentTokens: RecentTokensStorage = JSON.parse(stored)
-        const accountKey = normalizeAddress(accountAddress)
-        delete allRecentTokens[accountKey]
-        localStorage.setItem(RECENT_TOKENS_KEY, JSON.stringify(allRecentTokens))
-      }
-      setRecentTokens([])
-    } catch (error) {
-      console.warn("Failed to clear recent tokens from localStorage:", error)
-    }
-  }, [accountAddress])
-
-  return {
-    recentTokens,
-    addRecentToken,
-    clearRecentTokens,
-  }
-}

package/src/widget/hooks/useRecipients.ts

@@ -1,167 +0,0 @@
-import { useState, useEffect, useCallback } from "react"
-import { isAddress } from "viem"
-import { logger } from "../../logger.js"
-
-import { addressEqual } from "../../utils/address.js"
-export interface RecentRecipient {
-  address: string
-  ensName?: string
-  resolvedAddress?: string // For when ENS name resolves to address
-  timestamp: number
-}
-
-const STORAGE_KEY = "trails-recent-recipients"
-const MAX_RECENT_RECIPIENTS = 10
-
-export function useRecipients() {
-  const [recentRecipients, setRecentRecipients] = useState<RecentRecipient[]>(
-    [],
-  )
-
-  // Load recent recipients from localStorage on mount
-  useEffect(() => {
-    try {
-      const stored = localStorage.getItem(STORAGE_KEY)
-      if (stored) {
-        const parsed = JSON.parse(stored) as RecentRecipient[]
-        // Sort by timestamp (most recent first)
-        const sorted = parsed.sort((a, b) => b.timestamp - a.timestamp)
-        setRecentRecipients(sorted)
-      }
-    } catch (error) {
-      logger.console.error(
-        "[trails-sdk] Failed to load recent recipients:",
-        error,
-      )
-    }
-  }, [])
-
-  // Save recipients to localStorage
-  const saveToStorage = useCallback((recipients: RecentRecipient[]) => {
-    try {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(recipients))
-    } catch (error) {
-      logger.console.error(
-        "[trails-sdk] Failed to save recent recipients:",
-        error,
-      )
-    }
-  }, [])
-
-  // ENS resolution placeholder - in real implementation, use proper ENS resolver
-  const resolveENS = useCallback(
-    async (input: string): Promise<{ address?: string; ensName?: string }> => {
-      try {
-        if (input.endsWith(".eth")) {
-          // ENS name to address resolution - return empty for now
-          logger.console.log(
-            `[trails-sdk] ENS resolution not implemented: ${input}`,
-          )
-          return { ensName: input }
-        } else if (isAddress(input)) {
-          // Address to ENS name resolution (reverse lookup) - return empty for now
-          logger.console.log(
-            `[trails-sdk] Reverse ENS resolution not implemented: ${input}`,
-          )
-          return { address: input, ensName: "" }
-        }
-
-        return {}
-      } catch (error) {
-        logger.console.error("[trails-sdk] ENS resolution failed:", error)
-        return {}
-      }
-    },
-    [],
-  )
-
-  // Add a new recipient to the recent list
-  const addRecentRecipient = useCallback(
-    async (input: string, resolvedAddress?: string, ensName?: string) => {
-      const trimmedInput = input.trim()
-      if (!trimmedInput) return
-
-      let recipientData: RecentRecipient
-
-      if (isAddress(trimmedInput)) {
-        // It's a valid address
-        recipientData = {
-          address: trimmedInput,
-          ensName: ensName, // Use provided ENS name from reverse resolution
-          timestamp: Date.now(),
-        }
-      } else if (trimmedInput.endsWith(".eth")) {
-        // It's an ENS name
-        if (resolvedAddress && isAddress(resolvedAddress)) {
-          // We have a resolved address for this ENS name
-          recipientData = {
-            address: resolvedAddress,
-            ensName: ensName || trimmedInput, // Use provided ENS name or fallback to input
-            resolvedAddress: resolvedAddress,
-            timestamp: Date.now(),
-          }
-        } else {
-          return // Invalid ENS name - no resolved address
-        }
-      } else {
-        return // Invalid input
-      }
-
-      setRecentRecipients((prev) => {
-        // Remove any existing entry with the same address or ENS name
-        const filtered = prev.filter(
-          (r) =>
-            !addressEqual(r.address, recipientData.address) &&
-            (!recipientData.ensName || r.ensName !== recipientData.ensName),
-        )
-
-        // Add new entry at the beginning
-        const updated = [recipientData, ...filtered].slice(
-          0,
-          MAX_RECENT_RECIPIENTS,
-        )
-
-        // Save to localStorage
-        saveToStorage(updated)
-
-        return updated
-      })
-
-      logger.console.log("[trails-sdk] Added recent recipient:", recipientData)
-    },
-    [saveToStorage],
-  )
-
-  // Remove a recipient from the recent list
-  const removeRecentRecipient = useCallback(
-    (address: string) => {
-      setRecentRecipients((prev) => {
-        const updated = prev.filter((r) => !addressEqual(r.address, address))
-        saveToStorage(updated)
-        return updated
-      })
-    },
-    [saveToStorage],
-  )
-
-  // Clear all recent recipients
-  const clearRecentRecipients = useCallback(() => {
-    setRecentRecipients([])
-    try {
-      localStorage.removeItem(STORAGE_KEY)
-    } catch (error) {
-      logger.console.error(
-        "[trails-sdk] Failed to clear recent recipients:",
-        error,
-      )
-    }
-  }, [])
-
-  return {
-    recentRecipients,
-    addRecentRecipient,
-    removeRecentRecipient,
-    clearRecentRecipients,
-    resolveENS,
-  }
-}

package/src/widget/hooks/useScreenTracking.ts

@@ -1,14 +0,0 @@
-import { useEffect } from "react"
-import { trackWidgetScreen } from "../../analytics.js"
-import { useViewManager } from "./useViewManager.js"
-
-export function useScreenTracking(userAddress?: string) {
-  const { screen } = useViewManager()
-
-  useEffect(() => {
-    trackWidgetScreen({
-      screen,
-      userAddress,
-    })
-  }, [screen, userAddress])
-}

package/src/widget/hooks/useSelectedFeeOption.tsx

@@ -1,323 +0,0 @@
-import React, {
-  createContext,
-  useContext,
-  useState,
-  useCallback,
-  useEffect,
-  useMemo,
-  type ReactNode,
-} from "react"
-import type { FeeOption } from "@0xtrails/api"
-import {
-  formatRawAmount,
-  formatUsdAmountDisplay,
-  formatUsdAmountLocaleDisplay,
-} from "../../utils/format.js"
-import { logger } from "../../index.js"
-import { isNativeToken, normalizeAddress } from "../../utils/address.js"
-import { isAddressEqual } from "viem"
-
-const FEE_OPTION_PREFERENCE_KEY = "trails-fee-option-preference"
-
-const createBalanceKey = (
-  chainId?: number,
-  tokenAddress?: string | null,
-): string =>
-  `${chainId ?? "unknown"}:${
-    !tokenAddress || isNativeToken(tokenAddress)
-      ? "native"
-      : normalizeAddress(tokenAddress)
-  }`
-
-const safeFormatAmountWithSymbol = (option: FeeOption): string => {
-  const tokenDecimals =
-    typeof option.tokenDecimals === "number" &&
-    option.tokenDecimals > 0 &&
-    option.tokenDecimals <= 18
-      ? option.tokenDecimals
-      : isNativeToken(option.tokenAddress)
-        ? 18
-        : undefined
-
-  if (tokenDecimals === undefined) {
-    logger.console.warn("[trails-sdk] [fee-options] Missing token decimals", {
-      tokenAddress: option.tokenAddress,
-      tokenSymbol: option.tokenSymbol,
-    })
-    return option.tokenSymbol ? `-- ${option.tokenSymbol}` : "--"
-  }
-
-  try {
-    const formattedAmount = formatRawAmount(option.amount, tokenDecimals)
-    return option.tokenSymbol
-      ? `${formattedAmount} ${option.tokenSymbol}`
-      : formattedAmount
-  } catch (error) {
-    logger.console.warn(
-      "[trails-sdk] [fee-options] Failed to format fee option amount",
-      {
-        option,
-        tokenDecimals,
-        error,
-      },
-    )
-    return option.tokenSymbol ? `-- ${option.tokenSymbol}` : "--"
-  }
-}
-
-export type ProcessedFeeOption = FeeOption & {
-  notEnoughBalance?: boolean
-  tokenImageUrl?: string
-  chainId?: number
-  amountFormatted: string
-  amountUsdDisplay?: string
-  amountUsdLocaleDisplay?: string
-}
-
-// Token type with balance information
-export interface TokenWithBalance {
-  chainId: number
-  contractAddress?: string
-  balance?: string
-  imageUrl?: string
-}
-
-interface SelectedFeeOptionContextType {
-  selectedFeeOption: FeeOption | null
-  setSelectedFeeOption: (token: FeeOption | null) => void
-  clearSelectedFeeOption: () => void
-  processedFeeOptions: ProcessedFeeOption[]
-  setFeeOptions: (
-    feeOptions: ReadonlyArray<FeeOption> | null | undefined,
-    originChainId: number | undefined,
-    availableTokens: TokenWithBalance[],
-  ) => void
-}
-
-const SelectedFeeOptionContext = createContext<
-  SelectedFeeOptionContextType | undefined
->(undefined)
-
-interface SelectedFeeOptionProviderProps {
-  children: ReactNode
-  initialToken?: FeeOption | null
-}
-
-export const SelectedFeeOptionProvider: React.FC<
-  SelectedFeeOptionProviderProps
-> = ({ children, initialToken = null }) => {
-  const [selectedFeeOption, setSelectedFeeOptionInternalRaw] =
-    useState<FeeOption | null>(initialToken)
-  const [hasUserSelected, setHasUserSelected] = useState(false)
-  const [feeOptions, setFeeOptionsInternal] = useState<FeeOption[]>([])
-  const [originTokenChainId, setOriginTokenChainId] = useState<
-    number | undefined
-  >(undefined)
-  const [availableTokens, setAvailableTokens] = useState<TokenWithBalance[]>([])
-
-  const tokenBalanceLookup = useMemo(() => {
-    const map = new Map<string, TokenWithBalance>()
-    for (const token of availableTokens) {
-      map.set(
-        createBalanceKey(token.chainId, token.contractAddress ?? null),
-        token,
-      )
-    }
-    return map
-  }, [availableTokens])
-
-  // Wrapper to track when user makes an explicit selection
-  const setSelectedFeeOption = useCallback((token: FeeOption | null) => {
-    setSelectedFeeOptionInternalRaw(token)
-    setHasUserSelected(true)
-
-    // Save preference to localStorage: "native" or "erc20"
-    const preference = token === null ? "native" : "erc20"
-    try {
-      localStorage.setItem(FEE_OPTION_PREFERENCE_KEY, preference)
-    } catch (error) {
-      logger.console.warn(
-        "[trails-sdk] Failed to save fee option preference to localStorage",
-        error,
-      )
-    }
-  }, [])
-
-  const clearSelectedFeeOption = useCallback(() => {
-    setSelectedFeeOptionInternalRaw(null)
-    setHasUserSelected(false)
-  }, [])
-
-  // Process raw fee options with balance checks
-  const processedFeeOptions: ProcessedFeeOption[] = useMemo(() => {
-    if (!feeOptions.length) {
-      return []
-    }
-
-    return feeOptions
-      .map((option) => {
-        const balanceRecord =
-          originTokenChainId !== undefined
-            ? tokenBalanceLookup.get(
-                createBalanceKey(originTokenChainId, option.tokenAddress),
-              )
-            : undefined
-
-        const hasBalanceInfo =
-          Boolean(balanceRecord?.balance) && originTokenChainId !== undefined
-        const userBalance = balanceRecord?.balance ?? "0"
-        const requiredAmount = option.amount ? option.amount.toString() : "0"
-        // Only set notEnoughBalance if we have balance info
-        const notEnoughBalance = hasBalanceInfo
-          ? BigInt(userBalance) < BigInt(requiredAmount)
-          : undefined
-        const amountFormatted = safeFormatAmountWithSymbol(option)
-
-        return {
-          ...option,
-          notEnoughBalance,
-          tokenImageUrl: balanceRecord?.imageUrl,
-          chainId: balanceRecord?.chainId ?? originTokenChainId,
-          amountUsdDisplay: formatUsdAmountDisplay(option.amountUsd ?? 0),
-          amountUsdLocaleDisplay: formatUsdAmountLocaleDisplay(
-            option.amountUsd ?? 0,
-          ),
-          amountFormatted,
-        }
-      })
-      .sort(
-        (a, b) => Number(!!a.notEnoughBalance) - Number(!!b.notEnoughBalance),
-      )
-  }, [feeOptions, originTokenChainId, tokenBalanceLookup])
-
-  // Auto-select fee option: check preference, then fallback to first option
-  useEffect(() => {
-    // Clear selection if no options available
-    if (processedFeeOptions.length === 0) {
-      if (selectedFeeOption !== null) {
-        setSelectedFeeOptionInternalRaw(null)
-        setHasUserSelected(false)
-      }
-      return
-    }
-
-    // If user has made a selection, validate and update it
-    if (hasUserSelected) {
-      // Check if current selection is still valid
-      const isSelectionValid =
-        selectedFeeOption === null
-          ? processedFeeOptions.some((option) =>
-              isNativeToken(option.tokenAddress),
-            )
-          : processedFeeOptions.some((option) =>
-              isAddressEqual(
-                option.tokenAddress as `0x${string}`,
-                selectedFeeOption.tokenAddress as `0x${string}`,
-              ),
-            )
-
-      if (isSelectionValid) {
-        // Update to latest object if it's an ERC20 token
-        if (selectedFeeOption !== null) {
-          const updatedOption = processedFeeOptions.find((option) =>
-            isAddressEqual(
-              option.tokenAddress as `0x${string}`,
-              selectedFeeOption.tokenAddress as `0x${string}`,
-            ),
-          )
-          if (updatedOption && updatedOption !== selectedFeeOption) {
-            setSelectedFeeOptionInternalRaw(updatedOption)
-          }
-        }
-        return // Keep user's selection
-      } else {
-        // Selection is invalid, clear it and allow auto-selection below
-        setSelectedFeeOptionInternalRaw(null)
-        setHasUserSelected(false)
-      }
-    }
-
-    // No user selection - auto-select based on preference or fallback
-
-    // Load preference from localStorage
-    let preferredType: "native" | "erc20" | null = null
-    try {
-      const stored = localStorage.getItem(FEE_OPTION_PREFERENCE_KEY)
-      if (stored === "native" || stored === "erc20") {
-        preferredType = stored
-      }
-    } catch {
-      // Ignore localStorage errors
-    }
-
-    // Try to select based on preference
-    if (preferredType) {
-      const isNative = preferredType === "native"
-      const preferredOption = processedFeeOptions.find(
-        (option) => isNativeToken(option.tokenAddress) === isNative,
-      )
-
-      if (preferredOption) {
-        setSelectedFeeOptionInternalRaw(isNative ? null : preferredOption)
-        return
-      }
-    }
-
-    // Fallback: select first available option
-    if (processedFeeOptions.length > 0) {
-      const firstOption = processedFeeOptions[0]
-      if (firstOption) {
-        setSelectedFeeOptionInternalRaw(
-          isNativeToken(firstOption.tokenAddress) ? null : firstOption,
-        )
-      }
-    }
-  }, [processedFeeOptions, selectedFeeOption, hasUserSelected])
-
-  // Function to set raw fee options and process them
-  const setFeeOptions = useCallback(
-    (
-      feeOptions: ReadonlyArray<FeeOption> | null | undefined,
-      originChainId: number | undefined,
-      tokens: TokenWithBalance[],
-    ) => {
-      const normalized = feeOptions ? [...feeOptions] : []
-
-      setFeeOptionsInternal(normalized)
-      setOriginTokenChainId(originChainId)
-      setAvailableTokens(tokens)
-
-      // Only clear selection if fee options are empty
-      if (normalized.length === 0) {
-        setSelectedFeeOptionInternalRaw(null)
-      }
-    },
-    [],
-  )
-
-  const value: SelectedFeeOptionContextType = {
-    selectedFeeOption,
-    setSelectedFeeOption,
-    clearSelectedFeeOption,
-    processedFeeOptions,
-    setFeeOptions,
-  }
-
-  return (
-    <SelectedFeeOptionContext.Provider value={value}>
-      {children}
-    </SelectedFeeOptionContext.Provider>
-  )
-}
-
-export function useSelectedFeeOption(): SelectedFeeOptionContextType {
-  const context = useContext(SelectedFeeOptionContext)
-
-  if (context === undefined) {
-    throw new Error(
-      "useSelectedFeeOption must be used within a SelectedFeeOptionProvider",
-    )
-  }
-
-  return context
-}