0xtrails 0.13.2 → 0.14.0

package/src/widget/components/ConnectedWallets.tsx

@@ -1,414 +0,0 @@
-import { useState } from "react"
-import type React from "react"
-import { Wallet, X, ChevronRight } from "lucide-react"
-import { wagmiConnectorToWalletId } from "@0xtrails/wallet-registry"
-import { CopyButton } from "./CopyButton.js"
-import {
-  useAccount,
-  useConnections,
-  useSwitchAccount,
-  useDisconnect,
-} from "wagmi"
-import { isEmbeddedConnector, useWallets } from "../../wallets.js"
-import { logger } from "../../logger.js"
-import { useAccountTotalBalanceUsd } from "../../query/balance.hooks.js"
-import {
-  formatUsdAmountDisplay,
-  formatUsdAmountLocaleDisplay,
-} from "../../utils/format.js"
-import { AddressOrEnsName } from "./AddressOrEnsName.js"
-import { useViewManager } from "../hooks/useViewManager.js"
-import type { Screen } from "../hooks/useViewManager.js"
-import { useWalletConnectionContext } from "../hooks/useWalletConnectionContext.js"
-import { useSelectedRecipient } from "../hooks/useSelectedRecipient.js"
-import { useWidgetProps } from "../hooks/useWidgetProps.js"
-import { AddressWalletIcon } from "./AddressWalletIcon.js"
-
-export interface ConnectedWalletsProps {
-  onWalletSwitch?: (address: string) => void
-  onWalletSelect?: (address: string, connector: any) => void
-  showActiveWallet?: boolean
-  showConnectNewWallet?: boolean
-  showDisconnect?: boolean
-  className?: string
-  backScreen?: Screen
-  hiddenWallets?: string[]
-  disableZeroBalanceWallets?: boolean
-  showZeroBalanceMessage?: boolean
-}
-
-interface WalletItemProps {
-  wallet: {
-    address: string
-    connector: any
-    walletConfig: any
-    walletId: string
-    isActive: boolean
-  }
-  onWalletSwitch: (address: string, connector: any) => void
-  onWalletSelect?: (address: string, connector: any) => void
-  onDisconnect: (connector: any, e: React.MouseEvent) => void
-  showDisconnect?: boolean
-  hideActiveState?: boolean
-  disableZeroBalanceWallets?: boolean
-  showZeroBalanceMessage?: boolean
-}
-
-const WalletItem: React.FC<WalletItemProps> = ({
-  wallet,
-  onWalletSwitch,
-  onWalletSelect,
-  onDisconnect,
-  showDisconnect = false,
-  hideActiveState = false,
-  disableZeroBalanceWallets = false,
-  showZeroBalanceMessage = false,
-}) => {
-  const { data: totalBalanceUsd = 0, isLoading: isLoadingTotalBalanceUsd } =
-    useAccountTotalBalanceUsd(wallet.address)
-  const totalBalanceUsdFormatted = formatUsdAmountDisplay(totalBalanceUsd)
-  const totalBalanceUsdLocaleDisplay =
-    formatUsdAmountLocaleDisplay(totalBalanceUsd)
-  const isEmbedded = isEmbeddedConnector(wallet.connector)
-  const hasZeroBalance = !isLoadingTotalBalanceUsd && totalBalanceUsd === 0
-  const isWalletDisabled = disableZeroBalanceWallets && hasZeroBalance
-
-  // Determine if this wallet should show active state
-  const showAsActive = wallet.isActive && !hideActiveState
-
-  return (
-    <button
-      type="button"
-      disabled={isWalletDisabled}
-      onClick={() => {
-        if (isWalletDisabled) return
-        if (onWalletSelect) {
-          onWalletSelect(wallet.address, wallet.connector)
-        } else if (!wallet.isActive) {
-          onWalletSwitch(wallet.address, wallet.connector)
-        }
-      }}
-      className={`group w-full text-left px-4 py-3 flex items-center justify-between cursor-pointer transition-colors trails-hover-bg rounded-xl ${
-        showAsActive
-          ? "bg-blue-50 dark:bg-blue-900/20 text-gray-700 dark:text-gray-300"
-          : ""
-      } ${isWalletDisabled ? "cursor-not-allowed opacity-50" : ""}`}
-    >
-      <div className="flex items-center gap-3 flex-1">
-        <div className="flex items-center justify-center shrink-0">
-          <AddressWalletIcon
-            size={30}
-            walletAddress={wallet.address as `0x${string}`}
-          />
-        </div>
-        <div className="flex flex-col min-w-0">
-          <div className="flex items-center gap-1">
-            <AddressOrEnsName
-              address={wallet.address}
-              className="text-sm font-medium"
-            />
-            <CopyButton
-              text={wallet.address}
-              size="sm"
-              stopPropagation={true}
-              className="p-1"
-              as="span"
-            />
-          </div>
-          {!isLoadingTotalBalanceUsd &&
-            (showZeroBalanceMessage && hasZeroBalance ? (
-              <span className="text-xs text-gray-400 dark:text-gray-500">
-                No balance available for funding
-              </span>
-            ) : (
-              totalBalanceUsdFormatted && (
-                <span
-                  className="text-xs text-gray-500 dark:text-gray-400"
-                  title={totalBalanceUsdFormatted}
-                >
-                  {totalBalanceUsdLocaleDisplay || totalBalanceUsdFormatted}
-                </span>
-              )
-            ))}
-        </div>
-      </div>
-      <div className="flex items-center gap-2">
-        {showAsActive ? (
-          <span className="text-xs px-2 py-1 rounded font-medium bg-blue-500 text-white">
-            Active
-          </span>
-        ) : !onWalletSelect && !hideActiveState ? (
-          <span className="whitespace-nowrap text-xs px-2 py-1 rounded font-medium bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
-            Set active
-          </span>
-        ) : null}
-        {showDisconnect && !isEmbedded && (
-          // biome-ignore lint/a11y/useSemanticElements: span used to avoid invalid nested button (row is already a button)
-          <span
-            role="button"
-            tabIndex={0}
-            onClick={(e) => {
-              e.stopPropagation()
-              onDisconnect(wallet.connector, e)
-            }}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault()
-                e.stopPropagation()
-                onDisconnect(wallet.connector, e as unknown as React.MouseEvent)
-              }
-            }}
-            className="p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 cursor-pointer"
-            title="Disconnect wallet"
-          >
-            <X className="w-4 h-4 text-gray-500 dark:text-gray-400" />
-          </span>
-        )}
-        {onWalletSelect && <ChevronRight className="w-5 h-5 text-gray-400" />}
-      </div>
-    </button>
-  )
-}
-
-export const ConnectedWallets: React.FC<ConnectedWalletsProps> = ({
-  onWalletSwitch,
-  onWalletSelect,
-  showActiveWallet = true,
-  showConnectNewWallet = false,
-  showDisconnect = false,
-  className = "",
-  backScreen = "connect",
-  hiddenWallets = [],
-  disableZeroBalanceWallets = false,
-  showZeroBalanceMessage = false,
-}) => {
-  const { address, connector } = useAccount()
-  const connections = useConnections()
-  const { switchAccount } = useSwitchAccount()
-  const { disconnect } = useDisconnect()
-  const { wallets: allWallets } = useWallets()
-  const { navigate, mode } = useViewManager()
-  const { setConnectionContext } = useWalletConnectionContext()
-  const [error, setError] = useState<string | null>(null)
-  const { selectedRecipient, setSelectedRecipient } = useSelectedRecipient()
-  const { hideAddWallet } = useWidgetProps()
-
-  // Get all connected wallets with their details
-  const getConnectedWallets = () => {
-    const walletMap = new Map()
-
-    connections.forEach((connection) => {
-      // Check if connection and accounts exist before processing
-      if (!connection || !connection.accounts) return
-
-      // Process each account in the connection
-      connection.accounts.forEach((account) => {
-        if (account && !walletMap.has(account)) {
-          const walletId = wagmiConnectorToWalletId(connection.connector)
-          const walletConfig = allWallets.find(
-            (wallet) => wallet.id === walletId,
-          )
-
-          walletMap.set(account, {
-            address: account,
-            connector: connection.connector,
-            walletConfig,
-            walletId,
-            isActive:
-              connection.connector.id === connector?.id && account === address,
-          })
-        }
-      })
-    })
-
-    return Array.from(walletMap.values())
-  }
-
-  const connectedWallets = getConnectedWallets()
-  const visibleWallets = connectedWallets.filter((wallet) => {
-    if (!showActiveWallet && wallet.isActive) {
-      return false
-    }
-
-    if (
-      hiddenWallets.length > 0 &&
-      hiddenWallets.some(
-        (hiddenWallet) =>
-          hiddenWallet.toLowerCase() === wallet.address.toLowerCase(),
-      )
-    ) {
-      return false
-    }
-
-    return true
-  })
-  const hasVisibleWallets = visibleWallets.length > 0
-  const canShowConnectWalletButton = showConnectNewWallet && !hideAddWallet
-
-  // Handle switching to a different connected wallet
-  const handleWalletSwitch = async (
-    walletAddress: string,
-    walletConnector: any,
-  ) => {
-    try {
-      setError(null)
-      // Find the connection for this wallet
-      const connection = connections.find(
-        (conn) =>
-          conn.accounts.includes(walletAddress as `0x${string}`) &&
-          conn.connector.id === walletConnector.id,
-      )
-
-      if (connection) {
-        switchAccount({
-          connector: connection.connector,
-        })
-        logger.console.log(`[trails-sdk] Switched to wallet: ${walletAddress}`)
-
-        // Call the optional callback
-        if (onWalletSwitch) {
-          onWalletSwitch(walletAddress)
-        }
-      }
-    } catch (error) {
-      logger.console.error("[trails-sdk] Failed to switch wallet:", error)
-      setError(
-        error instanceof Error ? error.message : "Failed to switch wallet",
-      )
-    }
-  }
-
-  // Handle disconnecting a specific wallet
-  const handleDisconnect = async (
-    walletConnector: any,
-    e: React.MouseEvent,
-  ) => {
-    e.preventDefault()
-    e.stopPropagation()
-    try {
-      setError(null)
-      disconnect({ connector: walletConnector })
-      const disconnectedAddress = (await walletConnector.getAccounts())[0]
-      if (selectedRecipient === disconnectedAddress) {
-        const connectedWallets = getConnectedWallets()
-        if (connectedWallets.length > 0) {
-          const remainingWallets = connectedWallets.filter(
-            (wallet) => wallet.address !== disconnectedAddress,
-          )
-          // Only set a new recipient if there are remaining wallets
-          if (remainingWallets.length > 0) {
-            setSelectedRecipient(remainingWallets[0].address)
-          } else {
-            setSelectedRecipient(null)
-          }
-        }
-      }
-      logger.console.log("[trails-sdk] Disconnected wallet")
-    } catch (error) {
-      logger.console.error("[trails-sdk] Failed to disconnect wallet:", error)
-      setError(
-        error instanceof Error ? error.message : "Failed to disconnect wallet",
-      )
-    }
-  }
-
-  if (!hasVisibleWallets && !canShowConnectWalletButton) {
-    return null
-  }
-
-  return (
-    <>
-      {hasVisibleWallets && (
-        <div className="px-3 pb-2">
-          <span className="text-xs text-gray-500 dark:text-gray-400">
-            Connected wallets
-          </span>
-        </div>
-      )}
-      <div className={`space-y-2 ${className}`}>
-        {/* Header */}
-        {/* <div className="text-sm font-medium text-gray-900 dark:text-gray-100 text-left mb-2">
-        Connected Wallets
-      </div> */}
-
-        {/* Connected Wallets Container */}
-        <div className="flex flex-col gap-1">
-          {error && (
-            <div className="border rounded-lg p-4 bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800 mx-4 mb-2">
-              <p className="text-sm wrap-break-word text-red-600 dark:text-red-200">
-                {error}
-              </p>
-            </div>
-          )}
-
-          {/* Connected Wallets List */}
-          {visibleWallets.map((wallet) => {
-            return (
-              <WalletItem
-                key={wallet.address}
-                wallet={wallet}
-                onWalletSwitch={handleWalletSwitch}
-                onWalletSelect={onWalletSelect}
-                onDisconnect={handleDisconnect}
-                showDisconnect={showDisconnect}
-                hideActiveState={backScreen === "recipients"}
-                disableZeroBalanceWallets={disableZeroBalanceWallets}
-                showZeroBalanceMessage={showZeroBalanceMessage}
-              />
-            )
-          })}
-
-          {/* Connect new wallet Button */}
-          {canShowConnectWalletButton && (
-            <button
-              type="button"
-              onClick={() => {
-                logger.console.log(
-                  "[trails-sdk] Navigating from connected-wallets to wallet-list",
-                )
-
-                // Set wallet connection context based on the origin screen
-                if (backScreen === "recipients") {
-                  logger.console.log(
-                    "[trails-sdk] Setting wallet connection context for recipient selection",
-                  )
-                  // Store the current active wallet info so we can switch back later
-                  setConnectionContext(
-                    "recipient-selection",
-                    backScreen,
-                    address,
-                    connector,
-                  )
-                } else if (
-                  backScreen === "fund-methods" ||
-                  (backScreen === "account-settings" && mode === "fund")
-                ) {
-                  logger.console.log(
-                    "[trails-sdk] Setting wallet connection context for fund method selection",
-                  )
-                  setConnectionContext("fund-method-selection", backScreen)
-                } else {
-                  // Default behavior for other screens
-                  setConnectionContext("general", backScreen)
-                }
-
-                navigate("wallet-list", { backTarget: backScreen })
-              }}
-              className="w-full text-left px-4 py-3 flex items-center justify-between cursor-pointer transition-colors trails-hover-bg rounded-xl"
-            >
-              <div className="flex items-center gap-3">
-                <Wallet className="w-8 h-8" />
-                <span className="text-sm font-medium">
-                  {hasVisibleWallets ? "Connect new wallet" : "Connect wallet"}
-                </span>
-              </div>
-              <ChevronRight className="w-5 h-5 text-gray-400" />
-            </button>
-          )}
-        </div>
-      </div>
-    </>
-  )
-}
-
-export default ConnectedWallets

