@b3dotfun/sdk 0.1.69-alpha.4 → 0.1.69-alpha.6

package/dist/cjs/anyspend/react/components/checkout/CheckoutPaymentPanel.js

@@ -56,9 +56,7 @@ function CheckoutPaymentPanel({ recipientAddress, destinationTokenAddress, desti
     if (activeOrderId) {
         return ((0, jsx_runtime_1.jsx)(CheckoutOrderStatus_1.CheckoutOrderStatus, { orderId: activeOrderId, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, onRetry: handleRetry, showPoints: showPoints, showOrderId: showOrderId, classes: classes }));
     }
-    const accordionButtonClass = (active) => (0, cn_1.cn)("anyspend-payment-method-btn flex w-full items-center gap-3 px-4 py-4 text-left transition-colors", active
-        ? "bg-white dark:bg-neutral-900"
-        : "bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800", classes?.paymentMethodButton);
-    const expandedPanelClass = (0, cn_1.cn)("anyspend-payment-method-panel border-t border-gray-100 bg-white px-4 py-4 dark:border-neutral-800 dark:bg-neutral-900");
+    const accordionButtonClass = (active) => (0, cn_1.cn)("anyspend-payment-method-btn flex w-full items-center gap-3 px-4 py-4 text-left transition-colors", !active && "hover:bg-gray-50 dark:hover:bg-neutral-800", classes?.paymentMethodButton);
+    const expandedPanelClass = (0, cn_1.cn)("anyspend-payment-method-panel border-t border-gray-100 px-4 py-4 dark:border-neutral-800");
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-payment-panel flex flex-col gap-5", classes?.paymentPanel), children: [(0, jsx_runtime_1.jsx)("h2", { className: (0, cn_1.cn)("anyspend-payment-title text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.paymentTitle), children: "Payment" }), !isFormValid && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-amber-600 dark:text-amber-400", children: "Please complete the required fields above before proceeding to payment." })), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-payment-methods divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 dark:divide-neutral-700 dark:border-neutral-700", !isFormValid && "pointer-events-none opacity-50", classes?.paymentMethodSelector), children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-crypto", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod(paymentMethod === "crypto" ? null : "crypto"), className: accordionButtonClass(paymentMethod === "crypto"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "crypto", themeColor: themeColor }), (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Pay with crypto" })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "crypto" && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: expandedPanelClass, children: (0, jsx_runtime_1.jsx)(CryptoPayPanel_1.CryptoPayPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, buttonText: buttonText, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes, senderAddress: senderAddress }) }) }, "crypto-panel")) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-card", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod(paymentMethod === "card" ? null : "card"), className: accordionButtonClass(paymentMethod === "card"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "card", themeColor: themeColor }), (0, jsx_runtime_1.jsx)(lucide_react_1.CreditCard, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Credit or debit card" }), (0, jsx_runtime_1.jsxs)("div", { className: "ml-auto flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(VisaLogo, {}), (0, jsx_runtime_1.jsx)(MastercardLogo, {}), (0, jsx_runtime_1.jsx)(AmexLogo, {})] })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "card" && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: expandedPanelClass, children: (0, jsx_runtime_1.jsx)(FiatCheckoutPanel_1.FiatCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes, feeOnTop: feeOnTop, kycEnabled: kycEnabled }) }) }, "card-panel")) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-coinbase", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod(paymentMethod === "coinbase" ? null : "coinbase"), className: accordionButtonClass(paymentMethod === "coinbase"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "coinbase", themeColor: themeColor }), (0, jsx_runtime_1.jsx)(CoinbaseLogo, {}), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Coinbase Pay" })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "coinbase" && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: expandedPanelClass, children: (0, jsx_runtime_1.jsx)(CoinbaseCheckoutPanel_1.CoinbaseCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "coinbase-panel")) })] })] })] }));
 }

package/dist/cjs/anyspend/react/hooks/useAnyspendCreateOnrampOrder.js

@@ -10,7 +10,6 @@ const react_query_1 = require("@tanstack/react-query");
 const react_2 = require("react");
 const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
