@b3dotfun/sdk 0.1.69-alpha.0 → 0.1.69-alpha.10

package/dist/cjs/global-account/react/components/ManageAccount/SessionDurationContent.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const app_1 = __importDefault(require("../../../../global-account/app"));
+const react_1 = require("../../../../global-account/react");
+const session_duration_1 = require("../../../../shared/utils/session-duration");
+const react_2 = require("react");
+const ModalHeader_1 = __importDefault(require("../ModalHeader/ModalHeader"));
+const DESCRIPTIONS = {
+    0: "Sign out when browser closes",
+    1: "Stay signed in for 1 day",
+    7: "Stay signed in for 7 days",
+    14: "Stay signed in for 2 weeks",
+    30: "Stay signed in for 30 days",
+};
+const SessionDurationContent = ({ partnerId }) => {
+    const { user, setUser } = (0, react_1.useAuthentication)(partnerId);
+    const navigateBack = (0, react_1.useModalStore)(state => state.navigateBack);
+    const [sessionDays, setSessionDays] = (0, react_2.useState)(() => (0, session_duration_1.getSessionDurationDays)(user?.preferences, partnerId));
+    const [saving, setSaving] = (0, react_2.useState)(false);
+    const handleSelect = async (days) => {
+        const previous = sessionDays;
+        (0, session_duration_1.setSessionDurationDays)(days, partnerId);
+        setSessionDays(days);
+        if (user?.userId) {
+            setSaving(true);
+            try {
+                const updated = await app_1.default.service("users").patch(user.userId, {
+                    preferences: {
+                        ...user.preferences,
+                        [partnerId]: {
+                            ...((user.preferences ?? {})[partnerId] ?? {}),
+                            sessionDuration: days,
+                        },
+                    },
+                });
+                setUser(updated);
+            }
+            catch (error) {
+                console.error("Failed to save session duration preference:", error);
+                // Revert optimistic update so UI stays consistent with server state
+                setSessionDays(previous);
+                (0, session_duration_1.setSessionDurationDays)(previous, partnerId);
+            }
+            finally {
+                setSaving(false);
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-[470px] flex-col", children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.default, { showBackButton: true, showCloseButton: false, title: "Stay signed in", handleBack: navigateBack }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-2 p-5", children: session_duration_1.SESSION_DURATION_OPTIONS.map(days => ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => handleSelect(days), disabled: saving, className: `flex items-center justify-between rounded-xl border px-4 py-3 transition-colors ${sessionDays === days
+                        ? "border-[#3f3f46] bg-[#f4f4f5] dark:border-white dark:bg-white/10"
+                        : "border-[#e4e4e7] bg-transparent hover:bg-[#f4f4f5] dark:border-white/10 dark:hover:bg-white/5"}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-0.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-neue-montreal-semibold text-[14px] leading-none tracking-[-0.28px] text-[#3f3f46] dark:text-white", children: session_duration_1.SESSION_DURATION_LABELS[days] }), (0, jsx_runtime_1.jsx)("span", { className: "font-neue-montreal-medium text-[13px] leading-none tracking-[-0.26px] text-[#70707b] dark:text-white/50", children: DESCRIPTIONS[days] })] }), sessionDays === days && ((0, jsx_runtime_1.jsx)("div", { className: "flex size-5 items-center justify-center rounded-full bg-[#3f3f46] dark:bg-white", children: (0, jsx_runtime_1.jsx)("svg", { width: "10", height: "8", viewBox: "0 0 10 8", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M1 4L3.5 6.5L9 1", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "dark:stroke-[#3f3f46]" }) }) }))] }, days))) })] }));
+};
+exports.default = SessionDurationContent;

package/dist/cjs/global-account/react/components/ManageAccount/SettingsContent.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../global-account/react");
 const thirdweb_1 = require("../../../../shared/utils/thirdweb");
+const session_duration_1 = require("../../../../shared/utils/session-duration");
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("react");
 const react_3 = require("thirdweb/react");
@@ -16,47 +17,29 @@ const SettingsProfileCard_1 = __importDefault(require("./SettingsProfileCard"));
 const SettingsContent = ({ partnerId, onLogout, chain, }) => {
     const setB3ModalContentType = (0, react_1.useModalStore)(state => state.setB3ModalContentType);
     const setB3ModalOpen = (0, react_1.useModalStore)(state => state.setB3ModalOpen);
-    const { logout } = (0, react_1.useAuthentication)(partnerId);
+    const { logout, user } = (0, react_1.useAuthentication)(partnerId);
     const [logoutLoading, setLogoutLoading] = (0, react_2.useState)(false);
+    const sessionDays = (0, session_duration_1.getSessionDurationDays)(user?.preferences, partnerId);
     const { data: profilesRaw = [] } = (0, react_3.useProfiles)({ client: thirdweb_1.client });
     const profiles = profilesRaw.filter((profile) => !["custom_auth_endpoint"].includes(profile.type));
     const handleNavigate = (type) => {
         if (type === "home") {
-            setB3ModalContentType({
-                type: "manageAccount",
-                chain,
-                partnerId,
-                onLogout,
-                activeTab: "home",
-            });
+            setB3ModalContentType({ type: "manageAccount", chain, partnerId, onLogout, activeTab: "home" });
         }
         else if (type === "swap") {
-            setB3ModalContentType({
-                type: "manageAccount",
-                chain,
-                partnerId,
-                onLogout,
-                activeTab: "tokens",
-            });
+            setB3ModalContentType({ type: "manageAccount", chain, partnerId, onLogout, activeTab: "tokens" });
         }
         else if (type === "linkAccount") {
-            setB3ModalContentType({
-                type: "linkAccount",
-                chain,
-                partnerId,
-            });
+            setB3ModalContentType({ type: "linkAccount", chain, partnerId });
         }
         else if (type === "notifications") {
-            setB3ModalContentType({
-                type: "notifications",
-                chain,
-                partnerId,
-            });
+            setB3ModalContentType({ type: "notifications", chain, partnerId });
+        }
+        else if (type === "sessionDuration") {
+            setB3ModalContentType({ type: "sessionDuration", chain, partnerId });
         }
         else {
-            setB3ModalContentType({
-                type: "avatarEditor",
-            });
+            setB3ModalContentType({ type: "avatarEditor" });
         }
         setB3ModalOpen(true);
     };
@@ -67,7 +50,7 @@ const SettingsContent = ({ partnerId, onLogout, chain, }) => {
         setB3ModalOpen(false);
         setLogoutLoading(false);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-[470px] flex-col", children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.default, { showBackButton: false, showCloseButton: false, title: "Settings" }), (0, jsx_runtime_1.jsx)("div", { className: "p-5", children: (0, jsx_runtime_1.jsx)("div", { className: "b3-modal-settings-profile-card dark:border-b3-line dark:bg-b3-background flex items-center rounded-xl border border-[#e4e4e7] bg-[#f4f4f5] p-4", children: (0, jsx_runtime_1.jsx)(SettingsProfileCard_1.default, {}) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3 px-5", children: [(0, jsx_runtime_1.jsx)(SettingsMenuItem_1.default, { icon: (0, jsx_runtime_1.jsx)("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z", fill: "#F4F4F5" }) }), title: "Linked Accounts", subtitle: `${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`, onClick: () => handleNavigate("linkAccount") }), (0, jsx_runtime_1.jsx)(SettingsMenuItem_1.default, { icon: (0, jsx_runtime_1.jsx)("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z", fill: "#F4F4F5" }) }), title: "Notifications", subtitle: "Manage your notifications", onClick: () => handleNavigate("notifications") })] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-auto px-5 pb-5", children: (0, jsx_runtime_1.jsxs)("button", { className: "b3-modal-sign-out-button border-b3-line hover:bg-b3-line bg-b3-background dark:bg-b3-background dark:border-b3-line dark:hover:bg-b3-line/80 flex w-full items-center justify-center gap-1.5 rounded-xl border border-solid p-3 transition-colors", onClick: onLogoutEnhanced, disabled: logoutLoading, style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-[470px] flex-col", children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.default, { showBackButton: false, showCloseButton: false, title: "Settings" }), (0, jsx_runtime_1.jsx)("div", { className: "p-5", children: (0, jsx_runtime_1.jsx)("div", { className: "b3-modal-settings-profile-card dark:border-b3-line dark:bg-b3-background flex items-center rounded-xl border border-[#e4e4e7] bg-[#f4f4f5] p-4", children: (0, jsx_runtime_1.jsx)(SettingsProfileCard_1.default, {}) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3 px-5", children: [(0, jsx_runtime_1.jsx)(SettingsMenuItem_1.default, { icon: (0, jsx_runtime_1.jsx)("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z", fill: "#F4F4F5" }) }), title: "Linked Accounts", subtitle: `${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`, onClick: () => handleNavigate("linkAccount") }), (0, jsx_runtime_1.jsx)(SettingsMenuItem_1.default, { icon: (0, jsx_runtime_1.jsx)("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z", fill: "#F4F4F5" }) }), title: "Notifications", subtitle: "Manage your notifications", onClick: () => handleNavigate("notifications") }), (0, jsx_runtime_1.jsx)(SettingsMenuItem_1.default, { icon: (0, jsx_runtime_1.jsx)("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z", fill: "#F4F4F5" }) }), title: "Stay signed in", subtitle: session_duration_1.SESSION_DURATION_LABELS[sessionDays] ?? `${sessionDays} days`, onClick: () => handleNavigate("sessionDuration") })] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-auto px-5 pb-5", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "b3-modal-sign-out-button border-b3-line hover:bg-b3-line bg-b3-background dark:bg-b3-background dark:border-b3-line dark:hover:bg-b3-line/80 flex w-full items-center justify-center gap-1.5 rounded-xl border border-solid p-3 transition-colors", onClick: onLogoutEnhanced, disabled: logoutLoading, style: {
                         boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05)",
                     }, children: [logoutLoading ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-b3-grey animate-spin", size: 20 })) : ((0, jsx_runtime_1.jsx)(SignOutIcon_1.default, { size: 20, className: "text-b3-grey", color: "currentColor" })), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-grey dark:text-b3-foreground-muted font-neue-montreal-semibold text-base", children: "Sign out" })] }) })] }));
 };

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/components/Toast/ToastContext.d.ts

@@ -11,6 +11,9 @@ interface ToastContextType {
     addToast: (type: ToastType, message: string, duration?: number) => string;
     removeToast: (id: string) => void;
     clearAll: () => void;
+    headerMode: boolean;
+    setHeaderMode: (enabled: boolean) => void;
+    latestToast: ToastItem | null;
 }
 export declare function ToastProvider({ children }: {
     children: React.ReactNode;

package/dist/cjs/global-account/react/components/Toast/ToastContext.js

@@ -8,6 +8,9 @@ const ToastContext = (0, react_1.createContext)(undefined);
 let globalToastCounter = 0;
 function ToastProvider({ children }) {
     const [toasts, setToasts] = (0, react_1.useState)([]);
+    const [headerMode, setHeaderMode] = (0, react_1.useState)(false);
+    const headerModeRef = (0, react_1.useRef)(false);
+    const [latestToast, setLatestToast] = (0, react_1.useState)(null);
     const timeoutsRef = (0, react_1.useRef)(new Map());
     const removeToast = (0, react_1.useCallback)((id) => {
         setToasts(prev => prev.filter(toast => toast.id !== id));
@@ -26,12 +29,23 @@ function ToastProvider({ children }) {
             duration,
             createdAt: Date.now(),
         };
-        setToasts(prev => [...prev, newToast]);
-        if (duration > 0) {
-            const timeout = setTimeout(() => {
-                removeToast(id);
-            }, duration);
-            timeoutsRef.current.set(id, timeout);
+        if (headerModeRef.current) {
+            setLatestToast(newToast);
+            if (duration > 0) {
+                const timeout = setTimeout(() => {
+                    setLatestToast(null);
+                }, duration);
+                timeoutsRef.current.set(id, timeout);
+            }
+        }
+        else {
+            setToasts(prev => [...prev, newToast]);
+            if (duration > 0) {
+                const timeout = setTimeout(() => {
+                    removeToast(id);
+                }, duration);
+                timeoutsRef.current.set(id, timeout);
+            }
         }
         return id;
     }, [removeToast]);
@@ -40,6 +54,15 @@ function ToastProvider({ children }) {
         timeoutsRef.current.clear();
         setToasts([]);
     }, []);
+    const setHeaderModeCallback = (0, react_1.useCallback)((enabled) => {
+        setHeaderMode(enabled);
+        headerModeRef.current = enabled;
+        if (!enabled) {
+            setLatestToast(null);
+            timeoutsRef.current.forEach(timeout => clearTimeout(timeout));
+            timeoutsRef.current.clear();
+        }
+    }, []);
     // Cleanup on unmount
     (0, react_1.useEffect)(() => {
         const timeouts = timeoutsRef.current;
@@ -48,7 +71,7 @@ function ToastProvider({ children }) {
             timeouts.clear();
         };
     }, []);
-    return (0, jsx_runtime_1.jsx)(ToastContext.Provider, { value: { toasts, addToast, removeToast, clearAll }, children: children });
+    return ((0, jsx_runtime_1.jsx)(ToastContext.Provider, { value: { toasts, addToast, removeToast, clearAll, headerMode, setHeaderMode: setHeaderModeCallback, latestToast }, children: children }));
 }
 function useToastContext() {
     const context = (0, react_1.useContext)(ToastContext);

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

@@ -27,7 +27,7 @@ const debug = (0, debug_1.debugB3React)("useAuth");
  * This hook provides 1:1 feature parity with useAuthentication.ts
  */
 function useAuth() {
-    const { onConnectCallback } = (0, react_2.useContext)(LocalSDKProvider_1.LocalSDKContext);
+    const { onConnectCallback, disableBSMNTAuthentication } = (0, react_2.useContext)(LocalSDKProvider_1.LocalSDKContext);
     const { disconnect } = (0, react_3.useDisconnect)();
     const wallets = (0, react_3.useConnectedWallets)();
     const activeWallet = (0, react_3.useActiveWallet)();
@@ -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)();
@@ -69,8 +69,10 @@ function useAuth() {
             }
             // Authenticate with BSMNT
             try {
-                const b3Jwt = await (0, bsmnt_1.authenticateWithB3JWT)(response.accessToken);
-                debug("BSMNT re-authentication successful", b3Jwt);
+                if (!disableBSMNTAuthentication) {
+                    const b3Jwt = await (0, bsmnt_1.authenticateWithB3JWT)(response.accessToken);
+                    debug("BSMNT re-authentication successful", b3Jwt);
+                }
             }
             catch (bsmntError) {
                 // BSMNT authentication failure shouldn't block the main auth flow
@@ -82,7 +84,7 @@ function useAuth() {
             debug("Re-authentication failed", err);
             throw err;
         }
-    }, [setUser]);
+    }, [setUser, disableBSMNTAuthentication]);
     const syncWagmi = (0, react_2.useCallback)(async () => {
         function syncWagmiFunc() {
             const connectors = (0, core_1.getConnectors)(wagmiConfig);
@@ -126,9 +128,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]);
@@ -145,9 +145,11 @@ function useAuth() {
             setIsAuthenticated(true);
             setIsAuthenticating(false);
             debug("Re-authenticated successfully", { userAuth });
-            // Authenticate on BSMNT with B3 JWT
-            const b3Jwt = await (0, bsmnt_1.authenticateWithB3JWT)(userAuth.accessToken);
-            debug("@@b3Jwt", b3Jwt);
+            if (!disableBSMNTAuthentication) {
+                // Authenticate on BSMNT with B3 JWT
+                const b3Jwt = await (0, bsmnt_1.authenticateWithB3JWT)(userAuth.accessToken);
+                debug("@@b3Jwt", b3Jwt);
+            }
             return userAuth;
         }
         catch (error) {
@@ -157,7 +159,14 @@ function useAuth() {
             setIsAuthenticating(false);
             throw new Error("Authentication required. Please authenticate.");
         }
-    }, [reAuthenticate, setIsAuthenticated, setIsAuthenticating, setUser, setHasStartedConnecting]);
+    }, [
+        reAuthenticate,
+        setIsAuthenticated,
+        setIsAuthenticating,
+        setUser,
+        setHasStartedConnecting,
+        disableBSMNTAuthentication,
+    ]);
     /**
      * Authenticate with B3
      *
@@ -187,8 +196,10 @@ function useAuth() {
             }
             // Step 3: Authenticate with BSMNT for basement integration
             try {
-                const b3Jwt = await (0, bsmnt_1.authenticateWithB3JWT)(response.accessToken);
-                debug("BSMNT authentication successful", b3Jwt);
+                if (!disableBSMNTAuthentication) {
+                    const b3Jwt = await (0, bsmnt_1.authenticateWithB3JWT)(response.accessToken);
+                    debug("BSMNT authentication successful", b3Jwt);
+                }
             }
             catch (bsmntError) {
                 // BSMNT authentication failure shouldn't block the main auth flow
@@ -200,7 +211,7 @@ function useAuth() {
             debug("Authentication failed", err);
             throw err;
         }
-    }, [referralCode, setUser]);
+    }, [referralCode, setUser, disableBSMNTAuthentication]);
     /**
      * Handle wallet connection
      */