package/src/widget/components/CopyButton.tsx

@@ -1,108 +0,0 @@
-import { Copy } from "lucide-react"
-import type React from "react"
-import { useState } from "react"
-import { SECOND_MS } from "../../utils/time.js"
-import { logger } from "../../logger.js"
-
-interface CopyButtonProps {
-  text: string
-  className?: string
-  size?: "sm" | "md" | "lg"
-  buttonContent?: React.ReactNode
-  onCopy?: () => void
-  stopPropagation?: boolean
-  iconColor?: string
-  /**
-   * Render as a different element. Use "span" when CopyButton is inside another button
-   * to avoid HTML nesting violation (button cannot be descendant of button).
-   */
-  as?: "button" | "span"
-}
-
-export const CopyButton: React.FC<CopyButtonProps> = ({
-  text,
-  className = "",
-  size = "md",
-  buttonContent,
-  onCopy,
-  stopPropagation = false,
-  iconColor,
-  as: Element = "button",
-}) => {
-  const [copied, setCopied] = useState(false)
-
-  const handleCopy = async (e: React.MouseEvent | React.KeyboardEvent) => {
-    if (stopPropagation) {
-      e.preventDefault()
-      e.stopPropagation()
-    }
-    try {
-      await navigator.clipboard.writeText(text)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2 * SECOND_MS)
-      onCopy?.()
-    } catch (error) {
-      logger.console.error("[trails-sdk] Failed to copy to clipboard:", error)
-    }
-  }
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault()
-      handleCopy(e)
-    }
-  }
-
-  const sizeClasses = {
-    sm: "w-3 h-3",
-    md: "w-4 h-4",
-    lg: "w-5 h-5",
-  }
-
-  const iconSize = sizeClasses[size]
-
-  const isSpan = Element === "span"
-
-  return (
-    <Element
-      {...(isSpan
-        ? { role: "button", tabIndex: 0, onKeyDown: handleKeyDown }
-        : { type: "button" })}
-      onClick={handleCopy}
-      className={`rounded transition-all duration-200 cursor-pointer flex items-center gap-2 ${
-        copied
-          ? "bg-green-100 dark:bg-green-900/30"
-          : "hover:bg-gray-200 dark:hover:bg-gray-600"
-      } ${className}`}
-      title={copied ? "Copied!" : "Copy"}
-    >
-      {buttonContent}
-
-      {copied ? (
-        <svg
-          className={`${iconSize} shrink-0`}
-          style={iconColor ? { color: iconColor } : undefined}
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke={iconColor || "currentColor"}
-          aria-label="Copied"
-        >
-          <title>Copied</title>
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M5 13l4 4L19 7"
-          />
-        </svg>
-      ) : (
-        <Copy
-          className={`${iconSize} shrink-0 ${iconColor ? "" : "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"}`}
-          style={iconColor ? { color: iconColor } : undefined}
-        />
-      )}
-    </Element>
-  )
-}
-
-export default CopyButton

