@b3dotfun/sdk 0.1.69 → 0.1.70-alpha.10

package/dist/esm/global-account/react/components/SignInWithB3/SignIn.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { IPFSMediaRenderer, SignInWithB3, StyleRoot, useAccountWallet, useAuthentication, useB3Config, useIsMobile, } from "../../../../global-account/react/index.js";
+import { IPFSMediaRenderer, SignInWithB3, StyleRoot, useAccountWallet, useAuthStore, useAuthentication, useB3Config, useIsMobile, } from "../../../../global-account/react/index.js";
 import Icon from "../../../../global-account/react/components/custom/Icon.js";
 import { ecosystemWalletId } from "../../../../shared/constants/index.js";
 import { cn, truncateAddress } from "../../../../shared/utils/index.js";
 import { Menu, MenuButton, MenuItems, Transition } from "@headlessui/react";
 import { useEffect } from "react";
 import { useConnectedWallets, useSetActiveWallet, useWalletImage } from "thirdweb/react";
+import { useUser } from "../../hooks/useUser.js";
+import { UserAvatar } from "../UserAvatar/UserAvatar.js";
 import { ManageAccountButton } from "../custom/ManageAccountButton.js";
 export function SignIn(props) {
     const { className } = props;
-    const { automaticallySetFirstEoa, partnerId } = useB3Config();
+    const { automaticallySetFirstEoa, partnerId, authStrategy } = useB3Config();
+    const isBetterAuth = authStrategy === "better-auth";
     const { address: globalAddress, ensName, connectedSmartWallet, connectedEOAWallet, isActiveSmartWallet, isActiveEOAWallet, smartWalletIcon, } = useAccountWallet();
     const { data: walletImage } = useWalletImage(connectedEOAWallet?.id);
     const isMobile = useIsMobile();
@@ -19,6 +22,10 @@ export function SignIn(props) {
     };
     const connectedWallets = useConnectedWallets();
     const setActiveWallet = useSetActiveWallet();
+    // Better Auth state
+    const isAuthenticated = useAuthStore(state => state.isAuthenticated);
+    const { user } = useUser();
+    const userDisplayName = user?.username || user?.email || "Account";
     const handleSetActiveAccount = (selectedWalletId) => {
         if (!selectedWalletId ||
             !connectedWallets ||
@@ -34,12 +41,15 @@ export function SignIn(props) {
             setActiveWallet(connectedEOAWallet);
         }
     }, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet, automaticallySetFirstEoa]);
+    const isLoggedIn = isBetterAuth ? isAuthenticated : !!globalAddress;
     // Desktop version - original dropdown menu
