@loafmarkets/ui 0.1.143 → 0.1.145

package/dist/index.mjs

@@ -8107,8 +8107,7 @@ var Track = styled19.div`
 `;
 var Slide = styled19.div`
   min-width: 100%; position: relative; cursor: pointer;
-  img { width: 100%; height: 500px; object-fit: cover; border-radius: 8px; }
-  @media (max-width: 768px) { img { height: 280px; } }
+  img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; }
 `;
 var SlideCaption = styled19.div`
   position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem;
@@ -8298,7 +8297,10 @@ function PropertyOverview({
   ticker,
   contractAddress,
   chain = "Base (Ethereum L2)",
-  percentageTokenized
+  percentageTokenized,
+  volume24h,
+  openOrdersValue,
+  holderCount
 }) {
   const [isDescExpanded, setDescExpanded] = useState(false);
   const description = descriptionProp ?? overviewData?.description ?? DEFAULT_DESCRIPTION;
@@ -8335,7 +8337,7 @@ function PropertyOverview({
   const tokenPriceValue = midPrice > 0 ? midPrice : null;
   const weeklyRent = overviewData?.weeklyRent ?? 0;
   const annualRent = weeklyRent * 52;
-  const dividendYield = resolvedValuation && annualRent > 0 ? (annualRent / resolvedValuation * 100).toFixed(2) : null;
+  resolvedValuation && annualRent > 0 ? (annualRent / resolvedValuation * 100).toFixed(2) : null;
   const monthlyCoupon = annualRent / 12;
   const tokenMarketCap = tokenPriceValue && resolvedTokensIssued ? tokenPriceValue * resolvedTokensIssued : null;
   const currentDividendYield = tokenMarketCap && monthlyCoupon > 0 ? (monthlyCoupon * 12 / tokenMarketCap * 100).toFixed(2) : null;
@@ -8351,11 +8353,19 @@ function PropertyOverview({
     { label: "Property Type", value: resolvedPropertyType ?? "\u2014" },
     { label: "Location", value: location || "\u2014" }
   ];
+  const vol24hDollar = volume24h != null && tokenPriceValue ? volume24h * tokenPriceValue : null;
+  const holdRatio = (() => {
+    if (!tokenMarketCap || tokenMarketCap <= 0 || vol24hDollar == null) return null;
+    const turnover = vol24hDollar / (tokenMarketCap / 2);
+    const holdPct = Math.max(0, Math.min(100, (1 - turnover) * 100));
+    return { holdPct, tradePct: +(100 - holdPct).toFixed(1) };
+  })();
   const tokenStats = [
     { label: "Token Price", value: isLoading && tokenPriceValue == null ? loadingSkeleton : tokenPriceValue ? `$${tokenPriceValue.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : "\u2014", gold: true },
