@loafmarkets/ui 0.1.109 → 0.1.111

package/dist/index.mjs

@@ -11,7 +11,6 @@ import { Newspaper } from 'lucide-react';
 import * as LightweightCharts from 'lightweight-charts';
 import { BiChevronUp, BiChevronDown, BiX, BiCoin, BiWallet, BiCreditCard, BiCalendar, BiInfoCircle, BiPencil, BiImages, BiVideo, BiMap } from 'react-icons/bi';
 import { FaChartLine, FaBitcoin } from 'react-icons/fa';
-import { FiExternalLink } from 'react-icons/fi';
 
 // src/components/button.tsx
 function cn(...inputs) {
@@ -11971,8 +11970,8 @@ 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, onClick: () => onPositionClick?.(pos.tokenName, pos.isIpoAllocation), children: [
-            /* @__PURE__ */ jsx(PositionsCell, { children: /* @__PURE__ */ jsx(HoldingsProperty, { children: pos.tokenName }) }),
+          return /* @__PURE__ */ jsxs(PositionsRow, { $hasClose: !!onClosePosition, children: [
+            /* @__PURE__ */ jsx(PositionsCell, { children: /* @__PURE__ */ jsx(HoldingsPropertyLink, { onClick: () => onPositionClick?.(pos.tokenName, pos.isIpoAllocation), children: pos.tokenName }) }),
             /* @__PURE__ */ jsx(PositionsCell, { children: /* @__PURE__ */ jsx("span", { style: { color: "#fff", fontSize: "0.8rem" }, children: formatNumber2(pos.quantity) }) }),
             /* @__PURE__ */ jsx(PositionsCell, { children: /* @__PURE__ */ jsx("span", { style: { color: "#fff", fontSize: "0.8rem" }, children: formatCurrency5(currentValue) }) }),
             /* @__PURE__ */ jsx(PositionsCell, { children: /* @__PURE__ */ jsx("span", { style: { color: "rgba(255,255,255,0.7)", fontSize: "0.8rem" }, children: formatCurrency5(pos.averageEntryPrice) }) }),
@@ -12004,60 +12003,58 @@ function PortfolioActivityPanel({
     ] }),
     activeTab === "subscriptions" && /* @__PURE__ */ jsxs(Fragment, { children: [
       offeringOrders.length === 0 && /* @__PURE__ */ jsx(EmptyState, { children: "IPO allocations will appear here once you subscribe." }),
-      pageSlice(offeringOrders).map((order) => /* @__PURE__ */ jsxs(ActivityRow, { children: [
-        /* @__PURE__ */ jsx(ActivitySideBadge, { $side: "Buy", children: "Buy" }),
-        /* @__PURE__ */ jsxs(ActivityInfo, { children: [
-          /* @__PURE__ */ jsx(ActivityPrimary, { children: order.tokenName }),
-          /* @__PURE__ */ jsxs(ActivitySecondary, { children: [
-            formatNumber2(order.quantity),
-            " tokens @ ",
-            formatCurrency5(order.price),
-            " \xB7 ",
-            formatTimestamp(order.createdAt)
-          ] })
+      offeringOrders.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(GridHeader, { $columns: "1.2fr 0.8fr 1fr 1fr 0.8fr 1fr", children: [
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Asset" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Qty" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Price" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Total" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Status" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Date" })
         ] }),
-        /* @__PURE__ */ jsx(ActivityTag, { $color: getOrderStatusMeta(order.status).color, $bg: getOrderStatusMeta(order.status).bg, children: prettyLabel(order.status) }),
-        /* @__PURE__ */ jsxs(ActivityActions, { children: [
-          /* @__PURE__ */ jsx(ActivityAmount, { children: formatCurrency5(order.price * order.quantity) }),
-          order.txHash && /* @__PURE__ */ jsx(
-            ActivityRedirectButton,
-            {
-              href: `${blockExplorerBaseUrl}/${order.txHash}`,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              "aria-label": `View transaction ${order.txHash}`,
-              children: /* @__PURE__ */ jsx(FiExternalLink, { size: 14 })
-            }
-          )
-        ] })
-      ] }, `${order.tokenName}-${order.txHash}-${order.createdAt}`))
+        pageSlice(offeringOrders).map((order) => {
+          const meta = getOrderStatusMeta(order.status);
+          return /* @__PURE__ */ jsxs(GridRow, { $columns: "1.2fr 0.8fr 1fr 1fr 0.8fr 1fr", children: [
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $primary: true, children: order.tokenName }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { children: formatNumber2(order.quantity) }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: formatCurrency5(order.price) }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { children: formatCurrency5(order.price * order.quantity) }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(ActivityTag, { $color: meta.color, $bg: meta.bg, children: prettyLabel(order.status) }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: formatTimestamp(order.createdAt) }) })
+          ] }, `${order.tokenName}-${order.txHash}-${order.createdAt}`);
+        })
+      ] })
     ] }),
     activeTab === "open-orders" && /* @__PURE__ */ jsxs(Fragment, { children: [
       openOrders.length === 0 && /* @__PURE__ */ jsx(EmptyState, { children: "Open orders will appear here while they are working in the market." }),
-      pageSlice(openOrders).map((order) => {
-        const meta = getOrderStatusMeta(order.status);
-        const isMarket = order.type === "MARKET";
-        const priceSegment = isMarket || !order.price ? "" : ` \xB7 ${formatCurrency5(order.price)}`;
-        const filledPercent = order.quantity > 0 ? Math.round(order.filledQuantity / order.quantity * 100) : 0;
-        const amountDisplay = !isMarket && order.price ? formatCurrency5(order.price * order.quantity) : "\u2014";
-        const isCancelling = cancellingOrderId === order.id;
-        return /* @__PURE__ */ jsxs(ActivityRow, { children: [
-          /* @__PURE__ */ jsx(ActivitySideBadge, { $side: sideLabel(order.side), children: sideLabel(order.side) }),
-          /* @__PURE__ */ jsxs(ActivityInfo, { children: [
-            /* @__PURE__ */ jsx(ActivityPrimary, { children: order.tokenName }),
-            /* @__PURE__ */ jsxs(ActivitySecondary, { children: [
-              formatNumber2(order.quantity),
-              " tokens \xB7 ",
-              prettyLabel(order.type),
-              priceSegment,
-              " \xB7 ",
+      openOrders.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(GridHeader, { $columns: onCancelOrder ? "1.2fr 0.6fr 0.7fr 0.8fr 1fr 0.8fr 0.8fr 70px" : "1.2fr 0.6fr 0.7fr 0.8fr 1fr 0.8fr 0.8fr", children: [
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Asset" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Side" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Type" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Qty" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Price" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Filled" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Status" }),
+          onCancelOrder && /* @__PURE__ */ jsx(GridHeaderCell, {})
+        ] }),
+        pageSlice(openOrders).map((order) => {
+          const meta = getOrderStatusMeta(order.status);
+          const isMarket = order.type === "MARKET";
+          const filledPercent = order.quantity > 0 ? Math.round(order.filledQuantity / order.quantity * 100) : 0;
+          const isCancelling = cancellingOrderId === order.id;
+          return /* @__PURE__ */ jsxs(GridRow, { $columns: onCancelOrder ? "1.2fr 0.6fr 0.7fr 0.8fr 1fr 0.8fr 0.8fr 70px" : "1.2fr 0.6fr 0.7fr 0.8fr 1fr 0.8fr 0.8fr", children: [
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $primary: true, children: order.tokenName }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(SideBadge, { $side: sideLabel(order.side), children: sideLabel(order.side) }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: prettyLabel(order.type) }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { children: formatNumber2(order.quantity) }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { children: isMarket || !order.price ? "Market" : formatCurrency5(order.price) }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsxs(CellText, { $muted: true, children: [
               filledPercent,
-              "% filled \xB7 ",
-              formatTimestamp(order.createdAt)
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.35rem" }, children: [
-            onCancelOrder && /* @__PURE__ */ jsx(
+              "%"
+            ] }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(ActivityTag, { $color: meta.color, $bg: meta.bg, children: prettyLabel(order.status) }) }),
+            onCancelOrder && /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(
               CancelButton,
               {
                 type: "button",
@@ -12066,102 +12063,94 @@ function PortfolioActivityPanel({
                   e.stopPropagation();
                   setPendingCancelOrderId(order.id);
                 },
-                children: isCancelling ? "Cancelling\u2026" : "Cancel"
+                children: isCancelling ? "\u2026" : "Cancel"
               }
-            ),
-            /* @__PURE__ */ jsx(ActivityTag, { $color: meta.color, $bg: meta.bg, children: prettyLabel(order.status) })
-          ] }),
-          /* @__PURE__ */ jsx(ActivityAmount, { children: amountDisplay })
-        ] }, `open-${order.id}`);
-      })
+            ) })
+          ] }, `open-${order.id}`);
+        })
+      ] })
     ] }),
     activeTab === "orders" && /* @__PURE__ */ jsxs(Fragment, { children: [
       orderHistory.length === 0 && /* @__PURE__ */ jsx(EmptyState, { children: "No orders yet. Place a trade to see it appear here." }),
-      pageSlice(orderHistory).map((order) => {
-        const meta = getOrderStatusMeta(order.status);
-        const isMarket = order.type === "MARKET";
-        const priceSegment = isMarket || !order.price ? "" : ` \xB7 ${formatCurrency5(order.price)}`;
-        const filledPercent = order.quantity > 0 ? Math.round(order.filledQuantity / order.quantity * 100) : 0;
-        const amountDisplay = !isMarket && order.price ? formatCurrency5(order.price * order.quantity) : "\u2014";
-        return /* @__PURE__ */ jsxs(ActivityRow, { children: [
-          /* @__PURE__ */ jsx(ActivitySideBadge, { $side: sideLabel(order.side), children: sideLabel(order.side) }),
-          /* @__PURE__ */ jsxs(ActivityInfo, { children: [
-            /* @__PURE__ */ jsx(ActivityPrimary, { children: order.tokenName }),
-            /* @__PURE__ */ jsxs(ActivitySecondary, { children: [
-              formatNumber2(order.quantity),
-              " tokens \xB7 ",
-              prettyLabel(order.type),
-              priceSegment,
-              " \xB7 ",
+      orderHistory.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(GridHeader, { $columns: "1.2fr 0.6fr 0.7fr 0.8fr 1fr 0.8fr 0.8fr 1fr", children: [
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Asset" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Side" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Type" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Qty" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Price" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Filled" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Status" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Date" })
+        ] }),
+        pageSlice(orderHistory).map((order) => {
+          const meta = getOrderStatusMeta(order.status);
+          const isMarket = order.type === "MARKET";
+          const filledPercent = order.quantity > 0 ? Math.round(order.filledQuantity / order.quantity * 100) : 0;
+          return /* @__PURE__ */ jsxs(GridRow, { $columns: "1.2fr 0.6fr 0.7fr 0.8fr 1fr 0.8fr 0.8fr 1fr", children: [
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $primary: true, children: order.tokenName }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(SideBadge, { $side: sideLabel(order.side), children: sideLabel(order.side) }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: prettyLabel(order.type) }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { children: formatNumber2(order.quantity) }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { children: isMarket || !order.price ? "Market" : formatCurrency5(order.price) }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsxs(CellText, { $muted: true, children: [
               filledPercent,
-              "% filled \xB7 ",
-              formatTimestamp(order.createdAt)
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(ActivityTag, { $color: meta.color, $bg: meta.bg, children: prettyLabel(order.status) }),
-          /* @__PURE__ */ jsx(ActivityAmount, { children: amountDisplay })
-        ] }, order.id);
-      })
+              "%"
+            ] }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(ActivityTag, { $color: meta.color, $bg: meta.bg, children: prettyLabel(order.status) }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: formatTimestamp(order.createdAt) }) })
+          ] }, order.id);
+        })
+      ] })
     ] }),
     activeTab === "trades" && /* @__PURE__ */ jsxs(Fragment, { children: [
       tradeHistory.length === 0 && /* @__PURE__ */ jsx(EmptyState, { children: "Completed trades will appear here." }),
-      pageSlice(tradeHistory).map((trade) => /* @__PURE__ */ jsxs(ActivityRow, { children: [
-        /* @__PURE__ */ jsx(ActivitySideBadge, { $side: sideLabel(trade.side), children: sideLabel(trade.side) }),
-        /* @__PURE__ */ jsxs(ActivityInfo, { children: [
-          /* @__PURE__ */ jsx(ActivityPrimary, { children: trade.tokenName }),
-          /* @__PURE__ */ jsxs(ActivitySecondary, { children: [
-            formatNumber2(trade.quantity),
-            " tokens @ ",
-            formatCurrency5(trade.price),
-            " \xB7 ",
-            formatTimestamp(trade.executedAt)
-          ] })
+      tradeHistory.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(GridHeader, { $columns: "1.2fr 0.6fr 0.8fr 1fr 1fr 0.8fr 1fr", children: [
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Asset" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Side" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Qty" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Price" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Total" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Fee" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Date" })
         ] }),
-        /* @__PURE__ */ jsx(
-          ActivityTag,
-          {
-            $color: trade.side === "SELL" ? "#f6465d" : "#0ecb81",
-            $bg: trade.side === "SELL" ? "rgba(246,70,93,0.12)" : "rgba(14,203,129,0.12)",
-            children: sideLabel(trade.side)
-          }
-        ),
-        /* @__PURE__ */ jsx(ActivityAmount, { children: formatCurrency5(trade.price * trade.quantity) })
-      ] }, trade.tradeId))
+        pageSlice(tradeHistory).map((trade) => /* @__PURE__ */ jsxs(GridRow, { $columns: "1.2fr 0.6fr 0.8fr 1fr 1fr 0.8fr 1fr", children: [
+          /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $primary: true, children: trade.tokenName }) }),
+          /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(SideBadge, { $side: sideLabel(trade.side), children: sideLabel(trade.side) }) }),
+          /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { children: formatNumber2(trade.quantity) }) }),
+          /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { children: formatCurrency5(trade.price) }) }),
+          /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { children: formatCurrency5(trade.price * trade.quantity) }) }),
+          /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: formatCurrency5(trade.fee) }) }),
+          /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: formatTimestamp(trade.executedAt) }) })
+        ] }, trade.tradeId))
+      ] })
     ] }),
     activeTab === "transfers" && /* @__PURE__ */ jsxs(Fragment, { children: [
       transfers.length === 0 && /* @__PURE__ */ jsx(EmptyState, { children: "Deposits and withdrawals will appear here." }),
-      pageSlice(transfers).map((t, idx) => {
-        const isDeposit = t.type === "DEPOSIT";
-        const statusMeta = getOrderStatusMeta(t.status);
-        return /* @__PURE__ */ jsxs(ActivityRow, { children: [
-          /* @__PURE__ */ jsx(ActivitySideBadge, { $side: isDeposit ? "Buy" : "Sell", children: isDeposit ? "In" : "Out" }),
-          /* @__PURE__ */ jsxs(ActivityInfo, { children: [
-            /* @__PURE__ */ jsx(ActivityPrimary, { children: isDeposit ? "Deposit" : "Withdrawal" }),
-            /* @__PURE__ */ jsxs(ActivitySecondary, { children: [
-              formatAddress(t.address),
-              " \xB7 ",
-              formatTimestamp(t.createdAt)
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(ActivityTag, { $color: statusMeta.color, $bg: statusMeta.bg, children: prettyLabel(t.status) }),
-          /* @__PURE__ */ jsxs(ActivityActions, { children: [
-            /* @__PURE__ */ jsxs(ActivityAmount, { children: [
+      transfers.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(GridHeader, { $columns: "0.8fr 1fr 1.5fr 0.8fr 1fr", children: [
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Type" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Amount" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Address" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Status" }),
+          /* @__PURE__ */ jsx(GridHeaderCell, { children: "Date" })
+        ] }),
+        pageSlice(transfers).map((t, idx) => {
+          const isDeposit = t.type === "DEPOSIT";
+          const statusMeta = getOrderStatusMeta(t.status);
+          return /* @__PURE__ */ jsxs(GridRow, { $columns: "0.8fr 1fr 1.5fr 0.8fr 1fr", children: [
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(SideBadge, { $side: isDeposit ? "Buy" : "Sell", children: isDeposit ? "Deposit" : "Withdraw" }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsxs(CellText, { $color: isDeposit ? "#0ecb81" : "#f6465d", children: [
               isDeposit ? "+" : "-",
               formatCurrency5(t.amount)
-            ] }),
-            t.blockchainTxHash && /* @__PURE__ */ jsx(
-              ActivityRedirectButton,
-              {
-                href: `${blockExplorerBaseUrl}/${t.blockchainTxHash}`,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                "aria-label": `View transaction ${t.blockchainTxHash}`,
-                children: /* @__PURE__ */ jsx(FiExternalLink, { size: 14 })
-              }
-            )
-          ] })
-        ] }, t.blockchainTxHash ?? `transfer-${idx}`);
-      })
+            ] }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: formatAddress(t.address) }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(ActivityTag, { $color: statusMeta.color, $bg: statusMeta.bg, children: prettyLabel(t.status) }) }),
+            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: formatTimestamp(t.createdAt) }) })
+          ] }, t.blockchainTxHash ?? `transfer-${idx}`);
+        })
+      ] })
     ] }),
     activityTotalPages > 1 && /* @__PURE__ */ jsxs(PaginationRow, { children: [
       /* @__PURE__ */ jsx(
@@ -12263,7 +12252,7 @@ var TabCount = styled25.span`
   font-weight: 600;
   margin-left: 2px;
 `;
-var ActivityRow = styled25.div`
+styled25.div`
   display: grid;
   grid-template-columns: auto 1fr auto auto;
   align-items: center;
@@ -12279,7 +12268,7 @@ var ActivityRow = styled25.div`
     background: rgba(255, 255, 255, 0.015);
   }
 `;
-var ActivitySideBadge = styled25.span`
+styled25.span`
   font-size: 0.6rem;
   font-weight: 700;
   text-transform: uppercase;
@@ -12291,17 +12280,17 @@ var ActivitySideBadge = styled25.span`
   color: ${({ $side }) => $side === "Buy" ? "#0ecb81" : "#f6465d"};
   background: ${({ $side }) => $side === "Buy" ? "rgba(14, 203, 129, 0.1)" : "rgba(246, 70, 93, 0.1)"};
 `;
-var ActivityInfo = styled25.div`
+styled25.div`
   display: flex;
   flex-direction: column;
   gap: 0.1rem;
 `;
-var ActivityPrimary = styled25.span`
+styled25.span`
   font-size: 0.8rem;
   color: #fff;
   font-weight: 500;
 `;
-var ActivitySecondary = styled25.span`
+styled25.span`
   font-size: 0.6rem;
   color: rgba(255, 255, 255, 0.35);
 `;
@@ -12314,20 +12303,20 @@ var ActivityTag = styled25.span`
   background: ${({ $bg }) => $bg || "rgba(255, 255, 255, 0.06)"};
   white-space: nowrap;
 `;
-var ActivityAmount = styled25.span`
+styled25.span`
   font-size: 0.8rem;
   font-weight: 600;
   color: #fff;
   text-align: right;
   white-space: nowrap;
 `;
-var ActivityActions = styled25.div`
+styled25.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 0.35rem;
 `;
-var ActivityRedirectButton = styled25.a`
+styled25.a`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -12402,10 +12391,8 @@ var PositionsRow = styled25.div`
   align-items: center;
   gap: 0 0.75rem;
   padding: 0.5rem 0.5rem;
-  cursor: pointer;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03);
   &:last-child { border-bottom: none; }
-  &:hover { background: rgba(255, 255, 255, 0.02); }
 `;
 var PositionsCell = styled25.div`
   display: flex;
@@ -12413,10 +12400,12 @@ var PositionsCell = styled25.div`
   align-items: ${(p) => p.$align === "right" ? "flex-end" : "flex-start"};
   gap: 0.1rem;
 `;
-var HoldingsProperty = styled25.div`
+var HoldingsPropertyLink = styled25.span`
   font-size: 0.8rem;
   font-weight: 600;
   color: #fff;
+  cursor: pointer;
+  &:hover { text-decoration: underline; color: var(--color-accent, #E6C87E); }
 `;
 var PnLAmount = styled25.div`
   font-size: 0.85rem;
@@ -12449,6 +12438,46 @@ var CancelButton = styled25.button`
     cursor: not-allowed;
   }
 `;
+var GridHeader = styled25.div`
+  display: grid;
+  grid-template-columns: ${(p) => p.$columns};
+  gap: 0 0.75rem;
+  padding: 0.4rem 0.5rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+`;
+var GridHeaderCell = styled25.div`
+  font-size: 0.68rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.4);
+  white-space: nowrap;
+`;
+var GridRow = styled25.div`
+  display: grid;
+  grid-template-columns: ${(p) => p.$columns};
+  align-items: center;
+  gap: 0 0.75rem;
+  padding: 0.5rem 0.5rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+  &:last-child { border-bottom: none; }
+`;
+var GridCell = styled25.div`
+  display: flex;
+  align-items: center;
+  min-width: 0;
+`;
+var CellText = styled25.span`
+  font-size: 0.8rem;
+  font-weight: ${(p) => p.$primary ? 600 : 400};
+  color: ${(p) => p.$color || (p.$muted ? "rgba(255,255,255,0.5)" : "#fff")};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+var SideBadge = styled25.span`
+  font-size: 0.68rem;
+  font-weight: 600;
+  color: ${({ $side }) => $side === "Buy" ? "#0ecb81" : "#f6465d"};
+`;
 var CancelConfirmOverlay = styled25.div`
   position: fixed;
   inset: 0;