-    return (_jsx(StyleRoot, { children: _jsx(Menu, { className: `relative flex items-center ${className || ""}`, as: "div", children: globalAddress ? (_jsxs(_Fragment, { children: [_jsxs(MenuButton, { className: "bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3 focus:outline-none", children: [!!walletImage && (_jsx(IPFSMediaRenderer, { src: walletImage, alt: "Wallet Image", className: "bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100" })), _jsx("div", { className: "text-as-primary", children: ensName ? ensName : truncateAddress(globalAddress) })] }), _jsx(Transition, { enter: "duration-200 ease-out", enterFrom: "scale-95 opacity-0", enterTo: "scale-100 opacity-100", leave: "duration-300 ease-out", leaveFrom: "scale-100 opacity-100", leaveTo: "scale-95 opacity-0", children: _jsx(MenuItems, { className: "b3-root absolute -right-4 top-full min-w-64 rounded-2xl border focus:outline-none lg:right-0", modal: false, 
+    return (_jsx(StyleRoot, { children: _jsx(Menu, { className: `relative flex items-center ${className || ""}`, as: "div", children: isLoggedIn ? (_jsxs(_Fragment, { children: [_jsxs(MenuButton, { className: "bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3 focus:outline-none", children: [isBetterAuth ? (_jsx(UserAvatar, { avatarUrl: user?.avatar, name: userDisplayName, size: 24 })) : (!!walletImage && (_jsx(IPFSMediaRenderer, { src: walletImage, alt: "Wallet Image", className: "bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100" }))), _jsx("div", { className: "text-as-primary", children: isBetterAuth ? userDisplayName : ensName ? ensName : truncateAddress(globalAddress ?? "") })] }), _jsx(Transition, { enter: "duration-200 ease-out", enterFrom: "scale-95 opacity-0", enterTo: "scale-100 opacity-100", leave: "duration-300 ease-out", leaveFrom: "scale-100 opacity-100", leaveTo: "scale-95 opacity-0", children: _jsx(MenuItems, { className: "b3-root absolute -right-4 top-full min-w-64 rounded-2xl border focus:outline-none lg:right-0", modal: false, 
                             // TODO: Figure out why setting anchor on mobile causes z-index issues where it appears under elements
-                            anchor: isMobile ? "top end" : undefined, children: _jsxs("div", { className: "bg-b3-react-background", children: [connectedEOAWallet ? (_jsxs("div", { className: cn("border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3"), onClick: () => handleSetActiveAccount(connectedEOAWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: walletImage, alt: connectedEOAWallet?.id }), _jsxs("div", { className: "ml-4 grow", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress) })] })] }), isActiveEOAWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] })) : (connectedSmartWallet && (_jsxs("div", { className: cn("mb-2 flex cursor-pointer items-center justify-between rounded-xl p-3", isActiveSmartWallet
+                            anchor: isMobile ? "top end" : undefined, children: _jsxs("div", { className: "bg-b3-react-background", children: [isBetterAuth ? (
+                                    /* Better Auth: show user info instead of wallet switching */
+                                    _jsxs("div", { className: "flex items-center gap-3 rounded-xl p-3", children: [_jsx(UserAvatar, { avatarUrl: user?.avatar, name: userDisplayName, size: 48 }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [user?.username && _jsx("div", { className: "text-b3-react-primary font-semibold", children: user.username }), user?.email && _jsx("div", { className: "text-b3-react-secondary text-sm", children: user.email })] })] })) : connectedEOAWallet ? (_jsxs("div", { className: cn("border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3"), onClick: () => handleSetActiveAccount(connectedEOAWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: walletImage, alt: connectedEOAWallet?.id }), _jsxs("div", { className: "ml-4 grow", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress ?? "") })] })] }), isActiveEOAWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] })) : (connectedSmartWallet && (_jsxs("div", { className: cn("mb-2 flex cursor-pointer items-center justify-between rounded-xl p-3", isActiveSmartWallet
                                             ? "bg-b3-react-background"
-                                            : "bg-b3-react-background hover:bg-b3-react-background"), onClick: () => handleSetActiveAccount(connectedSmartWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: smartWalletIcon, alt: connectedSmartWallet?.id }), _jsxs("div", { className: "grow pl-4", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress) }), _jsx("div", { children: "Smart wallet" })] })] }), isActiveSmartWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] }))), _jsx("div", { className: "ml-3", children: _jsx(ManageAccountButton, { ...props, className: "w-[calc(100%-12px)]" }) }), _jsx("button", { className: "mb-2 w-full space-y-1", onClick: onDisconnect, children: _jsxs("div", { className: "hover:bg-b3-react-background group flex h-12 items-center rounded-xl px-4 transition-colors", children: [_jsx(Icon, { className: "fill-b3-react-primary mr-4 shrink-0 transition-colors", name: "logout" }), _jsx("div", { className: "text-b3-react-primary mr-auto transition-colors", children: "Disconnect" })] }) })] }) }) })] })) : (_jsx(SignInWithB3, { closeAfterLogin: true, onLoginSuccess: async (globalAccount) => {
+                                            : "bg-b3-react-background hover:bg-b3-react-background"), onClick: () => handleSetActiveAccount(connectedSmartWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: smartWalletIcon, alt: connectedSmartWallet?.id }), _jsxs("div", { className: "grow pl-4", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress ?? "") }), _jsx("div", { children: "Smart wallet" })] })] }), isActiveSmartWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] }))), _jsx("div", { className: "ml-3", children: _jsx(ManageAccountButton, { ...props, className: "w-[calc(100%-12px)]" }) }), _jsx("button", { className: "mb-2 w-full space-y-1", onClick: onDisconnect, children: _jsxs("div", { className: "hover:bg-b3-react-background group flex h-12 items-center rounded-xl px-4 transition-colors", children: [_jsx(Icon, { className: "fill-b3-react-primary mr-4 shrink-0 transition-colors", name: "logout" }), _jsx("div", { className: "text-b3-react-primary mr-auto transition-colors", children: isBetterAuth ? "Sign out" : "Disconnect" })] }) })] }) }) })] })) : (_jsx(SignInWithB3, { closeAfterLogin: true, onLoginSuccess: async (globalAccount) => {
                     console.log("User authenticated with Global Account!", globalAccount);
                 }, ...props })) }) }));
 }

