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

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.1.69-alpha.4",
+  "version": "0.1.69-alpha.5",
   "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 };
 }