@b3dotfun/sdk 0.0.42 → 0.0.43-alpha.0

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";