@b3dotfun/sdk 0.0.82-alpha.1 → 0.0.82

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

@@ -4,9 +4,13 @@ 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 { useConnectModal, useSetActiveWallet, useWalletInfo } from "thirdweb/react";
-import { useAccount, useDisconnect } from "wagmi";
+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 { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay";
 
 export enum CryptoPaymentMethodType {
@@ -33,28 +37,126 @@ export function CryptoPaymentMethod({
 }: CryptoPaymentMethodProps) {
   const { connectedEOAWallet: connectedEOAWallet, connectedSmartWallet: connectedSmartWallet } = useAccountWallet();
   const { connector, address } = useAccount();
+  const { connect, connectors, isPending } = useConnect();
   const { disconnect } = useDisconnect();
-  const { connect: openConnectModal } = useConnectModal();
+  const { data: walletClient } = useWalletClient();
+  const [showWalletModal, setShowWalletModal] = useState(false);
   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);
 
-  // Handle wallet connection using thirdweb modal
-  const handleConnectWallet = async () => {
+  // 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) => {
     try {
-      const wallet = await openConnectModal({ client, setActive: false });
-      if (wallet) {
-        // setActiveWallet(wallet);
+      // 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");
         setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
         onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-        toast.success("Wallet connected");
+      } else {
+        // Fallback: show modal for manual wallet selection
+        setShowWalletModal(true);
       }
     } catch (error) {
-      console.error("Failed to connect wallet:", error);
+      console.error("Failed to request wallet permissions:", error);
       if (error && typeof error === "object" && "message" in error) {
         const errorMessage = (error as any).message.toLowerCase();
         if (
@@ -62,10 +164,12 @@ export function CryptoPaymentMethod({
           errorMessage.includes("denied") ||
           errorMessage.includes("cancelled")
         ) {
-          // User cancelled - no toast needed
+          toast.error("Account selection cancelled");
         } else {
-          toast.error("Failed to connect wallet");
+          toast.error("Failed to open account selection");
         }
+      } else {
+        toast.error("Failed to open account selection");
       }
     }
   };
@@ -193,9 +297,18 @@ export function CryptoPaymentMethod({
 
                 {shouldShowWagmiWallet && (
                   <button
-                    onClick={() => {
+                    onClick={async () => {
                       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(
@@ -285,7 +398,10 @@ export function CryptoPaymentMethod({
             <div className="space-y-3">
               {/* Connect Wallet Section */}
               <button
-                onClick={handleConnectWallet}
+                onClick={() => {
+                  // Always show wallet selection modal first
+                  setShowWalletModal(true);
+                }}
                 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">
@@ -322,6 +438,75 @@ 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/hooks/useAuthentication.ts

@@ -151,51 +151,19 @@ export function useAuthentication(partnerId: string) {
     [activeWallet, partnerId, authenticate, setIsAuthenticated, setIsAuthenticating, setUser, setHasStartedConnecting],
   );
 
-  const logout = useCallback(
-    async (callback?: () => void) => {
-      if (activeWallet) {
-        debug("@@logout:activeWallet", activeWallet);
-        disconnect(activeWallet);
-        debug("@@logout:activeWallet", activeWallet);
-      }
+  const onConnect = useCallback(
+    async (_walleAutoConnectedWith: Wallet, allConnectedWallets: Wallet[]) => {
+      debug("@@useAuthentication:onConnect", { _walleAutoConnectedWith, allConnectedWallets });
 
-      // Log out of each wallet
-      wallets.forEach(wallet => {
-        console.log("@@logging out", wallet);
-        disconnect(wallet);
-      });
+      const wallet = allConnectedWallets.find(wallet => wallet.id.startsWith("ecosystem."));
 
-      // 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");
+      if (!wallet) {
+        throw new Error("No smart wallet found during auto-connect");
       }
 
-      app.logout();
-      debug("@@logout:loggedOut");
+      debug("@@useAuthentication:onConnect", { wallet });
 
-      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);
@@ -209,8 +177,6 @@ export function useAuthentication(partnerId: string) {
         debug("@@useAuthentication:onConnect:failed", { error });
         setIsAuthenticated(false);
         setUser(undefined);
-
-        await logout();
       } finally {
         setIsAuthenticating(false);
       }
@@ -222,21 +188,54 @@ export function useAuthentication(partnerId: string) {
       });
     },
     [
+      onConnectCallback,
+      authenticateUser,
       isAuthenticated,
       isAuthenticating,
       isConnected,
-      setHasStartedConnecting,
-      setIsConnected,
-      setIsAuthenticating,
       setActiveWallet,
-      authenticateUser,
-      onConnectCallback,
+      setHasStartedConnecting,
       setIsAuthenticated,
+      setIsAuthenticating,
+      setIsConnected,
       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],