@b3dotfun/sdk 0.0.82 → 0.0.83-alpha.1

package/src/anyspend/react/components/AnySpendCustom.tsx

@@ -44,7 +44,6 @@ import { motion } from "motion/react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 
 import { base } from "viem/chains";
-import { useAutoSetActiveWalletFromWagmi } from "../hooks/useAutoSetActiveWalletFromWagmi";
 import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodState";
 import { useRecipientAddressState } from "../hooks/useRecipientAddressState";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
@@ -247,9 +246,6 @@ function AnySpendCustomInner({
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
 
-  // Auto-set active wallet from wagmi
-  useAutoSetActiveWalletFromWagmi();
-
   const [activePanel, setActivePanel] = useState<PanelView>(
     loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER,
   );

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

@@ -4,13 +4,8 @@ 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, useDisconnect, useWalletInfo } from "thirdweb/react";
 import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay";
 
 export enum CryptoPaymentMethodType {
@@ -35,128 +30,32 @@ export function CryptoPaymentMethod({
   onBack,
   onSelectPaymentMethod,
 }: CryptoPaymentMethodProps) {
-  const { connectedEOAWallet: connectedEOAWallet, connectedSmartWallet: connectedSmartWallet } = useAccountWallet();
-  const { connector, address } = useAccount();
-  const { connect, connectors, isPending } = useConnect();
+  const { connectedEOAWallet, connectedSmartWallet } = useAccountWallet();
   const { disconnect } = useDisconnect();
-  const { data: walletClient } = useWalletClient();
-  const [showWalletModal, setShowWalletModal] = useState(false);
-  const setActiveWallet = useSetActiveWallet();
+  const { connect: openConnectModal } = useConnectModal();
   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);
+  const { shouldShowConnectedEOA } = useConnectedWalletDisplay(selectedPaymentMethod);
 
-  // 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;
+      // Disconnect current wallet before connecting a new one
+      if (connectedEOAWallet) {
+        await disconnect(connectedEOAWallet);
       }
-
-      // 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 +63,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");
       }
     }
   };
