@b3dotfun/sdk 0.1.69-alpha.3 → 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/cjs/global-account/react/components/SignInWithB3/components/AuthButton.js

@@ -3,7 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AuthButton = AuthButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Button_1 = require("../../custom/Button");
+const lucide_react_1 = require("lucide-react");
 const signInUtils_1 = require("../utils/signInUtils");
+const fallbackIcons = {
+    github: lucide_react_1.Github,
+    email: lucide_react_1.Mail,
+};
 function AuthButton({ strategy, onClick, isLoading, }) {
-    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClick, disabled: isLoading, className: "flex w-full items-center justify-center bg-gray-100 px-2 py-3 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700", children: (0, jsx_runtime_1.jsx)("img", { src: signInUtils_1.strategyIcons[strategy], className: "h-9 w-9" }) }, strategy));
+    const strategyIcon = signInUtils_1.strategyIcons[strategy];
+    const strategyLabel = signInUtils_1.strategyLabels[strategy] || strategy;
+    const FallbackIcon = fallbackIcons[strategy];
+    const buttonLabel = `Sign in with ${strategyLabel}`;
+    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClick, disabled: isLoading, "aria-label": buttonLabel, title: buttonLabel, className: "flex w-full items-center justify-center bg-gray-100 px-2 py-3 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700", children: strategyIcon ? ((0, jsx_runtime_1.jsx)("img", { src: strategyIcon, alt: `${strategyLabel} icon`, className: "h-9 w-9" })) : FallbackIcon ? ((0, jsx_runtime_1.jsx)(FallbackIcon, { className: "h-9 w-9 text-gray-900 dark:text-gray-100" })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: strategyLabel.charAt(0) })) }, strategy));
 }

package/dist/cjs/global-account/react/components/SignInWithB3/steps/LoginStepCustom.js

