0xtrails 0.13.2 → 0.14.0

package/src/widget/components/TruncatedTransactionHash.tsx

@@ -1,74 +0,0 @@
-import type React from "react"
-import { useState } from "react"
-import { getExplorerUrl } from "../../explorer.js"
-import { isDisplayableTransactionHash } from "../../transactions.js"
-
-interface TruncatedTransactionHashProps {
-  txHash: string
-  chainId: number
-  className?: string
-  expandOnHover?: boolean
-  sliceStart?: number
-  sliceEnd?: number
-}
-
-export const TruncatedTransactionHash: React.FC<
-  TruncatedTransactionHashProps
-> = ({
-  txHash,
-  chainId,
-  className = "",
-  expandOnHover = false,
-  sliceStart = 10,
-  sliceEnd = 6,
-}) => {
-  const [isHovered, setIsHovered] = useState(false)
-
-  if (!isDisplayableTransactionHash(txHash)) {
-    return null
-  }
-
-  const truncatedHash = `${txHash.slice(0, sliceStart)}…${txHash.slice(-sliceEnd)}`
-  const explorerUrl = getExplorerUrl({ txHash, chainId })
-
-  if (!expandOnHover) {
-    return (
-      <a
-        href={explorerUrl}
-        target="_blank"
-        rel="noopener noreferrer"
-        className={`font-mono cursor-pointer hover:underline ${className}`}
-      >
-        {truncatedHash}
-      </a>
-    )
-  }
-
-  return (
-    <a
-      href={explorerUrl}
-      target="_blank"
-      rel="noopener noreferrer"
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      className={`font-mono transition-all duration-300 cursor-pointer hover:underline relative inline-block ${className}`}
-    >
-      <span
-        className={`transition-all duration-300 ${
-          isHovered ? "opacity-0" : "opacity-100"
-        }`}
-      >
-        {truncatedHash}
-      </span>
-      <span
-        className={`absolute left-0 top-0 transition-all duration-300 underline ${
-          isHovered ? "opacity-100" : "opacity-0"
-        }`}
-      >
-        {txHash}
-      </span>
-    </a>
-  )
-}
-
-export default TruncatedTransactionHash

package/src/widget/components/UserPreferences.tsx