-const wagmi_1 = require("wagmi");
 const useKycStatus_1 = require("./useKycStatus");
 const useValidatedClientReferenceId_1 = require("./useValidatedClientReferenceId");
 /**
@@ -20,7 +19,7 @@ const useValidatedClientReferenceId_1 = require("./useValidatedClientReferenceId
 function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
     // Get B3 context values
     const { partnerId } = (0, react_1.useB3Config)();
-    const { address } = (0, wagmi_1.useAccount)();
+    const { address, getHeaders: getWalletAuthHeaders } = (0, useKycStatus_1.useWalletAuthHeaders)();
     // Get validated client reference ID from B3 context
     const createValidatedClientReferenceId = (0, useValidatedClientReferenceId_1.useValidatedClientReferenceId)();
     // Get fingerprint data
@@ -44,12 +43,11 @@ function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
                 const srcAmountOnRampInWei = (0, viem_1.parseUnits)(srcFiatAmount, constants_1.USDC_BASE.decimals);
                 // For card payments, include wallet auth headers so the backend can verify
                 // KYC by the signing wallet address (may differ from the B3 JWT address).
-                // Only use already-cached headers — never trigger a fresh wallet signature
-                // here, as that would prompt the user without their explicit consent.
-                // KycGate pre-caches the headers in the "Continue to Verify" user-gesture.
+                // First try cached headers (from KycGate), then sign on-the-fly.
+                // The user is already clicking "Continue"/"Pay" so signing here is acceptable.
                 let kycWalletHeaders;
                 if (onramp.vendor === "stripe-web2" && address) {
-                    kycWalletHeaders = (0, useKycStatus_1.getCachedWalletHeaders)(address);
+                    kycWalletHeaders = (0, useKycStatus_1.getCachedWalletHeaders)(address) || (await getWalletAuthHeaders());
                 }
                 return await anyspend_1.anyspendService.createOrder({
                     recipientAddress: (0, utils_1.normalizeAddress)(recipientAddress),

package/dist/cjs/anyspend/react/hooks/useKycStatus.d.ts

@@ -24,10 +24,12 @@ interface KycVerifyResponse {
 export declare function getCachedWalletHeaders(address: string): Record<string, string> | undefined;
 /**
  * Returns a function that builds the wallet-signature auth headers.
+ * Uses useAccountWallet (thirdweb) instead of wagmi so signing works
+ * for all wallet types (social login, EOA, smart wallet, etc.).
  * Caches signatures for 4 minutes (server allows 5-minute window).
  */
 export declare function useWalletAuthHeaders(): {
-    address: `0x${string}` | undefined;
+    address: string | undefined;
     getHeaders: () => Promise<Record<string, string>>;
 };
 export declare function useKycStatus(enabled?: boolean): {

package/dist/cjs/anyspend/react/hooks/useKycStatus.js

@@ -7,9 +7,9 @@ exports.useKycStatus = useKycStatus;
 exports.useCreateKycInquiry = useCreateKycInquiry;
 exports.useVerifyKyc = useVerifyKyc;
 const constants_1 = require("../../../anyspend/constants");
+const react_1 = require("../../../global-account/react");
 const react_query_1 = require("@tanstack/react-query");
-const react_1 = require("react");
-const wagmi_1 = require("wagmi");
+const react_2 = require("react");
 function buildWalletAuthMessage(walletAddress, timestamp) {
     return `AnySpend wants to verify your identity for card payments.\n\nThis signature does not trigger a blockchain transaction or cost any gas.\n\nWallet: ${walletAddress.toLowerCase()}\nNonce: ${timestamp}`;
 }
@@ -27,21 +27,25 @@ function getCachedWalletHeaders(address) {
 }
 /**
  * Returns a function that builds the wallet-signature auth headers.
+ * Uses useAccountWallet (thirdweb) instead of wagmi so signing works
+ * for all wallet types (social login, EOA, smart wallet, etc.).
  * Caches signatures for 4 minutes (server allows 5-minute window).
  */
 function useWalletAuthHeaders() {
-    const { address } = (0, wagmi_1.useAccount)();
-    const { signMessageAsync } = (0, wagmi_1.useSignMessage)();
-    const getHeaders = (0, react_1.useCallback)(async () => {
+    const { address, wallet } = (0, react_1.useAccountWallet)();
+    const signMessage = wallet.signMessage;
+    const getHeaders = (0, react_2.useCallback)(async () => {
         if (!address)
             throw new Error("No wallet connected");
+        if (!signMessage)
+            throw new Error("Wallet does not support message signing");
         const walletAddress = address.toLowerCase();
         const cached = headerCache.get(walletAddress);
         if (cached && Date.now() < cached.expiresAt)
             return cached.headers;
         const timestamp = Math.floor(Date.now() / 1000);
         const message = buildWalletAuthMessage(walletAddress, timestamp);
-        const signature = await signMessageAsync({ message });
+        const signature = await signMessage({ message });
         const headers = {
             "X-Wallet-Address": walletAddress,
             "X-Wallet-Signature": signature,
@@ -50,7 +54,7 @@ function useWalletAuthHeaders() {
         // Cache for 4 minutes so repeated fetches don't re-prompt the user
         headerCache.set(walletAddress, { headers, expiresAt: Date.now() + 4 * 60 * 1000 });
         return headers;
-    }, [address, signMessageAsync]);
+    }, [address, signMessage]);
     return { address, getHeaders };
 }
 function useKycStatus(enabled = true) {

package/dist/cjs/global-account/react/components/B3Provider/B3Provider.native.js

@@ -8,6 +8,7 @@ exports.InnerProvider = InnerProvider;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("thirdweb/react");
+const react_2 = require("react");
 const wagmi_1 = require("wagmi");
 const createWagmiConfig_1 = require("../../utils/createWagmiConfig");
 const AuthenticationProvider_1 = __importDefault(require("./AuthenticationProvider"));
@@ -25,6 +26,6 @@ function B3Provider({ theme = "light", children, accountOverride, environment, c
  * Inner provider component for native
  */
 function InnerProvider({ children, accountOverride, environment, defaultPermissions, theme = "light", clientType = "socket", partnerId, rpcUrls, }) {
-    const wagmiConfig = (0, createWagmiConfig_1.createWagmiConfig)({ partnerId, rpcUrls });
+    const wagmiConfig = (0, react_2.useMemo)(() => (0, createWagmiConfig_1.createWagmiConfig)({ partnerId, rpcUrls }), [partnerId, rpcUrls]);
     return ((0, jsx_runtime_1.jsx)(wagmi_1.WagmiProvider, { config: wagmiConfig, children: (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(B3ConfigProvider_1.B3ConfigProvider, { accountOverride: accountOverride, environment: environment, automaticallySetFirstEoa: false, theme: theme, clientType: clientType, partnerId: partnerId, defaultPermissions: defaultPermissions, children: children }) }) }));
 }

package/dist/cjs/global-account/react/hooks/useAuth.js

@@ -44,7 +44,7 @@ function useAuth() {
     const useAutoConnectLoadingPrevious = (0, react_2.useRef)(false);
     const referralCode = (0, useSearchParamsSSR_1.useSearchParam)("referralCode");
     const { partnerId } = (0, react_1.useB3Config)();
-    const wagmiConfig = (0, createWagmiConfig_1.getCachedWagmiConfig)({ partnerId });
+    const wagmiConfig = (0, react_2.useMemo)(() => (0, createWagmiConfig_1.createWagmiConfig)({ partnerId }), [partnerId]);
     const { connect } = (0, wagmi_1.useConnect)();
     const activeWagmiAccount = (0, wagmi_1.useAccount)();
     const { switchAccount } = (0, wagmi_1.useSwitchAccount)();
@@ -126,9 +126,7 @@ function useAuth() {
             });
         }
         syncWagmiFunc();
-        // wagmi config shouldn't change
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [partnerId, wallets]);
+    }, [wagmiConfig, wallets, connect, switchAccount]);
     (0, react_2.useEffect)(() => {
         syncWagmi();
     }, [wallets, syncWagmi]);

package/dist/cjs/global-account/react/hooks/useAuthentication.js

@@ -54,7 +54,7 @@ function useAuthentication(partnerId, { skipAutoConnect = false } = {}) {
     const { authenticate } = (0, useTWAuth_1.useTWAuth)();
     const { user, setUser } = (0, useUserQuery_1.useUserQuery)();
     const useAutoConnectLoadingPrevious = (0, react_2.useRef)(false);
-    const wagmiConfig = (0, createWagmiConfig_1.createWagmiConfig)({ partnerId });
+    const wagmiConfig = (0, react_2.useMemo)(() => (0, createWagmiConfig_1.createWagmiConfig)({ partnerId }), [partnerId]);
     const { connect } = (0, wagmi_1.useConnect)();
     const activeWagmiAccount = (0, wagmi_1.useAccount)();
     const { switchAccount } = (0, wagmi_1.useSwitchAccount)();
@@ -105,9 +105,7 @@ function useAuthentication(partnerId, { skipAutoConnect = false } = {}) {
             });
         }
         syncWagmiFunc();
