@b3dotfun/sdk 0.1.69 → 0.1.70-alpha.1

package/src/global-account/react/components/SignInWithB3/steps/LoginStepCustom.tsx

@@ -3,6 +3,7 @@ import {
   AuthButton,
   Button,
   getConnectOptionsFromStrategy,
+  Input,
   isWalletType,
   LoginStepContainer,
   useAuthentication,
@@ -11,12 +12,21 @@ import {
   useConnect,
   WalletRow,
 } from "@b3dotfun/sdk/global-account/react";
+import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
 import { useState } from "react";
 import { Chain } from "thirdweb";
-import { useConnect as useConnectTW } from "thirdweb/react";
-import { Account, createWallet, Wallet, WalletId } from "thirdweb/wallets";
+import { useConnectedWallets, useConnect as useConnectTW } from "thirdweb/react";
+import {
+  Account,
+  createWallet,
+  MultiStepAuthArgsType,
+  preAuthenticate,
+  SingleStepAuthArgsType,
+  Wallet,
+  WalletId,
+} from "thirdweb/wallets";
 
 interface LoginStepCustomProps {
   automaticallySetFirstEoa: boolean;
@@ -28,6 +38,7 @@ interface LoginStepCustomProps {
 }
 
 const debug = debugB3React("LoginStepCustom");
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
 export function LoginStepCustom({
   onSuccess,
@@ -40,32 +51,49 @@ export function LoginStepCustom({
   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<string | null>(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 authGridColumns = Math.max(1, Math.min(authStrategies.length, 4));
 
-  const handleConnect = async (strategy: AllowedStrategy) => {
+  const resetEmailFlow = () => {
+    setShowEmailFlow(false);
+    setEmailCodeSent(false);
+    setVerificationCode("");
+    setEmailError(null);
+  };
+
+  const connectWithOptions = async (
+    strategy: AllowedStrategy,
+    options: MultiStepAuthArgsType | SingleStepAuthArgsType,
+  ) => {
     try {
       setIsLoading(true);
       debug("setIsAuthenticating:true:3");
       setIsAuthenticating(true);
-      const options = getConnectOptionsFromStrategy(strategy);
       let connectResult: Wallet | null;
 
-      if (automaticallySetFirstEoa) {
-        if (!options.wallet?.id) {
+      if (automaticallySetFirstEoa && isWalletType(strategy) && options.strategy === "wallet") {
+        const walletId = options.wallet?.id as WalletId | undefined;
+        if (!walletId) {
           throw new Error("Wallet ID is required");
         }
+
         connectResult = await connectTW(async () => {
-          const wallet = createWallet(options.wallet?.id as WalletId);
+          const wallet = createWallet(walletId);
           await wallet.connect({
             client,
           });
@@ -73,19 +101,27 @@ export function LoginStepCustom({
           return wallet;
         });
       } 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) throw new Error("Failed to connect");
+      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 as Error);
       await logout();
-      setIsAuthenticated(false);
     } finally {
       setIsLoading(false);
       debug("setIsAuthenticating:false:3");
@@ -93,60 +129,177 @@ export function LoginStepCustom({
     }
   };
 
+  const handleConnect = async (strategy: AllowedStrategy) => {
+    if (strategy === "email") {
+      setShowEmailFlow(true);
+      setEmailCodeSent(false);
+      setVerificationCode("");
+      setEmailError(null);
+      return;
+    }
+
+    const options = getConnectOptionsFromStrategy(strategy);
+    await connectWithOptions(strategy, options as SingleStepAuthArgsType);
+  };
+
+  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 as 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 (
     <LoginStepContainer partnerId={partnerId}>
-      {/* Auth Strategies */}
-      {authStrategies.length > 0 && (
-        <div className={`mb-6 w-full ${authStrategies.length <= 3 ? "space-y-3 px-3" : "grid grid-cols-4 gap-4"}`}>
-          {authStrategies.map(strategy => {
-            console.log("strategy", strategy);
-            return (
-              <AuthButton
-                key={strategy}
-                strategy={strategy}
-                onClick={() => handleConnect(strategy)}
-                isLoading={isLoading}
-              />
-            );
-          })}
-        </div>
-      )}
-
-      {/* Initial Wallet List */}
-      <div className="mb-4 w-full space-y-2">
-        {initialWallets.map(walletId => (
-          <WalletRow
-            key={walletId}
-            walletId={walletId as WalletId}
-            onClick={() => handleConnect(walletId)}
-            isLoading={isLoading}
+      {showEmailFlow ? (
+        <div className="mb-6 w-full space-y-3 px-3">
+          <p className="text-center text-sm font-medium text-gray-900 dark:text-gray-100">Sign in with email</p>
+          <Input
+            type="email"
+            placeholder="you@example.com"
+            value={email}
+            onChange={event => setEmail(event.target.value)}
+            disabled={isLoading || emailCodeSent}
           />
-        ))}
-      </div>
 
-      {/* Additional Wallets Section */}
-      {additionalWallets.length > 0 && (
-        <div className="w-full">
+          {emailCodeSent && (
+            <Input
+              type="text"
+              placeholder="Enter verification code"
+              value={verificationCode}
+              onChange={event => setVerificationCode(event.target.value)}
+              disabled={isLoading}
+            />
+          )}
+
+          {emailError && <p className="text-sm text-red-500">{emailError}</p>}
+
           <Button
-            onClick={() => setShowAllWallets(!showAllWallets)}
-            className="mb-2 w-full bg-transparent text-gray-600 hover:bg-gray-100"
+            onClick={emailCodeSent ? handleEmailLogin : handleSendEmailCode}
+            disabled={isLoading}
+            className="w-full"
           >
-            {showAllWallets ? "Show less" : "More options"}
+            {isLoading ? "Loading..." : emailCodeSent ? "Verify code" : "Send code"}
           </Button>
 
-          {showAllWallets && (
-            <div className="max-h-60 space-y-2 overflow-y-auto">
-              {additionalWallets.map(walletId => (
-                <WalletRow
-                  key={walletId}
-                  walletId={walletId as WalletId}
-                  onClick={() => handleConnect(walletId)}
+          {emailCodeSent && (
+            <Button variant="outline" onClick={handleSendEmailCode} disabled={isLoading} className="w-full">
+              Resend code
+            </Button>
+          )}
+
+          <Button variant="outline" onClick={resetEmailFlow} disabled={isLoading} className="w-full">
+            Back
+          </Button>
+        </div>
+      ) : (
+        <>
+          {/* Auth Strategies */}
+          {authStrategies.length > 0 && (
+            <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
+              }
+            >
+              {authStrategies.map(strategy => (
+                <AuthButton
+                  key={strategy}
+                  strategy={strategy}
+                  onClick={() => handleConnect(strategy)}
                   isLoading={isLoading}
                 />
               ))}
             </div>
           )}
-        </div>
+
+          {/* Initial Wallet List */}
+          <div className="mb-4 w-full space-y-2">
+            {initialWallets.map(walletId => (
+              <WalletRow
+                key={walletId}
+                walletId={walletId as WalletId}
+                onClick={() => handleConnect(walletId)}
+                isLoading={isLoading}
+              />
+            ))}
+          </div>
+
+          {/* Additional Wallets Section */}
+          {additionalWallets.length > 0 && (
+            <div className="w-full">
+              <Button
+                onClick={() => setShowAllWallets(!showAllWallets)}
+                className="mb-2 w-full bg-transparent text-gray-600 hover:bg-gray-100"
+              >
+                {showAllWallets ? "Show less" : "More options"}
+              </Button>
+
+              {showAllWallets && (
+                <div className="max-h-60 space-y-2 overflow-y-auto">
+                  {additionalWallets.map(walletId => (
+                    <WalletRow
+                      key={walletId}
+                      walletId={walletId as WalletId}
+                      onClick={() => handleConnect(walletId)}
+                      isLoading={isLoading}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+        </>
       )}
     </LoginStepContainer>
   );

package/src/global-account/react/components/SignInWithB3/utils/signInUtils.ts

@@ -5,7 +5,8 @@ type WalletType = Wallet["id"];
 type StrategyType = SingleStepAuthArgsType["strategy"];
 type CustomStrategyType = "basement" | "privy";
 
-type AllowedStrategies = StrategyType | WalletType | CustomStrategyType;
+type AllowedStrategies = StrategyType | WalletType | CustomStrategyType | "email";
+type NonWalletStrategyType = Exclude<AllowedStrategies, WalletType>;
 const customStrategies = ["basement", "privy"] as const;
 // type CustomStrategy = (typeof customStrategies)[number];
 
@@ -13,9 +14,10 @@ export const allowedStrategies = [
   // Auth strategies
   "apple",
   "google",
+  "github",
   "x",
   "discord",
-  // "github",
+  "email",
   "guest",
 
   // Wallet IDs
@@ -36,7 +38,7 @@ export function isWalletType(strategy: AllowedStrategies): strategy is WalletTyp
   return strategy === "walletConnect" || walletIdPattern.test(strategy);
 }
 
-export function isStrategyType(strategy: AllowedStrategies): strategy is StrategyType {
+export function isStrategyType(strategy: AllowedStrategies): strategy is NonWalletStrategyType {
   return !isWalletType(strategy);
 }
 
@@ -49,6 +51,10 @@ export function getConnectOptionsFromStrategy(strategy: AllowedStrategy): {
     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" as const, wallet: createWallet(strategy) };
   } else {
@@ -59,11 +65,25 @@ export function getConnectOptionsFromStrategy(strategy: AllowedStrategy): {
 
 export const strategyIcons: Record<string, string> = {
   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: Record<string, string> = {
+  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/src/global-account/react/components/SingleUserSearchSelector/SingleUserSearchSelector.tsx

@@ -5,6 +5,7 @@ import { Search, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { CombinedProfile, Profile } from "../../hooks/useProfile";
 import { fetchProfile as fetchProfileApi } from "../../utils/profileApi";
+import { validateImageUrl } from "../../utils/profileDisplay";
 import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer";
 import { Input } from "../ui/input";
 
@@ -283,7 +284,7 @@ export function SingleUserSearchSelector({
               {/* Avatar */}
               <div className="single-user-search-result-avatar h-11 w-11 shrink-0">
                 <IPFSMediaRenderer
-                  src={searchResult.avatar}
+                  src={validateImageUrl(searchResult.avatar) ?? undefined}
                   alt={getDisplayName(searchResult)}
                   className="h-full w-full rounded-full object-cover"
                 />

package/src/global-account/react/components/Toast/ToastContext.tsx

@@ -15,6 +15,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;
 }
 
 const ToastContext = createContext<ToastContextType | undefined>(undefined);
@@ -23,6 +26,9 @@ let globalToastCounter = 0;
 
 export function ToastProvider({ children }: { children: React.ReactNode }) {
   const [toasts, setToasts] = useState<ToastItem[]>([]);
+  const [headerMode, setHeaderMode] = useState(false);
+  const headerModeRef = useRef(false);
+  const [latestToast, setLatestToast] = useState<ToastItem | null>(null);
   const timeoutsRef = useRef<Map<string, NodeJS.Timeout>>(new Map());
 
   const removeToast = useCallback((id: string) => {
@@ -45,13 +51,23 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
         createdAt: Date.now(),
       };
 
-      setToasts(prev => [...prev, newToast]);
+      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);
+        if (duration > 0) {
+          const timeout = setTimeout(() => {
+            removeToast(id);
+          }, duration);
+          timeoutsRef.current.set(id, timeout);
+        }
       }
 
       return id;
@@ -65,6 +81,16 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
     setToasts([]);
   }, []);
 
+  const setHeaderModeCallback = useCallback((enabled: boolean) => {
+    setHeaderMode(enabled);
+    headerModeRef.current = enabled;
+    if (!enabled) {
+      setLatestToast(null);
+      timeoutsRef.current.forEach(timeout => clearTimeout(timeout));
+      timeoutsRef.current.clear();
+    }
+  }, []);
+
   // Cleanup on unmount
   useEffect(() => {
     const timeouts = timeoutsRef.current;
@@ -74,7 +100,13 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
     };
   }, []);
 
-  return <ToastContext.Provider value={{ toasts, addToast, removeToast, clearAll }}>{children}</ToastContext.Provider>;
+  return (
+    <ToastContext.Provider
+      value={{ toasts, addToast, removeToast, clearAll, headerMode, setHeaderMode: setHeaderModeCallback, latestToast }}
+    >
+      {children}
+    </ToastContext.Provider>
+  );
 }
 
 export function useToastContext() {

package/src/global-account/react/components/UserAvatar/UserAvatar.tsx

@@ -0,0 +1,45 @@
+import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
+import { AVATAR_COLORS } from "@b3dotfun/sdk/shared/constants";
+import Avatar from "boring-avatars";
+import { useCallback, useEffect, useState } from "react";
+import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer";
+
+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 function UserAvatar({ avatarUrl, name = "user", size = 40, className }: UserAvatarProps) {
+  const resolvedSrc = validateImageUrl(avatarUrl);
+  const [imgError, setImgError] = useState(false);
+
+  useEffect(() => {
+    setImgError(false);
+  }, [avatarUrl]);
+
+  const handleImgError = useCallback(() => setImgError(true), []);
+
+  return (
+    <div className={className} style={{ width: size, height: size, minWidth: size, minHeight: size }}>
+      {resolvedSrc && !imgError ? (
+        <div onErrorCapture={handleImgError} className="h-full w-full overflow-hidden rounded-full">
+          <IPFSMediaRenderer src={resolvedSrc} alt={name} className="h-full w-full object-cover" />
+        </div>
+      ) : (
+        <Avatar name={name} variant="beam" size={size} colors={AVATAR_COLORS} />
+      )}
+    </div>
+  );
+}

package/src/global-account/react/components/index.ts

@@ -2,13 +2,22 @@
 // Core Components
 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";
 
 // SignInWithB3 Components
+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";
@@ -21,6 +30,9 @@ export { getConnectOptionsFromStrategy, isWalletType, type AllowedStrategy } fro
 // ManageAccount Components
 export { ManageAccount } from "./ManageAccount/ManageAccount";
 
+// UserAvatar
+export { UserAvatar } from "./UserAvatar/UserAvatar";
+
 // Deposit Components
 export { Deposit } from "./Deposit/Deposit";
 

package/src/global-account/react/hooks/index.ts

@@ -5,6 +5,7 @@ export { useAddTWSessionKey } from "./useAddTWSessionKey";
 export { useAnalytics } from "./useAnalytics";
 export { useAuth } from "./useAuth";
 export { useAuthentication } from "./useAuthentication";
+export { useBetterAuth, EmailVerificationRequiredError } from "./useBetterAuth";
 export { useB3BalanceFromAddresses } from "./useB3BalanceFromAddresses";
 export { useB3EnsName } from "./useB3EnsName";
 export { useChainSwitchWithAction } from "./useChainSwitchWithAction";