@loafmarkets/ui 0.1.14 → 0.1.17

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import * as React5 from 'react';
-import React5__default, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import React5__default, { createContext, useState, useEffect, useMemo, useRef, useCallback, useContext } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
@@ -3349,6 +3349,7 @@ var YourOrders = React5.forwardRef(
     onTabChange,
     renderOrderActions,
     renderTabContent,
+    pageSize: pageSizeOverride,
     ...props
   }, ref) => {
     const [internalActiveTab, setInternalActiveTab] = React5.useState(tabs?.[0]?.id ?? "portfolio");
@@ -3369,7 +3370,8 @@ var YourOrders = React5.forwardRef(
     const activeOrders = activeTab?.orders ?? orders ?? [];
     const DEFAULT_PAGE_SIZE = 5;
     const HISTORY_PAGE_SIZE = 3;
-    const pageSize = activeTab?.id === "order-history" || activeTab?.id === "trade-history" ? HISTORY_PAGE_SIZE : DEFAULT_PAGE_SIZE;
+    const resolvedPageSize = pageSizeOverride ?? (activeTab?.id === "order-history" || activeTab?.id === "trade-history" ? HISTORY_PAGE_SIZE : DEFAULT_PAGE_SIZE);
+    const pageSize = Math.max(1, resolvedPageSize);
     const totalOrders = activeOrders.length;
     const totalPages = Math.max(1, Math.ceil(totalOrders / pageSize));
     const safePage = Math.min(page, totalPages - 1);
@@ -4065,6 +4067,10 @@ var PropertyHeroHeader = React5.forwardRef(
     propertyTypeLabel,
     onTrade,
     onMakeOffer,
+    tradeButtonLabel = "Trade",
+    makeOfferButtonLabel = "Make Offer",
+    makeOfferDisabled = false,
+    hideMakeOfferButton = false,
     ...props
   }, ref) => {
     const isPositive = changePercent == null ? void 0 : changePercent >= 0;
@@ -4073,6 +4079,17 @@ var PropertyHeroHeader = React5.forwardRef(
     const [isTradeInteracting, setIsTradeInteracting] = React5.useState(false);
     const [isOfferInteracting, setIsOfferInteracting] = React5.useState(false);
     const hasAmenities = beds != null || baths != null || cars != null || propertyTypeLabel != null;
+    const isTradeDisabled = !onTrade;
+    const isMakeOfferButtonDisabled = makeOfferDisabled || !onMakeOffer;
+    const showMakeOfferButton = !hideMakeOfferButton;
+    const setTradeInteraction = (state) => {
+      if (isTradeDisabled) return;
+      setIsTradeInteracting(state);
+    };
+    const setOfferInteraction = (state) => {
+      if (isMakeOfferButtonDisabled) return;
+      setIsOfferInteracting(state);
+    };
     const headingStyle = {
       fontSize: "clamp(1.6rem, 4vw, 2.5rem)",
       marginBottom: "0.5rem",
@@ -4157,54 +4174,60 @@ var PropertyHeroHeader = React5.forwardRef(
               "button",
               {
                 type: "button",
-                onClick: onTrade,
+                onClick: isTradeDisabled ? void 0 : onTrade,
                 className: "flex items-center justify-center rounded border font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_4px_8px_rgba(0,0,0,0.2)] active:translate-y-0 active:shadow-[0_2px_4px_rgba(0,0,0,0.1)] text-[0.95rem] max-[480px]:text-[0.9rem]",
                 style: {
                   backgroundColor: isTradeInteracting ? tradeHoverColor : accentColor,
                   color: "black",
-                  width: "88.06px",
-                  height: "43px",
-                  minWidth: "88.06px",
+                  minWidth: "140px",
+                  padding: "0.65rem 1.5rem",
                   borderColor: isTradeInteracting ? accentColor : "transparent",
-                  boxShadow: isTradeInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none"
+                  boxShadow: isTradeInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none",
+                  opacity: isTradeDisabled ? 0.5 : 1,
+                  cursor: isTradeDisabled ? "not-allowed" : "pointer"
                 },
-                onMouseEnter: () => setIsTradeInteracting(true),
-                onMouseLeave: () => setIsTradeInteracting(false),
-                onMouseDown: () => setIsTradeInteracting(true),
-                onMouseUp: () => setIsTradeInteracting(false),
-                onFocus: () => setIsTradeInteracting(true),
-                onBlur: () => setIsTradeInteracting(false),
-                onTouchStart: () => setIsTradeInteracting(true),
-                onTouchEnd: () => setIsTradeInteracting(false),
-                children: "Trade"
+                onMouseEnter: () => setTradeInteraction(true),
+                onMouseLeave: () => setTradeInteraction(false),
+                onMouseDown: () => setTradeInteraction(true),
+                onMouseUp: () => setTradeInteraction(false),
+                onFocus: () => setTradeInteraction(true),
+                onBlur: () => setTradeInteraction(false),
+                onTouchStart: () => setTradeInteraction(true),
+                onTouchEnd: () => setTradeInteraction(false),
+                disabled: isTradeDisabled,
+                "aria-disabled": isTradeDisabled,
+                children: tradeButtonLabel
               }
             ),
-            /* @__PURE__ */ jsx(
+            showMakeOfferButton ? /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
-                onClick: onMakeOffer,
+                onClick: isMakeOfferButtonDisabled ? void 0 : onMakeOffer,
                 className: "flex items-center justify-center rounded border font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_4px_8px_rgba(0,0,0,0.2)] active:translate-y-0 active:shadow-[0_2px_4px_rgba(0,0,0,0.1)] text-[0.95rem] max-[480px]:text-[0.9rem]",
                 style: {
                   backgroundColor: isOfferInteracting ? accentColor : "transparent",
                   borderColor: accentColor,
                   color: isOfferInteracting ? "black" : accentColor,
-                  width: "127.14px",
-                  height: "43px",
-                  minWidth: "127.14px",
-                  boxShadow: isOfferInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none"
+                  minWidth: "140px",
+                  padding: "0.65rem 1.5rem",
+                  boxShadow: isOfferInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none",
+                  opacity: isMakeOfferButtonDisabled ? 0.5 : 1,
+                  cursor: isMakeOfferButtonDisabled ? "not-allowed" : "pointer"
                 },
-                onMouseEnter: () => setIsOfferInteracting(true),
-                onMouseLeave: () => setIsOfferInteracting(false),
-                onMouseDown: () => setIsOfferInteracting(true),
-                onMouseUp: () => setIsOfferInteracting(false),
-                onFocus: () => setIsOfferInteracting(true),
-                onBlur: () => setIsOfferInteracting(false),
-                onTouchStart: () => setIsOfferInteracting(true),
-                onTouchEnd: () => setIsOfferInteracting(false),
-                children: "Make Offer"
+                onMouseEnter: () => setOfferInteraction(true),
+                onMouseLeave: () => setOfferInteraction(false),
+                onMouseDown: () => setOfferInteraction(true),
+                onMouseUp: () => setOfferInteraction(false),
+                onFocus: () => setOfferInteraction(true),
+                onBlur: () => setOfferInteraction(false),
+                onTouchStart: () => setOfferInteraction(true),
+                onTouchEnd: () => setOfferInteraction(false),
+                disabled: isMakeOfferButtonDisabled,
+                "aria-disabled": isMakeOfferButtonDisabled,
+                children: makeOfferButtonLabel
               }
-            )
+            ) : null
           ] })
         ] })
       ] }),
@@ -4393,11 +4416,14 @@ var DEFAULT_TRADE_URL = "https://loafx-frontend-web.vercel.app/";
 var DEFAULT_TRADE_PATH = "/trade";
 var DEFAULT_HOME_PATH = "/";
 var DEFAULT_ABOUT_PATH = "/about";
+var DEFAULT_LEARN_PATH = "/learn";
 var DEFAULT_OFFERINGS_PATH = "/ipo/musgrave";
 var DEFAULT_PROPERTY_MAP_PATH = "/map";
+var DEFAULT_PORTFOLIO_PATH = "/portfolio";
 var DEFAULT_LOAF_LIQUIDITY_PATH = "/loaf-liquidity";
 var DEFAULT_AUTH_LOGIN_URL = "http://localhost:5174/";
 var DEFAULT_AUTH_RETURN_PARAM = "returnTo";