package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3Flow.d.ts

@@ -3,4 +3,4 @@ import { SignInWithB3ModalProps } from "../../../../global-account/react";
  * Component that manages the authentication flow for Sign In With B3
  * Handles different login providers, authentication steps, and session key management
  */
-export declare function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onError, chain, sessionKeyAddress, partnerId, closeAfterLogin, source, signersEnabled, }: SignInWithB3ModalProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onError, chain, sessionKeyAddress, partnerId, closeAfterLogin, source, signersEnabled, verifyEmailRedirectTo, }: SignInWithB3ModalProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3Flow.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Loading, useAuthentication, useAuthStore, useB3Config, useGetAllTWSigners, useModalStore, } from "../../../../global-account/react/index.js";
+import { LoginStepBetterAuth } from "./steps/LoginStepBetterAuth.js";
 import { debugB3React } from "../../../../shared/utils/debug.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useActiveAccount } from "thirdweb/react";
-import { SignInWithB3Privy } from "./SignInWithB3Privy.js";
 import { LoginStep, LoginStepContainer } from "./steps/LoginStep.js";
 import { LoginStepCustom } from "./steps/LoginStepCustom.js";
 const debug = debugB3React("SignInWithB3Flow");
@@ -12,19 +12,21 @@ const MAX_REFETCH_ATTEMPTS = 20;
  * Component that manages the authentication flow for Sign In With B3
  * Handles different login providers, authentication steps, and session key management
  */
-export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onError, chain, sessionKeyAddress, partnerId, closeAfterLogin = false, source = "signInWithB3Button", signersEnabled = false, }) {
-    const { automaticallySetFirstEoa } = useB3Config();
+export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onError, chain, sessionKeyAddress, partnerId, closeAfterLogin = false, source = "signInWithB3Button", signersEnabled = false, verifyEmailRedirectTo, }) {
+    const { automaticallySetFirstEoa, authStrategy } = useB3Config();
     // skipAutoConnect: this component intentionally logs out on mount to show a fresh login screen.
     // AuthenticationProvider is the sole owner of useAutoConnect to avoid competing auth cycles.
     const { user, logout } = useAuthentication(partnerId, { skipAutoConnect: true });
     // Tracks whether the pre-login logout has finished.
     // We must not render ConnectEmbed until logout (wallet disconnect) completes,
     // otherwise the wallet state disrupts ConnectEmbed causing a blank modal.
-    const [readyToShowLogin, setReadyToShowLogin] = useState(source === "requestPermissions");
+    const [readyToShowLogin, setReadyToShowLogin] = useState(source === "requestPermissions" || authStrategy === "better-auth");
     const hasLoggedOutRef = useRef(false);
     useEffect(() => {
         if (hasLoggedOutRef.current)
             return;
+        if (authStrategy === "better-auth")
+            return;
         if (source !== "requestPermissions") {
             debug("Logging out before login");
             hasLoggedOutRef.current = true;
@@ -32,7 +34,7 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
                 setReadyToShowLogin(true);
             });
         }
-    }, [source, logout]);
+    }, [source, logout, authStrategy]);
     const [step, setStep] = useState(source === "requestPermissions" ? null : "login");
     const [sessionKeyAdded, setSessionKeyAdded] = useState(source === "requestPermissions" ? true : false);
     const { setB3ModalContentType, setB3ModalOpen, isOpen, contentType } = useModalStore();
