@loafmarkets/ui 0.1.370 → 0.1.372

package/dist/index.mjs

@@ -7,6 +7,7 @@ import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import styled10, { keyframes, css } from 'styled-components';
 import * as ReactDOM from 'react-dom';
+import { createPortal } from 'react-dom';
 import { Newspaper } from 'lucide-react';
 import * as LightweightCharts from 'lightweight-charts';
 import { MdKingBed, MdBathtub, MdDirectionsCar, MdPool, MdYard, MdFitnessCenter } from 'react-icons/md';
@@ -1874,6 +1875,7 @@ var Orderbook = React5.forwardRef(
     amountPrecision = 2,
     defaultTab = "orderbook",
     onTabChange,
+    showTradesTab = true,
     rightHeader,
     variant = "auto",
     userOrderPrices,
@@ -1887,7 +1889,9 @@ var Orderbook = React5.forwardRef(
     ...props
   }, ref) => {
     const resolvedRightHeader = rightHeader ?? /* @__PURE__ */ jsx(LoafLiquidityBadge, { className: "text-[0.6rem] orderbook-ll-badge", onClick: onLoafLiquidityClick });
-    const [tab, setTab] = React5.useState(defaultTab);
+    const [tab, setTabState] = React5.useState(defaultTab);
+    const setTab = setTabState;
+    const effectiveTab = showTradesTab ? tab : "orderbook";
     const [tradeFilter, setTradeFilter] = React5.useState("all");
     const viewportCompact = useViewportCompact(COMPACT_BREAKPOINT_PX);
     const { userAskPrices, userBidPrices } = React5.useMemo(() => {
@@ -1981,7 +1985,8 @@ var Orderbook = React5.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,
@@ -2058,6 +2063,7 @@ function SkeletonRow({ compact }) {
 }
 function DesktopOrderbookLayout({
   tab,
+  showTradesTab = true,
   handleTab,
   tradeFilter,
   setTradeFilter,
@@ -2107,7 +2113,7 @@ function DesktopOrderbookLayout({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(
+        showTradesTab ? /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
@@ -2121,7 +2127,7 @@ function DesktopOrderbookLayout({
               tab === "trades" ? /* @__PURE__ */ jsx("span", { className: "absolute -bottom-px left-0 h-[2px] w-full bg-[#E6C87E]" }) : null
             ]
           }
-        )
+        ) : null
       ] }),
       tab === "trades" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs", children: [
         /* @__PURE__ */ jsx(
@@ -2260,6 +2266,7 @@ function DesktopOrderbookLayout({
 }
 function MobileOrderbookLayout({
   tab,
+  showTradesTab = true,
   handleTab,
   tradeFilter,
   setTradeFilter,
@@ -2308,7 +2315,7 @@ function MobileOrderbookLayout({
             children: "Orderbook"
           }
         ),
-        /* @__PURE__ */ jsx(
+        showTradesTab ? /* @__PURE__ */ jsx(
           "span",
           {
             onClick: () => handleTab("trades"),
@@ -2322,7 +2329,7 @@ function MobileOrderbookLayout({
             },
             children: "Trades"
           }
-        )
+        ) : null
       ] }),
       tab === "trades" ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 text-[0.6rem] text-white/70", children: ["all", "buy", "sell"].map((filter) => /* @__PURE__ */ jsx(
         "button",
@@ -5353,7 +5360,7 @@ var Header = ({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(SafeAreaCover, {}),
     /* @__PURE__ */ jsx(Overlay, { $isOpen: isMobileMenuOpen, onClick: () => setIsMobileMenuOpen(false) }),
-    /* @__PURE__ */ jsxs(HeaderContainer, { id: "loaf-header", $bgOpacity: headerBgOpacity, children: [
+    /* @__PURE__ */ jsxs(HeaderContainer, { id: "loaf-header", $bgOpacity: headerBgOpacity, $menuOpen: isMobileMenuOpen, children: [
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
         /* @__PURE__ */ jsxs(Logo, { children: [
           /* @__PURE__ */ jsx(LogoLink, { href: logoHref ?? resolvedHomePath, onClick: handleLogoNavigation, children: /* @__PURE__ */ jsx("img", { src: Loaf_logo_Banner_default, alt: "LOAF Logo" }) }),
@@ -5784,7 +5791,8 @@ var Overlay = styled10.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.button.attrs({ type: "button" })`
   display: none;
@@ -5832,7 +5840,11 @@ var HeaderContainer = styled10.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;
@@ -5926,7 +5938,8 @@ var Nav = styled10.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)"};
@@ -5946,7 +5959,7 @@ var Nav = styled10.nav`
       align-items: center;
       justify-content: center;
       min-height: 100%;
-      padding: 2rem 1.5rem 2.5rem;
+      padding: 3.5rem 1.5rem 2.5rem;
       gap: 0.4rem;
     }
   }
@@ -7162,8 +7175,8 @@ var LoginPopup = ({
               /* @__PURE__ */ jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
               /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
             ] }) }),
-            /* @__PURE__ */ jsx(KycHeading, { children: "Verify Your Identity" }),
-            /* @__PURE__ */ jsx(KycSubline, { children: "Initial offerings are only available to verified investors" }),
+            /* @__PURE__ */ jsx(KycHeading, { children: "Verify Wholesale Status" }),
+            /* @__PURE__ */ jsx(KycSubline, { children: "Initial offerings are only available to accredited or wholesale investors" }),
             /* @__PURE__ */ jsx(KycStartButton, { type: "button", onClick: handleKycStart, disabled: kycLoading, children: kycLoading ? "Verifying\u2026" : kycStatusProp === "PENDING" || kycStatusProp === "ON_HOLD" ? "Resume Verification" : "Start Verification" }),
             /* @__PURE__ */ jsx(KycDuration, { children: "Takes about 2 minutes" }),
             /* @__PURE__ */ jsx(KycDivider, {}),
@@ -7249,7 +7262,7 @@ var LoginPopup = ({
                   /* @__PURE__ */ jsx("div", { style: { color: "rgba(255,255,255,0.5)", fontSize: "0.8rem" }, children: "Deposit USDC from an exchange or wallet" })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs(ModalOptionCard, { onClick: handleFiatFund, disabled: fiatFundingLoading, children: [
+              /* @__PURE__ */ jsxs(ModalOptionCard, { onClick: handleFiatFund, disabled: true, children: [
                 /* @__PURE__ */ 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__ */ jsx("line", { x1: "3", y1: "22", x2: "21", y2: "22" }),
                   /* @__PURE__ */ jsx("line", { x1: "6", y1: "18", x2: "6", y2: "11" }),
@@ -7259,7 +7272,10 @@ var LoginPopup = ({
                   /* @__PURE__ */ jsx("polygon", { points: "12 2 20 7 4 7" })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-                  /* @__PURE__ */ jsx("div", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.25rem" }, children: fiatFundingLoading ? "Loading widget\u2026" : "Bank Deposit" }),
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.25rem" }, children: [
+                    /* @__PURE__ */ jsx("span", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem" }, children: fiatFundingLoading ? "Loading widget\u2026" : "Bank Deposit" }),
+                    /* @__PURE__ */ 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__ */ jsx("div", { style: { color: "rgba(255,255,255,0.5)", fontSize: "0.8rem" }, children: "Deposit to your account via card or bank transfer" })
                 ] })
               ] })
@@ -11846,7 +11862,8 @@ function AssetSelectorBar({
   onSelect,
   trailing,
   imageUrl,
-  badgeLabel
+  badgeLabel,
+  tickerPrimary
 }) {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const hasItems = selectorItems && selectorItems.length > 0;
@@ -11857,9 +11874,14 @@ function AssetSelectorBar({
   ];
   return /* @__PURE__ */ jsx(AssetSelectorWrapper, { children: /* @__PURE__ */ jsxs(IPOAssetSelector, { children: [
     imageUrl && /* @__PURE__ */ jsx(AssetThumbnail, { src: imageUrl, alt: propertyName }),
-    /* @__PURE__ */ jsx(AssetSelectorDropdown, { onClick: () => hasItems && setIsDropdownOpen((prev) => !prev), children: /* @__PURE__ */ jsxs(AssetName, { children: [
-      propertyName,
-      currentTicker ? ` (${currentTicker.toUpperCase()})` : "",
+    /* @__PURE__ */ jsx(AssetSelectorDropdown, { $flush: tickerPrimary, onClick: () => hasItems && setIsDropdownOpen((prev) => !prev), children: /* @__PURE__ */ jsxs(AssetName, { children: [
+      tickerPrimary && currentTicker ? /* @__PURE__ */ jsxs(AssetIdentity, { children: [
+        /* @__PURE__ */ jsx(AssetTicker, { children: currentTicker.toUpperCase() }),
+        /* @__PURE__ */ jsx(AssetSubName, { children: propertyName })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        propertyName,
+        currentTicker ? ` (${currentTicker.toUpperCase()})` : ""
+      ] }),
       badgeLabel && /* @__PURE__ */ jsx(CompetitionBadge, { children: badgeLabel }),
       hasItems && /* @__PURE__ */ jsx(
         "svg",
@@ -11888,7 +11910,7 @@ function AssetSelectorBar({
         ] })
       ] })
     ] }, m.label)) }),
-    trailing != null && /* @__PURE__ */ jsx(TrailingWrapper, { children: /* @__PURE__ */ jsx(TrailingInner, { children: trailing }) }),
+    trailing != null && /* @__PURE__ */ jsx(TrailingWrapper, { className: "asset-bar-trailing", children: /* @__PURE__ */ jsx(TrailingInner, { children: trailing }) }),
     isDropdownOpen && hasItems && /* @__PURE__ */ jsx(IPODropdown, { children: selectorItems.map((item) => {
       const isCurrent = item.tokenName === currentTokenName;
       const status = item.status?.toUpperCase();
@@ -11979,13 +12001,40 @@ var AssetSelectorDropdown = styled10.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.div`
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  line-height: 1.2;
+`;
+var AssetTicker = styled10.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.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.div`
   display: flex;
@@ -14663,27 +14712,30 @@ function PortfolioActivityPanel({
             ] }, pos.tokenName);
           })
         ] }),
-        positions.length > 0 && closeAllOpen && onClosePosition && /* @__PURE__ */ jsx(CloseAllOverlay, { onClick: () => setCloseAllOpen(false), children: /* @__PURE__ */ jsxs(CloseAllModal, { onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsx(CloseAllModalX, { onClick: () => setCloseAllOpen(false), children: "\xD7" }),
-          /* @__PURE__ */ jsx(CloseAllTitle, { children: "Confirm Sell All" }),
-          /* @__PURE__ */ jsx(CloseAllDesc, { children: "This will sell all your positions and cancel their associated TP/SL orders." }),
-          /* @__PURE__ */ jsxs(CloseAllOption, { onClick: () => setCloseAllType("market"), children: [
-            /* @__PURE__ */ jsx(CloseAllRadio, { $selected: closeAllType === "market" }),
-            /* @__PURE__ */ jsx("span", { children: "Market Sell" })
-          ] }),
-          /* @__PURE__ */ jsxs(CloseAllOption, { onClick: () => setCloseAllType("limit"), children: [
-            /* @__PURE__ */ jsx(CloseAllRadio, { $selected: closeAllType === "limit" }),
-            /* @__PURE__ */ jsx("span", { children: "Limit Sell at Mid Price" })
-          ] }),
-          /* @__PURE__ */ 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" && createPortal(
+          /* @__PURE__ */ jsx(CloseAllOverlay, { onClick: () => setCloseAllOpen(false), children: /* @__PURE__ */ jsxs(CloseAllModal, { onClick: (e) => e.stopPropagation(), children: [
+            /* @__PURE__ */ jsx(CloseAllModalX, { onClick: () => setCloseAllOpen(false), children: "\xD7" }),
+            /* @__PURE__ */ jsx(CloseAllTitle, { children: "Confirm Sell All" }),
+            /* @__PURE__ */ jsx(CloseAllDesc, { children: "This will sell all your positions and cancel their associated TP/SL orders." }),
+            /* @__PURE__ */ jsxs(CloseAllOption, { onClick: () => setCloseAllType("market"), children: [
+              /* @__PURE__ */ jsx(CloseAllRadio, { $selected: closeAllType === "market" }),
+              /* @__PURE__ */ jsx("span", { children: "Market Sell" })
+            ] }),
+            /* @__PURE__ */ jsxs(CloseAllOption, { onClick: () => setCloseAllType("limit"), children: [
+              /* @__PURE__ */ jsx(CloseAllRadio, { $selected: closeAllType === "limit" }),
+              /* @__PURE__ */ jsx("span", { children: "Limit Sell at Mid Price" })
+            ] }),
+            /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
         offeringOrders.length === 0 && /* @__PURE__ */ jsx(EmptyState, { children: "IPO allocations will appear here once you subscribe." }),
@@ -15140,57 +15192,63 @@ function PortfolioActivityPanel({
       ] }),
       /* @__PURE__ */ jsx(PaginationBtn, { disabled: currentPage >= totalPages - 1, onClick: () => setCurrentPage((p) => p + 1), children: "Next \u203A" })
     ] }),
-    cancelAllConfirmOpen && /* @__PURE__ */ jsx(CancelConfirmOverlay, { onClick: () => setCancelAllConfirmOpen(false), children: /* @__PURE__ */ jsxs(CancelConfirmModal, { onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ jsx(CancelConfirmTitle, { children: "Cancel All Orders" }),
-      /* @__PURE__ */ jsxs(CancelConfirmBody, { children: [
-        "Are you sure you want to cancel all ",
-        openOrdersCount,
-        " open orders? This action cannot be undone."
-      ] }),
-      /* @__PURE__ */ jsxs(CancelConfirmActions, { children: [
-        /* @__PURE__ */ jsx(CancelConfirmDismiss, { type: "button", onClick: () => setCancelAllConfirmOpen(false), children: "Keep Orders" }),
-        /* @__PURE__ */ jsx(
-          CancelConfirmProceed,
-          {
-            type: "button",
-            disabled: cancellingAll,
-            onClick: async () => {
-              if (onCancelAllOrders) {
-                setCancellingAll(true);
-                try {
-                  await onCancelAllOrders();
-                } finally {
-                  setCancellingAll(false);
+    cancelAllConfirmOpen && typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx(CancelConfirmOverlay, { onClick: () => setCancelAllConfirmOpen(false), children: /* @__PURE__ */ jsxs(CancelConfirmModal, { onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsx(CancelConfirmTitle, { children: "Cancel All Orders" }),
+        /* @__PURE__ */ jsxs(CancelConfirmBody, { children: [
+          "Are you sure you want to cancel all ",
+          openOrdersCount,
+          " open orders? This action cannot be undone."
+        ] }),
+        /* @__PURE__ */ jsxs(CancelConfirmActions, { children: [
+          /* @__PURE__ */ jsx(CancelConfirmDismiss, { type: "button", onClick: () => setCancelAllConfirmOpen(false), children: "Keep Orders" }),
+          /* @__PURE__ */ 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__ */ jsx(CancelConfirmOverlay, { onClick: () => setPendingCancelOrderId(null), children: /* @__PURE__ */ jsxs(CancelConfirmModal, { onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ jsx(CancelConfirmTitle, { children: "Cancel Order" }),
-      /* @__PURE__ */ jsx(CancelConfirmBody, { children: "Are you sure you want to cancel this order? This action cannot be undone." }),
-      /* @__PURE__ */ jsxs(CancelConfirmActions, { children: [
-        /* @__PURE__ */ jsx(CancelConfirmDismiss, { type: "button", onClick: () => setPendingCancelOrderId(null), children: "Keep Order" }),
-        /* @__PURE__ */ 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" && createPortal(
+      /* @__PURE__ */ jsx(CancelConfirmOverlay, { onClick: () => setPendingCancelOrderId(null), children: /* @__PURE__ */ jsxs(CancelConfirmModal, { onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsx(CancelConfirmTitle, { children: "Cancel Order" }),
+        /* @__PURE__ */ jsx(CancelConfirmBody, { children: "Are you sure you want to cancel this order? This action cannot be undone." }),
+        /* @__PURE__ */ jsxs(CancelConfirmActions, { children: [
+          /* @__PURE__ */ jsx(CancelConfirmDismiss, { type: "button", onClick: () => setPendingCancelOrderId(null), children: "Keep Order" }),
+          /* @__PURE__ */ 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.div`
@@ -15446,7 +15504,8 @@ var CancelConfirmOverlay = styled10.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.div`
   background: #1a1a1a;
@@ -15560,7 +15619,8 @@ var CloseAllOverlay = styled10.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.div`
   background: #1a1a1a;