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

package/src/global-account/react/components/B3Provider/B3Provider.native.tsx

@@ -5,6 +5,7 @@ import { Account, Wallet } from "thirdweb/wallets";
 
 import { ClientType } from "../../../client-manager";
 
+import { useMemo } from "react";
 import { WagmiProvider } from "wagmi";
 import { createWagmiConfig } from "../../utils/createWagmiConfig";
 import AuthenticationProvider from "./AuthenticationProvider";
@@ -82,7 +83,7 @@ export function InnerProvider({
   partnerId: string;
   rpcUrls?: Record<number, string>;
 }) {
-  const wagmiConfig = createWagmiConfig({ partnerId, rpcUrls });
+  const wagmiConfig = useMemo(() => createWagmiConfig({ partnerId, rpcUrls }), [partnerId, rpcUrls]);
 
   return (
     <WagmiProvider config={wagmiConfig}>

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

@@ -43,6 +43,7 @@ export function B3Provider({
   overrideDefaultConnectors = false,
   createClientReferenceId,
   defaultPermissions,
+  disableBSMNTAuthentication = false,
 }: {
   theme: "light" | "dark";
   children: React.ReactNode;
@@ -67,6 +68,7 @@ export function B3Provider({
   overrideDefaultConnectors?: boolean;
   createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
   defaultPermissions?: PermissionsConfig;
+  disableBSMNTAuthentication?: boolean;
 }) {
   // Initialize Google Analytics on mount
   useEffect(() => {
@@ -89,7 +91,11 @@ export function B3Provider({
         <QueryClientProvider client={queryClient}>
           <TooltipProvider>
             <ToastProvider>
-              <LocalSDKProvider onConnectCallback={onConnect} onLogoutCallback={onLogout}>
+              <LocalSDKProvider
+                onConnectCallback={onConnect}
+                onLogoutCallback={onLogout}
+                disableBSMNTAuthentication={disableBSMNTAuthentication}
+              >
                 <B3ConfigProvider
                   accountOverride={accountOverride}
                   environment={environment}

package/src/global-account/react/components/B3Provider/LocalSDKProvider.tsx

@@ -8,11 +8,13 @@ import { Wallet } from "thirdweb/wallets";
 export interface LocalSDKContextType {
   onConnectCallback?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
   onLogoutCallback?: () => void | Promise<void>;
+  disableBSMNTAuthentication?: boolean;
 }
 
 export const LocalSDKContext = createContext<LocalSDKContextType>({
   onConnectCallback: undefined,
   onLogoutCallback: undefined,
+  disableBSMNTAuthentication: false,
 });
 
 /**
@@ -22,16 +24,19 @@ export function LocalSDKProvider({
   children,
   onConnectCallback,
   onLogoutCallback,
+  disableBSMNTAuthentication,
 }: {
   children: React.ReactNode;
   onConnectCallback?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
   onLogoutCallback?: () => void | Promise<void>;
+  disableBSMNTAuthentication?: boolean;
 }) {
   return (
     <LocalSDKContext.Provider
       value={{
         onConnectCallback,
         onLogoutCallback,
+        disableBSMNTAuthentication,
       }}
     >
       {children}

package/src/global-account/react/components/ManageAccount/SessionDurationContent.tsx

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

package/src/global-account/react/components/ManageAccount/SettingsContent.tsx

@@ -1,5 +1,6 @@
 import { useAuthentication, useModalStore } from "@b3dotfun/sdk/global-account/react";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import { getSessionDurationDays, SESSION_DURATION_LABELS } from "@b3dotfun/sdk/shared/utils/session-duration";
 import { Loader2 } from "lucide-react";
 import { useState } from "react";
 import { Chain } from "thirdweb";
@@ -20,46 +21,29 @@ const SettingsContent = ({
 }) => {
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
   const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
-  const { logout } = useAuthentication(partnerId);
+  const { logout, user } = useAuthentication(partnerId);
   const [logoutLoading, setLogoutLoading] = useState(false);
 
-  const { data: profilesRaw = [] } = useProfiles({ client });
+  const sessionDays = getSessionDurationDays(user?.preferences, partnerId);
 
+  const { data: profilesRaw = [] } = useProfiles({ client });
   const profiles = profilesRaw.filter((profile: any) => !["custom_auth_endpoint"].includes(profile.type));
 
-  const handleNavigate = (type: "home" | "swap" | "linkAccount" | "avatarEditor" | "notifications") => {
+  const handleNavigate = (
+    type: "home" | "swap" | "linkAccount" | "avatarEditor" | "notifications" | "sessionDuration",
+  ) => {
     if (type === "home") {
-      setB3ModalContentType({
-        type: "manageAccount",
-        chain,
-        partnerId,
-        onLogout,
-        activeTab: "home",
-      });
+      setB3ModalContentType({ type: "manageAccount", chain, partnerId, onLogout, activeTab: "home" });
     } else if (type === "swap") {
-      setB3ModalContentType({
-        type: "manageAccount",
-        chain,
-        partnerId,
-        onLogout,
-        activeTab: "tokens",
-      });
+      setB3ModalContentType({ type: "manageAccount", chain, partnerId, onLogout, activeTab: "tokens" });
     } else if (type === "linkAccount") {
-      setB3ModalContentType({
-        type: "linkAccount",
-        chain,
-        partnerId,
-      });
+      setB3ModalContentType({ type: "linkAccount", chain, partnerId });
     } else if (type === "notifications") {
-      setB3ModalContentType({
-        type: "notifications",
-        chain,
-        partnerId,
-      });
+      setB3ModalContentType({ type: "notifications", chain, partnerId });
+    } else if (type === "sessionDuration") {
+      setB3ModalContentType({ type: "sessionDuration", chain, partnerId });
     } else {
-      setB3ModalContentType({
-        type: "avatarEditor",
-      });
+      setB3ModalContentType({ type: "avatarEditor" });
     }
     setB3ModalOpen(true);
   };
@@ -111,11 +95,25 @@ const SettingsContent = ({
           subtitle="Manage your notifications"
           onClick={() => handleNavigate("notifications")}
         />
+        <SettingsMenuItem
+          icon={
+            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z"
+                fill="#F4F4F5"
+              />
+            </svg>
+          }
+          title="Stay signed in"
+          subtitle={SESSION_DURATION_LABELS[sessionDays] ?? `${sessionDays} days`}
+          onClick={() => handleNavigate("sessionDuration")}
+        />
       </div>
 
       {/* Logout Section */}
       <div className="mt-auto px-5 pb-5">
         <button
+          type="button"
           className="b3-modal-sign-out-button border-b3-line hover:bg-b3-line bg-b3-background dark:bg-b3-background dark:border-b3-line dark:hover:bg-b3-line/80 flex w-full items-center justify-center gap-1.5 rounded-xl border border-solid p-3 transition-colors"
           onClick={onLogoutEnhanced}
           disabled={logoutLoading}

package/src/global-account/react/components/SignInWithB3/components/AuthButton.tsx

@@ -1,5 +1,11 @@
 import { Button } from "../../custom/Button";
-import { strategyIcons } from "../utils/signInUtils";
+import { Github, Mail } from "lucide-react";
+import { strategyIcons, strategyLabels } from "../utils/signInUtils";
+
+const fallbackIcons = {
+  github: Github,
+  email: Mail,
+} as const;
 
 export function AuthButton({
   strategy,
@@ -10,14 +16,27 @@ export function AuthButton({
   onClick: () => void;
   isLoading: boolean;
 }) {
+  const strategyIcon = strategyIcons[strategy];
+  const strategyLabel = strategyLabels[strategy] || strategy;
+  const FallbackIcon = fallbackIcons[strategy as keyof typeof fallbackIcons];
+  const buttonLabel = `Sign in with ${strategyLabel}`;
+
   return (
     <Button
       key={strategy}
       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"
     >
-      <img src={strategyIcons[strategy]} className="h-9 w-9" />
+      {strategyIcon ? (
+        <img src={strategyIcon} alt={`${strategyLabel} icon`} className="h-9 w-9" />
+      ) : FallbackIcon ? (
+        <FallbackIcon className="h-9 w-9 text-gray-900 dark:text-gray-100" />
+      ) : (
+        <span className="text-sm font-semibold text-gray-900 dark:text-gray-100">{strategyLabel.charAt(0)}</span>
+      )}
     </Button>
   );
 }

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