@loafmarkets/ui 0.1.191 → 0.1.193

package/dist/index.js

@@ -8522,6 +8522,7 @@ function PropertyOverview({
 }) {
   const [isDescExpanded, setDescExpanded] = React5.useState(false);
   const [showDividendHistory, setShowDividendHistory] = React5.useState(false);
+  const [copiedAddress, setCopiedAddress] = React5.useState(false);
   const description = descriptionProp ?? overviewData?.description ?? DEFAULT_DESCRIPTION;
   const landSize = landProp ?? overviewData?.landSizeSqm ?? null;
   const buildingSize = buildingProp ?? overviewData?.buildingSizeSqm ?? null;
@@ -8571,7 +8572,7 @@ function PropertyOverview({
   ] });
   const tokenDetailsItems = [
     { label: "Chain", value: chainValue },
-    { label: "On-Chain Address", value: contractAddress ? truncateAddress(contractAddress) : "\u2014", mono: true, link: contractAddress ? `https://basescan.org/address/${contractAddress}` : void 0 },
+    { label: "On-Chain Address", value: contractAddress ? truncateAddress(contractAddress) : "\u2014", mono: true, link: contractAddress ? `https://basescan.org/address/${contractAddress}` : void 0, copyValue: contractAddress },
     { label: "Token Ticker", value: ticker ?? "\u2014" },
     { label: "Total Circulating Tokens", value: isLoading && resolvedTokensIssued == null ? loadingSkeleton : resolvedTokensIssued?.toLocaleString() ?? "\u2014" },
     { label: "Percentage Tokenized", value: percentageTokenized != null ? `${percentageTokenized}%` : "\u2014" },
@@ -8585,21 +8586,26 @@ function PropertyOverview({
     const holdPct = Math.max(0, Math.min(100, (1 - turnover) * 100));
     return { holdPct, tradePct: +(100 - holdPct).toFixed(1) };
   })();
+  const fmtDollar = (v) => {
+    if (v >= 1e6) return `$${(v / 1e6).toFixed(2)}M`;
+    if (v >= 1e3) return `$${Math.round(v).toLocaleString()}`;
+    return `$${v.toFixed(2)}`;
+  };
   const tokenStats = [
-    { label: "Token Price", value: isLoading && tokenPriceValue == null ? loadingSkeleton : tokenPriceValue ? `$${tokenPriceValue.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : "\u2014", gold: true },
-    { label: "24h Volume", value: isLoading && vol24hDollar == null ? loadingSkeleton : vol24hDollar != null && vol24hDollar > 0 ? `$${vol24hDollar.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : "\u2014" },
-    { label: "Current Dividend Yield", value: isLoading && currentDividendYield == null ? loadingSkeleton : currentDividendYield ? `${currentDividendYield}%` : "\u2014" },
-    { label: "Open Orders", value: isLoading && openOrdersValue == null ? loadingSkeleton : openOrdersValue != null && openOrdersValue > 0 ? `$${openOrdersValue.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : "\u2014" },
-    { label: "Token Holders", value: isLoading && holderCount == null ? loadingSkeleton : holderCount != null ? holderCount.toLocaleString() : "\u2014" }
+    { label: "Token Price", value: isLoading && tokenPriceValue == null ? loadingSkeleton : tokenPriceValue ? `$${tokenPriceValue.toFixed(2)}` : "\u2014", gold: true },
+    { label: "24h Volume", value: isLoading && vol24hDollar == null ? loadingSkeleton : vol24hDollar != null && vol24hDollar > 0 ? fmtDollar(vol24hDollar) : "\u2014" },
+    { label: "Dividend Yield", value: isLoading && currentDividendYield == null ? loadingSkeleton : currentDividendYield ? `${currentDividendYield}%` : "\u2014" },
+    { label: "Open Orders", value: isLoading && openOrdersValue == null ? loadingSkeleton : openOrdersValue != null && openOrdersValue > 0 ? fmtDollar(openOrdersValue) : "\u2014" },
+    { label: "Holders", value: isLoading && holderCount == null ? loadingSkeleton : holderCount != null ? holderCount.toLocaleString() : "\u2014" }
   ];
   const annualDividend = resolvedValuation ? resolvedValuation * 0.02 : null;
   const monthlyDivPerShare = annualDividend && resolvedTokensIssued ? annualDividend / 12 / resolvedTokensIssued : null;
   const propertyStats = [
-    { label: "Property Value", value: isLoading && tokenMarketCap == null ? loadingSkeleton : tokenMarketCap ? tokenMarketCap >= 1e6 ? `$${(tokenMarketCap / 1e6).toFixed(1)}M` : `$${tokenMarketCap.toLocaleString()}` : "\u2014" },
-    { label: "Number of Offers", value: "3" },
-    { label: "Growth (Past 5 Years)", value: "+90%" },
-    { label: "Last Dividend", value: isLoading && monthlyDivPerShare == null ? loadingSkeleton : monthlyDivPerShare != null ? `${(monthlyDivPerShare * 100).toFixed(1)}c per Share` : "\u2014" },
-    { label: "Upcoming Dividend", value: (() => {
+    { label: "Property Value", value: isLoading && tokenMarketCap == null ? loadingSkeleton : tokenMarketCap ? fmtDollar(tokenMarketCap) : "\u2014" },
+    { label: "Offers", value: "3" },
+    { label: "Growth (5yr)", value: "+90%" },
+    { label: "Last Dividend", value: isLoading && monthlyDivPerShare == null ? loadingSkeleton : monthlyDivPerShare != null ? `$${monthlyDivPerShare.toFixed(2)}` : "\u2014" },
+    { label: "Next Dividend", value: (() => {
       const now = /* @__PURE__ */ new Date();
       const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);
       while (lastDay.getDay() === 0 || lastDay.getDay() === 6) lastDay.setDate(lastDay.getDate() - 1);
@@ -8625,7 +8631,24 @@ function PropertyOverview({
             /* @__PURE__ */ jsxRuntime.jsx(TokenDetailsTitle, { children: "Token Details" }),
             tokenDetailsItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(TokenDetailRow, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(TokenDetailLabel, { children: item.label }),
-              /* @__PURE__ */ jsxRuntime.jsx(TokenDetailValue, { $mono: !!item.mono, children: item.link ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.link, target: "_blank", rel: "noopener noreferrer", style: { color: "#3380FF", textDecoration: "none" }, children: item.value }) : item.value })
+              /* @__PURE__ */ jsxRuntime.jsxs(TokenDetailValue, { $mono: !!item.mono, children: [
+                item.link ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.link, target: "_blank", rel: "noopener noreferrer", style: { color: "#3380FF", textDecoration: "none" }, children: item.value }) : item.value,
+                item.copyValue && /* @__PURE__ */ jsxRuntime.jsx(
+                  CopyBtn,
+                  {
+                    onClick: () => {
+                      navigator.clipboard.writeText(item.copyValue);
+                      setCopiedAddress(true);
+                      setTimeout(() => setCopiedAddress(false), 1500);
+                    },
+                    title: copiedAddress ? "Copied!" : "Copy address",
+                    children: copiedAddress ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6L9 17l-5-5" }) }) : /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(TrustBadgesCard, { children: [
@@ -8640,7 +8663,7 @@ function PropertyOverview({
                 /* @__PURE__ */ jsxRuntime.jsx(TrustBadgeLabel, { children: "Land Title" })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(TrustBadge, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(TrustBadgeLogoWrap, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: "/savills.png", alt: "Savills", style: { height: 38, borderRadius: 3, opacity: 0.85 } }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(TrustBadgeLogoWrap, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TrustBadgeLabel, { children: "Valuation" })
               ] })
             ] })
@@ -9333,6 +9356,18 @@ var TrustBadgeLabel = styled9__default.default.span`
   font-weight: 400;
   text-align: center;
 `;
+var CopyBtn = styled9__default.default.button`
+  background: none;
+  border: none;
+  color: rgba(255,255,255,0.3);
+  cursor: pointer;
+  padding: 2px;
+  margin-left: 6px;
+  display: inline-flex;
+  align-items: center;
+  transition: color 0.15s;
+  &:hover { color: rgba(255,255,255,0.7); }
+`;
 var ChainLogos = styled9__default.default.span`
   display: inline-flex;
   align-items: center;