0xtrails 0.13.2 → 0.14.0

package/src/widget/components/SlippageToleranceSettings.tsx

@@ -1,279 +0,0 @@
-import { HelpCircle } from "lucide-react"
-import type React from "react"
-import { useEffect, useState } from "react"
-import { SLIPPAGE_AUTO } from "../../constants.js"
-import { isValidNumber, isNonNegativeNumber } from "../../utils/validation.js"
-
-// Convert decimal format to percentage for display
-// Format: "0.05" (5%) -> "5"
-const decimalToPercentage = (decimal: string): string => {
-  if (decimal === SLIPPAGE_AUTO) return SLIPPAGE_AUTO
-  const num = parseFloat(decimal)
-  return (num * 100).toString()
-}
-
-// Convert percentage to decimal format for storage
-// Format: "5" (5%) -> "0.05"
-const percentageToDecimal = (percentage: string): string => {
-  if (percentage === SLIPPAGE_AUTO) return SLIPPAGE_AUTO
-  const num = parseFloat(percentage)
-  return (num / 100).toString()
-}
-
-// Local storage key for user's slippage preference
-const SLIPPAGE_STORAGE_KEY = "trails-slippage-tolerance"
-
-// Helper function to check if slippage is in AUTO mode
-export const isSlippageAuto = (value: string | null | undefined): boolean => {
-  return value === SLIPPAGE_AUTO || value === null || value === undefined
-}
-
-// Helper function to get current slippage tolerance (for use in SDK functions)
-// Returns the user's stored preference or falls back to the provided default
-// Returns null if AUTO mode is selected (backend will calculate optimal slippage)
-export const getSlippageToleranceValue = (
-  defaultValue: string,
-): string | null => {
-  try {
-    const stored = localStorage.getItem(SLIPPAGE_STORAGE_KEY)
-    if (stored === SLIPPAGE_AUTO || stored === null) {
-      // AUTO mode - return null so backend calculates optimal slippage
-      return null
-    }
-    return stored || defaultValue
-  } catch (_error) {
-    return defaultValue
-  }
-}
-
-interface SlippageToleranceSettingsProps {
-  className?: string
-}
-
-export const SlippageToleranceSettings: React.FC<
-  SlippageToleranceSettingsProps
-> = ({ className = "" }) => {
-  const [displayValue, setDisplayValue] = useState("")
-  const [showTooltip, setShowTooltip] = useState(false)
-  const [mode, setMode] = useState<"auto" | "custom">("auto")
-
-  // Initialize display value from local storage or config
-  useEffect(() => {
-    try {
-      const stored = localStorage.getItem(SLIPPAGE_STORAGE_KEY)
-      if (stored) {
-        if (stored === SLIPPAGE_AUTO) {
-          setMode("auto")
-          setDisplayValue(SLIPPAGE_AUTO)
-        } else {
-          setMode("custom")
-          setDisplayValue(decimalToPercentage(stored))
-        }
-      } else {
-        // Default to AUTO mode
-        setMode("auto")
-        setDisplayValue(SLIPPAGE_AUTO)
-      }
-    } catch (_error) {
-      // Fallback to AUTO if localStorage fails
-      setMode("auto")
-      setDisplayValue(SLIPPAGE_AUTO)
-    }
-  }, [])
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value
-
-    // Allow empty string and valid numbers
-    if (value === "" || /^\d*\.?\d*$/.test(value)) {
-      // Check if the value would exceed 20% and prevent it
-      const numValue = parseFloat(value)
-      if (isValidNumber(numValue) && numValue > 20) {
-        return // Don't update if it would exceed 20%
-      }
-      setDisplayValue(value)
-    }
-  }
-
-  const handleInputBlur = () => {
-    if (displayValue === "" || displayValue === SLIPPAGE_AUTO) {
-      // Reset to AUTO mode
-      setDisplayValue(SLIPPAGE_AUTO)
-      try {
-        localStorage.setItem(SLIPPAGE_STORAGE_KEY, SLIPPAGE_AUTO)
-      } catch (_error) {
-        // Ignore localStorage errors
-      }
-      return
-    }
-
-    const percentage = parseFloat(displayValue)
-
-    // Validate range (0% to 20%)
-    if (!isNonNegativeNumber(percentage) || percentage > 20) {
-      // Reset to stored value or AUTO default
-      try {
-        const stored = localStorage.getItem(SLIPPAGE_STORAGE_KEY)
-        if (stored && stored !== SLIPPAGE_AUTO) {
-          setDisplayValue(decimalToPercentage(stored))
-        } else {
-          setDisplayValue(SLIPPAGE_AUTO)
-        }
-      } catch (_error) {
-        setDisplayValue(SLIPPAGE_AUTO)
-      }
-      return
-    }
-
-    // Convert to decimal format and save to localStorage
-    const decimalValue = percentageToDecimal(displayValue)
-    try {
-      localStorage.setItem(SLIPPAGE_STORAGE_KEY, decimalValue)
-    } catch (error) {
-      console.warn("Failed to save slippage tolerance to localStorage:", error)
-    }
-
-    // Update display to show formatted value
-    setDisplayValue(percentage.toString())
-  }
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
-      e.currentTarget.blur()
-    }
-  }
-
-  const handleAutoClick = () => {
-    setMode("auto")
-    setDisplayValue(SLIPPAGE_AUTO)
-    try {
-      localStorage.setItem(SLIPPAGE_STORAGE_KEY, SLIPPAGE_AUTO)
-    } catch (error) {
-      console.warn("Failed to save slippage tolerance to localStorage:", error)
-    }
-  }
-
-  const handleCustomClick = () => {
-    setMode("custom")
-    // Set a default custom value if currently in auto mode
-    if (displayValue === SLIPPAGE_AUTO) {
-      const defaultCustom = "1"
-      setDisplayValue(defaultCustom)
-      const decimalValue = percentageToDecimal(defaultCustom)
-      try {
-        localStorage.setItem(SLIPPAGE_STORAGE_KEY, decimalValue)
-      } catch (error) {
-        console.warn(
-          "Failed to save slippage tolerance to localStorage:",
-          error,
-        )
-      }
-    }
-  }
-
-  const handlePresetClick = (percentage: number) => {
-    setMode("custom")
-    const percentageStr = percentage.toString()
-    setDisplayValue(percentageStr)
-    const decimalValue = percentageToDecimal(percentageStr)
-    try {
-      localStorage.setItem(SLIPPAGE_STORAGE_KEY, decimalValue)
-    } catch (error) {
-      console.warn("Failed to save slippage tolerance to localStorage:", error)
-    }
-  }
-
-  return (
-    <div className={`space-y-3 ${className}`}>
-      <div className="flex items-center space-x-2">
-        <div className="text-sm font-medium trails-text-primary">Slippage</div>
-        <div className="relative">
-          <button
-            type="button"
-            onMouseEnter={() => setShowTooltip(true)}
-            onMouseLeave={() => setShowTooltip(false)}
-            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
-          >
-            <HelpCircle className="w-4 h-4" />
-          </button>
-          {showTooltip && (
-            <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-64 p-2 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded-md shadow-lg z-10">
-              Auto mode calculates optimal slippage based on transaction size
-              and routing. Higher slippage allows for larger price movements but
-              may result in less favorable rates.
-              <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900 dark:border-t-gray-700"></div>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Mode toggle buttons */}
-      <div className="flex items-center gap-2">
-        <button
-          type="button"
-          onClick={handleAutoClick}
-          className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
-            mode === "auto"
-              ? "bg-[#DBEAFE] text-[#2563EB]"
-              : "bg-transparent text-gray-900 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer"
-          }`}
-        >
-          Auto
-        </button>
-        <button
-          type="button"
-          onClick={handleCustomClick}
-          className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
-            mode === "custom"
-              ? "bg-[#DBEAFE] text-[#2563EB]"
-              : "bg-transparent text-gray-900 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer"
-          }`}
-        >
-          Custom
-        </button>
-      </div>
-
-      {/* Custom input and preset buttons - only show when custom mode is selected */}
-      {mode === "custom" && (
-        <>
-          {/* Custom input with preset buttons */}
-          <div className="flex items-center gap-2">
-            <div className="relative w-16">
-              <input
-                type="text"
-                value={displayValue !== SLIPPAGE_AUTO ? displayValue : ""}
-                onChange={handleInputChange}
-                onBlur={handleInputBlur}
-                onKeyDown={handleKeyDown}
-                placeholder="5"
-                className="w-full px-3 py-1.5 text-xs border border-solid border-gray-200 dark:border-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 trails-input pr-6 rounded-full"
-              />
-              <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
-                <span className="text-xs text-gray-500 dark:text-gray-400">
-                  %
-                </span>
-              </div>
-            </div>
-            {/* Preset percentage buttons */}
-            {[0.5, 1, 3, 5].map((preset) => (
-              <button
-                key={preset}
-                type="button"
-                onClick={() => handlePresetClick(preset)}
-                className={`px-2 py-1 text-xs font-medium rounded-full border transition-colors cursor-pointer ${
-                  parseFloat(displayValue) === preset
-                    ? "bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-gray-400 dark:border-gray-500"
-                    : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700"
-                }`}
-              >
-                {preset}%
-              </button>
-            ))}
-          </div>
-        </>
-      )}
-    </div>
-  )
-}
-
-export default SlippageToleranceSettings

