@loafmarkets/ui 0.1.240 → 0.1.242

package/dist/index.mjs

@@ -2188,23 +2188,20 @@ function DesktopOrderbookLayout({
             ))
           }
         ),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           "div",
           {
             ref: midRef,
-            className: "grid grid-cols-2 items-center gap-3 bg-[#0b1a24] px-3 py-2 flex-shrink-0",
-            children: [
-              /* @__PURE__ */ jsx("div", { className: cn("text-lg font-semibold tabular-nums", midClass), children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { width: 110, height: 20 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                "$",
-                formatNumber(midPrice, precision),
-                midChangePercent == null ? null : /* @__PURE__ */ jsxs("span", { className: cn("ml-2 text-sm font-semibold tabular-nums", midClass), children: [
-                  midChangePercent >= 0 ? "+" : "",
-                  midChangePercent.toFixed(2),
-                  "%"
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsx("div", {})
-            ]
+            className: "flex items-center gap-2 bg-[#0b1a24] px-3 py-2 flex-shrink-0",
+            children: /* @__PURE__ */ jsx("div", { className: cn("text-lg font-semibold tabular-nums whitespace-nowrap", midClass), children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { width: 110, height: 20 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              "$",
+              formatNumber(midPrice, precision),
+              midChangePercent == null ? null : /* @__PURE__ */ jsxs("span", { className: cn("ml-2 text-sm font-semibold tabular-nums", midClass), children: [
+                midChangePercent >= 0 ? "+" : "",
+                midChangePercent.toFixed(2),
+                "%"
+              ] })
+            ] }) })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -13696,6 +13693,7 @@ function PortfolioActivityPanel({
   tradeHistory = [],
   transfers = [],
   onCancelOrder,
+  onCancelAllOrders,
   onAmendOrder,
   cancellingOrderId = null,
   defaultTab,
@@ -13708,6 +13706,8 @@ function PortfolioActivityPanel({
   const [activeTab, setActiveTab] = useState(resolvedDefaultTab);
   const [activityPage, setActivityPage] = useState(0);
   const [pendingCancelOrderId, setPendingCancelOrderId] = useState(null);
+  const [cancelAllConfirmOpen, setCancelAllConfirmOpen] = useState(false);
+  const [cancellingAll, setCancellingAll] = useState(false);
   const [closeAllOpen, setCloseAllOpen] = useState(false);
   const [closeAllType, setCloseAllType] = useState("market");
   const [posSortKey, setPosSortKey] = useState("asset");
@@ -13947,6 +13947,7 @@ function PortfolioActivityPanel({
     activeTab === "open-orders" && /* @__PURE__ */ jsxs(Fragment, { children: [
       openOrders.length === 0 && /* @__PURE__ */ jsx(EmptyState, { children: "Open orders will appear here while they are working in the market." }),
       openOrders.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        onCancelAllOrders && openOrdersCount > 1 && /* @__PURE__ */ jsx(CancelAllRow, { children: /* @__PURE__ */ jsx(CancelAllBtn, { type: "button", disabled: cancellingAll, onClick: () => setCancelAllConfirmOpen(true), children: "Cancel All" }) }),
         /* @__PURE__ */ jsxs(GridHeader, { $columns: onCancelOrder ? "1.2fr 0.6fr 0.7fr 0.8fr 1fr 0.8fr 0.8fr 70px" : "1.2fr 0.6fr 0.7fr 0.8fr 1fr 0.8fr 0.8fr", children: [
           /* @__PURE__ */ jsx(GridHeaderCell, { children: "Asset" }),
           /* @__PURE__ */ jsx(GridHeaderCell, { children: "Side" }),
@@ -14096,6 +14097,36 @@ function PortfolioActivityPanel({
         }
       )
     ] }),
+    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);
+                }
+              }
+              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." }),
@@ -14371,6 +14402,33 @@ var CancelButton = styled9.button`
     cursor: not-allowed;
   }
 `;
+var CancelAllRow = styled9.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 0.4rem;
+`;
+var CancelAllBtn = styled9.button`
+  background: rgba(246, 70, 93, 0.08);
+  border: 1px solid rgba(246, 70, 93, 0.3);
+  border-radius: 4px;
+  padding: 0.2rem 0.7rem;
+  font-size: 0.62rem;
+  font-weight: 600;
+  color: #f6465d;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background: rgba(246, 70, 93, 0.18);
+    border-color: rgba(246, 70, 93, 0.5);
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+`;
 var GridHeader = styled9.div`
   display: grid;
   grid-template-columns: ${(p) => p.$columns};