-    { label: "Property Value", value: isLoading && resolvedValuation == null ? loadingSkeleton : resolvedValuation ? resolvedValuation >= 1e6 ? `$${(resolvedValuation / 1e6).toFixed(2)}M` : `$${resolvedValuation.toLocaleString()}` : "\u2014" },
-    { label: "Dividend Yield", value: isLoading && dividendYield == null ? loadingSkeleton : dividendYield ? `${dividendYield}%` : "\u2014" },
-    { label: "Total Tokens", value: isLoading && resolvedTokensIssued == null ? loadingSkeleton : resolvedTokensIssued?.toLocaleString() ?? "\u2014" }
+    { label: "24h Volume", value: isLoading && vol24hDollar == null ? loadingSkeleton : vol24hDollar != null && vol24hDollar > 0 ? `$${Math.round(vol24hDollar).toLocaleString()}` : "\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 ? `$${Math.round(openOrdersValue).toLocaleString()}` : "\u2014" },
+    { label: "Holders", value: isLoading && holderCount == null ? loadingSkeleton : holderCount != null ? holderCount.toLocaleString() : "\u2014" }
   ];
   const propertyStats = [
     { label: "Offering Valuation", value: isLoading && resolvedValuation == null ? loadingSkeleton : resolvedValuation ? resolvedValuation >= 1e6 ? `$${(resolvedValuation / 1e6).toFixed(2)}M` : `$${resolvedValuation.toLocaleString()}` : "\u2014" },
@@ -8394,7 +8404,30 @@ function PropertyOverview({
           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))
+          ] }, item.label)),
+          holdRatio && /* @__PURE__ */ jsxs(HoldRatioWrap, { children: [
+            /* @__PURE__ */ jsxs(HoldRatioTitle, { children: [
+              /* @__PURE__ */ jsx(HoldRatioTitleText, { children: "Holding Ratio" }),
+              /* @__PURE__ */ jsx(HoldRatioInfo, { "data-tip": "Proportion of token holders vs active traders over the last 24 hours, measured by trading volume against market capitalisation.", children: "?" })
+            ] }),
+            /* @__PURE__ */ jsxs(HoldRatioHeader, { children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(HoldRatioLabel, { $side: "hold", children: "Holding " }),
+                /* @__PURE__ */ jsxs(HoldRatioValue, { $side: "hold", children: [
+                  holdRatio.holdPct.toFixed(1),
+                  "%"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs(HoldRatioValue, { $side: "trade", children: [
+                  holdRatio.tradePct,
+                  "%"
+                ] }),
+                /* @__PURE__ */ jsx(HoldRatioLabel, { $side: "trade", children: " Trading" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(HoldRatioTrack, { children: /* @__PURE__ */ jsx(HoldRatioFill, { $pct: holdRatio.holdPct }) })
+          ] })
         ] }),
         /* @__PURE__ */ jsxs(StatsColumn, { children: [
           /* @__PURE__ */ jsx(StatsColumnHeader, { children: "Property Fundamentals" }),
@@ -8783,6 +8816,101 @@ var ProtectionDesc = styled19.div`
   color: rgba(255,255,255,0.5);
   line-height: 1.5;
 `;
+var HoldRatioWrap = styled19.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 0.75rem 0 0;
+  margin-top: 0.5rem;
+  border-top: 1px solid rgba(255,255,255,0.04);
+`;
+var HoldRatioTitle = styled19.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+var HoldRatioTitleText = styled19.span`
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: rgba(255,255,255,0.4);
+`;
+var HoldRatioInfo = styled19.span`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  border: 1px solid rgba(255,255,255,0.15);
+  font-size: 0.5rem;
+  font-weight: 700;
+  color: rgba(255,255,255,0.3);
+  cursor: help;
+  flex-shrink: 0;
+
+  &::after {
+    content: attr(data-tip);
+    position: absolute;
+    bottom: calc(100% + 6px);
+    left: 0;
+    width: max-content;
+    max-width: 260px;
+    padding: 8px 12px;
+    border-radius: 6px;
+    background: #1a1a1e;
+    border: 1px solid rgba(255,255,255,0.1);
+    color: rgba(255,255,255,0.7);
+    font-size: 0.7rem;
+    font-weight: 400;
+    letter-spacing: 0;
+    text-transform: none;
+    line-height: 1.45;
+    white-space: normal;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s;
+    z-index: 10;
+  }
+
+  &:hover::after {
+    opacity: 1;
+  }
+`;
+var HoldRatioHeader = styled19.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+var HoldRatioLabel = styled19.span`
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: ${(p) => p.$side === "trade" ? "rgba(246, 70, 93, 0.6)" : "rgba(14, 203, 129, 0.6)"};
+`;
+var HoldRatioValue = styled19.span`
+  font-size: 0.75rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: ${(p) => p.$side === "trade" ? "rgba(246, 70, 93, 0.7)" : "rgba(14, 203, 129, 0.7)"};
+`;
+var HoldRatioTrack = styled19.div`
+  height: 6px;
+  border-radius: 3px;
+  background: rgba(246, 70, 93, 0.15);
+  overflow: hidden;
+  position: relative;
+`;
+var HoldRatioFill = styled19.div`
+  height: 100%;
+  width: ${(p) => p.$pct}%;
+  border-radius: 3px;
+  background: rgba(14, 203, 129, 0.35);
+  transition: width 0.6s ease;
+`;
 var STATUS_BG = {
   active: "rgba(14,203,129,0.18)",
   rejected: "rgba(246,70,93,0.18)",