-        // wagmi config shouldn't change
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [partnerId, wallets]);
+    }, [wagmiConfig, wallets, connect, switchAccount]);
     (0, react_2.useEffect)(() => {
         syncWagmi();
     }, [wallets, syncWagmi]);

package/dist/cjs/global-account/react/utils/createWagmiConfig.d.ts

@@ -25,21 +25,3 @@ export declare function createWagmiConfig(options: CreateWagmiConfigOptions): im
 }, {
     "thirdweb:lastChainId": number;
 }>)[]>;
-/**
- * Returns a cached wagmi config for the given partnerId.
- * Use this instead of calling createWagmiConfig() directly inside React components or hooks
- * to avoid registering duplicate EventEmitter listeners on every render.
- */
-export declare function getCachedWagmiConfig(options: CreateWagmiConfigOptions): import("wagmi").Config<readonly [import("viem").Chain, ...import("viem").Chain[]], {
-    [k: string]: import("viem").HttpTransport<undefined, false>;
-}, (CreateConnectorFn | CreateConnectorFn<import("thirdweb/dist/types/adapters/eip1193").EIP1193Provider | undefined, {
-    connect<withCapabilities extends boolean = false>(parameters?: import("@thirdweb-dev/wagmi-adapter").ConnectionOptions<withCapabilities> | undefined): Promise<{
-        accounts: withCapabilities extends true ? readonly {
-            address: `0x${string}`;
-            capabilities: Record<string, unknown>;
-        }[] : readonly `0x${string}`[];
-        chainId: number;
-    }>;
-}, {
-    "thirdweb:lastChainId": number;
-}>)[]>;

package/dist/cjs/global-account/react/utils/createWagmiConfig.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createWagmiConfig = createWagmiConfig;
-exports.getCachedWagmiConfig = getCachedWagmiConfig;
 const constants_1 = require("../../../shared/constants");
 const supported_1 = require("../../../shared/constants/chains/supported");
 const thirdweb_1 = require("../../../shared/utils/thirdweb");
@@ -31,19 +30,3 @@ function createWagmiConfig(options) {
         connectors: finalConnectors,
     });
 }
-/** Module-level cache — wagmi configs must not be recreated on every render. */
-const wagmiConfigCache = new Map();
-/**
- * Returns a cached wagmi config for the given partnerId.
- * Use this instead of calling createWagmiConfig() directly inside React components or hooks
- * to avoid registering duplicate EventEmitter listeners on every render.
- */
-function getCachedWagmiConfig(options) {
-    const key = options.partnerId;
-    let config = wagmiConfigCache.get(key);
-    if (!config) {
-        config = createWagmiConfig(options);
-        wagmiConfigCache.set(key, config);
-    }
-    return config;
-}

package/dist/esm/anyspend/react/components/checkout/CheckoutPaymentPanel.js

