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

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

package/dist/types/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.58-alpha.1",
+  "version": "0.0.58-alpha.2",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

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

@@ -9,9 +9,16 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "../../../global-account/react/components/ui/dropdown-menu";
-import { CURRENCY_NAMES, CURRENCY_SYMBOLS, SupportedCurrency, useCurrencyStore } from "../stores/currencyStore";
+import {
+  CURRENCY_NAMES,
+  CURRENCY_SYMBOLS,
+  SupportedCurrency,
+  useCurrencyStore,
+  getCurrencyName,
+  getCurrencySymbol,
+} from "../stores/currencyStore";
 
-const currencies: SupportedCurrency[] = ["B3", "ETH", "SOL", "USD", "EUR", "GBP", "KRW", "JPY", "CAD", "AUD"];
+const builtInCurrencies: SupportedCurrency[] = ["B3", "ETH", "SOL", "USD", "EUR", "GBP", "KRW", "JPY", "CAD", "AUD"];
 
 interface CurrencySelectorProps {
   labelClassName?: string;
@@ -20,7 +27,13 @@ interface CurrencySelectorProps {
 }
 
 export function CurrencySelector({ labelClassName, buttonVariant = "dark", label }: CurrencySelectorProps) {
-  const { selectedCurrency, setSelectedCurrency } = useCurrencyStore();
+  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 (
     <div className="flex items-center gap-2">
@@ -38,7 +51,7 @@ export function CurrencySelector({ labelClassName, buttonVariant = "dark", label
               </span>
             )}
             <Button variant={buttonVariant as any} className="flex items-center gap-2">
-              <span className="text-sm font-medium">{CURRENCY_NAMES[selectedCurrency]}</span>
+              <span className="text-sm font-medium">{getCurrencyName(selectedCurrency)}</span>
               <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                 <path
                   fillRule="evenodd"
@@ -50,7 +63,7 @@ export function CurrencySelector({ labelClassName, buttonVariant = "dark", label
           </div>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="z-[100] min-w-[200px]">
-          {currencies.map(currency => (
+          {builtInCurrencies.map(currency => (
             <div key={currency}>
               <DropdownMenuItem
                 onClick={() => setSelectedCurrency(currency)}
@@ -64,6 +77,24 @@ export function CurrencySelector({ labelClassName, buttonVariant = "dark", label
               {currency === "SOL" && <DropdownMenuSeparator key="separator" className="bg-border my-1" />}
             </div>
           ))}
+
+          {hasCustomCurrencies && (
+            <>
+              <DropdownMenuSeparator className="bg-border my-1" />
+              {customCurrencyCodes.map(currency => (
+                <DropdownMenuItem
+                  key={currency}
+                  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">{getCurrencyName(currency)}</span>
+                  <span className="text-muted-foreground text-xs font-medium">{getCurrencySymbol(currency)}</span>
+                </DropdownMenuItem>
+              ))}
+            </>
+          )}
         </DropdownMenuContent>
       </DropdownMenu>
     </div>

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

@@ -5,47 +5,56 @@ import { cn } from "@b3dotfun/sdk/shared/utils";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../../global-account/react/components/ui/tooltip";
 import { useCurrencyConversion } from "../hooks/useCurrencyConversion";
 import { useCurrencyModalStore } from "../stores/currencyModalStore";
+import { getCurrencyDecimalPlaces } from "../stores/currencyStore";
 
 interface FormattedCurrencyProps {
-  amount: number;
+  amount: string; // Wei amount as string (will be divided by 1e18)
+  sourceCurrency: string; // The currency the amount is in (e.g., "WIN", "B3", "USD")
   showChange?: boolean;
   showColor?: boolean;
   className?: string;
   subB3Icon?: boolean;
   clickable?: boolean;
   decimals?: number;
-  currency?: string; // Override currency (e.g., "ETH", "USDC", "B3")
 }
 
 export function FormattedCurrency({
   amount,
+  sourceCurrency,
   showChange = false,
   showColor = false,
   className,
   subB3Icon = true,
   clickable = true,
   decimals,
-  currency,
 }: FormattedCurrencyProps) {
   const { formatCurrencyValue, formatTooltipValue, selectedCurrency, baseCurrency } = useCurrencyConversion();
   const { openModal } = useCurrencyModalStore();
 
-  // Use passed currency or fall back to selected currency
-  const activeCurrency = currency || selectedCurrency;
+  // Convert from smallest unit to human-readable using currency's decimal places
+  const decimalPlaces = getCurrencyDecimalPlaces(sourceCurrency);
+  const divisor = Math.pow(10, decimalPlaces);
 
-  const isPositive = amount >= 0;
+  // Parse amount - handle both string and numeric inputs, including negatives
+  let parsedAmount: number;
+  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;
 
-  // Get the formatted value (using absolute value for negative numbers when showing change)
-  const baseAmount = showChange ? Math.abs(amount) : amount;
+  // Always format with absolute value, we'll add the sign separately
+  const absoluteAmount = Math.abs(parsedAmount);
 
-  // Use centralized formatting from hook with optional overrides
-  const formattedValue = formatCurrencyValue(baseAmount, {
-    decimals,
-    currency,
-  });
+  // 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;
@@ -60,14 +69,14 @@ export function FormattedCurrency({
     }
   }
 
-  // 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 = () => {
@@ -76,6 +85,9 @@ export function FormattedCurrency({
     }
   };
 
+  // Check if we should show B3 icon (when displaying in B3 and baseCurrency is B3)
+  const shouldShowB3Icon = subB3Icon && selectedCurrency === "B3" && baseCurrency === "B3";
+
   return (
     <Tooltip>
       <TooltipTrigger asChild>
@@ -88,16 +100,10 @@ export function FormattedCurrency({
             clickable && "cursor-pointer transition-opacity hover:opacity-80",
           )}
         >
-          {subB3Icon &&
-          (currency === baseCurrency || (!currency && activeCurrency === baseCurrency)) &&
-          baseCurrency === "B3"
-            ? displayValue.split(" ")[0]
-            : displayValue}
-          {subB3Icon &&
-            (currency === baseCurrency || (!currency && activeCurrency === baseCurrency)) &&
-            baseCurrency === "B3" && (
-              <img src={B3_COIN_IMAGE_URL} className="inline-block h-4 w-4 align-middle" alt="B3 coin" />
-            )}
+          {shouldShowB3Icon ? displayValue.split(" ")[0] : displayValue}
+          {shouldShowB3Icon && (
+            <img src={B3_COIN_IMAGE_URL} className="inline-block h-4 w-4 align-middle" alt="B3 coin" />
+          )}
         </span>
       </TooltipTrigger>
       <TooltipContent>{tooltipValue}</TooltipContent>

package/src/shared/react/hooks/__tests__/useCurrencyConversion.test.ts

@@ -67,7 +67,7 @@ describe("useCurrencyConversion", () => {
       mockStoreState.baseCurrency = "B3";
 
       const { result } = renderHook(() => useCurrencyConversion());
-      const formatted = result.current.formatCurrencyValue(100);
+      const formatted = result.current.formatCurrencyValue(100, "B3");
 
       expect(formatted).toContain("B3");
       expect(formatted).toContain("100");
@@ -79,7 +79,7 @@ describe("useCurrencyConversion", () => {
       mockStoreState.baseCurrency = "B3";
 
       const { result } = renderHook(() => useCurrencyConversion());
-      const formatted = result.current.formatCurrencyValue(100);
+      const formatted = result.current.formatCurrencyValue(100, "B3");
 
       expect(formatted).toContain("B3");
       expect(formatted).not.toContain("$");
@@ -91,7 +91,7 @@ describe("useCurrencyConversion", () => {
       mockStoreState.baseCurrency = "B3";
 
       const { result } = renderHook(() => useCurrencyConversion());
-      const formatted = result.current.formatCurrencyValue(100);
+      const formatted = result.current.formatCurrencyValue(100, "B3");
 
       expect(formatted).toMatch(/^\$/);
       expect(formatted).toContain("200");
@@ -104,7 +104,7 @@ describe("useCurrencyConversion", () => {
       mockStoreState.baseCurrency = "B3";
 
       const { result } = renderHook(() => useCurrencyConversion());
-      const formatted = result.current.formatCurrencyValue(100);
+      const formatted = result.current.formatCurrencyValue(100, "B3");
 
       expect(formatted).toMatch(/^€/);
     });
@@ -116,7 +116,7 @@ describe("useCurrencyConversion", () => {
       mockStoreState.baseCurrency = "B3";
 
       const { result } = renderHook(() => useCurrencyConversion());
-      const formatted = result.current.formatCurrencyValue(100);
+      const formatted = result.current.formatCurrencyValue(100, "B3");
 
       expect(formatted).toContain("¥");
       expect(formatted).not.toContain(".");
@@ -129,7 +129,7 @@ describe("useCurrencyConversion", () => {
       mockStoreState.baseCurrency = "B3";
 
       const { result } = renderHook(() => useCurrencyConversion());
-      const formatted = result.current.formatCurrencyValue(100);
+      const formatted = result.current.formatCurrencyValue(100, "B3");
 
       expect(formatted).toContain("₩");
       expect(formatted).not.toContain(".");
@@ -142,7 +142,7 @@ describe("useCurrencyConversion", () => {
       mockStoreState.baseCurrency = "B3";
 
       const { result } = renderHook(() => useCurrencyConversion());
-      const formatted = result.current.formatCurrencyValue(100);
+      const formatted = result.current.formatCurrencyValue(100, "B3");
 
       expect(formatted).toContain("ETH");
       expect(formatted).not.toMatch(/^ETH/);
@@ -155,7 +155,7 @@ describe("useCurrencyConversion", () => {
       mockStoreState.baseCurrency = "B3";
 
       const { result } = renderHook(() => useCurrencyConversion());
-      const formatted = result.current.formatCurrencyValue(100);
+      const formatted = result.current.formatCurrencyValue(100, "B3");
 
       expect(formatted).toContain("SOL");
       expect(formatted).not.toMatch(/^SOL/);
@@ -167,7 +167,7 @@ describe("useCurrencyConversion", () => {
       mockStoreState.baseCurrency = "B3";
 
       const { result } = renderHook(() => useCurrencyConversion());
-      const formatted = result.current.formatCurrencyValue(10);
+      const formatted = result.current.formatCurrencyValue(10, "B3");
 
       // 10 * 1.5 = 15
       expect(formatted).toMatch(/^\$/);
@@ -182,7 +182,7 @@ describe("useCurrencyConversion", () => {
 
       const { result } = renderHook(() => useCurrencyConversion());
       const inputValue = 100;
-      const formatted = result.current.formatCurrencyValue(inputValue);
+      const formatted = result.current.formatCurrencyValue(inputValue, "B3");
 
       expect(formatted).toContain("350");
     });
@@ -236,7 +236,7 @@ describe("useCurrencyConversion", () => {
       mockStoreState.baseCurrency = "B3";
 
       const { result } = renderHook(() => useCurrencyConversion());
-      const tooltip = result.current.formatTooltipValue(100);
+      const tooltip = result.current.formatTooltipValue(100, "B3");
 
       expect(tooltip).toContain("USD");
       expect(tooltip).toContain("150");
@@ -249,7 +249,7 @@ describe("useCurrencyConversion", () => {
       mockStoreState.baseCurrency = "B3";
 
       const { result } = renderHook(() => useCurrencyConversion());
-      const tooltip = result.current.formatTooltipValue(100);
+      const tooltip = result.current.formatTooltipValue(100, "B3");
 
       expect(tooltip).toContain("B3");
       expect(tooltip).toContain("100");
@@ -286,7 +286,7 @@ describe("useCurrencyConversion", () => {
       mockStoreState.baseCurrency = "B3";
 
       const { result } = renderHook(() => useCurrencyConversion());
-      const tooltip = result.current.formatTooltipValue(-100);
+      const tooltip = result.current.formatTooltipValue(-100, "B3");
 
       expect(tooltip).toContain("USD");
       expect(tooltip).toContain("150");
@@ -299,7 +299,7 @@ describe("useCurrencyConversion", () => {
       mockStoreState.baseCurrency = "B3";
 
       const { result } = renderHook(() => useCurrencyConversion());
-      const tooltip = result.current.formatTooltipValue(100);
+      const tooltip = result.current.formatTooltipValue(100, "B3");
 
       expect(tooltip).toContain("USD");
       expect(tooltip).toContain("100");