@b3dotfun/sdk 0.0.81 → 0.0.82-alpha.1

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

@@ -4,13 +4,9 @@ import { toast, useAccountWallet, WalletImage } from "@b3dotfun/sdk/global-accou
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
-import { WalletCoinbase, WalletMetamask, WalletRainbow, WalletWalletConnect } from "@web3icons/react";
 import { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-react";
-import { useState } from "react";
-import { createPortal } from "react-dom";
-import { useSetActiveWallet, useWalletInfo } from "thirdweb/react";
-import { createWallet, WalletId } from "thirdweb/wallets";
-import { useAccount, useConnect, useDisconnect, useWalletClient } from "wagmi";
+import { useConnectModal, useSetActiveWallet, useWalletInfo } from "thirdweb/react";
+import { useAccount, useDisconnect } from "wagmi";
 import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay";
 
 export enum CryptoPaymentMethodType {
@@ -37,126 +33,28 @@ export function CryptoPaymentMethod({
 }: CryptoPaymentMethodProps) {
   const { connectedEOAWallet: connectedEOAWallet, connectedSmartWallet: connectedSmartWallet } = useAccountWallet();
   const { connector, address } = useAccount();
-  const { connect, connectors, isPending } = useConnect();
   const { disconnect } = useDisconnect();
-  const { data: walletClient } = useWalletClient();
-  const [showWalletModal, setShowWalletModal] = useState(false);
+  const { connect: openConnectModal } = useConnectModal();
   const setActiveWallet = useSetActiveWallet();
   const { data: eoaWalletInfo } = useWalletInfo(connectedEOAWallet?.id);
 
-  const isConnected = !!connectedEOAWallet;
   const globalAddress = connectedSmartWallet?.getAccount()?.address;
 
   // Use custom hook to determine wallet display logic
   const { shouldShowConnectedEOA, shouldShowWagmiWallet } = useConnectedWalletDisplay(selectedPaymentMethod);
-  console.log("shouldShowWagmiWallet :", shouldShowWagmiWallet);
 
-  // Map wagmi connector names to thirdweb wallet IDs
-  const getThirdwebWalletId = (connectorName: string): WalletId | null => {
-    const walletMap: Record<string, WalletId> = {
-      MetaMask: "io.metamask",
-      "Coinbase Wallet": "com.coinbase.wallet",
-      Rainbow: "me.rainbow",
-      WalletConnect: "walletConnect",
-      Phantom: "app.phantom",
-    };
-    return walletMap[connectorName] || null;
-  };
-
-  // Create thirdweb wallet from wagmi connector
-  const createThirdwebWalletFromConnector = async (connectorName: string) => {
-    const walletId = getThirdwebWalletId(connectorName);
-    if (!walletId) {
-      console.warn(`No thirdweb wallet ID found for connector: ${connectorName}`);
-      return null;
-    }
-
-    try {
-      const thirdwebWallet = createWallet(walletId);
-      // Connect the wallet to sync with the existing wagmi connection
-      await thirdwebWallet.connect({ client });
-      return thirdwebWallet;
-    } catch (error) {
-      console.error(`Failed to create thirdweb wallet for ${connectorName}:`, error);
-      return null;
-    }
-  };
-
-  // Define available wallet connectors
-  const availableConnectors = connectors.filter(connector =>
-    ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow", "Phantom"].includes(connector.name),
-  );
-
-  // Define wallet options with icons and info
-  const walletOptions = [
-    {
-      id: "metamask",
-      name: "MetaMask",
-      icon: <WalletMetamask size={48} />,
-      description: "Connect using MetaMask browser extension",
-      connector: availableConnectors.find(c => c.name === "MetaMask"),
-    },
-    {
-      id: "coinbase",
-      name: "Coinbase Wallet",
-      icon: <WalletCoinbase size={48} />,
-      description: "Connect using Coinbase Wallet",
-      connector: availableConnectors.find(c => c.name === "Coinbase Wallet"),
-    },
-    {
-      id: "rainbow",
-      name: "Rainbow",
-      icon: <WalletRainbow size={48} />,
-      description: "Connect using Rainbow wallet",
-      connector: availableConnectors.find(c => c.name === "Rainbow"),
-    },
-    {
-      id: "walletconnect",
-      name: "WalletConnect",
-      icon: <WalletWalletConnect size={48} />,
-      description: "Connect using WalletConnect protocol",
-      connector: availableConnectors.find(c => c.name === "WalletConnect"),
-    },
-  ].filter(wallet => wallet.connector); // Only show wallets that have available connectors
-
-  // Reset modal state when closing
-  const handleCloseModal = () => {
-    setShowWalletModal(false);
-  };
-
-  // Function to request wallet permissions for specific wallet
-  const requestWalletPermissions = async (walletConnector?: any) => {
+  // Handle wallet connection using thirdweb modal
+  const handleConnectWallet = async () => {
     try {
-      // If a specific wallet connector is provided and it's different from current
-      if (walletConnector && connector?.name !== walletConnector.name) {
-        // Disconnect current and connect to the selected wallet
-        // if (isConnected) {
-        //   disconnect();
-        //   // Small delay to ensure disconnection
-        //   await new Promise(resolve => setTimeout(resolve, 100));
-        // }
-        await connect({ connector: walletConnector });
-        setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-        onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-        toast.success(`Connected to ${walletConnector.name}`);
-        return;
-      }
-
-      // If same wallet or no specific wallet, request permissions for account switching
-      if (walletClient && "request" in walletClient) {
-        await walletClient.request({
-          method: "wallet_requestPermissions",
-          params: [{ eth_accounts: {} }],
-        });
-        toast.success("Account selection completed");
+      const wallet = await openConnectModal({ client, setActive: false });
+      if (wallet) {
+        // setActiveWallet(wallet);
         setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
         onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-      } else {
-        // Fallback: show modal for manual wallet selection
-        setShowWalletModal(true);
+        toast.success("Wallet connected");
       }
     } catch (error) {
-      console.error("Failed to request wallet permissions:", error);
+      console.error("Failed to connect wallet:", error);
       if (error && typeof error === "object" && "message" in error) {
         const errorMessage = (error as any).message.toLowerCase();
         if (
@@ -164,12 +62,10 @@ export function CryptoPaymentMethod({
           errorMessage.includes("denied") ||
           errorMessage.includes("cancelled")
         ) {
-          toast.error("Account selection cancelled");
+          // User cancelled - no toast needed
         } else {
-          toast.error("Failed to open account selection");
+          toast.error("Failed to connect wallet");
         }
-      } else {
-        toast.error("Failed to open account selection");
       }
     }
   };
@@ -297,18 +193,9 @@ export function CryptoPaymentMethod({
 
                 {shouldShowWagmiWallet && (
                   <button
-                    onClick={async () => {
+                    onClick={() => {
                       setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                       onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-
-                      // Create thirdweb wallet from wagmi connector
-                      if (connector?.name) {
-                        const thirdwebWallet = await createThirdwebWalletFromConnector(connector.name);
-                        if (thirdwebWallet) {
-                          setActiveWallet(thirdwebWallet);
-                        }
-                      }
-
                       toast.success(`Selected ${connector?.name || "wallet"}`);
                     }}
                     className={cn(
@@ -398,10 +285,7 @@ export function CryptoPaymentMethod({
             <div className="space-y-3">
               {/* Connect Wallet Section */}
               <button
-                onClick={() => {
-                  // Always show wallet selection modal first
-                  setShowWalletModal(true);
-                }}
+                onClick={handleConnectWallet}
                 className="crypto-payment-method-connect-wallet bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md"
               >
                 <div className="flex items-center gap-3">
@@ -438,75 +322,6 @@ export function CryptoPaymentMethod({
           </div>
         </div>
       </div>
-
-      {/* Wallet Connection Modal */}
-      {showWalletModal &&
-        createPortal(
-          <div className="wallet-connection-modal pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50">
-            <div className="max-h-[80vh] w-[400px] max-w-[90vw] overflow-auto rounded-xl bg-white p-6 dark:bg-gray-900">
-              <div className="mb-4 flex items-center justify-between">
-                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-                  {isConnected ? "Switch wallet or account" : "Choose wallet to connect"}
-                </h3>
-                <button
-                  onClick={handleCloseModal}
-                  className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-                >
-                  <X className="h-5 w-5" />
-                </button>
-              </div>
-
-              <div className="space-y-4">
-                {/* Custom wallet options */}
-                <div className="space-y-3">
-                  {walletOptions.map(walletOption => {
-                    const isCurrentWallet = isConnected && connector?.name === walletOption.connector?.name;
-
-                    return (
-                      <button
-                        key={walletOption.id}
-                        onClick={async () => {
-                          handleCloseModal();
-                          await requestWalletPermissions(walletOption.connector);
-                        }}
-                        disabled={isPending}
-                        className={`wallet-option w-full rounded-xl border p-4 text-left transition-all hover:shadow-md disabled:opacity-50 ${
-                          isCurrentWallet
-                            ? "wallet-option--active border-blue-500 bg-blue-50 dark:bg-blue-900/20"
-                            : "border-gray-200 bg-white hover:border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500"
-                        }`}
-                      >
-                        <div className="flex items-center justify-between">
-                          <div className="flex items-center gap-3">
-                            {walletOption.icon}
-
-                            <div>
-                              <div className="wallet-option-name flex items-center gap-2">
-                                <div className="text-sm font-semibold text-gray-900 dark:text-white">
-                                  {walletOption.name}
-                                </div>
-                                {isCurrentWallet && (
-                                  <span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-800 dark:text-blue-200">
-                                    Connected
-                                  </span>
-                                )}
-                              </div>
-                              <div className="text-xs text-gray-500 dark:text-gray-400">
-                                {isCurrentWallet ? "Switch account or reconnect" : walletOption.description}
-                              </div>
-                            </div>
-                          </div>
-                          <ChevronRightCircle className="h-5 w-5 text-gray-400" />
-                        </div>
-                      </button>
-                    );
-                  })}
-                </div>
-              </div>
-            </div>
-          </div>,
-          typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body,
-        )}
     </div>
   );
 }

package/src/global-account/react/components/SignInWithB3/SignInWithB3Flow.tsx

@@ -198,7 +198,7 @@ export function SignInWithB3Flow({
       source,
     });
 
-    if (isConnected && isAuthenticated) {
+    if (isConnected && isAuthenticated && user) {
       // Mark that login just completed BEFORE opening manage account or closing modal
       // This allows Turnkey modal to show (if enableTurnkey is true)
       if (closeAfterLogin) {

package/src/global-account/react/hooks/useAuthentication.ts

@@ -151,19 +151,51 @@ export function useAuthentication(partnerId: string) {
     [activeWallet, partnerId, authenticate, setIsAuthenticated, setIsAuthenticating, setUser, setHasStartedConnecting],
   );
 
-  const onConnect = useCallback(
-    async (_walleAutoConnectedWith: Wallet, allConnectedWallets: Wallet[]) => {
-      debug("@@useAuthentication:onConnect", { _walleAutoConnectedWith, allConnectedWallets });
+  const logout = useCallback(
+    async (callback?: () => void) => {
+      if (activeWallet) {
+        debug("@@logout:activeWallet", activeWallet);
+        disconnect(activeWallet);
+        debug("@@logout:activeWallet", activeWallet);
+      }
 
-      const wallet = allConnectedWallets.find(wallet => wallet.id.startsWith("ecosystem."));
+      // Log out of each wallet
+      wallets.forEach(wallet => {
+        console.log("@@logging out", wallet);
+        disconnect(wallet);
+      });
 
-      if (!wallet) {
-        throw new Error("No smart wallet found during auto-connect");
+      // Delete localStorage thirdweb:connected-wallet-ids
+      // https://npc-labs.slack.com/archives/C070E6HNG85/p1750185115273099
+      if (typeof localStorage !== "undefined") {
+        localStorage.removeItem("thirdweb:connected-wallet-ids");
+        localStorage.removeItem("wagmi.store");
+        localStorage.removeItem("lastAuthProvider");
+        localStorage.removeItem("b3-user");
       }
 
-      debug("@@useAuthentication:onConnect", { wallet });
+      app.logout();
+      debug("@@logout:loggedOut");
 
+      setIsAuthenticated(false);
+      setIsConnected(false);
+      setUser();
+      callback?.();
+    },
+    [activeWallet, disconnect, wallets, setIsAuthenticated, setUser, setIsConnected],
+  );
+
+  const onConnect = useCallback(
+    async (_walleAutoConnectedWith: Wallet, allConnectedWallets: Wallet[]) => {
+      debug("@@useAuthentication:onConnect", { _walleAutoConnectedWith, allConnectedWallets });
       try {
+        const wallet = allConnectedWallets.find(wallet => wallet.id.startsWith("ecosystem."));
+
+        if (!wallet) {
+          throw new Error("No smart wallet found during auto-connect");
+        }
+
+        debug("@@useAuthentication:onConnect", { wallet });
         setHasStartedConnecting(true);
         setIsConnected(true);
         setIsAuthenticating(true);
@@ -177,6 +209,8 @@ export function useAuthentication(partnerId: string) {
         debug("@@useAuthentication:onConnect:failed", { error });
         setIsAuthenticated(false);
         setUser(undefined);
+
+        await logout();
       } finally {
         setIsAuthenticating(false);
       }
@@ -188,54 +222,21 @@ export function useAuthentication(partnerId: string) {
       });
     },
     [
-      onConnectCallback,
-      authenticateUser,
       isAuthenticated,
       isAuthenticating,
       isConnected,
-      setActiveWallet,
       setHasStartedConnecting,
-      setIsAuthenticated,
-      setIsAuthenticating,
       setIsConnected,
+      setIsAuthenticating,
+      setActiveWallet,
+      authenticateUser,
+      onConnectCallback,
+      setIsAuthenticated,
       setUser,
+      logout,
     ],
   );
 
-  const logout = useCallback(
-    async (callback?: () => void) => {
-      if (activeWallet) {
-        debug("@@logout:activeWallet", activeWallet);
-        disconnect(activeWallet);
-        debug("@@logout:activeWallet", activeWallet);
-      }
-
-      // Log out of each wallet
-      wallets.forEach(wallet => {
-        console.log("@@logging out", wallet);
-        disconnect(wallet);
-      });
-
-      // Delete localStorage thirdweb:connected-wallet-ids
-      // https://npc-labs.slack.com/archives/C070E6HNG85/p1750185115273099
-      if (typeof localStorage !== "undefined") {
-        localStorage.removeItem("thirdweb:connected-wallet-ids");
-        localStorage.removeItem("wagmi.store");
-        localStorage.removeItem("lastAuthProvider");
-        localStorage.removeItem("b3-user");
-      }
-
-      app.logout();
-      debug("@@logout:loggedOut");
-
-      setIsAuthenticated(false);
-      setIsConnected(false);
-      setUser();
-      callback?.();
-    },
-    [activeWallet, disconnect, wallets, setIsAuthenticated, setUser, setIsConnected],
-  );
-
   const { isLoading: useAutoConnectLoading } = useAutoConnect({
     client,
     wallets: [wallet],

package/src/global-account/react/hooks/useUserQuery.ts

@@ -1,88 +1,116 @@
 import { Users } from "@b3dotfun/b3-api";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect } from "react";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
 
 const debug = debugB3React("useUserQuery");
 
 const USER_QUERY_KEY = ["b3-user"];
 
-/**
- * Retrieves the user from localStorage
- */
-function getUserFromStorage(): Users | null {
-  if (typeof window === "undefined") {
-    return null;
-  }
-
-  try {
-    const storedUser = localStorage.getItem("b3-user");
-    return storedUser ? JSON.parse(storedUser) : null;
-  } catch (error) {
-    console.warn("Failed to restore user from localStorage:", error);
-    return null;
-  }
+interface UserStore {
+  user: Users | null;
+  setUser: (user: Users | undefined) => void;
+  clearUser: () => void;
 }
 
 /**
- * Saves user to localStorage
+ * Zustand store for managing user state
+ * Persists user data to localStorage
  */
-function saveUserToStorage(user: Users | null) {
-  if (typeof window === "undefined") {
-    return;
-  }
-
-  if (user) {
-    localStorage.setItem("b3-user", JSON.stringify(user));
-  } else {
-    localStorage.removeItem("b3-user");
-  }
-}
+const useUserStore = create<UserStore>()(
+  persist(
+    set => ({
+      user: null,
+      setUser: (newUser: Users | undefined) => {
+        const userToSave = newUser ?? null;
+        set({ user: userToSave });
+        debug("User updated", userToSave);
+      },
+      clearUser: () => {
+        set({ user: null });
+        debug("User cleared");
+      },
+    }),
+    {
+      name: "b3-user",
+      onRehydrateStorage: () => (_, error) => {
+        if (error) {
+          console.warn("Failed to rehydrate user store:", error);
+        }
+      },
+    },
+  ),
+);
 
 /**
  * NOTE: THIS IS ONLY MEANT FOR INTERNAL USE, from useOnConnect
  *
- * Custom hook to manage user state with react-query
+ * Custom hook to manage user state with Zustand
  * This allows for invalidation and refetching of user data
  */
 export function useUserQuery() {
-  const queryClient = useQueryClient();
+  const user = useUserStore(state => state.user);
+  const setUserStore = useUserStore(state => state.setUser);
+  const clearUserStore = useUserStore(state => state.clearUser);
 
-  // Query to get user data (primarily from cache/localStorage)
-  const { data: user } = useQuery<Users | null>({
-    queryKey: USER_QUERY_KEY,
-    queryFn: getUserFromStorage,
-    staleTime: Infinity, // User data doesn't go stale automatically
-    gcTime: Infinity, // Keep in cache indefinitely
-    initialData: getUserFromStorage,
-  });
+  // Listen for storage events from other tabs/windows
+  useEffect(() => {
+    const handleStorageChange = (e: StorageEvent) => {
+      if (e.key === "b3-user") {
+        // Sync with changes from other tabs/windows
+        const stored = e.newValue;
+        if (stored) {
+          try {
+            const parsed = JSON.parse(stored);
+            // Zustand persist format: { state: { user: ... }, version: ... }
+            const userData = parsed?.state?.user ?? parsed?.user ?? null;
+            useUserStore.setState({ user: userData });
+          } catch (error) {
+            console.warn("Failed to parse user from storage event:", error);
+          }
+        } else {
+          useUserStore.setState({ user: null });
+        }
+      }
+    };
 
-  // Mutation to update user
-  const setUserMutation = useMutation({
-    mutationFn: async (newUser: Users | undefined) => {
-      const userToSave = newUser ?? null;
-      saveUserToStorage(userToSave);
-      return userToSave;
-    },
-    onSuccess: data => {
-      queryClient.setQueryData(USER_QUERY_KEY, data);
-      debug("User updated", data);
-    },
-  });
+    window.addEventListener("storage", handleStorageChange);
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+    };
+  }, []);
 
   // Helper function to set user (maintains backward compatibility)
   const setUser = (newUser?: Users) => {
-    setUserMutation.mutate(newUser);
+    setUserStore(newUser);
   };
 
   // Helper function to invalidate and refetch user
   const refetchUser = async () => {
-    await queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
-    return queryClient.refetchQueries({ queryKey: USER_QUERY_KEY });
+    // Re-read from localStorage and update store
+    // Zustand persist stores data as { state: { user: ... }, version: ... }
+    const stored = localStorage.getItem("b3-user");
+    if (stored) {
+      try {
+        const parsed = JSON.parse(stored);
+        // Zustand persist format: { state: { user: ... }, version: ... }
+        const userData = parsed?.state?.user ?? parsed?.user ?? null;
+        useUserStore.setState({ user: userData });
+        return userData ?? undefined;
+      } catch (error) {
+        console.warn("Failed to refetch user from localStorage:", error);
+        // Fallback to current store state
+        return useUserStore.getState().user ?? undefined;
+      }
+    }
+    useUserStore.setState({ user: null });
+    return undefined;
   };
 
   // Helper function to clear user
   const clearUser = () => {
-    setUser(undefined);
+    clearUserStore();
   };
 
   return {