@b3dotfun/sdk 0.1.69 → 0.1.70-alpha.1

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

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoginStepBetterAuth = LoginStepBetterAuth;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("../../../../../global-account/react");
+const debug_1 = require("../../../../../shared/utils/debug");
+const react_2 = require("react");
+const useBetterAuth_1 = require("../../../hooks/useBetterAuth");
+const AuthButton_1 = require("../components/AuthButton");
+const PasswordInput_1 = require("../components/PasswordInput");
+const debug = (0, debug_1.debugB3React)("LoginStepBetterAuth");
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const SOCIAL_PROVIDERS = [
+    { id: "google", label: "Google" },
+    { id: "github", label: "GitHub" },
+    { id: "discord", label: "Discord" },
+    { id: "microsoft", label: "Microsoft" },
+    { id: "slack", label: "Slack" },
+];
+function LoginStepBetterAuth({ onSuccess, onError, verifyEmailRedirectTo }) {
+    const { partnerId } = (0, react_1.useB3Config)();
+    const { signInWithEmail, signUpWithEmail, signInWithSocial, requestPasswordReset } = (0, useBetterAuth_1.useBetterAuth)();
+    const [mode, setMode] = (0, react_2.useState)("sign-in");
+    const [showEmailForm, setShowEmailForm] = (0, react_2.useState)(false);
+    const [email, setEmail] = (0, react_2.useState)("");
+    const [password, setPassword] = (0, react_2.useState)("");
+    const [name, setName] = (0, react_2.useState)("");
+    const [isLoading, setIsLoading] = (0, react_2.useState)(false);
+    const [error, setError] = (0, react_2.useState)(null);
+    const [resetEmailSent, setResetEmailSent] = (0, react_2.useState)(false);
+    const [verificationSent, setVerificationSent] = (0, react_2.useState)(false);
+    const handleEmailSubmit = async () => {
+        const normalizedEmail = email.trim().toLowerCase();
+        if (!EMAIL_REGEX.test(normalizedEmail)) {
+            setError("Please enter a valid email address");
+            return;
+        }
+        if (!password) {
+            setError("Please enter a password");
+            return;
+        }
+        if (mode === "sign-up" && !name.trim()) {
+            setError("Please enter your name");
+            return;
+        }
+        try {
+            setIsLoading(true);
+            setError(null);
+            if (mode === "sign-up") {
+                debug("Signing up", { email: normalizedEmail, name: name.trim() });
+                await signUpWithEmail(normalizedEmail, password, name.trim(), verifyEmailRedirectTo);
+            }
+            else {
+                debug("Signing in", { email: normalizedEmail });
+                await signInWithEmail(normalizedEmail, password);
+            }
+            debug("Auth successful");
+            onSuccess?.();
+        }
+        catch (err) {
+            if (err instanceof useBetterAuth_1.EmailVerificationRequiredError) {
+                setVerificationSent(true);
+                setError(null);
+            }
+            else {
+                const message = err instanceof Error ? err.message : "Authentication failed";
+                setError(message);
+                await onError?.(err);
+            }
+            debug("Auth failed", err);
+        }
+        finally {
+            setPassword("");
+            setIsLoading(false);
+        }
+    };
+    const handleForgotPassword = async () => {
+        const normalizedEmail = email.trim().toLowerCase();
+        if (!EMAIL_REGEX.test(normalizedEmail)) {
+            setError("Please enter a valid email address");
+            return;
+        }
+        try {
+            setIsLoading(true);
+            setError(null);
+            await requestPasswordReset(normalizedEmail);
+            setResetEmailSent(true);
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : "Failed to send reset email";
+            setError(message);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const handleSocialSignIn = async (provider) => {
+        try {
+            setIsLoading(true);
+            setError(null);
+            await signInWithSocial(provider);
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : `${provider} sign in failed`;
+            setError(message);
+            await onError?.(err);
+            setIsLoading(false);
+        }
+    };
+    if (verificationSent) {
+        return ((0, jsx_runtime_1.jsx)(react_1.LoginStepContainer, { partnerId: partnerId, children: (0, jsx_runtime_1.jsxs)("div", { className: "mb-6 w-full space-y-4 px-3 text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-6 w-6 text-green-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Check your email" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: ["We sent a verification link to ", (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-gray-700 dark:text-gray-200", children: email }), ". Verify your account, then come back and sign in."] }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                            setVerificationSent(false);
+                            setMode("sign-in");
+                            setShowEmailForm(true);
+                            setPassword("");
+                        }, className: "text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300", children: "Back to sign in" })] }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_1.LoginStepContainer, { partnerId: partnerId, children: mode === "forgot-password" ? ((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: "Reset password" }), (0, jsx_runtime_1.jsx)("p", { className: "text-center text-xs text-gray-500", children: resetEmailSent
+                        ? "We've sent a password reset link to your email"
+                        : "Enter your email and we'll send you a reset link" }), resetEmailSent ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-3 py-4 text-center", children: (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-green-600", children: "Check your email for a reset link." }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Input, { type: "email", placeholder: "you@example.com", value: email, onChange: event => setEmail(event.target.value), disabled: isLoading, onKeyDown: event => {
+                                if (event.key === "Enter")
+                                    handleForgotPassword();
+                            } }), error && (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-red-500", children: error }), (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: handleForgotPassword, disabled: isLoading, className: "w-full", children: isLoading ? "Sending..." : "Send reset link" })] })), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                        setMode("sign-in");
+                        setShowEmailForm(true);
+                        setError(null);
+                        setResetEmailSent(false);
+                    }, className: "w-full text-center text-sm text-gray-500 hover:text-gray-700", children: "Back to sign in" })] })) : showEmailForm ? ((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: mode === "sign-in" ? "Sign in with email" : "Create an account" }), mode === "sign-up" && ((0, jsx_runtime_1.jsx)(react_1.Input, { type: "text", placeholder: "Your name", value: name, onChange: event => setName(event.target.value), disabled: isLoading })), (0, jsx_runtime_1.jsx)(react_1.Input, { type: "email", placeholder: "you@example.com", value: email, onChange: event => setEmail(event.target.value), disabled: isLoading }), (0, jsx_runtime_1.jsx)(PasswordInput_1.PasswordInput, { value: password, onChange: event => setPassword(event.target.value), disabled: isLoading, onKeyDown: event => {
+                        if (event.key === "Enter")
+                            handleEmailSubmit();
+                    }, className: "pr-11" }, mode), error && (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-red-500", children: error }), (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: handleEmailSubmit, disabled: isLoading, className: "w-full", children: isLoading ? "Loading..." : mode === "sign-in" ? "Sign in" : "Sign up" }), mode === "sign-in" && ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                        setMode("forgot-password");
+                        setError(null);
+                    }, disabled: isLoading, className: "w-full text-center text-xs text-gray-500 hover:text-gray-700", children: "Forgot password?" })), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                        setMode(mode === "sign-in" ? "sign-up" : "sign-in");
+                        setError(null);
+                    }, disabled: isLoading, className: "w-full text-center text-sm text-gray-500 hover:text-gray-700", children: mode === "sign-in" ? "Don't have an account? Sign up" : "Already have an account? Sign in" }), (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "outline", onClick: () => {
+                        setShowEmailForm(false);
+                        setError(null);
+                    }, disabled: isLoading, className: "w-full", children: "Back" })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "mb-6 w-full space-y-4 px-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "grid w-full grid-cols-3 gap-4", children: SOCIAL_PROVIDERS.map(provider => ((0, jsx_runtime_1.jsx)(AuthButton_1.AuthButton, { strategy: provider.id, onClick: () => handleSocialSignIn(provider.id), isLoading: isLoading }, provider.id))) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-gray-200" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-gray-400", children: "or" }), (0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-gray-200" })] }), (0, jsx_runtime_1.jsx)(AuthButton_1.AuthButton, { strategy: "email", onClick: () => setShowEmailForm(true), isLoading: isLoading }), error && (0, jsx_runtime_1.jsx)("p", { className: "text-center text-sm text-red-500", children: error })] })) }));
+}

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) };
     }
