@loafmarkets/ui 0.1.411 → 0.1.413

package/dist/index.mjs

@@ -15097,6 +15097,9 @@ var STATUS_COLOR2 = {
   CLOSED: "#848e9c",
   CANCELLED: "#f6465d"
 };
+var STUCK_SETTLING_MS = 7e3;
+var SETTLING_MESSAGE = "Trade settling on-chain";
+var STUCK_SETTLING_MESSAGE = "Attention: Trade taking longer than usual to settle on chain. Please wait up to 10 seconds before trading. This is reflected in your locked balance.";
 var settlingSpin = keyframes`
   to { transform: rotate(360deg); }
 `;
@@ -15110,41 +15113,55 @@ var SettlingSpinner = styled10.span`
   animation: ${settlingSpin} 0.7s linear infinite;
   flex-shrink: 0;
 `;
+var StuckSettlingGlyph = styled10.span`
+  display: inline-block;
+  font-size: 11px;
+  line-height: 1;
+  flex-shrink: 0;
+`;
 var SettlingTip = styled10.span`
   position: relative;
   display: inline-flex;
   align-items: center;
   cursor: help;
-  &::after {
-    content: 'Trade settling on-chain';
-    position: absolute;
-    left: 50%;
-    bottom: calc(100% + 8px);
-    transform: translateX(-50%) translateY(3px);
-    padding: 6px 8px;
-    background: rgba(20, 22, 28, 0.97);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 6px;
-    color: rgba(255, 255, 255, 0.78);
-    font-size: 0.66rem;
-    font-weight: 400;
-    line-height: 1.3;
-    letter-spacing: normal;
-    text-transform: none;
-    white-space: nowrap;
-    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.15s ease, transform 0.15s ease;
-    pointer-events: none;
-    z-index: 2000;
-  }
-  &:hover::after {
+`;
+var SettlingTipBubble = styled10.span`
+  position: absolute;
+  bottom: calc(100% + 8px);
+  /* Stuck copy is a paragraph, so it anchors to the icon's left edge instead of
+     centring — centred it would hang off the left of the row. */
+  left: ${(p) => p.$stuck ? "0" : "50%"};
+  transform: ${(p) => p.$stuck ? "translateX(0)" : "translateX(-50%)"} translateY(3px);
+  width: ${(p) => p.$stuck ? "224px" : "auto"};
+  white-space: ${(p) => p.$stuck ? "normal" : "nowrap"};
+  padding: 6px 8px;
+  background: rgba(20, 22, 28, 0.97);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  color: rgba(255, 255, 255, 0.78);
+  font-size: 0.66rem;
+  font-weight: 400;
+  line-height: 1.35;
+  letter-spacing: normal;
+  text-transform: none;
+  text-align: left;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  pointer-events: none;
+  z-index: 2000;
+
+  ${SettlingTip}:hover & {
     opacity: 1;
     visibility: visible;
-    transform: translateX(-50%) translateY(0);
+    transform: ${(p) => p.$stuck ? "translateX(0)" : "translateX(-50%)"} translateY(0);
   }
 `;
+var SettlingIndicator = ({ stuck, style }) => /* @__PURE__ */ jsxs(SettlingTip, { role: "img", "aria-label": stuck ? "Settlement delayed" : SETTLING_MESSAGE, style, children: [
+  stuck ? /* @__PURE__ */ jsx(StuckSettlingGlyph, { "aria-hidden": "true", children: "\u26A0\uFE0F" }) : /* @__PURE__ */ jsx(SettlingSpinner, { "aria-hidden": "true" }),
+  /* @__PURE__ */ jsx(SettlingTipBubble, { $stuck: stuck, children: stuck ? STUCK_SETTLING_MESSAGE : SETTLING_MESSAGE })
+] });
 var ACTIVITY_PAGE_SIZE_DEFAULT = 8;
 var formatCurrency4 = (value, opts) => {
   const min = opts?.minimumFractionDigits ?? 2;
@@ -15152,14 +15169,21 @@ var formatCurrency4 = (value, opts) => {
   return `$${value.toLocaleString("en-US", { minimumFractionDigits: min, maximumFractionDigits: max })}`;
 };
 var formatNumber2 = (value, maximumFractionDigits = 2) => value.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits });
+var toMillis = (unix) => {
+  if (unix > 1e18) return Math.floor(unix / 1e6);
+  if (unix > 1e14) return Math.floor(unix / 1e3);
+  if (unix > 1e12) return unix;
+  return unix * 1e3;
+};
+var SETTLED_TRADE_STATUSES = ["SETTLED", "CONFIRMED", "FILLED", "ALLOCATED"];
+var FAILED_TRADE_STATUSES = ["SETTLEMENT_FAILED", "REJECTED", "CANCELLED", "CANCELED"];
+var tradeIsSettling = (status) => {
+  const s = status?.toUpperCase();
+  return !!s && !SETTLED_TRADE_STATUSES.includes(s) && !FAILED_TRADE_STATUSES.includes(s);
+};
 var formatTimestamp = (unix) => {
   if (!unix) return "\u2014";
-  let sec;
-  if (unix > 1e18) sec = Math.floor(unix / 1e9);
-  else if (unix > 1e14) sec = Math.floor(unix / 1e6);
-  else if (unix > 1e12) sec = Math.floor(unix / 1e3);
-  else sec = unix;
-  return new Date(sec * 1e3).toLocaleString("en-AU", {
+  return new Date(toMillis(unix)).toLocaleString("en-AU", {
     day: "2-digit",
     month: "short",
     hour: "2-digit",
@@ -15197,6 +15221,7 @@ function PortfolioActivityPanel({
   onSharePosition,
   onAssetClick,
   onClosePosition,
+  onCloseAllPositions,
   offeringOrders = [],
   openOrders = [],
   orderHistory = [],
@@ -15221,6 +15246,42 @@ function PortfolioActivityPanel({
   const [cancellingAll, setCancellingAll] = useState(false);
   const [closeAllOpen, setCloseAllOpen] = useState(false);
   const [closeAllType, setCloseAllType] = useState("market");
+  const [closingAll, setClosingAll] = useState(false);
+  const settlingPositionIds = positions.filter((p) => p.settling).map((p) => p.propertyId);
+  const settlingKey = settlingPositionIds.join(",");
+  const settlingTradeStartByProperty = /* @__PURE__ */ new Map();
+  const settlingTradeDeadlines = [];
+  for (const trade of tradeHistory) {
+    if (!tradeIsSettling(trade.status)) continue;
+    const startedAt = toMillis(trade.executedAt);
+    settlingTradeDeadlines.push(startedAt + STUCK_SETTLING_MS);
+    const earliest = settlingTradeStartByProperty.get(trade.propertyId);
+    if (earliest === void 0 || startedAt < earliest) settlingTradeStartByProperty.set(trade.propertyId, startedAt);
+  }
+  const tradeDeadlineKey = settlingTradeDeadlines.join(",");
+  const settlingSinceRef = useRef(/* @__PURE__ */ new Map());
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const since = settlingSinceRef.current;
+    const seenAt = Date.now();
+    for (const id of settlingPositionIds) if (!since.has(id)) since.set(id, seenAt);
+    for (const id of [...since.keys()]) if (!settlingPositionIds.includes(id)) since.delete(id);
+    setNow(seenAt);
+  }, [settlingKey]);
+  const positionSettlingStart = (propertyId) => settlingTradeStartByProperty.get(propertyId) ?? settlingSinceRef.current.get(propertyId) ?? now;
+  useEffect(() => {
+    const pending = [
+      ...settlingPositionIds.map((id) => positionSettlingStart(id) + STUCK_SETTLING_MS),
+      ...settlingTradeDeadlines
+    ].filter((deadline) => deadline > now);
+    if (pending.length === 0) return;
+    const delay = Math.min(Math.min(...pending) - now + 50, 2147483647);
+    const timer = setTimeout(() => setNow(Date.now()), delay);
+    return () => clearTimeout(timer);
+  }, [settlingKey, tradeDeadlineKey, now]);
+  const isPositionStuck = (pos) => !!pos.settling && now - positionSettlingStart(pos.propertyId) >= STUCK_SETTLING_MS;
+  const isTradeStuck = (trade) => now - toMillis(trade.executedAt) >= STUCK_SETTLING_MS;
+  const hasPositionActions = !!(onClosePosition || onSharePosition || onCloseAllPositions);
   const [posSortKey, setPosSortKey] = useState("asset");
   const [posSortAsc, setPosSortAsc] = useState(true);
   const handlePosSort = (key) => {
@@ -15399,7 +15460,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",
@@ -15455,7 +15515,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) => {
@@ -15475,7 +15535,7 @@ function PortfolioActivityPanel({
                   /* @__PURE__ */ jsx(CCellLabel, { children: "Asset" }),
                   /* @__PURE__ */ jsxs(CAssetName, { children: [
                     pos.tokenName,
-                    pos.settling && /* @__PURE__ */ jsx(SettlingTip, { style: { marginLeft: 6 }, children: /* @__PURE__ */ jsx(SettlingSpinner, {}) })
+                    pos.settling && /* @__PURE__ */ jsx(SettlingIndicator, { stuck: isPositionStuck(pos), style: { marginLeft: 6 } })
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxs(CUnitsCell, { children: [
@@ -15531,7 +15591,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")
@@ -15556,7 +15616,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;
@@ -15564,10 +15624,10 @@ 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, {}) })
+                pos.settling && /* @__PURE__ */ jsx(SettlingIndicator, { stuck: isPositionStuck(pos) })
               ] }) }),
               /* @__PURE__ */ jsx(PositionsCell, { children: /* @__PURE__ */ jsxs("span", { style: { color: "#fff", fontSize: "0.8rem" }, children: [
                 formatNumber2(pos.totalQuantity),
@@ -15611,11 +15671,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" })
@@ -15624,14 +15688,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
         )
@@ -15936,7 +16008,8 @@ function PortfolioActivityPanel({
           const s = trade.status?.toUpperCase();
           const isSettled = s === "SETTLED" || s === "CONFIRMED" || s === "FILLED" || s === "ALLOCATED";
           const isFailed = s === "SETTLEMENT_FAILED" || s === "REJECTED" || s === "CANCELLED" || s === "CANCELED";
-          const isSettling = !isSettled && !isFailed && !!trade.status;
+          const isSettling = tradeIsSettling(trade.status);
+          const stuckSettling = isSettling && isTradeStuck(trade);
           const settlementLabel = isSettled ? "Settled" : isFailed ? "Settlement Failed" : isSettling ? prettyLabel(trade.status) : "\u2014";
           const settlementMeta = isSettled ? { color: "#0ecb81", bg: "rgba(14,203,129,0.1)" } : isFailed ? { color: "#f6465d", bg: "rgba(246,70,93,0.12)" } : isSettling ? { color: "#E6C87E", bg: "rgba(240,185,11,0.15)" } : null;
           const sideColor = sideLabel(trade.side) === "Buy" ? "#0ecb81" : "#f6465d";
@@ -15979,7 +16052,10 @@ function PortfolioActivityPanel({
               ] }),
               /* @__PURE__ */ jsxs(CDetailItem, { children: [
                 /* @__PURE__ */ jsx(CDLabel, { children: "Settlement" }),
-                /* @__PURE__ */ jsx(CDValue, { children: settlementMeta ? /* @__PURE__ */ jsx(ActivityTag, { $color: settlementMeta.color, $bg: settlementMeta.bg, children: settlementLabel }) : "\u2014" })
+                /* @__PURE__ */ jsxs(CDValue, { children: [
+                  settlementMeta ? /* @__PURE__ */ jsx(ActivityTag, { $color: settlementMeta.color, $bg: settlementMeta.bg, children: settlementLabel }) : "\u2014",
+                  stuckSettling && /* @__PURE__ */ jsx(SettlingIndicator, { stuck: true, style: { marginLeft: 6 } })
+                ] })
               ] }),
               /* @__PURE__ */ jsxs(CDetailItem, { children: [
                 /* @__PURE__ */ jsx(CDLabel, { children: "Date" }),
@@ -16004,7 +16080,8 @@ function PortfolioActivityPanel({
             const s = trade.status?.toUpperCase();
             const isSettled = s === "SETTLED" || s === "CONFIRMED" || s === "FILLED" || s === "ALLOCATED";
             const isFailed = s === "SETTLEMENT_FAILED" || s === "REJECTED" || s === "CANCELLED" || s === "CANCELED";
-            const isSettling = !isSettled && !isFailed && !!trade.status;
+            const isSettling = tradeIsSettling(trade.status);
+            const stuckSettling = isSettling && isTradeStuck(trade);
             const settlementLabel = isSettled ? "Settled" : isFailed ? "Settlement Failed" : isSettling ? prettyLabel(trade.status) : "\u2014";
             const settlementMeta = isSettled ? { color: "#0ecb81", bg: "rgba(14,203,129,0.1)" } : isFailed ? { color: "#f6465d", bg: "rgba(246,70,93,0.12)" } : isSettling ? { color: "#E6C87E", bg: "rgba(240,185,11,0.15)" } : null;
             const sideColor = sideLabel(trade.side) === "Buy" ? "#0ecb81" : "#f6465d";
@@ -16021,7 +16098,10 @@ function PortfolioActivityPanel({
               ] }) }),
               /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { children: formatCurrency4(trade.price) }) }),
               /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { children: formatCurrency4(trade.price * trade.quantity) }) }),
-              /* @__PURE__ */ jsx(GridCell, { children: settlementMeta ? /* @__PURE__ */ jsx(ActivityTag, { $color: settlementMeta.color, $bg: settlementMeta.bg, children: settlementLabel }) : /* @__PURE__ */ jsx(CellText, { $muted: true, children: "\u2014" }) }),
+              /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: "0.35rem" }, children: [
+                settlementMeta ? /* @__PURE__ */ jsx(ActivityTag, { $color: settlementMeta.color, $bg: settlementMeta.bg, children: settlementLabel }) : /* @__PURE__ */ jsx(CellText, { $muted: true, children: "\u2014" }),
+                stuckSettling && /* @__PURE__ */ jsx(SettlingIndicator, { stuck: true })
+              ] }) }),
               /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: formatTimestamp(trade.executedAt) }) }),
               /* @__PURE__ */ jsx(GridCell, { children: trade.txHash && /* @__PURE__ */ jsx(TxLink, { href: `${_blockExplorerBaseUrl}/${trade.txHash}`, target: "_blank", rel: "noopener noreferrer", title: "View on Arbiscan", children: /* @__PURE__ */ jsxs("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
                 /* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
@@ -16190,17 +16270,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;
@@ -16653,9 +16722,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;