@loafmarkets/ui 0.1.16 → 0.1.17

package/dist/index.d.mts

@@ -479,6 +479,8 @@ type LoginPopupProps = {
     }> | void;
     /** Optional view to show immediately when the popup opens. */
     initialView?: LoginPopupView;
+    /** Handler invoked when the user selects "Sign in with Wallet". */
+    onWalletLogin?: () => Promise<void> | void;
 };
 declare const LoginPopup: React__default.FC<LoginPopupProps>;
 
@@ -487,7 +489,7 @@ type HeaderUser = {
     email?: string | null;
     walletAddress?: string | null;
 };
-type HeaderActiveTab = "home" | "trade" | "offerings" | "propertyMap" | "about";
+type HeaderActiveTab = "home" | "trade" | "offerings" | "propertyMap" | "about" | "portfolio" | "learn";
 type HeaderLoginPopupComponentProps = {
     onClose: () => void;
     initialView?: LoginPopupView;
@@ -505,8 +507,10 @@ type HeaderProps = {
     tradePath?: string;
     homePath?: string;
     aboutPath?: string;
+    learnPath?: string;
     offeringsPath?: string;
     propertyMapPath?: string;
+    portfolioPath?: string;
     loafLiquidityPath?: string;
     /** Absolute URL for the auth/login surface (e.g. https://auth.loafmarkets.com/login). */
     authLoginUrl?: string | null;
@@ -716,6 +720,8 @@ type PropertySubscription = {
 type PropertyBuyProps = {
     propertyName?: string;
     propertyLocation?: string;
+    tokenDisplayName?: string;
+    tokenSymbol?: string;
     isAuthenticated: boolean;
     onSignIn: () => void;
     saleData?: SaleData | null;
@@ -727,7 +733,7 @@ type PropertyBuyProps = {
     onDeposit?: () => void;
     initialUserSubscriptions?: PropertySubscription[];
 };
-declare function PropertyBuy({ propertyName, propertyLocation: propertyLocationLabel, isAuthenticated, onSignIn, saleData, walletUsdcBalance, walletPropertyTokenBalance, onPurchase, purchaseStatus, purchaseError, onDeposit, initialUserSubscriptions, }: PropertyBuyProps): react_jsx_runtime.JSX.Element;
+declare function PropertyBuy({ propertyName, propertyLocation: propertyLocationLabel, tokenDisplayName, tokenSymbol, isAuthenticated, onSignIn, saleData, walletUsdcBalance, walletPropertyTokenBalance, onPurchase, purchaseStatus, purchaseError, onDeposit, initialUserSubscriptions, }: PropertyBuyProps): react_jsx_runtime.JSX.Element;
 
 type OwnerBookingProps = {
     propertyName?: string | null;

package/dist/index.d.ts

@@ -479,6 +479,8 @@ type LoginPopupProps = {
     }> | void;
     /** Optional view to show immediately when the popup opens. */
     initialView?: LoginPopupView;
+    /** Handler invoked when the user selects "Sign in with Wallet". */
+    onWalletLogin?: () => Promise<void> | void;
 };
 declare const LoginPopup: React__default.FC<LoginPopupProps>;
 
@@ -487,7 +489,7 @@ type HeaderUser = {
     email?: string | null;
     walletAddress?: string | null;
 };
-type HeaderActiveTab = "home" | "trade" | "offerings" | "propertyMap" | "about";
+type HeaderActiveTab = "home" | "trade" | "offerings" | "propertyMap" | "about" | "portfolio" | "learn";
 type HeaderLoginPopupComponentProps = {
     onClose: () => void;
     initialView?: LoginPopupView;
@@ -505,8 +507,10 @@ type HeaderProps = {
     tradePath?: string;
     homePath?: string;
     aboutPath?: string;
+    learnPath?: string;
     offeringsPath?: string;
     propertyMapPath?: string;
+    portfolioPath?: string;
     loafLiquidityPath?: string;
     /** Absolute URL for the auth/login surface (e.g. https://auth.loafmarkets.com/login). */
     authLoginUrl?: string | null;
@@ -716,6 +720,8 @@ type PropertySubscription = {
 type PropertyBuyProps = {
     propertyName?: string;
     propertyLocation?: string;
+    tokenDisplayName?: string;
+    tokenSymbol?: string;
     isAuthenticated: boolean;
     onSignIn: () => void;
     saleData?: SaleData | null;
@@ -727,7 +733,7 @@ type PropertyBuyProps = {
     onDeposit?: () => void;
     initialUserSubscriptions?: PropertySubscription[];
 };
-declare function PropertyBuy({ propertyName, propertyLocation: propertyLocationLabel, isAuthenticated, onSignIn, saleData, walletUsdcBalance, walletPropertyTokenBalance, onPurchase, purchaseStatus, purchaseError, onDeposit, initialUserSubscriptions, }: PropertyBuyProps): react_jsx_runtime.JSX.Element;
+declare function PropertyBuy({ propertyName, propertyLocation: propertyLocationLabel, tokenDisplayName, tokenSymbol, isAuthenticated, onSignIn, saleData, walletUsdcBalance, walletPropertyTokenBalance, onPurchase, purchaseStatus, purchaseError, onDeposit, initialUserSubscriptions, }: PropertyBuyProps): react_jsx_runtime.JSX.Element;
 
 type OwnerBookingProps = {
     propertyName?: string | null;

package/dist/index.js

@@ -4441,11 +4441,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,
@@ -4459,8 +4462,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,
@@ -4478,13 +4483,23 @@ var Header = ({
   const [isMoreMenuOpen, setIsMoreMenuOpen] = React5.useState(false);
   const [showLoginPopup, setShowLoginPopup] = React5.useState(false);
   const [loginPopupInitialView, setLoginPopupInitialView] = React5.useState(void 0);
+  React5.useEffect(() => {
+    console.log("[LoginTrace][Header] mounted");
+    return () => console.log("[LoginTrace][Header] unmounted");
+  }, []);
+  React5.useEffect(() => {
+    console.log("[LoginTrace][Header] showLoginPopup changed", { showLoginPopup, loginPopupInitialView });
+  }, [showLoginPopup, loginPopupInitialView]);
+  React5.useEffect(() => {
+    console.log("[LoginTrace][Header] loginPopupComponent updated", { hasComponent: Boolean(LoginPopupComponent) });
+  }, [LoginPopupComponent]);
   React5.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")) {
@@ -4499,6 +4514,19 @@ var Header = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isUserMenuOpen, isMobileMenuOpen, isMoreMenuOpen]);
+  React5.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);
@@ -4506,7 +4534,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) => {
@@ -4550,13 +4578,13 @@ 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("funding");
       setShowLoginPopup(true);
@@ -4565,7 +4593,7 @@ var Header = ({
   const handlePortfolioNavigate = (event) => {
     event?.preventDefault();
     closeMenus();
-    console.log("[Header] Portfolio selected");
+    console.log("[LoginTrace][Header] Portfolio selected");
     if (_onOrdersNavigate) {
       _onOrdersNavigate();
       return;
@@ -4607,6 +4635,7 @@ var Header = ({
     return false;
   };
   const handleSignIn = () => {
+    console.log("[LoginTrace][Header] handleSignIn invoked", { hasCustomHandler: Boolean(onSignInClick) });
     if (onSignInClick) {
       onSignInClick();
       return;
@@ -4615,15 +4644,23 @@ var Header = ({
       return;
     }
     if (LoginPopupComponent) {
+      console.log("[LoginTrace][Header] Opening login popup via handleSignIn");
       setShowLoginPopup(true);
     }
   };
+  const handleLoginPopupClose = React5__namespace.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;
@@ -4632,6 +4669,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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Overlay, { $isOpen: isMobileMenuOpen, onClick: () => setIsMobileMenuOpen(false) }),
     /* @__PURE__ */ jsxRuntime.jsxs(HeaderContainer, { children: [
@@ -4671,6 +4710,18 @@ var Header = ({
                     children: "Trade"
                   }
                 ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  NavLink,
+                  {
+                    href: portfolioPath,
+                    className: portfolioActive ? "active" : "",
+                    onClick: (event) => {
+                      event.preventDefault();
+                      handleNavigation(portfolioPath);
+                    },
+                    children: "Portfolio"
+                  }
+                ),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   NavLink,
                   {
@@ -4680,7 +4731,7 @@ var Header = ({
                       event.preventDefault();
                       handleNavigation(offeringsPath);
                     },
-                    children: "Offerings"
+                    children: "Initial Offerings"
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -4695,6 +4746,18 @@ var Header = ({
                     children: "Property Map"
                   }
                 ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  NavLink,
+                  {
+                    href: learnPath,
+                    className: learnActive ? "active" : "",
+                    onClick: (event) => {
+                      event.preventDefault();
+                      handleNavigation(learnPath);
+                    },
+                    children: "Learn"
+                  }
+                ),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   NavLink,
                   {
@@ -4742,8 +4805,10 @@ var Header = ({
                 children: "Trade"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(offeringsPath), children: "Offerings" }),
+            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(portfolioPath), children: "Portfolio" }),
+            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(offeringsPath), children: "Initial Offerings" }),
             /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(propertyMapPath), children: "Property Map" }),
+            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(learnPath), children: "Learn" }),
             /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(aboutPath), children: "About" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderTop: "1px solid #2b3139", margin: "8px 0" } }),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -4799,7 +4864,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__ */ jsxRuntime.jsx(MenuItem, { children: "Add funding" })
@@ -4810,7 +4875,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__ */ jsxRuntime.jsx(MenuItem, { className: "logout", children: "Logout" })
@@ -4845,10 +4910,7 @@ var Header = ({
     LoginPopupComponent && showLoginPopup && /* @__PURE__ */ jsxRuntime.jsx(
       LoginPopupComponent,
       {
-        onClose: () => {
-          setShowLoginPopup(false);
-          setLoginPopupInitialView(void 0);
-        },
+        onClose: handleLoginPopupClose,
         initialView: loginPopupInitialView
       }
     )
@@ -5376,6 +5438,7 @@ var OTP_INPUT_LENGTH = 6;
 var LoginPopup = ({
   onClose,
   onOpenEarlyAccess,
+  onWalletLogin,
   isAuthenticated,
   currentUser,
   onSendEmailCode,
@@ -5400,38 +5463,74 @@ var LoginPopup = ({
   const [fundingLoading, setFundingLoading] = React5.useState(false);
   const [fundingError, setFundingError] = React5.useState("");
   const suppressAutoCloseRef = React5__namespace.default.useRef(false);
+  React5.useEffect(() => {
+    console.log("[LoginTrace][Popup] mounted");
+    return () => console.log("[LoginTrace][Popup] unmounted");
+  }, []);
+  React5.useEffect(() => {
+    console.log("[LoginTrace][Popup] view updated", { view });
+  }, [view]);
+  React5.useEffect(() => {
+    console.log("[LoginTrace][Popup] auth props updated", { isAuthenticated, hasUser: Boolean(currentUser) });
+  }, [isAuthenticated, currentUser]);
   React5.useEffect(() => {
     if (typeof initialView === "string") {
+      console.log("[LoginTrace][Popup] initialView prop changed", { initialView });
       setView(initialView);
     }
   }, [initialView]);
   React5.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;
@@ -5444,13 +5543,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.");
@@ -5458,10 +5559,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);
@@ -5494,9 +5598,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;
@@ -5511,13 +5638,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 {
@@ -5702,6 +5832,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
@@ -8685,6 +8818,7 @@ function OrderPanel({
   statusLabel,
   statusColor,
   ipoStarted,
+  isAuthenticated,
   tokenPrice,
   feeRate,
   supplyToSell,
@@ -8702,11 +8836,14 @@ function OrderPanel({
   setSliderValue,
   setManualOrderAmount,
   onOrderButtonClick,
+  onSignInClick,
   orderButtonText,
   isOrderButtonDisabled,
   hasInsufficientFunds,
   onPlaceAnotherOrder,
-  onDeposit
+  onDeposit,
+  tokenDisplayName,
+  tokenSymbol
 }) {
   const [payInputValue, setPayInputValue] = React5.useState("");
   const [receiveInputValue, setReceiveInputValue] = React5.useState("");
@@ -8764,10 +8901,10 @@ function OrderPanel({
       ] }),
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "success-row", children: [
@@ -8829,13 +8966,19 @@ function OrderPanel({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(FundsRow, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-          "Available Funds: ",
-          /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
-            "$",
-            availableBalance.toLocaleString()
-          ] })
+          "Available Funds:",
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: isAuthenticated ? `$${availableBalance.toLocaleString()}` : "\u2014" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(DepositButton, { type: "button", onClick: onDeposit, children: "+ Deposit" })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DepositButton,
+          {
+            type: "button",
+            onClick: isAuthenticated ? onDeposit : void 0,
+            disabled: !isAuthenticated,
+            children: "+ Deposit"
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(Divider2, { children: "\u2193" }),
       /* @__PURE__ */ jsxRuntime.jsxs(Card2, { children: [
@@ -8867,7 +9010,7 @@ function OrderPanel({
               }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "MUSGRAVE" })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: tokenDisplayName })
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(OrderSummary, { children: [
@@ -8883,7 +9026,8 @@ function OrderPanel({
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Buying" }),
           /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
             tokenQuantity.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 }),
-            " units"
+            " ",
+            tokenSymbol
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(SummaryRow, { children: [
@@ -8894,7 +9038,8 @@ function OrderPanel({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
             feeInTokens.toFixed(2),
-            " units"
+            " ",
+            tokenSymbol
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(SummaryTotal, { children: [
@@ -8913,11 +9058,17 @@ function OrderPanel({
         type: "button",
         disabled: isOrderButtonDisabled,
         "data-green": orderButtonText === "Place Order",
-        onClick: onOrderButtonClick,
+        onClick: () => {
+          if (!isAuthenticated) {
+            onSignInClick();
+            return;
+          }
+          onOrderButtonClick();
+        },
         children: orderButtonText
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(BalanceCards, { children: [
+    isAuthenticated && /* @__PURE__ */ jsxRuntime.jsxs(BalanceCards, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(BalanceCard, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(BalanceLabel, { children: "Available to Invest" }),
         /* @__PURE__ */ jsxRuntime.jsxs(BalanceValue, { children: [
@@ -8927,18 +9078,26 @@ function OrderPanel({
         /* @__PURE__ */ jsxRuntime.jsx(BalanceAction, { onClick: onDeposit, style: { cursor: onDeposit ? "pointer" : "default" }, children: "+ Deposit" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(BalanceCard, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(BalanceLabel, { children: "Musgrave Owned" }),
+        /* @__PURE__ */ jsxRuntime.jsx(BalanceLabel, { children: `${tokenDisplayName} Owned` }),
         /* @__PURE__ */ jsxRuntime.jsxs(BalanceValue, { children: [
           displayedOwnedTokens.toFixed(2),
+          " ",
+          tokenSymbol,
           ownedTokensJustUpdated && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
             "+",
-            lastOrderQuantity.toFixed(2)
+            lastOrderQuantity.toFixed(2),
+            " ",
+            tokenSymbol
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(BalanceSub, { children: [
           "$",
-          (displayedOwnedTokens * tokenPrice).toLocaleString(),
-          " \u2022 ",
+          (displayedOwnedTokens * tokenPrice).toLocaleString("en-US", {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0
+          }),
+          " ",
+          "\u2022 ",
           (displayedOwnedTokens / supplyToSell * 100).toFixed(3),
           "%"
         ] })
@@ -10067,8 +10226,10 @@ var ButtonRow = styled23__default.default.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,
@@ -10135,10 +10296,6 @@ function PropertyBuy({
     }
   }, [walletPropertyTokenBalance]);
   const handleOrderButtonClick = () => {
-    if (!isAuthenticated) {
-      onSignIn();
-      return;
-    }
     if (!ipoStarted || tokenQuantity === 0) {
       return;
     }
@@ -10185,7 +10342,7 @@ function PropertyBuy({
     setTimeout(() => setOwnedTokensJustUpdated(false), 2e3);
     const optimisticEntry = {
       propertyName,
-      tokenSymbol: "MUS",
+      tokenSymbol,
       tokens: tokenAmountInt,
       value: orderTotal,
       avgPrice: tokenPrice,
@@ -10262,6 +10419,8 @@ function PropertyBuy({
             statusLabel,
             statusColor,
             ipoStarted,
+            tokenDisplayName,
+            tokenSymbol,
             isAuthenticated,
             tokenPrice,
             feeRate,
@@ -10279,6 +10438,7 @@ function PropertyBuy({
             manualOrderAmount,
             setSliderValue,
             setManualOrderAmount,
+            onSignInClick: onSignIn,
             onOrderButtonClick: handleOrderButtonClick,
             orderButtonText: getOrderButtonText(),
             isOrderButtonDisabled: isOrderButtonDisabled(),