@loafmarkets/ui 0.1.263 → 0.1.264

package/dist/index.mjs

@@ -12,7 +12,7 @@ import * as LightweightCharts from 'lightweight-charts';
 import { MdKingBed, MdBathtub, MdDirectionsCar, MdPool, MdYard, MdFitnessCenter } from 'react-icons/md';
 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 { FiEdit2 } from 'react-icons/fi';
+import { FiChevronDown, FiEdit2 } from 'react-icons/fi';
 
 // src/components/button.tsx
 function cn(...inputs) {
@@ -13613,6 +13613,7 @@ function PortfolioActivityPanel({
   onCancelAllOrders,
   onAmendOrder,
   cancellingOrderId = null,
+  compactPositions = false,
   defaultTab,
   pageSize = ACTIVITY_PAGE_SIZE_DEFAULT,
   blockExplorerBaseUrl = "https://sepolia.basescan.org/tx",
@@ -13637,6 +13638,41 @@ function PortfolioActivityPanel({
       setPosSortAsc(key === "asset");
     }
   };
+  const [expandedPositions, setExpandedPositions] = useState(/* @__PURE__ */ new Set());
+  const [allExpanded, setAllExpanded] = useState(false);
+  const togglePosition = (tokenName) => {
+    setExpandedPositions((prev) => {
+      const next = new Set(prev);
+      if (next.has(tokenName)) next.delete(tokenName);
+      else next.add(tokenName);
+      return next;
+    });
+  };
+  const sortKeyLabel = (key) => {
+    switch (key) {
+      case "asset":
+        return "Asset";
+      case "units":
+        return "Units";
+      case "value":
+        return "Value";
+      case "avgPrice":
+        return "Avg Price";
+      case "currentPrice":
+        return "Price";
+      case "pnl":
+        return "PNL";
+      default:
+        return "Asset";
+    }
+  };
+  const sortKeys = ["asset", "units", "value", "avgPrice", "currentPrice", "pnl"];
+  const cycleSortKey = () => {
+    const idx = sortKeys.indexOf(posSortKey);
+    const nextKey = sortKeys[(idx + 1) % sortKeys.length];
+    setPosSortKey(nextKey);
+    setPosSortAsc(true);
+  };
   const sortedPositions = useMemo(() => {
     const arr = [...positions];
     const dir = posSortAsc ? 1 : -1;
@@ -13663,6 +13699,15 @@ function PortfolioActivityPanel({
     });
     return arr;
   }, [positions, posSortKey, posSortAsc]);
+  const toggleExpandAll = () => {
+    if (allExpanded) {
+      setExpandedPositions(/* @__PURE__ */ new Set());
+      setAllExpanded(false);
+    } else {
+      setExpandedPositions(new Set(sortedPositions.map((p) => p.tokenName)));
+      setAllExpanded(true);
+    }
+  };
   const activeTabTotal = useMemo(() => {
     switch (activeTab) {
       case "positions":
@@ -13743,7 +13788,70 @@ function PortfolioActivityPanel({
     ] }),
     activeTab === "positions" && showPositionsTab && /* @__PURE__ */ jsxs(Fragment, { children: [
       positions.length === 0 && /* @__PURE__ */ jsx(EmptyState, { children: "No positions yet. Subscribe to an offering or buy on the secondary market." }),
-      positions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      positions.length > 0 && compactPositions && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(CompactToolbar, { children: [
+          /* @__PURE__ */ jsxs(CompactSortBtn, { onClick: cycleSortKey, children: [
+            "Sort by: ",
+            sortKeyLabel(posSortKey),
+            " ",
+            posSortAsc ? "\u2191" : "\u2193"
+          ] }),
+          /* @__PURE__ */ jsxs(CompactToolbarRight, { children: [
+            /* @__PURE__ */ jsx(CompactActionBtn, { onClick: toggleExpandAll, children: allExpanded ? "Collapse All" : "Expand All" }),
+            onClosePosition && /* @__PURE__ */ jsx(CompactSellAllBtn, { onClick: () => setCloseAllOpen(true), children: "Sell All" })
+          ] })
+        ] }),
+        pageSlice(sortedPositions).map((pos) => {
+          const currentValue = pos.quantity * pos.marketPrice;
+          const costBasis = pos.quantity * pos.averageEntryPrice;
+          const pnl = pos.propertyPnl ?? currentValue - costBasis;
+          const pnlPercent = pos.propertyPnlPercent ?? pos.percentChange ?? 0;
+          const isPositive = pnl >= 0;
+          const isExpanded = expandedPositions.has(pos.tokenName);
+          return /* @__PURE__ */ jsxs(CompactCard, { children: [
+            /* @__PURE__ */ jsxs(CompactCardHeader, { onClick: () => togglePosition(pos.tokenName), children: [
+              /* @__PURE__ */ jsx(CompactAsset, { onClick: (e) => {
+                e.stopPropagation();
+                onPositionClick?.(pos.tokenName, pos.isIpoAllocation);
+              }, children: pos.tokenName }),
+              /* @__PURE__ */ jsxs(CompactUnits, { children: [
+                formatNumber2(pos.quantity),
+                " units"
+              ] }),
+              /* @__PURE__ */ jsxs(CompactPnl, { $positive: isPositive, children: [
+                isPositive ? "+" : "-",
+                formatCurrency4(Math.abs(pnl)),
+                " (",
+                isPositive ? "+" : "",
+                pnlPercent.toFixed(1),
+                "%)"
+              ] }),
+              /* @__PURE__ */ jsx(CompactChevron, { $expanded: isExpanded, children: /* @__PURE__ */ jsx(FiChevronDown, { size: 14 }) })
+            ] }),
+            isExpanded && /* @__PURE__ */ jsxs(CompactCardBody, { children: [
+              /* @__PURE__ */ jsxs(CompactDetailRow, { children: [
+                /* @__PURE__ */ jsxs(CompactDetail, { children: [
+                  /* @__PURE__ */ jsx(CompactDetailLabel, { children: "Position Value" }),
+                  /* @__PURE__ */ jsx(CompactDetailValue, { children: formatCurrency4(currentValue, { minimumFractionDigits: 0, maximumFractionDigits: 0 }) })
+                ] }),
+                /* @__PURE__ */ jsxs(CompactDetail, { children: [
+                  /* @__PURE__ */ jsx(CompactDetailLabel, { children: "Avg Price" }),
+                  /* @__PURE__ */ jsx(CompactDetailValue, { children: formatCurrency4(pos.averageEntryPrice) })
+                ] }),
+                /* @__PURE__ */ jsxs(CompactDetail, { children: [
+                  /* @__PURE__ */ jsx(CompactDetailLabel, { children: "Current Price" }),
+                  /* @__PURE__ */ jsx(CompactDetailValue, { children: formatCurrency4(pos.marketPrice) })
+                ] })
+              ] }),
+              onClosePosition && /* @__PURE__ */ jsxs(CompactCloseActions, { children: [
+                /* @__PURE__ */ jsx(CloseBtn2, { onClick: () => onClosePosition(pos.tokenName, "market", pos.quantity, pos.marketPrice), children: "Market Sell" }),
+                /* @__PURE__ */ jsx(CloseBtn2, { onClick: () => onClosePosition(pos.tokenName, "limit", pos.quantity, pos.marketPrice), children: "Limit Sell" })
+              ] })
+            ] })
+          ] }, pos.tokenName);
+        })
+      ] }),
+      positions.length > 0 && !compactPositions && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs(PositionsHeader, { $hasClose: !!onClosePosition, children: [
           /* @__PURE__ */ jsxs(SortableHeaderCell, { $active: posSortKey === "asset", onClick: () => handlePosSort("asset"), children: [
             "Asset ",
@@ -13813,29 +13921,29 @@ function PortfolioActivityPanel({
               }, children: "Limit Sell" })
             ] }) })
           ] }, pos.tokenName);
-        }),
-        closeAllOpen && onClosePosition && /* @__PURE__ */ jsx(CloseAllOverlay, { onClick: () => setCloseAllOpen(false), children: /* @__PURE__ */ jsxs(CloseAllModal, { onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsx(CloseAllModalX, { onClick: () => setCloseAllOpen(false), children: "\xD7" }),
-          /* @__PURE__ */ jsx(CloseAllTitle, { children: "Confirm Sell All" }),
-          /* @__PURE__ */ jsx(CloseAllDesc, { children: "This will sell all your positions and cancel their associated TP/SL orders." }),
-          /* @__PURE__ */ jsxs(CloseAllOption, { onClick: () => setCloseAllType("market"), children: [
-            /* @__PURE__ */ jsx(CloseAllRadio, { $selected: closeAllType === "market" }),
-            /* @__PURE__ */ jsx("span", { children: "Market Sell" })
-          ] }),
-          /* @__PURE__ */ jsxs(CloseAllOption, { onClick: () => setCloseAllType("limit"), children: [
-            /* @__PURE__ */ jsx(CloseAllRadio, { $selected: closeAllType === "limit" }),
-            /* @__PURE__ */ jsx("span", { children: "Limit Sell at Mid Price" })
-          ] }),
-          /* @__PURE__ */ jsxs(CloseAllConfirmBtn, { onClick: () => {
-            positions.forEach((pos) => onClosePosition(pos.tokenName, closeAllType, pos.quantity, pos.marketPrice));
-            setCloseAllOpen(false);
-          }, children: [
-            "Confirm ",
-            closeAllType === "market" ? "Market" : "Limit",
-            " Sell"
-          ] })
-        ] }) })
-      ] })
+        })
+      ] }),
+      positions.length > 0 && closeAllOpen && onClosePosition && /* @__PURE__ */ jsx(CloseAllOverlay, { onClick: () => setCloseAllOpen(false), children: /* @__PURE__ */ jsxs(CloseAllModal, { onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsx(CloseAllModalX, { onClick: () => setCloseAllOpen(false), children: "\xD7" }),
+        /* @__PURE__ */ jsx(CloseAllTitle, { children: "Confirm Sell All" }),
+        /* @__PURE__ */ jsx(CloseAllDesc, { children: "This will sell all your positions and cancel their associated TP/SL orders." }),
+        /* @__PURE__ */ jsxs(CloseAllOption, { onClick: () => setCloseAllType("market"), children: [
+          /* @__PURE__ */ jsx(CloseAllRadio, { $selected: closeAllType === "market" }),
+          /* @__PURE__ */ jsx("span", { children: "Market Sell" })
+        ] }),
+        /* @__PURE__ */ jsxs(CloseAllOption, { onClick: () => setCloseAllType("limit"), children: [
+          /* @__PURE__ */ jsx(CloseAllRadio, { $selected: closeAllType === "limit" }),
+          /* @__PURE__ */ jsx("span", { children: "Limit Sell at Mid Price" })
+        ] }),
+        /* @__PURE__ */ jsxs(CloseAllConfirmBtn, { onClick: () => {
+          positions.forEach((pos) => onClosePosition(pos.tokenName, closeAllType, pos.quantity, pos.marketPrice));
+          setCloseAllOpen(false);
+        }, children: [
+          "Confirm ",
+          closeAllType === "market" ? "Market" : "Limit",
+          " Sell"
+        ] })
+      ] }) })
     ] }),
     activeTab === "subscriptions" && /* @__PURE__ */ jsxs(Fragment, { children: [
       offeringOrders.length === 0 && /* @__PURE__ */ jsx(EmptyState, { children: "IPO allocations will appear here once you subscribe." }),
@@ -14638,6 +14746,148 @@ var CloseAllConfirmBtn = styled9.button`
     background: rgba(246, 70, 93, 0.25);
   }
 `;
+var CompactToolbar = styled9.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.35rem 0.5rem;
+  margin-bottom: 0.25rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+`;
+var CompactSortBtn = styled9.button`
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  padding: 0.2rem 0.6rem;
+  font-size: 0.68rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover {
+    color: rgba(255, 255, 255, 0.85);
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+`;
+var CompactToolbarRight = styled9.div`
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+`;
+var CompactActionBtn = styled9.button`
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  padding: 0.2rem 0.6rem;
+  font-size: 0.68rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover {
+    color: rgba(255, 255, 255, 0.85);
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+`;
+var CompactSellAllBtn = styled9.button`
+  background: rgba(246, 70, 93, 0.08);
+  border: 1px solid rgba(246, 70, 93, 0.25);
+  border-radius: 4px;
+  padding: 0.2rem 0.6rem;
+  font-size: 0.68rem;
+  font-weight: 600;
+  color: #f6465d;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background: rgba(246, 70, 93, 0.15);
+    border-color: rgba(246, 70, 93, 0.4);
+  }
+`;
+var CompactCard = styled9.div`
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+var CompactCardHeader = styled9.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1.4fr auto;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.6rem 0.5rem;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  border-radius: 4px;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+`;
+var CompactAsset = styled9.span`
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #fff;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+    color: var(--color-accent, #E6C87E);
+  }
+`;
+var CompactUnits = styled9.span`
+  font-size: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+`;
+var CompactPnl = styled9.span`
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: ${(p) => p.$positive ? "#0ecb81" : "#f6465d"};
+  text-align: right;
+`;
+var CompactChevron = styled9.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.35);
+  transition: transform 0.2s ease;
+  transform: rotate(${(p) => p.$expanded ? "180deg" : "0deg"});
+`;
+var CompactCardBody = styled9.div`
+  padding: 0 0.5rem 0.6rem;
+`;
+var CompactDetailRow = styled9.div`
+  display: flex;
+  gap: 1.5rem;
+  padding: 0.5rem 0.75rem;
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: 6px;
+  margin-bottom: 0.5rem;
+`;
+var CompactDetail = styled9.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+`;
+var CompactDetailLabel = styled9.span`
+  font-size: 0.62rem;
+  color: rgba(255, 255, 255, 0.35);
+  font-weight: 500;
+`;
+var CompactDetailValue = styled9.span`
+  font-size: 0.78rem;
+  color: #fff;
+  font-weight: 500;
+`;
+var CompactCloseActions = styled9.div`
+  display: flex;
+  gap: 0.5rem;
+  padding: 0 0.75rem;
+`;
 function PropertyBuy({
   propertyName = "Loaf Property",
   propertyLocation: propertyLocationLabel = "Sydney, NSW",