@b3dotfun/sdk 0.0.58 → 0.0.59-alpha.0

package/src/anyspend/react/components/common/CryptoPaymentMethod.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useGlobalWalletState } from "@b3dotfun/sdk/anyspend/utils";
 import { useAccountWallet } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
@@ -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 { WalletId, createWallet } from "thirdweb/wallets";
 import { useAccount, useConnect, useDisconnect, useWalletClient } from "wagmi";
 
@@ -51,10 +52,12 @@ export function CryptoPaymentMethod({
   const { disconnect } = useDisconnect();
   const { data: walletClient } = useWalletClient();
   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;
 
@@ -233,6 +236,7 @@ export function CryptoPaymentMethod({
                     onClick={() => {
                       setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                       onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                      setGlobalAccountWallet(activeWallet);
                       setActiveWallet(connectedEOAWallet);
                       toast.success(`Selected ${eoaWalletInfo?.name || connector?.name || "wallet"}`);
                     }}

package/src/anyspend/utils/accountStore.ts

@@ -0,0 +1,12 @@
+import type { Wallet } from "thirdweb/wallets";
+import { create } from "zustand";
+
+interface GlobalWalletState {
+  globalAccountWallet?: Wallet;
+  setGlobalAccountWallet: (account?: Wallet) => void;
+}
+
+export const useGlobalWalletState = create<GlobalWalletState>(set => ({
+  globalAccountWallet: undefined,
+  setGlobalAccountWallet: account => set({ globalAccountWallet: account }),
+}));

package/src/anyspend/utils/index.ts

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

package/src/global-account/react/components/B3DynamicModal.tsx

@@ -10,9 +10,11 @@ import {
 } from "@b3dotfun/sdk/anyspend/react";
 import { AnySpendDepositHype } from "@b3dotfun/sdk/anyspend/react/components/AnyspendDepositHype";
 import { AnySpendStakeUpside } from "@b3dotfun/sdk/anyspend/react/components/AnySpendStakeUpside";
+import { useGlobalWalletState } from "@b3dotfun/sdk/anyspend/utils";
 import { useIsMobile, useModalStore } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { useEffect, useRef } from "react";
 import { AvatarEditor } from "./AvatarEditor/AvatarEditor";
 import { useB3 } from "./B3Provider/useB3";
 import { LinkAccount } from "./LinkAccount/LinkAccount";
@@ -21,6 +23,7 @@ import { RequestPermissions } from "./RequestPermissions/RequestPermissions";
 import { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./ui/dialog";
 import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from "./ui/drawer";
+import { useSetActiveWallet } from "thirdweb/react";
 
 const debug = debugB3React("B3DynamicModal");
 
@@ -28,6 +31,23 @@ 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 = [

package/src/global-account/react/hooks/useWagmiConfig.tsx

@@ -1,6 +1,7 @@
 import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
 import { supportedChains } from "@b3dotfun/sdk/shared/constants/chains/supported";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import { farcasterMiniApp as miniAppConnector } from "@farcaster/miniapp-wagmi-connector";
 import { inAppWalletConnector } from "@thirdweb-dev/wagmi-adapter";
 import { useMemo } from "react";
 import { http } from "viem";
@@ -34,6 +35,7 @@ export function useWagmiConfig(partnerId: string, rpcUrls?: Record<number, strin
           ...ecocystemConfig,
           client,
         }),
+        miniAppConnector(),
         // injected(),
         // coinbaseWallet({ appName: "HypeDuel" }),
       ],

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