package/src/widget/components/CountryFilterDropdown.tsx

@@ -1,179 +0,0 @@
-import type { Country } from "@0xtrails/api"
-import { ChevronDown } from "lucide-react"
-import type React from "react"
-import { useEffect, useMemo, useRef, useState } from "react"
-
-export interface CountryFilterDropdownProps {
-  countries: Country[]
-  selectedCountryCode: string | null
-  onCountrySelect: (countryCode: string | null) => void
-  className?: string
-  buttonClassName?: string
-  dropdownClassName?: string
-  compactMode?: boolean
-  nestedMode?: boolean
-}
-
-export const CountryFilterDropdown: React.FC<CountryFilterDropdownProps> = ({
-  countries,
-  selectedCountryCode,
-  onCountrySelect,
-  className = "",
-  buttonClassName = "",
-  dropdownClassName = "",
-  compactMode = false,
-  nestedMode = false,
-}) => {
-  const dropdownRef = useRef<HTMLDivElement>(null)
-  const countryFilterInputRef = useRef<HTMLInputElement>(null)
-  const [isOpen, setIsOpen] = useState(false)
-  const [filterQuery, setFilterQuery] = useState("")
-
-  // Filter countries based on search query
-  const filteredCountries = useMemo(() => {
-    if (!filterQuery.trim()) {
-      return countries
-    }
-    const query = filterQuery.trim().toLowerCase()
-    return countries.filter(
-      (country) =>
-        country.name.toLowerCase().includes(query) ||
-        country.countryCode.toLowerCase().includes(query),
-    )
-  }, [countries, filterQuery])
-
-  // Focus country filter input when dropdown opens
-  useEffect(() => {
-    if (isOpen && countryFilterInputRef.current) {
-      setTimeout(() => {
-        countryFilterInputRef.current?.focus()
-      }, 100)
-    }
-  }, [isOpen])
-
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false)
-        setFilterQuery("")
-      }
-    }
-
-    document.addEventListener("mousedown", handleClickOutside)
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside)
-    }
-  }, [])
-
-  const handleCountrySelect = (countryCode: string | null) => {
-    onCountrySelect(countryCode)
-    setIsOpen(false)
-    setFilterQuery("")
-  }
-
-  // Find selected country
-  const selectedCountry = useMemo(() => {
-    if (selectedCountryCode === null) return null
-    return (
-      countries.find(
-        (country) => country.countryCode === selectedCountryCode,
-      ) || null
-    )
-  }, [countries, selectedCountryCode])
-
-  return (
-    <div className={`relative ${className}`} ref={dropdownRef}>
-      <button
-        type="button"
-        onMouseDown={(e) => {
-          e.preventDefault()
-          e.stopPropagation()
-          setIsOpen(!isOpen)
-        }}
-        className={`h-full px-3 flex items-center gap-2 cursor-pointer transition-colors ${buttonClassName}`}
-        title="Select a country"
-      >
-        {selectedCountry ? (
-          <img
-            src={selectedCountry.flagImageUrl}
-            alt={selectedCountry.name}
-            className="w-5 h-5 rounded object-cover"
-          />
-        ) : (
-          <div className="w-5 h-5 flex items-center justify-center">
-            <span className="text-white text-xs font-bold">🌍</span>
-          </div>
-        )}
-        <ChevronDown
-          className={`h-5 w-5 text-gray-400 transition-all duration-200 ${
-            isOpen ? "rotate-180" : ""
-          }`}
-        />
-      </button>
-
-      {isOpen && (
-        <div
-          className={`absolute right-0 top-full mt-1 min-w-[280px] trails-bg-secondary trails-border trails-border-radius-list token-list-border shadow-lg z-50 ${nestedMode ? "max-h-80" : compactMode ? "max-h-48" : "max-h-[400px]"} ${dropdownClassName}`}
-        >
-          {/* Country Filter Input - Static at top */}
-          <div className="p-2 border-b border-gray-200 dark:border-gray-700">
-            <input
-              ref={countryFilterInputRef}
-              type="text"
-              value={filterQuery}
-              onChange={(e) => setFilterQuery(e.target.value)}
-              placeholder="Select your country"
-              className="w-full px-3 py-2 text-sm border border-solid trails-border-radius-input focus:ring-2 focus:ring-blue-500 focus:border-blue-500 trails-input"
-              onMouseDown={(e) => e.stopPropagation()}
-            />
-          </div>
-
-          {/* Scrollable Country List */}
-          <div
-            className={`p-2 ${nestedMode ? "max-h-52" : compactMode ? "max-h-32" : "max-h-[320px]"} overflow-y-auto trails-scrollbar`}
-          >
-            {/* Country options */}
-            {filteredCountries.map((country) => (
-              <button
-                key={country.countryCode}
-                type="button"
-                onMouseDown={(e) => {
-                  e.preventDefault()
-                  e.stopPropagation()
-                  handleCountrySelect(country.countryCode)
-                }}
-                className={`w-full flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors rounded text-left ${
-                  selectedCountryCode === country.countryCode
-                    ? "bg-blue-50 dark:bg-blue-900/20"
-                    : ""
-                }`}
-                title={country.name}
-              >
-                <img
-                  src={country.flagImageUrl}
-                  alt={country.name}
-                  className="w-6 h-6 rounded object-cover flex-shrink-0"
-                />
-                <span className="text-sm font-medium">{country.name}</span>
-              </button>
-            ))}
-
-            {filteredCountries.length === 0 && filterQuery.trim() && (
-              <div className="text-center py-4">
-                <p className="text-sm text-gray-500 dark:text-gray-400">
-                  No countries found matching "{filterQuery}"
-                </p>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default CountryFilterDropdown