package/src/widget/components/Swap.tsx

@@ -1,50 +0,0 @@
-import type React from "react"
-import type { Account, WalletClient } from "viem"
-import type { TransactionState } from "../../transactions.js"
-import type { OnCompleteProps } from "../hooks/useSendForm.js"
-import type { Token } from "../../tokens.js"
-import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
-import type { PrepareSendQuote } from "../../prepareSend.js"
-import { ClassicSwap } from "./ClassicSwap.js"
-import type { FundMethod } from "../../transactionIntent/types.js"
-import type { OnrampConfirmCallback } from "../types/commonProps.js"
-
-interface SwapProps {
-  selectedToken: Token | null
-  onSend: (amount: string, recipient: string) => void
-  onBack?: () => void
-  onConfirm: () => void
-  onComplete: (result: OnCompleteProps) => void
-  account?: Account
-  toRecipient?: string
-  toAmount?: string
-  toChainId?: number
-  toToken?: string
-  toCalldata?: string
-  walletClient?: WalletClient
-  onTransactionStateChange: (transactionStates: TransactionState[]) => void
-  onError: (error: Error | string | null) => void
-  onWaitingForWalletConfirm: (props: PrepareSendQuote) => void
-  onWaitingForOnrampConfirm?: OnrampConfirmCallback
-  paymasterUrls?: Array<{ chainId: number; url: string }>
-  setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
-  swapProvider?: string
-  bridgeProvider?: string
-  swapProviderFallback?: boolean
-  bridgeProviderFallback?: boolean
-  fundMethod?: FundMethod
-  onAmountUpdate?: (amount: string) => void
-  checkoutOnHandlers?: CheckoutOnHandlers
-  recentTokens?: Token[]
-  onRecentTokenSelect?: (token: Token) => void
-  onTrackToken?: (token: any) => void
-  isSequenceWallet?: boolean
-  exactInputOnly?: boolean
-}
-
-export const Swap: React.FC<SwapProps> = (props) => {
-  // Always render ClassicSwap
-  return <ClassicSwap {...props} />
-}
-
-export default Swap

