@loafmarkets/ui 0.1.410 → 0.1.412

package/dist/index.mjs

@@ -1615,12 +1615,23 @@ var StatusDot = styled10.span`
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: #0ecb81;
   flex-shrink: 0;
-  animation: ${breathe} 3s ease-in-out infinite;
+
+  ${({ $state }) => $state === "active" ? css`
+          background: #0ecb81;
+          animation: ${breathe} 3s ease-in-out infinite;
+        ` : $state === "reduced" ? css`
+            background: #e6c87e;
+            box-shadow: 0 0 4px rgba(240, 185, 11, 0.4);
+          ` : $state === "free" ? css`
+              background: #f6465d;
+              box-shadow: 0 0 4px rgba(246, 70, 93, 0.4);
+            ` : css`
+              background: rgba(255, 255, 255, 0.3);
+            `}
 `;
 var LoafLiquidityBadge = React5.forwardRef(
-  ({ className, isGlowing, onClick, children, ...props }, ref) => {
+  ({ className, isGlowing, status = "unknown", onClick, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       LogoContainer,
       {
@@ -1631,11 +1642,11 @@ var LoafLiquidityBadge = React5.forwardRef(
         role: onClick ? "button" : void 0,
         ...props,
         children: [
-          /* @__PURE__ */ jsxs(LogoText, { children: [
+          /* @__PURE__ */ jsxs(LogoText, { className: "loaf-ll-label", children: [
             /* @__PURE__ */ jsx(LoafLogoImage, { src: Loaf_logo_Banner_default, alt: "Loaf" }),
             /* @__PURE__ */ jsx(LiquidityText, { children: children ?? "Liquidity" })
           ] }),
-          /* @__PURE__ */ jsx(StatusDot, {})
+          /* @__PURE__ */ jsx(StatusDot, { $state: status, "data-liquidity": status })
         ]
       }
     );
@@ -1882,13 +1893,21 @@ var Orderbook = React5.forwardRef(
     isLoading = false,
     onPriceClick,
     onLoafLiquidityClick,
+    liquidityStatus,
     tradeExplorerUrl,
     maxLevels,
     fillHeight = false,
     className,
     ...props
   }, ref) => {
-    const resolvedRightHeader = rightHeader ?? /* @__PURE__ */ jsx(LoafLiquidityBadge, { className: "text-[0.6rem] orderbook-ll-badge", onClick: onLoafLiquidityClick });
+    const resolvedRightHeader = rightHeader ?? /* @__PURE__ */ jsx(
+      LoafLiquidityBadge,
+      {
+        className: "text-[0.6rem] orderbook-ll-badge",
+        onClick: onLoafLiquidityClick,
+        status: liquidityStatus
+      }
+    );
     const [tab, setTabState] = React5.useState(defaultTab);
     const setTab = setTabState;
     const effectiveTab = showTradesTab ? tab : "orderbook";
@@ -15178,6 +15197,7 @@ function PortfolioActivityPanel({
   onSharePosition,
   onAssetClick,
   onClosePosition,
+  onCloseAllPositions,
   offeringOrders = [],
   openOrders = [],
   orderHistory = [],
@@ -15202,6 +15222,8 @@ function PortfolioActivityPanel({
   const [cancellingAll, setCancellingAll] = useState(false);
   const [closeAllOpen, setCloseAllOpen] = useState(false);
   const [closeAllType, setCloseAllType] = useState("market");
+  const [closingAll, setClosingAll] = useState(false);
+  const hasPositionActions = !!(onClosePosition || onSharePosition || onCloseAllPositions);
   const [posSortKey, setPosSortKey] = useState("asset");
   const [posSortAsc, setPosSortAsc] = useState(true);
   const handlePosSort = (key) => {
@@ -15380,7 +15402,6 @@ function PortfolioActivityPanel({
   const pagedTradeHistory = sortedTradeHistory.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
   const pagedTransfers = sortedTransfers.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
   return /* @__PURE__ */ jsxs(Container2, { className, style, children: [
-    /* @__PURE__ */ jsx(PanelTitle, { children: "Activity" }),
     /* @__PURE__ */ jsxs(TabContainer, { children: [
       showPositionsTab && /* @__PURE__ */ jsxs(Tab, { $active: activeTab === "positions", onClick: () => handleTabChange("positions"), children: [
         "Trading Positions",
@@ -15436,7 +15457,7 @@ function PortfolioActivityPanel({
             ] }),
             /* @__PURE__ */ jsxs(CToolbarActions, { children: [
               /* @__PURE__ */ jsx(CToolbarLink, { onClick: toggleExpandAll, children: allExpanded ? "Collapse All" : "Expand All" }),
-              onClosePosition && /* @__PURE__ */ jsx(CToolbarLink, { onClick: () => setCloseAllOpen(true), children: "Sell All" })
+              onCloseAllPositions && /* @__PURE__ */ jsx(CToolbarLink, { onClick: () => setCloseAllOpen(true), children: "Sell All" })
             ] })
           ] }),
           sortedPositions.map((pos) => {
@@ -15512,7 +15533,7 @@ function PortfolioActivityPanel({
           })
         ] }),
         positions.length > 0 && !compactPositions && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(PositionsHeader, { $hasClose: !!(onClosePosition || onSharePosition), children: [
+          /* @__PURE__ */ jsxs(PositionsHeader, { $hasClose: hasPositionActions, children: [
             /* @__PURE__ */ jsxs(SortableHeaderCell, { $active: posSortKey === "asset", onClick: () => handlePosSort("asset"), children: [
               "Asset ",
               posSortKey === "asset" && (posSortAsc ? "\u2191" : "\u2193")
@@ -15537,7 +15558,7 @@ function PortfolioActivityPanel({
               "PNL (%) ",
               posSortKey === "pnl" && (posSortAsc ? "\u2191" : "\u2193")
             ] }),
-            onClosePosition && /* @__PURE__ */ jsx(PositionsHeaderCell, { children: /* @__PURE__ */ jsx(CloseAllHeaderBtn, { onClick: () => setCloseAllOpen(true), children: "Sell All" }) })
+            onCloseAllPositions && /* @__PURE__ */ jsx(PositionsHeaderCell, { children: /* @__PURE__ */ jsx(CloseAllHeaderBtn, { onClick: () => setCloseAllOpen(true), children: "Sell All" }) })
           ] }),
           sortedPositions.map((pos) => {
             const currentValue = pos.totalQuantity * pos.marketPrice;
@@ -15545,7 +15566,7 @@ function PortfolioActivityPanel({
             const pnl = pos.propertyPnl ?? currentValue - costBasis;
             const pnlPercent = pos.propertyPnlPercent ?? pos.percentChange ?? 0;
             const isPositive = pnl >= 0;
-            return /* @__PURE__ */ jsxs(PositionsRow, { $hasClose: !!(onClosePosition || onSharePosition), children: [
+            return /* @__PURE__ */ jsxs(PositionsRow, { $hasClose: hasPositionActions, children: [
               /* @__PURE__ */ jsx(PositionsCell, { children: /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
                 /* @__PURE__ */ jsx(HoldingsPropertyLink, { onClick: () => onPositionClick?.(pos.tokenName, pos.isIpoAllocation), children: pos.tokenName }),
                 pos.settling && /* @__PURE__ */ jsx(SettlingTip, { children: /* @__PURE__ */ jsx(SettlingSpinner, {}) })
@@ -15592,11 +15613,15 @@ function PortfolioActivityPanel({
             ] }, pos.tokenName);
           })
         ] }),
-        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" }),
+        positions.length > 0 && closeAllOpen && onCloseAllPositions && typeof document !== "undefined" && createPortal(
+          /* @__PURE__ */ jsx(CloseAllOverlay, { onClick: () => {
+            if (!closingAll) setCloseAllOpen(false);
+          }, children: /* @__PURE__ */ jsxs(CloseAllModal, { onClick: (e) => e.stopPropagation(), children: [
+            /* @__PURE__ */ jsx(CloseAllModalX, { onClick: () => {
+              if (!closingAll) 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__ */ jsx(CloseAllDesc, { children: "This places a sell order for every position you hold, one at a time." }),
             /* @__PURE__ */ jsxs(CloseAllOption, { onClick: () => setCloseAllType("market"), children: [
               /* @__PURE__ */ jsx(CloseAllRadio, { $selected: closeAllType === "market" }),
               /* @__PURE__ */ jsx("span", { children: "Market Sell" })
@@ -15605,14 +15630,22 @@ function PortfolioActivityPanel({
               /* @__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"
-            ] })
+            /* @__PURE__ */ jsx(
+              CloseAllConfirmBtn,
+              {
+                disabled: closingAll,
+                onClick: async () => {
+                  setClosingAll(true);
+                  try {
+                    await onCloseAllPositions(closeAllType);
+                  } finally {
+                    setClosingAll(false);
+                    setCloseAllOpen(false);
+                  }
+                },
+                children: closingAll ? "Selling\u2026" : `Confirm ${closeAllType === "market" ? "Market" : "Limit"} Sell`
+              }
+            )
           ] }) }),
           document.body
         )
@@ -16171,17 +16204,6 @@ var ContentScroll = styled10.div`
   &::-webkit-scrollbar-track { background: transparent; }
   &::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }
 `;
-var PanelTitle = styled10.h3`
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--color-text, #fff);
-  margin: 0 0 0.75rem;
-  padding-left: 1rem;
-  /* Redundant on mobile — the tab row already says what this is. Reclaim the space. */
-  @media (max-width: 768px) {
-    display: none;
-  }
-`;
 var TabContainer = styled10.div`
   display: flex;
   gap: 0;
@@ -16634,9 +16656,14 @@ var CloseAllConfirmBtn = styled10.button`
   cursor: pointer;
   transition: all 0.15s ease;
 
-  &:hover {
+  &:hover:not(:disabled) {
     background: rgba(246, 70, 93, 0.25);
   }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 `;
 var CToolbar = styled10.div`
   display: flex;