@@ -45,11 +49,24 @@ function getConnectOptionsFromStrategy(strategy) {
 }
 exports.strategyIcons = {
     google: "https://cdn.b3.fun/google.svg",
+    github: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg",
     x: "https://cdn.b3.fun/x.svg?1",
     discord: "https://cdn.b3.fun/discord.svg",
     apple: "https://cdn.b3.fun/apple.svg",
     guest: "https://cdn.b3.fun/incognito.svg",
-    // Add more strategies as needed
+    microsoft: "https://upload.wikimedia.org/wikipedia/commons/4/44/Microsoft_logo.svg",
+    slack: "https://upload.wikimedia.org/wikipedia/commons/d/d5/Slack_icon_2019.svg",
+};
+exports.strategyLabels = {
+    google: "Google",
+    x: "X",
+    discord: "Discord",
+    apple: "Apple",
+    guest: "Guest",
+    github: "GitHub",
+    email: "Email",
+    microsoft: "Microsoft",
+    slack: "Slack",
 };
 // Test it
 // console.log(getConnectOptionsFromStrategy("io.metamask"));

package/dist/cjs/global-account/react/components/SingleUserSearchSelector/SingleUserSearchSelector.js

@@ -7,6 +7,7 @@ const utils_1 = require("../../../../shared/utils");
 const lucide_react_1 = require("lucide-react");
 const react_1 = require("react");
 const profileApi_1 = require("../../utils/profileApi");