@@ -53,9 +53,7 @@ export function CheckoutPaymentPanel({ recipientAddress, destinationTokenAddress
     if (activeOrderId) {
         return (_jsx(CheckoutOrderStatus, { orderId: activeOrderId, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, onRetry: handleRetry, showPoints: showPoints, showOrderId: showOrderId, classes: classes }));
     }
-    const accordionButtonClass = (active) => cn("anyspend-payment-method-btn flex w-full items-center gap-3 px-4 py-4 text-left transition-colors", active
-        ? "bg-white dark:bg-neutral-900"
-        : "bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800", classes?.paymentMethodButton);
-    const expandedPanelClass = cn("anyspend-payment-method-panel border-t border-gray-100 bg-white px-4 py-4 dark:border-neutral-800 dark:bg-neutral-900");
+    const accordionButtonClass = (active) => cn("anyspend-payment-method-btn flex w-full items-center gap-3 px-4 py-4 text-left transition-colors", !active && "hover:bg-gray-50 dark:hover:bg-neutral-800", classes?.paymentMethodButton);
+    const expandedPanelClass = cn("anyspend-payment-method-panel border-t border-gray-100 px-4 py-4 dark:border-neutral-800");
     return (_jsxs("div", { className: cn("anyspend-payment-panel flex flex-col gap-5", classes?.paymentPanel), children: [_jsx("h2", { className: cn("anyspend-payment-title text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.paymentTitle), children: "Payment" }), !isFormValid && (_jsx("p", { className: "text-sm text-amber-600 dark:text-amber-400", children: "Please complete the required fields above before proceeding to payment." })), _jsxs("div", { className: cn("anyspend-payment-methods divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 dark:divide-neutral-700 dark:border-neutral-700", !isFormValid && "pointer-events-none opacity-50", classes?.paymentMethodSelector), children: [_jsxs("div", { className: "anyspend-method-crypto", children: [_jsxs("button", { onClick: () => setPaymentMethod(paymentMethod === "crypto" ? null : "crypto"), className: accordionButtonClass(paymentMethod === "crypto"), children: [_jsx(RadioCircle, { selected: paymentMethod === "crypto", themeColor: themeColor }), _jsx(Wallet, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Pay with crypto" })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "crypto" && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: _jsx("div", { className: expandedPanelClass, children: _jsx(CryptoPayPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, buttonText: buttonText, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes, senderAddress: senderAddress }) }) }, "crypto-panel")) })] }), _jsxs("div", { className: "anyspend-method-card", children: [_jsxs("button", { onClick: () => setPaymentMethod(paymentMethod === "card" ? null : "card"), className: accordionButtonClass(paymentMethod === "card"), children: [_jsx(RadioCircle, { selected: paymentMethod === "card", themeColor: themeColor }), _jsx(CreditCard, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Credit or debit card" }), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [_jsx(VisaLogo, {}), _jsx(MastercardLogo, {}), _jsx(AmexLogo, {})] })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "card" && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: _jsx("div", { className: expandedPanelClass, children: _jsx(FiatCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes, feeOnTop: feeOnTop, kycEnabled: kycEnabled }) }) }, "card-panel")) })] }), _jsxs("div", { className: "anyspend-method-coinbase", children: [_jsxs("button", { onClick: () => setPaymentMethod(paymentMethod === "coinbase" ? null : "coinbase"), className: accordionButtonClass(paymentMethod === "coinbase"), children: [_jsx(RadioCircle, { selected: paymentMethod === "coinbase", themeColor: themeColor }), _jsx(CoinbaseLogo, {}), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Coinbase Pay" })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "coinbase" && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: _jsx("div", { className: expandedPanelClass, children: _jsx(CoinbaseCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "coinbase-panel")) })] })] })] }));
 }

package/dist/esm/anyspend/react/hooks/useAnyspendCreateOnrampOrder.js

@@ -7,8 +7,7 @@ import { useMutation } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { parseUnits } from "viem";
 import { base } from "viem/chains";
