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

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

@@ -0,0 +1,51 @@
+/**
+ * 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";
+/**
+ * Currency symbols used for display formatting.
+ * Prefix currencies (USD, EUR, GBP, CAD, AUD) show symbol before the amount.
+ * Suffix currencies (JPY, KRW, ETH, SOL, B3) show symbol after the amount.
+ */
+export declare const CURRENCY_SYMBOLS: Record<SupportedCurrency, string>;
+/**
+ * Human-readable currency names for display in selectors and labels.
+ */
+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 setSelectedCurrency - Update the selected display currency
+ * @property setBaseCurrency - Update the base currency for conversions
+ */
+interface CurrencyState {
+    selectedCurrency: SupportedCurrency;
+    baseCurrency: SupportedCurrency;
+    setSelectedCurrency: (currency: SupportedCurrency) => void;
+    setBaseCurrency: (currency: SupportedCurrency) => void;
+}
+/**
+ * Zustand store for managing currency selection and conversion.
+ * Persists user's selected currency preference in localStorage.
+ *
+ * @example
+ * ```tsx
+ * const { selectedCurrency, setSelectedCurrency } = useCurrencyStore();
+ * // Change display currency to USD
+ * setSelectedCurrency('USD');
+ * ```
+ */
+export declare const useCurrencyStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<CurrencyState>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<CurrencyState, CurrencyState>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: CurrencyState) => void) => () => void;
+        onFinishHydration: (fn: (state: CurrencyState) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<CurrencyState, CurrencyState>>;
+    };
+}>;
+export {};

package/dist/types/shared/react/stores/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./currencyModalStore";
+export * from "./currencyStore";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.42-alpha.2",
+  "version": "0.0.42-alpha.3",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",
@@ -205,6 +205,26 @@
       "import": "./dist/esm/shared/thirdweb/*.js",
       "require": "./dist/cjs/shared/thirdweb/*.js"
     },
+    "./shared/react": {
+      "types": "./dist/types/shared/react/index.d.ts",
+      "import": "./dist/esm/shared/react/index.js",
+      "require": "./dist/cjs/shared/react/index.js"
+    },
+    "./shared/react/components": {
+      "types": "./dist/types/shared/react/components/index.d.ts",
+      "import": "./dist/esm/shared/react/components/index.js",
+      "require": "./dist/cjs/shared/react/components/index.js"
+    },
+    "./shared/react/hooks": {
+      "types": "./dist/types/shared/react/hooks/index.d.ts",
+      "import": "./dist/esm/shared/react/hooks/index.js",
+      "require": "./dist/cjs/shared/react/hooks/index.js"
+    },
+    "./shared/react/stores": {
+      "types": "./dist/types/shared/react/stores/index.d.ts",
+      "import": "./dist/esm/shared/react/stores/index.js",
+      "require": "./dist/cjs/shared/react/stores/index.js"
+    },
     "./types/chain-networks": {
       "types": "./dist/types/generated/chain-networks.d.ts",
       "import": "./dist/esm/generated/chain-networks.js",
@@ -289,6 +309,8 @@
     "@feathersjs/feathers": "5.0.33",
     "@feathersjs/socketio-client": "5.0.33",
     "@feathersjs/typebox": "5.0.33",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/big.js": "^6.2.2",
     "@types/invariant": "2.2.37",
     "@types/js-cookie": "3.0.6",
@@ -304,6 +326,7 @@
     "eslint-plugin-import": "2.x.x",
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-tailwindcss": "3.18.0",
+    "happy-dom": "^19.0.2",
     "postcss": "8.5.3",
     "postcss-cli": "11.0.1",
     "postcss-nesting": "^13.0.2",
@@ -311,7 +334,8 @@
     "tailwindcss": "3.4.1",
     "tailwindcss-animate": "^1.0.7",
     "tsc-alias": "^1.8.16",
-    "tsc-watch": "^7.1.1"
+    "tsc-watch": "^7.1.1",
+    "vitest": "^3.2.4"
   },
   "typesVersions": {
     "*": {
@@ -367,6 +391,8 @@
     "typecheck": "tsc --noEmit",
     "generate:thirdweb": "npx @hey-api/openapi-ts --file src/thirdweb/openapi-ts.config.ts --input src/thirdweb/insight-service.json",
     "lint": "eslint 'src/**/*.{ts,tsx}'",
-    "lint:fix": "eslint 'src/**/*.{ts,tsx}' --fix"
+    "lint:fix": "eslint 'src/**/*.{ts,tsx}' --fix",
+    "test": "vitest run",
+    "test:ui": "vitest --ui"
   }
 }

package/src/global-account/react/components/index.ts

@@ -7,12 +7,12 @@ export { useB3 } from "./B3Provider/useB3";
 export { StyleRoot } from "./StyleRoot";
 
 // SignInWithB3 Components
-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";
 
@@ -43,15 +43,6 @@ export { StaggeredFadeLoader } from "./custom/StaggeredFadeLoader";
 export { WalletConnectorIcon } from "./custom/WalletConnectorIcon";
 
 // UI Components
-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 {
@@ -89,12 +80,28 @@ export {
   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/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/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";