@loafmarkets/ui 0.1.363 → 0.1.365

package/dist/index.d.mts

@@ -524,7 +524,7 @@ type DemoLoginResult = {
     success: boolean;
 };
 type DemoLoginHandler = (email: string, handle?: string | null) => Promise<DemoLoginResult | void> | DemoLoginResult | void;
-type LoginPopupView = "main" | "email" | "otp" | "kyc" | "kyc-success" | "kyc-failed" | "funding" | "receive" | "referral";
+type LoginPopupView = "main" | "email" | "otp" | "kyc" | "kyc-success" | "kyc-failed" | "funding" | "receive" | "referral" | "wallet-handle";
 type FundWalletParams = {
     amount: string;
     mode?: "crypto" | "fiat";
@@ -586,8 +586,18 @@ type LoginPopupProps = {
     onSubmitReferralCode?: (code: string) => Promise<void> | void;
     /** Called when the user skips the referral code and joins the waitlist. Receives their signup email. Resolves to a success message. */
     onJoinWaitlist?: (email: string) => Promise<string> | void;
-    /** Handler invoked when the user selects "Sign in with Wallet". */
-    onWalletLogin?: () => Promise<void> | void;
+    /**
+     * Handler invoked when the user selects "Sign in with Wallet". Returns
+     * `{ needsHandle: true }` when the connected account has no handle yet, so the
+     * popup collects one (mirroring the email signup flow) instead of closing.
+     */
+    onWalletLogin?: () => Promise<{
+        needsHandle: boolean;
+    } | void> | {
+        needsHandle: boolean;
+    } | void;
+    /** Handler invoked when a new wallet user submits their chosen handle. */
+    onWalletSignup?: (handle: string) => Promise<void> | void;
     /** Handler invoked when the user selects "Sign in with Passkey". When omitted, the button is hidden. */
     onPasskeyLogin?: () => Promise<void> | void;
     /** Current KYC status — used to show "Resume Verification" when previously started. */

package/dist/index.d.ts

@@ -524,7 +524,7 @@ type DemoLoginResult = {
     success: boolean;
 };
 type DemoLoginHandler = (email: string, handle?: string | null) => Promise<DemoLoginResult | void> | DemoLoginResult | void;
-type LoginPopupView = "main" | "email" | "otp" | "kyc" | "kyc-success" | "kyc-failed" | "funding" | "receive" | "referral";
+type LoginPopupView = "main" | "email" | "otp" | "kyc" | "kyc-success" | "kyc-failed" | "funding" | "receive" | "referral" | "wallet-handle";
 type FundWalletParams = {
     amount: string;
     mode?: "crypto" | "fiat";
@@ -586,8 +586,18 @@ type LoginPopupProps = {
     onSubmitReferralCode?: (code: string) => Promise<void> | void;
     /** Called when the user skips the referral code and joins the waitlist. Receives their signup email. Resolves to a success message. */
     onJoinWaitlist?: (email: string) => Promise<string> | void;
-    /** Handler invoked when the user selects "Sign in with Wallet". */
-    onWalletLogin?: () => Promise<void> | void;
+    /**
+     * Handler invoked when the user selects "Sign in with Wallet". Returns
+     * `{ needsHandle: true }` when the connected account has no handle yet, so the
+     * popup collects one (mirroring the email signup flow) instead of closing.
+     */
+    onWalletLogin?: () => Promise<{
+        needsHandle: boolean;
+    } | void> | {
+        needsHandle: boolean;
+    } | void;
+    /** Handler invoked when a new wallet user submits their chosen handle. */
+    onWalletSignup?: (handle: string) => Promise<void> | void;
     /** Handler invoked when the user selects "Sign in with Passkey". When omitted, the button is hidden. */
     onPasskeyLogin?: () => Promise<void> | void;
     /** Current KYC status — used to show "Resume Verification" when previously started. */

package/dist/index.js

@@ -6465,6 +6465,7 @@ var LoginPopup = ({
   onClose,
   onOpenEarlyAccess,
   onWalletLogin,
+  onWalletSignup,
   onPasskeyLogin,
   isAuthenticated,
   currentUser,
@@ -6550,7 +6551,7 @@ var LoginPopup = ({
     if (suppressAutoCloseRef.current) {
       return;
     }
-    if (view === "kyc" || view === "kyc-success" || view === "kyc-failed" || view === "funding" || view === "receive" || view === "referral") {
+    if (view === "kyc" || view === "kyc-success" || view === "kyc-failed" || view === "funding" || view === "receive" || view === "referral" || view === "wallet-handle") {
       return;
     }
     if (isAuthenticated || currentUser) {
@@ -6566,12 +6567,21 @@ var LoginPopup = ({
   }, [onClose]);
   const handleWalletLogin = async () => {
     if (onWalletLogin) {
+      suppressAutoCloseRef.current = true;
       try {
-        await onWalletLogin();
+        const result = await onWalletLogin();
+        if (result && result.needsHandle && onWalletSignup) {
+          setHandle("");
+          setError("");
+          setView("wallet-handle");
+          return;
+        }
+        suppressAutoCloseRef.current = false;
         onClose();
         return;
       } catch (err) {
         console.error("[LoginTrace][Popup] Wallet login failed", err);
+        suppressAutoCloseRef.current = false;
       }
     }
     onClose();
@@ -6579,6 +6589,31 @@ var LoginPopup = ({
       onOpenEarlyAccess();
     }
   };
+  const handleWalletSignupSubmit = async (event) => {
+    event?.preventDefault();
+    if (!handle.trim()) {
+      setError("Please claim a handle to continue");
+      return;
+    }
+    if (!onWalletSignup) {
+      onClose();
+      return;
+    }
+    setLoading(true);
+    setError("");
+    try {
+      await onWalletSignup(handle.trim());
+      if (onSubmitReferralCode) {
+        setView("referral");
+      } else {
+        onClose();
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Couldn't complete sign up. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
   const handlePasskeyLogin = async () => {
     if (!onPasskeyLogin) return;
     setError("");
@@ -6905,6 +6940,31 @@ var LoginPopup = ({
       isSignUp && /* @__PURE__ */ jsxRuntime.jsx(MiniLiveFeed, {})
     ] }) });
   }
+  if (view === "wallet-handle") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: loading ? void 0 : onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
+      !loading && /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Title, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(LogoContainer3, { children: /* @__PURE__ */ jsxRuntime.jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
+        "Claim your handle"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleWalletSignupSubmit, children: /* @__PURE__ */ jsxRuntime.jsxs(EmailFormContainer, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EmailInput,
+          {
+            type: "text",
+            placeholder: "Claim your handle (e.g. Landlord)",
+            value: handle,
+            onChange: (event) => setHandle(event.target.value),
+            autoFocus: true
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(SubmitButton, { type: "submit", disabled: loading || !handle.trim(), children: loading ? "Setting up your account\u2026" : "Continue" }),
+        error && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: error })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoText, { children: "Pick a public handle for your Loaf profile." }),
+      /* @__PURE__ */ jsxRuntime.jsx(MiniLiveFeed, {})
+    ] }) });
+  }
   if (view === "otp") {
     return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: loading ? void 0 : onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
       !loading && /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
@@ -7123,7 +7183,7 @@ var LoginPopup = ({
       }
     };
     const handleJoinWaitlistSkip = async () => {
-      if (!onJoinWaitlist) {
+      if (!onJoinWaitlist || !email) {
         onClose();
         return;
       }
@@ -7197,7 +7257,7 @@ var LoginPopup = ({
             onClick: () => void handleJoinWaitlistSkip(),
             disabled: waitlistLoading,
             style: { marginTop: "0.75rem" },
-            children: waitlistLoading ? "Joining\u2026" : "Skip for now & join Waitlist"
+            children: waitlistLoading ? "Joining\u2026" : email ? "Skip for now & join Waitlist" : "Skip for now"
           }
         )
       ] })