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

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

@@ -1,8 +1,36 @@
 /**
- * Supported currencies for display and conversion.
+ * Built-in 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";
+/**
+ * Metadata for a custom currency including display formatting rules.
+ */
+export interface CurrencyMetadata {
+    /** The currency code/symbol (e.g., "BTC", "DOGE") */
+    code: string;
+    /** Display symbol for the currency (e.g., "₿", "Ð") */
+    symbol: string;
+    /** Human-readable name (e.g., "Bitcoin", "Dogecoin") */
+    name: string;
+    /** Whether to show symbol before the value (true for $100, false for 100 ETH) */
+    prefixSymbol?: boolean;
+    /** Number of decimal places to show (undefined uses smart formatting) */
+    decimals?: number;
+    /** Whether to use subscript notation for small values */
+    showSubscripts?: boolean;
+}
+/**
+ * Exchange rate between two currencies.
+ */
+export interface ExchangeRate {
+    /** Currency code being converted from */
+    from: string;
+    /** Currency code being converted to */
+    to: string;
+    /** Exchange rate multiplier (amount_in_to = amount_in_from * rate) */
+    rate: number;
+}
 /**
  * Currency symbols used for display formatting.
  * Prefix currencies (USD, EUR, GBP, CAD, AUD) show symbol before the amount.
@@ -17,24 +45,51 @@ 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 customCurrencies - Map of custom currency codes to their metadata
+ * @property customExchangeRates - Map of "FROM-TO" pairs to exchange rates
  * @property setSelectedCurrency - Update the selected display currency
  * @property setBaseCurrency - Update the base currency for conversions
+ * @property addCurrency - Register a new custom currency with metadata
+ * @property removeCurrency - Remove a custom currency
+ * @property setExchangeRate - Set a custom exchange rate between two currencies
+ * @property getExchangeRate - Get exchange rate between two currencies
+ * @property getAllCurrencies - Get all available currencies (built-in + custom)
  */
 interface CurrencyState {
-    selectedCurrency: SupportedCurrency;
-    baseCurrency: SupportedCurrency;
-    setSelectedCurrency: (currency: SupportedCurrency) => void;
-    setBaseCurrency: (currency: SupportedCurrency) => void;
+    selectedCurrency: string;
+    baseCurrency: string;
+    customCurrencies: Record<string, CurrencyMetadata>;
+    customExchangeRates: Record<string, number>;
+    setSelectedCurrency: (currency: string) => void;
+    setBaseCurrency: (currency: string) => void;
+    addCurrency: (metadata: CurrencyMetadata) => void;
+    removeCurrency: (code: string) => void;
+    setExchangeRate: (from: string, to: string, rate: number) => void;
+    getExchangeRate: (from: string, to: string) => number | undefined;
+    getAllCurrencies: () => string[];
 }
 /**
  * Zustand store for managing currency selection and conversion.
  * Persists user's selected currency preference in localStorage.
+ * Supports dynamic currency registration and custom exchange rates.
  *
  * @example
  * ```tsx
- * const { selectedCurrency, setSelectedCurrency } = useCurrencyStore();
- * // Change display currency to USD
- * setSelectedCurrency('USD');
+ * const { selectedCurrency, setSelectedCurrency, addCurrency, setExchangeRate } = useCurrencyStore();
+ *
+ * // Add a new currency
+ * addCurrency({
+ *   code: "BTC",
+ *   symbol: "₿",
+ *   name: "Bitcoin",
+ *   showSubscripts: true,
+ * });
+ *
+ * // Set exchange rate: 1 BTC = 50000 USD
+ * setExchangeRate("BTC", "USD", 50000);
+ *
+ * // Change display currency
+ * setSelectedCurrency('BTC');
  * ```
  */
 export declare const useCurrencyStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<CurrencyState>, "persist"> & {
@@ -48,4 +103,24 @@ export declare const useCurrencyStore: import("zustand").UseBoundStore<Omit<impo
         getOptions: () => Partial<import("zustand/middleware").PersistOptions<CurrencyState, CurrencyState>>;
     };
 }>;
+/**
+ * Get the symbol for any currency (built-in or custom).
+ */
+export declare function getCurrencySymbol(currency: string): string;
+/**
+ * Get the name for any currency (built-in or custom).
+ */
+export declare function getCurrencyName(currency: string): string;
+/**
+ * Get metadata for a custom currency.
+ */
+export declare function getCurrencyMetadata(currency: string): CurrencyMetadata | undefined;
+/**
+ * Get the number of decimal places for a currency (for converting from smallest unit).
+ * Used when parsing amounts from wei/smallest unit format.
+ *
+ * @param currency - Currency code
+ * @returns Number of decimal places (e.g., 18 for ETH/wei, 2 for USD cents, 0 for JPY)
+ */
+export declare function getCurrencyDecimalPlaces(currency: string): number;
 export {};

