@b3dotfun/sdk 0.0.42-alpha.1 → 0.0.42-alpha.3

package/dist/types/shared/react/hooks/useCurrencyConversion.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Hook for currency conversion and formatting with real-time exchange rates.
+ *
+ * This hook provides currency conversion functionality using live exchange rates
+ * and formats values according to currency-specific rules (decimals, symbols, etc.).
+ *
+ * @returns Currency conversion utilities and state
+ *
+ * @example
+ * ```tsx
+ * function PriceDisplay({ amount }: { amount: number }) {
+ *   const { formatCurrencyValue, selectedCurrency } = useCurrencyConversion();
+ *   return <div>{formatCurrencyValue(amount)}</div>;
+ * }
+ * ```
+ */
+export declare function useCurrencyConversion(): {
+    /** Currently selected display currency */
+    selectedCurrency: import("../stores/currencyStore").SupportedCurrency;
+    /** Base currency used for conversion (typically B3) */
+    baseCurrency: import("../stores/currencyStore").SupportedCurrency;
+    /** Current exchange rate from base to selected currency (undefined while loading) */
+    exchangeRate: number;
+    /** Format a value with currency conversion and proper symbol/decimal handling */
+    formatCurrencyValue: (value: number, options?: {
+        decimals?: number;
+        currency?: string;
+    }) => string;
+    /** Format a tooltip value showing alternate currency representation */
+    formatTooltipValue: (value: number, customCurrency?: string) => string;
+    /** Symbol for the currently selected currency (e.g., "$", "€", "ETH") */
+    selectedCurrencySymbol: string;
+    /** Symbol for the base currency */
+    baseCurrencySymbol: string;
+};

package/dist/types/shared/react/index.d.ts

@@ -1 +1,3 @@
+export * from "./components";
 export * from "./hooks";
+export * from "./stores";

package/dist/types/shared/react/stores/currencyModalStore.d.ts

@@ -0,0 +1,7 @@
+interface CurrencyModalState {
+    isOpen: boolean;
+    openModal: () => void;
+    closeModal: () => void;
+}
+export declare const useCurrencyModalStore: import("zustand").UseBoundStore<import("zustand").StoreApi<CurrencyModalState>>;
+export {};

package/dist/types/shared/react/stores/currencyStore.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Supported currencies for display and conversion.
+ * Includes fiat currencies (USD, EUR, GBP, JPY, CAD, AUD, KRW) and crypto (ETH, SOL, B3).
+ */
+export type SupportedCurrency = "ETH" | "USD" | "EUR" | "GBP" | "JPY" | "CAD" | "AUD" | "B3" | "SOL" | "KRW";
+/**
+ * Currency symbols used for display formatting.
+ * Prefix currencies (USD, EUR, GBP, CAD, AUD) show symbol before the amount.
+ * Suffix currencies (JPY, KRW, ETH, SOL, B3) show symbol after the amount.
+ */
+export declare const CURRENCY_SYMBOLS: Record<SupportedCurrency, string>;
+/**
+ * Human-readable currency names for display in selectors and labels.
+ */
+export declare const CURRENCY_NAMES: Record<SupportedCurrency, string>;
+/**
+ * Currency store state interface.
+ * @property selectedCurrency - The currency currently selected for display
+ * @property baseCurrency - The base currency for conversion (typically B3)
+ * @property setSelectedCurrency - Update the selected display currency
+ * @property setBaseCurrency - Update the base currency for conversions
+ */
+interface CurrencyState {
+    selectedCurrency: SupportedCurrency;
+    baseCurrency: SupportedCurrency;
+    setSelectedCurrency: (currency: SupportedCurrency) => void;
+    setBaseCurrency: (currency: SupportedCurrency) => void;
+}
+/**
+ * Zustand store for managing currency selection and conversion.
+ * Persists user's selected currency preference in localStorage.
+ *
+ * @example
+ * ```tsx
+ * const { selectedCurrency, setSelectedCurrency } = useCurrencyStore();
+ * // Change display currency to USD
+ * setSelectedCurrency('USD');
+ * ```
+ */
+export declare const useCurrencyStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<CurrencyState>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<CurrencyState, CurrencyState>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: CurrencyState) => void) => () => void;
+        onFinishHydration: (fn: (state: CurrencyState) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<CurrencyState, CurrencyState>>;
+    };
+}>;
+export {};