-import { useAccount } from "wagmi";
-import { getCachedWalletHeaders } from "./useKycStatus.js";
+import { getCachedWalletHeaders, useWalletAuthHeaders } from "./useKycStatus.js";
 import { useValidatedClientReferenceId } from "./useValidatedClientReferenceId.js";
 /**
  * Hook for creating onramp orders in the Anyspend protocol
@@ -17,7 +16,7 @@ import { useValidatedClientReferenceId } from "./useValidatedClientReferenceId.j
 export function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
     // Get B3 context values
     const { partnerId } = useB3Config();
-    const { address } = useAccount();
+    const { address, getHeaders: getWalletAuthHeaders } = useWalletAuthHeaders();
     // Get validated client reference ID from B3 context
     const createValidatedClientReferenceId = useValidatedClientReferenceId();
     // Get fingerprint data
@@ -41,12 +40,11 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
                 const srcAmountOnRampInWei = parseUnits(srcFiatAmount, USDC_BASE.decimals);
                 // For card payments, include wallet auth headers so the backend can verify
                 // KYC by the signing wallet address (may differ from the B3 JWT address).
-                // Only use already-cached headers — never trigger a fresh wallet signature
-                // here, as that would prompt the user without their explicit consent.
-                // KycGate pre-caches the headers in the "Continue to Verify" user-gesture.
+                // First try cached headers (from KycGate), then sign on-the-fly.
+                // The user is already clicking "Continue"/"Pay" so signing here is acceptable.
                 let kycWalletHeaders;
                 if (onramp.vendor === "stripe-web2" && address) {
-                    kycWalletHeaders = getCachedWalletHeaders(address);
+                    kycWalletHeaders = getCachedWalletHeaders(address) || (await getWalletAuthHeaders());
                 }
                 return await anyspendService.createOrder({
                     recipientAddress: normalizeAddress(recipientAddress),

package/dist/esm/anyspend/react/hooks/useKycStatus.d.ts

@@ -24,10 +24,12 @@ interface KycVerifyResponse {
 export declare function getCachedWalletHeaders(address: string): Record<string, string> | undefined;
 /**
  * Returns a function that builds the wallet-signature auth headers.
+ * Uses useAccountWallet (thirdweb) instead of wagmi so signing works
+ * for all wallet types (social login, EOA, smart wallet, etc.).
  * Caches signatures for 4 minutes (server allows 5-minute window).
  */
 export declare function useWalletAuthHeaders(): {
-    address: `0x${string}` | undefined;
+    address: string | undefined;
     getHeaders: () => Promise<Record<string, string>>;
 };
 export declare function useKycStatus(enabled?: boolean): {

package/dist/esm/anyspend/react/hooks/useKycStatus.js

@@ -1,8 +1,8 @@
 "use client";
 import { ANYSPEND_MAINNET_BASE_URL } from "../../../anyspend/constants/index.js";
+import { useAccountWallet } from "../../../global-account/react/index.js";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
-import { useAccount, useSignMessage } from "wagmi";
 function buildWalletAuthMessage(walletAddress, timestamp) {
     return `AnySpend wants to verify your identity for card payments.\n\nThis signature does not trigger a blockchain transaction or cost any gas.\n\nWallet: ${walletAddress.toLowerCase()}\nNonce: ${timestamp}`;
 }
@@ -20,21 +20,25 @@ export function getCachedWalletHeaders(address) {
 }
 /**
  * Returns a function that builds the wallet-signature auth headers.
+ * Uses useAccountWallet (thirdweb) instead of wagmi so signing works
+ * for all wallet types (social login, EOA, smart wallet, etc.).
  * Caches signatures for 4 minutes (server allows 5-minute window).
  */
 export function useWalletAuthHeaders() {
-    const { address } = useAccount();
-    const { signMessageAsync } = useSignMessage();
+    const { address, wallet } = useAccountWallet();
+    const signMessage = wallet.signMessage;
     const getHeaders = useCallback(async () => {
         if (!address)
             throw new Error("No wallet connected");
+        if (!signMessage)
+            throw new Error("Wallet does not support message signing");
         const walletAddress = address.toLowerCase();
         const cached = headerCache.get(walletAddress);
         if (cached && Date.now() < cached.expiresAt)
             return cached.headers;
         const timestamp = Math.floor(Date.now() / 1000);
         const message = buildWalletAuthMessage(walletAddress, timestamp);
-        const signature = await signMessageAsync({ message });
+        const signature = await signMessage({ message });
         const headers = {
             "X-Wallet-Address": walletAddress,
             "X-Wallet-Signature": signature,
@@ -43,7 +47,7 @@ export function useWalletAuthHeaders() {
         // Cache for 4 minutes so repeated fetches don't re-prompt the user
         headerCache.set(walletAddress, { headers, expiresAt: Date.now() + 4 * 60 * 1000 });
         return headers;
-    }, [address, signMessageAsync]);
+    }, [address, signMessage]);
     return { address, getHeaders };
 }
 export function useKycStatus(enabled = true) {

package/dist/esm/global-account/react/components/B3Provider/B3Provider.native.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ThirdwebProvider } from "thirdweb/react";
+import { useMemo } from "react";
 import { WagmiProvider } from "wagmi";
 import { createWagmiConfig } from "../../utils/createWagmiConfig.js";
 import AuthenticationProvider from "./AuthenticationProvider.js";
@@ -18,6 +19,6 @@ export function B3Provider({ theme = "light", children, accountOverride, environ
  * Inner provider component for native
  */
 export function InnerProvider({ children, accountOverride, environment, defaultPermissions, theme = "light", clientType = "socket", partnerId, rpcUrls, }) {
-    const wagmiConfig = createWagmiConfig({ partnerId, rpcUrls });
+    const wagmiConfig = useMemo(() => createWagmiConfig({ partnerId, rpcUrls }), [partnerId, rpcUrls]);
     return (_jsx(WagmiProvider, { config: wagmiConfig, children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(B3ConfigProvider, { accountOverride: accountOverride, environment: environment, automaticallySetFirstEoa: false, theme: theme, clientType: clientType, partnerId: partnerId, defaultPermissions: defaultPermissions, children: children }) }) }));
 }

package/dist/esm/global-account/react/hooks/useAuth.js

@@ -5,13 +5,13 @@ import { ecosystemWalletId } from "../../../shared/constants/index.js";
 import { debugB3React } from "../../../shared/utils/debug.js";
 import { client } from "../../../shared/utils/thirdweb.js";
 import { getConnectors } from "@wagmi/core";
-import { useCallback, useContext, useEffect, useRef } from "react";
+import { useCallback, useContext, useEffect, useMemo, useRef } from "react";
 import { useActiveWallet, useAutoConnect, useConnectedWallets, useDisconnect, useSetActiveWallet, } from "thirdweb/react";
 import { ecosystemWallet } from "thirdweb/wallets";
 import { preAuthenticate } from "thirdweb/wallets/in-app";
 import { useAccount, useConnect, useSwitchAccount } from "wagmi";
 import { LocalSDKContext } from "../components/B3Provider/LocalSDKProvider.js";
-import { getCachedWagmiConfig } from "../utils/createWagmiConfig.js";
+import { createWagmiConfig } from "../utils/createWagmiConfig.js";
 import { useSearchParam } from "./useSearchParamsSSR.js";
 import { useUserQuery } from "./useUserQuery.js";
 const debug = debugB3React("useAuth");
@@ -38,7 +38,7 @@ export function useAuth() {
     const useAutoConnectLoadingPrevious = useRef(false);
     const referralCode = useSearchParam("referralCode");
     const { partnerId } = useB3Config();
-    const wagmiConfig = getCachedWagmiConfig({ partnerId });
+    const wagmiConfig = useMemo(() => createWagmiConfig({ partnerId }), [partnerId]);
     const { connect } = useConnect();
     const activeWagmiAccount = useAccount();
     const { switchAccount } = useSwitchAccount();
@@ -120,9 +120,7 @@ export function useAuth() {
             });
         }
         syncWagmiFunc();
