@loafmarkets/ui 0.1.370 → 0.1.371

package/dist/index.d.mts

@@ -83,6 +83,8 @@ interface OrderbookProps extends React$1.HTMLAttributes<HTMLDivElement> {
     amountPrecision?: number;
     defaultTab?: "orderbook" | "trades";
     onTabChange?: (tab: "orderbook" | "trades") => void;
+    /** When false, the "Trades" tab is hidden and only the orderbook shows (e.g. on mobile). Default true. */
+    showTradesTab?: boolean;
     rightHeader?: React$1.ReactNode;
     variant?: "auto" | "default" | "compact";
     /**
@@ -1019,8 +1021,10 @@ type AssetSelectorBarProps = {
     trailing?: ReactNode;
     imageUrl?: string;
     badgeLabel?: string;
+    /** Stack the TICKER as the primary label with the asset name beneath (InstrumentTile-style), instead of "Name (TICKER)". */
+    tickerPrimary?: boolean;
 };
-declare function AssetSelectorBar({ propertyName, tokenPrice, offeringValuation, metrics: metricsProp, currentTokenName, selectorItems, onSelect, trailing, imageUrl, badgeLabel, }: AssetSelectorBarProps): react_jsx_runtime.JSX.Element;
+declare function AssetSelectorBar({ propertyName, tokenPrice, offeringValuation, metrics: metricsProp, currentTokenName, selectorItems, onSelect, trailing, imageUrl, badgeLabel, tickerPrimary, }: AssetSelectorBarProps): react_jsx_runtime.JSX.Element;
 
 type ToastVariant = 'success' | 'error' | 'info' | 'pending' | 'sell';
 type ToastData = {

package/dist/index.d.ts

@@ -83,6 +83,8 @@ interface OrderbookProps extends React$1.HTMLAttributes<HTMLDivElement> {
     amountPrecision?: number;
     defaultTab?: "orderbook" | "trades";
     onTabChange?: (tab: "orderbook" | "trades") => void;
+    /** When false, the "Trades" tab is hidden and only the orderbook shows (e.g. on mobile). Default true. */
+    showTradesTab?: boolean;
     rightHeader?: React$1.ReactNode;
     variant?: "auto" | "default" | "compact";
     /**
@@ -1019,8 +1021,10 @@ type AssetSelectorBarProps = {
     trailing?: ReactNode;
     imageUrl?: string;
     badgeLabel?: string;
+    /** Stack the TICKER as the primary label with the asset name beneath (InstrumentTile-style), instead of "Name (TICKER)". */
+    tickerPrimary?: boolean;
 };
-declare function AssetSelectorBar({ propertyName, tokenPrice, offeringValuation, metrics: metricsProp, currentTokenName, selectorItems, onSelect, trailing, imageUrl, badgeLabel, }: AssetSelectorBarProps): react_jsx_runtime.JSX.Element;
+declare function AssetSelectorBar({ propertyName, tokenPrice, offeringValuation, metrics: metricsProp, currentTokenName, selectorItems, onSelect, trailing, imageUrl, badgeLabel, tickerPrimary, }: AssetSelectorBarProps): react_jsx_runtime.JSX.Element;
 
 type ToastVariant = 'success' | 'error' | 'info' | 'pending' | 'sell';
 type ToastData = {

package/dist/index.js

@@ -1900,6 +1900,7 @@ var Orderbook = React5__namespace.forwardRef(
     amountPrecision = 2,
     defaultTab = "orderbook",
     onTabChange,
+    showTradesTab = true,
     rightHeader,
     variant = "auto",
     userOrderPrices,
@@ -1913,7 +1914,9 @@ 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, setTab] = React5__namespace.useState(defaultTab);
+    const [tab, setTabState] = React5__namespace.useState(defaultTab);
+    const setTab = setTabState;
+    const effectiveTab = showTradesTab ? tab : "orderbook";
     const [tradeFilter, setTradeFilter] = React5__namespace.useState("all");
     const viewportCompact = useViewportCompact(COMPACT_BREAKPOINT_PX);
     const { userAskPrices, userBidPrices } = React5__namespace.useMemo(() => {
@@ -2007,7 +2010,8 @@ 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,
+      tab: effectiveTab,
+      showTradesTab,
       handleTab,
       tradeFilter,
       setTradeFilter,
@@ -2084,6 +2088,7 @@ function SkeletonRow({ compact }) {
 }
 function DesktopOrderbookLayout({
   tab,
+  showTradesTab = true,
   handleTab,
   tradeFilter,
   setTradeFilter,
@@ -2133,7 +2138,7 @@ function DesktopOrderbookLayout({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        showTradesTab ? /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             type: "button",
@@ -2147,7 +2152,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(
@@ -2286,6 +2291,7 @@ function DesktopOrderbookLayout({
 }
 function MobileOrderbookLayout({
   tab,
+  showTradesTab = true,
   handleTab,
   tradeFilter,
   setTradeFilter,
@@ -2334,7 +2340,7 @@ function MobileOrderbookLayout({
             children: "Orderbook"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        showTradesTab ? /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             onClick: () => handleTab("trades"),
@@ -2348,7 +2354,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",
@@ -5379,7 +5385,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, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(HeaderContainer, { id: "loaf-header", $bgOpacity: headerBgOpacity, $menuOpen: isMobileMenuOpen, 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" }) }),
@@ -5810,7 +5816,8 @@ var Overlay = styled10__default.default.div`
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(3px);
-  z-index: 970;
+  /* Above the trade page's sticky/console layers (z 2000) + close modal (10001). */
+  z-index: 10070;
 `;
 var MobileOnlyButton = styled10__default.default.button.attrs({ type: "button" })`
   display: none;
@@ -5858,7 +5865,11 @@ var HeaderContainer = styled10__default.default.header`
   top: 0;
   left: 0;
   right: 0;
-  z-index: 1000;
+  /* 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};
   width: 100%;
   /* Fallback min-height for browsers that can't evaluate calc+env */
   min-height: 56px;
@@ -5952,7 +5963,8 @@ 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);
-    z-index: 980;
+    /* Above the trade page's sticky/console layers (z 2000) + close modal (10001). */
+    z-index: 10080;
     /* Gentle fade + slide-down instead of an abrupt slide-in. */
     opacity: ${(props) => props.$isOpen ? "1" : "0"};
     transform: ${(props) => props.$isOpen ? "translateY(0)" : "translateY(-14px)"};
@@ -7188,8 +7200,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 Your Identity" }),
-            /* @__PURE__ */ jsxRuntime.jsx(KycSubline, { children: "Initial offerings are only available to verified investors" }),
+            /* @__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(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, {}),
@@ -7275,7 +7287,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: fiatFundingLoading, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ModalOptionCard, { onClick: handleFiatFund, disabled: true, 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" }),
@@ -7285,7 +7297,10 @@ var LoginPopup = ({
                   /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "12 2 20 7 4 7" })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.25rem" }, children: fiatFundingLoading ? "Loading widget\u2026" : "Bank Deposit" }),
+                  /* @__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: "rgba(255,255,255,0.5)", fontSize: "0.8rem" }, children: "Deposit to your account via card or bank transfer" })
                 ] })
               ] })
@@ -11872,7 +11887,8 @@ function AssetSelectorBar({
   onSelect,
   trailing,
   imageUrl,
-  badgeLabel
+  badgeLabel,
+  tickerPrimary
 }) {
   const [isDropdownOpen, setIsDropdownOpen] = React5.useState(false);
   const hasItems = selectorItems && selectorItems.length > 0;
@@ -11883,9 +11899,14 @@ 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, { onClick: () => hasItems && setIsDropdownOpen((prev) => !prev), children: /* @__PURE__ */ jsxRuntime.jsxs(AssetName, { children: [
-      propertyName,
-      currentTicker ? ` (${currentTicker.toUpperCase()})` : "",
+    /* @__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()})` : ""
+      ] }),
       badgeLabel && /* @__PURE__ */ jsxRuntime.jsx(CompetitionBadge, { children: badgeLabel }),
       hasItems && /* @__PURE__ */ jsxRuntime.jsx(
         "svg",
@@ -11914,7 +11935,7 @@ function AssetSelectorBar({
         ] })
       ] })
     ] }, m.label)) }),
-    trailing != null && /* @__PURE__ */ jsxRuntime.jsx(TrailingWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(TrailingInner, { children: trailing }) }),
+    trailing != null && /* @__PURE__ */ jsxRuntime.jsx(TrailingWrapper, { className: "asset-bar-trailing", 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();
@@ -12005,13 +12026,40 @@ var AssetSelectorDropdown = styled10__default.default.div`
   display: flex;
   align-items: center;
   cursor: pointer;
-  padding: 0.5rem;
+  /* $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"};
   border-radius: 8px;
-  transition: all 0.2s ease;
+  transition: ${(p) => p.$flush ? "none" : "all 0.2s ease"};
   flex: 0 1 auto;
   min-width: 0;
   overflow: hidden;
-  &:hover { background-color: rgba(255,255,255,0.05); }
+  &: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;
 `;
 var AssetName = styled10__default.default.div`
   display: flex;
@@ -14689,27 +14737,30 @@ function PortfolioActivityPanel({
             ] }, pos.tokenName);
           })
         ] }),
-        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"
-          ] })
-        ] }) })
+        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
+        )
       ] }),
       activeTab === "subscriptions" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         offeringOrders.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: "IPO allocations will appear here once you subscribe." }),
@@ -15166,57 +15217,63 @@ function PortfolioActivityPanel({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(PaginationBtn, { disabled: currentPage >= totalPages - 1, onClick: () => setCurrentPage((p) => p + 1), children: "Next \u203A" })
     ] }),
-    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);
+    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"
-          }
-        )
-      ] })
-    ] }) }),
-    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"
-          }
-        )
-      ] })
-    ] }) })
+                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);
+                }
+                setPendingCancelOrderId(null);
+              },
+              children: cancellingOrderId === pendingCancelOrderId ? "Cancelling\u2026" : "Yes, Cancel"
+            }
+          )
+        ] })
+      ] }) }),
+      document.body
+    )
   ] });
 }
 var Container2 = styled10__default.default.div`
@@ -15472,7 +15529,8 @@ var CancelConfirmOverlay = styled10__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
+  /* Above the trade page's fullscreen/sticky layers (TradePage.css uses up to 10001). */
+  z-index: 10050;
 `;
 var CancelConfirmModal = styled10__default.default.div`
   background: #1a1a1a;
@@ -15586,7 +15644,8 @@ var CloseAllOverlay = styled10__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
+  /* Above the trade page's fullscreen/sticky layers (TradePage.css uses up to 10001). */
+  z-index: 10050;
 `;
 var CloseAllModal = styled10__default.default.div`
   background: #1a1a1a;