@@ -236,7 +133,7 @@ export function CryptoPaymentMethod({
         {/* Payment Methods */}
         <div className="crypto-payment-methods flex flex-col gap-4">
           {/* Installed Wallets Section */}
-          {(shouldShowConnectedEOA || shouldShowWagmiWallet || globalAddress) && (
+          {(shouldShowConnectedEOA || globalAddress) && (
             <div className="installed-wallets">
               <h3 className="text-as-primary/80 mb-3 text-sm font-medium">Connected wallets</h3>
               <div className="space-y-2">
@@ -247,10 +144,7 @@ export function CryptoPaymentMethod({
                     onClick={() => {
                       setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                       onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                      if (connectedEOAWallet) {
-                        setActiveWallet(connectedEOAWallet);
-                      }
-                      toast.success(`Selected ${eoaWalletInfo?.name || connector?.name || "wallet"}`);
+                      toast.success(`Selected ${eoaWalletInfo?.name || "wallet"}`);
                     }}
                     className={cn(
                       "crypto-payment-method-connect-wallet eoa-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md",
@@ -266,7 +160,7 @@ export function CryptoPaymentMethod({
                         </div>
                         <div className="flex flex-col">
                           <span className="text-as-primary font-semibold">
-                            {eoaWalletInfo?.name || connector?.name || "Connected Wallet"}
+                            {eoaWalletInfo?.name || "Connected Wallet"}
                           </span>
                           <span className="text-as-primary/60 text-sm">
                             {shortenAddress(connectedEOAWallet?.getAccount()?.address || "")}
@@ -280,62 +174,9 @@ export function CryptoPaymentMethod({
                         <button
                           onClick={e => {
                             e.stopPropagation();
-                            disconnect();
-                            toast.success("Wallet disconnected");
-                            if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
-                              setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
+                            if (connectedEOAWallet) {
+                              disconnect(connectedEOAWallet);
                             }
-                          }}
-                          className="text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors"
-                        >
-                          <X className="h-4 w-4" />
-                        </button>
-                      </div>
-                    </div>
-                  </button>
-                )}
-
-                {shouldShowWagmiWallet && (
-                  <button
-                    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(
-                      "crypto-payment-method-connect-wallet wagmi-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md",
-                      selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
-                        ? "connected-wallet border-as-brand bg-as-brand/5"
-                        : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80",
-                    )}
-                  >
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-3">
-                        <div className="wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100">
-                          <Wallet className="h-5 w-5 text-blue-600" />
-                        </div>
-                        <div className="flex flex-col">
-                          <span className="text-as-primary font-semibold">{connector?.name || "Connected Wallet"}</span>
-                          <span className="text-as-primary/60 text-sm">{shortenAddress(address || "")}</span>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        {selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && (
-                          <div className="h-2 w-2 rounded-full bg-green-500"></div>
-                        )}
-                        <button
-                          onClick={e => {
-                            e.stopPropagation();
-                            disconnect();
                             toast.success("Wallet disconnected");
                             if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
                               setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
@@ -398,10 +239,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 +276,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/anyspend/react/hooks/useAnyspendFlow.ts

@@ -24,7 +24,6 @@ import { components } from "../../types/api";
 import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
 import { FiatPaymentMethod } from "../components/common/FiatPaymentMethod";
 import { useAutoSelectCryptoPaymentMethod } from "./useAutoSelectCryptoPaymentMethod";
-import { useAutoSetActiveWalletFromWagmi } from "./useAutoSetActiveWalletFromWagmi";
 import { useConnectedWalletDisplay } from "./useConnectedWalletDisplay";
 import { useCryptoPaymentMethodState } from "./useCryptoPaymentMethodState";
 import { useRecipientAddressState } from "./useRecipientAddressState";
@@ -111,9 +110,6 @@ export function useAnyspendFlow({
   const { address: globalAddress } = useAccountWallet();
   const { walletAddress } = useConnectedWalletDisplay(effectiveCryptoPaymentMethod);
 
-  // Auto-set active wallet from wagmi
-  useAutoSetActiveWalletFromWagmi();
-
   // Recipient address state - hook automatically manages priority: props > user selection > wallet/global
   const { setSelectedRecipientAddress, effectiveRecipientAddress } = useRecipientAddressState({
     recipientAddressFromProps: recipientAddress,

package/src/anyspend/react/providers/AnyspendProvider.tsx

@@ -1,8 +1,7 @@
 "use client";
 
 import { TooltipProvider } from "@b3dotfun/sdk/global-account/react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ReactNode, useState } from "react";
+import { ReactNode } from "react";
 import { FeatureFlags, FeatureFlagsProvider } from "../contexts/FeatureFlagsContext";
 import { StripeRedirectHandler } from "./StripeRedirectHandler";
 
@@ -11,16 +10,6 @@ interface AnyspendProviderProps {
   featureFlags?: FeatureFlags;
 }
 
-const defaultQueryClientConfig = {
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-      retry: false,
-      staleTime: 30000,
-    },
-  },
-} as const;
-
 /**
  * AnyspendProvider is a top-level provider that wraps your application to provide
  * query caching and state management for all Anyspend hooks.
@@ -45,16 +34,12 @@ const defaultQueryClientConfig = {
  * ```
  */
 export const AnyspendProvider = function AnyspendProvider({ children, featureFlags }: AnyspendProviderProps) {
-  const [queryClient] = useState(() => new QueryClient(defaultQueryClientConfig));
-
   return (
-    <QueryClientProvider client={queryClient}>
-      <FeatureFlagsProvider featureFlags={featureFlags}>
-        <TooltipProvider>
-          <StripeRedirectHandler />
-          {children}
-        </TooltipProvider>
-      </FeatureFlagsProvider>
-    </QueryClientProvider>
+    <FeatureFlagsProvider featureFlags={featureFlags}>
+      <TooltipProvider>
+        <StripeRedirectHandler />
+        {children}
+      </TooltipProvider>
+    </FeatureFlagsProvider>
   );
 };

package/src/anyspend/utils/chain.ts

@@ -15,12 +15,28 @@ import {
 } from "viem";
 import { abstract, arbitrum, avalanche, b3, base, bsc, mainnet, optimism, polygon } from "viem/chains";
 import { ChainType, IBaseChain, IEVMChain, ISolanaChain } from "../types/chain";
-import { getAvaxToken, getBnbToken, getEthToken, getPolToken, getSolanaToken } from "./token";
+import {
+  getAvaxToken,
+  getBnbToken,
+  getEthToken,
+  getHyperEVMNativeToken,
+  getPolToken,
+  getSolanaToken,
+  HYPEREVM_CHAIN_ID,
+} from "./token";
 
 function getCustomEvmChain(chain: Chain, rpcUrl: string): Chain {
   return defineChain({ ...chain, rpcUrls: { default: { http: [rpcUrl] } } });
 }
 
+export const hyperEVM = defineChain({
+  id: HYPEREVM_CHAIN_ID,
+  name: "HyperEVM",
+  nativeCurrency: { name: "HyperEVM", symbol: "HYPE", decimals: 18 },
+  rpcUrls: { default: { http: ["https://rpc.hyperliquid.xyz/evm"] } },
+  blockExplorers: { default: { name: "HyperEVM Explorer", url: "https://hyperevmscan.io/" } },
+});
+
 // export const b4testnet = defineChain({
 //   id: 19934,
 //   name: "B4 Testnet",
@@ -189,6 +205,20 @@ export const EVM_MAINNET: Record<number, IEVMChain> = {
     coingeckoName: "abstract",
     wethAddress: "0x3439153eb7af838ad19d56e1571fbd09333c2809",
   },
+  [hyperEVM.id]: {
+    id: hyperEVM.id,
+    name: hyperEVM.name,
+    logoUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/32196.png",
+    type: ChainType.EVM,
+    nativeRequired: parseEther("0.01"),
+    canDepositNative: true,
+    defaultToken: getHyperEVMNativeToken(),
+    nativeToken: getHyperEVMNativeToken(),
+    viem: hyperEVM,
+    pollingInterval: 1000, // 1 second for Hyperliquid
+    coingeckoName: "hyperevm",
+    wethAddress: "0x5555555555555555555555555555555555555555",
+  },
 };
 
 export const EVM_TESTNET: Record<number, IEVMChain> = {

package/src/anyspend/utils/token.ts

@@ -1,6 +1,9 @@
-import { avalanche, bsc, polygon } from "viem/chains";
 import { RELAY_ETH_ADDRESS, RELAY_SOL_ADDRESS, RELAY_SOLANA_MAINNET_CHAIN_ID } from "@b3dotfun/sdk/anyspend/constants";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { avalanche, bsc, polygon } from "viem/chains";
+
+export const HYPERLIQUID_CHAIN_ID = 1337;
+export const HYPEREVM_CHAIN_ID = 999;
 
 export function isNativeToken(address: string): boolean {
   return address.toLowerCase() === RELAY_ETH_ADDRESS || address.toLowerCase() === RELAY_SOL_ADDRESS;
@@ -70,3 +73,16 @@ export function getAvaxToken(): components["schemas"]["Token"] {
     },
   };
 }
+
+export function getHyperEVMNativeToken(): components["schemas"]["Token"] {
+  return {
+    chainId: HYPEREVM_CHAIN_ID,
+    address: RELAY_ETH_ADDRESS,
+    symbol: "HYPE",
+    name: "HYPE",
+    decimals: 18,
+    metadata: {
+      logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/32196.png",
+    },
+  };
+}

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

@@ -12,7 +12,7 @@ import { loadGA4Script } from "@b3dotfun/sdk/global-account/utils/analytics";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import "@relayprotocol/relay-kit-ui/styles.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   getLastAuthProvider,
   ThirdwebProvider,
@@ -92,7 +92,11 @@ export function B3Provider({
   useEffect(() => {
     setClientType(clientType);
   }, [clientType]);
-  const wagmiConfig = createWagmiConfig({ partnerId, rpcUrls, connectors, overrideDefaultConnectors });
+
+  const wagmiConfig = useMemo(
+    () => createWagmiConfig({ partnerId, rpcUrls, connectors, overrideDefaultConnectors }),
+    [partnerId, rpcUrls, connectors, overrideDefaultConnectors],
+  );
 
   return (
     <ThirdwebProvider>

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],