@loafmarkets/ui 0.1.431 → 0.1.433

package/dist/index.js

@@ -16720,6 +16720,23 @@ var sideLabel = (side) => side?.toUpperCase() === "SELL" ? "Sell" : "Buy";
 var isLiveOrder = (o) => o.status === "OPEN" || o.status === "PARTIALLY_FILLED" || o.status === "PENDING" || o.status === "ARMED";
 var isMarketType = (type) => type === "MARKET" || type.endsWith("_MARKET");
 var filledLabel = (order) => order.filledQuantity == null ? "\u2014" : `${order.quantity > 0 ? Math.round(order.filledQuantity / order.quantity * 100) : 0}%`;
+var ReasonMarker = styled10__default.default.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.95rem;
+  height: 0.95rem;
+  margin-left: 0.3rem;
+  border: 1px solid rgba(246, 70, 93, 0.5);
+  border-radius: 50%;
+  color: #f6465d;
+  font-size: 0.6rem;
+  font-style: italic;
+  font-weight: 600;
+  line-height: 1;
+  cursor: help;
+  flex-shrink: 0;
+`;
 var TriggerText = styled10__default.default.span`
   display: block;
   font-size: 0.68rem;
@@ -17303,7 +17320,7 @@ function PortfolioActivityPanel({
               /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { children: formatCurrency4(order.price * order.quantity) }) }),
               /* @__PURE__ */ jsxRuntime.jsxs(GridCell, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(ActivityTag, { $color: meta.color, $bg: meta.bg, title: order.status === "REJECTED" && order.rejectionReason ? order.rejectionReason : void 0, children: prettyLabel(order.status) }),
-                order.rejectionReason && /* @__PURE__ */ jsxRuntime.jsx(CellText, { $muted: true, style: { fontSize: "0.62rem", marginTop: "0.2rem", maxWidth: "120px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, title: order.rejectionReason, children: order.rejectionReason })
+                order.rejectionReason && /* @__PURE__ */ jsxRuntime.jsx(ReasonMarker, { title: order.rejectionReason, "aria-label": "Why this order failed", children: "i" })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $muted: true, children: formatTimestamp(order.createdAt) }) }),
               /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: order.txHash && /* @__PURE__ */ jsxRuntime.jsx(TxLink, { href: `${_blockExplorerBaseUrl}/${order.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: [
@@ -17387,7 +17404,7 @@ function PortfolioActivityPanel({
               ] })
             ] }, `open-${order.id}`);
           }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(GridHeader, { $columns: onCancelOrder ? "0.5fr 1.2fr 0.6fr 0.7fr 0.8fr 1fr 0.8fr 0.8fr 82px" : "0.5fr 1.2fr 0.6fr 0.7fr 0.8fr 1fr 0.8fr 0.8fr", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(GridHeader, { $columns: onCancelOrder ? "0.45fr 1.05fr 0.55fr 1fr 0.8fr 1.1fr 0.7fr 0.85fr 82px" : "0.45fr 1.05fr 0.55fr 1fr 0.8fr 1.1fr 0.7fr 0.85fr", children: [
               /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "ID" }),
               /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Asset" }),
               /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Side" }),
@@ -17404,7 +17421,7 @@ function PortfolioActivityPanel({
               const filledPercent = filledLabel(order);
               const isCancelling = cancellingOrderId === order.id;
               const sideColor = sideLabel(order.side) === "Buy" ? "#0ecb81" : "#f6465d";
-              return /* @__PURE__ */ jsxRuntime.jsxs(GridRow, { $columns: onCancelOrder ? "0.5fr 1.2fr 0.6fr 0.7fr 0.8fr 1fr 0.8fr 0.8fr 82px" : "0.5fr 1.2fr 0.6fr 0.7fr 0.8fr 1fr 0.8fr 0.8fr", children: [
+              return /* @__PURE__ */ jsxRuntime.jsxs(GridRow, { $columns: onCancelOrder ? "0.45fr 1.05fr 0.55fr 1fr 0.8fr 1.1fr 0.7fr 0.85fr 82px" : "0.45fr 1.05fr 0.55fr 1fr 0.8fr 1.1fr 0.7fr 0.85fr", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $muted: true, children: order.id > 0 ? `#${order.id}` : "\u2014" }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $primary: true, $color: sideColor, $noHoverColor: true, $clickable: !!onAssetClick, onClick: onAssetClick ? () => onAssetClick(order.tokenName) : void 0, children: order.tokenName }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(SideBadge, { $side: sideLabel(order.side), children: sideLabel(order.side) }) }),
@@ -17413,7 +17430,7 @@ function PortfolioActivityPanel({
                   formatNumber2(order.quantity),
                   order.ticker && /* @__PURE__ */ jsxRuntime.jsx(TickerTag, { children: order.ticker.toUpperCase() })
                 ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsxs(GridCell, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(GridCell, { $stack: order.triggerPrice != null, children: [
                   /* @__PURE__ */ jsxRuntime.jsx(CellText, { children: isMarket || !order.price ? "Market" : formatCurrency4(order.price) }),
                   order.triggerPrice != null && /* @__PURE__ */ jsxRuntime.jsxs(TriggerText, { children: [
                     "Trigger ",
@@ -17423,7 +17440,7 @@ function PortfolioActivityPanel({
                 /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $muted: true, children: filledPercent }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs(GridCell, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx(ActivityTag, { $color: meta.color, $bg: meta.bg, children: prettyLabel(order.status) }),
-                  order.triggerPrice != null && order.rejectionReason && /* @__PURE__ */ jsxRuntime.jsx(TriggerText, { title: order.rejectionReason, children: order.rejectionReason })
+                  order.triggerPrice != null && order.rejectionReason && /* @__PURE__ */ jsxRuntime.jsx(ReasonMarker, { title: order.rejectionReason, "aria-label": "Why this order failed", children: "i" })
                 ] }),
                 onCancelOrder && /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(
                   CancelButton,
@@ -17507,7 +17524,7 @@ function PortfolioActivityPanel({
           ] }, rowKey);
         }),
         mergedOrderHistory.length > 0 && !compactPositions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(GridHeader, { $columns: "0.5fr 1.2fr 0.6fr 0.7fr 0.8fr 1fr 0.8fr 0.8fr 1fr", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(GridHeader, { $columns: "0.45fr 1.05fr 0.55fr 1fr 0.8fr 1.1fr 0.7fr 0.85fr 1fr", children: [
             /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "ID" }),
             /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Asset" }),
             /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Side" }),
@@ -17524,7 +17541,7 @@ function PortfolioActivityPanel({
             const filledPercent = filledLabel(order);
             const typeLabel = order.isOfferingOrder ? "Initial Offering" : prettyLabel(order.type);
             const sideColor = sideLabel(order.side) === "Buy" ? "#0ecb81" : "#f6465d";
-            return /* @__PURE__ */ jsxRuntime.jsxs(GridRow, { $columns: "0.5fr 1.2fr 0.6fr 0.7fr 0.8fr 1fr 0.8fr 0.8fr 1fr", children: [
+            return /* @__PURE__ */ jsxRuntime.jsxs(GridRow, { $columns: "0.45fr 1.05fr 0.55fr 1fr 0.8fr 1.1fr 0.7fr 0.85fr 1fr", children: [
               /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $muted: true, children: order.id > 0 ? `#${order.id}` : "\u2014" }) }),
               /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $primary: true, $color: sideColor, $noHoverColor: true, $clickable: !!onAssetClick, onClick: onAssetClick ? () => onAssetClick(order.tokenName) : void 0, children: order.tokenName }) }),
               /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(SideBadge, { $side: sideLabel(order.side), children: sideLabel(order.side) }) }),
@@ -17533,7 +17550,7 @@ function PortfolioActivityPanel({
                 formatNumber2(order.quantity),
                 order.ticker && /* @__PURE__ */ jsxRuntime.jsx(TickerTag, { children: order.ticker.toUpperCase() })
               ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(GridCell, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(GridCell, { $stack: order.triggerPrice != null, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(CellText, { children: isMarket || !order.price ? "Market" : formatCurrency4(order.price) }),
                 order.triggerPrice != null && /* @__PURE__ */ jsxRuntime.jsxs(TriggerText, { children: [
                   "Trigger ",
@@ -17543,7 +17560,7 @@ function PortfolioActivityPanel({
               /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $muted: true, children: filledPercent }) }),
               /* @__PURE__ */ jsxRuntime.jsxs(GridCell, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(ActivityTag, { $color: meta.color, $bg: meta.bg, children: prettyLabel(order.status) }),
-                order.triggerPrice != null && order.rejectionReason && /* @__PURE__ */ jsxRuntime.jsx(TriggerText, { title: order.rejectionReason, children: order.rejectionReason })
+                order.triggerPrice != null && order.rejectionReason && /* @__PURE__ */ jsxRuntime.jsx(ReasonMarker, { title: order.rejectionReason, "aria-label": "Why this order failed", children: "i" })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $muted: true, children: formatTimestamp(order.createdAt) }) })
             ] }, order.id);
@@ -18016,7 +18033,9 @@ var GridRow = styled10__default.default.div`
 `;
 var GridCell = styled10__default.default.div`
   display: flex;
-  align-items: center;
+  align-items: ${(p) => p.$stack ? "flex-start" : "center"};
+  flex-direction: ${(p) => p.$stack ? "column" : "row"};
+  justify-content: center;
   min-width: 0;
 `;
 var CellText = styled10__default.default.span`