package/src/widget/components/SwapDisplay.tsx

@@ -1,68 +0,0 @@
-import type React from "react"
-import { TokenImage } from "./TokenImage.js"
-import type { PrepareSendQuote } from "../../prepareSend.js"
-import { formatDuration } from "../../utils/time.js"
-
-interface SwapDisplayProps {
-  quote: PrepareSendQuote
-  elapsedSeconds: number
-}
-
-export const SwapDisplay: React.FC<SwapDisplayProps> = ({
-  quote,
-  elapsedSeconds,
-}) => {
-  return (
-    <div className="w-full max-w-sm p-3 flex justify-center">
-      <div className="flex items-center space-x-4">
-        {/* Origin Token */}
-        <div className="flex flex-col items-start space-y-1">
-          <div style={{ width: "28px", height: "28px" }}>
-            <TokenImage
-              imageUrl={quote.originToken.imageUrl}
-              symbol={quote.originToken.symbol}
-              chainId={quote.originChain.id}
-              size={28}
-            />
-          </div>
-          <div className="text-left">
-            <div className="text-base font-bold text-gray-900 dark:text-white">
-              {quote.originToken.symbol}
-            </div>
-            <div className="text-xs text-gray-600 dark:text-gray-400">
-              {quote.originAmountFormatted}
-            </div>
-          </div>
-        </div>
-
-        {/* Arrow with elapsed time below */}
-        <div className="flex flex-col items-center space-y-1">
-          <div className="text-xl text-gray-400 dark:text-gray-500">→</div>
-          <div className="text-xs text-gray-500 dark:text-gray-400">
-            {formatDuration(elapsedSeconds)}
-          </div>
-        </div>
-
-        {/* Destination Token */}
-        <div className="flex flex-col items-start space-y-1">
-          <div style={{ width: "28px", height: "28px" }}>
-            <TokenImage
-              imageUrl={quote.destinationToken.imageUrl}
-              symbol={quote.destinationToken.symbol}
-              chainId={quote.destinationChain.id}
-              size={28}
-            />
-          </div>
-          <div className="text-left">
-            <div className="text-base font-bold text-gray-900 dark:text-white">
-              {quote.destinationToken.symbol}
-            </div>
-            <div className="text-xs text-gray-600 dark:text-gray-400">
-              {quote.destinationAmountFormatted}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/widget/components/SwapSettings.tsx

@@ -1,52 +0,0 @@
-import { Settings } from "lucide-react"
-import type React from "react"
-import { useEffect, useRef, useState } from "react"
-import { SlippageToleranceSettings } from "./SlippageToleranceSettings.js"
-
-export const SwapSettings: React.FC = () => {
-  const [isSettingsDropdownOpen, setIsSettingsDropdownOpen] = useState(false)
-  const settingsDropdownRef = useRef<HTMLDivElement>(null)
-
-  // Handle click outside to close dropdown
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        settingsDropdownRef.current &&
-        !settingsDropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsSettingsDropdownOpen(false)
-      }
-    }
-
-    if (isSettingsDropdownOpen) {
-      document.addEventListener("click", handleClickOutside)
-      return () => document.removeEventListener("click", handleClickOutside)
-    }
-  }, [isSettingsDropdownOpen])
-
-  return (
-    <div ref={settingsDropdownRef}>
-      <button
-        type="button"
-        onClick={() => setIsSettingsDropdownOpen(!isSettingsDropdownOpen)}
-        className="p-2 rounded-full transition-colors cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
-        title="Settings"
-      >
-        <Settings className="h-4 w-4" />
-      </button>
-
-      {/* Settings Dropdown */}
-      {isSettingsDropdownOpen && (
-        <div className="absolute right-0 top-full mt-2 w-80 trails-bg-card rounded-lg shadow-lg border trails-border-primary z-20">
-          <div className="p-4 space-y-4">
-            <div>
-              <SlippageToleranceSettings />
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default SwapSettings

package/src/widget/components/ThemeProvider.tsx

@@ -1,115 +0,0 @@
-import type React from "react"
-import { createContext, useContext, useEffect, useState } from "react"
-import type { Theme } from "../../theme.js"
-import { logger } from "../../logger.js"
-import { DEFAULT_THEME } from "../../constants.js"
-
-interface ThemeContextType {
-  theme: Theme
-  setTheme: (theme: Theme) => void
-  isDark: boolean
-  getActiveTheme: () => "light" | "dark"
-}
-
-const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
-
-interface ThemeProviderProps {
-  children: React.ReactNode
-  initialTheme?: Theme
-}
-
-const getIsDark = (theme: Theme): boolean => {
-  if (theme === "dark") return true
-  if (theme === "light") return false
-  if (theme === "auto" && typeof window !== "undefined") {
-    return window.matchMedia("(prefers-color-scheme: dark)").matches
-  }
-  return false
-}
-
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({
-  children,
-  initialTheme = DEFAULT_THEME,
-}) => {
-  const [theme, setTheme] = useState<Theme>(initialTheme)
-  const [isDark, setIsDark] = useState(getIsDark(initialTheme))
-  const [prevInitialTheme, setPrevInitialTheme] = useState(initialTheme)
-  if (initialTheme !== prevInitialTheme) {
-    setPrevInitialTheme(initialTheme)
-    setTheme(initialTheme)
-    setIsDark(getIsDark(initialTheme))
-  }
-
-  // Listen for system theme changes when in auto mode
-  useEffect(() => {
-    if (theme !== "auto") {
-      setIsDark(getIsDark(theme))
-      return
-    }
-
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
-    const handleChange = (e: MediaQueryListEvent) => {
-      setIsDark(e.matches)
-    }
-
-    // Set initial state for auto mode
-    setIsDark(mediaQuery.matches)
-
-    mediaQuery.addEventListener("change", handleChange)
-    return () => mediaQuery.removeEventListener("change", handleChange)
-  }, [theme])
-
-  // Listen for theme preference changes from ThemeSyncer
-  useEffect(() => {
-    const handleThemePreferenceChange = (event: CustomEvent) => {
-      const { theme: preferredTheme } = event.detail
-      logger.console.log(
-        "[ThemeProvider] Received theme preference event:",
-        preferredTheme,
-      )
-      if (
-        preferredTheme &&
-        ["auto", "light", "dark"].includes(preferredTheme)
-      ) {
-        logger.console.log("[ThemeProvider] Applying theme:", preferredTheme)
-        // Override the current theme with user preference
-        setTheme(preferredTheme as Theme)
-        setIsDark(getIsDark(preferredTheme as Theme))
-      }
-    }
-
-    window.addEventListener(
-      "applyThemePreference",
-      handleThemePreferenceChange as EventListener,
-    )
-    return () => {
-      window.removeEventListener(
-        "applyThemePreference",
-        handleThemePreferenceChange as EventListener,
-      )
-    }
-  }, [])
-
-  const getActiveTheme = (): "light" | "dark" => {
-    return isDark ? "dark" : "light"
-  }
-
-  return (
-    <ThemeContext.Provider value={{ theme, setTheme, isDark, getActiveTheme }}>
-      <div
-        className={isDark ? "dark" : ""}
-        data-theme={isDark ? "dark" : "light"}
-      >
-        {children}
-      </div>
-    </ThemeContext.Provider>
-  )
-}
-
-export function useTheme(): ThemeContextType {
-  const context = useContext(ThemeContext)
-  if (context === undefined) {
-    throw new Error("useTheme must be used within a ThemeProvider")
-  }
-  return context
-}

package/src/widget/components/ThemeSyncer.tsx

@@ -1,47 +0,0 @@
-import { useEffect } from "react"
-import { useThemePreference } from "../hooks/useTheme.js"
-import { useWidgetProps } from "../hooks/useWidgetProps.js"
-import { logger } from "../../logger.js"
-
-/**
- * Component that syncs user theme preference with the actual theme system
- * This ensures the user's saved theme preference is applied on widget load
- */
-export const ThemeSyncer: React.FC = () => {
-  const { selectedTheme } = useThemePreference()
-  const { customCss, theme: widgetTheme } = useWidgetProps()
-
-  // Sync user preference with actual theme on mount and when preference changes
-  // Only sync if customCss is not provided (developer override)
-  useEffect(() => {
-    if (!customCss) {
-      // Use setTimeout to ensure the ThemeProvider has mounted and set up its listener
-      const timeoutId = setTimeout(() => {
-        // Determine which theme to apply:
-        // 1. If user has a preference, use it
-        // 2. If no user preference but widget has theme prop, use widget theme
-        // 3. If neither, default to "auto"
-        const themeToApply = selectedTheme || widgetTheme || "auto"
-
-        logger.console.log(
-          "[ThemeSyncer] Applying theme - User preference:",
-          selectedTheme,
-          "Widget theme:",
-          widgetTheme,
-          "Final theme:",
-          themeToApply,
-        )
-
-        const event = new CustomEvent("applyThemePreference", {
-          detail: { theme: themeToApply },
-        })
-        window.dispatchEvent(event)
-      }, 0)
-
-      return () => clearTimeout(timeoutId)
-    }
-  }, [selectedTheme, customCss, widgetTheme])
-
-  // This component doesn't render anything
-  return null
-}