@loafmarkets/ui 0.1.364 → 0.1.366

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. */
@@ -902,6 +912,7 @@ interface PortfolioPosition {
     readonly propertyId: number;
     readonly tokenName: string;
     readonly quantity: number;
+    readonly totalQuantity: number;
     readonly totalTokens: number;
     readonly averageEntryPrice: number;
     readonly marketPrice: number;

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. */
@@ -902,6 +912,7 @@ interface PortfolioPosition {
     readonly propertyId: number;
     readonly tokenName: string;
     readonly quantity: number;
+    readonly totalQuantity: number;
     readonly totalTokens: number;
     readonly averageEntryPrice: number;
     readonly marketPrice: number;

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"
           }
         )
       ] })
@@ -13583,9 +13643,9 @@ function PortfolioActivityPanel({
         case "asset":
           return dir * a.tokenName.localeCompare(b.tokenName);
         case "units":
-          return dir * (a.quantity - b.quantity);
+          return dir * (a.totalQuantity - b.totalQuantity);
         case "value":
-          return dir * (a.quantity * a.marketPrice - b.quantity * b.marketPrice);
+          return dir * (a.totalQuantity * a.marketPrice - b.totalQuantity * b.marketPrice);
         case "avgPrice":
           return dir * (a.averageEntryPrice - b.averageEntryPrice);
         case "currentPrice":
@@ -13754,8 +13814,8 @@ function PortfolioActivityPanel({
             ] })
           ] }),
           sortedPositions.map((pos) => {
-            const currentValue = pos.quantity * pos.marketPrice;
-            const costBasis = pos.quantity * pos.averageEntryPrice;
+            const currentValue = pos.totalQuantity * pos.marketPrice;
+            const costBasis = pos.totalQuantity * pos.averageEntryPrice;
             const pnl = pos.propertyPnl ?? currentValue - costBasis;
             const pnlPercent = pos.propertyPnlPercent ?? pos.percentChange ?? 0;
             const isPositive = pnl >= 0;
@@ -13772,7 +13832,7 @@ function PortfolioActivityPanel({
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs(CUnitsCell, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx(CCellLabel, { children: "Units" }),
-                  formatNumber2(pos.quantity, pos.quantity >= 100 ? 0 : 2),
+                  formatNumber2(pos.totalQuantity, pos.totalQuantity >= 100 ? 0 : 2),
                   " ",
                   ticker
                 ] }),
@@ -13845,15 +13905,15 @@ function PortfolioActivityPanel({
             onClosePosition && /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CloseAllHeaderBtn, { onClick: () => setCloseAllOpen(true), children: "Sell All" }) })
           ] }),
           sortedPositions.map((pos) => {
-            const currentValue = pos.quantity * pos.marketPrice;
-            const costBasis = pos.quantity * pos.averageEntryPrice;
+            const currentValue = pos.totalQuantity * pos.marketPrice;
+            const costBasis = pos.totalQuantity * pos.averageEntryPrice;
             const pnl = pos.propertyPnl ?? currentValue - costBasis;
             const pnlPercent = pos.propertyPnlPercent ?? pos.percentChange ?? 0;
             const isPositive = pnl >= 0;
             return /* @__PURE__ */ jsxRuntime.jsxs(PositionsRow, { $hasClose: !!onClosePosition, children: [
               /* @__PURE__ */ jsxRuntime.jsx(PositionsCell, { children: /* @__PURE__ */ jsxRuntime.jsx(HoldingsPropertyLink, { onClick: () => onPositionClick?.(pos.tokenName, pos.isIpoAllocation), children: pos.tokenName }) }),
               /* @__PURE__ */ jsxRuntime.jsx(PositionsCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "#fff", fontSize: "0.8rem" }, children: [
-                formatNumber2(pos.quantity),
+                formatNumber2(pos.totalQuantity),
                 " ",
                 /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "rgba(255,255,255,0.4)", fontSize: "0.7rem" }, children: pos.tokenName.toUpperCase() })
               ] }) }),