package/dist/cjs/shared/react/stores/currencyStore.js

@@ -1,6 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCurrencyStore = exports.CURRENCY_NAMES = exports.CURRENCY_SYMBOLS = void 0;
+exports.getCurrencySymbol = getCurrencySymbol;
+exports.getCurrencyName = getCurrencyName;
+exports.getCurrencyMetadata = getCurrencyMetadata;
+exports.getCurrencyDecimalPlaces = getCurrencyDecimalPlaces;
 const zustand_1 = require("zustand");
 const middleware_1 = require("zustand/middleware");
 /**
@@ -38,20 +42,158 @@ exports.CURRENCY_NAMES = {
 /**
  * Zustand store for managing currency selection and conversion.
  * Persists user's selected currency preference in localStorage.
+ * Supports dynamic currency registration and custom exchange rates.
  *
  * @example
  * ```tsx
- * const { selectedCurrency, setSelectedCurrency } = useCurrencyStore();
- * // Change display currency to USD
- * setSelectedCurrency('USD');
+ * const { selectedCurrency, setSelectedCurrency, addCurrency, setExchangeRate } = useCurrencyStore();
+ *
+ * // Add a new currency
+ * addCurrency({
+ *   code: "BTC",
+ *   symbol: "₿",
+ *   name: "Bitcoin",
+ *   showSubscripts: true,
+ * });
+ *
+ * // Set exchange rate: 1 BTC = 50000 USD
+ * setExchangeRate("BTC", "USD", 50000);
+ *
+ * // Change display currency
+ * setSelectedCurrency('BTC');
  * ```
  */
