@loafmarkets/ui 0.1.382 → 0.1.384

package/dist/index.js

@@ -1900,7 +1900,6 @@ var Orderbook = React5__namespace.forwardRef(
     amountPrecision = 2,
     defaultTab = "orderbook",
     onTabChange,
-    showTradesTab = true,
     rightHeader,
     variant = "auto",
     userOrderPrices,
@@ -1914,9 +1913,7 @@ var Orderbook = React5__namespace.forwardRef(
     ...props
   }, ref) => {
     const resolvedRightHeader = rightHeader ?? /* @__PURE__ */ jsxRuntime.jsx(LoafLiquidityBadge, { className: "text-[0.6rem] orderbook-ll-badge", onClick: onLoafLiquidityClick });
-    const [tab, setTabState] = React5__namespace.useState(defaultTab);
-    const setTab = setTabState;
-    const effectiveTab = showTradesTab ? tab : "orderbook";
+    const [tab, setTab] = React5__namespace.useState(defaultTab);
     const [tradeFilter, setTradeFilter] = React5__namespace.useState("all");
     const viewportCompact = useViewportCompact(COMPACT_BREAKPOINT_PX);
     const { userAskPrices, userBidPrices } = React5__namespace.useMemo(() => {
@@ -2010,8 +2007,7 @@ var Orderbook = React5__namespace.forwardRef(
     const midClass = midChangePercent == null ? "text-white" : midChangePercent >= 0 ? "text-[#0ecb81]" : "text-[#f6465d]";
     const tradeFiltered = trades.filter((t) => tradeFilter === "all" || t.type === tradeFilter);
     const layoutProps = {
-      tab: effectiveTab,
-      showTradesTab,
+      tab,
       handleTab,
       tradeFilter,
       setTradeFilter,
@@ -2088,7 +2084,6 @@ function SkeletonRow({ compact }) {
 }
 function DesktopOrderbookLayout({
   tab,
-  showTradesTab = true,
   handleTab,
   tradeFilter,
   setTradeFilter,
@@ -2138,7 +2133,7 @@ function DesktopOrderbookLayout({
             ]
           }
         ),
-        showTradesTab ? /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             type: "button",
@@ -2152,7 +2147,7 @@ function DesktopOrderbookLayout({
               tab === "trades" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -bottom-px left-0 h-[2px] w-full bg-[#E6C87E]" }) : null
             ]
           }
-        ) : null
+        )
       ] }),
       tab === "trades" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-xs", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -2291,7 +2286,6 @@ function DesktopOrderbookLayout({
 }
 function MobileOrderbookLayout({
   tab,
-  showTradesTab = true,
   handleTab,
   tradeFilter,
   setTradeFilter,
@@ -2340,7 +2334,7 @@ function MobileOrderbookLayout({
             children: "Orderbook"
           }
         ),
-        showTradesTab ? /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             onClick: () => handleTab("trades"),
@@ -2354,7 +2348,7 @@ function MobileOrderbookLayout({
             },
             children: "Trades"
           }
-        ) : null
+        )
       ] }),
       tab === "trades" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 text-[0.6rem] text-white/70", children: ["all", "buy", "sell"].map((filter) => /* @__PURE__ */ jsxRuntime.jsx(
         "button",
