0xtrails 0.13.2 → 0.14.0

package/src/widget/components/WalletConnectionPending.tsx

@@ -1,178 +0,0 @@
-import { ChevronLeft } from "lucide-react"
-import type React from "react"
-import { useEffect, useState } from "react"
-import { TRAILS_SUPPORT_URL } from "../../constants.js"
-import { MINUTE_MS } from "../../utils/time.js"
-import { useWallets } from "../../wallets.js"
-
-interface WalletConnectionPendingProps {
-  onBack?: () => void
-  onRetry?: () => void
-  selectedWalletId: string
-  isConnecting: boolean
-  error: string | null
-  showRetry?: boolean
-}
-
-export const WalletConnectionPending: React.FC<
-  WalletConnectionPendingProps
-> = ({
-  onBack,
-  onRetry,
-  selectedWalletId,
-  isConnecting,
-  error,
-  showRetry = false,
-}) => {
-  const [showContent, setShowContent] = useState(false)
-  const [showTimeoutWarning, setShowTimeoutWarning] = useState(false)
-  const { wallets: allWallets } = useWallets()
-
-  const walletConfig = allWallets.find((w) => w.id === selectedWalletId)
-  const walletName = walletConfig?.name || selectedWalletId
-
-  useEffect(() => {
-    setShowContent(true)
-  }, [])
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      if (isConnecting && !error) {
-        setShowTimeoutWarning(true)
-      }
-    }, 2 * MINUTE_MS) // 2 minutes
-
-    return () => clearTimeout(timer)
-  }, [isConnecting, error])
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center relative">
-        <button
-          type="button"
-          onClick={onBack}
-          className="absolute left-0 top-0 p-2 rounded-full transition-colors cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 hover:trails-hover-bg text-gray-600 dark:text-gray-400"
-        >
-          <ChevronLeft className="h-6 w-6" />
-        </button>
-      </div>
-
-      <div className="flex flex-col justify-center min-h-full space-y-6 pt-8">
-        <div className="text-center">
-          <div
-            className={`mx-auto flex items-center justify-center transition-all duration-500 ease-out relative mb-4 ${showContent ? "transform -translate-y-8" : ""}`}
-          >
-            {error ? (
-              <div className={`h-24 w-24`} />
-            ) : (
-              <div className="animate-spin rounded-full h-24 w-24 border-solid border-b-2 border-blue-500 dark:border-blue-400" />
-            )}
-
-            <div className="absolute">
-              {walletConfig?.icon && typeof walletConfig.icon === "string" ? (
-                <img
-                  src={walletConfig.icon}
-                  alt={walletName}
-                  className="h-16 w-16"
-                />
-              ) : (
-                <div className="h-16 w-16 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
-                  <span className="text-2xl font-bold text-gray-600 dark:text-gray-400">
-                    {walletName.charAt(0).toUpperCase()}
-                  </span>
-                </div>
-              )}
-            </div>
-          </div>
-
-          <div
-            className={`mb-2 transition-all duration-500 ease-out ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
-          >
-            <h2 className="text-xl font-bold text-gray-900 dark:text-white">
-              {error ? "Connection failed" : `Waiting for ${walletName}…`}
-            </h2>
-            <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
-              {error ? (
-                <>
-                  There was an issue connecting to your wallet. Please try
-                  again.{" "}
-                  <a
-                    href={TRAILS_SUPPORT_URL}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline"
-                  >
-                    Visit support
-                  </a>{" "}
-                  if the issue persists.
-                </>
-              ) : (
-                "Please approve the connection request in your wallet"
-              )}
-            </p>
-          </div>
-        </div>
-
-        {/* Timeout Warning */}
-        {showTimeoutWarning && !error && (
-          <div
-            className={`transition-all duration-500 ease-out delay-150 ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
-          >
-            <div className="p-4 trails-border-radius-container text-sm bg-yellow-50 border border-solid border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-700/50">
-              <div className="flex items-start space-x-3">
-                <svg
-                  className="w-5 h-5 mt-0.5 flex-shrink-0 text-yellow-600 dark:text-yellow-400"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <title>Warning</title>
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
-                  />
-                </svg>
-                <div>
-                  <p className="font-medium text-yellow-800 dark:text-yellow-300">
-                    Connection is taking longer than expected
-                  </p>
-                  <p className="mt-1 text-xs text-yellow-700 dark:text-yellow-400">
-                    This connection request is taking longer than expected.{" "}
-                    <a
-                      href={TRAILS_SUPPORT_URL}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline"
-                    >
-                      Visit support
-                    </a>{" "}
-                    for help if the issue persists.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Retry Button */}
-        {(error || showRetry) && onRetry && (
-          <div
-            className={`mb-2 transition-all duration-500 ease-out delay-300 ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
-          >
-            <button
-              type="button"
-              onClick={onRetry}
-              className="w-full px-4 py-2 trails-border-radius-button font-medium transition-colors cursor-pointer bg-blue-500 hover:bg-blue-600 text-white dark:bg-blue-600 dark:hover:bg-blue-700"
-            >
-              Try Again
-            </button>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default WalletConnectionPending

package/src/widget/components/WalletImage.tsx

@@ -1,52 +0,0 @@
-import {
-  getWalletIcon,
-  wagmiConnectorToWalletId,
-} from "@0xtrails/wallet-registry"
-import type React from "react"
-import { useAccount } from "wagmi"
-import { Wallet } from "lucide-react"
-
-interface WalletImageProps {
-  size: number
-  walletId?: string
-}
-
-export const WalletImage: React.FC<WalletImageProps> = ({ size, walletId }) => {
-  const { connector } = useAccount()
-
-  // Use provided walletId or derive from current connector
-  const currentWalletId =
-    walletId || (connector ? wagmiConnectorToWalletId(connector) : null)
-  const walletIcon = currentWalletId ? getWalletIcon(currentWalletId) : ""
-
-  // If no icon found, show default wallet icon
-  if (!walletIcon) {
-    return (
-      <Wallet
-        className="text-gray-500 dark:text-gray-400"
-        style={{ width: size, height: size }}
-      />
-    )
-  }
-
-  return (
-    <div className="relative inline-block">
-      <img
-        src={walletIcon}
-        alt={`${currentWalletId} wallet`}
-        style={{ width: size, height: size }}
-        onError={(e) => {
-          // Fallback to default wallet icon on error
-          const target = e.target as HTMLImageElement
-          target.style.display = "none"
-        }}
-      />
-      <Wallet
-        className="text-gray-500 dark:text-gray-400 hidden"
-        style={{ width: size, height: size }}
-      />
-    </div>
-  )
-}
-
-export default WalletImage

package/src/widget/components/WalletList.tsx

@@ -1,125 +0,0 @@
-import { ChevronRight, Search, Wallet } from "lucide-react"
-import { topShownWallets } from "@0xtrails/wallet-registry"
-import type React from "react"
-import { useMemo, useState } from "react"
-import type { WalletConfig } from "../../wallets.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-
-export interface WalletListProps {
-  onBack?: () => void
-  onWalletSelect: (walletId: string) => void
-  walletOptions: WalletConfig[]
-}
-
-export const WalletList: React.FC<WalletListProps> = ({
-  onBack,
-  onWalletSelect,
-  walletOptions,
-}) => {
-  const [searchTerm, setSearchTerm] = useState("")
-
-  const prefilteredWalletOptions = useMemo(() => {
-    return walletOptions
-      .filter(
-        (wallet) => wallet.id !== "injected" && wallet.id !== "sequence-waas",
-      )
-      .sort((a, b) => {
-        const aIndex = topShownWallets.indexOf(a.id)
-        const bIndex = topShownWallets.indexOf(b.id)
-
-        // If both are featured, maintain featured order
-        if (aIndex !== -1 && bIndex !== -1) {
-          return aIndex - bIndex
-        }
-
-        // If only a is featured, a comes first
-        if (aIndex !== -1) return -1
-
-        // If only b is featured, b comes first
-        if (bIndex !== -1) return 1
-
-        // If neither is featured, sort alphabetically
-        return a.name.localeCompare(b.name)
-      })
-  }, [walletOptions])
-
-  const filteredWalletOptions = useMemo(() => {
-    if (!searchTerm.trim()) return prefilteredWalletOptions
-
-    const query = searchTerm.trim().toLowerCase()
-    return prefilteredWalletOptions.filter((wallet) => {
-      return (
-        wallet.name.toLowerCase().includes(query) ||
-        wallet.id.toLowerCase().includes(query)
-      )
-    })
-  }, [prefilteredWalletOptions, searchTerm])
-
-  const handleWalletSelect = (walletId: string) => {
-    onWalletSelect(walletId)
-  }
-
-  return (
-    <div className="space-y-6">
-      <ScreenHeader
-        headerContent="Connect a Wallet"
-        headerContentAlign="left"
-        onBack={onBack}
-      />
-
-      {/* Search Input */}
-      <div className="relative">
-        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 trails-text-tertiary" />
-        <input
-          type="text"
-          placeholder="Search wallets"
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-          className="w-full pl-10 pr-4 py-3 trails-border trails-border-radius-button trails-bg-secondary trails-text-primary placeholder-trails-text-tertiary focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-        />
-      </div>
-
-      {/* Wallet Options List */}
-      <div className="flex flex-col gap-3 max-h-[300px] overflow-y-auto trails-scrollbar">
-        {filteredWalletOptions.length > 0 ? (
-          filteredWalletOptions.map((wallet) => (
-            <button
-              type="button"
-              key={wallet.id}
-              data-wallet-id={wallet.id}
-              onClick={() => handleWalletSelect(wallet.id)}
-              className="w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 trails-border-radius-large-button transition-all duration-200 trails-list-item trails-text-primary"
-            >
-              <div className="flex items-center space-x-3">
-                {wallet.icon ? (
-                  <>
-                    <img
-                      src={wallet.icon}
-                      alt={wallet.name}
-                      className="h-6 w-6"
-                    />
-                    <span>{wallet.name}</span>
-                  </>
-                ) : (
-                  <>
-                    <Wallet className="h-6 w-6 text-gray-600 dark:text-gray-400" />
-                    <span>{wallet.name}</span>
-                  </>
-                )}
-              </div>
-              <ChevronRight className="h-5 w-5 text-gray-400" />
-            </button>
-          ))
-        ) : (
-          <div className="text-center p-4 trails-border-radius-container trails-text-tertiary trails-bg-secondary">
-            {searchTerm.trim()
-              ? "No wallets found matching your search"
-              : "No wallets available"}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default WalletList

package/src/widget/components/WidgetProviders.tsx

@@ -1,82 +0,0 @@
-import type { ReactNode } from "react"
-import type { TrailsWidgetProps } from "../widget.js"
-import { WidgetPropsProvider } from "../hooks/useWidgetProps.js"
-import { ToastProvider } from "./Toast.js"
-import { WalletConnectionProvider } from "../hooks/useWalletConnectionContext.js"
-import { OriginSelectedTokenProvider } from "../hooks/useOriginSelectedToken.js"
-import { DestinationSelectedTokenProvider } from "../hooks/useDestinationSelectedToken.js"
-import { FiatSelectedCurrencyProvider } from "../hooks/useFiatSelectedCurrency.js"
-import { SelectedFeeOptionProvider } from "../hooks/useSelectedFeeOption.js"
-import { SelectedRecipientProvider } from "../hooks/useSelectedRecipient.js"
-import { SwapAmountProvider } from "../hooks/useSwapAmount.js"
-import { ChainFilterProvider } from "../hooks/useChainFilter.js"
-import { BalanceVisibleProvider } from "../hooks/useBalanceVisible.js"
-import { ThemeProvider as ThemePreferenceProvider } from "../hooks/useTheme.js"
-import { LocalePreferenceProvider } from "../hooks/useLocalePreference.js"
-import { DisplayCurrencyPreferenceProvider } from "../hooks/useDisplayCurrencyPreference.js"
-import { SelectedFundMethodProvider } from "../hooks/useSelectedFundMethod.js"
-import { EarnPoolProvider } from "../hooks/useEarnPool.js"
-import { SwapStateProvider } from "../hooks/useSwapState.js"
-import { DEFAULT_MODE } from "../../constants.js"
-import { ViewManagerProvider } from "../hooks/useViewManager.js"
-
-// Default props for hook modal (minimal required config)
-const DEFAULT_HOOK_MODAL_PROPS: TrailsWidgetProps = {
-  apiKey: "",
-  renderInline: false,
-}
-
-interface WidgetProvidersProps {
-  children: ReactNode
-  props?: TrailsWidgetProps
-}
-
-/**
- * Shared provider tree component that wraps all widget-level providers.
- * Used by both WidgetInner (full widget) and TrailsHookModal (standalone hook modal).
- * This ensures identical behavior regardless of how the modal is rendered.
- */
-export function WidgetProviders({
-  children,
-  props = DEFAULT_HOOK_MODAL_PROPS,
-}: WidgetProvidersProps) {
-  return (
-    <WidgetPropsProvider props={props}>
-      <ViewManagerProvider configuredMode={props?.mode ?? DEFAULT_MODE}>
-        <ToastProvider>
-          <WalletConnectionProvider>
-            <OriginSelectedTokenProvider>
-              <DestinationSelectedTokenProvider>
-                <FiatSelectedCurrencyProvider>
-                  <SelectedFeeOptionProvider>
-                    <SelectedRecipientProvider>
-                      <SwapAmountProvider>
-                        <SwapStateProvider>
-                          <ChainFilterProvider>
-                            <BalanceVisibleProvider>
-                              <ThemePreferenceProvider>
-                                <LocalePreferenceProvider>
-                                  <DisplayCurrencyPreferenceProvider>
-                                    <SelectedFundMethodProvider>
-                                      <EarnPoolProvider>
-                                        {children}
-                                      </EarnPoolProvider>
-                                    </SelectedFundMethodProvider>
-                                  </DisplayCurrencyPreferenceProvider>
-                                </LocalePreferenceProvider>
-                              </ThemePreferenceProvider>
-                            </BalanceVisibleProvider>
-                          </ChainFilterProvider>
-                        </SwapStateProvider>
-                      </SwapAmountProvider>
-                    </SelectedRecipientProvider>
-                  </SelectedFeeOptionProvider>
-                </FiatSelectedCurrencyProvider>
-              </DestinationSelectedTokenProvider>
-            </OriginSelectedTokenProvider>
-          </WalletConnectionProvider>
-        </ToastProvider>
-      </ViewManagerProvider>
-    </WidgetPropsProvider>
-  )
-}