@loafmarkets/ui 0.1.431 → 0.1.432

package/dist/index.mjs

@@ -16695,6 +16695,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.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.span`
   display: block;
   font-size: 0.68rem;
@@ -17362,7 +17379,7 @@ function PortfolioActivityPanel({
               ] })
             ] }, `open-${order.id}`);
           }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ 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__ */ 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__ */ jsx(GridHeaderCell, { children: "ID" }),
               /* @__PURE__ */ jsx(GridHeaderCell, { children: "Asset" }),
               /* @__PURE__ */ jsx(GridHeaderCell, { children: "Side" }),
@@ -17379,7 +17396,7 @@ function PortfolioActivityPanel({
               const filledPercent = filledLabel(order);
               const isCancelling = cancellingOrderId === order.id;
               const sideColor = sideLabel(order.side) === "Buy" ? "#0ecb81" : "#f6465d";
-              return /* @__PURE__ */ 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__ */ 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__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: order.id > 0 ? `#${order.id}` : "\u2014" }) }),
                 /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $primary: true, $color: sideColor, $noHoverColor: true, $clickable: !!onAssetClick, onClick: onAssetClick ? () => onAssetClick(order.tokenName) : void 0, children: order.tokenName }) }),
                 /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(SideBadge, { $side: sideLabel(order.side), children: sideLabel(order.side) }) }),
@@ -17388,7 +17405,7 @@ function PortfolioActivityPanel({
                   formatNumber2(order.quantity),
                   order.ticker && /* @__PURE__ */ jsx(TickerTag, { children: order.ticker.toUpperCase() })
                 ] }) }),
-                /* @__PURE__ */ jsxs(GridCell, { children: [
+                /* @__PURE__ */ jsxs(GridCell, { $stack: order.triggerPrice != null, children: [
                   /* @__PURE__ */ jsx(CellText, { children: isMarket || !order.price ? "Market" : formatCurrency4(order.price) }),
                   order.triggerPrice != null && /* @__PURE__ */ jsxs(TriggerText, { children: [
                     "Trigger ",
@@ -17398,7 +17415,7 @@ function PortfolioActivityPanel({
                 /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: filledPercent }) }),
                 /* @__PURE__ */ jsxs(GridCell, { children: [
                   /* @__PURE__ */ jsx(ActivityTag, { $color: meta.color, $bg: meta.bg, children: prettyLabel(order.status) }),
-                  order.triggerPrice != null && order.rejectionReason && /* @__PURE__ */ jsx(TriggerText, { title: order.rejectionReason, children: order.rejectionReason })
+                  order.triggerPrice != null && order.rejectionReason && /* @__PURE__ */ jsx(ReasonMarker, { title: order.rejectionReason, "aria-label": "Why this order failed", children: "i" })
                 ] }),
                 onCancelOrder && /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(
                   CancelButton,
@@ -17482,7 +17499,7 @@ function PortfolioActivityPanel({
           ] }, rowKey);
         }),
         mergedOrderHistory.length > 0 && !compactPositions && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(GridHeader, { $columns: "0.5fr 1.2fr 0.6fr 0.7fr 0.8fr 1fr 0.8fr 0.8fr 1fr", children: [
+          /* @__PURE__ */ jsxs(GridHeader, { $columns: "0.45fr 1.05fr 0.55fr 1fr 0.8fr 1.1fr 0.7fr 0.85fr 1fr", children: [
             /* @__PURE__ */ jsx(GridHeaderCell, { children: "ID" }),
             /* @__PURE__ */ jsx(GridHeaderCell, { children: "Asset" }),
             /* @__PURE__ */ jsx(GridHeaderCell, { children: "Side" }),
@@ -17499,7 +17516,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__ */ jsxs(GridRow, { $columns: "0.5fr 1.2fr 0.6fr 0.7fr 0.8fr 1fr 0.8fr 0.8fr 1fr", children: [
+            return /* @__PURE__ */ jsxs(GridRow, { $columns: "0.45fr 1.05fr 0.55fr 1fr 0.8fr 1.1fr 0.7fr 0.85fr 1fr", children: [
               /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: order.id > 0 ? `#${order.id}` : "\u2014" }) }),
               /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $primary: true, $color: sideColor, $noHoverColor: true, $clickable: !!onAssetClick, onClick: onAssetClick ? () => onAssetClick(order.tokenName) : void 0, children: order.tokenName }) }),
               /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(SideBadge, { $side: sideLabel(order.side), children: sideLabel(order.side) }) }),
@@ -17508,7 +17525,7 @@ function PortfolioActivityPanel({
                 formatNumber2(order.quantity),
                 order.ticker && /* @__PURE__ */ jsx(TickerTag, { children: order.ticker.toUpperCase() })
               ] }) }),
-              /* @__PURE__ */ jsxs(GridCell, { children: [
+              /* @__PURE__ */ jsxs(GridCell, { $stack: order.triggerPrice != null, children: [
                 /* @__PURE__ */ jsx(CellText, { children: isMarket || !order.price ? "Market" : formatCurrency4(order.price) }),
                 order.triggerPrice != null && /* @__PURE__ */ jsxs(TriggerText, { children: [
                   "Trigger ",
@@ -17518,7 +17535,7 @@ function PortfolioActivityPanel({
               /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: filledPercent }) }),
               /* @__PURE__ */ jsxs(GridCell, { children: [
                 /* @__PURE__ */ jsx(ActivityTag, { $color: meta.color, $bg: meta.bg, children: prettyLabel(order.status) }),
-                order.triggerPrice != null && order.rejectionReason && /* @__PURE__ */ jsx(TriggerText, { title: order.rejectionReason, children: order.rejectionReason })
+                order.triggerPrice != null && order.rejectionReason && /* @__PURE__ */ jsx(ReasonMarker, { title: order.rejectionReason, "aria-label": "Why this order failed", children: "i" })
               ] }),
               /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: formatTimestamp(order.createdAt) }) })
             ] }, order.id);
@@ -17991,7 +18008,9 @@ var GridRow = styled10.div`
 `;
 var GridCell = styled10.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.span`