+const profileDisplay_1 = require("../../utils/profileDisplay");
 const IPFSMediaRenderer_1 = require("../IPFSMediaRenderer/IPFSMediaRenderer");
 const input_1 = require("../ui/input");
 /**
@@ -159,5 +160,5 @@ function SingleUserSearchSelector({ onSelectUser, profileTypeFilter, placeholder
     const getProfileTypeBadges = (profiles) => {
         return profiles.map(p => p.type);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("single-user-search-selector b3-root relative w-full", className), ref: dropdownRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: "single-user-search-input-wrapper relative flex items-center", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "single-user-search-icon pointer-events-none absolute text-gray-400", style: { left: "12px", width: "16px", height: "16px" } }), (0, jsx_runtime_1.jsx)(input_1.Input, { ref: inputRef, type: "text", value: searchQuery, onChange: e => setSearchQuery(e.target.value), placeholder: placeholder, className: (0, utils_1.cn)("single-user-search-input w-full border-gray-300 focus:border-blue-500 focus:ring-blue-500"), style: { paddingLeft: "44px", paddingRight: "44px" } }), showClearButton && searchQuery && ((0, jsx_runtime_1.jsx)("button", { onClick: handleClear, className: "single-user-search-clear-button absolute text-gray-400 transition-colors hover:text-gray-600", style: { right: "12px" }, type: "button", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { style: { width: "16px", height: "16px" } }) }))] }), isSearching && (0, jsx_runtime_1.jsx)("div", { className: "single-user-search-loading mt-2 text-sm text-gray-500", children: "Searching..." }), error && !isSearching && (0, jsx_runtime_1.jsx)("div", { className: "single-user-search-error mt-2 text-sm text-red-500", children: error }), showDropdown && searchResult && !isSearching && ((0, jsx_runtime_1.jsx)("div", { className: "single-user-search-dropdown absolute z-50 mt-2 w-full rounded-lg border border-gray-200 bg-white shadow-lg", children: (0, jsx_runtime_1.jsx)("button", { onClick: () => handleSelectUser(searchResult), className: "single-user-search-result-button w-full px-4 py-3 text-left transition-colors hover:bg-gray-50", type: "button", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-avatar h-11 w-11 shrink-0", children: (0, jsx_runtime_1.jsx)(IPFSMediaRenderer_1.IPFSMediaRenderer, { src: searchResult.avatar, alt: getDisplayName(searchResult), className: "h-full w-full rounded-full object-cover" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "single-user-search-result-info min-w-0 flex-1 pt-0.5", children: [(0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-name text-base font-semibold text-gray-900", children: getDisplayName(searchResult) }), searchResult.address && ((0, jsx_runtime_1.jsxs)("div", { className: "single-user-search-result-address mt-1 font-mono text-xs text-gray-500", children: [searchResult.address.slice(0, 6), "...", searchResult.address.slice(-4)] })), searchResult.bio && ((0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-bio mt-1.5 line-clamp-2 text-sm text-gray-600", children: searchResult.bio })), showBadges && ((0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-badges mt-2 flex flex-wrap gap-1.5", children: getProfileTypeBadges(searchResult.profiles).map((type, index) => ((0, jsx_runtime_1.jsx)("span", { className: "single-user-search-result-badge inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800", children: type }, `${type}-${index}`))) }))] })] }) }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("single-user-search-selector b3-root relative w-full", className), ref: dropdownRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: "single-user-search-input-wrapper relative flex items-center", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "single-user-search-icon pointer-events-none absolute text-gray-400", style: { left: "12px", width: "16px", height: "16px" } }), (0, jsx_runtime_1.jsx)(input_1.Input, { ref: inputRef, type: "text", value: searchQuery, onChange: e => setSearchQuery(e.target.value), placeholder: placeholder, className: (0, utils_1.cn)("single-user-search-input w-full border-gray-300 focus:border-blue-500 focus:ring-blue-500"), style: { paddingLeft: "44px", paddingRight: "44px" } }), showClearButton && searchQuery && ((0, jsx_runtime_1.jsx)("button", { onClick: handleClear, className: "single-user-search-clear-button absolute text-gray-400 transition-colors hover:text-gray-600", style: { right: "12px" }, type: "button", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { style: { width: "16px", height: "16px" } }) }))] }), isSearching && (0, jsx_runtime_1.jsx)("div", { className: "single-user-search-loading mt-2 text-sm text-gray-500", children: "Searching..." }), error && !isSearching && (0, jsx_runtime_1.jsx)("div", { className: "single-user-search-error mt-2 text-sm text-red-500", children: error }), showDropdown && searchResult && !isSearching && ((0, jsx_runtime_1.jsx)("div", { className: "single-user-search-dropdown absolute z-50 mt-2 w-full rounded-lg border border-gray-200 bg-white shadow-lg", children: (0, jsx_runtime_1.jsx)("button", { onClick: () => handleSelectUser(searchResult), className: "single-user-search-result-button w-full px-4 py-3 text-left transition-colors hover:bg-gray-50", type: "button", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-avatar h-11 w-11 shrink-0", children: (0, jsx_runtime_1.jsx)(IPFSMediaRenderer_1.IPFSMediaRenderer, { src: (0, profileDisplay_1.validateImageUrl)(searchResult.avatar) ?? undefined, alt: getDisplayName(searchResult), className: "h-full w-full rounded-full object-cover" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "single-user-search-result-info min-w-0 flex-1 pt-0.5", children: [(0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-name text-base font-semibold text-gray-900", children: getDisplayName(searchResult) }), searchResult.address && ((0, jsx_runtime_1.jsxs)("div", { className: "single-user-search-result-address mt-1 font-mono text-xs text-gray-500", children: [searchResult.address.slice(0, 6), "...", searchResult.address.slice(-4)] })), searchResult.bio && ((0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-bio mt-1.5 line-clamp-2 text-sm text-gray-600", children: searchResult.bio })), showBadges && ((0, jsx_runtime_1.jsx)("div", { className: "single-user-search-result-badges mt-2 flex flex-wrap gap-1.5", children: getProfileTypeBadges(searchResult.profiles).map((type, index) => ((0, jsx_runtime_1.jsx)("span", { className: "single-user-search-result-badge inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800", children: type }, `${type}-${index}`))) }))] })] }) }) }))] }));
 }

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

@@ -0,0 +1,18 @@
+interface UserAvatarProps {
+    /** Direct avatar URL (IPFS or HTTP). Resolved and validated internally. */
+    avatarUrl?: string | null;
+    /** Seed for the generated fallback avatar + alt text. Use email, username, or address. */
+    name?: string;
+    /** Avatar size in pixels (square). */
+    size?: number;
+    /** Additional className for the outer container. */
+    className?: string;
+}
+/**
+ * Renders a user avatar with IPFS support and boring-avatars fallback.
+ *
+ * - If `avatarUrl` is provided and valid, renders via IPFSMediaRenderer.
+ * - On load failure or missing URL, falls back to a deterministic boring-avatars beam.
+ */
+export declare function UserAvatar({ avatarUrl, name, size, className }: UserAvatarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/global-account/react/components/UserAvatar/UserAvatar.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserAvatar = UserAvatar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const profileDisplay_1 = require("../../../../global-account/react/utils/profileDisplay");
+const constants_1 = require("../../../../shared/constants");
+const boring_avatars_1 = __importDefault(require("boring-avatars"));
+const react_1 = require("react");
+const IPFSMediaRenderer_1 = require("../IPFSMediaRenderer/IPFSMediaRenderer");
+/**
+ * Renders a user avatar with IPFS support and boring-avatars fallback.
+ *
+ * - If `avatarUrl` is provided and valid, renders via IPFSMediaRenderer.
+ * - On load failure or missing URL, falls back to a deterministic boring-avatars beam.
+ */
+function UserAvatar({ avatarUrl, name = "user", size = 40, className }) {
+    const resolvedSrc = (0, profileDisplay_1.validateImageUrl)(avatarUrl);
+    const [imgError, setImgError] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setImgError(false);
+    }, [avatarUrl]);
+    const handleImgError = (0, react_1.useCallback)(() => setImgError(true), []);
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: { width: size, height: size, minWidth: size, minHeight: size }, children: resolvedSrc && !imgError ? ((0, jsx_runtime_1.jsx)("div", { onErrorCapture: handleImgError, className: "h-full w-full overflow-hidden rounded-full", children: (0, jsx_runtime_1.jsx)(IPFSMediaRenderer_1.IPFSMediaRenderer, { src: resolvedSrc, alt: name, className: "h-full w-full object-cover" }) })) : ((0, jsx_runtime_1.jsx)(boring_avatars_1.default, { name: name, variant: "beam", size: size, colors: constants_1.AVATAR_COLORS })) }));
+}