+var LOGIN_POPUP_EVENT = "loaf:open-login-popup";
 var Header = ({
   currentUser,
   isAuthenticated = false,
@@ -4411,8 +4437,10 @@ var Header = ({
   tradePath = DEFAULT_TRADE_PATH,
   homePath = DEFAULT_HOME_PATH,
   aboutPath = DEFAULT_ABOUT_PATH,
+  learnPath = DEFAULT_LEARN_PATH,
   offeringsPath = DEFAULT_OFFERINGS_PATH,
   propertyMapPath = DEFAULT_PROPERTY_MAP_PATH,
+  portfolioPath = DEFAULT_PORTFOLIO_PATH,
   loafLiquidityPath = DEFAULT_LOAF_LIQUIDITY_PATH,
   authLoginUrl = DEFAULT_AUTH_LOGIN_URL,
   authReturnParam = DEFAULT_AUTH_RETURN_PARAM,
@@ -4430,13 +4458,23 @@ var Header = ({
   const [isMoreMenuOpen, setIsMoreMenuOpen] = useState(false);
   const [showLoginPopup, setShowLoginPopup] = useState(false);
   const [loginPopupInitialView, setLoginPopupInitialView] = useState(void 0);
+  useEffect(() => {
+    console.log("[LoginTrace][Header] mounted");
+    return () => console.log("[LoginTrace][Header] unmounted");
+  }, []);
+  useEffect(() => {
+    console.log("[LoginTrace][Header] showLoginPopup changed", { showLoginPopup, loginPopupInitialView });
+  }, [showLoginPopup, loginPopupInitialView]);
+  useEffect(() => {
+    console.log("[LoginTrace][Header] loginPopupComponent updated", { hasComponent: Boolean(LoginPopupComponent) });
+  }, [LoginPopupComponent]);
   useEffect(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       if (!target) return;
       const clickedInsideUserMenu = target.closest(".user-menu") || target.closest(".user-menu-dropdown");
       if (isUserMenuOpen && !clickedInsideUserMenu) {
-        console.log("[Header] Closing user menu due to outside click");
+        console.log("[LoginTrace][Header] Closing user menu due to outside click");
         setIsUserMenuOpen(false);
       }
       if (isMobileMenuOpen && !target.closest(".mobile-menu") && !target.closest(".mobile-menu-button")) {
@@ -4451,6 +4489,19 @@ var Header = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isUserMenuOpen, isMobileMenuOpen, isMoreMenuOpen]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const handleExternalLoginPopup = (event) => {
+      const customEvent = event;
+      setLoginPopupInitialView(customEvent.detail?.initialView);
+      console.log("[LoginTrace][Header] Received LOGIN_POPUP_EVENT", customEvent.detail);
+      setShowLoginPopup(true);
+    };
+    window.addEventListener(LOGIN_POPUP_EVENT, handleExternalLoginPopup);
+    return () => {
+      window.removeEventListener(LOGIN_POPUP_EVENT, handleExternalLoginPopup);
+    };
+  }, []);
   const closeMenus = () => {
     setIsMobileMenuOpen(false);
     setIsUserMenuOpen(false);
@@ -4458,7 +4509,7 @@ var Header = ({
   };
   const handleUserMenuToggle = () => {
     const nextState = !isUserMenuOpen;
-    console.log("[Header] User dropdown toggle clicked", { nextState });
+    console.log("[LoginTrace][Header] User dropdown toggle clicked", { nextState });
     setIsUserMenuOpen(nextState);
   };
   const performNavigation = (path) => {
@@ -4502,18 +4553,30 @@ var Header = ({
   const handleLogoutClick = async (event) => {
     event?.preventDefault();
     closeMenus();
-    console.log("[Header] Logout option selected, invoking onLogout handler");
+    console.log("[LoginTrace][Header] Logout option selected, invoking onLogout handler");
     await onLogout?.();
   };
   const handleAddFundingClick = (event) => {
     event?.preventDefault();
     closeMenus();
-    console.log("[Header] Add funding selected");
+    console.log("[LoginTrace][Header] Add funding selected");
     if (LoginPopupComponent) {
-      setLoginPopupInitialView(void 0);
+      setLoginPopupInitialView("funding");
       setShowLoginPopup(true);
     }
   };
+  const handlePortfolioNavigate = (event) => {
+    event?.preventDefault();
+    closeMenus();
+    console.log("[LoginTrace][Header] Portfolio selected");
+    if (_onOrdersNavigate) {
+      _onOrdersNavigate();
+      return;
+    }
+    if (onNavigate) {
+      onNavigate("/portfolio");
+    }
+  };
   const userPrimaryLabel = currentUser?.displayName?.trim() || "User";
   const resolveAuthReturnUrl = () => {
     if (getAuthReturnUrl) {
@@ -4547,6 +4610,7 @@ var Header = ({
     return false;
   };
   const handleSignIn = () => {
+    console.log("[LoginTrace][Header] handleSignIn invoked", { hasCustomHandler: Boolean(onSignInClick) });
     if (onSignInClick) {
       onSignInClick();
       return;
@@ -4555,15 +4619,23 @@ var Header = ({
       return;
     }
     if (LoginPopupComponent) {
+      console.log("[LoginTrace][Header] Opening login popup via handleSignIn");
       setShowLoginPopup(true);
     }
   };
+  const handleLoginPopupClose = React5__default.useCallback(() => {
+    console.log("[LoginTrace][Header] Closing login popup via onClose handler");
+    setShowLoginPopup(false);
+    setLoginPopupInitialView(void 0);
+  }, []);
   const inferredActiveTab = (() => {
     if (locationPath === tradePath) return "trade";
     if (locationPath === homePath) return "home";
     if (locationPath === aboutPath) return "about";
+    if (locationPath === learnPath) return "learn";
     if (locationPath.startsWith(offeringsPath)) return "offerings";
     if (locationPath === propertyMapPath) return "propertyMap";
+    if (locationPath === portfolioPath) return "portfolio";
     return null;
   })();
   const resolvedActiveTab = activeTab ?? inferredActiveTab;
@@ -4572,6 +4644,8 @@ var Header = ({
   const offeringsActive = resolvedActiveTab === "offerings";
   const propertyMapActive = resolvedActiveTab === "propertyMap";
   const aboutActive = resolvedActiveTab === "about";
+  const portfolioActive = resolvedActiveTab === "portfolio";
+  const learnActive = resolvedActiveTab === "learn";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Overlay, { $isOpen: isMobileMenuOpen, onClick: () => setIsMobileMenuOpen(false) }),
     /* @__PURE__ */ jsxs(HeaderContainer, { children: [
@@ -4611,6 +4685,18 @@ var Header = ({
                     children: "Trade"
                   }
                 ),
+                /* @__PURE__ */ jsx(
+                  NavLink,
+                  {
+                    href: portfolioPath,
+                    className: portfolioActive ? "active" : "",
+                    onClick: (event) => {
+                      event.preventDefault();
+                      handleNavigation(portfolioPath);
+                    },
+                    children: "Portfolio"
+                  }
+                ),
                 /* @__PURE__ */ jsx(
                   NavLink,
                   {
@@ -4620,7 +4706,7 @@ var Header = ({
                       event.preventDefault();
                       handleNavigation(offeringsPath);
                     },
-                    children: "Offerings"
+                    children: "Initial Offerings"
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -4635,6 +4721,18 @@ var Header = ({
                     children: "Property Map"
                   }
                 ),
+                /* @__PURE__ */ jsx(
+                  NavLink,
+                  {
+                    href: learnPath,
+                    className: learnActive ? "active" : "",
+                    onClick: (event) => {
+                      event.preventDefault();
+                      handleNavigation(learnPath);
+                    },
+                    children: "Learn"
+                  }
+                ),
                 /* @__PURE__ */ jsx(
                   NavLink,
                   {
@@ -4682,8 +4780,10 @@ var Header = ({
                 children: "Trade"
               }
             ),
-            /* @__PURE__ */ jsx(MobileNavItem, { onClick: () => handleNavigation(offeringsPath), children: "Offerings" }),
+            /* @__PURE__ */ jsx(MobileNavItem, { onClick: () => handleNavigation(portfolioPath), children: "Portfolio" }),
+            /* @__PURE__ */ jsx(MobileNavItem, { onClick: () => handleNavigation(offeringsPath), children: "Initial Offerings" }),
             /* @__PURE__ */ jsx(MobileNavItem, { onClick: () => handleNavigation(propertyMapPath), children: "Property Map" }),
+            /* @__PURE__ */ jsx(MobileNavItem, { onClick: () => handleNavigation(learnPath), children: "Learn" }),
             /* @__PURE__ */ jsx(MobileNavItem, { onClick: () => handleNavigation(aboutPath), children: "About" }),
             /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid #2b3139", margin: "8px 0" } }),
             /* @__PURE__ */ jsx(
@@ -4725,14 +4825,13 @@ var Header = ({
           ),
           isUserMenuOpen && /* @__PURE__ */ jsxs(DropdownMenu, { className: "user-menu-dropdown", children: [
             /* @__PURE__ */ jsx(
-              "div",
+              "button",
               {
-                style: {
-                  padding: "12px 16px",
-                  borderBottom: "1px solid rgba(255,255,255,0.08)",
-                  textAlign: "left"
+                type: "button",
+                onClick: (event) => {
+                  handlePortfolioNavigate(event);
                 },
-                children: /* @__PURE__ */ jsx("p", { style: { margin: 0, fontWeight: 600 }, children: userPrimaryLabel })
+                children: /* @__PURE__ */ jsx(MenuItem, { children: "Portfolio" })
               }
             ),
             /* @__PURE__ */ jsx(
@@ -4740,7 +4839,7 @@ var Header = ({
               {
                 type: "button",
                 onClick: (event) => {
-                  console.log("[Header] Add funding menu item clicked");
+                  console.log("[LoginTrace][Header] Add funding menu item clicked");
                   handleAddFundingClick(event);
                 },
                 children: /* @__PURE__ */ jsx(MenuItem, { children: "Add funding" })
@@ -4751,7 +4850,7 @@ var Header = ({
               {
                 type: "button",
                 onClick: (event) => {
-                  console.log("[Header] Logout menu item clicked");
+                  console.log("[LoginTrace][Header] Logout menu item clicked");
                   void handleLogoutClick(event);
                 },
                 children: /* @__PURE__ */ jsx(MenuItem, { className: "logout", children: "Logout" })
@@ -4786,10 +4885,7 @@ var Header = ({
     LoginPopupComponent && showLoginPopup && /* @__PURE__ */ jsx(
       LoginPopupComponent,
       {
-        onClose: () => {
-          setShowLoginPopup(false);
-          setLoginPopupInitialView(void 0);
-        },
+        onClose: handleLoginPopupClose,
         initialView: loginPopupInitialView
       }
     )
@@ -5317,6 +5413,7 @@ var OTP_INPUT_LENGTH = 6;
 var LoginPopup = ({
   onClose,
   onOpenEarlyAccess,
+  onWalletLogin,
   isAuthenticated,
   currentUser,
   onSendEmailCode,
@@ -5341,38 +5438,74 @@ var LoginPopup = ({
   const [fundingLoading, setFundingLoading] = useState(false);
   const [fundingError, setFundingError] = useState("");
   const suppressAutoCloseRef = React5__default.useRef(false);
+  useEffect(() => {
+    console.log("[LoginTrace][Popup] mounted");
+    return () => console.log("[LoginTrace][Popup] unmounted");
+  }, []);
+  useEffect(() => {
+    console.log("[LoginTrace][Popup] view updated", { view });
+  }, [view]);
+  useEffect(() => {
+    console.log("[LoginTrace][Popup] auth props updated", { isAuthenticated, hasUser: Boolean(currentUser) });
+  }, [isAuthenticated, currentUser]);
   useEffect(() => {
     if (typeof initialView === "string") {
+      console.log("[LoginTrace][Popup] initialView prop changed", { initialView });
       setView(initialView);
     }
   }, [initialView]);
   useEffect(() => {
     if (!autoCloseOnAuth) {
+      console.log("[LoginTrace][Popup] autoClose disabled", { autoCloseOnAuth, view });
       return;
     }
     if (suppressAutoCloseRef.current) {
+      console.log("[LoginTrace][Popup] autoClose suppressed", { view });
       return;
     }
     if (view === "kyc" || view === "kyc-success" || view === "kyc-failed" || view === "funding") {
+      console.log("[LoginTrace][Popup] autoClose skipped due to onboarding view", { view });
       return;
     }
+    console.log("[LoginTrace][Popup] autoClose effect evaluating", {
+      autoCloseOnAuth,
+      isAuthenticated,
+      hasUser: Boolean(currentUser),
+      view
+    });
     if (isAuthenticated || currentUser) {
+      console.log("[LoginTrace][Popup] autoClose triggered", { isAuthenticated, hasUser: Boolean(currentUser), view });
       onClose();
     }
   }, [autoCloseOnAuth, currentUser, isAuthenticated, onClose, view]);
-  const handleWalletLogin = () => {
+  const handleWalletLogin = async () => {
+    console.log("[LoginTrace][Popup] Wallet login clicked, onWalletLogin:", !!onWalletLogin);
+    if (onWalletLogin) {
+      try {
+        console.log("[LoginTrace][Popup] Calling onWalletLogin...");
+        await onWalletLogin();
+        console.log("[LoginTrace][Popup] onWalletLogin completed, closing popup");
+        onClose();
+        return;
+      } catch (err) {
+        console.error("[LoginTrace][Popup] Wallet login failed", err);
+      }
+    }
+    console.log("[LoginTrace][Popup] No onWalletLogin handler, closing popup");
     onClose();
     if (onOpenEarlyAccess) {
       onOpenEarlyAccess();
     }
   };
   const handleEmailClick = (signUp = false) => {
+    console.log("[LoginTrace][Popup] handleEmailClick", { signUp });
     setIsSignUp(signUp);
     setView("email");
     setError("");
   };
   const handleSendCode = async (event) => {
     event?.preventDefault();
+    console.log("[LoginTrace][Popup] handleSendCode invoked", { email, isSignUp, handle, eventType: event?.type });
     if (!email || !email.includes("@")) {
       setError("Please enter a valid email address");
       return;
@@ -5385,13 +5518,15 @@ var LoginPopup = ({
     setError("");
     const normalizedHandle = isSignUp ? handle.trim() : void 0;
     try {
+      console.log("[LoginTrace][Popup] Attempting demo login fallback", { hasDemoHandler: Boolean(onDemoLogin) });
       const demoResult = await onDemoLogin?.(email, normalizedHandle ?? null);
       if (demoResult && demoResult.success) {
+        console.log("[LoginTrace][Popup] Demo login succeeded, skipping OTP flow");
         setLoading(false);
         return;
       }
     } catch (err) {
-      console.warn("Demo login failed, attempting email OTP", err);
+      console.warn("[LoginTrace][Popup] Demo login failed, attempting email OTP", err);
     }
     if (!onSendEmailCode) {
       setError("Email authentication is not configured for this popup.");
@@ -5399,10 +5534,13 @@ var LoginPopup = ({
       return;
     }
     try {
+      console.log("[LoginTrace][Popup] Calling onSendEmailCode", { email, isSignUp, normalizedHandle });
       await onSendEmailCode({ email, isSignUp, handle: normalizedHandle ?? null });
+      console.log("[LoginTrace][Popup] onSendEmailCode resolved, switching to OTP view");
       setView("otp");
       setOtp(Array(OTP_INPUT_LENGTH).fill(""));
     } catch (err) {
+      console.error("[LoginTrace][Popup] onSendEmailCode threw", err);
       setError(err instanceof Error ? err.message : "Failed to send verification code");
     } finally {
       setLoading(false);
@@ -5435,9 +5573,32 @@ var LoginPopup = ({
       document.getElementById(`otp-${index - 1}`)?.focus();
     }
   };
+  const handleOTPInput = (index, event) => {
+    const rawValue = event.currentTarget.value ?? "";
+    const nativeEvent = event.nativeEvent;
+    const isPasteLike = nativeEvent?.inputType === "insertFromPaste" || rawValue.length > 1;
+    if (isPasteLike) {
+      handleOTPChange(index, rawValue);
+    }
+  };
+  const handleOTPPaste = (event) => {
+    event.preventDefault();
+    const pasted = event.clipboardData?.getData("text") ?? "";
+    const digits = pasted.replace(/\D/g, "").slice(0, OTP_INPUT_LENGTH).split("");
+    if (digits.length === 0) return;
+    const next = Array.from({ length: OTP_INPUT_LENGTH }, (_, i) => digits[i] ?? "");
+    setOtp(next);
+    const lastIndex = Math.min(digits.length, OTP_INPUT_LENGTH) - 1;
+    if (lastIndex >= 0) {
+      requestAnimationFrame(() => {
+        document.getElementById(`otp-${lastIndex}`)?.focus();
+      });
+    }
+  };
   const handleVerifyCode = async (event) => {
     event.preventDefault();
     const code = otp.join("");
+    console.log("[LoginTrace][Popup] handleVerifyCode", { codeLength: code.length, isSignUp });
     if (code.length !== OTP_INPUT_LENGTH) {
       setError("Please enter the 6-digit code");
       return;
@@ -5452,13 +5613,16 @@ var LoginPopup = ({
       suppressAutoCloseRef.current = true;
     }
     try {
+      console.log("[LoginTrace][Popup] Calling onVerifyEmailCode");
       await onVerifyEmailCode({ code, email });
       if (isSignUp) {
+        console.log("[LoginTrace][Popup] Signup OTP verified, moving to KYC view");
         setView("kyc");
         setLoading(false);
         return;
       }
     } catch (err) {
+      console.error("[LoginTrace][Popup] onVerifyEmailCode threw", err);
       suppressAutoCloseRef.current = false;
       setError(err instanceof Error ? err.message : "Invalid verification code");
     } finally {
@@ -5643,6 +5807,9 @@ var LoginPopup = ({
             value: digit,
             onChange: (event) => handleOTPChange(index, event.target.value),
             onKeyDown: (event) => handleOTPKeyDown(index, event),
+            onInput: (event) => handleOTPInput(index, event),
+            onPaste: handleOTPPaste,
+            autoComplete: index === 0 ? "one-time-code" : "off",
             autoFocus: index === 0
           },
           index
@@ -6699,27 +6866,55 @@ var PriceChange = styled23.span`
   gap: 0.35rem;
   color: ${(props) => props.$isPositive == null ? "var(--color-text-secondary, rgba(255, 255, 255, 0.6))" : props.$isPositive ? "var(--color-positive, #0ecb81)" : "var(--color-negative, #f6465d)"};
 `;
-function PropertyOverview({ propertyName: _propertyName, location: _location, midPrice: _midPrice, onTradeClick: _onTradeClick }) {
+function PropertyOverview({
+  propertyName: _propertyName,
+  location: _location,
+  midPrice: _midPrice,
+  onTradeClick: _onTradeClick,
+  overviewData,
+  minimumParticipation,
+  bedrooms,
+  bathrooms,
+  carSpaces,
+  propertyTypeLabel
+}) {
+  const description = overviewData?.description ?? "N/A";
+  const tokensIssued = overviewData?.tokensIssued ?? null;
+  const offeringValuation = overviewData?.offeringValuation ?? null;
+  const weeklyRent = overviewData?.weeklyRent ?? null;
+  const indicativeListing = overviewData?.indicativeListing ?? "N/A";
+  const minParticipationValue = minimumParticipation ?? overviewData?.minimumParticipation ?? null;
+  const landSize = overviewData?.landSizeSqm ?? null;
+  const buildingSize = overviewData?.buildingSizeSqm ?? null;
+  const propertyType = propertyTypeLabel ?? overviewData?.propertyType ?? "N/A";
+  overviewData?.yearBuilt ?? null;
+  const ownership = overviewData?.ownership ?? "N/A";
+  const zoning = overviewData?.zoning ?? "N/A";
+  const levels = overviewData?.levels ?? null;
+  const daStatus = overviewData?.daStatus ?? "N/A";
+  const unitPrice = tokensIssued && offeringValuation ? offeringValuation / tokensIssued : null;
+  const formattedPropertyType = propertyType !== "N/A" ? propertyType.charAt(0).toUpperCase() + propertyType.slice(1).toLowerCase() : "N/A";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(TwoColGrid, { children: [
       /* @__PURE__ */ jsxs(Section, { children: [
         /* @__PURE__ */ jsx(SectionHeading, { children: "About This Property" }),
-        /* @__PURE__ */ jsxs(BodyText, { children: [
-          "Musgrave is Mosman's oldest mansion. Built in 1880 and meticulously maintained for over 140 years. This is not just property - it's legacy.",
-          /* @__PURE__ */ jsx("br", {}),
-          /* @__PURE__ */ jsx("br", {}),
-          "Assets like this are irreplaceable. Pre-Federation sandstone architecture of this calibre simply cannot be recreated. With fewer than a handful of comparable estates remaining, scarcity drives enduring value."
-        ] })
+        /* @__PURE__ */ jsx(BodyText, { children: description === "N/A" ? description : description.split("\n\n").map((paragraph, i) => /* @__PURE__ */ jsxs("span", { children: [
+          paragraph,
+          i < description.split("\n\n").length - 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("br", {}),
+            /* @__PURE__ */ jsx("br", {})
+          ] })
+        ] }, i)) })
       ] }),
       /* @__PURE__ */ jsxs(Section, { children: [
         /* @__PURE__ */ jsx(SectionHeading, { children: "The Offering" }),
         /* @__PURE__ */ jsx(OfferingGrid, { children: [
-          { label: "Units Issued", value: "50,000", gold: false },
-          { label: "Issue Price", value: "$250 / Unit", gold: true },
-          { label: "Implied Value", value: "$26,000,000", gold: false },
-          { label: "Minimum Participation", value: "$20,000", gold: false },
-          { label: "Est. Cash Flow", value: "$6000/wk", gold: true },
-          { label: "Indicative Listing Date", value: "MAY 2026", gold: false }
+          { label: "Units Issued", value: tokensIssued?.toLocaleString() ?? "-", gold: false },
+          { label: "Issue Price", value: unitPrice ? `$${unitPrice.toFixed(2)} / Unit` : "-", gold: true },
+          { label: "Implied Value", value: offeringValuation ? `$${offeringValuation.toLocaleString()}` : "-", gold: false },
+          { label: "Minimum Participation", value: minParticipationValue != null ? `$${minParticipationValue.toLocaleString()}` : "-", gold: false },
+          { label: "Est. Cash Flow", value: weeklyRent ? `$${weeklyRent.toLocaleString()}/wk` : "-", gold: true },
+          { label: "Indicative Listing Date", value: indicativeListing, gold: false }
         ].map(({ label, value, gold }) => /* @__PURE__ */ jsxs(OfferingItem, { children: [
           /* @__PURE__ */ jsx(OfferingLabel, { children: label }),
           /* @__PURE__ */ jsx(OfferingValue, { $gold: gold, children: value })
@@ -6732,10 +6927,10 @@ function PropertyOverview({ propertyName: _propertyName, location: _location, mi
         /* @__PURE__ */ jsx(AssetDetailsTitle, { children: "Asset Details" })
       ] }),
       /* @__PURE__ */ jsx(StatGrid, { children: [
-        { label: "Bedrooms", value: "6", icon: "\u{1F6CF}\uFE0F" },
-        { label: "Bathrooms", value: "6", icon: "\u{1F6BF}" },
-        { type: "dual", label1: "Land", value1: "1,862", label2: "Floor", value2: "700", unit: "sqm", highlight: true },
-        { label: "Car Spaces", value: "6", icon: "\u{1F697}" }
+        { label: "Bedrooms", value: bedrooms != null ? bedrooms.toString() : "-", icon: "\u{1F6CF}\uFE0F" },
+        { label: "Bathrooms", value: bathrooms != null ? bathrooms.toString() : "-", icon: "\u{1F6BF}" },
+        { type: "dual", label1: "Land", value1: landSize?.toString() ?? "-", label2: "Floor", value2: buildingSize?.toString() ?? "-", unit: "sqm", highlight: true },
+        { label: "Car Spaces", value: carSpaces != null ? carSpaces.toString() : "-", icon: "\u{1F697}" }
       ].map((stat, i) => /* @__PURE__ */ jsx(StatCard, { $highlight: !!stat.highlight, children: stat.type === "dual" ? /* @__PURE__ */ jsxs(DualStatInner, { children: [
         /* @__PURE__ */ jsxs(DualStatCol, { children: [
           /* @__PURE__ */ jsx(StatLabel, { $gold: true, children: stat.label1 }),
@@ -6757,14 +6952,14 @@ function PropertyOverview({ propertyName: _propertyName, location: _location, mi
         /* @__PURE__ */ jsx(StatBigValue, { $gold: !!stat.highlight, children: stat.value })
       ] }) }, i)) }),
       /* @__PURE__ */ jsx(DetailTable, { children: /* @__PURE__ */ jsx(DetailTableGrid, { children: [
-        { label: "Last Sale", value: "$13M (2021)" },
-        { label: "Suburb Median", value: "$7M" },
-        { label: "Replication Cost of Architecture", value: "$7M" },
-        { label: "DA Status", value: "In Progress", status: "progress" },
-        { label: "Property Type", value: "Heritage Home" },
-        { label: "Ownership", value: "Freehold" },
-        { label: "Zoning", value: "R2 Low Density" },
-        { label: "Levels", value: "3" }
+        { label: "Last Sale", value: "-" },
+        { label: "Suburb Median", value: "-" },
+        { label: "Replication Cost of Architecture", value: "-" },
+        { label: "DA Status", value: daStatus, status: daStatus.toLowerCase() === "approved" ? "success" : "progress" },
+        { label: "Property Type", value: formattedPropertyType },
+        { label: "Ownership", value: ownership ?? "N/A" },
+        { label: "Zoning", value: zoning ?? "N/A" },
+        { label: "Levels", value: levels?.toString() ?? "N/A" }
       ].map((item, i) => /* @__PURE__ */ jsxs(DetailCell, { $borderBottom: i < 4, $borderRight: (i + 1) % 4 !== 0, children: [
         /* @__PURE__ */ jsx(DetailCellLabel, { children: item.label }),
         /* @__PURE__ */ jsxs(DetailCellValue, { $status: item.status, children: [
@@ -7650,7 +7845,7 @@ var DocIcon = () => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", vie
   /* @__PURE__ */ jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
   /* @__PURE__ */ jsx("polyline", { points: "10 9 9 9 8 9" })
 ] });
-var docs = [
+var fallbackDocs = [
   { href: "/documents/musgrave-valuation-report.pdf", label: "Valuation Report" },
   { href: "/documents/musgrave-offering-material.pdf", label: "Offering Material" },
   { href: "/documents/musgrave-mortgage-agreement.pdf", label: "Mortgage Agreement" },
@@ -7659,13 +7854,26 @@ var docs = [
   { href: "/documents/musgrave-risk-disclosure.pdf", label: "Risk Disclosure Statement" },
   { href: "/documents/musgrave-building-inspection.pdf", label: "Building & Pest Inspection Report" }
 ];
-function PropertyDocuments() {
+function PropertyDocuments({ documentsData }) {
+  const backendDocuments = Array.isArray(documentsData?.documents) ? documentsData.documents : null;
+  const hasBackendDocuments = !!backendDocuments?.length;
+  const documents = hasBackendDocuments ? backendDocuments : fallbackDocs.map((doc) => ({
+    title: doc.label,
+    documentUrl: doc.href
+  }));
   return /* @__PURE__ */ jsxs(Section2, { children: [
     /* @__PURE__ */ jsx(SectionHeading2, { children: "Investment Documents" }),
-    /* @__PURE__ */ jsx(DocList, { children: docs.map(({ href, label }) => /* @__PURE__ */ jsx(DocItem, { children: /* @__PURE__ */ jsxs(DocLink, { href, target: "_blank", rel: "noopener noreferrer", children: [
-      /* @__PURE__ */ jsx(DocIconWrapper, { children: /* @__PURE__ */ jsx(DocIcon, {}) }),
-      label
-    ] }) }, href)) })
+    /* @__PURE__ */ jsx(DocList, { children: documents.map(({ documentUrl, title }) => {
+      const isAvailable = Boolean(documentUrl);
+      return /* @__PURE__ */ jsx(DocItem, { children: hasBackendDocuments && isAvailable ? /* @__PURE__ */ jsxs(DocLink, { href: documentUrl, target: "_blank", rel: "noopener noreferrer", children: [
+        /* @__PURE__ */ jsx(DocIconWrapper, { children: /* @__PURE__ */ jsx(DocIcon, {}) }),
+        title
+      ] }) : /* @__PURE__ */ jsxs(DocItemDisabled, { children: [
+        /* @__PURE__ */ jsx(DocIconWrapper, { children: /* @__PURE__ */ jsx(DocIcon, {}) }),
+        title,
+        /* @__PURE__ */ jsx(ComingSoonBadge, { children: "Coming Soon" })
+      ] }) }, `${title}-${documentUrl ?? "pending"}`);
+    }) })
   ] });
 }
 var Section2 = styled23.section`
@@ -7709,11 +7917,29 @@ var DocLink = styled23.a`
     color: var(--color-accent);
   }
 `;
+var DocItemDisabled = styled23.div`
+  display: flex;
+  align-items: center;
+  color: var(--color-text-secondary);
+  cursor: not-allowed;
+  opacity: 0.6;
+`;
 var DocIconWrapper = styled23.span`
   margin-right: 0.75rem;
   flex-shrink: 0;
   color: var(--color-text-secondary);
 `;
+var ComingSoonBadge = styled23.span`
+  margin-left: auto;
+  padding: 0.25rem 0.5rem;
+  background: rgba(212, 175, 55, 0.1);
+  color: #D4AF37;
+  border-radius: 0.25rem;
+  font-size: 0.7rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+`;
 var formatIsoDate = (value) => {
   const parsed = new Date(value);
   if (Number.isNaN(parsed.getTime())) return value;
@@ -8000,7 +8226,7 @@ function AssetSelectorBar({ propertyName, tokenPrice, offeringValuation }) {
     /* @__PURE__ */ jsxs(SelectorMetrics, { children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx(MetricLabel, { children: "Unit Price" }),
-        /* @__PURE__ */ jsxs(MetricValue, { accent: true, children: [
+        /* @__PURE__ */ jsxs(MetricValue, { $accent: true, children: [
           "$",
           tokenPrice.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
         ] })
@@ -8095,7 +8321,7 @@ var MetricLabel = styled23.span`
 var MetricValue = styled23.span`
   font-size: 1.1rem;
   font-weight: 700;
-  color: ${(p) => p.accent ? "#D4AF37" : "#fff"};
+  color: ${(p) => p.$accent ? "#D4AF37" : "#fff"};
 `;
 var Separator = styled23.span`
   font-size: 1rem;
@@ -8214,7 +8440,7 @@ function OfferingProgressCard({
           /* @__PURE__ */ jsx("span", { children: "\u24D8" })
         ] }),
         /* @__PURE__ */ jsxs(LivePercent, { children: [
-          percentSold.toFixed(1),
+          percentSold < 0.1 && percentSold > 0 ? percentSold.toFixed(3) : percentSold.toFixed(1),
           "%",
           /* @__PURE__ */ jsx("span", { children: "\u2191" })
         ] })
@@ -8567,6 +8793,7 @@ function OrderPanel({
   statusLabel,
   statusColor,
   ipoStarted,
+  isAuthenticated,
   tokenPrice,
   feeRate,
   supplyToSell,
@@ -8584,10 +8811,14 @@ function OrderPanel({
   setSliderValue,
   setManualOrderAmount,
   onOrderButtonClick,
+  onSignInClick,
   orderButtonText,
   isOrderButtonDisabled,
   hasInsufficientFunds,
-  onPlaceAnotherOrder
+  onPlaceAnotherOrder,
+  onDeposit,
+  tokenDisplayName,
+  tokenSymbol
 }) {
   const [payInputValue, setPayInputValue] = useState("");
   const [receiveInputValue, setReceiveInputValue] = useState("");
@@ -8596,11 +8827,14 @@ function OrderPanel({
   const handlePayBlur = () => {
     setIsPayInputFocused(false);
     const parsed = parseInt(payInputValue.replace(/[^0-9]/g, ""), 10) || 0;
-    if (parsed > availableBalance) {
-      setManualOrderAmount(parsed);
+    if (parsed <= 0) {
+      setManualOrderAmount(null);
+      setSliderValue(0);
+    } else if (parsed >= availableBalance) {
+      setManualOrderAmount(null);
       setSliderValue(100);
     } else {
-      setManualOrderAmount(null);
+      setManualOrderAmount(parsed);
       const ratio = availableBalance === 0 ? 0 : Math.round(Math.max(0, parsed / availableBalance * 100));
       setSliderValue(ratio);
     }
@@ -8609,11 +8843,14 @@ function OrderPanel({
     setIsReceiveInputFocused(false);
     const parsed = parseFloat(receiveInputValue) || 0;
     const newOrderTotal = Math.round(parsed * tokenPrice);
-    if (newOrderTotal > availableBalance) {
-      setManualOrderAmount(newOrderTotal);
+    if (newOrderTotal <= 0) {
+      setManualOrderAmount(null);
+      setSliderValue(0);
+    } else if (newOrderTotal >= availableBalance) {
+      setManualOrderAmount(null);
       setSliderValue(100);
     } else {
-      setManualOrderAmount(null);
+      setManualOrderAmount(newOrderTotal);
       const ratio = availableBalance === 0 ? 0 : Math.round(Math.max(0, newOrderTotal / availableBalance * 100));
       setSliderValue(ratio);
     }
@@ -8639,10 +8876,10 @@ function OrderPanel({
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "success-body", children: [
         [
-          { label: "Units Acquired", value: `${lastOrderDetails?.tokens?.toFixed(2) || "0.00"} MUS` },
+          { label: "Units Acquired", value: `${lastOrderDetails?.tokens?.toFixed(2) || "0.00"} ${tokenSymbol}` },
           { label: "Price Per Unit", value: `$${tokenPrice.toFixed(2)}` },
           {
-            label: "Musgrave Exposure",
+            label: `${tokenDisplayName} Exposure`,
             value: `${((lastOrderDetails?.tokens ?? 0) / supplyToSell * 100).toFixed(3)}%`
           }
         ].map((row) => /* @__PURE__ */ jsxs("div", { className: "success-row", children: [
@@ -8683,7 +8920,7 @@ function OrderPanel({
               }
             }
           ),
-          /* @__PURE__ */ jsx("span", { children: "AUD" })
+          /* @__PURE__ */ jsx("span", { children: "USDC" })
         ] }),
         /* @__PURE__ */ jsx(QuickSelectRow, { children: [25, 50, 75, 100].map((pct) => /* @__PURE__ */ jsxs(
           "button",
@@ -8704,13 +8941,19 @@ function OrderPanel({
       ] }),
       /* @__PURE__ */ jsxs(FundsRow, { children: [
         /* @__PURE__ */ jsxs("span", { children: [
-          "Available Funds: ",
-          /* @__PURE__ */ jsxs("strong", { children: [
-            "$",
-            availableBalance.toLocaleString()
-          ] })
+          "Available Funds:",
+          " ",
+          /* @__PURE__ */ jsx("strong", { children: isAuthenticated ? `$${availableBalance.toLocaleString()}` : "\u2014" })
         ] }),
-        /* @__PURE__ */ jsx(DepositButton, { type: "button", children: "+ Deposit" })
+        /* @__PURE__ */ jsx(
+          DepositButton,
+          {
+            type: "button",
+            onClick: isAuthenticated ? onDeposit : void 0,
+            disabled: !isAuthenticated,
+            children: "+ Deposit"
+          }
+        )
       ] }),
       /* @__PURE__ */ jsx(Divider2, { children: "\u2193" }),
       /* @__PURE__ */ jsxs(Card2, { children: [
@@ -8742,7 +8985,7 @@ function OrderPanel({
               }
             }
           ),
-          /* @__PURE__ */ jsx("span", { children: "MUSGRAVE" })
+          /* @__PURE__ */ jsx("span", { children: tokenDisplayName })
         ] })
       ] }),
       /* @__PURE__ */ jsxs(OrderSummary, { children: [
@@ -8758,7 +9001,8 @@ function OrderPanel({
           /* @__PURE__ */ jsx("span", { children: "Buying" }),
           /* @__PURE__ */ jsxs("strong", { children: [
             tokenQuantity.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 }),
-            " units"
+            " ",
+            tokenSymbol
           ] })
         ] }),
         /* @__PURE__ */ jsxs(SummaryRow, { children: [
@@ -8769,7 +9013,8 @@ function OrderPanel({
           ] }),
           /* @__PURE__ */ jsxs("strong", { children: [
             feeInTokens.toFixed(2),
-            " units"
+            " ",
+            tokenSymbol
           ] })
         ] }),
         /* @__PURE__ */ jsxs(SummaryTotal, { children: [
@@ -8777,7 +9022,7 @@ function OrderPanel({
           /* @__PURE__ */ jsxs("strong", { children: [
             "$",
             orderTotal.toLocaleString(),
-            " AUD"
+            " USDC"
           ] })
         ] })
       ] })
@@ -8788,32 +9033,46 @@ function OrderPanel({
         type: "button",
         disabled: isOrderButtonDisabled,
         "data-green": orderButtonText === "Place Order",
-        onClick: onOrderButtonClick,
+        onClick: () => {
+          if (!isAuthenticated) {
+            onSignInClick();
+            return;
+          }
+          onOrderButtonClick();
+        },
         children: orderButtonText
       }
     ),
-    /* @__PURE__ */ jsxs(BalanceCards, { children: [
+    isAuthenticated && /* @__PURE__ */ jsxs(BalanceCards, { children: [
       /* @__PURE__ */ jsxs(BalanceCard, { children: [
         /* @__PURE__ */ jsx(BalanceLabel, { children: "Available to Invest" }),
         /* @__PURE__ */ jsxs(BalanceValue, { children: [
           "$",
           availableBalance.toLocaleString()
         ] }),
-        /* @__PURE__ */ jsx(BalanceAction, { children: "+ Deposit" })
+        /* @__PURE__ */ jsx(BalanceAction, { onClick: onDeposit, style: { cursor: onDeposit ? "pointer" : "default" }, children: "+ Deposit" })
       ] }),
       /* @__PURE__ */ jsxs(BalanceCard, { children: [
-        /* @__PURE__ */ jsx(BalanceLabel, { children: "Musgrave Owned" }),
+        /* @__PURE__ */ jsx(BalanceLabel, { children: `${tokenDisplayName} Owned` }),
         /* @__PURE__ */ jsxs(BalanceValue, { children: [
           displayedOwnedTokens.toFixed(2),
+          " ",
+          tokenSymbol,
           ownedTokensJustUpdated && /* @__PURE__ */ jsxs("span", { children: [
             "+",
-            lastOrderQuantity.toFixed(2)
+            lastOrderQuantity.toFixed(2),
+            " ",
+            tokenSymbol
           ] })
         ] }),
         /* @__PURE__ */ jsxs(BalanceSub, { children: [
           "$",
-          (displayedOwnedTokens * tokenPrice).toLocaleString(),
-          " \u2022 ",
+          (displayedOwnedTokens * tokenPrice).toLocaleString("en-US", {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0
+          }),
+          " ",
+          "\u2022 ",
           (displayedOwnedTokens / supplyToSell * 100).toFixed(3),
           "%"
         ] })
@@ -9431,7 +9690,23 @@ var IframeShield = styled23.div`
   z-index: 1;
   cursor: pointer;
 `;
-function NewsOrdersSection({ newsItems, userSubscription, tokenPrice }) {
+var SUBSCRIPTIONS_PAGE_SIZE = 6;
+function NewsOrdersSection({ newsItems, userSubscriptions, tokenPrice }) {
+  const [page, setPage] = useState(0);
+  const totalPages = Math.max(1, Math.ceil(userSubscriptions.length / SUBSCRIPTIONS_PAGE_SIZE));
+  useEffect(() => {
+    if (page > totalPages - 1) {
+      setPage(totalPages - 1);
+    }
+  }, [page, totalPages]);
+  useEffect(() => {
+    setPage(0);
+  }, [userSubscriptions]);
+  const paginatedSubscriptions = useMemo(() => {
+    const start = page * SUBSCRIPTIONS_PAGE_SIZE;
+    return userSubscriptions.slice(start, start + SUBSCRIPTIONS_PAGE_SIZE);
+  }, [page, userSubscriptions]);
+  const hasPagination = userSubscriptions.length > SUBSCRIPTIONS_PAGE_SIZE;
   return /* @__PURE__ */ jsxs(Row2, { children: [
     /* @__PURE__ */ jsxs(TradeNewsPanel, { children: [
       /* @__PURE__ */ jsxs(TradeNewsHeader, { children: [
@@ -9458,34 +9733,57 @@ function NewsOrdersSection({ newsItems, userSubscription, tokenPrice }) {
     ] }),
     /* @__PURE__ */ jsxs(TradeNewsPanel, { children: [
       /* @__PURE__ */ jsxs(TradeNewsHeader, { children: [
-        /* @__PURE__ */ jsx("h3", { children: "Your Orders" }),
-        /* @__PURE__ */ jsx("span", { children: "Offering Subscriptions" })
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h3", { children: "Your Orders" }),
+          /* @__PURE__ */ jsx("span", { children: "Offering Subscriptions" })
+        ] }),
+        hasPagination ? /* @__PURE__ */ jsxs(Pagination, { children: [
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setPage((prev) => Math.max(prev - 1, 0)), disabled: page === 0, children: "Prev" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Page ",
+            page + 1,
+            "/",
+            totalPages
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setPage((prev) => Math.min(prev + 1, totalPages - 1)),
+              disabled: page >= totalPages - 1,
+              children: "Next"
+            }
+          )
+        ] }) : null
       ] }),
       /* @__PURE__ */ jsxs(OrdersTable, { children: [
         /* @__PURE__ */ jsx(OrdersHead, { children: ["Date", "Units", "Price", "Total", "Status"].map((h) => /* @__PURE__ */ jsx("div", { children: h }, h)) }),
-        userSubscription ? /* @__PURE__ */ jsxs(OrdersRow, { children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            new Date(userSubscription.timestamp).toLocaleDateString("en-AU", {
-              day: "2-digit",
-              month: "short",
-              year: "numeric"
-            }),
-            /* @__PURE__ */ jsx("span", { children: new Date(userSubscription.timestamp).toLocaleTimeString("en-AU", {
-              hour: "2-digit",
-              minute: "2-digit"
-            }) })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "units", children: userSubscription.tokens.toFixed(2) }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            "$",
-            tokenPrice.toFixed(2)
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "total", children: [
-            "$",
-            userSubscription.value.toLocaleString()
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "status", children: "Confirmed" })
-        ] }) : /* @__PURE__ */ jsxs(OrdersEmpty, { children: [
+        paginatedSubscriptions.length ? paginatedSubscriptions.map((subscription) => {
+          const subscriptionDate = new Date(subscription.timestamp);
+          return /* @__PURE__ */ jsxs(OrdersRow, { children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              subscriptionDate.toLocaleDateString("en-AU", {
+                day: "2-digit",
+                month: "short",
+                year: "numeric"
+              }),
+              /* @__PURE__ */ jsx("span", { children: subscriptionDate.toLocaleTimeString("en-AU", {
+                hour: "2-digit",
+                minute: "2-digit"
+              }) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "units", children: subscription.tokens.toFixed(2) }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              "$",
+              tokenPrice.toFixed(2)
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "total", children: [
+              "$",
+              subscription.value.toLocaleString()
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "status", children: subscription.status ?? "Confirmed" })
+          ] }, `${subscription.timestamp}-${subscription.tokens}`);
+        }) : /* @__PURE__ */ jsxs(OrdersEmpty, { children: [
           /* @__PURE__ */ jsx("div", { children: "\u{1F4CB}" }),
           /* @__PURE__ */ jsx("p", { children: "No orders yet" }),
           /* @__PURE__ */ jsx("small", { children: "Subscribe to the IPO above to place your first order" })
@@ -9612,6 +9910,28 @@ var OrdersTable = styled23.div`
   flex: 1;
   overflow: auto;
 `;
+var Pagination = styled23.div`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+
+  button {
+    border: 1px solid rgba(255,255,255,0.2);
+    background: rgba(255,255,255,0.05);
+    color: #fff;
+    border-radius: 9999px;
+    padding: 0.25rem 0.9rem;
+    font-size: 0.7rem;
+    cursor: pointer;
+    transition: opacity 0.2s;
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
+`;
 var OrdersHead = styled23.div`
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1.2fr;
@@ -9881,19 +10201,24 @@ var ButtonRow = styled23.div`
   }
 `;
 function PropertyBuy({
-  propertyName = "8c Mcleod Street (Musgrave)",
-  propertyLocation: propertyLocationLabel = "Mosman, Sydney",
+  propertyName = "Loaf Property",
+  propertyLocation: propertyLocationLabel = "Sydney, NSW",
+  tokenDisplayName = "Property Token",
+  tokenSymbol = "LOAF",
   isAuthenticated,
   onSignIn,
   saleData,
   walletUsdcBalance,
+  walletPropertyTokenBalance,
   onPurchase,
   purchaseStatus = "idle",
-  purchaseError
+  purchaseError,
+  onDeposit,
+  initialUserSubscriptions = []
 }) {
   const [sliderValue, setSliderValue] = useState(0);
   const [availableBalance, setAvailableBalance] = useState(walletUsdcBalance ?? 125e3);
-  const [userSubscription, setUserSubscription] = useState(null);
+  const [optimisticUserSubscriptions, setOptimisticUserSubscriptions] = useState([]);
   const [manualOrderAmount, setManualOrderAmount] = useState(null);
   const [ownedTokens, setOwnedTokens] = useState(0);
   const [displayedOwnedTokens, setDisplayedOwnedTokens] = useState(0);
@@ -9911,6 +10236,12 @@ function PropertyBuy({
       isNew: false
     }))
   );
+  const resolvedUserSubscriptions = initialUserSubscriptions && initialUserSubscriptions.length > 0 ? initialUserSubscriptions : optimisticUserSubscriptions;
+  useEffect(() => {
+    if (initialUserSubscriptions?.length) {
+      setOptimisticUserSubscriptions([]);
+    }
+  }, [initialUserSubscriptions]);
   const tokenPrice = saleData?.tokenPrice ?? 250;
   const feeRate = (saleData?.feePercent ?? 0.5) / 100;
   const totalSold = saleData?.totalSold ?? 0;
@@ -9933,11 +10264,13 @@ function PropertyBuy({
       setAvailableBalance(walletUsdcBalance);
     }
   }, [walletUsdcBalance]);
-  const handleOrderButtonClick = () => {
-    if (!isAuthenticated) {
-      onSignIn();
-      return;
+  useEffect(() => {
+    if (walletPropertyTokenBalance != null) {
+      setOwnedTokens(walletPropertyTokenBalance);
+      setDisplayedOwnedTokens(walletPropertyTokenBalance);
     }
+  }, [walletPropertyTokenBalance]);
+  const handleOrderButtonClick = () => {
     if (!ipoStarted || tokenQuantity === 0) {
       return;
     }
@@ -9982,15 +10315,17 @@ function PropertyBuy({
     setOwnedTokensJustUpdated(true);
     setLastOrderQuantity(tokenAmountInt);
     setTimeout(() => setOwnedTokensJustUpdated(false), 2e3);
-    setUserSubscription({
+    const optimisticEntry = {
       propertyName,
-      tokenSymbol: "MUS",
+      tokenSymbol,
       tokens: tokenAmountInt,
       value: orderTotal,
       avgPrice: tokenPrice,
       percentOfProperty: estExposure,
-      timestamp: (/* @__PURE__ */ new Date()).toISOString()
-    });
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      status: "pending"
+    };
+    setOptimisticUserSubscriptions((prev) => [optimisticEntry, ...prev]);
     setLastOrderDetails({
       tokens: tokenAmountInt,
       total: orderTotal,
@@ -10052,36 +10387,43 @@ function PropertyBuy({
         }
       ),
       /* @__PURE__ */ jsx(VideoActivitySection, { ipoStarted }),
-      /* @__PURE__ */ jsx(
-        OrderPanel,
-        {
-          statusLabel,
-          statusColor,
-          ipoStarted,
-          isAuthenticated,
-          tokenPrice,
-          feeRate,
-          supplyToSell,
-          availableBalance,
-          displayedOwnedTokens,
-          ownedTokensJustUpdated,
-          lastOrderQuantity,
-          orderPlacedSuccess,
-          lastOrderDetails,
-          tokenQuantity,
-          feeInTokens,
-          orderTotal,
-          sliderValue,
-          manualOrderAmount,
-          setSliderValue,
-          setManualOrderAmount,
-          onOrderButtonClick: handleOrderButtonClick,
-          orderButtonText: getOrderButtonText(),
-          isOrderButtonDisabled: isOrderButtonDisabled(),
-          hasInsufficientFunds,
-          onPlaceAnotherOrder: () => setOrderPlacedSuccess(false)
-        }
-      )
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+        /* @__PURE__ */ jsx(
+          OrderPanel,
+          {
+            statusLabel,
+            statusColor,
+            ipoStarted,
+            tokenDisplayName,
+            tokenSymbol,
+            isAuthenticated,
+            tokenPrice,
+            feeRate,
+            supplyToSell,
+            availableBalance,
+            displayedOwnedTokens,
+            ownedTokensJustUpdated,
+            lastOrderQuantity,
+            orderPlacedSuccess,
+            lastOrderDetails,
+            tokenQuantity,
+            feeInTokens,
+            orderTotal,
+            sliderValue,
+            manualOrderAmount,
+            setSliderValue,
+            setManualOrderAmount,
+            onSignInClick: onSignIn,
+            onOrderButtonClick: handleOrderButtonClick,
+            orderButtonText: getOrderButtonText(),
+            isOrderButtonDisabled: isOrderButtonDisabled(),
+            hasInsufficientFunds,
+            onPlaceAnotherOrder: () => setOrderPlacedSuccess(false),
+            onDeposit
+          }
+        ),
+        purchaseError && /* @__PURE__ */ jsx("div", { style: { marginTop: "0.75rem", padding: "0.75rem 1rem", borderRadius: "8px", background: "rgba(246,70,93,0.1)", border: "1px solid rgba(246,70,93,0.3)", color: "#f6465d", fontSize: "0.8rem", fontWeight: 500 }, children: purchaseError })
+      ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
       /* @__PURE__ */ jsx(GalleryMapSection, { propertyLocation: propertyLocationLabel }),
@@ -10089,7 +10431,7 @@ function PropertyBuy({
         NewsOrdersSection,
         {
           newsItems,
-          userSubscription,
+          userSubscriptions: resolvedUserSubscriptions,
           tokenPrice
         }
       )
@@ -12444,7 +12786,192 @@ function GalleryContent({ galleryImages, startIndex, title, subtitle, onClose })
     }
   );
 }
+var slideIn = keyframes`
+  from { transform: translateX(110%); opacity: 0; }
+  to   { transform: translateX(0);    opacity: 1; }
+`;
+var slideOut = keyframes`
+  from { transform: translateX(0);    opacity: 1; }
+  to   { transform: translateX(110%); opacity: 0; }
+`;
+var progressShrink = keyframes`
+  from { width: 100%; }
+  to   { width: 0%; }
+`;
+var VARIANT_COLORS = {
+  success: { accent: "#0ecb81", icon: "\u2713" },
+  error: { accent: "#f6465d", icon: "\u2715" },
+  info: { accent: "#E6C656", icon: "\u2139" },
+  pending: { accent: "#7EB3E6", icon: "\u25CC" }
+};
+var Wrapper = styled23.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 340px;
+  background: #0d0f1a;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
+  animation: ${({ $exiting }) => $exiting ? css`${slideOut} 0.28s cubic-bezier(0.4,0,1,1) forwards` : css`${slideIn} 0.32s cubic-bezier(0,0,0.2,1) forwards`};
+  pointer-events: all;
+`;
+var Body = styled23.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px 12px;
+`;
+var IconDot = styled23.div`
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: ${({ $color }) => $color}1a;
+  border: 1px solid ${({ $color }) => $color}55;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: ${({ $color }) => $color};
+  margin-top: 1px;
+`;
+var Content = styled23.div`
+  flex: 1;
+  min-width: 0;
+`;
+var Title2 = styled23.p`
+  margin: 0 0 2px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #fff;
+  letter-spacing: 0.01em;
+`;
+var Amount = styled23.p`
+  margin: 0 0 6px;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: #E6C656;
+  letter-spacing: -0.01em;
+`;
+var TxRow = styled23.a`
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-family: 'IBM Plex Mono', 'Space Mono', monospace;
+  font-size: 0.68rem;
+  color: rgba(255, 255, 255, 0.4);
+  text-decoration: none;
+  transition: color 0.15s;
+  &:hover {
+    color: #7EB3E6;
+  }
+`;
+var TxArrow = styled23.span`
+  font-size: 0.6rem;
+  opacity: 0.6;
+`;
+var CloseBtn = styled23.button`
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  padding: 2px 4px;
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.25);
+  font-size: 0.9rem;
+  line-height: 1;
+  transition: color 0.15s;
+  &:hover { color: rgba(255, 255, 255, 0.7); }
+`;
+var ProgressBar2 = styled23.div`
+  height: 2px;
+  background: rgba(255, 255, 255, 0.06);
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background: ${({ $color }) => $color};
+    animation: ${css`${progressShrink} ${({ $duration }) => $duration}ms linear forwards`};
+  }
+`;
+var Container2 = styled23.div`
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 10px;
+  pointer-events: none;
+`;
+var DEFAULT_EXPLORER = "https://sepolia.basescan.org/tx/";
+function truncateHash(hash) {
+  return `${hash.slice(0, 6)}\u2026${hash.slice(-4)}`;
+}
+function ToastItem({ toast, onDismiss }) {
+  const [exiting, setExiting] = useState(false);
+  const timerRef = useRef(null);
+  const dismiss = useCallback(() => {
+    setExiting(true);
+    setTimeout(() => onDismiss(toast.id), 280);
+  }, [onDismiss, toast.id]);
+  useEffect(() => {
+    const duration2 = toast.duration ?? 6e3;
+    if (duration2 > 0) {
+      timerRef.current = setTimeout(dismiss, duration2);
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [dismiss, toast.duration]);
+  const { accent, icon } = VARIANT_COLORS[toast.variant];
+  const duration = toast.duration ?? 6e3;
+  const explorerBase = toast.explorerUrl ?? DEFAULT_EXPLORER;
+  const txUrl = toast.txHash ? `${explorerBase}${toast.txHash}` : void 0;
+  return /* @__PURE__ */ jsxs(Wrapper, { $exiting: exiting, children: [
+    /* @__PURE__ */ jsxs(Body, { children: [
+      /* @__PURE__ */ jsx(IconDot, { $color: accent, children: icon }),
+      /* @__PURE__ */ jsxs(Content, { children: [
+        /* @__PURE__ */ jsx(Title2, { children: toast.title }),
+        toast.amount && /* @__PURE__ */ jsx(Amount, { children: toast.amount }),
+        toast.txHash && txUrl && /* @__PURE__ */ jsxs(TxRow, { href: txUrl, target: "_blank", rel: "noopener noreferrer", children: [
+          truncateHash(toast.txHash),
+          /* @__PURE__ */ jsx(TxArrow, { children: "\u2197" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(CloseBtn, { type: "button", onClick: dismiss, "aria-label": "Dismiss", children: "\u2715" })
+    ] }),
+    duration > 0 && /* @__PURE__ */ jsx(ProgressBar2, { $color: accent, $duration: duration })
+  ] });
+}
+var ToastContext = createContext(null);
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+  const addToast = useCallback((data) => {
+    const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+    setToasts((prev) => [...prev, { ...data, id }]);
+    return id;
+  }, []);
+  const dismiss = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toast: addToast, dismiss }, children: [
+    children,
+    /* @__PURE__ */ jsx(Container2, { children: toasts.map((t) => /* @__PURE__ */ jsx(ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
+  ] });
+}
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within a ToastProvider");
+  return ctx;
+}
 
-export { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Header, HousePositionSlider, HousePositionSliderMobile, LoafLiquidityBadge, LoafLiquidityLogo, LoginPopup, MobileTradeNav, Orderbook, owner_booking_default as OwnerBooking, PaymentPopup, PortfolioSummary, PriceChart, PropertyBuy, PropertyCompareBar, PropertyDocuments, PropertyHeroHeader, PropertyHistory, PropertyInspectionTimes, PropertyNewsUpdates, PropertyOffers, PropertyOverview, PropertyPhotoGallery, PropertySubheader, PropertyTour, PropertyValuation, TradeConfirmationModal, TradingSlider, YourOrders, badgeVariants, buttonVariants };
+export { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Header, HousePositionSlider, HousePositionSliderMobile, LoafLiquidityBadge, LoafLiquidityLogo, LoginPopup, MobileTradeNav, Orderbook, owner_booking_default as OwnerBooking, PaymentPopup, PortfolioSummary, PriceChart, PropertyBuy, PropertyCompareBar, PropertyDocuments, PropertyHeroHeader, PropertyHistory, PropertyInspectionTimes, PropertyNewsUpdates, PropertyOffers, PropertyOverview, PropertyPhotoGallery, PropertySubheader, PropertyTour, PropertyValuation, ToastProvider, TradeConfirmationModal, TradingSlider, YourOrders, badgeVariants, buttonVariants, useToast };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map