0xtrails 0.1.13 → 0.2.1

package/src/widget/components/SwapSettings.tsx

@@ -3,16 +3,10 @@ import type React from "react"
 import { useEffect, useRef, useState } from "react"
 import { SwapDisplayMode } from "./SwapDisplayMode.js"
 import { SlippageToleranceSettings } from "./SlippageToleranceSettings.js"
+import { useSwapSettings } from "../hooks/useSwapSettings.js"
 
-interface SwapSettingsProps {
-  isSimpleMode: boolean
-  onModeChange: (isSimple: boolean) => void
-}
-
-export const SwapSettings: React.FC<SwapSettingsProps> = ({
-  isSimpleMode,
-  onModeChange,
-}) => {
+export const SwapSettings: React.FC = () => {
+  const { isSimpleSwapMode, setIsSimpleSwapModeWithStorage } = useSwapSettings()
   const [isSettingsDropdownOpen, setIsSettingsDropdownOpen] = useState(false)
   const settingsDropdownRef = useRef<HTMLDivElement>(null)
 
@@ -34,7 +28,7 @@ export const SwapSettings: React.FC<SwapSettingsProps> = ({
   }, [isSettingsDropdownOpen])
 
   const handleModeSelect = (isSimple: boolean) => {
-    onModeChange(isSimple)
+    setIsSimpleSwapModeWithStorage(isSimple)
     setIsSettingsDropdownOpen(false)
   }
 
@@ -54,7 +48,7 @@ export const SwapSettings: React.FC<SwapSettingsProps> = ({
         <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">
             <SwapDisplayMode
-              isSimpleMode={isSimpleMode}
+              isSimpleMode={isSimpleSwapMode}
               onModeChange={handleModeSelect}
             />
 

package/src/widget/components/ThemeProvider.tsx

@@ -2,6 +2,7 @@ import type React from "react"
 import { createContext, useContext, useEffect, useState } from "react"
 import type { Theme } from "../../theme.js"
 import { ThemeProvider as DesignSystemThemeProvider } from "@0xsequence/design-system"
+import { logger } from "../../logger.js"
 
 interface ThemeContextType {
   theme: Theme
@@ -60,6 +61,37 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
     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"
   }

package/src/widget/components/ThemeSyncer.tsx

@@ -0,0 +1,47 @@
+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
+}

package/src/widget/components/Toast.tsx

@@ -0,0 +1,315 @@
+import { AnimatePresence, motion } from "motion/react"
+import { X, CheckCircle, AlertCircle, Info } from "lucide-react"
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+  useRef,
+  type ReactNode,
+} from "react"
+import { createPortal } from "react-dom"
+import {
+  setGlobalShowToast,
+  setGlobalUpdatePersistentToast,
+  setGlobalRemovePersistentToast,
+  setToastEnabled,
+} from "../../toast.js"
+import { useWidgetProps } from "../hooks/useWidgetProps.js"
+import { useTheme } from "./ThemeProvider.js"
+import css from "../compiled.css?inline"
+
+const TRAILS_ICON_URL = "https://trails.build/web-app-manifest-192x192.png"
+
+// Default durations by toast type (in milliseconds)
+const DEFAULT_DURATIONS: Record<ToastType, number> = {
+  success: 3000, // 3 seconds
+  error: 5000, // 5 seconds
+  info: 5000, // 5 seconds
+}
+
+export type ToastType = "success" | "error" | "info"
+
+export interface Toast {
+  id: string
+  title: string
+  message: string
+  type: ToastType
+  duration?: number
+  iconUrl?: string
+  isPersistent?: boolean
+}
+
+interface ToastContextValue {
+  toasts: Toast[]
+  showToast: (
+    title: string,
+    message: string,
+    type?: ToastType,
+    duration?: number,
+    iconUrl?: string,
+  ) => void
+  updatePersistentToast: (
+    title: string,
+    message: string,
+    type?: ToastType,
+    iconUrl?: string,
+  ) => void
+  removePersistentToast: () => void
+  removeToast: (id: string) => void
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null)
+
+export function useToast() {
+  const context = useContext(ToastContext)
+  if (!context) {
+    throw new Error("useToast must be used within ToastProvider")
+  }
+  return context
+}
+
+const PERSISTENT_TOAST_ID = "persistent-toast"
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([])
+  const { toast: toastEnabled = false } = useWidgetProps()
+
+  // Set global toast enabled state
+  useEffect(() => {
+    setToastEnabled(toastEnabled)
+  }, [toastEnabled])
+
+  const showToast = useCallback(
+    (
+      title: string,
+      message: string,
+      type: ToastType = "info",
+      duration?: number,
+      iconUrl?: string,
+    ) => {
+      // Check if toasts are enabled before showing
+      if (!toastEnabled) {
+        return
+      }
+
+      // Use default duration based on type if not provided
+      const effectiveDuration = duration ?? DEFAULT_DURATIONS[type]
+
+      // Use Trails icon by default if no custom icon provided
+      const effectiveIconUrl = iconUrl ?? TRAILS_ICON_URL
+
+      const id = `toast-${Date.now()}-${Math.random()}`
+      const toast: Toast = {
+        id,
+        title,
+        message,
+        type,
+        duration: effectiveDuration,
+        iconUrl: effectiveIconUrl,
+      }
+
+      setToasts((prev) => [...prev, toast])
+
+      // Auto-remove after duration
+      if (effectiveDuration > 0) {
+        setTimeout(() => {
+          setToasts((prev) => prev.filter((t) => t.id !== id))
+        }, effectiveDuration)
+      }
+    },
+    [toastEnabled],
+  )
+
+  const updatePersistentToast = useCallback(
+    (
+      title: string,
+      message: string,
+      type: ToastType = "info",
+      iconUrl?: string,
+    ) => {
+      // Check if toasts are enabled before showing
+      if (!toastEnabled) {
+        return
+      }
+
+      // Use Trails icon by default if no custom icon provided
+      const effectiveIconUrl = iconUrl ?? TRAILS_ICON_URL
+
+      const toast: Toast = {
+        id: PERSISTENT_TOAST_ID,
+        title,
+        message,
+        type,
+        duration: 0, // Never auto-dismiss
+        iconUrl: effectiveIconUrl,
+        isPersistent: true,
+      }
+
+      setToasts((prev) => {
+        // Remove existing persistent toast if any
+        const filtered = prev.filter((t) => t.id !== PERSISTENT_TOAST_ID)
+        // Add new/updated persistent toast
+        return [...filtered, toast]
+      })
+    },
+    [toastEnabled],
+  )
+
+  const removePersistentToast = useCallback(() => {
+    setToasts((prev) => prev.filter((t) => t.id !== PERSISTENT_TOAST_ID))
+  }, [])
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id))
+  }, [])
+
+  // Set global toast functions for use outside React components
+  useEffect(() => {
+    setGlobalShowToast(showToast)
+  }, [showToast])
+
+  useEffect(() => {
+    setGlobalUpdatePersistentToast(updatePersistentToast)
+  }, [updatePersistentToast])
+
+  useEffect(() => {
+    setGlobalRemovePersistentToast(removePersistentToast)
+  }, [removePersistentToast])
+
+  return (
+    <ToastContext.Provider
+      value={{
+        toasts,
+        showToast,
+        updatePersistentToast,
+        removePersistentToast,
+        removeToast,
+      }}
+    >
+      {children}
+      <ToastContainer toasts={toasts} onRemove={removeToast} />
+    </ToastContext.Provider>
+  )
+}
+
+interface ToastContainerProps {
+  toasts: Toast[]
+  onRemove: (id: string) => void
+}
+
+function ToastContainer({ toasts, onRemove }: ToastContainerProps) {
+  const hostRef = useRef<HTMLDivElement>(null)
+  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null)
+  const { isDark } = useTheme()
+
+  useEffect(() => {
+    if (hostRef.current && !hostRef.current.shadowRoot) {
+      const shadow = hostRef.current.attachShadow({ mode: "open" })
+      setShadowRoot(shadow)
+
+      // Inject styles into shadow root
+      const styleTag = document.createElement("style")
+      styleTag.textContent = css
+      shadow.appendChild(styleTag)
+    }
+  }, [])
+
+  const toastContent = (
+    <div
+      className={`fixed top-4 right-4 z-[9999] flex flex-col gap-2 pointer-events-none ${isDark ? "dark" : ""}`}
+    >
+      <AnimatePresence>
+        {toasts.map((toast) => (
+          <ToastItem key={toast.id} toast={toast} onRemove={onRemove} />
+        ))}
+      </AnimatePresence>
+    </div>
+  )
+
+  return (
+    <div
+      ref={hostRef}
+      style={{ position: "fixed", top: 0, right: 0, zIndex: 99999 }}
+    >
+      {shadowRoot ? createPortal(toastContent, shadowRoot) : null}
+    </div>
+  )
+}
+
+interface ToastItemProps {
+  toast: Toast
+  onRemove: (id: string) => void
+}
+
+function ToastItem({ toast, onRemove }: ToastItemProps) {
+  const getIcon = () => {
+    switch (toast.type) {
+      case "success":
+        return (
+          <CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400" />
+        )
+      case "error":
+        return (
+          <AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400" />
+        )
+      case "info":
+        return <Info className="w-5 h-5 text-blue-600 dark:text-blue-400" />
+      default:
+        return <Info className="w-5 h-5 text-blue-600 dark:text-blue-400" />
+    }
+  }
+
+  const isPersistent = toast.isPersistent
+
+  return (
+    <motion.div
+      key={toast.id}
+      initial={{ opacity: 0, y: -20, x: 20 }}
+      animate={{ opacity: 1, y: 0, x: 0 }}
+      exit={{ opacity: 0, x: 20 }}
+      transition={{ duration: 0.3, ease: [0.4, 0, 0.2, 1] }}
+      className="pointer-events-auto"
+    >
+      <div
+        className={`bg-white/95 dark:bg-gray-900/95 backdrop-blur-xl [box-shadow:0_10px_25px_-5px_rgba(0,0,0,0.08),0_8px_10px_-6px_rgba(0,0,0,0.08)] p-4 min-w-[340px] max-w-md border border-gray-200/50 dark:border-gray-700/50 [border-radius:var(--trails-widget-border-radius,16px)] ${isPersistent ? "ring-2 ring-blue-500/20 dark:ring-blue-400/20" : ""}`}
+      >
+        <div className="flex items-start gap-3">
+          {toast.iconUrl && (
+            <div className="flex-shrink-0">
+              <img
+                src={toast.iconUrl}
+                alt="App Icon"
+                className="w-10 h-10 rounded-xl shadow-sm"
+                onError={(e) => {
+                  e.currentTarget.style.display = "none"
+                }}
+              />
+            </div>
+          )}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 mb-0.5">
+              <div className="flex-shrink-0">{getIcon()}</div>
+              <h4 className="text-sm font-semibold text-gray-900 dark:text-white leading-snug">
+                {toast.title}
+              </h4>
+            </div>
+            <p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
+              {toast.message}
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={() => onRemove(toast.id)}
+            className="flex-shrink-0 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+    </motion.div>
+  )
+}
+
+export default ToastProvider

