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

package/dist/esm/global-account/react/components/index.d.ts

@@ -4,12 +4,12 @@ export { RelayKitProviderWrapper } from "./B3Provider/RelayKitProviderWrapper";
 export { B3Context, type B3ContextType } from "./B3Provider/types";
 export { useB3 } from "./B3Provider/useB3";
 export { StyleRoot } from "./StyleRoot";
-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";
 export { ManageAccount } from "./ManageAccount/ManageAccount";
@@ -24,21 +24,22 @@ export { ClientOnly } from "./custom/ClientOnly";
 export { CopyToClipboard } from "./custom/CopyToClipboard";
 export { StaggeredFadeLoader } from "./custom/StaggeredFadeLoader";
 export { WalletConnectorIcon } from "./custom/WalletConnectorIcon";
-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 { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from "./ui/command";
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from "./ui/dialog";
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, 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/dist/esm/global-account/react/components/index.js

@@ -6,12 +6,12 @@ export { B3Context } from "./B3Provider/types.js";
 export { useB3 } from "./B3Provider/useB3.js";
 export { StyleRoot } from "./StyleRoot.js";
 // SignInWithB3 Components
-export { SignInWithB3 } from "./SignInWithB3/SignInWithB3.js";
-export { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow.js";
-export { SignInWithB3Privy } from "./SignInWithB3/SignInWithB3Privy.js";
 export { AuthButton } from "./SignInWithB3/components/AuthButton.js";
 export { PermissionItem } from "./SignInWithB3/components/PermissionItem.js";
 export { WalletRow } from "./SignInWithB3/components/WalletRow.js";
+export { SignInWithB3 } from "./SignInWithB3/SignInWithB3.js";
+export { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow.js";
+export { SignInWithB3Privy } from "./SignInWithB3/SignInWithB3Privy.js";
 export { LoginStepContainer } from "./SignInWithB3/steps/LoginStep.js";
 export { getConnectOptionsFromStrategy, isWalletType } from "./SignInWithB3/utils/signInUtils.js";
 // ManageAccount Components
@@ -34,21 +34,22 @@ export { CopyToClipboard } from "./custom/CopyToClipboard.js";
 export { StaggeredFadeLoader } from "./custom/StaggeredFadeLoader.js";
 export { WalletConnectorIcon } from "./custom/WalletConnectorIcon.js";
 // UI Components
-export { Loading } from "./ui/Loading.js";
-export { ShinyButton } from "./ui/ShinyButton.js";
-export { TabTrigger, Tabs, TabsContent, TabsList, TabsTransitionWrapper } from "./ui/TabSystem.js";
-export { TabTrigger as TabTriggerPrimitive, TabsContent as TabsContentPrimitive, TabsList as TabsListPrimitive, Tabs as TabsPrimitive, } from "./ui/Tabs.js";
 export { Badge, badgeVariants } from "./ui/badge.js";
 export { Button, buttonVariants } from "./ui/button.js";
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from "./ui/command.js";
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from "./ui/dialog.js";
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, } from "./ui/drawer.js";
+export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "./ui/dropdown-menu.js";
 export { GlareCard } from "./ui/glare-card.js";
 export { GlareCardRounded } from "./ui/glare-card-rounded.js";
 export { Input } from "./ui/input.js";
+export { Loading } from "./ui/Loading.js";
 export { Popover, PopoverContent, PopoverTrigger } from "./ui/popover.js";
 export { ScrollArea, ScrollBar } from "./ui/scroll-area.js";
+export { ShinyButton } from "./ui/ShinyButton.js";
 export { Skeleton } from "./ui/skeleton.js";
+export { TabTrigger as TabTriggerPrimitive, TabsContent as TabsContentPrimitive, TabsList as TabsListPrimitive, Tabs as TabsPrimitive, } from "./ui/Tabs.js";
+export { TabTrigger, Tabs, TabsContent, TabsList, TabsTransitionWrapper } from "./ui/TabSystem.js";
 export { TextLoop } from "./ui/text-loop.js";
 export { TextShimmer } from "./ui/text-shimmer.js";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip.js";

package/dist/esm/global-account/react/components/ui/dropdown-menu.d.ts

@@ -0,0 +1,27 @@
+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;
+}
+export declare function DropdownMenu({ children }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuTrigger({ children, asChild }: DropdownMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuContent({ children, align, className }: DropdownMenuContentProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function DropdownMenuItem({ children, onClick, className }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuSeparator({ className }: DropdownMenuSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/global-account/react/components/ui/dropdown-menu.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils/index.js";
+import * as React from "react";
+const DropdownMenuContext = React.createContext({
+    isOpen: false,
+    setIsOpen: () => { },
+});
+export function DropdownMenu({ children }) {
+    const [isOpen, setIsOpen] = React.useState(false);
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            if (!target.closest("[data-dropdown-menu]")) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("click", handleClickOutside);
+            return () => document.removeEventListener("click", handleClickOutside);
+        }
+    }, [isOpen]);
+    return (_jsx(DropdownMenuContext.Provider, { value: { isOpen, setIsOpen }, children: _jsx("div", { className: "relative", "data-dropdown-menu": true, children: children }) }));
+}
+export function DropdownMenuTrigger({ children, asChild }) {
+    const { isOpen, setIsOpen } = React.useContext(DropdownMenuContext);
+    const handleClick = () => {
+        setIsOpen(!isOpen);
+    };
+    if (asChild) {
+        if (React.isValidElement(children)) {
+            return React.cloneElement(children, {
+                onClick: handleClick,
+            });
+        }
+    }
+    return _jsx("button", { onClick: handleClick, children: children });
+}
+export function DropdownMenuContent({ children, align = "start", className }) {
+    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 (_jsx("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: children }));
+}
+export function DropdownMenuItem({ children, onClick, className }) {
+    const { setIsOpen } = React.useContext(DropdownMenuContext);
+    const handleClick = () => {
+        onClick?.();
+        setIsOpen(false);
+    };
+    return (_jsx("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: children }));
+}
+export function DropdownMenuSeparator({ className }) {
+    return _jsx("div", { className: cn("bg-muted -mx-1 my-1 h-px", "bg-gray-200 dark:bg-gray-600", className) });
+}

package/dist/esm/shared/constants/currency.d.ts

@@ -0,0 +1 @@
+export declare const B3_COIN_IMAGE_URL = "https://cdn.b3.fun/b3-coin-3d.png";

package/dist/esm/shared/constants/currency.js

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

package/dist/esm/shared/constants/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./currency";
 export declare const siteURL = "https://basement.fun";
 export declare const b3CoinIcon = "https://cdn.b3.fun/b3-coin-3d.png";
 export declare const ecosystemWalletId: `ecosystem.${string}`;

package/dist/esm/shared/constants/index.js

@@ -1,3 +1,4 @@
+export * from "./currency.js";
 export const siteURL = "https://basement.fun";
 export const b3CoinIcon = "https://cdn.b3.fun/b3-coin-3d.png";
 export const ecosystemWalletId = (process.env.NEXT_PUBLIC_THIRDWEB_ECOSYSTEM_ID ||

package/dist/esm/shared/react/components/CurrencySelector.d.ts

@@ -0,0 +1,7 @@
+interface CurrencySelectorProps {
+    labelClassName?: string;
+    buttonVariant?: "dark" | "primary" | "ghost" | "gold";
+    label?: string;
+}
+export declare function CurrencySelector({ labelClassName, buttonVariant, label }: CurrencySelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/shared/react/components/CurrencySelector.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../shared/utils/index.js";
+import { Button } from "../../../global-account/react/components/ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "../../../global-account/react/components/ui/dropdown-menu.js";
+import { CURRENCY_NAMES, CURRENCY_SYMBOLS, useCurrencyStore } from "../stores/currencyStore.js";
+const currencies = ["B3", "ETH", "SOL", "USD", "EUR", "GBP", "KRW", "JPY", "CAD", "AUD"];
+export function CurrencySelector({ labelClassName, buttonVariant = "dark", label }) {
+    const { selectedCurrency, setSelectedCurrency } = useCurrencyStore();
+    return (_jsx("div", { className: "flex items-center gap-2", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("div", { className: "flex items-center gap-3", children: [label && (_jsx("span", { className: cn("text-foreground text-sm font-medium leading-none tracking-tight sm:text-base", labelClassName), children: label })), _jsxs(Button, { variant: buttonVariant, className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium", children: CURRENCY_NAMES[selectedCurrency] }), _jsx("svg", { className: "h-4 w-4", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("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" }) })] })] }) }), _jsx(DropdownMenuContent, { align: "end", className: "z-[100] min-w-[200px]", children: currencies.map(currency => (_jsxs("div", { children: [_jsxs(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"}`, children: [_jsx("span", { className: "text-foreground text-sm font-medium", children: CURRENCY_NAMES[currency] }), _jsx("span", { className: "text-muted-foreground text-xs font-medium", children: CURRENCY_SYMBOLS[currency] })] }), currency === "SOL" && _jsx(DropdownMenuSeparator, { className: "bg-border my-1" }, "separator")] }, currency))) })] }) }));
+}

package/dist/esm/shared/react/components/FormattedCurrency.d.ts

@@ -0,0 +1,12 @@
+interface FormattedCurrencyProps {
+    amount: number;
+    showChange?: boolean;
+    showColor?: boolean;
+    className?: string;
+    subB3Icon?: boolean;
+    clickable?: boolean;
+    decimals?: number;
+    currency?: string;
+}
+export declare function FormattedCurrency({ amount, showChange, showColor, className, subB3Icon, clickable, decimals, currency, }: FormattedCurrencyProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/shared/react/components/FormattedCurrency.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { B3_COIN_IMAGE_URL } from "../../../shared/constants/currency.js";
+import { cn } from "../../../shared/utils/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../../global-account/react/components/ui/tooltip.js";
+import { useCurrencyConversion } from "../hooks/useCurrencyConversion.js";
+import { useCurrencyModalStore } from "../stores/currencyModalStore.js";
+export function FormattedCurrency({ amount, showChange = false, showColor = false, className, subB3Icon = true, clickable = true, decimals, currency, }) {
+    const { formatCurrencyValue, formatTooltipValue, selectedCurrency, baseCurrency } = useCurrencyConversion();
+    const { openModal } = useCurrencyModalStore();
+    // Use passed currency or fall back to selected currency
+    const activeCurrency = currency || selectedCurrency;
+    const isPositive = amount >= 0;
+    // Get the formatted value (using absolute value for negative numbers when showing change)
+    const baseAmount = showChange ? Math.abs(amount) : amount;
+    // Use centralized formatting from hook with optional overrides
+    const formattedValue = formatCurrencyValue(baseAmount, {
+        decimals,
+        currency,
+    });
+    // Generate tooltip using the centralized hook function
+    const baseTooltipValue = formatTooltipValue(amount, currency);
+    // Add change indicator if needed
+    const tooltipValue = showChange ? `${isPositive ? "+" : "-"}${baseTooltipValue}` : baseTooltipValue;
+    // Determine color class
+    let colorClass = "";
+    if (showColor) {
+        if (isPositive) {
+            colorClass = "text-green-400";
+        }
+        else {
+            colorClass = "text-red-400";
+        }
+    }
+    // Add change indicator
+    let displayValue = formattedValue;
+    if (showChange) {
+        if (isPositive) {
+            displayValue = `+${formattedValue}`;
+        }
+        else {
+            displayValue = `-${formattedValue}`;
+        }
+    }
+    const handleClick = () => {
+        if (clickable) {
+            openModal();
+        }
+    };
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("span", { onClick: handleClick, className: cn("inline-flex items-center gap-1 whitespace-nowrap", colorClass, className, clickable && "cursor-pointer transition-opacity hover:opacity-80"), children: [subB3Icon &&
+                            (currency === baseCurrency || (!currency && activeCurrency === baseCurrency)) &&
+                            baseCurrency === "B3"
+                            ? displayValue.split(" ")[0]
+                            : displayValue, subB3Icon &&
+                            (currency === baseCurrency || (!currency && activeCurrency === baseCurrency)) &&
+                            baseCurrency === "B3" && (_jsx("img", { src: B3_COIN_IMAGE_URL, className: "inline-block h-4 w-4 align-middle", alt: "B3 coin" }))] }) }), _jsx(TooltipContent, { children: tooltipValue })] }));
+}

package/dist/esm/shared/react/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./CurrencySelector";
+export * from "./FormattedCurrency";

package/dist/esm/shared/react/components/index.js

@@ -0,0 +1,2 @@
+export * from "./CurrencySelector.js";
+export * from "./FormattedCurrency.js";

package/dist/esm/shared/react/hooks/__tests__/useCurrencyConversion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/shared/react/hooks/__tests__/useCurrencyConversion.test.js

@@ -0,0 +1,243 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { useCurrencyConversion } from "../useCurrencyConversion.js";
+// Mock the external dependencies
+// Store mock rates for different quote currencies
+const mockRates = {};
+// Mock store state
+const mockStoreState = {
+    selectedCurrency: "B3",
+    baseCurrency: "B3",
+    setSelectedCurrency: vi.fn(),
+    setBaseCurrency: vi.fn(),
+};
+vi.mock("@b3dotfun/sdk/global-account/react", () => ({
+    useExchangeRate: vi.fn((params) => {
+        const rate = mockRates[params?.quoteCurrency];
+        return { rate };
+    }),
+}));
+vi.mock("@b3dotfun/sdk/shared/utils/number", () => ({
+    formatDisplayNumber: vi.fn((value) => {
+        const num = Number(value);
+        if (isNaN(num))
+            return "0";
+        return num.toLocaleString("en-US", { maximumFractionDigits: 6 });
+    }),
+}));
+vi.mock("../../stores/currencyStore", () => ({
+    useCurrencyStore: vi.fn((selector) => {
+        if (selector) {
+            return selector(mockStoreState);
+        }
+        return mockStoreState;
+    }),
+    CURRENCY_SYMBOLS: {
+        B3: "B3",
+        USD: "$",
+        EUR: "€",
+        GBP: "£",
+        JPY: "¥",
+        CAD: "C$",
+        AUD: "A$",
+        ETH: "ETH",
+        SOL: "SOL",
+        KRW: "₩",
+    },
+}));
+describe("useCurrencyConversion", () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        // Reset mock rates to default
+        Object.keys(mockRates).forEach(key => delete mockRates[key]);
+        mockRates.USD = 1.0;
+        // Reset store state
+        mockStoreState.selectedCurrency = "B3";
+        mockStoreState.baseCurrency = "B3";
+    });
+    describe("formatCurrencyValue", () => {
+        it("should format base currency (B3) without conversion", () => {
+            mockStoreState.selectedCurrency = "B3";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = renderHook(() => useCurrencyConversion());
+            const formatted = result.current.formatCurrencyValue(100);
+            expect(formatted).toContain("B3");
+            expect(formatted).toContain("100");
+        });
+        it("should show base currency when exchange rate is unavailable", () => {
+            mockRates.USD = undefined;
+            mockStoreState.selectedCurrency = "USD";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = renderHook(() => useCurrencyConversion());
+            const formatted = result.current.formatCurrencyValue(100);
+            expect(formatted).toContain("B3");
+            expect(formatted).not.toContain("$");
+        });
+        it("should format USD with prefix symbol", () => {
+            mockRates.USD = 2.0;
+            mockStoreState.selectedCurrency = "USD";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = renderHook(() => useCurrencyConversion());
+            const formatted = result.current.formatCurrencyValue(100);
+            expect(formatted).toMatch(/^\$/);
+            expect(formatted).toContain("200");
+        });
+        it("should format EUR with prefix symbol", () => {
+            mockRates.EUR = 1.8;
+            mockRates.USD = 2.0;
+            mockStoreState.selectedCurrency = "EUR";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = renderHook(() => useCurrencyConversion());
+            const formatted = result.current.formatCurrencyValue(100);
+            expect(formatted).toMatch(/^€/);
+        });
+        it("should format JPY without decimals", () => {
+            mockRates.JPY = 150;
+            mockRates.USD = 2.0;
+            mockStoreState.selectedCurrency = "JPY";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = renderHook(() => useCurrencyConversion());
+            const formatted = result.current.formatCurrencyValue(100);
+            expect(formatted).toContain("¥");
+            expect(formatted).not.toContain(".");
+        });
+        it("should format KRW without decimals", () => {
+            mockRates.KRW = 1300;
+            mockRates.USD = 2.0;
+            mockStoreState.selectedCurrency = "KRW";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = renderHook(() => useCurrencyConversion());
+            const formatted = result.current.formatCurrencyValue(100);
+            expect(formatted).toContain("₩");
+            expect(formatted).not.toContain(".");
+        });
+        it("should format ETH with suffix symbol", () => {
+            mockRates.ETH = 0.0005;
+            mockRates.USD = 2.0;
+            mockStoreState.selectedCurrency = "ETH";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = renderHook(() => useCurrencyConversion());
+            const formatted = result.current.formatCurrencyValue(100);
+            expect(formatted).toContain("ETH");
+            expect(formatted).not.toMatch(/^ETH/);
+        });
+        it("should format SOL with suffix symbol", () => {
+            mockRates.SOL = 0.05;
+            mockRates.USD = 2.0;
+            mockStoreState.selectedCurrency = "SOL";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = renderHook(() => useCurrencyConversion());
+            const formatted = result.current.formatCurrencyValue(100);
+            expect(formatted).toContain("SOL");
+            expect(formatted).not.toMatch(/^SOL/);
+        });
+        it("should handle small USD amounts with proper conversion", () => {
+            mockRates.USD = 1.5;
+            mockStoreState.selectedCurrency = "USD";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = renderHook(() => useCurrencyConversion());
+            const formatted = result.current.formatCurrencyValue(10);
+            // 10 * 1.5 = 15
+            expect(formatted).toMatch(/^\$/);
+            expect(formatted).toContain("15");
+        });
+        it("should apply correct exchange rate conversion", () => {
+            const testRate = 3.5;
+            mockRates.USD = testRate;
+            mockStoreState.selectedCurrency = "USD";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = renderHook(() => useCurrencyConversion());
+            const inputValue = 100;
+            const formatted = result.current.formatCurrencyValue(inputValue);
+            expect(formatted).toContain("350");
+        });
+    });
+    describe("return values", () => {
+        it("should return selected currency", () => {
+            mockStoreState.selectedCurrency = "USD";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = renderHook(() => useCurrencyConversion());
+            expect(result.current.selectedCurrency).toBe("USD");
+        });
+        it("should return base currency", () => {
+            mockStoreState.selectedCurrency = "USD";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = renderHook(() => useCurrencyConversion());
+            expect(result.current.baseCurrency).toBe("B3");
+        });
+        it("should return exchange rate", () => {
+            const testRate = 2.5;
+            mockRates.USD = testRate;
+            mockStoreState.selectedCurrency = "USD";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = renderHook(() => useCurrencyConversion());
+            expect(result.current.exchangeRate).toBe(testRate);
+        });
+        it("should return correct currency symbols", () => {
+            mockStoreState.selectedCurrency = "EUR";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = renderHook(() => useCurrencyConversion());
+            expect(result.current.selectedCurrencySymbol).toBe("€");
+            expect(result.current.baseCurrencySymbol).toBe("B3");
+        });
+    });
+    describe("formatTooltipValue", () => {
+        it("should show USD equivalent when displaying base currency", () => {
+            mockRates.USD = 1.5;
+            mockStoreState.selectedCurrency = "B3";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = renderHook(() => useCurrencyConversion());
+            const tooltip = result.current.formatTooltipValue(100);
+            expect(tooltip).toContain("USD");
+            expect(tooltip).toContain("150");
+        });
+        it("should show base currency when displaying other currency", () => {
+            mockRates.EUR = 0.9;
+            mockRates.USD = 1.2;
+            mockStoreState.selectedCurrency = "EUR";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = renderHook(() => useCurrencyConversion());
+            const tooltip = result.current.formatTooltipValue(100);
+            expect(tooltip).toContain("B3");
+            expect(tooltip).toContain("100");
+        });
+        it("should handle custom currency for base currency", () => {
+            mockRates.USD = 2.0;
+            mockRates.EUR = 1.8;
+            mockStoreState.selectedCurrency = "EUR";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = renderHook(() => useCurrencyConversion());
+            const tooltip = result.current.formatTooltipValue(100, "B3");
+            expect(tooltip).toContain("USD");
+            expect(tooltip).toContain("200");
+        });
+        it("should handle custom currency for non-base currency", () => {
+            mockRates.USD = 2.0;
+            mockStoreState.selectedCurrency = "USD";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = renderHook(() => useCurrencyConversion());
+            const tooltip = result.current.formatTooltipValue(50, "ETH");
+            expect(tooltip).toContain("ETH");
+            expect(tooltip).toContain("50");
+        });
+        it("should handle absolute values for negative amounts", () => {
+            mockRates.USD = 1.5;
+            mockStoreState.selectedCurrency = "B3";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = renderHook(() => useCurrencyConversion());
+            const tooltip = result.current.formatTooltipValue(-100);
+            expect(tooltip).toContain("USD");
+            expect(tooltip).toContain("150");
+            expect(tooltip).not.toContain("-");
+        });
+        it("should handle exchange rate unavailable", () => {
+            mockRates.USD = undefined;
+            mockStoreState.selectedCurrency = "B3";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = renderHook(() => useCurrencyConversion());
+            const tooltip = result.current.formatTooltipValue(100);
+            expect(tooltip).toContain("USD");
+            expect(tooltip).toContain("100");
+        });
+    });
+});

package/dist/esm/shared/react/hooks/index.d.ts

@@ -1 +1,2 @@
+export * from "./useCurrencyConversion";
 export * from "./useNavigation";

package/dist/esm/shared/react/hooks/index.js

@@ -1 +1,2 @@
+export * from "./useCurrencyConversion.js";
 export * from "./useNavigation.js";

package/dist/esm/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;
+};