@@ -3,39 +3,53 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoginStepCustom = LoginStepCustom;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../../global-account/react");
+const constants_1 = require("../../../../../shared/constants");
 const debug_1 = require("../../../../../shared/utils/debug");
 const thirdweb_1 = require("../../../../../shared/utils/thirdweb");
 const react_2 = require("react");
 const react_3 = require("thirdweb/react");
 const wallets_1 = require("thirdweb/wallets");
 const debug = (0, debug_1.debugB3React)("LoginStepCustom");
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 function LoginStepCustom({ onSuccess, onError, chain, strategies, maxInitialWallets = 2, automaticallySetFirstEoa, }) {
     const { partnerId } = (0, react_1.useB3Config)();
     const [isLoading, setIsLoading] = (0, react_2.useState)(false);
     const [showAllWallets, setShowAllWallets] = (0, react_2.useState)(false);
+    const [showEmailFlow, setShowEmailFlow] = (0, react_2.useState)(false);
+    const [email, setEmail] = (0, react_2.useState)("");
+    const [verificationCode, setVerificationCode] = (0, react_2.useState)("");
+    const [emailCodeSent, setEmailCodeSent] = (0, react_2.useState)(false);
+    const [emailError, setEmailError] = (0, react_2.useState)(null);
     const { connect } = (0, react_1.useConnect)(partnerId, chain);
     const setIsAuthenticating = (0, react_1.useAuthStore)(state => state.setIsAuthenticating);
-    const setIsAuthenticated = (0, react_1.useAuthStore)(state => state.setIsAuthenticated);
-    const { logout } = (0, react_1.useAuthentication)(partnerId, { skipAutoConnect: true });
+    const { connect: onAuthConnect, logout } = (0, react_1.useAuthentication)(partnerId, { skipAutoConnect: true });
     const { connect: connectTW } = (0, react_3.useConnect)();
+    const connectedWallets = (0, react_3.useConnectedWallets)();
     // Split strategies into auth and wallet types
     const authStrategies = strategies.filter(s => !(0, react_1.isWalletType)(s));
     const walletStrategies = strategies.filter(react_1.isWalletType);
     const initialWallets = walletStrategies.slice(0, maxInitialWallets);
     const additionalWallets = walletStrategies.slice(maxInitialWallets);
-    const handleConnect = async (strategy) => {
+    const authGridColumns = Math.max(1, Math.min(authStrategies.length, 4));
+    const resetEmailFlow = () => {
+        setShowEmailFlow(false);
+        setEmailCodeSent(false);
+        setVerificationCode("");
+        setEmailError(null);
+    };
+    const connectWithOptions = async (strategy, options) => {
         try {
             setIsLoading(true);
             debug("setIsAuthenticating:true:3");
             setIsAuthenticating(true);
-            const options = (0, react_1.getConnectOptionsFromStrategy)(strategy);
             let connectResult;
-            if (automaticallySetFirstEoa) {
-                if (!options.wallet?.id) {
+            if (automaticallySetFirstEoa && (0, react_1.isWalletType)(strategy) && options.strategy === "wallet") {
+                const walletId = options.wallet?.id;
+                if (!walletId) {
                     throw new Error("Wallet ID is required");
                 }
                 connectResult = await connectTW(async () => {
-                    const wallet = (0, wallets_1.createWallet)(options.wallet?.id);
+                    const wallet = (0, wallets_1.createWallet)(walletId);
                     await wallet.connect({
                         client: thirdweb_1.client,
                     });
@@ -43,20 +57,27 @@ function LoginStepCustom({ onSuccess, onError, chain, strategies, maxInitialWall
                 });
             }
             else {
-                // @ts-expect-error we have custom strategies too and we also get things like "apple" isn't assignable to "wallet"
                 connectResult = await connect(options);
             }
             const account = connectResult?.getAccount();
             debug("@@connectResult", { connectResult, account, options });
-            if (!account)
+            if (!account || !connectResult)
                 throw new Error("Failed to connect");
+            const allConnectedWallets = connectedWallets.length > 0 && connectedWallets.some(wallet => wallet.id === connectResult.id)
+                ? connectedWallets
+                : [connectResult, ...connectedWallets.filter(wallet => wallet.id !== connectResult.id)];
+            await onAuthConnect(connectResult, allConnectedWallets);
             await onSuccess(account);
-            setIsAuthenticated(true);
+            if (strategy === "email") {
+                resetEmailFlow();
+            }
         }
         catch (error) {
+            if (strategy === "email") {
+                setEmailError(error instanceof Error ? error.message : "Failed to sign in with email");
+            }
             await onError?.(error);
             await logout();
-            setIsAuthenticated(false);
         }
         finally {
             setIsLoading(false);
@@ -64,8 +85,68 @@ function LoginStepCustom({ onSuccess, onError, chain, strategies, maxInitialWall
             setIsAuthenticating(false);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(react_1.LoginStepContainer, { partnerId: partnerId, children: [authStrategies.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: `mb-6 w-full ${authStrategies.length <= 3 ? "space-y-3 px-3" : "grid grid-cols-4 gap-4"}`, children: authStrategies.map(strategy => {
-                    console.log("strategy", strategy);
-                    return ((0, jsx_runtime_1.jsx)(react_1.AuthButton, { strategy: strategy, onClick: () => handleConnect(strategy), isLoading: isLoading }, strategy));
-                }) })), (0, jsx_runtime_1.jsx)("div", { className: "mb-4 w-full space-y-2", children: initialWallets.map(walletId => ((0, jsx_runtime_1.jsx)(react_1.WalletRow, { walletId: walletId, onClick: () => handleConnect(walletId), isLoading: isLoading }, walletId))) }), additionalWallets.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "w-full", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => setShowAllWallets(!showAllWallets), className: "mb-2 w-full bg-transparent text-gray-600 hover:bg-gray-100", children: showAllWallets ? "Show less" : "More options" }), showAllWallets && ((0, jsx_runtime_1.jsx)("div", { className: "max-h-60 space-y-2 overflow-y-auto", children: additionalWallets.map(walletId => ((0, jsx_runtime_1.jsx)(react_1.WalletRow, { walletId: walletId, onClick: () => handleConnect(walletId), isLoading: isLoading }, walletId))) }))] }))] }));
+    const handleConnect = async (strategy) => {
+        if (strategy === "email") {
+            setShowEmailFlow(true);
+            setEmailCodeSent(false);
+            setVerificationCode("");
+            setEmailError(null);
+            return;
+        }
+        const options = (0, react_1.getConnectOptionsFromStrategy)(strategy);
+        await connectWithOptions(strategy, options);
+    };
+    const handleSendEmailCode = async () => {
+        const normalizedEmail = email.trim().toLowerCase();
+        if (!normalizedEmail) {
+            setEmailError("Please enter your email address");
+            return;
+        }
+        if (!EMAIL_REGEX.test(normalizedEmail)) {
+            setEmailError("Please enter a valid email address");
+            return;
+        }
+        try {
+            setIsLoading(true);
+            setEmailError(null);
+            await (0, wallets_1.preAuthenticate)({
+                client: thirdweb_1.client,
+                strategy: "email",
+                email: normalizedEmail,
+                ecosystem: {
+                    id: constants_1.ecosystemWalletId,
+                    partnerId,
+                },
+            });
+            setEmail(normalizedEmail);
+            setEmailCodeSent(true);
+        }
+        catch (error) {
+            setEmailError(error instanceof Error ? error.message : "Failed to send verification code");
+            await onError?.(error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const handleEmailLogin = async () => {
+        const normalizedEmail = email.trim().toLowerCase();
+        const normalizedCode = verificationCode.trim();
+        if (!EMAIL_REGEX.test(normalizedEmail)) {
+            setEmailError("Please enter a valid email address");
+            return;
+        }
+        if (!normalizedCode) {
+            setEmailError("Please enter your verification code");
+            return;
+        }
+        await connectWithOptions("email", {
+            strategy: "email",
+            email: normalizedEmail,
+            verificationCode: normalizedCode,
+        });
+    };
+    return ((0, jsx_runtime_1.jsx)(react_1.LoginStepContainer, { partnerId: partnerId, children: showEmailFlow ? ((0, jsx_runtime_1.jsxs)("div", { className: "mb-6 w-full space-y-3 px-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-center text-sm font-medium text-gray-900 dark:text-gray-100", children: "Sign in with email" }), (0, jsx_runtime_1.jsx)(react_1.Input, { type: "email", placeholder: "you@example.com", value: email, onChange: event => setEmail(event.target.value), disabled: isLoading || emailCodeSent }), emailCodeSent && ((0, jsx_runtime_1.jsx)(react_1.Input, { type: "text", placeholder: "Enter verification code", value: verificationCode, onChange: event => setVerificationCode(event.target.value), disabled: isLoading })), emailError && (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-red-500", children: emailError }), (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: emailCodeSent ? handleEmailLogin : handleSendEmailCode, disabled: isLoading, className: "w-full", children: isLoading ? "Loading..." : emailCodeSent ? "Verify code" : "Send code" }), emailCodeSent && ((0, jsx_runtime_1.jsx)(react_1.Button, { variant: "outline", onClick: handleSendEmailCode, disabled: isLoading, className: "w-full", children: "Resend code" })), (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "outline", onClick: resetEmailFlow, disabled: isLoading, className: "w-full", children: "Back" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [authStrategies.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: `mb-6 grid w-full gap-4 px-3 ${authStrategies.length > 4 ? "grid-cols-4" : ""}`, style: authStrategies.length <= 4
+                        ? { gridTemplateColumns: `repeat(${authGridColumns}, minmax(0, 1fr))` }
+                        : undefined, children: authStrategies.map(strategy => ((0, jsx_runtime_1.jsx)(react_1.AuthButton, { strategy: strategy, onClick: () => handleConnect(strategy), isLoading: isLoading }, strategy))) })), (0, jsx_runtime_1.jsx)("div", { className: "mb-4 w-full space-y-2", children: initialWallets.map(walletId => ((0, jsx_runtime_1.jsx)(react_1.WalletRow, { walletId: walletId, onClick: () => handleConnect(walletId), isLoading: isLoading }, walletId))) }), additionalWallets.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "w-full", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => setShowAllWallets(!showAllWallets), className: "mb-2 w-full bg-transparent text-gray-600 hover:bg-gray-100", children: showAllWallets ? "Show less" : "More options" }), showAllWallets && ((0, jsx_runtime_1.jsx)("div", { className: "max-h-60 space-y-2 overflow-y-auto", children: additionalWallets.map(walletId => ((0, jsx_runtime_1.jsx)(react_1.WalletRow, { walletId: walletId, onClick: () => handleConnect(walletId), isLoading: isLoading }, walletId))) }))] }))] })) }));
 }