@@ -1,570 +0,0 @@
-import { ChevronDown, RotateCcw } from "lucide-react"
-import type React from "react"
-import { useEffect, useRef, useState } from "react"
-import { logger } from "../../logger.js"
-import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
-import { useClickTracking } from "../hooks/useClickTracking.js"
-import { useDisplayCurrencyPreference } from "../hooks/useDisplayCurrencyPreference.js"
-import { useFiatCurrencyList } from "../../query/fiat.hooks.js"
-import {
-  SUPPORTED_LOCALES,
-  useLocalePreference,
-} from "../hooks/useLocalePreference.js"
-import { useThemePreference } from "../hooks/useTheme.js"
-import { useWidgetProps } from "../hooks/useWidgetProps.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-import { SlippageToleranceSettings } from "./SlippageToleranceSettings.js"
-
-interface UserPreferencesProps {
-  onBack?: () => void
-}
-
-export const UserPreferences: React.FC<UserPreferencesProps> = ({ onBack }) => {
-  const { isBalanceVisible, toggleBalanceVisible, resetBalanceVisible } =
-    useBalanceVisible()
-  const { selectedTheme, setSelectedTheme, resetThemePreference } =
-    useThemePreference()
-  const {
-    selectedLocale,
-    setSelectedLocale,
-    resetLocalePreference,
-    getEffectiveLocale,
-  } = useLocalePreference()
-  const {
-    selectedCurrency,
-    setSelectedCurrency,
-    resetCurrencyPreference,
-    getEffectiveCurrency,
-  } = useDisplayCurrencyPreference()
-  const { customCss, theme: widgetTheme } = useWidgetProps()
-  const [isLocaleDropdownOpen, setIsLocaleDropdownOpen] = useState(false)
-  const [isCurrencyDropdownOpen, setIsCurrencyDropdownOpen] = useState(false)
-  const [searchQuery, setSearchQuery] = useState("")
-  const [currencySearchQuery, setCurrencySearchQuery] = useState("")
-  const dropdownRef = useRef<HTMLDivElement>(null)
-  const currencyDropdownRef = useRef<HTMLDivElement>(null)
-  const searchInputRef = useRef<HTMLInputElement>(null)
-  const currencySearchInputRef = useRef<HTMLInputElement>(null)
-  const { trackClick } = useClickTracking()
-
-  // Feature flag to hide country selector
-  const SHOW_COUNTRY_SELECTOR = false
-
-  const handleThemeChange = (newTheme: "light" | "dark") => {
-    // Only allow theme changes if customCss is not set
-    if (!customCss) {
-      trackClick({
-        component: "UserPreferences",
-        action: "change_theme",
-        label: newTheme,
-        metadata: {
-          previousTheme: selectedTheme,
-          newTheme: newTheme,
-        },
-      })
-      setSelectedTheme(newTheme)
-      // ThemeSyncer component will handle applying the theme
-    }
-  }
-
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsLocaleDropdownOpen(false)
-        setSearchQuery("")
-      }
-    }
-
-    if (isLocaleDropdownOpen) {
-      // Focus search input when dropdown opens
-      setTimeout(() => {
-        searchInputRef.current?.focus()
-      }, 10)
-
-      // Add a small delay to prevent immediate closure when opening
-      setTimeout(() => {
-        document.addEventListener("click", handleClickOutside)
-      }, 0)
-
-      return () => {
-        document.removeEventListener("click", handleClickOutside)
-      }
-    }
-  }, [isLocaleDropdownOpen])
-
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (
-        currencyDropdownRef.current &&
-        !currencyDropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsCurrencyDropdownOpen(false)
-        setCurrencySearchQuery("")
-      }
-    }
-
-    if (isCurrencyDropdownOpen) {
-      // Focus search input when dropdown opens
-      setTimeout(() => {
-        currencySearchInputRef.current?.focus()
-      }, 10)
-
-      // Add a small delay to prevent immediate closure when opening
-      setTimeout(() => {
-        document.addEventListener("click", handleClickOutside)
-      }, 0)
-
-      return () => {
-        document.removeEventListener("click", handleClickOutside)
-      }
-    }
-  }, [isCurrencyDropdownOpen])
-
-  const handleResetPreferences = () => {
-    try {
-      // Reset all preferences using their respective hook methods
-      resetBalanceVisible()
-      resetThemePreference()
-      resetLocalePreference()
-      resetCurrencyPreference()
-
-      logger.console.log(
-        "[UserPreferences] All preferences have been reset to defaults",
-      )
-    } catch (error) {
-      logger.console.warn(
-        "[UserPreferences] Failed to reset preferences:",
-        error,
-      )
-    }
-  }
-
-  const effectiveLocale = getEffectiveLocale()
-  const currentLocaleOption =
-    SUPPORTED_LOCALES.find((l) => l.code === effectiveLocale) ||
-    SUPPORTED_LOCALES[0]
-
-  // Filter countries based on search query
-  const filteredLocales = SUPPORTED_LOCALES.filter(
-    (locale) =>
-      locale.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      locale.code.toLowerCase().includes(searchQuery.toLowerCase()),
-  )
-
-  const { data: currencies = [] } = useFiatCurrencyList()
-
-  const effectiveCurrency = getEffectiveCurrency()
-  const currentCurrencyOption = currencies.find(
-    (c) => c.code === effectiveCurrency,
-  ) ||
-    currencies.find((c) => c.code === "USD") || {
-      code: "USD",
-      symbol: "$",
-      name: "US Dollar",
-      flag: "🇺🇸",
-      decimals: 2,
-    }
-
-  // Filter currencies based on search query
-  const filteredCurrencies = currencies.filter(
-    (currency) =>
-      currency.name.toLowerCase().includes(currencySearchQuery.toLowerCase()) ||
-      currency.code.toLowerCase().includes(currencySearchQuery.toLowerCase()) ||
-      currency.symbol.toLowerCase().includes(currencySearchQuery.toLowerCase()),
-  )
-
-  return (
-    <div className="flex flex-col h-full">
-      <ScreenHeader
-        headerContent="User Preferences"
-        headerContentAlign="left"
-        onBack={onBack}
-      />
-
-      <div className="space-y-6">
-        {/* Slippage Settings */}
-        <div>
-          <SlippageToleranceSettings />
-        </div>
-
-        {/* Theme Setting */}
-        <div className="flex items-center justify-between">
-          <span
-            className={`text-sm font-medium ${
-              customCss
-                ? "text-gray-500 dark:text-gray-500"
-                : "text-gray-900 dark:text-gray-100"
-            }`}
-          >
-            Theme
-            {customCss && (
-              <span className="text-xs text-gray-400 dark:text-gray-500 block">
-                Controlled by custom CSS
-              </span>
-            )}
-          </span>
-          <div className="flex items-center gap-2">
-            {/* Light mode button */}
-            <button
-              type="button"
-              onClick={() => handleThemeChange("light")}
-              disabled={!!customCss}
-              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
-                selectedTheme === "light" ||
-                (!selectedTheme && widgetTheme === "light") ||
-                (
-                  !selectedTheme &&
-                    !widgetTheme &&
-                    typeof window !== "undefined" &&
-                    !window.matchMedia("(prefers-color-scheme: dark)").matches
-                )
-                  ? "bg-[#DBEAFE] text-[#2563EB]"
-                  : "bg-transparent text-gray-900 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300"
-              } ${
-                customCss ? "cursor-not-allowed opacity-50" : "cursor-pointer"
-              }`}
-            >
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <title>Light Mode</title>
-                <g clipPath="url(#clip0_light_icon)">
-                  <path
-                    d="M7.33335 14.6665V13.3332C7.33335 12.965 7.63183 12.6665 8.00002 12.6665C8.36821 12.6665 8.66669 12.965 8.66669 13.3332V14.6665C8.66669 15.0347 8.36821 15.3332 8.00002 15.3332C7.63183 15.3332 7.33335 15.0347 7.33335 14.6665ZM3.75523 11.3019C4.01558 11.0416 4.43759 11.0416 4.69794 11.3019C4.95823 11.5623 4.95827 11.9843 4.69794 12.2446L3.75783 13.1847C3.49748 13.4449 3.07541 13.445 2.81512 13.1847C2.55485 12.9245 2.55499 12.5024 2.81512 12.242L3.75523 11.3019ZM11.3021 11.3019C11.5625 11.0416 11.9845 11.0416 12.2448 11.3019L13.1849 12.242C13.445 12.5024 13.4452 12.9245 13.1849 13.1847C12.9247 13.445 12.5026 13.4448 12.2422 13.1847L11.3021 12.2446C11.0418 11.9843 11.0418 11.5623 11.3021 11.3019ZM10 7.99984C10 6.89527 9.10459 5.99984 8.00002 5.99984C6.89545 5.99984 6.00002 6.89527 6.00002 7.99984C6.00002 9.10441 6.89545 9.99984 8.00002 9.99984C9.10459 9.99984 10 9.10441 10 7.99984ZM2.66669 7.33317C3.03488 7.33317 3.33335 7.63165 3.33335 7.99984C3.33335 8.36803 3.03488 8.6665 2.66669 8.6665H1.33335C0.965164 8.6665 0.666687 8.36803 0.666687 7.99984C0.666687 7.63165 0.965164 7.33317 1.33335 7.33317H2.66669ZM14.6667 7.33317C15.0349 7.33317 15.3334 7.63165 15.3334 7.99984C15.3334 8.36803 15.0349 8.6665 14.6667 8.6665H13.3334C12.9652 8.6665 12.6667 8.36803 12.6667 7.99984C12.6667 7.63165 12.9652 7.33317 13.3334 7.33317H14.6667ZM2.81512 2.81494C3.07542 2.55465 3.49747 2.55475 3.75783 2.81494L4.69794 3.75505C4.95829 4.0154 4.95829 4.4374 4.69794 4.69775C4.43759 4.9581 4.01558 4.9581 3.75523 4.69775L2.81512 3.75765C2.55494 3.49729 2.55483 3.07524 2.81512 2.81494ZM12.2422 2.81494C12.5026 2.55481 12.9246 2.55466 13.1849 2.81494C13.4451 3.07522 13.445 3.4973 13.1849 3.75765L12.2448 4.69775C11.9845 4.95809 11.5625 4.95805 11.3021 4.69775C11.0418 4.4374 11.0418 4.0154 11.3021 3.75505L12.2422 2.81494ZM7.33335 2.6665V1.33317C7.33335 0.964981 7.63183 0.666504 8.00002 0.666504C8.36821 0.666504 8.66669 0.964981 8.66669 1.33317V2.6665C8.66669 3.03469 8.36821 3.33317 8.00002 3.33317C7.63183 3.33317 7.33335 3.03469 7.33335 2.6665ZM11.3334 7.99984C11.3334 9.84079 9.84097 11.3332 8.00002 11.3332C6.15907 11.3332 4.66669 9.84079 4.66669 7.99984C4.66669 6.15889 6.15907 4.6665 8.00002 4.6665C9.84097 4.6665 11.3334 6.15889 11.3334 7.99984Z"
-                    fill="currentColor"
-                  />
-                </g>
-                <defs>
-                  <clipPath id="clip0_light_icon">
-                    <rect width="16" height="16" fill="white" />
-                  </clipPath>
-                </defs>
-              </svg>
-              <span>Light</span>
-            </button>
-            {/* Dark mode button */}
-            <button
-              type="button"
-              onClick={() => handleThemeChange("dark")}
-              disabled={!!customCss}
-              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
-                selectedTheme === "dark" ||
-                (!selectedTheme && widgetTheme === "dark") ||
-                (
-                  !selectedTheme &&
-                    !widgetTheme &&
-                    typeof window !== "undefined" &&
-                    window.matchMedia("(prefers-color-scheme: dark)").matches
-                )
-                  ? "bg-[#DBEAFE] text-[#2563EB]"
-                  : "bg-transparent text-gray-900 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300"
-              } ${
-                customCss ? "cursor-not-allowed opacity-50" : "cursor-pointer"
-              }`}
-            >
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <title>Dark Mode</title>
-                <path
-                  d="M7.7207 1.34229C8.12353 1.35288 8.42496 1.60511 8.5651 1.89827C8.70858 2.19855 8.70802 2.57945 8.50781 2.89893L8.50716 2.89827C8.10787 3.53737 7.93751 4.29341 8.02278 5.04216C8.10811 5.79102 8.4449 6.48902 8.97786 7.02197C9.51083 7.55485 10.2088 7.89112 10.9577 7.9764C11.7065 8.06164 12.4624 7.89084 13.1016 7.49137L13.2233 7.42562C13.5135 7.29382 13.8376 7.30794 14.1009 7.43343C14.4146 7.58299 14.6797 7.91693 14.6556 8.36051C14.5861 9.64638 14.1455 10.8847 13.3874 11.9256C12.6291 12.9666 11.5855 13.7658 10.3828 14.2264C9.18016 14.6869 7.8696 14.7895 6.61002 14.5213C5.35045 14.2531 4.19583 13.6253 3.28515 12.7147C2.37445 11.8041 1.74687 10.6494 1.47851 9.38981C1.21017 8.13019 1.3123 6.81977 1.77278 5.61702C2.23329 4.41426 3.03259 3.3708 4.07356 2.61247C5.11452 1.85416 6.35267 1.41314 7.63867 1.34359L7.7207 1.34229ZM7.08072 2.74723C6.28037 2.88708 5.51928 3.20826 4.85807 3.68994C4.02544 4.29656 3.38661 5.13153 3.01822 6.09359C2.64983 7.05577 2.56789 8.10413 2.78255 9.11182C2.99723 10.1195 3.49927 11.0435 4.22786 11.772C4.95644 12.5005 5.88029 13.0027 6.88801 13.2173C7.89573 13.4318 8.94409 13.3495 9.90624 12.981C10.8684 12.6124 11.7033 11.9733 12.3099 11.1405C12.7914 10.4794 13.1115 9.71859 13.2513 8.91846C12.489 9.26194 11.645 9.39674 10.8066 9.30127C9.75813 9.18186 8.7807 8.71088 8.0345 7.96468C7.28837 7.2185 6.81731 6.241 6.69791 5.19255C6.60247 4.354 6.73706 3.50961 7.08072 2.74723Z"
-                  fill="currentColor"
-                />
-              </svg>
-              <span>Dark</span>
-            </button>
-          </div>
-        </div>
-
-        {/* Country Setting */}
-        {SHOW_COUNTRY_SELECTOR && (
-          <div className="flex items-center justify-between">
-            <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
-              Country
-              {!selectedLocale && (
-                <span className="text-xs text-gray-400 dark:text-gray-500 block">
-                  Auto-detected
-                </span>
-              )}
-            </span>
-            <div className="relative" ref={dropdownRef}>
-              <button
-                type="button"
-                onClick={() => setIsLocaleDropdownOpen(!isLocaleDropdownOpen)}
-                className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors text-sm font-medium text-gray-900 dark:text-gray-100"
-              >
-                <span className="flex items-center gap-1.5">
-                  <span className="text-base">
-                    {currentLocaleOption?.flag || "🇺🇸"}
-                  </span>
-                  <span>{currentLocaleOption?.name || "United States"}</span>
-                </span>
-                <ChevronDown
-                  className={`w-4 h-4 transition-transform ${isLocaleDropdownOpen ? "rotate-180" : ""}`}
-                />
-              </button>
-
-              {isLocaleDropdownOpen && (
-                <div className="absolute right-0 mt-2 w-56 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50">
-                  <div className="p-2 border-b border-gray-200 dark:border-gray-700">
-                    <input
-                      ref={searchInputRef}
-                      type="text"
-                      value={searchQuery}
-                      onChange={(e) => setSearchQuery(e.target.value)}
-                      placeholder="Search countries..."
-                      className="w-full px-3 py-1.5 text-sm bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400"
-                    />
-                  </div>
-                  <div className="max-h-56 overflow-y-auto trails-scrollbar">
-                    {filteredLocales.length > 0 ? (
-                      filteredLocales.map((locale) => (
-                        <button
-                          key={locale.code}
-                          type="button"
-                          onClick={() => {
-                            trackClick({
-                              component: "UserPreferences",
-                              action: "change_locale",
-                              label: locale.code,
-                              metadata: {
-                                localeName: locale.name,
-                                previousLocale: selectedLocale,
-                                newLocale: locale.code,
-                              },
-                            })
-                            setSelectedLocale(locale.code)
-                            setIsLocaleDropdownOpen(false)
-                            setSearchQuery("")
-                          }}
-                          className={`w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex items-center justify-between ${
-                            locale.code === effectiveLocale
-                              ? "bg-gray-50 dark:bg-gray-700/50"
-                              : ""
-                          }`}
-                        >
-                          <div className="flex items-center gap-2">
-                            <span className="text-base">{locale.flag}</span>
-                            <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
-                              {locale.name}
-                            </span>
-                          </div>
-                          {locale.code === effectiveLocale && (
-                            <svg
-                              className="w-4 h-4 text-blue-600"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                              strokeWidth="3"
-                            >
-                              <title>Selected</title>
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                d="M5 13l4 4L19 7"
-                              />
-                            </svg>
-                          )}
-                        </button>
-                      ))
-                    ) : (
-                      <div className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 text-center">
-                        No countries found
-                      </div>
-                    )}
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-
-        {/* Display Currency Setting */}
-        <div className="flex items-center justify-between">
-          <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
-            Display Currency
-            {!selectedCurrency && (
-              <span className="text-xs text-gray-400 dark:text-gray-500 block">
-                Default: USD
-              </span>
-            )}
-          </span>
-          <div className="relative" ref={currencyDropdownRef}>
-            <button
-              type="button"
-              onClick={() => setIsCurrencyDropdownOpen(!isCurrencyDropdownOpen)}
-              className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors text-sm font-medium text-gray-900 dark:text-gray-100"
-            >
-              <span className="flex items-center gap-1.5">
-                {currentCurrencyOption?.flag && (
-                  <span className="text-base">
-                    {currentCurrencyOption.flag}
-                  </span>
-                )}
-                <span>
-                  {currentCurrencyOption?.symbol} {currentCurrencyOption?.code}
-                </span>
-              </span>
-              <ChevronDown
-                className={`w-4 h-4 transition-transform ${isCurrencyDropdownOpen ? "rotate-180" : ""}`}
-              />
-            </button>
-
-            {isCurrencyDropdownOpen && (
-              <div className="absolute right-0 mt-2 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50">
-                <div className="p-2 border-b border-gray-200 dark:border-gray-700">
-                  <input
-                    ref={currencySearchInputRef}
-                    type="text"
-                    value={currencySearchQuery}
-                    onChange={(e) => setCurrencySearchQuery(e.target.value)}
-                    placeholder="Search currencies..."
-                    className="w-full px-3 py-1.5 text-sm bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400"
-                  />
-                </div>
-                <div className="max-h-56 overflow-y-auto trails-scrollbar">
-                  {filteredCurrencies.length > 0 ? (
-                    filteredCurrencies.map((currency) => (
-                      <button
-                        key={currency.code}
-                        type="button"
-                        onClick={() => {
-                          trackClick({
-                            component: "UserPreferences",
-                            action: "change_currency",
-                            label: currency.code,
-                            metadata: {
-                              currencyName: currency.name,
-                              currencySymbol: currency.symbol,
-                              previousCurrency: selectedCurrency,
-                              newCurrency: currency.code,
-                            },
-                          })
-                          setSelectedCurrency(currency.code)
-                          setIsCurrencyDropdownOpen(false)
-                          setCurrencySearchQuery("")
-                        }}
-                        className={`w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex items-center justify-between ${
-                          currency.code === effectiveCurrency
-                            ? "bg-gray-50 dark:bg-gray-700/50"
-                            : ""
-                        }`}
-                      >
-                        <div className="flex items-center gap-2">
-                          {currency.flag && (
-                            <span className="text-base">{currency.flag}</span>
-                          )}
-                          <div className="flex flex-col items-start">
-                            <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
-                              {currency.symbol} {currency.code}
-                            </span>
-                            <span className="text-xs text-gray-500 dark:text-gray-400">
-                              {currency.name}
-                            </span>
-                          </div>
-                        </div>
-                        {currency.code === effectiveCurrency && (
-                          <svg
-                            className="w-4 h-4 text-blue-600"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                            strokeWidth="3"
-                          >
-                            <title>Selected</title>
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              d="M5 13l4 4L19 7"
-                            />
-                          </svg>
-                        )}
-                      </button>
-                    ))
-                  ) : (
-                    <div className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 text-center">
-                      No currencies found
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Hide Balances Setting */}
-        <div className="flex items-center justify-between">
-          <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
-            Hide Balances
-          </span>
-          <button
-            type="button"
-            onClick={() => {
-              trackClick({
-                component: "UserPreferences",
-                action: "toggle_balance_visibility",
-                label: isBalanceVisible ? "hide" : "show",
-                metadata: {
-                  previousState: isBalanceVisible.toString(),
-                  newState: (!isBalanceVisible).toString(),
-                },
-              })
-              toggleBalanceVisible()
-            }}
-            className={`relative inline-flex h-8 w-14 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
-              !isBalanceVisible ? "bg-blue-600" : "bg-gray-200 dark:bg-gray-700"
-            }`}
-          >
-            <span
-              className={`inline-flex items-center justify-center h-6 w-6 transform rounded-full bg-white transition-transform ${
-                !isBalanceVisible ? "translate-x-7" : "translate-x-1"
-              }`}
-            >
-              {!isBalanceVisible && (
-                <svg
-                  className="w-3.5 h-3.5 text-blue-600"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  strokeWidth="3"
-                >
-                  <title>Enabled</title>
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M5 13l4 4L19 7"
-                  />
-                </svg>
-              )}
-            </span>
-          </button>
-        </div>
-
-        {/* Reset Preferences Button */}
-        <div className="pt-4 dark:border-gray-700">
-          <button
-            type="button"
-            onClick={handleResetPreferences}
-            className="flex items-center gap-1 px-2 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 trails-bg-secondary rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors cursor-pointer"
-          >
-            <RotateCcw className="w-3 h-3" />
-            Reset
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default UserPreferences