-        // wagmi config shouldn't change
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [partnerId, wallets]);
+    }, [wagmiConfig, wallets, connect, switchAccount]);
     useEffect(() => {
         syncWagmi();
     }, [wallets, syncWagmi]);

package/dist/esm/global-account/react/hooks/useAuthentication.js

@@ -5,7 +5,7 @@ import { ecosystemWalletId } from "../../../shared/constants/index.js";
 import { debugB3React } from "../../../shared/utils/debug.js";
 import { client } from "../../../shared/utils/thirdweb.js";
 import { getConnectors } from "@wagmi/core";
-import { useCallback, useContext, useEffect, useRef } from "react";
+import { useCallback, useContext, useEffect, useMemo, useRef } from "react";
 import { useActiveWallet, useAutoConnect, useConnectedWallets, useDisconnect, useSetActiveWallet, } from "thirdweb/react";
 import { ecosystemWallet } from "thirdweb/wallets";
 import { preAuthenticate } from "thirdweb/wallets/in-app";
@@ -48,7 +48,7 @@ export function useAuthentication(partnerId, { skipAutoConnect = false } = {}) {
     const { authenticate } = useTWAuth();
     const { user, setUser } = useUserQuery();
     const useAutoConnectLoadingPrevious = useRef(false);
-    const wagmiConfig = createWagmiConfig({ partnerId });
+    const wagmiConfig = useMemo(() => createWagmiConfig({ partnerId }), [partnerId]);
     const { connect } = useConnect();
     const activeWagmiAccount = useAccount();
     const { switchAccount } = useSwitchAccount();
@@ -99,9 +99,7 @@ export function useAuthentication(partnerId, { skipAutoConnect = false } = {}) {
             });
         }
         syncWagmiFunc();
-        // wagmi config shouldn't change
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [partnerId, wallets]);
+    }, [wagmiConfig, wallets, connect, switchAccount]);
     useEffect(() => {
         syncWagmi();
     }, [wallets, syncWagmi]);

package/dist/esm/global-account/react/utils/createWagmiConfig.d.ts

@@ -25,21 +25,3 @@ export declare function createWagmiConfig(options: CreateWagmiConfigOptions): im
 }, {
     "thirdweb:lastChainId": number;
 }>)[]>;
-/**
- * Returns a cached wagmi config for the given partnerId.
- * Use this instead of calling createWagmiConfig() directly inside React components or hooks
- * to avoid registering duplicate EventEmitter listeners on every render.
- */
-export declare function getCachedWagmiConfig(options: CreateWagmiConfigOptions): import("wagmi").Config<readonly [import("viem").Chain, ...import("viem").Chain[]], {
-    [k: string]: import("viem").HttpTransport<undefined, false>;
-}, (CreateConnectorFn | CreateConnectorFn<import("thirdweb/dist/types/adapters/eip1193").EIP1193Provider | undefined, {
-    connect<withCapabilities extends boolean = false>(parameters?: import("@thirdweb-dev/wagmi-adapter").ConnectionOptions<withCapabilities> | undefined): Promise<{
-        accounts: withCapabilities extends true ? readonly {
-            address: `0x${string}`;
-            capabilities: Record<string, unknown>;
-        }[] : readonly `0x${string}`[];
-        chainId: number;
-    }>;
-}, {
-    "thirdweb:lastChainId": number;
-}>)[]>;

package/dist/esm/global-account/react/utils/createWagmiConfig.js

@@ -27,19 +27,3 @@ export function createWagmiConfig(options) {
         connectors: finalConnectors,
     });
 }
-/** Module-level cache — wagmi configs must not be recreated on every render. */
-const wagmiConfigCache = new Map();
-/**
- * Returns a cached wagmi config for the given partnerId.
- * Use this instead of calling createWagmiConfig() directly inside React components or hooks
- * to avoid registering duplicate EventEmitter listeners on every render.
- */
-export function getCachedWagmiConfig(options) {
-    const key = options.partnerId;
-    let config = wagmiConfigCache.get(key);
-    if (!config) {
-        config = createWagmiConfig(options);
-        wagmiConfigCache.set(key, config);
-    }
-    return config;
-}

package/dist/types/anyspend/react/hooks/useKycStatus.d.ts

@@ -24,10 +24,12 @@ interface KycVerifyResponse {
 export declare function getCachedWalletHeaders(address: string): Record<string, string> | undefined;
 /**
  * Returns a function that builds the wallet-signature auth headers.
+ * Uses useAccountWallet (thirdweb) instead of wagmi so signing works
+ * for all wallet types (social login, EOA, smart wallet, etc.).
  * Caches signatures for 4 minutes (server allows 5-minute window).
  */
 export declare function useWalletAuthHeaders(): {
-    address: `0x${string}` | undefined;
+    address: string | undefined;
     getHeaders: () => Promise<Record<string, string>>;
 };
 export declare function useKycStatus(enabled?: boolean): {

package/dist/types/global-account/react/utils/createWagmiConfig.d.ts

@@ -25,21 +25,3 @@ export declare function createWagmiConfig(options: CreateWagmiConfigOptions): im
 }, {
     "thirdweb:lastChainId": number;
 }>)[]>;