@@ -237,15 +239,18 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
     else if (step === "login") {
         // Show loading spinner while: authenticating, waiting for pre-login logout to finish,
         // or fetching signers.
-        if (!readyToShowLogin || isAuthenticating || isFetchingSigners) {
+        if (authStrategy === "better-auth") {
+            // Better Auth manages its own loading/verification states internally.
+            // Don't gate on isAuthenticating — it would unmount the component
+            // and lose verification state when setIsAuthenticating(false) fires.
+            content = (_jsx(LoginStepBetterAuth, { onSuccess: () => handleLoginSuccess({}), onError: onError, verifyEmailRedirectTo: verifyEmailRedirectTo }));
+        }
+        else if (!readyToShowLogin || isAuthenticating || isFetchingSigners) {
             content = (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx("div", { className: "my-8 flex min-h-[350px] items-center justify-center", children: _jsx(Loading, { variant: "white", size: "lg" }) }) }));
         }
         else {
             // Custom strategy
-            if (strategies?.[0] === "privy") {
-                content = _jsx(SignInWithB3Privy, { onSuccess: handleLoginSuccess, chain: chain });
-            }
-            else if (strategies) {
+            if (strategies) {
                 // Strategies are explicitly provided
                 content = (_jsx(LoginStepCustom, { strategies: strategies, chain: chain, onSuccess: handleLoginSuccess, onError: onError, automaticallySetFirstEoa: !!automaticallySetFirstEoa }));
             }

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));
 }

package/dist/esm/global-account/react/components/SignInWithB3/components/PasswordInput.d.ts

@@ -0,0 +1,10 @@
+interface PasswordInputProps {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    className?: string;
+}
+export declare function PasswordInput({ value, onChange, disabled, placeholder, onKeyDown, className, }: PasswordInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/global-account/react/components/SignInWithB3/components/PasswordInput.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input } from "../../../../../global-account/react/index.js";
+import { useState } from "react";
+export function PasswordInput({ value, onChange, disabled, placeholder = "Password", onKeyDown, className, }) {
+    const [showPassword, setShowPassword] = useState(false);
+    return (_jsxs("div", { className: "relative", children: [_jsx(Input, { type: showPassword ? "text" : "password", placeholder: placeholder, value: value, onChange: onChange, disabled: disabled, onKeyDown: onKeyDown, className: className }), _jsx("button", { type: "button", onClick: () => setShowPassword(!showPassword), "aria-label": showPassword ? "Hide password" : "Show password", className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300", tabIndex: -1, children: showPassword ? (_jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" }) })) : (_jsxs("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: [_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" }), _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })] })) })] }));
+}

package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStepBetterAuth.d.ts

