@loafmarkets/ui 0.1.16 → 0.1.18

package/dist/index.js

@@ -4437,15 +4437,15 @@ var PriceBlock = styled23__default.default.span`
   border-left: 1px solid rgba(255, 255, 255, 0.25);
   min-height: 1.5rem;
 `;
-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_OFFERINGS_PATH = "/ipo/musgrave";
+var DEFAULT_LEARN_PATH = "/learn";
 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,
@@ -4455,14 +4455,15 @@ var Header = ({
   onLogout,
   onSignInClick,
   loginPopupComponent: LoginPopupComponent,
-  tradeUrl = DEFAULT_TRADE_URL,
   tradePath = DEFAULT_TRADE_PATH,
   homePath = DEFAULT_HOME_PATH,
   aboutPath = DEFAULT_ABOUT_PATH,
-  offeringsPath = DEFAULT_OFFERINGS_PATH,
+  learnPath = DEFAULT_LEARN_PATH,
+  offeringsPath,
   propertyMapPath = DEFAULT_PROPERTY_MAP_PATH,
+  portfolioPath = DEFAULT_PORTFOLIO_PATH,
   loafLiquidityPath = DEFAULT_LOAF_LIQUIDITY_PATH,
-  authLoginUrl = DEFAULT_AUTH_LOGIN_URL,
+  authLoginUrl,
   authReturnParam = DEFAULT_AUTH_RETURN_PARAM,
   getAuthReturnUrl,
   logoHref,
@@ -4478,13 +4479,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 +4510,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 +4530,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) => {
@@ -4535,7 +4559,7 @@ var Header = ({
       onLoafLiquidityClick();
       return;
     }
-    performNavigation(loafLiquidityPath);
+    performNavigation(resolvedLoafLiquidityPath);
   };
   const handleTradeNavigation = () => {
     closeMenus();
@@ -4543,20 +4567,18 @@ var Header = ({
       onTradeClick();
       return;
     }
-    if (typeof window !== "undefined") {
-      window.location.href = tradeUrl;
-    }
+    performNavigation(resolvedTradePath);
   };
   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 +4587,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 +4629,7 @@ var Header = ({
     return false;
   };
   const handleSignIn = () => {
+    console.log("[LoginTrace][Header] handleSignIn invoked", { hasCustomHandler: Boolean(onSignInClick) });
     if (onSignInClick) {
       onSignInClick();
       return;
@@ -4615,15 +4638,32 @@ 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 resolvedTradePath = tradePath ?? DEFAULT_TRADE_PATH;
+  const resolvedHomePath = homePath ?? DEFAULT_HOME_PATH;
+  const resolvedAboutPath = aboutPath ?? DEFAULT_ABOUT_PATH;
+  const resolvedLearnPath = learnPath ?? DEFAULT_LEARN_PATH;
+  const resolvedOfferingsPath = offeringsPath ?? void 0;
+  const offeringsHref = resolvedOfferingsPath ?? resolvedHomePath;
+  const resolvedPropertyMapPath = propertyMapPath ?? DEFAULT_PROPERTY_MAP_PATH;
+  const resolvedPortfolioPath = portfolioPath ?? DEFAULT_PORTFOLIO_PATH;
+  const resolvedLoafLiquidityPath = loafLiquidityPath ?? DEFAULT_LOAF_LIQUIDITY_PATH;
   const inferredActiveTab = (() => {
-    if (locationPath === tradePath) return "trade";
-    if (locationPath === homePath) return "home";
-    if (locationPath === aboutPath) return "about";
-    if (locationPath.startsWith(offeringsPath)) return "offerings";
-    if (locationPath === propertyMapPath) return "propertyMap";
+    if (locationPath === resolvedTradePath) return "trade";
+    if (locationPath === resolvedHomePath) return "home";
+    if (locationPath === resolvedAboutPath) return "about";
+    if (locationPath === resolvedLearnPath) return "learn";
+    if (resolvedOfferingsPath && locationPath.startsWith(resolvedOfferingsPath)) return "offerings";
+    if (locationPath === resolvedPropertyMapPath) return "propertyMap";
+    if (locationPath === resolvedPortfolioPath) return "portfolio";
     return null;
   })();
   const resolvedActiveTab = activeTab ?? inferredActiveTab;
@@ -4632,12 +4672,14 @@ 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: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Logo, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(LogoLink, { href: logoHref ?? homePath, onClick: handleLogoNavigation, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: Loaf_logo_Banner_default, alt: "LOAF Logo" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(LogoLink, { href: logoHref ?? resolvedHomePath, onClick: handleLogoNavigation, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: Loaf_logo_Banner_default, alt: "LOAF Logo" }) }),
           /* @__PURE__ */ jsxRuntime.jsx("h1", { children: "LOAF" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(Nav, { $isOpen: isMobileMenuOpen, className: "mobile-menu", children: [
@@ -4650,11 +4692,11 @@ var Header = ({
                 /* @__PURE__ */ jsxRuntime.jsx(
                   NavLink,
                   {
-                    href: homePath,
+                    href: resolvedHomePath,
                     className: homeActive ? "active" : "",
                     onClick: (event) => {
                       event.preventDefault();
-                      handleNavigation(homePath);
+                      handleNavigation(resolvedHomePath);
                     },
                     children: "Home"
                   }
@@ -4662,7 +4704,7 @@ var Header = ({
                 /* @__PURE__ */ jsxRuntime.jsx(
                   NavLink,
                   {
-                    href: tradeUrl,
+                    href: resolvedTradePath,
                     className: tradeActive ? "active" : "",
                     onClick: (event) => {
                       event.preventDefault();
@@ -4674,23 +4716,35 @@ var Header = ({
                 /* @__PURE__ */ jsxRuntime.jsx(
                   NavLink,
                   {
-                    href: offeringsPath,
+                    href: resolvedPortfolioPath,
+                    className: portfolioActive ? "active" : "",
+                    onClick: (event) => {
+                      event.preventDefault();
+                      handleNavigation(resolvedPortfolioPath);
+                    },
+                    children: "Portfolio"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  NavLink,
+                  {
+                    href: offeringsHref,
                     className: offeringsActive ? "active" : "",
                     onClick: (event) => {
                       event.preventDefault();
-                      handleNavigation(offeringsPath);
+                      handleNavigation(offeringsHref);
                     },
-                    children: "Offerings"
+                    children: "Initial Offerings"
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   NavLink,
                   {
-                    href: propertyMapPath,
+                    href: resolvedPropertyMapPath,
                     className: propertyMapActive ? "active" : "",
                     onClick: (event) => {
                       event.preventDefault();
-                      handleNavigation(propertyMapPath);
+                      handleNavigation(resolvedPropertyMapPath);
                     },
                     children: "Property Map"
                   }
@@ -4698,11 +4752,23 @@ var Header = ({
                 /* @__PURE__ */ jsxRuntime.jsx(
                   NavLink,
                   {
-                    href: aboutPath,
+                    href: resolvedLearnPath,
+                    className: learnActive ? "active" : "",
+                    onClick: (event) => {
+                      event.preventDefault();
+                      handleNavigation(resolvedLearnPath);
+                    },
+                    children: "Learn"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  NavLink,
+                  {
+                    href: resolvedAboutPath,
                     className: aboutActive ? "active" : "",
                     onClick: (event) => {
                       event.preventDefault();
-                      handleNavigation(aboutPath);
+                      handleNavigation(resolvedAboutPath);
                     },
                     children: "About"
                   }
@@ -4732,7 +4798,7 @@ var Header = ({
               /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zM5 9.5C5 7.01 7.01 5 9.5 5S14 7.01 14 9.5 11.99 14 9.5 14 5 11.99 5 9.5z" }) }),
               /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", placeholder: "Search..." })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(homePath), children: "Home" }),
+            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedHomePath), children: "Home" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               MobileNavItem,
               {
@@ -4742,9 +4808,11 @@ var Header = ({
                 children: "Trade"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(offeringsPath), children: "Offerings" }),
-            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(propertyMapPath), children: "Property Map" }),
-            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(aboutPath), children: "About" }),
+            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedPortfolioPath), children: "Portfolio" }),
+            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(offeringsHref), children: "Initial Offerings" }),
+            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedPropertyMapPath), children: "Property Map" }),
+            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedLearnPath), children: "Learn" }),
+            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedAboutPath), children: "About" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderTop: "1px solid #2b3139", margin: "8px 0" } }),
             /* @__PURE__ */ jsxRuntime.jsx(
               MobileNavItem,
@@ -4799,7 +4867,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 +4878,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 +4913,7 @@ var Header = ({
     LoginPopupComponent && showLoginPopup && /* @__PURE__ */ jsxRuntime.jsx(
       LoginPopupComponent,
       {
-        onClose: () => {
-          setShowLoginPopup(false);
-          setLoginPopupInitialView(void 0);
-        },
+        onClose: handleLoginPopupClose,
         initialView: loginPopupInitialView
       }
     )
@@ -5376,6 +5441,7 @@ var OTP_INPUT_LENGTH = 6;
 var LoginPopup = ({
   onClose,
   onOpenEarlyAccess,
+  onWalletLogin,
   isAuthenticated,
   currentUser,
   onSendEmailCode,
@@ -5400,38 +5466,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 +5546,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 +5562,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 +5601,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 +5641,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 +5835,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 +8821,7 @@ function OrderPanel({
   statusLabel,
   statusColor,
   ipoStarted,
+  isAuthenticated,
   tokenPrice,
   feeRate,
   supplyToSell,
@@ -8702,11 +8839,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 +8904,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 +8969,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 +9013,7 @@ function OrderPanel({
               }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "MUSGRAVE" })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: tokenDisplayName })
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(OrderSummary, { children: [
@@ -8883,7 +9029,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 +9041,8 @@ function OrderPanel({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
             feeInTokens.toFixed(2),
-            " units"
+            " ",
+            tokenSymbol
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(SummaryTotal, { children: [
@@ -8913,11 +9061,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 +9081,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 +10229,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 +10299,6 @@ function PropertyBuy({
     }
   }, [walletPropertyTokenBalance]);
   const handleOrderButtonClick = () => {
-    if (!isAuthenticated) {
-      onSignIn();
-      return;
-    }
     if (!ipoStarted || tokenQuantity === 0) {
       return;
     }
@@ -10185,7 +10345,7 @@ function PropertyBuy({
     setTimeout(() => setOwnedTokensJustUpdated(false), 2e3);
     const optimisticEntry = {
       propertyName,
-      tokenSymbol: "MUS",
+      tokenSymbol,
       tokens: tokenAmountInt,
       value: orderTotal,
       avgPrice: tokenPrice,
@@ -10262,6 +10422,8 @@ function PropertyBuy({
             statusLabel,
             statusColor,
             ipoStarted,
+            tokenDisplayName,
+            tokenSymbol,
             isAuthenticated,
             tokenPrice,
             feeRate,
@@ -10279,6 +10441,7 @@ function PropertyBuy({
             manualOrderAmount,
             setSliderValue,
             setManualOrderAmount,
+            onSignInClick: onSignIn,
             onOrderButtonClick: handleOrderButtonClick,
             orderButtonText: getOrderButtonText(),
             isOrderButtonDisabled: isOrderButtonDisabled(),