package/dist/cjs/global-account/react/components/SignInWithB3/utils/signInUtils.d.ts

@@ -3,15 +3,17 @@ import { SingleStepAuthArgsType, Wallet } from "thirdweb/wallets";
 type WalletType = Wallet["id"];
 type StrategyType = SingleStepAuthArgsType["strategy"];
 type CustomStrategyType = "basement" | "privy";
-type AllowedStrategies = StrategyType | WalletType | CustomStrategyType;
-export declare const allowedStrategies: readonly ["apple", "google", "x", "discord", "guest", "walletConnect", "io.metamask", "com.coinbase.wallet", "basement", "privy"];
+type AllowedStrategies = StrategyType | WalletType | CustomStrategyType | "email";
+type NonWalletStrategyType = Exclude<AllowedStrategies, WalletType>;
+export declare const allowedStrategies: readonly ["apple", "google", "github", "x", "discord", "email", "guest", "walletConnect", "io.metamask", "com.coinbase.wallet", "basement", "privy"];
 export type AllowedStrategy = (typeof allowedStrategies)[number];
 export declare function isWalletType(strategy: AllowedStrategies): strategy is WalletType;
-export declare function isStrategyType(strategy: AllowedStrategies): strategy is StrategyType;
+export declare function isStrategyType(strategy: AllowedStrategies): strategy is NonWalletStrategyType;
 export declare function getConnectOptionsFromStrategy(strategy: AllowedStrategy): {
     strategy: StrategyType;
     wallet?: Wallet;
     chain?: Chain;
 };
 export declare const strategyIcons: Record<string, string>;