package/dist/types/shared/react/stores/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./currencyModalStore";
+export * from "./currencyStore";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.42-alpha.1",
+  "version": "0.0.42-alpha.3",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",
@@ -205,6 +205,26 @@
       "import": "./dist/esm/shared/thirdweb/*.js",
       "require": "./dist/cjs/shared/thirdweb/*.js"
     },
+    "./shared/react": {
+      "types": "./dist/types/shared/react/index.d.ts",
+      "import": "./dist/esm/shared/react/index.js",
+      "require": "./dist/cjs/shared/react/index.js"
+    },
+    "./shared/react/components": {
+      "types": "./dist/types/shared/react/components/index.d.ts",
+      "import": "./dist/esm/shared/react/components/index.js",
+      "require": "./dist/cjs/shared/react/components/index.js"
+    },
+    "./shared/react/hooks": {
+      "types": "./dist/types/shared/react/hooks/index.d.ts",
+      "import": "./dist/esm/shared/react/hooks/index.js",
+      "require": "./dist/cjs/shared/react/hooks/index.js"
+    },
+    "./shared/react/stores": {
+      "types": "./dist/types/shared/react/stores/index.d.ts",
+      "import": "./dist/esm/shared/react/stores/index.js",
+      "require": "./dist/cjs/shared/react/stores/index.js"
+    },
     "./types/chain-networks": {
       "types": "./dist/types/generated/chain-networks.d.ts",
       "import": "./dist/esm/generated/chain-networks.js",
@@ -289,6 +309,8 @@
     "@feathersjs/feathers": "5.0.33",
     "@feathersjs/socketio-client": "5.0.33",
     "@feathersjs/typebox": "5.0.33",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/big.js": "^6.2.2",
     "@types/invariant": "2.2.37",
     "@types/js-cookie": "3.0.6",
@@ -304,6 +326,7 @@
     "eslint-plugin-import": "2.x.x",
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-tailwindcss": "3.18.0",
+    "happy-dom": "^19.0.2",
     "postcss": "8.5.3",
     "postcss-cli": "11.0.1",
     "postcss-nesting": "^13.0.2",
@@ -311,7 +334,8 @@
     "tailwindcss": "3.4.1",
     "tailwindcss-animate": "^1.0.7",
     "tsc-alias": "^1.8.16",
-    "tsc-watch": "^7.1.1"
+    "tsc-watch": "^7.1.1",
+    "vitest": "^3.2.4"
   },
   "typesVersions": {
     "*": {
@@ -367,6 +391,8 @@
     "typecheck": "tsc --noEmit",
     "generate:thirdweb": "npx @hey-api/openapi-ts --file src/thirdweb/openapi-ts.config.ts --input src/thirdweb/insight-service.json",
     "lint": "eslint 'src/**/*.{ts,tsx}'",
-    "lint:fix": "eslint 'src/**/*.{ts,tsx}' --fix"
+    "lint:fix": "eslint 'src/**/*.{ts,tsx}' --fix",
+    "test": "vitest run",
+    "test:ui": "vitest --ui"
   }
 }

package/src/anyspend/react/components/AnySpend.tsx