package/dist/cjs/global-account/react/components/custom/Button.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "b3" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "default" | "link" | "b3" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {

package/dist/cjs/global-account/react/components/index.d.ts

@@ -1,10 +1,15 @@
 export { B3DynamicModal } from "./B3DynamicModal";
 export { B3Provider } from "./B3Provider/B3Provider";
+export type { AuthStrategy } from "./B3Provider/B3ConfigProvider";
 export { RelayKitProviderWrapper } from "./B3Provider/RelayKitProviderWrapper";
 export { useB3 } from "./B3Provider/useB3";
 export { useB3Account } from "./B3Provider/useB3Account";
 export { useB3Config } from "./B3Provider/useB3Config";
+export { useBetterAuthClient } from "./B3Provider/BetterAuthClientProvider";
 export { StyleRoot } from "./StyleRoot";
+export { BetterAuthResetPassword, type BetterAuthResetPasswordProps } from "./SignInWithB3/BetterAuthResetPassword";
+export { BetterAuthSignIn, type BetterAuthSignInProps } from "./SignInWithB3/BetterAuthSignIn";
+export { BetterAuthVerifyEmail, type BetterAuthVerifyEmailProps, type BetterAuthVerifyEmailState, } from "./SignInWithB3/BetterAuthVerifyEmail";
 export { AuthButton } from "./SignInWithB3/components/AuthButton";
 export { PermissionItem } from "./SignInWithB3/components/PermissionItem";
 export { WalletRow } from "./SignInWithB3/components/WalletRow";
@@ -14,6 +19,7 @@ export { SignInWithB3Privy } from "./SignInWithB3/SignInWithB3Privy";
 export { LoginStepContainer } from "./SignInWithB3/steps/LoginStep";
 export { getConnectOptionsFromStrategy, isWalletType, type AllowedStrategy } from "./SignInWithB3/utils/signInUtils";
 export { ManageAccount } from "./ManageAccount/ManageAccount";
+export { UserAvatar } from "./UserAvatar/UserAvatar";
 export { Deposit } from "./Deposit/Deposit";
 export { Send } from "./Send/Send";
 export { IPFSMediaRenderer } from "./IPFSMediaRenderer/IPFSMediaRenderer";