-/**
- * Returns a cached wagmi config for the given partnerId.
- * Use this instead of calling createWagmiConfig() directly inside React components or hooks
- * to avoid registering duplicate EventEmitter listeners on every render.
- */
-export declare function getCachedWagmiConfig(options: CreateWagmiConfigOptions): import("wagmi").Config<readonly [import("viem").Chain, ...import("viem").Chain[]], {
-    [k: string]: import("viem").HttpTransport<undefined, false>;
-}, (CreateConnectorFn | CreateConnectorFn<import("thirdweb/dist/types/adapters/eip1193").EIP1193Provider | undefined, {
-    connect<withCapabilities extends boolean = false>(parameters?: import("@thirdweb-dev/wagmi-adapter").ConnectionOptions<withCapabilities> | undefined): Promise<{
-        accounts: withCapabilities extends true ? readonly {
-            address: `0x${string}`;
-            capabilities: Record<string, unknown>;
-        }[] : readonly `0x${string}`[];
-        chainId: number;
-    }>;
-}, {
-    "thirdweb:lastChainId": number;
-}>)[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.1.69-alpha.4",
+  "version": "0.1.69-alpha.6",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

package/src/anyspend/react/components/checkout/CheckoutPaymentPanel.tsx

@@ -186,14 +186,12 @@ export function CheckoutPaymentPanel({
   const accordionButtonClass = (active: boolean) =>
     cn(
       "anyspend-payment-method-btn flex w-full items-center gap-3 px-4 py-4 text-left transition-colors",
-      active
-        ? "bg-white dark:bg-neutral-900"
-        : "bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800",
+      !active && "hover:bg-gray-50 dark:hover:bg-neutral-800",
       classes?.paymentMethodButton,
     );
 
   const expandedPanelClass = cn(
-    "anyspend-payment-method-panel border-t border-gray-100 bg-white px-4 py-4 dark:border-neutral-800 dark:bg-neutral-900",
+    "anyspend-payment-method-panel border-t border-gray-100 px-4 py-4 dark:border-neutral-800",
   );
 
   return (

package/src/anyspend/react/hooks/useAnyspendCreateOnrampOrder.ts

@@ -11,9 +11,8 @@ import { useMemo } from "react";
 
 import { parseUnits } from "viem";
 import { base } from "viem/chains";
-import { useAccount } from "wagmi";
 import { CreateOrderParams } from "./useAnyspendCreateOrder";
-import { getCachedWalletHeaders } from "./useKycStatus";
+import { getCachedWalletHeaders, useWalletAuthHeaders } from "./useKycStatus";
 import { useValidatedClientReferenceId } from "./useValidatedClientReferenceId";
 
 export type OnrampOptions = {
@@ -42,7 +41,7 @@ export type UseAnyspendCreateOnrampOrderProps = {
 export function useAnyspendCreateOnrampOrder({ onSuccess, onError }: UseAnyspendCreateOnrampOrderProps = {}) {
   // Get B3 context values
   const { partnerId } = useB3Config();
-  const { address } = useAccount();
+  const { address, getHeaders: getWalletAuthHeaders } = useWalletAuthHeaders();
 
   // Get validated client reference ID from B3 context
   const createValidatedClientReferenceId = useValidatedClientReferenceId();
@@ -86,12 +85,11 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError }: UseAnyspend
 
         // For card payments, include wallet auth headers so the backend can verify
         // KYC by the signing wallet address (may differ from the B3 JWT address).
-        // Only use already-cached headers — never trigger a fresh wallet signature
-        // here, as that would prompt the user without their explicit consent.
-        // KycGate pre-caches the headers in the "Continue to Verify" user-gesture.
+        // First try cached headers (from KycGate), then sign on-the-fly.
+        // The user is already clicking "Continue"/"Pay" so signing here is acceptable.
         let kycWalletHeaders: Record<string, string> | undefined;
         if (onramp.vendor === "stripe-web2" && address) {
-          kycWalletHeaders = getCachedWalletHeaders(address);
+          kycWalletHeaders = getCachedWalletHeaders(address) || (await getWalletAuthHeaders());
         }
 
         return await anyspendService.createOrder({

package/src/anyspend/react/hooks/useKycStatus.ts

@@ -1,9 +1,9 @@
 "use client";
 
 import { ANYSPEND_MAINNET_BASE_URL } from "@b3dotfun/sdk/anyspend/constants";
+import { useAccountWallet } from "@b3dotfun/sdk/global-account/react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
-import { useAccount, useSignMessage } from "wagmi";
 
 export interface KycStatusResponse {
   kycRequired: boolean;
@@ -46,14 +46,17 @@ export function getCachedWalletHeaders(address: string): Record<string, string>
 
 /**
  * Returns a function that builds the wallet-signature auth headers.
+ * Uses useAccountWallet (thirdweb) instead of wagmi so signing works
+ * for all wallet types (social login, EOA, smart wallet, etc.).
  * Caches signatures for 4 minutes (server allows 5-minute window).
  */
 export function useWalletAuthHeaders() {
-  const { address } = useAccount();
-  const { signMessageAsync } = useSignMessage();
+  const { address, wallet } = useAccountWallet();
+  const signMessage = wallet.signMessage;
 
   const getHeaders = useCallback(async (): Promise<Record<string, string>> => {
     if (!address) throw new Error("No wallet connected");
+    if (!signMessage) throw new Error("Wallet does not support message signing");
     const walletAddress = address.toLowerCase();
 
     const cached = headerCache.get(walletAddress);
@@ -61,7 +64,7 @@ export function useWalletAuthHeaders() {
 
     const timestamp = Math.floor(Date.now() / 1000);
     const message = buildWalletAuthMessage(walletAddress, timestamp);
-    const signature = await signMessageAsync({ message });
+    const signature = await signMessage({ message });
 
     const headers = {
       "X-Wallet-Address": walletAddress,
@@ -71,7 +74,7 @@ export function useWalletAuthHeaders() {
     // Cache for 4 minutes so repeated fetches don't re-prompt the user
     headerCache.set(walletAddress, { headers, expiresAt: Date.now() + 4 * 60 * 1000 });
     return headers;
-  }, [address, signMessageAsync]);
+  }, [address, signMessage]);
 
   return { address, getHeaders };
 }

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

@@ -5,6 +5,7 @@ import { Account, Wallet } from "thirdweb/wallets";
 
 import { ClientType } from "../../../client-manager";
 
+import { useMemo } from "react";
 import { WagmiProvider } from "wagmi";
 import { createWagmiConfig } from "../../utils/createWagmiConfig";
 import AuthenticationProvider from "./AuthenticationProvider";
@@ -82,7 +83,7 @@ export function InnerProvider({
   partnerId: string;
   rpcUrls?: Record<number, string>;
 }) {
-  const wagmiConfig = createWagmiConfig({ partnerId, rpcUrls });
+  const wagmiConfig = useMemo(() => createWagmiConfig({ partnerId, rpcUrls }), [partnerId, rpcUrls]);
 
   return (
     <WagmiProvider config={wagmiConfig}>

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

@@ -6,7 +6,7 @@ import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
 import { ConnectionOptions } from "@thirdweb-dev/wagmi-adapter";
 import { getConnectors } from "@wagmi/core";
-import { useCallback, useContext, useEffect, useRef } from "react";
+import { useCallback, useContext, useEffect, useMemo, useRef } from "react";
 import {
   useActiveWallet,
   useAutoConnect,
@@ -18,7 +18,7 @@ import { Wallet, ecosystemWallet } from "thirdweb/wallets";
 import { preAuthenticate } from "thirdweb/wallets/in-app";
 import { useAccount, useConnect, useSwitchAccount } from "wagmi";
 import { LocalSDKContext } from "../components/B3Provider/LocalSDKProvider";
-import { getCachedWagmiConfig } from "../utils/createWagmiConfig";
+import { createWagmiConfig } from "../utils/createWagmiConfig";
 import { useSearchParam } from "./useSearchParamsSSR";
 import { useUserQuery } from "./useUserQuery";
 
@@ -47,7 +47,7 @@ export function useAuth() {
   const useAutoConnectLoadingPrevious = useRef(false);
   const referralCode = useSearchParam("referralCode");
   const { partnerId } = useB3Config();
-  const wagmiConfig = getCachedWagmiConfig({ partnerId });
+  const wagmiConfig = useMemo(() => createWagmiConfig({ partnerId }), [partnerId]);
   const { connect } = useConnect();
   const activeWagmiAccount = useAccount();
   const { switchAccount } = useSwitchAccount();
@@ -136,9 +136,7 @@ export function useAuth() {
       });
     }
     syncWagmiFunc();
-    // wagmi config shouldn't change
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [partnerId, wallets]);
+  }, [wagmiConfig, wallets, connect, switchAccount]);
 
   useEffect(() => {
     syncWagmi();

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

@@ -6,7 +6,7 @@ import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
 import { ConnectionOptions } from "@thirdweb-dev/wagmi-adapter";
 import { getConnectors } from "@wagmi/core";
-import { useCallback, useContext, useEffect, useRef } from "react";
+import { useCallback, useContext, useEffect, useMemo, useRef } from "react";
 import {
   useActiveWallet,
   useAutoConnect,
@@ -57,7 +57,7 @@ export function useAuthentication(partnerId: string, { skipAutoConnect = false }
   const { authenticate } = useTWAuth();
   const { user, setUser } = useUserQuery();
   const useAutoConnectLoadingPrevious = useRef(false);
-  const wagmiConfig = createWagmiConfig({ partnerId });
+  const wagmiConfig = useMemo(() => createWagmiConfig({ partnerId }), [partnerId]);
   const { connect } = useConnect();
   const activeWagmiAccount = useAccount();
   const { switchAccount } = useSwitchAccount();
@@ -113,9 +113,7 @@ export function useAuthentication(partnerId: string, { skipAutoConnect = false }
       });
     }
     syncWagmiFunc();
-    // wagmi config shouldn't change
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [partnerId, wallets]);
+  }, [wagmiConfig, wallets, connect, switchAccount]);
 
   useEffect(() => {
     syncWagmi();

package/src/global-account/react/utils/createWagmiConfig.tsx

@@ -38,21 +38,3 @@ export function createWagmiConfig(options: CreateWagmiConfigOptions) {
     connectors: finalConnectors,
   });
 }
-
-/** Module-level cache — wagmi configs must not be recreated on every render. */
-const wagmiConfigCache = new Map<string, ReturnType<typeof createWagmiConfig>>();
-
-/**
- * Returns a cached wagmi config for the given partnerId.
- * Use this instead of calling createWagmiConfig() directly inside React components or hooks
- * to avoid registering duplicate EventEmitter listeners on every render.
- */
-export function getCachedWagmiConfig(options: CreateWagmiConfigOptions) {
-  const key = options.partnerId;
-  let config = wagmiConfigCache.get(key);
-  if (!config) {
-    config = createWagmiConfig(options);
-    wagmiConfigCache.set(key, config);
-  }
-  return config;
-}