@@ -79,6 +79,7 @@ export function AnySpend(props: {
    */
   onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
   onSuccess?: (txHash?: string) => void;
+  customUsdInputValues?: string[];
 }) {
   const fingerprintConfig = getFingerprintConfig();
 
@@ -99,6 +100,7 @@ function AnySpendInner({
   recipientAddress: recipientAddressFromProps,
   onTokenSelect,
   onSuccess,
+  customUsdInputValues,
 }: {
   destinationTokenAddress?: string;
   destinationTokenChainId?: number;
@@ -109,6 +111,7 @@ function AnySpendInner({
   recipientAddress?: string;
   onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
   onSuccess?: (txHash?: string) => void;
+  customUsdInputValues?: string[];
 }) {
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
@@ -924,6 +927,7 @@ function AnySpendInner({
               hideDstToken={isBuyMode}
               anyspendQuote={anyspendQuote}
               onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
+              customUsdInputValues={customUsdInputValues}
             />
           </motion.div>
         )}

package/src/anyspend/react/components/AnyspendDepositHype.tsx

@@ -42,6 +42,7 @@ export interface AnySpendDepositHypeProps {
    * Useful for handling special cases like B3 token selection.
    */
   onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
+  customUsdInputValues?: string[];
 }
 
 export function AnySpendDepositHype(props: AnySpendDepositHypeProps) {
@@ -64,6 +65,7 @@ function AnySpendDepositHypeInner({
   onSuccess,
   mainFooter,
   onTokenSelect,
+  customUsdInputValues,
 }: AnySpendDepositHypeProps) {
   // Use shared flow hook
   const {
@@ -234,6 +236,7 @@ function AnySpendDepositHypeInner({
                 recipientSelectionPanelIndex={PanelView.RECIPIENT_SELECTION}
                 anyspendQuote={anyspendQuote}
                 onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
+                customUsdInputValues={customUsdInputValues}
               />
             </motion.div>
           )}

package/src/anyspend/react/components/common/PanelOnramp.tsx

@@ -30,6 +30,7 @@ export function PanelOnramp({
   hideDstToken = false,
   anyspendQuote,
   onShowPointsDetail,
+  customUsdInputValues = ["5", "10", "20", "25"],
 }: {
   srcAmountOnRamp: string;
   setSrcAmountOnRamp: (amount: string) => void;
@@ -47,6 +48,7 @@ export function PanelOnramp({
   hideDstToken?: boolean;
   anyspendQuote?: GetQuoteResponse;
   onShowPointsDetail?: () => void;
+  customUsdInputValues?: string[];
 }) {
   const featureFlags = useFeatureFlags();
   // Get geo-based onramp options to access fee information
@@ -166,7 +168,7 @@ export function PanelOnramp({
               value={srcAmountOnRamp}
               onChange={handleAmountChange}
               placeholder="5"
-              className="text-as-primary placeholder:text-as-primary/50 h-auto min-w-[70px] border-0 bg-transparent p-0 px-3 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0"
+              className="text-as-primary placeholder:text-as-primary/50 h-auto min-w-[70px] border-0 bg-transparent p-0 px-1 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0"
               style={{
                 width: `${Math.max(50, srcAmountOnRamp.length * 34)}px`,
               }}
@@ -175,20 +177,22 @@ export function PanelOnramp({
         </div>
 
         {/* Quick Amount Buttons */}
-        <div className={cn("mx-auto mb-6 inline-grid grid-cols-4 gap-2", hideDstToken && "mb-0")}>
-          {["5", "10", "20", "25"].map(value => (
-            <button
-              key={value}
-              onClick={() => handleQuickAmount(value)}
-              className={`bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${
-                srcAmountOnRamp === value
-                  ? "border-as-border-secondary bg-as-surface-secondary"
-                  : "bg-as-surface-secondary hover:bg-as-surface-secondary"
-              }`}
-            >
-              ${value}
-            </button>
-          ))}
+        <div className={cn("mx-auto mb-6 flex justify-center gap-2", hideDstToken && "mb-0")}>
+          {customUsdInputValues
+            .filter(v => !isNaN(Number(v)))
+            .map(value => (
+              <button
+                key={value}
+                onClick={() => handleQuickAmount(value)}
+                className={`bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${
+                  srcAmountOnRamp === value
+                    ? "border-as-border-secondary bg-as-surface-secondary"
+                    : "bg-as-surface-secondary hover:bg-as-surface-secondary"
+                }`}
+              >
+                ${value}
+              </button>
+            ))}
         </div>
 
         {/* Token Display */}

package/src/global-account/react/components/SignInWithB3/SignIn.tsx

@@ -159,13 +159,8 @@ export function SignIn(props: SignInWithB3Props) {
 
                   <button className="mb-2 w-full space-y-1" onClick={onDisconnect}>
                     <div className="hover:bg-b3-react-background group flex h-12 items-center rounded-xl px-4 transition-colors">
-                      <Icon
-                        className="fill-b3-react-background group-hover:fill-b3-react-primary mr-4 shrink-0 transition-colors"
-                        name="logout"
-                      />
-                      <div className="text-b3-react-background group-hover:text-b3-react-primary mr-auto transition-colors">
-                        Disconnect
-                      </div>
+                      <Icon className="fill-b3-react-primary mr-4 shrink-0 transition-colors" name="logout" />
+                      <div className="text-b3-react-primary mr-auto transition-colors">Disconnect</div>
                     </div>
                   </button>
                 </div>

package/src/global-account/react/components/index.ts

@@ -7,12 +7,12 @@ export { useB3 } from "./B3Provider/useB3";
 export { StyleRoot } from "./StyleRoot";
 
 // SignInWithB3 Components
-export { SignInWithB3 } from "./SignInWithB3/SignInWithB3";
-export { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";
-export { SignInWithB3Privy } from "./SignInWithB3/SignInWithB3Privy";
 export { AuthButton } from "./SignInWithB3/components/AuthButton";
 export { PermissionItem } from "./SignInWithB3/components/PermissionItem";
 export { WalletRow } from "./SignInWithB3/components/WalletRow";
+export { SignInWithB3 } from "./SignInWithB3/SignInWithB3";
+export { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";
+export { SignInWithB3Privy } from "./SignInWithB3/SignInWithB3Privy";
 export { LoginStepContainer } from "./SignInWithB3/steps/LoginStep";
 export { getConnectOptionsFromStrategy, isWalletType, type AllowedStrategy } from "./SignInWithB3/utils/signInUtils";
 
@@ -43,15 +43,6 @@ export { StaggeredFadeLoader } from "./custom/StaggeredFadeLoader";
 export { WalletConnectorIcon } from "./custom/WalletConnectorIcon";
 
 // UI Components
-export { Loading } from "./ui/Loading";
-export { ShinyButton } from "./ui/ShinyButton";
-export { TabTrigger, Tabs, TabsContent, TabsList, TabsTransitionWrapper } from "./ui/TabSystem";
-export {
-  TabTrigger as TabTriggerPrimitive,
-  TabsContent as TabsContentPrimitive,
-  TabsList as TabsListPrimitive,
-  Tabs as TabsPrimitive,
-} from "./ui/Tabs";
 export { Badge, badgeVariants } from "./ui/badge";
 export { Button, buttonVariants } from "./ui/button";
 export {
@@ -89,12 +80,28 @@ export {
   DrawerTitle,
   DrawerTrigger,
 } from "./ui/drawer";
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
 export { GlareCard } from "./ui/glare-card";
 export { GlareCardRounded } from "./ui/glare-card-rounded";
 export { Input } from "./ui/input";
+export { Loading } from "./ui/Loading";
 export { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 export { ScrollArea, ScrollBar } from "./ui/scroll-area";
+export { ShinyButton } from "./ui/ShinyButton";
 export { Skeleton } from "./ui/skeleton";
+export {
+  TabTrigger as TabTriggerPrimitive,
+  TabsContent as TabsContentPrimitive,
+  TabsList as TabsListPrimitive,
+  Tabs as TabsPrimitive,
+} from "./ui/Tabs";
+export { TabTrigger, Tabs, TabsContent, TabsList, TabsTransitionWrapper } from "./ui/TabSystem";
 export { TextLoop } from "./ui/text-loop";
 export { TextShimmer } from "./ui/text-shimmer";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";

package/src/global-account/react/components/ui/dropdown-menu.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils";
+import * as React from "react";
+
+interface DropdownMenuProps {
+  children: React.ReactNode;
+}
+
+interface DropdownMenuContentProps {
+  children: React.ReactNode;
+  align?: "start" | "center" | "end";
+  className?: string;
+}
+
+interface DropdownMenuItemProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+  className?: string;
+}
+
+interface DropdownMenuSeparatorProps {
+  className?: string;
+}
+
+interface DropdownMenuTriggerProps {
+  children: React.ReactNode;
+  asChild?: boolean;
+}
+
+const DropdownMenuContext = React.createContext<{
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+}>({
+  isOpen: false,
+  setIsOpen: () => {},
+});
+
+export function DropdownMenu({ children }: DropdownMenuProps) {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Element;
+      if (!target.closest("[data-dropdown-menu]")) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("click", handleClickOutside);
+      return () => document.removeEventListener("click", handleClickOutside);
+    }
+  }, [isOpen]);
+
+  return (
+    <DropdownMenuContext.Provider value={{ isOpen, setIsOpen }}>
+      <div className="relative" data-dropdown-menu>
+        {children}
+      </div>
+    </DropdownMenuContext.Provider>
+  );
+}
+
+export function DropdownMenuTrigger({ children, asChild }: DropdownMenuTriggerProps) {
+  const { isOpen, setIsOpen } = React.useContext(DropdownMenuContext);
+
+  const handleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  if (asChild) {
+    if (React.isValidElement(children)) {
+      return React.cloneElement(children as React.ReactElement<{ onClick?: () => void }>, {
+        onClick: handleClick,
+      });
+    }
+  }
+
+  return <button onClick={handleClick}>{children}</button>;
+}
+
+export function DropdownMenuContent({ children, align = "start", className }: DropdownMenuContentProps) {
+  const { isOpen } = React.useContext(DropdownMenuContext);
+
+  if (!isOpen) return null;
+
+  const alignmentClasses = {
+    start: "left-0",
+    center: "left-1/2 -translate-x-1/2",
+    end: "right-0",
+  };
+
+  return (
+    <div
+      className={cn(
+        "bg-popover text-popover-foreground absolute top-full z-50 mt-1 min-w-32 overflow-hidden rounded-md border p-1 shadow-md",
+        "border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800",
+        alignmentClasses[align],
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function DropdownMenuItem({ children, onClick, className }: DropdownMenuItemProps) {
+  const { setIsOpen } = React.useContext(DropdownMenuContext);
+
+  const handleClick = () => {
+    onClick?.();
+    setIsOpen(false);
+  };
+
+  return (
+    <div
+      className={cn(
+        "hover:bg-accent hover:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "hover:bg-gray-100 dark:hover:bg-gray-700",
+        className,
+      )}
+      onClick={handleClick}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function DropdownMenuSeparator({ className }: DropdownMenuSeparatorProps) {
+  return <div className={cn("bg-muted -mx-1 my-1 h-px", "bg-gray-200 dark:bg-gray-600", className)} />;
+}

package/src/global-account/react/stores/useModalStore.ts

@@ -128,6 +128,8 @@ export interface AnySpendModalProps extends BaseModalProps {
   destinationTokenAddress?: string;
   /** Chain ID where the destination token exists (enables buy mode) */
   destinationTokenChainId?: number;
+  /** Custom USD input values for quick amount buttons in fiat onramp */
+  customUsdInputValues?: string[];
 }
 
 /**
@@ -307,6 +309,8 @@ export interface AnySpendDepositHypeProps extends BaseModalProps {
   mainFooter?: React.ReactNode;
   /** Callback function called when the deposit is successful */
   onSuccess?: (amount?: string) => void;
+  /** Custom USD input values for quick amount buttons in fiat onramp */
+  customUsdInputValues?: string[];
 }
 
 export interface AvatarEditorModalProps extends BaseModalProps {

package/src/shared/constants/currency.ts

@@ -0,0 +1,2 @@
+// B3 Token image URL
+export const B3_COIN_IMAGE_URL = "https://cdn.b3.fun/b3-coin-3d.png";

package/src/shared/constants/index.ts

@@ -1,3 +1,5 @@
+export * from "./currency";
+
 export const siteURL = "https://basement.fun";
 
 export const b3CoinIcon = "https://cdn.b3.fun/b3-coin-3d.png";

package/src/shared/react/components/CurrencySelector.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils";
+import { Button } from "../../../global-account/react/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../../global-account/react/components/ui/dropdown-menu";
+import { CURRENCY_NAMES, CURRENCY_SYMBOLS, SupportedCurrency, useCurrencyStore } from "../stores/currencyStore";
+
+const currencies: SupportedCurrency[] = ["B3", "ETH", "SOL", "USD", "EUR", "GBP", "KRW", "JPY", "CAD", "AUD"];
+
+interface CurrencySelectorProps {
+  labelClassName?: string;
+  buttonVariant?: "dark" | "primary" | "ghost" | "gold";
+  label?: string;
+}
+
+export function CurrencySelector({ labelClassName, buttonVariant = "dark", label }: CurrencySelectorProps) {
+  const { selectedCurrency, setSelectedCurrency } = useCurrencyStore();
+
+  return (
+    <div className="flex items-center gap-2">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <div className="flex items-center gap-3">
+            {label && (
+              <span
+                className={cn(
+                  "text-foreground text-sm font-medium leading-none tracking-tight sm:text-base",
+                  labelClassName,
+                )}
+              >
+                {label}
+              </span>
+            )}
+            <Button variant={buttonVariant as any} className="flex items-center gap-2">
+              <span className="text-sm font-medium">{CURRENCY_NAMES[selectedCurrency]}</span>
+              <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  fillRule="evenodd"
+                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </Button>
+          </div>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="z-[100] min-w-[200px]">
+          {currencies.map(currency => (
+            <div key={currency}>
+              <DropdownMenuItem
+                onClick={() => setSelectedCurrency(currency)}
+                className={`flex cursor-pointer items-center justify-between gap-3 px-3 py-2.5 transition-colors ${
+                  selectedCurrency === currency ? "bg-accent" : "hover:bg-accent/50"
+                }`}
+              >
+                <span className="text-foreground text-sm font-medium">{CURRENCY_NAMES[currency]}</span>
+                <span className="text-muted-foreground text-xs font-medium">{CURRENCY_SYMBOLS[currency]}</span>
+              </DropdownMenuItem>
+              {currency === "SOL" && <DropdownMenuSeparator key="separator" className="bg-border my-1" />}
+            </div>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}