+export declare const strategyLabels: Record<string, string>;
 export {};

package/dist/cjs/global-account/react/components/SignInWithB3/utils/signInUtils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.strategyIcons = exports.allowedStrategies = void 0;
+exports.strategyLabels = exports.strategyIcons = exports.allowedStrategies = void 0;
 exports.isWalletType = isWalletType;
 exports.isStrategyType = isStrategyType;
 exports.getConnectOptionsFromStrategy = getConnectOptionsFromStrategy;
@@ -11,9 +11,10 @@ exports.allowedStrategies = [
     // Auth strategies
     "apple",
     "google",
+    "github",
     "x",
     "discord",
-    // "github",
+    "email",
     "guest",
     // Wallet IDs
     "walletConnect",
@@ -35,6 +36,9 @@ function getConnectOptionsFromStrategy(strategy) {
     if (!exports.allowedStrategies.includes(strategy)) {
         throw new Error(`Invalid strategy: ${strategy}`);
     }
+    if (strategy === "email") {
+        throw new Error("Email strategy requires OTP flow and cannot be connected in a single step");
+    }
     if (isWalletType(strategy)) {
         return { strategy: "wallet", wallet: (0, wallets_1.createWallet)(strategy) };
     }
@@ -51,6 +55,15 @@ exports.strategyIcons = {
     guest: "https://cdn.b3.fun/incognito.svg",
     // Add more strategies as needed
 };
+exports.strategyLabels = {
+    google: "Google",
+    x: "X",
+    discord: "Discord",
+    apple: "Apple",
+    guest: "Guest",
+    github: "GitHub",
+    email: "Email",
+};
 // Test it
 // console.log(getConnectOptionsFromStrategy("io.metamask"));
 // console.log(getConnectOptionsFromStrategy("google"));

package/dist/cjs/global-account/react/hooks/useConnect.d.ts

@@ -1,9 +1,9 @@
 import { Chain } from "thirdweb";
-import { SingleStepAuthArgsType } from "thirdweb/wallets";
+import { MultiStepAuthArgsType, SingleStepAuthArgsType } from "thirdweb/wallets";
 /**
  * This hook is used to connect to a wallet using the thirdweb client.
  */
 export declare function useConnect(partnerId: string, chain?: Chain): {
-    connect: (strategyOptions?: SingleStepAuthArgsType) => Promise<import("thirdweb/wallets").Wallet | null>;
+    connect: (strategyOptions?: MultiStepAuthArgsType | SingleStepAuthArgsType) => Promise<import("thirdweb/wallets").Wallet | null>;
     isLoading: boolean;
 };

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/SignInWithB3/components/AuthButton.js

@@ -1,6 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from "../../custom/Button.js";
-import { strategyIcons } from "../utils/signInUtils.js";
+import { Github, Mail } from "lucide-react";
+import { strategyIcons, strategyLabels } from "../utils/signInUtils.js";
+const fallbackIcons = {
+    github: Github,
+    email: Mail,
+};
 export function AuthButton({ strategy, onClick, isLoading, }) {
-    return (_jsx(Button, { onClick: onClick, disabled: isLoading, className: "flex w-full items-center justify-center bg-gray-100 px-2 py-3 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700", children: _jsx("img", { src: strategyIcons[strategy], className: "h-9 w-9" }) }, strategy));
+    const strategyIcon = strategyIcons[strategy];
+    const strategyLabel = strategyLabels[strategy] || strategy;
+    const FallbackIcon = fallbackIcons[strategy];
+    const buttonLabel = `Sign in with ${strategyLabel}`;
+    return (_jsx(Button, { onClick: onClick, disabled: isLoading, "aria-label": buttonLabel, title: buttonLabel, className: "flex w-full items-center justify-center bg-gray-100 px-2 py-3 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700", children: strategyIcon ? (_jsx("img", { src: strategyIcon, alt: `${strategyLabel} icon`, className: "h-9 w-9" })) : FallbackIcon ? (_jsx(FallbackIcon, { className: "h-9 w-9 text-gray-900 dark:text-gray-100" })) : (_jsx("span", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: strategyLabel.charAt(0) })) }, strategy));
 }