@loafmarkets/ui 0.1.263 → 0.1.265

package/dist/index.mjs

@@ -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,36 @@ function PortfolioActivityPanel({
       setPosSortAsc(key === "asset");
     }
   };
+  const [expandedPositions, setExpandedPositions] = useState(/* @__PURE__ */ new Set());
+  const [allExpanded, setAllExpanded] = useState(false);
+  const [sortDropdownOpen, setSortDropdownOpen] = 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 sortedPositions = useMemo(() => {
     const arr = [...positions];
     const dir = posSortAsc ? 1 : -1;
@@ -13663,6 +13694,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 +13783,90 @@ 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(CToolbar, { children: [
+          /* @__PURE__ */ jsxs(CSortWrap, { children: [
+            /* @__PURE__ */ jsxs(CSortBtn, { onClick: () => setSortDropdownOpen((v) => !v), children: [
+              "Sort by: ",
+              sortKeyLabel(posSortKey),
+              " \u25BE"
+            ] }),
+            sortDropdownOpen && /* @__PURE__ */ jsx(CSortDropdown, { children: sortKeys.map((k) => /* @__PURE__ */ jsx(CSortOption, { $active: posSortKey === k, onClick: () => {
+              setPosSortKey(k);
+              setPosSortAsc(true);
+              setSortDropdownOpen(false);
+            }, children: sortKeyLabel(k) }, k)) })
+          ] }),
+          /* @__PURE__ */ jsxs(CToolbarActions, { children: [
+            /* @__PURE__ */ jsx(CToolbarLink, { onClick: toggleExpandAll, children: allExpanded ? "Collapse All" : "Expand All" }),
+            onClosePosition && /* @__PURE__ */ jsx(CToolbarLink, { 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 posExpanded = expandedPositions.has(pos.tokenName) || allExpanded;
+          const ticker = pos.tokenName.toUpperCase().slice(0, 7);
+          return /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs(CRow, { $expanded: posExpanded, onClick: () => togglePosition(pos.tokenName), children: [
+              /* @__PURE__ */ jsxs(CAssetCell, { onClick: (e) => {
+                e.stopPropagation();
+                onPositionClick?.(pos.tokenName, pos.isIpoAllocation);
+              }, children: [
+                /* @__PURE__ */ jsx(CCellLabel, { children: "Asset" }),
+                /* @__PURE__ */ jsxs(CAssetName, { children: [
+                  pos.imageUrl && /* @__PURE__ */ jsx(CAssetLogo, { src: pos.imageUrl, alt: "" }),
+                  pos.tokenName
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(CUnitsCell, { children: [
+                /* @__PURE__ */ jsx(CCellLabel, { children: "Units" }),
+                formatNumber2(pos.quantity, pos.quantity >= 100 ? 0 : 2),
+                " ",
+                ticker
+              ] }),
+              /* @__PURE__ */ jsxs(CPnlCell, { children: [
+                /* @__PURE__ */ jsx(CCellLabel, { children: "PNL (%)" }),
+                /* @__PURE__ */ jsxs(CPnlValue, { $positive: isPositive, children: [
+                  isPositive ? "+" : "-",
+                  formatCurrency4(Math.abs(pnl))
+                ] }),
+                /* @__PURE__ */ jsxs(CPnlPct, { $positive: isPositive, children: [
+                  "(",
+                  isPositive ? "+" : "",
+                  pnlPercent.toFixed(1),
+                  "%)"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(CChevronWrap, { $open: posExpanded, children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "rgba(255,255,255,0.5)", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" }) }) })
+            ] }),
+            posExpanded && /* @__PURE__ */ jsxs(CExpandedWrap, { children: [
+              /* @__PURE__ */ jsxs(CDetailGrid, { children: [
+                /* @__PURE__ */ jsxs(CDetailItem, { children: [
+                  /* @__PURE__ */ jsx(CDLabel, { children: "Position Value" }),
+                  /* @__PURE__ */ jsx(CDValue, { children: formatCurrency4(currentValue, { minimumFractionDigits: 0, maximumFractionDigits: 0 }) })
+                ] }),
+                /* @__PURE__ */ jsxs(CDetailItem, { children: [
+                  /* @__PURE__ */ jsx(CDLabel, { children: "Avg Price" }),
+                  /* @__PURE__ */ jsx(CDValue, { children: formatCurrency4(pos.averageEntryPrice) })
+                ] }),
+                /* @__PURE__ */ jsxs(CDetailItem, { children: [
+                  /* @__PURE__ */ jsx(CDLabel, { children: "Current Price" }),
+                  /* @__PURE__ */ jsx(CDValue, { children: formatCurrency4(pos.marketPrice) })
+                ] })
+              ] }),
+              onClosePosition && /* @__PURE__ */ jsxs(CActionRow, { children: [
+                /* @__PURE__ */ jsx(CCloseBtn, { onClick: () => onClosePosition(pos.tokenName, "market", pos.quantity, pos.marketPrice), children: "Market Sell" }),
+                /* @__PURE__ */ jsx(CCloseBtn, { 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 +13936,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 +14761,182 @@ var CloseAllConfirmBtn = styled9.button`
     background: rgba(246, 70, 93, 0.25);
   }
 `;
+var CToolbar = styled9.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.3rem 0.6rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+`;
+var CSortWrap = styled9.div`
+  position: relative;
+`;
+var CSortBtn = styled9.button`
+  font-size: 0.6rem;
+  color: rgba(255, 255, 255, 0.45);
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  &:hover { color: rgba(255, 255, 255, 0.7); }
+`;
+var CSortDropdown = styled9.div`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 10;
+  margin-top: 2px;
+  background: #1a1c24;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  overflow: hidden;
+  min-width: 120px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+`;
+var CSortOption = styled9.button`
+  display: block;
+  width: 100%;
+  padding: 0.4rem 0.6rem;
+  font-size: 0.6rem;
+  font-weight: ${(p) => p.$active ? 600 : 400};
+  color: ${(p) => p.$active ? "#E6C87E" : "rgba(255, 255, 255, 0.6)"};
+  background: ${(p) => p.$active ? "rgba(230, 200, 126, 0.06)" : "none"};
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  &:hover { background: rgba(255, 255, 255, 0.05); }
+`;
+var CToolbarActions = styled9.div`
+  display: flex;
+  gap: 0.5rem;
+`;
+var CToolbarLink = styled9.button`
+  font-size: 0.58rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.45);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-color: rgba(255, 255, 255, 0.15);
+  &:hover { color: rgba(255, 255, 255, 0.7); }
+`;
+var CRow = styled9.button`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 24px;
+  align-items: center;
+  width: calc(100% - 1rem);
+  margin: 0.25rem 0.5rem;
+  margin-bottom: ${(p) => p.$expanded ? "0" : "0.25rem"};
+  padding: 0.55rem 0.65rem;
+  background: rgba(255, 255, 255, 0.035);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-bottom: ${(p) => p.$expanded ? "none" : "1px solid rgba(255, 255, 255, 0.06)"};
+  border-radius: ${(p) => p.$expanded ? "8px 8px 0 0" : "8px"};
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s;
+  outline: none;
+  &:active { background: rgba(255, 255, 255, 0.06); }
+  &:focus { outline: none; }
+  &:focus-visible { outline: none; }
+`;
+var CCellLabel = styled9.div`
+  font-size: 0.6rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.3);
+  margin-bottom: 1px;
+`;
+var CAssetCell = styled9.div``;
+var CAssetName = styled9.div`
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+`;
+var CAssetLogo = styled9.img`
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  object-fit: cover;
+  flex-shrink: 0;
+`;
+var CUnitsCell = styled9.div`
+  font-size: 0.78rem;
+  color: rgba(255, 255, 255, 0.8);
+  font-variant-numeric: tabular-nums;
+`;
+var CPnlCell = styled9.div``;
+var CPnlValue = styled9.div`
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: ${(p) => p.$positive ? "#0ecb81" : "#f6465d"};
+  font-variant-numeric: tabular-nums;
+`;
+var CPnlPct = styled9.div`
+  font-size: 0.62rem;
+  color: ${(p) => p.$positive ? "rgba(14, 203, 129, 0.65)" : "rgba(246, 70, 93, 0.65)"};
+  margin-top: 1px;
+`;
+var CChevronWrap = styled9.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s;
+  transform: rotate(${(p) => p.$open ? "180deg" : "0deg"});
+`;
+var CExpandedWrap = styled9.div`
+  margin: 0 0.5rem 0.25rem;
+  padding: 0.4rem 0.65rem 0.5rem;
+  background: rgba(255, 255, 255, 0.035);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-top: none;
+  border-radius: 0 0 8px 8px;
+`;
+var CDetailGrid = styled9.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 24px;
+  gap: 0.45rem 0;
+`;
+var CDetailItem = styled9.div``;
+var CDLabel = styled9.div`
+  font-size: 0.6rem;
+  color: rgba(255, 255, 255, 0.3);
+  margin-bottom: 1px;
+`;
+var CDValue = styled9.div`
+  font-size: 0.78rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.85);
+  font-variant-numeric: tabular-nums;
+`;
+var CActionRow = styled9.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+`;
+var CCloseBtn = styled9.button`
+  background: transparent;
+  border: 1px solid rgba(230, 200, 126, 0.25);
+  border-radius: 6px;
+  padding: 0.45rem 0.6rem;
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: #E6C87E;
+  cursor: pointer;
+  white-space: nowrap;
+  text-align: center;
+  transition: all 0.15s ease;
+  &:hover {
+    background: rgba(230, 200, 126, 0.1);
+    border-color: rgba(230, 200, 126, 0.5);
+  }
+`;
 function PropertyBuy({
   propertyName = "Loaf Property",
   propertyLocation: propertyLocationLabel = "Sydney, NSW",