@loafmarkets/ui 0.1.240 → 0.1.242

package/dist/index.d.mts

@@ -894,6 +894,7 @@ type PortfolioActivityPanelProps = {
     tradeHistory?: readonly TradeHistoryItem[];
     transfers?: readonly TransferHistoryItem[];
     onCancelOrder?: (orderId: number) => Promise<void>;
+    onCancelAllOrders?: () => Promise<void>;
     onAmendOrder?: (orderId: number, fields: {
         quantity?: number;
         price?: number;
@@ -905,7 +906,7 @@ type PortfolioActivityPanelProps = {
     className?: string;
     style?: React.CSSProperties;
 };
-declare function PortfolioActivityPanel({ positions, showPositionsTab, onPositionClick, onClosePosition, offeringOrders, openOrders, orderHistory, tradeHistory, transfers, onCancelOrder, onAmendOrder, cancellingOrderId, defaultTab, pageSize, blockExplorerBaseUrl, className, style, }: PortfolioActivityPanelProps): react_jsx_runtime.JSX.Element;
+declare function PortfolioActivityPanel({ positions, showPositionsTab, onPositionClick, onClosePosition, offeringOrders, openOrders, orderHistory, tradeHistory, transfers, onCancelOrder, onCancelAllOrders, onAmendOrder, cancellingOrderId, defaultTab, pageSize, blockExplorerBaseUrl, className, style, }: PortfolioActivityPanelProps): react_jsx_runtime.JSX.Element;
 
 type SelectorItem = {
     readonly tokenName: string;

package/dist/index.d.ts

@@ -894,6 +894,7 @@ type PortfolioActivityPanelProps = {
     tradeHistory?: readonly TradeHistoryItem[];
     transfers?: readonly TransferHistoryItem[];
     onCancelOrder?: (orderId: number) => Promise<void>;
+    onCancelAllOrders?: () => Promise<void>;
     onAmendOrder?: (orderId: number, fields: {
         quantity?: number;
         price?: number;
@@ -905,7 +906,7 @@ type PortfolioActivityPanelProps = {
     className?: string;
     style?: React.CSSProperties;
 };
-declare function PortfolioActivityPanel({ positions, showPositionsTab, onPositionClick, onClosePosition, offeringOrders, openOrders, orderHistory, tradeHistory, transfers, onCancelOrder, onAmendOrder, cancellingOrderId, defaultTab, pageSize, blockExplorerBaseUrl, className, style, }: PortfolioActivityPanelProps): react_jsx_runtime.JSX.Element;
+declare function PortfolioActivityPanel({ positions, showPositionsTab, onPositionClick, onClosePosition, offeringOrders, openOrders, orderHistory, tradeHistory, transfers, onCancelOrder, onCancelAllOrders, onAmendOrder, cancellingOrderId, defaultTab, pageSize, blockExplorerBaseUrl, className, style, }: PortfolioActivityPanelProps): react_jsx_runtime.JSX.Element;
 
 type SelectorItem = {
     readonly tokenName: string;

package/dist/index.js

@@ -2214,23 +2214,20 @@ function DesktopOrderbookLayout({
             ))
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             ref: midRef,
-            className: "grid grid-cols-2 items-center gap-3 bg-[#0b1a24] px-3 py-2 flex-shrink-0",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-lg font-semibold tabular-nums", midClass), children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 110, height: 20 }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                "$",
-                formatNumber(midPrice, precision),
-                midChangePercent == null ? null : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("ml-2 text-sm font-semibold tabular-nums", midClass), children: [
-                  midChangePercent >= 0 ? "+" : "",
-                  midChangePercent.toFixed(2),
-                  "%"
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", {})
-            ]
+            className: "flex items-center gap-2 bg-[#0b1a24] px-3 py-2 flex-shrink-0",
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-lg font-semibold tabular-nums whitespace-nowrap", midClass), children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 110, height: 20 }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              "$",
+              formatNumber(midPrice, precision),
+              midChangePercent == null ? null : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("ml-2 text-sm font-semibold tabular-nums", midClass), children: [
+                midChangePercent >= 0 ? "+" : "",
+                midChangePercent.toFixed(2),
+                "%"
+              ] })
+            ] }) })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -13722,6 +13719,7 @@ function PortfolioActivityPanel({
   tradeHistory = [],
   transfers = [],
   onCancelOrder,
+  onCancelAllOrders,
   onAmendOrder,
   cancellingOrderId = null,
   defaultTab,
@@ -13734,6 +13732,8 @@ function PortfolioActivityPanel({
   const [activeTab, setActiveTab] = React5.useState(resolvedDefaultTab);
   const [activityPage, setActivityPage] = React5.useState(0);
   const [pendingCancelOrderId, setPendingCancelOrderId] = React5.useState(null);
+  const [cancelAllConfirmOpen, setCancelAllConfirmOpen] = React5.useState(false);
+  const [cancellingAll, setCancellingAll] = React5.useState(false);
   const [closeAllOpen, setCloseAllOpen] = React5.useState(false);
   const [closeAllType, setCloseAllType] = React5.useState("market");
   const [posSortKey, setPosSortKey] = React5.useState("asset");
@@ -13973,6 +13973,7 @@ function PortfolioActivityPanel({
     activeTab === "open-orders" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       openOrders.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: "Open orders will appear here while they are working in the market." }),
       openOrders.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        onCancelAllOrders && openOrdersCount > 1 && /* @__PURE__ */ jsxRuntime.jsx(CancelAllRow, { children: /* @__PURE__ */ jsxRuntime.jsx(CancelAllBtn, { type: "button", disabled: cancellingAll, onClick: () => setCancelAllConfirmOpen(true), children: "Cancel All" }) }),
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Asset" }),
           /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Side" }),
@@ -14122,6 +14123,36 @@ function PortfolioActivityPanel({
         }
       )
     ] }),
+    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);
+                }
+              }
+              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." }),
@@ -14397,6 +14428,33 @@ var CancelButton = styled9__default.default.button`
     cursor: not-allowed;
   }
 `;
+var CancelAllRow = styled9__default.default.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 0.4rem;
+`;
+var CancelAllBtn = styled9__default.default.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__default.default.div`
   display: grid;
   grid-template-columns: ${(p) => p.$columns};