-exports.useCurrencyStore = (0, zustand_1.create)()((0, middleware_1.persist)(set => ({
+exports.useCurrencyStore = (0, zustand_1.create)()((0, middleware_1.persist)((set, get) => ({
     selectedCurrency: "B3",
     baseCurrency: "B3",
+    customCurrencies: {},
+    customExchangeRates: {},
     setSelectedCurrency: currency => set({ selectedCurrency: currency }),
     setBaseCurrency: currency => set({ baseCurrency: currency }),
+    addCurrency: metadata => {
+        set(state => ({
+            customCurrencies: {
+                ...state.customCurrencies,
+                [metadata.code]: metadata,
+            },
+        }));
+    },
+    removeCurrency: code => {
+        set(state => {
+            // Remove the currency
+            const { [code]: _removed, ...remaining } = state.customCurrencies;
+            // Remove all exchange rates involving this currency
+            const filteredRates = {};
+            for (const [key, rate] of Object.entries(state.customExchangeRates)) {
+                // Key format is "FROM-TO", skip if either matches the removed code
+                const [from, to] = key.split("-");
+                if (from !== code && to !== code) {
+                    filteredRates[key] = rate;
+                }
+            }
+            return {
+                customCurrencies: remaining,
+                customExchangeRates: filteredRates,
+            };
+        });
+    },
+    setExchangeRate: (from, to, rate) => {
+        set(state => {
+            const key = `${from}-${to}`;
+            const inverseKey = `${to}-${from}`;
+            // Only set inverse rate if rate is not 0 (to avoid Infinity)
+            const newRates = {
+                ...state.customExchangeRates,
+                [key]: rate,
+            };
+            if (rate !== 0) {
+                newRates[inverseKey] = 1 / rate;
+            }
+            return {
+                customExchangeRates: newRates,
+            };
+        });
+    },
+    getExchangeRate: (from, to) => {
+        const key = `${from}-${to}`;
+        return get().customExchangeRates[key];
+    },
+    getAllCurrencies: () => {
+        const builtIn = Object.keys(exports.CURRENCY_SYMBOLS);
+        const custom = Object.keys(get().customCurrencies);
+        return [...builtIn, ...custom];
+    },
 }), {
     name: "currency-storage",
-    version: 2,
+    version: 3,
 }));
+/**
+ * Get the symbol for any currency (built-in or custom).
+ */
+function getCurrencySymbol(currency) {
+    // Check built-in currencies first
+    if (currency in exports.CURRENCY_SYMBOLS) {
+        return exports.CURRENCY_SYMBOLS[currency];
+    }
+    // Check custom currencies
+    const customCurrencies = exports.useCurrencyStore.getState().customCurrencies;
+    const customCurrency = customCurrencies[currency];
+    if (customCurrency) {
+        return customCurrency.symbol;
+    }
+    // Fallback to currency code
+    return currency;
+}
+/**
+ * Get the name for any currency (built-in or custom).
+ */
+function getCurrencyName(currency) {
+    // Check built-in currencies first
+    if (currency in exports.CURRENCY_NAMES) {
+        return exports.CURRENCY_NAMES[currency];
+    }
+    // Check custom currencies
+    const customCurrencies = exports.useCurrencyStore.getState().customCurrencies;
+    const customCurrency = customCurrencies[currency];
+    if (customCurrency) {
+        return customCurrency.name;
+    }
+    // Fallback to currency code
+    return currency;
+}
+/**
+ * Get metadata for a custom currency.
+ */
+function getCurrencyMetadata(currency) {
+    const customCurrencies = exports.useCurrencyStore.getState().customCurrencies;
+    return customCurrencies[currency];
+}
+/**
+ * Get the number of decimal places for a currency (for converting from smallest unit).
+ * Used when parsing amounts from wei/smallest unit format.
+ *
+ * @param currency - Currency code
+ * @returns Number of decimal places (e.g., 18 for ETH/wei, 2 for USD cents, 0 for JPY)
+ */
+function getCurrencyDecimalPlaces(currency) {
+    // Check custom currencies first
+    const customCurrencies = exports.useCurrencyStore.getState().customCurrencies;
+    const customMetadata = customCurrencies[currency];
+    if (customMetadata?.decimals !== undefined) {
+        return customMetadata.decimals;
+    }
+    // Built-in currencies with 18 decimals (wei-like)
+    if (currency === "WIN" || currency === "ETH" || currency === "SOL" || currency === "B3") {
+        return 18;
+    }
+    // Fiat currencies with cent-like decimals
+    if (currency === "USD" || currency === "EUR" || currency === "GBP" || currency === "CAD" || currency === "AUD") {
+        return 2;
+    }
+    // Currencies without fractional units
+    if (currency === "JPY" || currency === "KRW") {
+        return 0;
+    }
+    // Default to 18 decimals (wei-like)
+    return 18;
+}

package/dist/esm/anyspend/react/components/common/CryptoPaymentMethod.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGlobalWalletState } from "../../../../anyspend/utils/index.js";
 import { useAccountWallet } from "../../../../global-account/react/index.js";
 import { cn } from "../../../../shared/utils/cn.js";
 import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
@@ -9,7 +10,7 @@ import { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-reac
 import { useState } from "react";
 import { createPortal } from "react-dom";
 import { toast } from "sonner";
-import { useSetActiveWallet, useWalletInfo } from "thirdweb/react";
+import { useActiveWallet, useSetActiveWallet, useWalletInfo } from "thirdweb/react";
 import { createWallet } from "thirdweb/wallets";
 import { useAccount, useConnect, useDisconnect, useWalletClient } from "wagmi";
 export var CryptoPaymentMethodType;
@@ -28,6 +29,8 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
     const [showWalletModal, setShowWalletModal] = useState(false);
     const setActiveWallet = useSetActiveWallet();
     const { data: eoaWalletInfo } = useWalletInfo(connectedEOAWallet?.id);
+    const activeWallet = useActiveWallet();
+    const setGlobalAccountWallet = useGlobalWalletState(state => state.setGlobalAccountWallet);
     const isConnected = !!connectedEOAWallet;
     const globalAddress = connectedSmartWallet?.getAccount()?.address;
     // Helper function to check if two addresses are the same
@@ -169,6 +172,7 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
     return (_jsxs("div", { className: "crypto-payment-method mx-auto h-fit w-[460px] max-w-full", children: [_jsxs("div", { className: cn("relative flex flex-col gap-10"), children: [_jsx("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: _jsx(ChevronLeft, { className: "h-6 w-6" }) }), _jsx("div", { className: "flex items-center justify-around gap-4", children: _jsx("div", { className: "flex-1 text-center", children: _jsx("h2", { className: "text-as-primary text-lg font-semibold", children: "Select a payment method" }) }) }), _jsxs("div", { className: "crypto-payment-methods flex flex-col gap-4", children: [(shouldShowConnectedEOA || shouldShowWagmiWallet || globalAddress) && (_jsxs("div", { className: "installed-wallets", children: [_jsx("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Connected wallets" }), _jsxs("div", { className: "space-y-2", children: [shouldShowConnectedEOA && (_jsx("button", { onClick: () => {
                                                     setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                                                     onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                                                    setGlobalAccountWallet(activeWallet);
                                                     setActiveWallet(connectedEOAWallet);
                                                     toast.success(`Selected ${eoaWalletInfo?.name || connector?.name || "wallet"}`);
                                                 }, className: cn("crypto-payment-method-connect-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET

package/dist/esm/anyspend/utils/accountStore.d.ts

@@ -0,0 +1,7 @@
+import type { Wallet } from "thirdweb/wallets";
+interface GlobalWalletState {
+    globalAccountWallet?: Wallet;
+    setGlobalAccountWallet: (account?: Wallet) => void;
+}
+export declare const useGlobalWalletState: import("zustand").UseBoundStore<import("zustand").StoreApi<GlobalWalletState>>;
+export {};

package/dist/esm/anyspend/utils/accountStore.js

@@ -0,0 +1,5 @@
+import { create } from "zustand";
+export const useGlobalWalletState = create(set => ({
+    globalAccountWallet: undefined,
+    setGlobalAccountWallet: account => set({ globalAccountWallet: account }),
+}));

package/dist/esm/anyspend/utils/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./accountStore";
 export * from "./address";
 export * from "./chain";
 export * from "./format";

package/dist/esm/anyspend/utils/index.js

@@ -1,3 +1,4 @@
+export * from "./accountStore.js";
 export * from "./address.js";
 export * from "./chain.js";
 export * from "./format.js";

package/dist/esm/global-account/react/components/B3DynamicModal.js

@@ -2,9 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AnySpend, AnySpendBondKit, AnySpendBuySpin, AnySpendNFT, AnyspendSignatureMint, AnySpendStakeB3, AnySpendTournament, OrderHistory, } from "../../../anyspend/react/index.js";
 import { AnySpendDepositHype } from "../../../anyspend/react/components/AnyspendDepositHype.js";
 import { AnySpendStakeUpside } from "../../../anyspend/react/components/AnySpendStakeUpside.js";
+import { useGlobalWalletState } from "../../../anyspend/utils/index.js";
 import { useIsMobile, useModalStore } from "../../../global-account/react/index.js";
 import { cn } from "../../../shared/utils/cn.js";
 import { debugB3React } from "../../../shared/utils/debug.js";
+import { useEffect, useRef } from "react";
 import { AvatarEditor } from "./AvatarEditor/AvatarEditor.js";
 import { useB3 } from "./B3Provider/useB3.js";
 import { LinkAccount } from "./LinkAccount/LinkAccount.js";
@@ -13,11 +15,26 @@ import { RequestPermissions } from "./RequestPermissions/RequestPermissions.js";
 import { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow.js";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./ui/dialog.js";
 import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from "./ui/drawer.js";
+import { useSetActiveWallet } from "thirdweb/react";
 const debug = debugB3React("B3DynamicModal");
 export function B3DynamicModal() {
     const { isOpen, setB3ModalOpen, contentType, history, navigateBack } = useModalStore();
     const { theme } = useB3();
     const isMobile = useIsMobile();
+    const prevIsOpenRef = useRef(isOpen);
+    const globalAccountWallet = useGlobalWalletState(state => state.globalAccountWallet);
+    const setGlobalAccountWallet = useGlobalWalletState(state => state.setGlobalAccountWallet);
+    const setActiveWallet = useSetActiveWallet();
+    // anyspend cleanup global account chnages by setting account back
+    useEffect(() => {
+        if (prevIsOpenRef.current && !isOpen) {
+            if (globalAccountWallet) {
+                setActiveWallet(globalAccountWallet);
+                setGlobalAccountWallet(undefined);
+            }
+        }
+        prevIsOpenRef.current = isOpen;
+    }, [isOpen, globalAccountWallet, setActiveWallet, setGlobalAccountWallet]);
     // Define arrays for different modal type groups
     const fullWidthTypes = [
         "anySpend",

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

@@ -1,11 +1,16 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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"];
+import { CURRENCY_NAMES, CURRENCY_SYMBOLS, useCurrencyStore, getCurrencyName, getCurrencySymbol, } from "../stores/currencyStore.js";
+const builtInCurrencies = ["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))) })] }) }));
+    const selectedCurrency = useCurrencyStore(state => state.selectedCurrency);
+    const setSelectedCurrency = useCurrencyStore(state => state.setSelectedCurrency);
+    const customCurrencies = useCurrencyStore(state => state.customCurrencies);
+    // Separate built-in and custom for better organization
+    const customCurrencyCodes = Object.keys(customCurrencies);
+    const hasCustomCurrencies = customCurrencyCodes.length > 0;
+    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: getCurrencyName(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" }) })] })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "z-[100] min-w-[200px]", children: [builtInCurrencies.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))), hasCustomCurrencies && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, { className: "bg-border my-1" }), customCurrencyCodes.map(currency => (_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: getCurrencyName(currency) }), _jsx("span", { className: "text-muted-foreground text-xs font-medium", children: getCurrencySymbol(currency) })] }, currency)))] }))] })] }) }));
 }

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

@@ -1,12 +1,12 @@
 interface FormattedCurrencyProps {
-    amount: number;
+    amount: string;
+    sourceCurrency: string;
     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 declare function FormattedCurrency({ amount, sourceCurrency, showChange, showColor, className, subB3Icon, clickable, decimals, }: FormattedCurrencyProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,21 +5,30 @@ 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, }) {
+import { getCurrencyDecimalPlaces } from "../stores/currencyStore.js";
+export function FormattedCurrency({ amount, sourceCurrency, showChange = false, showColor = false, className, subB3Icon = true, clickable = true, decimals, }) {
     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,
-    });
+    // Convert from smallest unit to human-readable using currency's decimal places
+    const decimalPlaces = getCurrencyDecimalPlaces(sourceCurrency);
+    const divisor = Math.pow(10, decimalPlaces);
+    // Parse amount - handle both string and numeric inputs, including negatives
+    let parsedAmount;
+    if (typeof amount === "string") {
+        // Handle BigInt strings and negative values
+        const numericAmount = amount.startsWith("-") ? -Math.abs(parseFloat(amount.replace("-", ""))) : parseFloat(amount);
+        parsedAmount = numericAmount / divisor;
+    }
+    else {
+        parsedAmount = amount / divisor;
+    }
+    const isPositive = parsedAmount >= 0;
+    // Always format with absolute value, we'll add the sign separately
+    const absoluteAmount = Math.abs(parsedAmount);
+    // Format value with automatic conversion from source to display currency
+    const formattedValue = formatCurrencyValue(absoluteAmount, sourceCurrency, { decimals });
     // Generate tooltip using the centralized hook function
-    const baseTooltipValue = formatTooltipValue(amount, currency);
+    const baseTooltipValue = formatTooltipValue(parsedAmount, sourceCurrency);
     // Add change indicator if needed
     const tooltipValue = showChange ? `${isPositive ? "+" : "-"}${baseTooltipValue}` : baseTooltipValue;
     // Determine color class
@@ -32,26 +41,22 @@ export function FormattedCurrency({ amount, showChange = false, showColor = fals
             colorClass = "text-red-400";
         }
     }
-    // Add change indicator
+    // Build display value with appropriate sign
     let displayValue = formattedValue;
     if (showChange) {
-        if (isPositive) {
-            displayValue = `+${formattedValue}`;
-        }
-        else {
-            displayValue = `-${formattedValue}`;
-        }
+        // Add +/- prefix for change indicators
+        displayValue = `${isPositive ? "+" : "-"}${formattedValue}`;
+    }
+    else if (!isPositive) {
+        // Add minus sign for negative values
+        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 })] }));
+    // Check if we should show B3 icon (when displaying in B3 and baseCurrency is B3)
+    const shouldShowB3Icon = subB3Icon && selectedCurrency === "B3" && baseCurrency === "B3";
+    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: [shouldShowB3Icon ? displayValue.split(" ")[0] : displayValue, shouldShowB3Icon && (_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/hooks/useCurrencyConversion.d.ts

@@ -16,20 +16,23 @@
  */
 export declare function useCurrencyConversion(): {
     /** Currently selected display currency */
-    selectedCurrency: import("../stores/currencyStore").SupportedCurrency;
+    selectedCurrency: string;
     /** Base currency used for conversion (typically B3) */
-    baseCurrency: import("../stores/currencyStore").SupportedCurrency;
+    baseCurrency: string;
     /** Current exchange rate from base to selected currency (undefined while loading) */
     exchangeRate: number | undefined;
     /** Format a value with currency conversion and proper symbol/decimal handling */
-    formatCurrencyValue: (value: number, options?: {
+    formatCurrencyValue: (value: number, sourceCurrency: string, options?: {
         decimals?: number;
-        currency?: string;
     }) => string;
     /** Format a tooltip value showing alternate currency representation */
-    formatTooltipValue: (value: number, customCurrency?: string) => string;
+    formatTooltipValue: (value: number, sourceCurrency: string) => string;
     /** Symbol for the currently selected currency (e.g., "$", "€", "ETH") */
     selectedCurrencySymbol: string;
     /** Symbol for the base currency */
     baseCurrencySymbol: string;
+    /** Get exchange rate between any two currencies */
+    getExchangeRate: (from: string, to: string) => number | undefined;
+    /** All registered custom currencies */
+    customCurrencies: Record<string, import("../stores/currencyStore").CurrencyMetadata>;
 };