package/src/widget/components/TokenList.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo } from "react"
+import { useState } from "react"
 import type React from "react"
 import type { Token } from "../hooks/useTokenList.js"
 import type { SupportedToken } from "../../tokens.js"
@@ -8,7 +8,6 @@ import { ChainList } from "./ChainList.js"
 import { useTokenList } from "../hooks/useTokenList.js"
 import { useMode } from "../hooks/useMode.js"
 import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
-import { getChainInfo } from "../../chains.js"
 
 interface TokenListProps {
   onContinue: (selectedToken: Token) => void
@@ -55,32 +54,6 @@ export const TokenList: React.FC<TokenListProps> = ({
       fundMethod,
     })
 
-  // Get filtered tokens for chain list
-  const { filteredTokensFormatted } = useTokenList({
-    onContinue: () => {}, // dummy function for getting tokens
-    targetAmountUsd,
-    onError: () => {}, // dummy function
-    fundMethod,
-    allSupportedTokens: false,
-  })
-
-  // Get unique chains from all tokens
-  const uniqueChains = useMemo(() => {
-    const chainIds = new Set(
-      filteredTokensFormatted.map((token) => token.chainId),
-    )
-    return Array.from(chainIds)
-      .map((chainId) => {
-        const chainInfo = getChainInfo(chainId)
-        return {
-          chainId,
-          name: chainInfo?.name || `Chain ${chainId}`,
-          imageUrl: "", // We'll use ChainImage component for chain icons
-        }
-      })
-      .sort((a, b) => a.name.localeCompare(b.name))
-  }, [filteredTokensFormatted])
-
   const handleShowChainList = () => {
     if (onShowChainList) {
       onShowChainList()
@@ -92,12 +65,7 @@ export const TokenList: React.FC<TokenListProps> = ({
 
   // If showing chain list internally, render ChainList
   if (showChainListInternal) {
-    return (
-      <ChainList
-        chains={uniqueChains}
-        onBack={() => setShowChainListInternal(false)}
-      />
-    )
+    return <ChainList onBack={() => setShowChainListInternal(false)} />
   }
 
   return (

package/src/widget/components/TokenSelector.tsx

@@ -12,7 +12,7 @@ import { RecentTokens } from "./RecentTokens.js"
 import { getChainInfo } from "../../chains.js"
 import { ChainFilterDropdown } from "./ChainFilterDropdown.js"
 import { SearchInputField } from "./SearchInputField.js"
-import { truncateAddress } from "../../address.js"
+import { truncateAddress } from "../../utils.js"
 import { logger } from "../../logger.js"
 
 interface TokenSelectorProps {
@@ -276,8 +276,8 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
                       ? "Insufficient balance for this token"
                       : `Select ${tokenName} token`
                   }
-                  className={`w-full py-2 px-4 flex items-center space-x-3 transition-all duration-200 trails-bg-secondary trails-hover-bg trails-border-radius-list-button ${
-                    isTokenSelected(token) ? "trails-bg-card" : ""
+                  className={`w-full py-2 px-4 flex items-center space-x-3 transition-all duration-200 trails-list-item trails-border-radius-list-button ${
+                    isTokenSelected(token) ? "trails-list-item-selected" : ""
                   } ${!isSufficientBalance && fundMethod !== "qr-code" && fundMethod !== "exchange" ? "opacity-75 cursor-not-allowed" : "cursor-pointer"}`}
                 >
                   <div className="relative flex-shrink-0 mr-2">
@@ -477,6 +477,17 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
         </div>
       )}
 
+      {/* Fund method label */}
+      {(fundMethod === "qr-code" || fundMethod === "exchange") && (
+        <div className="text-center pt-2 pb-1">
+          <p className="text-sm font-medium text-gray-600 dark:text-gray-400">
+            {fundMethod === "qr-code"
+              ? "Paying with QR Code Deposit"
+              : "Paying with Exchange Deposit"}
+          </p>
+        </div>
+      )}
+
       {/* Pay with another method button */}
       {onNavigateToFundMethods && !isLoadingTokens && (
         <div className="text-center pt-1">