0xtrails 0.13.1 → 0.14.0

package/src/widget/components/Toast.tsx

@@ -1,336 +0,0 @@
-import { AlertCircle, CheckCircle, Info, X } from "lucide-react"
-import { AnimatePresence, motion } from "motion/react"
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-  type ReactNode,
-} from "react"
-import { createPortal } from "react-dom"
-import { TRAILS_SUPPORT_URL } from "../../constants.js"
-import {
-  setGlobalRemovePersistentToast,
-  setGlobalShowToast,
-  setGlobalUpdatePersistentToast,
-  setToastEnabled,
-} from "../../toast.js"
-import { SECOND_MS } from "../../utils/time.js"
-import { styles } from "../styles.js"
-import { useWidgetProps } from "../hooks/useWidgetProps.js"
-import { useTheme } from "./ThemeProvider.js"
-
-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: 3 * SECOND_MS, // 3 seconds
-  error: 5 * SECOND_MS, // 5 seconds
-  info: 5 * SECOND_MS, // 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)
-
-      const rootWithStyles = shadow as ShadowRoot & {
-        adoptedStyleSheets?: CSSStyleSheet[]
-      }
-
-      if (typeof rootWithStyles.adoptedStyleSheets !== "undefined") {
-        const sheet = new CSSStyleSheet()
-        sheet.replaceSync(styles)
-        rootWithStyles.adoptedStyleSheets = [sheet]
-      } else {
-        const styleTag = document.createElement("style")
-        styleTag.textContent = styles
-        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>
-            {toast.type === "error" && (
-              <a
-                href={TRAILS_SUPPORT_URL}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="mt-2 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline inline-block"
-              >
-                Visit support
-              </a>
-            )}
-          </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/TokenDisplayNonSelectable.tsx

@@ -1,40 +0,0 @@
-import type React from "react"
-import { TokenImage } from "./TokenImage.js"
-
-interface TokenDisplayNonSelectableProps {
-  symbol: string
-  imageUrl?: string
-  chainId: number
-  contractAddress: string
-  chainName?: string
-}
-
-export const TokenDisplayNonSelectable: React.FC<
-  TokenDisplayNonSelectableProps
-> = ({ symbol, imageUrl, chainId, contractAddress, chainName }) => {
-  return (
-    <div className="relative max-w-[120px]">
-      <div className="flex items-center space-x-1.5 trails-bg-card trails-border-radius-input px-2.5 py-1.5 border trails-border-primary">
-        <div className="flex items-center flex-shrink-0">
-          <TokenImage
-            symbol={symbol}
-            imageUrl={imageUrl}
-            chainId={chainId}
-            contractAddress={contractAddress}
-            size={28}
-          />
-        </div>
-        <div className="flex flex-col items-start min-w-0 overflow-hidden">
-          <span className="font-bold trails-text-primary text-sm leading-tight truncate max-w-full text-left">
-            {symbol}
-          </span>
-          {chainName && (
-            <span className="text-xs trails-text-muted leading-tight truncate max-w-full text-left">
-              {chainName}
-            </span>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/widget/components/TokenImage.tsx

@@ -1,156 +0,0 @@
-import { useMemo, useState, useEffect, useRef } from "react"
-import type React from "react"
-import { ChainImage } from "./ChainImage.js"
-import { getCommonTokenImageUrl } from "../../tokens.js"
-import { logger } from "../../logger.js"
-import { getChainInfo } from "../../chains.js"
-
-function normalizeImageUrl(
-  imageUrl?: string | null,
-  symbol?: string | null,
-  chainId?: number | null,
-  contractAddress?: string | null,
-): string | null {
-  const commonImageUrl = getCommonTokenImageUrl({
-    symbol,
-    chainId,
-    contractAddress,
-  })
-  if (commonImageUrl) {
-    return commonImageUrl
-  }
-
-  if (imageUrl) {
-    return imageUrl.replace("/small/", "/large/") // use larger image from sequence assets cdn
-  }
-
-  return null
-}
-
-interface TokenImageProps {
-  imageUrl?: string | null
-  symbol?: string | null
-  chainId?: number | null
-  contractAddress?: string | null
-  size?: number
-}
-
-export const TokenImage: React.FC<TokenImageProps> = ({
-  imageUrl,
-  symbol,
-  chainId,
-  contractAddress,
-  size = 24,
-}) => {
-  const [imageError, setImageError] = useState(false)
-  const [imageSize, setImageSize] = useState<{
-    width: number
-    height: number
-  } | null>(null)
-  const previousUrlRef = useRef<string | null>(null)
-  const chainInfo = chainId ? getChainInfo(chainId) : null
-
-  const effectiveImageUrl = useMemo<string | null>(() => {
-    return normalizeImageUrl(imageUrl, symbol, chainId, contractAddress)
-  }, [imageUrl, symbol, chainId, contractAddress])
-
-  // Reset image size and error when URL changes
-  useEffect(() => {
-    if (previousUrlRef.current !== effectiveImageUrl) {
-      setImageSize(null)
-      setImageError(false)
-      previousUrlRef.current = effectiveImageUrl
-    }
-  }, [effectiveImageUrl])
-
-  const displaySymbol = symbol?.[0]?.toUpperCase() || "?"
-
-  const handleImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
-    const img = e.currentTarget
-    const size = {
-      width: img.naturalWidth,
-      height: img.naturalHeight,
-    }
-    setImageSize(size)
-    logger.console.log("[TokenImage] Image loaded", {
-      effectiveImageUrl,
-      naturalWidth: img.naturalWidth,
-      naturalHeight: img.naturalHeight,
-      symbol,
-      chainId,
-      contractAddress,
-    })
-  }
-
-  const handleImageError = () => {
-    // Only set error if we haven't already determined it's invalid
-    // This prevents unnecessary state updates
-    if (!imageError) {
-      logger.console.error("[TokenImage] Image load error", {
-        effectiveImageUrl,
-        imageUrl,
-        symbol,
-        chainId,
-        contractAddress,
-      })
-      setImageError(true)
-    }
-  }
-
-  // Show text if no URL, error, or image is 1x1 or less (transparent pixel)
-  const isTransparentPixel =
-    imageSize !== null && imageSize.width <= 1 && imageSize.height <= 1
-  const shouldShowText = !effectiveImageUrl || imageError || isTransparentPixel
-
-  return (
-    <div
-      className={`rounded-full flex items-center justify-center text-sm relative m-0 ${
-        symbol !== "ETH" ? "bg-gray-400 dark:bg-gray-900" : ""
-      }`}
-      style={{
-        minWidth: size,
-        minHeight: size,
-        maxWidth: size,
-        maxHeight: size,
-        width: size,
-        height: size,
-        backgroundColor: symbol === "ETH" ? "#627eeb" : undefined,
-      }}
-      title={`${symbol}${chainId ? ` on ${chainInfo?.name || "chain"} (${chainId})` : ""}`}
-    >
-      {shouldShowText ? (
-        <div
-          className="absolute w-full h-full rounded-full flex items-center justify-center"
-          title={symbol?.length && symbol.length > 1 ? `Token: ${symbol}` : ""}
-        >
-          <span className="text-white font-medium text-xs">
-            {displaySymbol}
-          </span>
-        </div>
-      ) : (
-        <img
-          src={effectiveImageUrl}
-          alt={symbol || "Token"}
-          loading="lazy"
-          className="absolute w-full h-full rounded-full object-contain"
-          onLoad={handleImageLoad}
-          onError={handleImageError}
-          title={`Token: ${symbol}`}
-          style={{
-            width: size,
-            height: size,
-          }}
-        />
-      )}
-      {chainId && (
-        <div className="absolute" style={{ right: "-2%", bottom: "-2%" }}>
-          <div className="border-1 border-white dark:border-black rounded-full">
-            <ChainImage chainId={chainId} size={Math.round(size * 0.4)} />
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default TokenImage

package/src/widget/components/TokenList.tsx

@@ -1,107 +0,0 @@
-import { useState } from "react"
-import type React from "react"
-import type { Token } from "../../tokens.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-import { TokenSelector } from "./TokenSelector.js"
-import { ChainList } from "./ChainList.js"
-import { useTokenList } from "../hooks/useTokenList.js"
-import { useViewManager } from "../hooks/useViewManager.js"
-import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
-import type { FundMethod } from "../../transactionIntent/types.js"
-
-interface TokenListProps {
-  onContinue: (selectedToken: Token) => void
-  onBack?: () => void
-  targetAmountUsd?: number | null
-  targetAmountUsdFormatted?: string | null
-  onError: (error: Error | string | null) => void
-  recentTokens?: Token[]
-  onRecentTokenSelect?: (token: Token) => void
-  fundMethod?: FundMethod | null
-  renderInline?: boolean
-  onNavigateToFundMethods?: () => void
-  onShowChainList?: () => void // New prop for parent to handle chain list navigation
-}
-
-export const TokenList: React.FC<TokenListProps> = ({
-  onContinue,
-  onBack,
-  targetAmountUsd,
-  targetAmountUsdFormatted,
-  onError,
-  recentTokens = [],
-  onRecentTokenSelect,
-  fundMethod,
-  onNavigateToFundMethods,
-  onShowChainList,
-}) => {
-  const { mode } = useViewManager()
-  const { setSelectedToken } = useOriginSelectedToken()
-  const [showChainListInternal, setShowChainListInternal] = useState(false)
-
-  // Handle token selection using the shared hook
-  const handleTokenSelect = (token: Token) => {
-    setSelectedToken(token)
-    onContinue(token)
-  }
-
-  // Get the total balance and insufficient balance info from the hook
-  const { totalBalanceUsd, totalBalanceUsdFormatted, showInsufficientBalance } =
-    useTokenList({
-      onContinue,
-      targetAmountUsd,
-      onError,
-      fundMethod,
-    })
-
-  const handleShowChainList = () => {
-    if (onShowChainList) {
-      onShowChainList()
-    } else {
-      // Fallback: handle internally if parent doesn't provide handler
-      setShowChainListInternal(true)
-    }
-  }
-
-  // If showing chain list internally, render ChainList
-  if (showChainListInternal) {
-    return <ChainList onBack={() => setShowChainListInternal(false)} />
-  }
-
-  return (
-    <div className="space-y-2">
-      <ScreenHeader
-        onBack={onBack}
-        headerContent={
-          mode === "fund"
-            ? "Fund with any token"
-            : targetAmountUsd
-              ? mode === "earn"
-                ? `Deposit ${targetAmountUsdFormatted} with:`
-                : `Pay ${targetAmountUsdFormatted} with:`
-              : "Select Token"
-        }
-      />
-
-      <TokenSelector
-        onTokenSelect={handleTokenSelect}
-        targetAmountUsd={targetAmountUsd}
-        targetAmountUsdFormatted={targetAmountUsdFormatted}
-        onError={onError}
-        recentTokens={recentTokens}
-        onRecentTokenSelect={onRecentTokenSelect}
-        fundMethod={fundMethod}
-        onNavigateToFundMethods={onNavigateToFundMethods}
-        showContinueButton={true}
-        onContinue={onContinue}
-        showInsufficientBalance={showInsufficientBalance}
-        totalBalanceUsd={totalBalanceUsd}
-        totalBalanceUsdFormatted={totalBalanceUsdFormatted}
-        chainListScreen={true} // Always enable chain list screen mode
-        onNavigateToChainList={handleShowChainList} // Pass through the navigation handler
-      />
-    </div>
-  )
-}
-
-export default TokenList