@loafmarkets/ui 0.1.208 → 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;
@@ -8601,46 +8602,30 @@ function PropertyOverview({
             /* @__PURE__ */ jsx(PrimaryBtn, { onClick: onTradeClick, children: tradeButtonLabel })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs(AboutRight, { children: [
-          /* @__PURE__ */ jsxs(TokenDetailsCard, { children: [
-            /* @__PURE__ */ jsx(TokenDetailsTitle, { children: "Token Details" }),
-            tokenDetailsItems.map((item) => /* @__PURE__ */ jsxs(TokenDetailRow, { children: [
-              /* @__PURE__ */ jsx(TokenDetailLabel, { children: item.label }),
-              /* @__PURE__ */ jsxs(TokenDetailValue, { $mono: !!item.mono, children: [
-                item.link ? /* @__PURE__ */ jsx("a", { href: item.link, target: "_blank", rel: "noopener noreferrer", style: { color: "#3380FF", textDecoration: "none" }, children: item.value }) : item.value,
-                item.copyValue && /* @__PURE__ */ jsx(
-                  CopyBtn,
-                  {
-                    onClick: () => {
-                      navigator.clipboard.writeText(item.copyValue);
-                      setCopiedAddress(true);
-                      setTimeout(() => setCopiedAddress(false), 1500);
-                    },
-                    title: copiedAddress ? "Copied!" : "Copy address",
-                    children: copiedAddress ? /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" }) }) : /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                      /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
-                      /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
-                    ] })
-                  }
-                )
-              ] })
-            ] }, item.label))
-          ] }),
-          /* @__PURE__ */ jsx(TrustBadgesCard, { children: /* @__PURE__ */ jsxs(TrustBadgesRow, { children: [
-            /* @__PURE__ */ jsxs(TrustBadge, { children: [
-              /* @__PURE__ */ jsx(TrustBadgeLogoWrap, { children: /* @__PURE__ */ jsx("img", { src: "/Baker_McKenzie.png", alt: "Baker McKenzie", style: { height: 38, filter: "grayscale(1) brightness(10)", opacity: 0.5 } }) }),
-              /* @__PURE__ */ jsx(TrustBadgeLabel, { children: "Legal Structuring" })
-            ] }),
-            /* @__PURE__ */ jsxs(TrustBadge, { children: [
-              /* @__PURE__ */ jsx(TrustBadgeLogoWrap, { children: /* @__PURE__ */ jsx("img", { src: "/NSW_registry.png", alt: "NSW Land Registry", style: { height: 40, filter: "grayscale(1) brightness(10)", opacity: 0.5 } }) }),
-              /* @__PURE__ */ jsx(TrustBadgeLabel, { children: "Land Title" })
-            ] }),
-            /* @__PURE__ */ jsxs(TrustBadge, { children: [
-              /* @__PURE__ */ jsx(TrustBadgeLogoWrap, { children: /* @__PURE__ */ jsx("img", { src: "/savills.png", alt: "Savills", style: { height: 38, borderRadius: 3, filter: "grayscale(1) brightness(1.2) contrast(1.6)", opacity: 0.7 } }) }),
-              /* @__PURE__ */ jsx(TrustBadgeLabel, { children: "Valuation" })
+        /* @__PURE__ */ jsx(AboutRight, { children: /* @__PURE__ */ jsxs(TokenDetailsCard, { children: [
+          /* @__PURE__ */ jsx(TokenDetailsTitle, { children: "Token Details" }),
+          tokenDetailsItems.map((item) => /* @__PURE__ */ jsxs(TokenDetailRow, { children: [
+            /* @__PURE__ */ jsx(TokenDetailLabel, { children: item.label }),
+            /* @__PURE__ */ jsxs(TokenDetailValue, { $mono: !!item.mono, children: [
+              item.link ? /* @__PURE__ */ jsx("a", { href: item.link, target: "_blank", rel: "noopener noreferrer", style: { color: "#3380FF", textDecoration: "none" }, children: item.value }) : item.value,
+              item.copyValue && /* @__PURE__ */ jsx(
+                CopyBtn,
+                {
+                  onClick: () => {
+                    navigator.clipboard.writeText(item.copyValue);
+                    setCopiedAddress(true);
+                    setTimeout(() => setCopiedAddress(false), 1500);
+                  },
+                  title: copiedAddress ? "Copied!" : "Copy address",
+                  children: copiedAddress ? /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" }) }) : /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                    /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+                    /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+                  ] })
+                }
+              )
             ] })
-          ] }) })
-        ] })
+          ] }, item.label))
+        ] }) })
       ] })
     ] }),
     /* @__PURE__ */ jsxs(Section, { children: [
@@ -8650,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: [
@@ -8697,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,
       {
@@ -9082,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;
@@ -9217,7 +9269,7 @@ var TokenDetailValue = styled9.span`
   font-weight: 500;
   font-family: ${(p) => p.$mono ? "'SF Mono', 'Fira Code', monospace" : "inherit"};
 `;
-var TrustBadgesCard = styled9.div`
+styled9.div`
   background: rgba(255,255,255,0.025);
   border: 1px solid rgba(255,255,255,0.06);
   border-radius: 10px;
@@ -9231,12 +9283,12 @@ styled9.div`
   font-weight: 500;
   margin-bottom: 0.85rem;
 `;
-var TrustBadgesRow = styled9.div`
+styled9.div`
   display: flex;
   gap: 0.5rem;
   justify-content: space-between;
 `;
-var TrustBadge = styled9.div`
+styled9.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -9244,13 +9296,13 @@ var TrustBadge = styled9.div`
   flex: 1;
   min-width: 0;
 `;
-var TrustBadgeLogoWrap = styled9.div`
+styled9.div`
   display: flex;
   align-items: center;
   justify-content: center;
   height: 44px;
 `;
-var TrustBadgeLabel = styled9.span`
+styled9.span`
   font-size: 0.62rem;
   color: rgba(255,255,255,0.35);
   font-weight: 400;
@@ -9866,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)",