@@ -5042,9 +5036,9 @@ var PulsingDot = styled10__default.default.span`
 `;
 function fmtCompactUsd(n) {
   const abs = Math.abs(n);
-  if (abs >= 1e6) return `${(abs / 1e6).toFixed(2)}M`;
-  if (abs >= 1e3) return `${(abs / 1e3).toFixed(1)}K`;
-  return `${abs.toFixed(2)}`;
+  if (abs >= 1e6) return `$${(abs / 1e6).toFixed(2)}M`;
+  if (abs >= 1e3) return `$${(abs / 1e3).toFixed(1)}K`;
+  return `$${abs.toFixed(2)}`;
 }
 function useIsNarrow(maxWidthPx = 768) {
   const query = `(max-width:${maxWidthPx}px)`;
@@ -5067,6 +5061,8 @@ var DEFAULT_ABOUT_PATH = "/about";
 var DEFAULT_LEARN_PATH = "/learn";
 var DEFAULT_API_PATH = "/api";
 var DEFAULT_PROPERTY_MAP_PATH = "/map";
+var DEFAULT_LEADERBOARD_PATH = "/league";
+var DEFAULT_LEADERBOARD_PAGE_PATH = "/leaderboard";
 var DEFAULT_PORTFOLIO_PATH = "/portfolio";
 var DEFAULT_LOAF_LIQUIDITY_PATH = "/loaf-liquidity";
 var DEFAULT_AUTH_RETURN_PARAM = "returnTo";
@@ -5087,6 +5083,8 @@ var Header = ({
   apiPath = DEFAULT_API_PATH,
   offeringsPath,
   propertyMapPath = DEFAULT_PROPERTY_MAP_PATH,
+  leaderboardPath = DEFAULT_LEADERBOARD_PATH,
+  leaderboardPagePath = DEFAULT_LEADERBOARD_PAGE_PATH,
   portfolioPath = DEFAULT_PORTFOLIO_PATH,
   loafLiquidityPath = DEFAULT_LOAF_LIQUIDITY_PATH,
   authLoginUrl,
@@ -5360,6 +5358,8 @@ var Header = ({
   const resolvedOfferingsPath = offeringsPath ?? void 0;
   const offeringsHref = resolvedOfferingsPath ?? resolvedHomePath;
   const resolvedPropertyMapPath = propertyMapPath ?? DEFAULT_PROPERTY_MAP_PATH;
+  const resolvedLeaderboardPath = leaderboardPath ?? DEFAULT_LEADERBOARD_PATH;
+  const resolvedLeaderboardPagePath = leaderboardPagePath ?? DEFAULT_LEADERBOARD_PAGE_PATH;
   const resolvedPortfolioPath = portfolioPath ?? DEFAULT_PORTFOLIO_PATH;
   const resolvedLoafLiquidityPath = loafLiquidityPath ?? DEFAULT_LOAF_LIQUIDITY_PATH;
   const inferredActiveTab = (() => {
@@ -5370,6 +5370,8 @@ var Header = ({
     if (locationPath === resolvedApiPath) return "api";
     if (resolvedOfferingsPath && locationPath.startsWith(resolvedOfferingsPath)) return "offerings";
     if (locationPath === resolvedPropertyMapPath) return "propertyMap";
+    if (locationPath === resolvedLeaderboardPagePath) return "leaderboardPage";
+    if (locationPath === resolvedLeaderboardPath) return "leaderboard";
     if (locationPath === resolvedPortfolioPath) return "portfolio";
     return null;
   })();
@@ -5378,6 +5380,8 @@ var Header = ({
   const homeActive = resolvedActiveTab === "home";
   const offeringsActive = resolvedActiveTab === "offerings";
   const propertyMapActive = resolvedActiveTab === "propertyMap";
+  const leaderboardActive = resolvedActiveTab === "leaderboard";
+  const leaderboardPageActive = resolvedActiveTab === "leaderboardPage";
   const aboutActive = resolvedActiveTab === "about";
   const portfolioActive = resolvedActiveTab === "portfolio";
   const learnActive = resolvedActiveTab === "learn";
@@ -5385,7 +5389,7 @@ var Header = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SafeAreaCover, {}),
     /* @__PURE__ */ jsxRuntime.jsx(Overlay, { $isOpen: isMobileMenuOpen, onClick: () => setIsMobileMenuOpen(false) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(HeaderContainer, { id: "loaf-header", $bgOpacity: headerBgOpacity, $menuOpen: isMobileMenuOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(HeaderContainer, { id: "loaf-header", $bgOpacity: headerBgOpacity, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Logo, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(LogoLink, { href: logoHref ?? resolvedHomePath, onClick: handleLogoNavigation, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: Loaf_logo_Banner_default, alt: "LOAF Logo" }) }),
@@ -5461,48 +5465,91 @@ var Header = ({
                 /* @__PURE__ */ jsxRuntime.jsx(
                   NavLink,
                   {
-                    href: resolvedLearnPath,
-                    className: learnActive ? "active" : "",
+                    href: resolvedLeaderboardPath,
+                    className: leaderboardActive ? "active" : "",
                     onClick: (event) => {
                       event.preventDefault();
-                      handleNavigation(resolvedLearnPath);
+                      handleNavigation(resolvedLeaderboardPath);
                     },
-                    children: "Learn"
+                    children: "Competition"
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   NavLink,
                   {
-                    href: resolvedAboutPath,
-                    className: aboutActive ? "active" : "",
+                    href: resolvedLeaderboardPagePath,
+                    className: leaderboardPageActive ? "active" : "",
                     onClick: (event) => {
                       event.preventDefault();
-                      handleNavigation(resolvedAboutPath);
+                      handleNavigation(resolvedLeaderboardPagePath);
                     },
-                    children: "About"
+                    children: "Leaderboard"
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   NavLink,
                   {
-                    href: resolvedApiPath,
-                    className: apiActive ? "active" : "",
+                    href: resolvedLearnPath,
+                    className: learnActive ? "active" : "",
                     onClick: (event) => {
                       event.preventDefault();
-                      handleNavigation(resolvedApiPath);
+                      handleNavigation(resolvedLearnPath);
                     },
-                    children: "API"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  NavLink,
-                  {
-                    href: "https://docs.loafmarkets.com/en/",
-                    target: "_blank",
-                    rel: "noopener noreferrer",
-                    children: "Docs"
+                    children: "Learn"
                   }
                 ),
+                /* @__PURE__ */ jsxRuntime.jsxs(MoreMenu, { className: "more-menu", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    MoreTrigger,
+                    {
+                      type: "button",
+                      className: `${isMoreMenuOpen ? "open" : ""} ${aboutActive || apiActive ? "active" : ""}`,
+                      "aria-haspopup": "true",
+                      "aria-expanded": isMoreMenuOpen,
+                      onClick: () => setIsMoreMenuOpen((open) => !open),
+                      children: [
+                        "More",
+                        /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                      ]
+                    }
+                  ),
+                  isMoreMenuOpen && /* @__PURE__ */ jsxRuntime.jsxs(MoreDropdown, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      MoreItem,
+                      {
+                        href: resolvedAboutPath,
+                        className: aboutActive ? "active" : "",
+                        onClick: (event) => {
+                          event.preventDefault();
+                          handleNavigation(resolvedAboutPath);
+                        },
+                        children: "About"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      MoreItem,
+                      {
+                        href: resolvedApiPath,
+                        className: apiActive ? "active" : "",
+                        onClick: (event) => {
+                          event.preventDefault();
+                          handleNavigation(resolvedApiPath);
+                        },
+                        children: "API"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      MoreItem,
+                      {
+                        href: "https://docs.loafmarkets.com/en/",
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        onClick: () => setIsMoreMenuOpen(false),
+                        children: "Docs"
+                      }
+                    )
+                  ] })
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginLeft: "auto", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
@@ -5543,6 +5590,8 @@ var Header = ({
             ),
             /* @__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(resolvedLeaderboardPath), children: "Competition" }),
+            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedLeaderboardPagePath), children: "Leaderboard" }),
             /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedLearnPath), children: "Learn" }),
             /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedAboutPath), children: "About" }),
             /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedApiPath), children: "API" }),
@@ -5816,8 +5865,7 @@ var Overlay = styled10__default.default.div`
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(3px);
-  /* Above the trade page's sticky/console layers (z 2000) + close modal (10001). */
-  z-index: 10070;
+  z-index: 970;
 `;
 var MobileOnlyButton = styled10__default.default.button.attrs({ type: "button" })`
   display: none;
@@ -5865,11 +5913,7 @@ var HeaderContainer = styled10__default.default.header`
   top: 0;
   left: 0;
   right: 0;
-  /* Normally 1000. When the mobile menu is open, lift the whole header
-     (and the Nav drawer trapped inside its stacking context) above the
-     backdrop Overlay (10070) AND the trade page's modal layers (10001) so
-     the drawer renders on top instead of being dimmed by the backdrop. */
-  z-index: ${({ $menuOpen }) => $menuOpen ? 10075 : 1e3};
+  z-index: 1000;
   width: 100%;
   /* Fallback min-height for browsers that can't evaluate calc+env */
   min-height: 56px;
@@ -5963,8 +6007,7 @@ var Nav = styled10__default.default.nav`
     max-width: 100%;
     height: calc(100dvh - var(--loaf-menu-top, calc(56px + max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px)))));
     background: rgb(17, 17, 19);
-    /* Above the trade page's sticky/console layers (z 2000) + close modal (10001). */
-    z-index: 10080;
+    z-index: 980;
     /* Gentle fade + slide-down instead of an abrupt slide-in. */
     opacity: ${(props) => props.$isOpen ? "1" : "0"};
     transform: ${(props) => props.$isOpen ? "translateY(0)" : "translateY(-14px)"};
@@ -5982,12 +6025,9 @@ var Nav = styled10__default.default.nav`
       display: flex;
       flex-direction: column;
       align-items: center;
-      /* safe-center keeps centering when the menu fits, but top-aligns (honouring the
-         2.5rem top padding) when the logged-in menu overflows — otherwise flex
-         centering pushes the first item + padding above the scroll area and clips it. */
-      justify-content: safe center;
+      justify-content: center;
       min-height: 100%;
-      padding: 2.5rem 1.5rem 2.5rem;
+      padding: 2rem 1.5rem 2.5rem;
       gap: 0.4rem;
     }
   }
@@ -6060,6 +6100,77 @@ var NavLink = styled10__default.default.a`
     }
   }
 `;
+var MoreMenu = styled10__default.default.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 56px;
+`;
+var MoreTrigger = styled10__default.default.button`
+  margin: 0 12px;
+  padding: 0 4px;
+  height: 56px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #eaecef;
+  font-weight: 500;
+  font-size: 14px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
+  letter-spacing: 0.2px;
+  transition: color 0.2s ease;
+
+  &:hover,
+  &.active {
+    color: #E6C87E;
+  }
+
+  svg {
+    width: 14px;
+    height: 14px;
+    transition: transform 0.2s ease;
+  }
+  &.open svg {
+    transform: rotate(180deg);
+  }
+`;
+var MoreDropdown = styled10__default.default.div`
+  position: absolute;
+  top: 100%;
+  right: 0;
+  min-width: 160px;
+  padding: 6px;
+  background: #1e2026;
+  border: 1px solid #2b3139;
+  border-radius: 10px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
+  display: flex;
+  flex-direction: column;
+  z-index: 1100;
+`;
+var MoreItem = styled10__default.default.a`
+  padding: 10px 12px;
+  border-radius: 6px;
+  color: #eaecef;
+  font-weight: 500;
+  font-size: 14px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
+  letter-spacing: 0.2px;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+
+  &:hover {
+    background: #2b3139;
+    color: #E6C87E;
+  }
+  &.active {
+    color: #E6C87E;
+  }
+`;
 var Button2 = styled10__default.default.button.attrs({ type: "button" })`
   padding: 0.5rem 1rem;
   border-radius: 6px;
@@ -6626,17 +6737,6 @@ PropertySubheader.displayName = "PropertySubheader";
 var DEFAULT_LOGO_SRC = Loaf_logo_Banner_default;
 var DEFAULT_LOGO_ALT = "Loaf";
 var OTP_INPUT_LENGTH = 6;
-var CODE_PREFIX = "LOAF-";
-var CODE_SUFFIX_LEN = 5;
-var normalizeAccessCode = (raw) => CODE_PREFIX + raw.toUpperCase().replace(/^LOAF-?/, "").replace(/[^A-Z0-9]/g, "").slice(0, CODE_SUFFIX_LEN);
-var friendlyError = (err, fallback) => {
-  const data = err?.response?.data;
-  if (typeof data?.error === "string" && data.error.trim()) return data.error;
-  if (typeof data?.message === "string" && data.message.trim()) return data.message;
-  const msg = err instanceof Error ? err.message : "";
-  if (msg && !/request failed with status code/i.test(msg) && !/network error/i.test(msg)) return msg;
-  return fallback;
-};
 var LoginPopup = ({
   onClose,
   onOpenEarlyAccess,
@@ -6655,13 +6755,10 @@ var LoginPopup = ({
   renderKycWidget,
   onFundWallet,
   initialView,
-  initialCode,
   kycStatus: kycStatusProp,
   walletAddress,
   onSubmitReferralCode,
-  onValidateCode,
-  onCheckAccess,
-  gate
+  onJoinWaitlist
 }) => {
   const [view, setView] = React5.useState(() => initialView ?? "main");
   const [email, setEmail] = React5.useState("");
@@ -6669,17 +6766,19 @@ var LoginPopup = ({
   const [otp, setOtp] = React5.useState(Array(OTP_INPUT_LENGTH).fill(""));
   const [error, setError] = React5.useState("");
   const [copied, setCopied] = React5.useState(false);
-  const [referralCode, setReferralCode] = React5.useState(
-    () => gate && initialCode ? normalizeAccessCode(initialCode) : ""
-  );
+  const [referralCode, setReferralCode] = React5.useState("");
   const [referralLoading, setReferralLoading] = React5.useState(false);
   const [referralError, setReferralError] = React5.useState("");
-  const [codeStatus, setCodeStatus] = React5.useState("idle");
-  const [signInRevealed, setSignInRevealed] = React5.useState(false);
-  const [otpStatus, setOtpStatus] = React5.useState("idle");
-  const [signInMode, setSignInMode] = React5.useState(false);
+  const [waitlistLoading, setWaitlistLoading] = React5.useState(false);
+  const [waitlistMessage, setWaitlistMessage] = React5.useState("");
   const [loading, setLoading] = React5.useState(false);
   const [isSignUp, setIsSignUp] = React5.useState(false);
+  const [loginTitle] = React5.useState(() => {
+    if (typeof window === "undefined") return null;
+    const t = window.__LOAF_LOGIN_TITLE__ ?? null;
+    if (t) delete window.__LOAF_LOGIN_TITLE__;
+    return t;
+  });
   const [fundingAmount] = React5.useState("");
   const [kycLoading, setKycLoading] = React5.useState(false);
   const [showKycWidget, setShowKycWidget] = React5.useState(false);
@@ -6689,64 +6788,6 @@ var LoginPopup = ({
   const [fundingError, setFundingError] = React5.useState("");
   const [transakWidgetUrl, setTransakWidgetUrl] = React5.useState(null);
   const suppressAutoCloseRef = React5__namespace.default.useRef(false);
-  const validatedCodeRef = React5__namespace.default.useRef(null);
-  const finishGate = React5__namespace.default.useCallback(async () => {
-    if (!gate) return true;
-    const code = validatedCodeRef.current;
-    if (code) {
-      try {
-        await onSubmitReferralCode?.(code);
-        window.dispatchEvent(new CustomEvent("loaf:onboarding-start"));
-        return true;
-      } catch {
-      }
-    }
-    const hasAccess = onCheckAccess ? await onCheckAccess() : true;
-    if (hasAccess) return true;
-    suppressAutoCloseRef.current = true;
-    validatedCodeRef.current = null;
-    setOtp(Array(OTP_INPUT_LENGTH).fill(""));
-    setOtpStatus("idle");
-    setSignInMode(false);
-    setSignInRevealed(false);
-    setCodeStatus(code ? "invalid" : "idle");
-    setView("referral");
-    setError(
-      code ? "That code can't be redeemed anymore. Enter a different access code." : "Enter your access code to continue."
-    );
-    return false;
-  }, [gate, onSubmitReferralCode, onCheckAccess]);
-  const runCodeValidation = React5__namespace.default.useCallback(async (fullCode) => {
-    setCodeStatus("checking");
-    setError("");
-    try {
-      const ok = onValidateCode ? await onValidateCode(fullCode) : true;
-      if (!ok) {
-        validatedCodeRef.current = null;
-        setCodeStatus("invalid");
-        return;
-      }
-      validatedCodeRef.current = fullCode;
-      setCodeStatus("valid");
-      if (isAuthenticated) {
-        if (await finishGate()) setTimeout(() => onClose(), 500);
-        return;
-      }
-      setIsSignUp(true);
-      setSignInRevealed(true);
-    } catch {
-      validatedCodeRef.current = null;
-      setCodeStatus("invalid");
-    }
-  }, [onValidateCode, isAuthenticated, finishGate, onClose]);
-  const autoCodeTriedRef = React5__namespace.default.useRef(false);
-  React5.useEffect(() => {
-    if (autoCodeTriedRef.current || !gate || !initialCode) return;
-    const full = normalizeAccessCode(initialCode);
-    if (full.length !== CODE_PREFIX.length + CODE_SUFFIX_LEN) return;
-    autoCodeTriedRef.current = true;
-    void runCodeValidation(full);
-  }, [gate, initialCode, runCodeValidation]);
   React5.useEffect(() => {
     if (typeof initialView === "string") {
       setView(initialView);
@@ -6801,11 +6842,11 @@ var LoginPopup = ({
   }, [autoCloseOnAuth, currentUser, isAuthenticated, onClose, view]);
   React5.useEffect(() => {
     const handleEsc = (e) => {
-      if (e.key === "Escape" && !gate) onClose();
+      if (e.key === "Escape") onClose();
     };
     window.addEventListener("keydown", handleEsc);
     return () => window.removeEventListener("keydown", handleEsc);
-  }, [onClose, gate]);
+  }, [onClose]);
   const handleWalletLogin = async () => {
     if (onWalletLogin) {
       suppressAutoCloseRef.current = true;
@@ -6817,16 +6858,12 @@ var LoginPopup = ({
           setView("wallet-handle");
           return;
         }
-        if (await finishGate()) {
-          suppressAutoCloseRef.current = false;
-          onClose();
-        }
+        suppressAutoCloseRef.current = false;
+        onClose();
         return;
       } catch (err) {
         console.error("[LoginTrace][Popup] Wallet login failed", err);
         suppressAutoCloseRef.current = false;
-        setError(friendlyError(err, "Wallet login failed. Please try again."));
-        return;
       }
     }
     onClose();
@@ -6848,13 +6885,6 @@ var LoginPopup = ({
     setError("");
     try {
       await onWalletSignup(handle.trim());
-      if (gate) {
-        if (await finishGate()) {
-          suppressAutoCloseRef.current = false;
-          onClose();
-        }
-        return;
-      }
       if (onSubmitReferralCode) {
         setView("referral");
       } else {
@@ -6866,11 +6896,6 @@ var LoginPopup = ({
       setLoading(false);
     }
   };
-  const handleEmailClick = (signUp = false) => {
-    setIsSignUp(signUp);
-    setView("email");
-    setError("");
-  };
   const handleSendCode = async (event) => {
     event?.preventDefault();
     if (!email || !email.includes("@")) {
@@ -6883,7 +6908,6 @@ var LoginPopup = ({
     }
     setLoading(true);
     setError("");
-    setOtpStatus("idle");
     const normalizedHandle = isSignUp && handle.trim() ? handle.trim() : void 0;
     try {
       const demoResult = await onDemoLogin?.(email, normalizedHandle ?? null);
@@ -6904,15 +6928,11 @@ var LoginPopup = ({
       setView("otp");
       setOtp(Array(OTP_INPUT_LENGTH).fill(""));
     } catch (err) {
-      const message = friendlyError(err, "We couldn't send a code to that email. Please double-check it and try again.");
+      const message = err instanceof Error ? err.message : "Failed to send verification code";
       console.error("[LoginTrace][Popup] onSendEmailCode threw", err);
       if (!isSignUp && message.includes("No account found")) {
-        if (signInMode) {
-          setError("No account found for this email. Go back and enter your access code to create one.");
-          setLoading(false);
-          return;
-        }
         setIsSignUp(true);
+        setView("email");
         setError("");
         setLoading(false);
         return;
@@ -6924,7 +6944,7 @@ var LoginPopup = ({
           setView("otp");
           setOtp(Array(OTP_INPUT_LENGTH).fill(""));
         } catch (retryErr) {
-          setError(friendlyError(retryErr, "We couldn't send a code to that email. Please try again."));
+          setError(retryErr instanceof Error ? retryErr.message : "Failed to send verification code");
         }
         setLoading(false);
         return;
@@ -7018,30 +7038,6 @@ var LoginPopup = ({
       setLoading(false);
     }
   };
-  const runGateOtpVerify = React5__namespace.default.useCallback(async (code) => {
-    if (!onVerifyEmailCode) return;
-    setOtpStatus("checking");
-    setError("");
-    suppressAutoCloseRef.current = true;
-    try {
-      await onVerifyEmailCode({ code, email });
-      if (await finishGate()) {
-        setOtpStatus("valid");
-        setTimeout(() => onClose(), 750);
-      }
-    } catch {
-      suppressAutoCloseRef.current = false;
-      setOtpStatus("invalid");
-    }
-  }, [onVerifyEmailCode, email, finishGate, onClose]);
-  React5.useEffect(() => {
-    if (!gate || view !== "otp") return;
-    if (otp.join("").length < OTP_INPUT_LENGTH) {
-      if (otpStatus === "invalid") setOtpStatus("idle");
-      return;
-    }
-    if (otpStatus === "idle") void runGateOtpVerify(otp.join(""));
-  }, [gate, view, otp, otpStatus, runGateOtpVerify]);
   const handleKycWidgetResult = (result) => {
     setShowKycWidget(false);
     if (result.passed) {
@@ -7138,36 +7134,35 @@ var LoginPopup = ({
     setError("");
   };
   if (view === "main") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { $transparent: gate, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
       /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Title, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(LogoContainer3, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(LogoImage, { src: logoSrc, alt: logoAlt }),
-          /* @__PURE__ */ jsxRuntime.jsx(LogoBeta, { children: "Private Beta" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(TitleText, { children: "Welcome to Loaf" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Subtitle, { children: "Sign in to claim 100k in test USD." }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ButtonsContainer, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(LoginButton, { onClick: () => handleEmailClick(false), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" }) }),
-          "Sign in with Email"
+      /* @__PURE__ */ jsxRuntime.jsx(MainHeading, { children: loginTitle?.title ?? "Welcome to Loaf" }),
+      (loginTitle ? loginTitle.subtitle : "Sign in to claim 100k in test USD.") && /* @__PURE__ */ jsxRuntime.jsx(MainSubtitle, { children: loginTitle ? loginTitle.subtitle : "Sign in to claim 100k in test USD." }),
+      /* @__PURE__ */ jsxRuntime.jsxs(GateForm, { onSubmit: handleSendCode, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(GateInputRow, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            GateInput,
+            {
+              type: "email",
+              placeholder: "Enter your email",
+              value: email,
+              onChange: (event) => setEmail(event.target.value),
+              autoFocus: true
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(GateSubmit, { type: "submit", disabled: loading || !email, "aria-label": "Continue with email", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14M13 6l6 6-6 6" }) }) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", color: "var(--color-text-secondary, #848e9c)", fontSize: "0.875rem" }, children: "or" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(LoginButton, { onClick: handleWalletLogin, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" }) }),
-          "Sign in with Wallet"
-        ] })
+        error && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: error })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(SignUpPrompt, { children: [
-        "New to Loaf?",
-        " ",
-        /* @__PURE__ */ jsxRuntime.jsx(SignUpLink, { type: "button", onClick: () => handleEmailClick(true), children: "Sign up" })
+      /* @__PURE__ */ jsxRuntime.jsx(GateOr, { children: "or" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(LoginButton, { onClick: handleWalletLogin, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" }) }),
+        "Join with wallet"
       ] })
     ] }) });
   }
   if (view === "email") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { $transparent: gate, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
       /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(BackButton, { onClick: handleBack, children: [
         /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" }) }),
@@ -7206,7 +7201,7 @@ var LoginPopup = ({
     ] }) });
   }
   if (view === "wallet-handle") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { $transparent: gate, onClick: loading ? void 0 : onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: loading ? void 0 : onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
       !loading && /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(Title, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(LogoContainer3, { children: /* @__PURE__ */ jsxRuntime.jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
@@ -7231,71 +7226,7 @@ var LoginPopup = ({
     ] }) });
   }
   if (view === "otp") {
-    if (gate) {
-      return /* @__PURE__ */ jsxRuntime.jsxs(GateShell, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(GateTint, { $reveal: otpStatus === "valid" ? 3 : 2 }),
-        /* @__PURE__ */ jsxRuntime.jsxs(GateForm, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(GateBrand, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(GateLogoLink, { href: "https://loafmarkets.com", "aria-label": "Go to loafmarkets.com", children: /* @__PURE__ */ jsxRuntime.jsx(GateLogo, { src: logoSrc, alt: logoAlt }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(GateBrandDivider, {}),
-            /* @__PURE__ */ jsxRuntime.jsx(GateBetaTag, { children: "Private Beta" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(GateOtpText, { children: [
-            "We sent a code to",
-            /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: email })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(OTPContainer, { children: otp.map((digit, index) => /* @__PURE__ */ jsxRuntime.jsx(
-            OTPInput,
-            {
-              id: `otp-${index}`,
-              type: "text",
-              inputMode: "numeric",
-              maxLength: 1,
-              $status: otpStatus,
-              readOnly: otpStatus === "valid" || otpStatus === "checking",
-              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
-          )) }),
-          otpStatus === "invalid" && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: "That code isn't right. Try again." }),
-          /* @__PURE__ */ jsxRuntime.jsxs(GateResendText, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: (event) => {
-                  event.preventDefault();
-                  void handleSendCode(event);
-                },
-                children: "Resend code"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: " \xB7 " }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => {
-                  setOtp(Array(OTP_INPUT_LENGTH).fill(""));
-                  setOtpStatus("idle");
-                  setError("");
-                  setView("referral");
-                },
-                children: "Back"
-              }
-            )
-          ] })
-        ] })
-      ] });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { $transparent: gate, onClick: loading ? void 0 : onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: loading ? void 0 : onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
       !loading && /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
       loading ? /* @__PURE__ */ jsxRuntime.jsxs(AccountCreationLoader, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(SpinnerRing, {}),
@@ -7384,8 +7315,8 @@ var LoginPopup = ({
               /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
               /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
             ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(KycHeading, { children: "Verify Wholesale Status" }),
-            /* @__PURE__ */ jsxRuntime.jsx(KycSubline, { children: "Initial offerings are only available to accredited or wholesale investors" }),
+            /* @__PURE__ */ jsxRuntime.jsx(KycHeading, { children: "Verify Your Identity" }),
+            /* @__PURE__ */ jsxRuntime.jsx(KycSubline, { children: "Initial offerings are only available to verified investors" }),
             /* @__PURE__ */ jsxRuntime.jsx(KycStartButton, { type: "button", onClick: handleKycStart, disabled: kycLoading, children: kycLoading ? "Verifying\u2026" : kycStatusProp === "PENDING" || kycStatusProp === "ON_HOLD" ? "Resume Verification" : "Start Verification" }),
             /* @__PURE__ */ jsxRuntime.jsx(KycDuration, { children: "Takes about 2 minutes" }),
             /* @__PURE__ */ jsxRuntime.jsx(KycDivider, {}),
@@ -7471,7 +7402,7 @@ var LoginPopup = ({
                   /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "rgba(255,255,255,0.5)", fontSize: "0.8rem" }, children: "Deposit USDC from an exchange or wallet" })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ModalOptionCard, { onClick: handleFiatFund, disabled: true, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ModalOptionCard, { onClick: handleFiatFund, disabled: fiatFundingLoading, children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", style: { color: "rgba(255,255,255,0.6)", flexShrink: 0 }, children: [
                   /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "22", x2: "21", y2: "22" }),
                   /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "18", x2: "6", y2: "11" }),
@@ -7481,10 +7412,7 @@ var LoginPopup = ({
                   /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "12 2 20 7 4 7" })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.25rem" }, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem" }, children: fiatFundingLoading ? "Loading widget\u2026" : "Bank Deposit" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.6rem", fontWeight: 700, color: "#E6C87E", background: "rgba(230,198,86,0.12)", padding: "0.12rem 0.4rem", borderRadius: "4px", textTransform: "uppercase", letterSpacing: "0.04em", whiteSpace: "nowrap" }, children: "Coming Soon" })
-                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.25rem" }, children: fiatFundingLoading ? "Loading widget\u2026" : "Bank Deposit" }),
                   /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "rgba(255,255,255,0.5)", fontSize: "0.8rem" }, children: "Deposit to your account via card or bank transfer" })
                 ] })
               ] })
@@ -7515,162 +7443,84 @@ var LoginPopup = ({
         setReferralLoading(false);
       }
     };
-    const codeSuffix = referralCode.startsWith(CODE_PREFIX) ? referralCode.slice(CODE_PREFIX.length) : referralCode.replace(/^LOAF-?/i, "");
-    const setCodeSuffix = (suffix) => {
-      setReferralCode(CODE_PREFIX + suffix);
+    const handleJoinWaitlistSkip = async () => {
+      if (!onJoinWaitlist || !email) {
+        onClose();
+        return;
+      }
       setReferralError("");
-      setError("");
-      if (gate) {
-        if (suffix.length === 5) void runCodeValidation(CODE_PREFIX + suffix);
-        else {
-          validatedCodeRef.current = null;
-          setCodeStatus("idle");
-        }
+      setWaitlistLoading(true);
+      try {
+        const message = await onJoinWaitlist(email);
+        setWaitlistMessage(message || "You're on the waitlist.");
+        setTimeout(() => onClose(), 1400);
+      } catch (err) {
+        setReferralError(err instanceof Error ? err.message : "Couldn't join the waitlist. Please try again.");
+        setWaitlistLoading(false);
       }
     };
-    const handleCodeChange = (e) => {
-      setCodeSuffix(e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 5));
-    };
-    const handleCodePaste = (e) => {
-      e.preventDefault();
-      const text = (e.clipboardData.getData("text") || "").toUpperCase();
-      setCodeSuffix(text.replace(/^LOAF-?/, "").replace(/[^A-Z0-9]/g, "").slice(0, 5));
-    };
-    const codeComplete = codeSuffix.length === 5;
-    const codeInput = /* @__PURE__ */ jsxRuntime.jsx(
-      CodeSuffixInput,
-      {
-        type: "text",
-        inputMode: "text",
-        autoComplete: "off",
-        autoCapitalize: "characters",
-        spellCheck: false,
-        maxLength: 5,
-        "aria-label": "Access code",
-        readOnly: codeStatus === "valid",
-        value: codeSuffix,
-        onChange: handleCodeChange,
-        onPaste: handleCodePaste,
-        onKeyDown: (e) => {
-          if (e.key !== "Enter" || !codeComplete) return;
-          if (gate) void runCodeValidation(referralCode);
-          else void handleReferralSubmit();
-        },
-        autoFocus: true
-      }
-    );
-    const signInStep = /* @__PURE__ */ jsxRuntime.jsxs(GateReveal, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSendCode, style: { width: "100%" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(CodeInputWrapper, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(OnboardingStepContainer, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          width: 52,
+          height: 52,
+          borderRadius: 14,
+          background: "linear-gradient(135deg, rgba(230,200,126,0.15) 0%, rgba(230,200,126,0.08) 100%)",
+          border: "1px solid rgba(230,200,126,0.25)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          marginBottom: "1.1rem"
+        }, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#e6c87e", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "7", r: "4" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(OnboardingHeading, { children: "Enter code to access Private Beta trading" }),
+        /* @__PURE__ */ jsxRuntime.jsx(OnboardingSubtext, { style: { marginBottom: "1.5rem" }, children: "Enter code to trade 100k in USDC, or skip to continue." }),
+        /* @__PURE__ */ jsxRuntime.jsxs(EmailFormContainer, { style: { width: "100%", marginBottom: 0 }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            GateEmailInput,
+            EmailInput,
             {
-              type: "email",
-              inputMode: "email",
-              autoComplete: "email",
-              placeholder: "Enter your email",
-              value: email,
-              onChange: (event) => setEmail(event.target.value),
+              type: "text",
+              placeholder: "e.g. LOAF-XXXX",
+              value: referralCode,
+              onChange: (e) => {
+                setReferralCode(e.target.value.toUpperCase());
+                setReferralError("");
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter") void handleReferralSubmit();
+              },
               autoFocus: true
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(GateSubmit, { type: "submit", "aria-label": "Continue", disabled: loading || !email, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(GateSpinner, {}) : /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14M13 6l6 6-6 6" }) }) })
-        ] }),
-        error && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: error })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(GateOr, { children: "or" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(GateWalletButton, { type: "button", onClick: handleWalletLogin, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" }) }),
-          signInMode ? "Sign in with Wallet" : "Connect Wallet"
-        ] })
-      ] })
-    ] });
-    if (gate) {
-      const codeAccepted = codeStatus === "valid";
-      const showSignIn = signInMode || signInRevealed;
-      return /* @__PURE__ */ jsxRuntime.jsxs(GateShell, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(GateTint, { $reveal: showSignIn ? 1 : 0 }),
-        /* @__PURE__ */ jsxRuntime.jsxs(GateForm, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(GateBrand, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(GateLogoLink, { href: "https://loafmarkets.com", "aria-label": "Go to loafmarkets.com", children: /* @__PURE__ */ jsxRuntime.jsx(GateLogo, { src: logoSrc, alt: logoAlt }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(GateBrandDivider, {}),
-            /* @__PURE__ */ jsxRuntime.jsx(GateBetaTag, { children: "Private Beta" })
-          ] }),
-          signInMode ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            signInStep,
-            /* @__PURE__ */ jsxRuntime.jsx(GateResendText, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => {
-                  setError("");
-                  setSignInMode(false);
-                },
-                children: "\u2190 Enter access code instead"
-              }
-            ) })
-          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(CodeInputWrapper, { $status: codeStatus, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CodePrefix, { children: CODE_PREFIX }),
-              codeInput,
-              /* @__PURE__ */ jsxRuntime.jsx(
-                GateSubmit,
-                {
-                  type: "button",
-                  "aria-label": "Submit access code",
-                  $status: codeStatus,
-                  disabled: codeStatus === "checking" || !codeComplete,
-                  onClick: () => void runCodeValidation(referralCode),
-                  children: codeAccepted ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6L9 17l-5-5" }) }) : codeStatus === "checking" ? /* @__PURE__ */ jsxRuntime.jsx(GateSpinner, {}) : /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14M13 6l6 6-6 6" }) })
-                }
-              )
-            ] }),
-            (codeStatus === "invalid" || error && !signInRevealed) && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: error || "That code isn't valid. Double-check and try again." }),
-            signInRevealed ? signInStep : /* @__PURE__ */ jsxRuntime.jsxs(GateResendText, { children: [
-              "Already have an account?",
-              " ",
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => {
-                    setError("");
-                    setIsSignUp(false);
-                    setSignInMode(true);
-                  },
-                  children: "Sign in"
-                }
-              )
-            ] })
-          ] })
-        ] })
-      ] });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Title, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(LogoContainer3, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(LogoImage, { src: logoSrc, alt: logoAlt }),
-          /* @__PURE__ */ jsxRuntime.jsx(LogoBeta, { children: "Private Beta" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(TitleText, { children: "Enter your access code" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(EmailFormContainer, { style: { width: "100%", marginTop: "1.5rem", marginBottom: 0 }, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(CodeInputWrapper, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CodePrefix, { children: CODE_PREFIX }),
-          codeInput
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SubmitButton,
+            {
+              type: "button",
+              onClick: () => void handleReferralSubmit(),
+              disabled: referralLoading || !referralCode.trim(),
+              children: referralLoading ? "Verifying\u2026" : "Apply Code"
+            }
+          ),
+          referralError && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: referralError })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          SubmitButton,
+        waitlistMessage ? /* @__PURE__ */ jsxRuntime.jsxs(StatusMessage, { style: { marginTop: "0.75rem" }, children: [
+          "\u2713 ",
+          waitlistMessage
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+          OnboardingSkipButton,
           {
             type: "button",
-            onClick: () => void handleReferralSubmit(),
-            disabled: referralLoading || !codeComplete,
-            children: referralLoading ? "Verifying\u2026" : "Continue"
+            onClick: () => void handleJoinWaitlistSkip(),
+            disabled: waitlistLoading,
+            style: { marginTop: "0.75rem" },
+            children: waitlistLoading ? "Joining\u2026" : email ? "Skip for now & join Waitlist" : "Skip for now"
           }
-        ),
-        referralError && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: referralError })
+        )
       ] })
     ] }) });
   }
@@ -7790,9 +7640,8 @@ var Overlay2 = styled10__default.default.div`
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: ${(props) => props.$gate ? "var(--color-background, #0a0a0a)" : props.$transparent ? "rgba(0, 0, 0, 0.45)" : "rgba(0, 0, 0, 0.8)"};
-  backdrop-filter: ${(props) => props.$gate ? "none" : props.$transparent ? "blur(2px)" : "blur(4px)"};
-  transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
+  background-color: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(4px);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -7809,15 +7658,15 @@ var Overlay2 = styled10__default.default.div`
   }
 `;
 var PopupContainer = styled10__default.default.div`
-  background-color: ${(props) => props.$gate ? "transparent" : "var(--color-background, #0a0a0a)"};
-  border: ${(props) => props.$gate ? "none" : "1px solid rgba(230, 198, 86, 0.3)"};
+  background-color: var(--color-background, #0a0a0a);
+  border: 1px solid rgba(230, 198, 86, 0.3);
   border-radius: var(--border-radius, 12px);
   padding: 2.5rem;
   max-width: 440px;
   width: 90%;
   position: relative;
   animation: slideUp 0.3s ease-out;
-  box-shadow: ${(props) => props.$gate ? "none" : "0 10px 30px rgba(0, 0, 0, 0.3)"};
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
 
   @keyframes slideUp {
     from {
@@ -8004,379 +7853,180 @@ var Title = styled10__default.default.h2`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 1rem;
-`;
-var TitleText = styled10__default.default.span`
-  text-align: center;
-  line-height: 1.2;
-`;
-var LogoBeta = styled10__default.default.span`
-  color: var(--color-accent, #E6C87E);
-  font-size: 0.6rem;
-  font-weight: 600;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  white-space: nowrap;
-  padding-bottom: 0.95rem;
+  gap: 0.4rem;
 `;
-var Subtitle = styled10__default.default.p`
+styled10__default.default.p`
   font-size: 0.9rem;
   font-weight: 400;
   color: var(--color-text-secondary, #848e9c);
   text-align: center;
   margin: 0 0 2rem;
 `;
-var LogoContainer3 = styled10__default.default.div`
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  gap: 0.45rem;
-  margin-bottom: 0.5rem;
-`;
-var LogoImage = styled10__default.default.img`
-  height: 60px;
-`;
-var ButtonsContainer = styled10__default.default.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
-`;
-var SignUpPrompt = styled10__default.default.div`
-  text-align: center;
-  font-size: 0.875rem;
-  color: var(--color-text-secondary, #848e9c);
-  margin-bottom: 0.5rem;
-`;
-var SignUpLink = styled10__default.default.button`
-  background: none;
-  border: none;
-  padding: 0;
-  font: inherit;
-  color: var(--color-accent, #E6C87E);
-  text-decoration: underline;
-  cursor: pointer;
-
-  &:hover {
-    opacity: 0.85;
-  }
-`;
-var LoginButton = styled10__default.default.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.75rem;
-  padding: 1rem 1.5rem;
-  background-color: var(--color-background-light, #1a1a1a);
-  border: 1px solid rgba(230, 198, 86, 0.2);
-  border-radius: var(--border-radius, 8px);
-  color: var(--color-text, #eaecef);
-  font-size: 1rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background-color: rgba(230, 198, 86, 0.1);
-    border-color: var(--color-accent, #E6C87E);
-  }
-
-  svg {
-    width: 20px;
-    height: 20px;
-    color: var(--color-accent, #E6C87E);
-  }
-`;
-var InfoText = styled10__default.default.p`
-  color: var(--color-text-secondary, #848e9c);
-  font-size: 0.875rem;
-  text-align: center;
-  line-height: 1.5;
-`;
-var EmailFormContainer = styled10__default.default.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
-`;
-var EmailInput = styled10__default.default.input`
-  width: 100%;
-  padding: 1rem 1.25rem;
-  background-color: var(--color-background-light, #1a1a1a);
-  border: 1px solid rgba(230, 198, 86, 0.2);
-  border-radius: var(--border-radius, 8px);
-  color: var(--color-text, #eaecef);
-  font-size: 1rem;
-  transition: all 0.2s ease;
-
-  &:focus {
-    outline: none;
-    border-color: var(--color-accent, #E6C87E);
-  }
-
-  &::placeholder {
-    color: var(--color-text-secondary, #848e9c);
-  }
-`;
-var codeBorderColor = (status, focused) => {
-  if (status === "valid") return "var(--color-positive, #00C076)";
-  if (status === "invalid") return "var(--color-negative, #FF5757)";
-  return focused ? "var(--color-accent, #E6C87E)" : "rgba(230, 198, 86, 0.2)";
-};
-var CodeInputWrapper = styled10__default.default.div`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: 1rem 1.25rem;
-  background-color: var(--color-background-light, #1a1a1a);
-  border: 1px solid ${(props) => codeBorderColor(props.$status, false)};
-  border-radius: var(--border-radius, 8px);
-  box-shadow: ${(props) => props.$status === "valid" ? "0 0 0 1px var(--color-positive, #00C076)" : props.$status === "invalid" ? "0 0 0 1px var(--color-negative, #FF5757)" : "none"};
-  transition: all 0.2s ease;
-
-  &:focus-within {
-    border-color: ${(props) => codeBorderColor(props.$status, true)};
-  }
-`;
-var CodePrefix = styled10__default.default.span`
-  color: var(--color-text-secondary, #848e9c);
-  font-size: 1.1rem;
-  font-weight: 600;
-  letter-spacing: 0.22em;
-  font-family: 'Space Grotesk', monospace;
-  user-select: none;
-`;
-var CodeSuffixInput = styled10__default.default.input`
-  flex: 1;
-  min-width: 0;
-  border: none;
-  background: transparent;
+var MainHeading = styled10__default.default.h2`
+  font-size: 1.5rem;
+  font-weight: 700;
   color: var(--color-text, #eaecef);
-  font-size: 1.1rem;
-  font-weight: 600;
-  letter-spacing: 0.22em;
-  text-transform: uppercase;
-  font-family: 'Space Grotesk', monospace;
-  /* Explicit line-height so iOS in-app WebViews size the caret to the text
-     box instead of rendering a short, top-aligned caret (line-height: normal
-     + webfont + letter-spacing miscomputes it in some WebViews). */
-  line-height: 1.5;
-
-  &:focus {
-    outline: none;
-  }
-
-  &::placeholder {
-    color: rgba(132, 142, 156, 0.45);
-    letter-spacing: 0.22em;
-  }
-`;
-var GateBrand = styled10__default.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.7rem;
-  margin-bottom: 0.6rem;
-`;
-var GateLogoLink = styled10__default.default.a`
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  transition: opacity 0.15s ease;
-
-  &:hover {
-    opacity: 0.85;
-  }
-`;
-var GateLogo = styled10__default.default.img`
-  height: 44px;
-  display: block;
-`;
-var GateBrandDivider = styled10__default.default.span`
-  width: 1px;
-  height: 26px;
-  background: rgba(255, 255, 255, 0.18);
+  text-align: left;
+  margin: 0 0 0.35rem;
 `;
-var GateBetaTag = styled10__default.default.span`
+var MainSubtitle = styled10__default.default.p`
+  font-size: 0.9rem;
+  font-weight: 400;
   color: var(--color-text-secondary, #848e9c);
-  font-size: 0.8rem;
-  font-weight: 500;
-  letter-spacing: 0.28em;
-  text-transform: uppercase;
-`;
-var GateForm = styled10__default.default.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.9rem;
-  width: 100%;
-  max-width: 360px;
-  position: relative;
-  z-index: 1;
+  text-align: left;
+  margin: 0 0 1.5rem;
+  line-height: 1.5;
 `;
-var GateShell = styled10__default.default.div`
-  position: fixed;
-  inset: 0;
+var LogoContainer3 = styled10__default.default.div`
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   justify-content: center;
-  z-index: 10000;
-  background-color: rgba(10, 10, 12, 0.66);
+  gap: 0.45rem;
+  margin-bottom: 0.5rem;
 `;
-var GateTint = styled10__default.default.div`
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: calc(${(props) => (3 - Math.max(0, Math.min(3, props.$reveal))) / 3 * 100}% + 90px);
-  background: linear-gradient(
-    to top,
-    var(--color-background, #0a0a0c) calc(100% - 90px),
-    rgba(10, 10, 12, 0) 100%
-  );
-  transition: height 0.65s ease;
-  pointer-events: none;
+var LogoImage = styled10__default.default.img`
+  height: 40px;
 `;
-var GateOtpText = styled10__default.default.p`
-  margin: 0;
+styled10__default.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+`;
+styled10__default.default.div`
   text-align: center;
-  font-size: 0.9rem;
-  line-height: 1.5;
+  font-size: 0.875rem;
   color: var(--color-text-secondary, #848e9c);
-
-  strong {
-    color: var(--color-text, #eaecef);
-    font-weight: 600;
-  }
+  margin-bottom: 0.5rem;
 `;
-var GateResendText = styled10__default.default.p`
-  margin: 0.2rem 0 0;
-  font-size: 0.85rem;
-  color: var(--color-text-secondary, #848e9c);
+styled10__default.default.button`
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  color: var(--color-accent, #E6C87E);
+  text-decoration: underline;
+  cursor: pointer;
 
-  button {
-    background: none;
-    border: none;
-    color: var(--color-accent, #E6C87E);
-    cursor: pointer;
-    text-decoration: underline;
-    font-size: inherit;
+  &:hover {
+    opacity: 0.85;
   }
 `;
-var GateSubmit = styled10__default.default.button`
+var LoginButton = styled10__default.default.button`
   display: flex;
+  width: 100%;
+  box-sizing: border-box;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
-  width: 28px;
-  height: 28px;
-  margin-left: 0.5rem;
-  padding: 0;
-  background: none;
-  border: none;
+  gap: 0.55rem;
+  padding: 0.55rem 1.1rem;
+  background-color: var(--color-background-light, #1a1a1a);
+  border: 1px solid rgba(230, 198, 86, 0.2);
+  border-radius: var(--border-radius, 8px);
+  color: var(--color-text, #eaecef);
+  font-size: 0.82rem;
+  font-weight: 500;
   cursor: pointer;
-  color: ${(props) => props.$status === "valid" ? "var(--color-positive, #00C076)" : props.$status === "invalid" ? "var(--color-negative, #FF5757)" : "var(--color-accent, #E6C87E)"};
-  transition: color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
+  transition: all 0.2s ease;
 
-  &:not(:disabled):hover {
-    transform: translateX(2px);
+  svg { width: 16px; height: 16px; }
+
+  &:hover {
+    background-color: rgba(230, 198, 86, 0.1);
+    border-color: var(--color-accent, #E6C87E);
   }
 
-  &:disabled {
-    opacity: ${(props) => props.$status === "valid" ? 1 : 0.35};
-    color: ${(props) => props.$status === "valid" ? "var(--color-positive, #00C076)" : "var(--color-text-secondary, #848e9c)"};
-    cursor: default;
+  svg {
+    width: 20px;
+    height: 20px;
+    color: var(--color-accent, #E6C87E);
   }
 `;
-var GateEmailInput = styled10__default.default.input`
-  flex: 1;
-  min-width: 0;
-  border: none;
-  background: transparent;
+var InfoText = styled10__default.default.p`
+  color: var(--color-text-secondary, #848e9c);
+  font-size: 0.875rem;
+  text-align: center;
+  line-height: 1.5;
+`;
+var EmailFormContainer = styled10__default.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+`;
+var EmailInput = styled10__default.default.input`
+  width: 100%;
+  padding: 1rem 1.25rem;
+  background-color: var(--color-background-light, #1a1a1a);
+  border: 1px solid rgba(230, 198, 86, 0.2);
+  border-radius: var(--border-radius, 8px);
   color: var(--color-text, #eaecef);
   font-size: 1rem;
+  transition: all 0.2s ease;
 
   &:focus {
     outline: none;
+    border-color: var(--color-accent, #E6C87E);
   }
 
   &::placeholder {
-    color: rgba(132, 142, 156, 0.5);
-  }
-`;
-var GateSpinner = styled10__default.default.span`
-  width: 18px;
-  height: 18px;
-  border: 2px solid rgba(230, 198, 86, 0.3);
-  border-top-color: var(--color-accent, #E6C87E);
-  border-radius: 50%;
-  animation: gateSpin 0.7s linear infinite;
-
-  @keyframes gateSpin {
-    to { transform: rotate(360deg); }
+    color: var(--color-text-secondary, #848e9c);
   }
 `;
-var GateOr = styled10__default.default.div`
+var GateForm = styled10__default.default.form`
   display: flex;
-  align-items: center;
+  flex-direction: column;
   gap: 0.6rem;
   width: 100%;
-  color: var(--color-text-secondary, #848e9c);
-  font-size: 0.78rem;
-  text-transform: lowercase;
+`;
+var GateInputRow = styled10__default.default.div`
+  position: relative;
+  width: 100%;
+`;
+var GateInput = styled10__default.default.input`
+  width: 100%;
+  box-sizing: border-box;
+  padding: 1rem 3.25rem 1rem 1.25rem;
+  background-color: var(--color-background-light, #1a1a1a);
+  border: 1px solid rgba(230, 198, 86, 0.2);
+  border-radius: var(--border-radius, 8px);
+  color: var(--color-text, #eaecef);
+  font-size: 1rem;
+  transition: all 0.2s ease;
 
-  &::before,
-  &::after {
-    content: "";
-    flex: 1;
-    height: 1px;
-    background: rgba(255, 255, 255, 0.1);
-  }
+  &:focus { outline: none; border-color: var(--color-accent, #E6C87E); }
+  &::placeholder { color: var(--color-text-secondary, #848e9c); }
 `;
-var GateWalletButton = styled10__default.default.button`
-  display: inline-flex;
+var GateSubmit = styled10__default.default.button`
+  position: absolute;
+  top: 50%;
+  right: 0.55rem;
+  transform: translateY(-50%);
+  width: 34px;
+  height: 34px;
+  display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
-  margin-top: 0.1rem;
-  padding: 0.55rem 1.1rem;
-  background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: var(--border-radius, 8px);
+  background: none;
+  border: none;
+  border-radius: 8px;
   color: var(--color-text-secondary, #848e9c);
-  font-size: 0.85rem;
-  font-weight: 500;
   cursor: pointer;
-  transition: border-color 0.15s ease, color 0.15s ease;
-
-  svg {
-    width: 16px;
-    height: 16px;
-  }
+  transition: color 0.2s ease, background 0.2s ease;
 
-  &:hover {
-    border-color: rgba(230, 198, 86, 0.4);
-    color: var(--color-text, #eaecef);
-  }
+  svg { width: 18px; height: 18px; }
+  &:hover:not(:disabled) { color: var(--color-accent, #E6C87E); background: rgba(230, 198, 86, 0.1); }
+  &:disabled { opacity: 0.4; cursor: not-allowed; }
 `;
-var GateReveal = styled10__default.default.div`
+var GateOr = styled10__default.default.div`
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 0.9rem;
-  width: 100%;
-  animation: gateReveal 0.3s ease-out;
+  gap: 0.75rem;
+  color: var(--color-text-secondary, #848e9c);
+  font-size: 0.8rem;
+  margin: 0.4rem 0;
 
-  @keyframes gateReveal {
-    from {
-      opacity: 0;
-      transform: translateY(-6px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
+  &::before, &::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.08); }
 `;
 var OTPContainer = styled10__default.default.div`
   display: flex;
@@ -8390,17 +8040,15 @@ var OTPInput = styled10__default.default.input`
   font-size: 1.5rem;
   font-weight: 600;
   background-color: var(--color-background-light, #1a1a1a);
-  border: 1px solid ${(props) => codeBorderColor(props.$status, false)};
+  border: 1px solid rgba(230, 198, 86, 0.2);
   border-radius: var(--border-radius, 8px);
-  color: ${(props) => props.$status === "valid" ? "var(--color-positive, #00C076)" : props.$status === "invalid" ? "var(--color-negative, #FF5757)" : "var(--color-accent, #E6C87E)"};
-  box-shadow: ${(props) => props.$status === "valid" ? "0 0 0 1px var(--color-positive, #00C076)" : props.$status === "invalid" ? "0 0 0 1px var(--color-negative, #FF5757)" : "none"};
-  opacity: ${(props) => props.$status === "checking" ? 0.6 : 1};
+  color: var(--color-accent, #E6C87E);
   transition: all 0.2s ease;
 
   &:focus {
     outline: none;
-    border-color: ${(props) => codeBorderColor(props.$status, true)};
-    box-shadow: 0 0 0 2px ${(props) => props.$status === "valid" ? "rgba(0, 192, 118, 0.25)" : props.$status === "invalid" ? "rgba(255, 87, 87, 0.25)" : "rgba(230, 198, 86, 0.2)"};
+    border-color: var(--color-accent, #E6C87E);
+    box-shadow: 0 0 0 2px rgba(230, 198, 86, 0.2);
   }
 `;
 var SubmitButton = styled10__default.default.button`
@@ -8768,24 +8416,15 @@ var SpinnerRing = styled10__default.default.div`
   }
 `;
 var PREPARING_FACTS = [
-  // Exchange
+  "Property is the world's largest asset class \u2014 worth over US$300 trillion.",
+  "Loaf settles trades in about 1 second. Traditional property takes ~90 days.",
   "Our matching engine processes orders in 30 microseconds.",
-  "Loaf settles in 1 second. Traditional property takes 30-90 days.",
+  "Every token is backed 1:1 by land-title-registered property.",
+  "Own a slice of premium real estate \u2014 no mortgage, no paperwork.",
   "Buy and sell property as easily as a stock, on a live orderbook.",
-  "Continuous price discovery, not a single buyer negotiating in a back room.",
-  "Algo-trade property on our API. Build a bot with Claude using our docs.",
-  // What you're holding
-  "Hold shares secured 1:1 by the underlying property, as regulated securities.",
-  "The same economic exposure as owning the property. Without the friction, gatekeeping, or illiquidity.",
-  "Securitisation of property brings a new dimension of flexibility and tradability.",
-  // Frictionless
-  "Settle in seconds, then sell again whenever you want. No waiting days or weeks.",
-  "99% of the frictions in property transactions can be, and have been, reduced.",
-  // Vision
-  "A family office can rebalance a billion dollars in an afternoon, but couldn't sell a $50M property in under six months.",
-  "Family offices and HNWIs prize capital flexibility. Loaf makes property flexible.",
-  "There's no law of physics that says the world's oldest asset class must stay illiquid.",
-  "What if property underwent an IPO?"
+  "Earn rental yield on the exact fraction of property you own.",
+  "Title-backed by the NSW Land Registry \u2014 real ownership, on-chain.",
+  "Loaf ran the world's first property IPO."
 ];
 var FactCard = styled10__default.default.div`
   margin-top: 1.5rem;
@@ -8893,7 +8532,7 @@ var LogoImage2 = styled10__default.default.img`
   height: 30px;
   width: auto;
 `;
-var LogoBeta2 = styled10__default.default.span`
+var LogoBeta = styled10__default.default.span`
   font-size: 0.6rem;
   font-weight: 600;
   letter-spacing: 0.08em;
@@ -9051,7 +8690,7 @@ function OnboardingGuide({
     /* @__PURE__ */ jsxRuntime.jsx(CloseButton2, { onClick: onClose, "aria-label": "Skip", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 6l12 12M18 6L6 18" }) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(LogoRow, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(LogoImage2, { src: logoSrc, alt: "Loaf" }),
-      /* @__PURE__ */ jsxRuntime.jsx(LogoBeta2, { children: "Private Beta" })
+      /* @__PURE__ */ jsxRuntime.jsx(LogoBeta, { children: "Private Beta" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(Title2, { children: "You're in \u{1F389}" }),
     /* @__PURE__ */ jsxRuntime.jsx(Subtitle2, { children: "Here's everything you need to make your first trade." }),
@@ -12421,8 +12060,7 @@ function AssetSelectorBar({
   onSelect,
   trailing,
   imageUrl,
-  badgeLabel,
-  tickerPrimary
+  badgeLabel
 }) {
   const [isDropdownOpen, setIsDropdownOpen] = React5.useState(false);
   const hasItems = selectorItems && selectorItems.length > 0;
@@ -12433,14 +12071,9 @@ function AssetSelectorBar({
   ];
   return /* @__PURE__ */ jsxRuntime.jsx(AssetSelectorWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(IPOAssetSelector, { children: [
     imageUrl && /* @__PURE__ */ jsxRuntime.jsx(AssetThumbnail, { src: imageUrl, alt: propertyName }),
-    /* @__PURE__ */ jsxRuntime.jsx(AssetSelectorDropdown, { $flush: tickerPrimary, onClick: () => hasItems && setIsDropdownOpen((prev) => !prev), children: /* @__PURE__ */ jsxRuntime.jsxs(AssetName, { children: [
-      tickerPrimary && currentTicker ? /* @__PURE__ */ jsxRuntime.jsxs(AssetIdentity, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AssetTicker, { children: currentTicker.toUpperCase() }),
-        /* @__PURE__ */ jsxRuntime.jsx(AssetSubName, { children: propertyName })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        propertyName,
-        currentTicker ? ` (${currentTicker.toUpperCase()})` : ""
-      ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(AssetSelectorDropdown, { onClick: () => hasItems && setIsDropdownOpen((prev) => !prev), children: /* @__PURE__ */ jsxRuntime.jsxs(AssetName, { children: [
+      propertyName,
+      currentTicker ? ` (${currentTicker.toUpperCase()})` : "",
       badgeLabel && /* @__PURE__ */ jsxRuntime.jsx(CompetitionBadge, { children: badgeLabel }),
       hasItems && /* @__PURE__ */ jsxRuntime.jsx(
         "svg",
@@ -12469,7 +12102,7 @@ function AssetSelectorBar({
         ] })
       ] })
     ] }, m.label)) }),
-    trailing != null && /* @__PURE__ */ jsxRuntime.jsx(TrailingWrapper, { className: "asset-bar-trailing", children: /* @__PURE__ */ jsxRuntime.jsx(TrailingInner, { children: trailing }) }),
+    trailing != null && /* @__PURE__ */ jsxRuntime.jsx(TrailingWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(TrailingInner, { children: trailing }) }),
     isDropdownOpen && hasItems && /* @__PURE__ */ jsxRuntime.jsx(IPODropdown, { children: selectorItems.map((item) => {
       const isCurrent = item.tokenName === currentTokenName;
       const status = item.status?.toUpperCase();
@@ -12560,40 +12193,13 @@ var AssetSelectorDropdown = styled10__default.default.div`
   display: flex;
   align-items: center;
   cursor: pointer;
-  /* $flush (tickerPrimary): no horizontal padding / no hover box, so opening the
-     selector doesn't make the ticker appear shoved right by the highlight box. */
-  padding: ${(p) => p.$flush ? "0.25rem 0" : "0.5rem"};
+  padding: 0.5rem;
   border-radius: 8px;
-  transition: ${(p) => p.$flush ? "none" : "all 0.2s ease"};
+  transition: all 0.2s ease;
   flex: 0 1 auto;
   min-width: 0;
   overflow: hidden;
-  &:hover { background-color: ${(p) => p.$flush ? "transparent" : "rgba(255,255,255,0.05)"}; }
-`;
-var AssetIdentity = styled10__default.default.div`
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  line-height: 1.2;
-`;
-var AssetTicker = styled10__default.default.span`
-  font-weight: 700;
-  font-size: 1.35rem;
-  color: var(--color-text);
-  letter-spacing: -0.01em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  @media (max-width: 480px) { font-size: 1.2rem; }
-`;
-var AssetSubName = styled10__default.default.span`
-  font-size: 0.8rem;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.4);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  &:hover { background-color: rgba(255,255,255,0.05); }
 `;
 var AssetName = styled10__default.default.div`
   display: flex;
@@ -15271,30 +14877,27 @@ function PortfolioActivityPanel({
             ] }, pos.tokenName);
           })
         ] }),
-        positions.length > 0 && closeAllOpen && onClosePosition && typeof document !== "undefined" && ReactDOM.createPortal(
-          /* @__PURE__ */ jsxRuntime.jsx(CloseAllOverlay, { onClick: () => setCloseAllOpen(false), children: /* @__PURE__ */ jsxRuntime.jsxs(CloseAllModal, { onClick: (e) => e.stopPropagation(), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(CloseAllModalX, { onClick: () => setCloseAllOpen(false), children: "\xD7" }),
-            /* @__PURE__ */ jsxRuntime.jsx(CloseAllTitle, { children: "Confirm Sell All" }),
-            /* @__PURE__ */ jsxRuntime.jsx(CloseAllDesc, { children: "This will sell all your positions and cancel their associated TP/SL orders." }),
-            /* @__PURE__ */ jsxRuntime.jsxs(CloseAllOption, { onClick: () => setCloseAllType("market"), children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CloseAllRadio, { $selected: closeAllType === "market" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Market Sell" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(CloseAllOption, { onClick: () => setCloseAllType("limit"), children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CloseAllRadio, { $selected: closeAllType === "limit" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Limit Sell at Mid Price" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(CloseAllConfirmBtn, { onClick: () => {
-              positions.forEach((pos) => onClosePosition(pos.tokenName, closeAllType, pos.quantity, pos.marketPrice));
-              setCloseAllOpen(false);
-            }, children: [
-              "Confirm ",
-              closeAllType === "market" ? "Market" : "Limit",
-              " Sell"
-            ] })
-          ] }) }),
-          document.body
-        )
+        positions.length > 0 && closeAllOpen && onClosePosition && /* @__PURE__ */ jsxRuntime.jsx(CloseAllOverlay, { onClick: () => setCloseAllOpen(false), children: /* @__PURE__ */ jsxRuntime.jsxs(CloseAllModal, { onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CloseAllModalX, { onClick: () => setCloseAllOpen(false), children: "\xD7" }),
+          /* @__PURE__ */ jsxRuntime.jsx(CloseAllTitle, { children: "Confirm Sell All" }),
+          /* @__PURE__ */ jsxRuntime.jsx(CloseAllDesc, { children: "This will sell all your positions and cancel their associated TP/SL orders." }),
+          /* @__PURE__ */ jsxRuntime.jsxs(CloseAllOption, { onClick: () => setCloseAllType("market"), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CloseAllRadio, { $selected: closeAllType === "market" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Market Sell" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(CloseAllOption, { onClick: () => setCloseAllType("limit"), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CloseAllRadio, { $selected: closeAllType === "limit" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Limit Sell at Mid Price" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(CloseAllConfirmBtn, { onClick: () => {
+            positions.forEach((pos) => onClosePosition(pos.tokenName, closeAllType, pos.quantity, pos.marketPrice));
+            setCloseAllOpen(false);
+          }, children: [
+            "Confirm ",
+            closeAllType === "market" ? "Market" : "Limit",
+            " Sell"
+          ] })
+        ] }) })
       ] }),
       activeTab === "subscriptions" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         offeringOrders.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: "IPO allocations will appear here once you subscribe." }),
@@ -15751,63 +15354,57 @@ function PortfolioActivityPanel({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(PaginationBtn, { disabled: currentPage >= totalPages - 1, onClick: () => setCurrentPage((p) => p + 1), children: "Next \u203A" })
     ] }),
-    cancelAllConfirmOpen && typeof document !== "undefined" && ReactDOM.createPortal(
-      /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmOverlay, { onClick: () => setCancelAllConfirmOpen(false), children: /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmModal, { onClick: (e) => e.stopPropagation(), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmTitle, { children: "Cancel All Orders" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmBody, { children: [
-          "Are you sure you want to cancel all ",
-          openOrdersCount,
-          " open orders? This action cannot be undone."
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmActions, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmDismiss, { type: "button", onClick: () => setCancelAllConfirmOpen(false), children: "Keep Orders" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            CancelConfirmProceed,
-            {
-              type: "button",
-              disabled: cancellingAll,
-              onClick: async () => {
-                if (onCancelAllOrders) {
-                  setCancellingAll(true);
-                  try {
-                    await onCancelAllOrders();
-                  } finally {
-                    setCancellingAll(false);
-                  }
-                }
-                setCancelAllConfirmOpen(false);
-              },
-              children: cancellingAll ? "Cancelling\u2026" : "Yes, Cancel All"
-            }
-          )
-        ] })
-      ] }) }),
-      document.body
-    ),
-    pendingCancelOrderId !== null && typeof document !== "undefined" && ReactDOM.createPortal(
-      /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmOverlay, { onClick: () => setPendingCancelOrderId(null), children: /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmModal, { onClick: (e) => e.stopPropagation(), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmTitle, { children: "Cancel Order" }),
-        /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmBody, { children: "Are you sure you want to cancel this order? This action cannot be undone." }),
-        /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmActions, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmDismiss, { type: "button", onClick: () => setPendingCancelOrderId(null), children: "Keep Order" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            CancelConfirmProceed,
-            {
-              type: "button",
-              disabled: cancellingOrderId != null,
-              onClick: async () => {
-                if (onCancelOrder && pendingCancelOrderId !== null) {
-                  await onCancelOrder(pendingCancelOrderId);
+    cancelAllConfirmOpen && /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmOverlay, { onClick: () => setCancelAllConfirmOpen(false), children: /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmModal, { onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmTitle, { children: "Cancel All Orders" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmBody, { children: [
+        "Are you sure you want to cancel all ",
+        openOrdersCount,
+        " open orders? This action cannot be undone."
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmActions, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmDismiss, { type: "button", onClick: () => setCancelAllConfirmOpen(false), children: "Keep Orders" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CancelConfirmProceed,
+          {
+            type: "button",
+            disabled: cancellingAll,
+            onClick: async () => {
+              if (onCancelAllOrders) {
+                setCancellingAll(true);
+                try {
+                  await onCancelAllOrders();
+                } finally {
+                  setCancellingAll(false);
                 }
-                setPendingCancelOrderId(null);
-              },
-              children: cancellingOrderId === pendingCancelOrderId ? "Cancelling\u2026" : "Yes, Cancel"
-            }
-          )
-        ] })
-      ] }) }),
-      document.body
-    )
+              }
+              setCancelAllConfirmOpen(false);
+            },
+            children: cancellingAll ? "Cancelling\u2026" : "Yes, Cancel All"
+          }
+        )
+      ] })
+    ] }) }),
+    pendingCancelOrderId !== null && /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmOverlay, { onClick: () => setPendingCancelOrderId(null), children: /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmModal, { onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmTitle, { children: "Cancel Order" }),
+      /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmBody, { children: "Are you sure you want to cancel this order? This action cannot be undone." }),
+      /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmActions, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmDismiss, { type: "button", onClick: () => setPendingCancelOrderId(null), children: "Keep Order" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CancelConfirmProceed,
+          {
+            type: "button",
+            disabled: cancellingOrderId != null,
+            onClick: async () => {
+              if (onCancelOrder && pendingCancelOrderId !== null) {
+                await onCancelOrder(pendingCancelOrderId);
+              }
+              setPendingCancelOrderId(null);
+            },
+            children: cancellingOrderId === pendingCancelOrderId ? "Cancelling\u2026" : "Yes, Cancel"
+          }
+        )
+      ] })
+    ] }) })
   ] });
 }
 var Container2 = styled10__default.default.div`
@@ -16063,8 +15660,7 @@ var CancelConfirmOverlay = styled10__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  /* Above the trade page's fullscreen/sticky layers (TradePage.css uses up to 10001). */
-  z-index: 10050;
+  z-index: 1000;
 `;
 var CancelConfirmModal = styled10__default.default.div`
   background: #1a1a1a;
@@ -16178,8 +15774,7 @@ var CloseAllOverlay = styled10__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  /* Above the trade page's fullscreen/sticky layers (TradePage.css uses up to 10001). */
-  z-index: 10050;
+  z-index: 1000;
 `;
 var CloseAllModal = styled10__default.default.div`
   background: #1a1a1a;