@loafmarkets/ui 0.1.209 → 0.1.210

package/dist/index.mjs

@@ -8497,6 +8497,7 @@ function PropertyOverview({
 }) {
   const [isDescExpanded, setDescExpanded] = useState(false);
   const [showDividendHistory, setShowDividendHistory] = useState(false);
+  const [showHolders, setShowHolders] = useState(false);
   const [copiedAddress, setCopiedAddress] = useState(false);
   const description = descriptionProp ?? overviewData?.description ?? DEFAULT_DESCRIPTION;
   const landSize = landProp ?? overviewData?.landSizeSqm ?? null;
@@ -8634,7 +8635,7 @@ function PropertyOverview({
           /* @__PURE__ */ jsx(StatsColumnHeader, { children: "Token Performance" }),
           tokenStats.map((item) => /* @__PURE__ */ jsxs(StatRow, { $gold: !!item.gold, children: [
             /* @__PURE__ */ jsx(StatLabel, { children: item.label }),
-            /* @__PURE__ */ jsx(StatValue, { $gold: !!item.gold, children: item.value })
+            item.label === "Holders" && holderCount != null ? /* @__PURE__ */ jsx(StatValueClickable, { onClick: () => setShowHolders(true), children: item.value }) : /* @__PURE__ */ jsx(StatValue, { $gold: !!item.gold, children: item.value })
           ] }, item.label)),
           holdRatio && /* @__PURE__ */ jsxs(HoldRatioWrap, { children: [
             /* @__PURE__ */ jsxs(HoldRatioTitle, { children: [
@@ -8681,6 +8682,14 @@ function PropertyOverview({
         onClose: () => setShowDividendHistory(false)
       }
     ),
+    showHolders && /* @__PURE__ */ jsx(
+      HoldersPopup,
+      {
+        contractAddress,
+        ticker,
+        onClose: () => setShowHolders(false)
+      }
+    ),
     galleryImages.length > 0 && /* @__PURE__ */ jsx(GalleryBreakout, { children: /* @__PURE__ */ jsx(
       GalleryMapSection,
       {
@@ -9066,6 +9075,65 @@ function DividendHistoryPopup({
     ] }) })
   ] }) });
 }
+var MOCK_HOLDERS = [
+  { rank: 1, address: "0xA1b2...9F3e", label: "Loaf Treasury", tokens: 12500, pct: 25 },
+  { rank: 2, address: "0xC4d5...1A7b", label: null, tokens: 6200, pct: 12.4 },
+  { rank: 3, address: "0xE8f9...3C2d", label: null, tokens: 4800, pct: 9.6 },
+  { rank: 4, address: "0x2B3c...7D4e", label: "Market Maker", tokens: 3500, pct: 7 },
+  { rank: 5, address: "0x5F6a...8E1c", label: null, tokens: 2900, pct: 5.8 },
+  { rank: 6, address: "0x7A8b...0F2d", label: null, tokens: 2400, pct: 4.8 },
+  { rank: 7, address: "0x9C0d...4A3e", label: null, tokens: 1800, pct: 3.6 },
+  { rank: 8, address: "0xB1e2...6C5f", label: null, tokens: 1500, pct: 3 },
+  { rank: 9, address: "0xD3f4...8E7a", label: null, tokens: 1200, pct: 2.4 },
+  { rank: 10, address: "0xF5a6...2B9c", label: null, tokens: 950, pct: 1.9 }
+];
+function HoldersPopup({
+  contractAddress,
+  ticker,
+  onClose
+}) {
+  useEffect(() => {
+    const handleEsc = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleEsc);
+    return () => window.removeEventListener("keydown", handleEsc);
+  }, [onClose]);
+  const basescanUrl = contractAddress ? `https://basescan.org/token/${contractAddress}#balances` : "https://basescan.org";
+  return /* @__PURE__ */ jsx(DivPopupOverlay, { onClick: onClose, children: /* @__PURE__ */ jsxs(HoldersPanel, { onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs(DivPopupHeader, { children: [
+      /* @__PURE__ */ jsxs(DivPopupTitle, { children: [
+        "Top Holders",
+        ticker ? ` (${ticker})` : ""
+      ] }),
+      /* @__PURE__ */ jsxs(HoldersHeaderRight, { children: [
+        /* @__PURE__ */ jsx(HoldersBasescanLink, { href: basescanUrl, target: "_blank", rel: "noopener noreferrer", children: "View on BaseScan\xA0\u2197" }),
+        /* @__PURE__ */ jsx(DivPopupClose, { onClick: onClose, "aria-label": "Close holders", children: "\u2715" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(HoldersTableWrap, { children: [
+      /* @__PURE__ */ jsxs(HoldersTableHeader, { children: [
+        /* @__PURE__ */ jsx(HoldersColRank, { children: "#" }),
+        /* @__PURE__ */ jsx(HoldersColAddr, { children: "Address" }),
+        /* @__PURE__ */ jsx(HoldersColTokens, { children: "Tokens" }),
+        /* @__PURE__ */ jsx(HoldersColPct, { children: "%" })
+      ] }),
+      MOCK_HOLDERS.map((h) => /* @__PURE__ */ jsxs(HoldersTableRow, { children: [
+        /* @__PURE__ */ jsx(HoldersColRank, { children: h.rank }),
+        /* @__PURE__ */ jsxs(HoldersColAddr, { children: [
+          /* @__PURE__ */ jsx(HolderAddrLink, { href: `https://basescan.org/address/${h.address.replace("...", "")}`, target: "_blank", rel: "noopener noreferrer", children: h.address }),
+          h.label && /* @__PURE__ */ jsx(HolderLabel, { children: h.label })
+        ] }),
+        /* @__PURE__ */ jsx(HoldersColTokens, { children: h.tokens.toLocaleString() }),
+        /* @__PURE__ */ jsxs(HoldersColPct, { children: [
+          h.pct.toFixed(1),
+          "%"
+        ] })
+      ] }, h.rank))
+    ] }),
+    /* @__PURE__ */ jsx(HoldersFooter, { children: /* @__PURE__ */ jsx(HoldersFullListBtn, { href: basescanUrl, target: "_blank", rel: "noopener noreferrer", children: "See Full List of Holders\xA0\u2197" }) })
+  ] }) });
+}
 var Wrapper = styled9.div`
   display: flex;
   flex-direction: column;
@@ -9850,6 +9918,133 @@ var DivTableTD = styled9.td`
   font-size: 0.82rem;
   color: rgba(255,255,255,0.75);
 `;
+var HoldersPanel = styled9.div`
+  background: #111;
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 14px;
+  width: 90%;
+  max-width: 520px;
+  max-height: 85vh;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+`;
+var HoldersHeaderRight = styled9.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+`;
+var HoldersBasescanLink = styled9.a`
+  font-size: 0.75rem;
+  color: rgba(255,255,255,0.4);
+  text-decoration: none;
+  transition: color 0.15s;
+  &:hover { color: rgba(212,175,55,0.9); }
+`;
+var HoldersTableWrap = styled9.div`
+  padding: 0 1.5rem;
+`;
+var HoldersTableHeader = styled9.div`
+  display: flex;
+  align-items: center;
+  padding: 0.6rem 0;
+  border-bottom: 1px solid rgba(255,255,255,0.08);
+  font-size: 0.65rem;
+  font-weight: 500;
+  color: rgba(255,255,255,0.4);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+`;
+var HoldersTableRow = styled9.div`
+  display: flex;
+  align-items: center;
+  padding: 0.6rem 0;
+  border-bottom: 1px solid rgba(255,255,255,0.03);
+  font-size: 0.82rem;
+  color: rgba(255,255,255,0.75);
+  border-radius: 6px;
+  transition: background 0.15s;
+  &:hover { background: rgba(255,255,255,0.03); }
+  &:last-child { border-bottom: none; }
+`;
+var HoldersColRank = styled9.span`
+  width: 32px;
+  flex-shrink: 0;
+  color: rgba(255,255,255,0.35);
+  font-size: 0.75rem;
+`;
+var HoldersColAddr = styled9.span`
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+`;
+var HolderAddrLink = styled9.a`
+  font-family: monospace;
+  font-size: 0.8rem;
+  color: rgba(255,255,255,0.7);
+  text-decoration: none;
+  &:hover { color: rgba(212,175,55,0.9); }
+`;
+var HolderLabel = styled9.span`
+  font-size: 0.68rem;
+  color: rgba(212,175,55,0.7);
+  background: rgba(212,175,55,0.08);
+  padding: 1px 6px;
+  border-radius: 4px;
+  white-space: nowrap;
+`;
+var HoldersColTokens = styled9.span`
+  width: 90px;
+  text-align: right;
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+`;
+var HoldersColPct = styled9.span`
+  width: 55px;
+  text-align: right;
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+  color: rgba(255,255,255,0.5);
+`;
+var HoldersFooter = styled9.div`
+  padding: 1rem 1.5rem 1.25rem;
+  display: flex;
+  justify-content: center;
+`;
+var HoldersFullListBtn = styled9.a`
+  display: inline-flex;
+  align-items: center;
+  padding: 0.55rem 1.5rem;
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 8px;
+  background: rgba(255,255,255,0.03);
+  color: rgba(255,255,255,0.6);
+  font-size: 0.78rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+  &:hover {
+    border-color: rgba(212,175,55,0.4);
+    color: rgba(212,175,55,0.9);
+    background: rgba(212,175,55,0.05);
+  }
+`;
+var StatValueClickable = styled9.span`
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: #fff;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-color: rgba(255,255,255,0.15);
+  transition: color 0.15s, text-decoration-color 0.15s;
+  &:hover {
+    color: rgba(212,175,55,0.9);
+    text-decoration-color: rgba(212,175,55,0.5);
+  }
+`;
 var STATUS_BG = {
   active: "rgba(14,203,129,0.18)",
   rejected: "rgba(246,70,93,0.18)",