@@ -0,0 +1,8 @@
+interface LoginStepBetterAuthProps {
+    onSuccess?: () => void;
+    onError?: (error: Error) => Promise<void>;
+    /** URL Better Auth redirects to after server-side email verification. */
+    verifyEmailRedirectTo?: string;
+}
+export declare function LoginStepBetterAuth({ onSuccess, onError, verifyEmailRedirectTo }: LoginStepBetterAuthProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Input, LoginStepContainer, useB3Config } from "../../../../../global-account/react/index.js";
+import { debugB3React } from "../../../../../shared/utils/debug.js";
+import { useState } from "react";
+import { EmailVerificationRequiredError, useBetterAuth, } from "../../../hooks/useBetterAuth.js";
+import { AuthButton } from "../components/AuthButton.js";
+import { PasswordInput } from "../components/PasswordInput.js";
+const debug = 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" },
+];
+export function LoginStepBetterAuth({ onSuccess, onError, verifyEmailRedirectTo }) {
+    const { partnerId } = useB3Config();
+    const { signInWithEmail, signUpWithEmail, signInWithSocial, requestPasswordReset } = useBetterAuth();
+    const [mode, setMode] = useState("sign-in");
+    const [showEmailForm, setShowEmailForm] = useState(false);
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [name, setName] = useState("");
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [resetEmailSent, setResetEmailSent] = useState(false);
+    const [verificationSent, setVerificationSent] = 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 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 (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsxs("div", { className: "mb-6 w-full space-y-4 px-3 text-center", children: [_jsx("div", { className: "mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100", children: _jsx("svg", { className: "h-6 w-6 text-green-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _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" }) }) }), _jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Check your email" }), _jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: ["We sent a verification link to ", _jsx("span", { className: "font-medium text-gray-700 dark:text-gray-200", children: email }), ". Verify your account, then come back and sign in."] }), _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 (_jsx(LoginStepContainer, { partnerId: partnerId, children: mode === "forgot-password" ? (_jsxs("div", { className: "mb-6 w-full space-y-3 px-3", children: [_jsx("p", { className: "text-center text-sm font-medium text-gray-900 dark:text-gray-100", children: "Reset password" }), _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 ? (_jsx("div", { className: "space-y-3 py-4 text-center", children: _jsx("p", { className: "text-sm text-green-600", children: "Check your email for a reset link." }) })) : (_jsxs(_Fragment, { children: [_jsx(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 && _jsx("p", { className: "text-sm text-red-500", children: error }), _jsx(Button, { onClick: handleForgotPassword, disabled: isLoading, className: "w-full", children: isLoading ? "Sending..." : "Send reset link" })] })), _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 ? (_jsxs("div", { className: "mb-6 w-full space-y-3 px-3", children: [_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" && (_jsx(Input, { type: "text", placeholder: "Your name", value: name, onChange: event => setName(event.target.value), disabled: isLoading })), _jsx(Input, { type: "email", placeholder: "you@example.com", value: email, onChange: event => setEmail(event.target.value), disabled: isLoading }), _jsx(PasswordInput, { value: password, onChange: event => setPassword(event.target.value), disabled: isLoading, onKeyDown: event => {
+                        if (event.key === "Enter")
+                            handleEmailSubmit();
+                    }, className: "pr-11" }, mode), error && _jsx("p", { className: "text-sm text-red-500", children: error }), _jsx(Button, { onClick: handleEmailSubmit, disabled: isLoading, className: "w-full", children: isLoading ? "Loading..." : mode === "sign-in" ? "Sign in" : "Sign up" }), mode === "sign-in" && (_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?" })), _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" }), _jsx(Button, { variant: "outline", onClick: () => {
+                        setShowEmailForm(false);
+                        setError(null);
+                    }, disabled: isLoading, className: "w-full", children: "Back" })] })) : (_jsxs("div", { className: "mb-6 w-full space-y-4 px-3", children: [_jsx("div", { className: "grid w-full grid-cols-3 gap-4", children: SOCIAL_PROVIDERS.map(provider => (_jsx(AuthButton, { strategy: provider.id, onClick: () => handleSocialSignIn(provider.id), isLoading: isLoading }, provider.id))) }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-px flex-1 bg-gray-200" }), _jsx("span", { className: "text-xs text-gray-400", children: "or" }), _jsx("div", { className: "h-px flex-1 bg-gray-200" })] }), _jsx(AuthButton, { strategy: "email", onClick: () => setShowEmailForm(true), isLoading: isLoading }), error && _jsx("p", { className: "text-center text-sm text-red-500", children: error })] })) }));
+}

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

@@ -1,38 +1,52 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AuthButton, Button, getConnectOptionsFromStrategy, isWalletType, LoginStepContainer, useAuthentication, useAuthStore, useB3Config, useConnect, WalletRow, } from "../../../../../global-account/react/index.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AuthButton, Button, getConnectOptionsFromStrategy, Input, isWalletType, LoginStepContainer, useAuthentication, useAuthStore, useB3Config, useConnect, WalletRow, } from "../../../../../global-account/react/index.js";
+import { ecosystemWalletId } from "../../../../../shared/constants/index.js";
 import { debugB3React } from "../../../../../shared/utils/debug.js";
 import { client } from "../../../../../shared/utils/thirdweb.js";
 import { useState } from "react";
-import { useConnect as useConnectTW } from "thirdweb/react";
-import { createWallet } from "thirdweb/wallets";
+import { useConnectedWallets, useConnect as useConnectTW } from "thirdweb/react";
+import { createWallet, preAuthenticate, } from "thirdweb/wallets";
 const debug = debugB3React("LoginStepCustom");
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 export function LoginStepCustom({ onSuccess, onError, chain, strategies, maxInitialWallets = 2, automaticallySetFirstEoa, }) {
     const { partnerId } = useB3Config();
     const [isLoading, setIsLoading] = useState(false);
     const [showAllWallets, setShowAllWallets] = useState(false);
+    const [showEmailFlow, setShowEmailFlow] = useState(false);
+    const [email, setEmail] = useState("");
+    const [verificationCode, setVerificationCode] = useState("");
+    const [emailCodeSent, setEmailCodeSent] = useState(false);
+    const [emailError, setEmailError] = useState(null);
     const { connect } = useConnect(partnerId, chain);
     const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
-    const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
-    const { logout } = useAuthentication(partnerId, { skipAutoConnect: true });
+    const { connect: onAuthConnect, logout } = useAuthentication(partnerId, { skipAutoConnect: true });
     const { connect: connectTW } = useConnectTW();
+    const connectedWallets = useConnectedWallets();
     // Split strategies into auth and wallet types
     const authStrategies = strategies.filter(s => !isWalletType(s));
     const walletStrategies = strategies.filter(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 = getConnectOptionsFromStrategy(strategy);
             let connectResult;
-            if (automaticallySetFirstEoa) {
-                if (!options.wallet?.id) {
+            if (automaticallySetFirstEoa && 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 = createWallet(options.wallet?.id);
+                    const wallet = createWallet(walletId);
                     await wallet.connect({
                         client,
                     });
@@ -40,20 +54,27 @@ export function LoginStepCustom({ onSuccess, onError, chain, strategies, maxInit
                 });
             }
             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);
@@ -61,8 +82,68 @@ export function LoginStepCustom({ onSuccess, onError, chain, strategies, maxInit
             setIsAuthenticating(false);
         }
     };
-    return (_jsxs(LoginStepContainer, { partnerId: partnerId, children: [authStrategies.length > 0 && (_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 (_jsx(AuthButton, { strategy: strategy, onClick: () => handleConnect(strategy), isLoading: isLoading }, strategy));
-                }) })), _jsx("div", { className: "mb-4 w-full space-y-2", children: initialWallets.map(walletId => (_jsx(WalletRow, { walletId: walletId, onClick: () => handleConnect(walletId), isLoading: isLoading }, walletId))) }), additionalWallets.length > 0 && (_jsxs("div", { className: "w-full", children: [_jsx(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 && (_jsx("div", { className: "max-h-60 space-y-2 overflow-y-auto", children: additionalWallets.map(walletId => (_jsx(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 = 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 preAuthenticate({
+                client,
+                strategy: "email",
+                email: normalizedEmail,
+                ecosystem: {
+                    id: 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 (_jsx(LoginStepContainer, { partnerId: partnerId, children: showEmailFlow ? (_jsxs("div", { className: "mb-6 w-full space-y-3 px-3", children: [_jsx("p", { className: "text-center text-sm font-medium text-gray-900 dark:text-gray-100", children: "Sign in with email" }), _jsx(Input, { type: "email", placeholder: "you@example.com", value: email, onChange: event => setEmail(event.target.value), disabled: isLoading || emailCodeSent }), emailCodeSent && (_jsx(Input, { type: "text", placeholder: "Enter verification code", value: verificationCode, onChange: event => setVerificationCode(event.target.value), disabled: isLoading })), emailError && _jsx("p", { className: "text-sm text-red-500", children: emailError }), _jsx(Button, { onClick: emailCodeSent ? handleEmailLogin : handleSendEmailCode, disabled: isLoading, className: "w-full", children: isLoading ? "Loading..." : emailCodeSent ? "Verify code" : "Send code" }), emailCodeSent && (_jsx(Button, { variant: "outline", onClick: handleSendEmailCode, disabled: isLoading, className: "w-full", children: "Resend code" })), _jsx(Button, { variant: "outline", onClick: resetEmailFlow, disabled: isLoading, className: "w-full", children: "Back" })] })) : (_jsxs(_Fragment, { children: [authStrategies.length > 0 && (_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 => (_jsx(AuthButton, { strategy: strategy, onClick: () => handleConnect(strategy), isLoading: isLoading }, strategy))) })), _jsx("div", { className: "mb-4 w-full space-y-2", children: initialWallets.map(walletId => (_jsx(WalletRow, { walletId: walletId, onClick: () => handleConnect(walletId), isLoading: isLoading }, walletId))) }), additionalWallets.length > 0 && (_jsxs("div", { className: "w-full", children: [_jsx(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 && (_jsx("div", { className: "max-h-60 space-y-2 overflow-y-auto", children: additionalWallets.map(walletId => (_jsx(WalletRow, { walletId: walletId, onClick: () => handleConnect(walletId), isLoading: isLoading }, walletId))) }))] }))] })) }));
 }

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

@@ -2,16 +2,19 @@ import { Chain } from "thirdweb";
 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"];
+declare const customStrategies: readonly ["basement"];
+type CustomStrategyType = (typeof customStrategies)[number];
+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"];
 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/esm/global-account/react/components/SignInWithB3/utils/signInUtils.js

@@ -1,20 +1,19 @@
 import { createWallet } from "thirdweb/wallets";
-const customStrategies = ["basement", "privy"];
-// type CustomStrategy = (typeof customStrategies)[number];
+const customStrategies = ["basement"];
 export const allowedStrategies = [
     // Auth strategies
     "apple",
     "google",
+    "github",
     "x",
     "discord",
-    // "github",
+    "email",
     "guest",
     // Wallet IDs
     "walletConnect",
     "io.metamask",
     "com.coinbase.wallet",
     // Custom strategies
-    // TODO: Audit we don't use "privy" directly anymore
     ...customStrategies,
 ];
 export function isWalletType(strategy) {
@@ -29,6 +28,9 @@ export function getConnectOptionsFromStrategy(strategy) {
     if (!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: createWallet(strategy) };
     }
@@ -39,11 +41,24 @@ export function getConnectOptionsFromStrategy(strategy) {
 }
 export const 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",
+};
+export const 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/esm/global-account/react/components/SingleUserSearchSelector/SingleUserSearchSelector.js

@@ -4,6 +4,7 @@ import { cn } from "../../../../shared/utils/index.js";
 import { Search, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { fetchProfile as fetchProfileApi } from "../../utils/profileApi.js";
+import { validateImageUrl } from "../../utils/profileDisplay.js";
 import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer.js";
 import { Input } from "../ui/input.js";
 /**
@@ -156,5 +157,5 @@ export function SingleUserSearchSelector({ onSelectUser, profileTypeFilter, plac
     const getProfileTypeBadges = (profiles) => {
         return profiles.map(p => p.type);
     };
-    return (_jsxs("div", { className: cn("single-user-search-selector b3-root relative w-full", className), ref: dropdownRef, children: [_jsxs("div", { className: "single-user-search-input-wrapper relative flex items-center", children: [_jsx(Search, { className: "single-user-search-icon pointer-events-none absolute text-gray-400", style: { left: "12px", width: "16px", height: "16px" } }), _jsx(Input, { ref: inputRef, type: "text", value: searchQuery, onChange: e => setSearchQuery(e.target.value), placeholder: placeholder, className: 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 && (_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: _jsx(X, { style: { width: "16px", height: "16px" } }) }))] }), isSearching && _jsx("div", { className: "single-user-search-loading mt-2 text-sm text-gray-500", children: "Searching..." }), error && !isSearching && _jsx("div", { className: "single-user-search-error mt-2 text-sm text-red-500", children: error }), showDropdown && searchResult && !isSearching && (_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: _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: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "single-user-search-result-avatar h-11 w-11 shrink-0", children: _jsx(IPFSMediaRenderer, { src: searchResult.avatar, alt: getDisplayName(searchResult), className: "h-full w-full rounded-full object-cover" }) }), _jsxs("div", { className: "single-user-search-result-info min-w-0 flex-1 pt-0.5", children: [_jsx("div", { className: "single-user-search-result-name text-base font-semibold text-gray-900", children: getDisplayName(searchResult) }), searchResult.address && (_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 && (_jsx("div", { className: "single-user-search-result-bio mt-1.5 line-clamp-2 text-sm text-gray-600", children: searchResult.bio })), showBadges && (_jsx("div", { className: "single-user-search-result-badges mt-2 flex flex-wrap gap-1.5", children: getProfileTypeBadges(searchResult.profiles).map((type, index) => (_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 (_jsxs("div", { className: cn("single-user-search-selector b3-root relative w-full", className), ref: dropdownRef, children: [_jsxs("div", { className: "single-user-search-input-wrapper relative flex items-center", children: [_jsx(Search, { className: "single-user-search-icon pointer-events-none absolute text-gray-400", style: { left: "12px", width: "16px", height: "16px" } }), _jsx(Input, { ref: inputRef, type: "text", value: searchQuery, onChange: e => setSearchQuery(e.target.value), placeholder: placeholder, className: 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 && (_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: _jsx(X, { style: { width: "16px", height: "16px" } }) }))] }), isSearching && _jsx("div", { className: "single-user-search-loading mt-2 text-sm text-gray-500", children: "Searching..." }), error && !isSearching && _jsx("div", { className: "single-user-search-error mt-2 text-sm text-red-500", children: error }), showDropdown && searchResult && !isSearching && (_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: _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: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "single-user-search-result-avatar h-11 w-11 shrink-0", children: _jsx(IPFSMediaRenderer, { src: validateImageUrl(searchResult.avatar) ?? undefined, alt: getDisplayName(searchResult), className: "h-full w-full rounded-full object-cover" }) }), _jsxs("div", { className: "single-user-search-result-info min-w-0 flex-1 pt-0.5", children: [_jsx("div", { className: "single-user-search-result-name text-base font-semibold text-gray-900", children: getDisplayName(searchResult) }), searchResult.address && (_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 && (_jsx("div", { className: "single-user-search-result-bio mt-1.5 line-clamp-2 text-sm text-gray-600", children: searchResult.bio })), showBadges && (_jsx("div", { className: "single-user-search-result-badges mt-2 flex flex-wrap gap-1.5", children: getProfileTypeBadges(searchResult.profiles).map((type, index) => (_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}`))) }))] })] }) }) }))] }));
 }