@loafmarkets/ui 0.1.412 → 0.1.413

package/dist/index.js

@@ -15122,6 +15122,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 = styled10.keyframes`
   to { transform: rotate(360deg); }
 `;
@@ -15135,41 +15138,55 @@ var SettlingSpinner = styled10__default.default.span`
   animation: ${settlingSpin} 0.7s linear infinite;
   flex-shrink: 0;
 `;
+var StuckSettlingGlyph = styled10__default.default.span`
+  display: inline-block;
+  font-size: 11px;
+  line-height: 1;
+  flex-shrink: 0;
+`;
 var SettlingTip = styled10__default.default.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__default.default.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__ */ jsxRuntime.jsxs(SettlingTip, { role: "img", "aria-label": stuck ? "Settlement delayed" : SETTLING_MESSAGE, style, children: [
+  stuck ? /* @__PURE__ */ jsxRuntime.jsx(StuckSettlingGlyph, { "aria-hidden": "true", children: "\u26A0\uFE0F" }) : /* @__PURE__ */ jsxRuntime.jsx(SettlingSpinner, { "aria-hidden": "true" }),
+  /* @__PURE__ */ jsxRuntime.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;
@@ -15177,14 +15194,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",
@@ -15248,6 +15272,40 @@ function PortfolioActivityPanel({
   const [closeAllOpen, setCloseAllOpen] = React5.useState(false);
   const [closeAllType, setCloseAllType] = React5.useState("market");
   const [closingAll, setClosingAll] = React5.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 = React5.useRef(/* @__PURE__ */ new Map());
+  const [now, setNow] = React5.useState(() => Date.now());
+  React5.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;
+  React5.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] = React5.useState("asset");
   const [posSortAsc, setPosSortAsc] = React5.useState(true);
@@ -15502,7 +15560,7 @@ function PortfolioActivityPanel({
                   /* @__PURE__ */ jsxRuntime.jsx(CCellLabel, { children: "Asset" }),
                   /* @__PURE__ */ jsxRuntime.jsxs(CAssetName, { children: [
                     pos.tokenName,
-                    pos.settling && /* @__PURE__ */ jsxRuntime.jsx(SettlingTip, { style: { marginLeft: 6 }, children: /* @__PURE__ */ jsxRuntime.jsx(SettlingSpinner, {}) })
+                    pos.settling && /* @__PURE__ */ jsxRuntime.jsx(SettlingIndicator, { stuck: isPositionStuck(pos), style: { marginLeft: 6 } })
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs(CUnitsCell, { children: [
@@ -15594,7 +15652,7 @@ function PortfolioActivityPanel({
             return /* @__PURE__ */ jsxRuntime.jsxs(PositionsRow, { $hasClose: hasPositionActions, children: [
               /* @__PURE__ */ jsxRuntime.jsx(PositionsCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(HoldingsPropertyLink, { onClick: () => onPositionClick?.(pos.tokenName, pos.isIpoAllocation), children: pos.tokenName }),
-                pos.settling && /* @__PURE__ */ jsxRuntime.jsx(SettlingTip, { children: /* @__PURE__ */ jsxRuntime.jsx(SettlingSpinner, {}) })
+                pos.settling && /* @__PURE__ */ jsxRuntime.jsx(SettlingIndicator, { stuck: isPositionStuck(pos) })
               ] }) }),
               /* @__PURE__ */ jsxRuntime.jsx(PositionsCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "#fff", fontSize: "0.8rem" }, children: [
                 formatNumber2(pos.totalQuantity),
@@ -15975,7 +16033,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";
@@ -16018,7 +16077,10 @@ function PortfolioActivityPanel({
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(CDetailItem, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(CDLabel, { children: "Settlement" }),
-                /* @__PURE__ */ jsxRuntime.jsx(CDValue, { children: settlementMeta ? /* @__PURE__ */ jsxRuntime.jsx(ActivityTag, { $color: settlementMeta.color, $bg: settlementMeta.bg, children: settlementLabel }) : "\u2014" })
+                /* @__PURE__ */ jsxRuntime.jsxs(CDValue, { children: [
+                  settlementMeta ? /* @__PURE__ */ jsxRuntime.jsx(ActivityTag, { $color: settlementMeta.color, $bg: settlementMeta.bg, children: settlementLabel }) : "\u2014",
+                  stuckSettling && /* @__PURE__ */ jsxRuntime.jsx(SettlingIndicator, { stuck: true, style: { marginLeft: 6 } })
+                ] })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(CDetailItem, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(CDLabel, { children: "Date" }),
@@ -16043,7 +16105,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";
@@ -16060,7 +16123,10 @@ function PortfolioActivityPanel({
               ] }) }),
               /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { children: formatCurrency4(trade.price) }) }),
               /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { children: formatCurrency4(trade.price * trade.quantity) }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: settlementMeta ? /* @__PURE__ */ jsxRuntime.jsx(ActivityTag, { $color: settlementMeta.color, $bg: settlementMeta.bg, children: settlementLabel }) : /* @__PURE__ */ jsxRuntime.jsx(CellText, { $muted: true, children: "\u2014" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: "0.35rem" }, children: [
+                settlementMeta ? /* @__PURE__ */ jsxRuntime.jsx(ActivityTag, { $color: settlementMeta.color, $bg: settlementMeta.bg, children: settlementLabel }) : /* @__PURE__ */ jsxRuntime.jsx(CellText, { $muted: true, children: "\u2014" }),
+                stuckSettling && /* @__PURE__ */ jsxRuntime.jsx(SettlingIndicator, { stuck: true })
+              ] }) }),
               /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $muted: true, children: formatTimestamp(trade.executedAt) }) }),
               /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: trade.txHash && /* @__PURE__ */ jsxRuntime.jsx(TxLink, { href: `${_blockExplorerBaseUrl}/${trade.txHash}`, target: "_blank", rel: "noopener noreferrer", title: "View on Arbiscan", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),