@b3dotfun/sdk 0.0.42 → 0.0.43-alpha.1

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

@@ -123,11 +123,13 @@ export interface AnySpendModalProps extends BaseModalProps {
   /** Whether to hide the transaction history button */
   hideTransactionHistoryButton?: boolean;
   /** Callback function called when the transaction is successful */
-  onSuccess?: () => void;
+  onSuccess?: (txHash?: string) => void;
   /** Token address of the destination token to buy (enables buy mode) */
   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>
+  );
+}

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

@@ -0,0 +1,106 @@
+"use client";
+
+import { B3_COIN_IMAGE_URL } from "@b3dotfun/sdk/shared/constants/currency";
+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";
+
+interface FormattedCurrencyProps {
+  amount: number;
+  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,
+  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;
+
+  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 (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span
+          onClick={handleClick}
+          className={cn(
+            "inline-flex items-center gap-1 whitespace-nowrap",
+            colorClass,
+            className,
+            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" />
+            )}
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>{tooltipValue}</TooltipContent>
+    </Tooltip>
+  );
+}

package/src/shared/react/components/index.ts

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

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

@@ -0,0 +1,308 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { useCurrencyConversion } from "../useCurrencyConversion";
+
+// Mock the external dependencies
+// Store mock rates for different quote currencies
+const mockRates: Record<string, number | undefined> = {};
+
+// Mock store state
+const mockStoreState: any = {
+  selectedCurrency: "B3",
+  baseCurrency: "B3",
+  setSelectedCurrency: vi.fn(),
+  setBaseCurrency: vi.fn(),
+};
+
+vi.mock("@b3dotfun/sdk/global-account/react", () => ({
+  useExchangeRate: vi.fn((params: any) => {
+    const rate = mockRates[params?.quoteCurrency];
+    return { rate };
+  }),
+}));
+
+vi.mock("@b3dotfun/sdk/shared/utils/number", () => ({
+  formatDisplayNumber: vi.fn((value: any) => {
+    const num = Number(value);
+    if (isNaN(num)) return "0";
+    return num.toLocaleString("en-US", { maximumFractionDigits: 6 });
+  }),
+}));
+
+vi.mock("../../stores/currencyStore", () => ({
+  useCurrencyStore: vi.fn((selector: any) => {
+    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/src/shared/react/hooks/index.ts

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