@loafmarkets/ui 0.1.130 → 0.1.132

package/dist/index.js

@@ -6004,6 +6004,7 @@ var PortfolioEyeButton = styled25__default.default.button`
   justify-content: center;
   color: ${(p) => p.$active ? "#D4AF37" : "rgba(255,255,255,0.5)"};
   transition: all 0.2s ease;
+  margin-left: 6px;
   margin-right: 10px;
 
   &:hover {
@@ -6013,6 +6014,7 @@ var PortfolioEyeButton = styled25__default.default.button`
 
   @media (max-width: 768px) {
     padding: 4px;
+    margin-left: 4px;
     margin-right: 6px;
   }
 `;
@@ -11826,6 +11828,42 @@ function PortfolioActivityPanel({
   const [activeTab, setActiveTab] = React5.useState(resolvedDefaultTab);
   const [activityPage, setActivityPage] = React5.useState(0);
   const [pendingCancelOrderId, setPendingCancelOrderId] = React5.useState(null);
+  const [posSortKey, setPosSortKey] = React5.useState("asset");
+  const [posSortAsc, setPosSortAsc] = React5.useState(true);
+  const handlePosSort = (key) => {
+    if (posSortKey === key) {
+      setPosSortAsc((v) => !v);
+    } else {
+      setPosSortKey(key);
+      setPosSortAsc(key === "asset");
+    }
+  };
+  const sortedPositions = React5.useMemo(() => {
+    const arr = [...positions];
+    const dir = posSortAsc ? 1 : -1;
+    arr.sort((a, b) => {
+      switch (posSortKey) {
+        case "asset":
+          return dir * a.tokenName.localeCompare(b.tokenName);
+        case "units":
+          return dir * (a.quantity - b.quantity);
+        case "value":
+          return dir * (a.quantity * a.marketPrice - b.quantity * b.marketPrice);
+        case "avgPrice":
+          return dir * (a.averageEntryPrice - b.averageEntryPrice);
+        case "currentPrice":
+          return dir * (a.marketPrice - b.marketPrice);
+        case "pnl": {
+          const pnlA = a.propertyPnlPercent ?? a.percentChange ?? 0;
+          const pnlB = b.propertyPnlPercent ?? b.percentChange ?? 0;
+          return dir * (pnlA - pnlB);
+        }
+        default:
+          return 0;
+      }
+    });
+    return arr;
+  }, [positions, posSortKey, posSortAsc]);
   const activeTabTotal = React5.useMemo(() => {
     switch (activeTab) {
       case "positions":
@@ -11908,15 +11946,33 @@ function PortfolioActivityPanel({
       positions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: "No positions yet. Subscribe to an offering or buy on the secondary market." }),
       positions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(PositionsHeader, { $hasClose: !!onClosePosition, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { children: "Asset" }),
-          /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { children: "Units" }),
-          /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { children: "Position Value" }),
-          /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { children: "Avg Price" }),
-          /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { children: "Current Price" }),
-          /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { children: "PNL (%)" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(SortableHeaderCell, { $active: posSortKey === "asset", onClick: () => handlePosSort("asset"), children: [
+            "Asset ",
+            posSortKey === "asset" && (posSortAsc ? "\u2191" : "\u2193")
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(SortableHeaderCell, { $active: posSortKey === "units", onClick: () => handlePosSort("units"), children: [
+            "Units ",
+            posSortKey === "units" && (posSortAsc ? "\u2191" : "\u2193")
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(SortableHeaderCell, { $active: posSortKey === "value", onClick: () => handlePosSort("value"), children: [
+            "Position Value ",
+            posSortKey === "value" && (posSortAsc ? "\u2191" : "\u2193")
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(SortableHeaderCell, { $active: posSortKey === "avgPrice", onClick: () => handlePosSort("avgPrice"), children: [
+            "Avg Price ",
+            posSortKey === "avgPrice" && (posSortAsc ? "\u2191" : "\u2193")
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(SortableHeaderCell, { $active: posSortKey === "currentPrice", onClick: () => handlePosSort("currentPrice"), children: [
+            "Current Price ",
+            posSortKey === "currentPrice" && (posSortAsc ? "\u2191" : "\u2193")
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(SortableHeaderCell, { $active: posSortKey === "pnl", onClick: () => handlePosSort("pnl"), children: [
+            "PNL (%) ",
+            posSortKey === "pnl" && (posSortAsc ? "\u2191" : "\u2193")
+          ] }),
           onClosePosition && /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { children: "Close" })
         ] }),
-        pageSlice(positions).map((pos) => {
+        pageSlice(sortedPositions).map((pos) => {
           const currentValue = pos.quantity * pos.marketPrice;
           const costBasis = pos.quantity * pos.averageEntryPrice;
           const pnl = pos.propertyPnl ?? currentValue - costBasis;
@@ -12345,6 +12401,16 @@ var PositionsHeaderCell = styled25__default.default.div`
   text-align: ${(p) => p.$align || "left"};
   white-space: nowrap;
 `;
+var SortableHeaderCell = styled25__default.default.div`
+  font-size: 0.68rem;
+  font-weight: 500;
+  color: ${(p) => p.$active ? "rgba(255, 255, 255, 0.7)" : "rgba(255, 255, 255, 0.4)"};
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.15s ease;
+  &:hover { color: rgba(255, 255, 255, 0.7); }
+`;
 var PositionsRow = styled25__default.default.div`
   display: grid;
   grid-template-columns: ${(p) => p.$hasClose ? "1.4fr 0.8fr 1fr 1fr 1fr 1.1fr 110px" : "1.2fr 0.8fr 1fr 1fr 1fr 1.2fr"};