@loafmarkets/ui 0.1.164 → 0.1.166

package/dist/index.mjs

@@ -7946,6 +7946,7 @@ function GalleryMapSection({
   const [showVideo, setShowVideo] = useState(false);
   const [autoPlaying, setAutoPlaying] = useState(autoPlay);
   const [showFullMap, setShowFullMap] = useState(false);
+  const [showFullVideo, setShowFullVideo] = useState(false);
   const resolvedMapUrl = mapUrl ?? (tokenName ? `/map/${tokenName}?embed=true&zoom=14&hideOthers=true` : "about:blank");
   useEffect(() => {
     if (!autoPlaying || images.length <= 1) return;
@@ -8004,7 +8005,7 @@ function GalleryMapSection({
             setCarouselIndex(actualIndex);
           }, children: /* @__PURE__ */ jsx("img", { src: img.src, alt: img.title }) }, actualIndex);
         }) }),
-        (floorplanIndex !== -1 || videoUrl) && /* @__PURE__ */ jsx(ThumbDivider, {}),
+        /* @__PURE__ */ jsx(ThumbDivider, {}),
         /* @__PURE__ */ jsxs(FixedButtons, { children: [
           floorplanIndex !== -1 && /* @__PURE__ */ jsxs(FixedBtn, { $active: isFloorplan, onClick: () => {
             stopAutoPlay();
@@ -8018,9 +8019,13 @@ function GalleryMapSection({
             ] }),
             "Floor Plan"
           ] }),
-          videoUrl && /* @__PURE__ */ jsxs(FixedBtn, { $active: showVideo, onClick: () => setShowVideo((p) => !p), children: [
+          videoUrl && /* @__PURE__ */ jsxs(FixedBtn, { $active: false, onClick: () => setShowFullVideo(true), children: [
             /* @__PURE__ */ jsx(BiVideo, { size: 16 }),
             " Video"
+          ] }),
+          /* @__PURE__ */ jsxs(FixedBtn, { $active: false, onClick: () => setShowFullMap(true), children: [
+            /* @__PURE__ */ jsx(BiMap, { size: 16 }),
+            " Map View"
           ] })
         ] })
       ] }),
@@ -8089,7 +8094,8 @@ function GalleryMapSection({
         /* @__PURE__ */ jsx(SuburbDesc, { children: "Premium harbourside suburb on Sydney's Lower North Shore. Known for heritage homes, village atmosphere, and proximity to Taronga Zoo and Balmoral Beach." })
       ] })
     ] }),
-    showFullMap && /* @__PURE__ */ jsx(FullMapPopup, { onClose: () => setShowFullMap(false) })
+    showFullMap && /* @__PURE__ */ jsx(FullMapPopup, { onClose: () => setShowFullMap(false) }),
+    showFullVideo && videoUrl && /* @__PURE__ */ jsx(FullVideoPopup, { videoUrl, onClose: () => setShowFullVideo(false) })
   ] });
 }
 function FullMapPopup({ onClose }) {
@@ -8145,6 +8151,25 @@ function FullMapPopup({ onClose }) {
     ) })
   ] }) });
 }
+function FullVideoPopup({ videoUrl, onClose }) {
+  useEffect(() => {
+    const handleEsc = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleEsc);
+    return () => window.removeEventListener("keydown", handleEsc);
+  }, [onClose]);
+  return /* @__PURE__ */ jsx(FullMapOverlay, { onClick: onClose, children: /* @__PURE__ */ jsxs(FullMapPanel, { onClick: (e) => e.stopPropagation(), style: { maxWidth: 1e3 }, children: [
+    /* @__PURE__ */ jsxs(FullMapHeader, { children: [
+      /* @__PURE__ */ jsxs(FullMapTitle, { children: [
+        /* @__PURE__ */ jsx(BiVideo, {}),
+        " Property Video"
+      ] }),
+      /* @__PURE__ */ jsx(FullMapClose, { onClick: onClose, "aria-label": "Close video", children: "\u2715" })
+    ] }),
+    /* @__PURE__ */ jsx(FullVideoFrame, { children: /* @__PURE__ */ jsx("video", { autoPlay: true, loop: true, playsInline: true, controls: true, style: { width: "100%", height: "100%", objectFit: "contain", background: "#000", borderRadius: 8 }, children: /* @__PURE__ */ jsx("source", { src: videoUrl, type: "video/mp4" }) }) })
+  ] }) });
+}
 var Row = styled9.div`
   display: grid;
   grid-template-columns: 2fr 1fr;
@@ -8367,6 +8392,14 @@ var FullMapFrame = styled9.div`
   flex: 1;
   min-height: 0;
 `;
+var FullVideoFrame = styled9.div`
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1rem 1rem;
+`;
 var BedIcon = /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ jsx("path", { d: "M2 4v16" }),
   /* @__PURE__ */ jsx("path", { d: "M2 8h18a2 2 0 0 1 2 2v10" }),
@@ -8428,32 +8461,36 @@ function truncateAddress(addr) {
   if (addr.length <= 12) return addr;
   return `${addr.slice(0, 6)}...${addr.slice(-4)}`;
 }
-function generateDividendHistory(valuation, totalTokens, tokenPrice) {
+function generateDividendHistory(valuation, totalTokens, tokenPrice, realPriceHistory) {
   if (valuation <= 0 || !totalTokens || !tokenPrice) return { records: [], priceHistory: [] };
   const annualDiv = valuation * 0.02;
   const monthlyDivPerShare = annualDiv / 12 / totalTokens;
   const records = [];
-  const priceHistory = [];
+  const priceHistory = realPriceHistory?.length ? realPriceHistory.map((c) => ({ time: typeof c.time === "number" && c.time < 1e12 ? c.time * 1e3 : c.time, price: c.close })) : (() => {
+    const pts = [];
+    let price = tokenPrice * 0.84;
+    for (let i = 365; i >= 0; i--) {
+      const t = Date.now() - i * 864e5;
+      const progress = (365 - i) / 365;
+      const target = tokenPrice * (0.84 + progress * 0.16);
+      price += (target - price) * 0.03 + (Math.random() - 0.5) * 0.8;
+      price = Math.max(tokenPrice * 0.75, price);
+      pts.push({ time: t, price: Math.round(price * 100) / 100 });
+    }
+    return pts;
+  })();
   const now = /* @__PURE__ */ new Date();
-  let price = tokenPrice * 0.84;
-  for (let i = 365; i >= 0; i--) {
-    const t = Date.now() - i * 864e5;
-    const progress = (365 - i) / 365;
-    const target = tokenPrice * (0.84 + progress * 0.16);
-    price += (target - price) * 0.03 + (Math.random() - 0.5) * 0.8;
-    price = Math.max(tokenPrice * 0.75, price);
-    priceHistory.push({ time: t, price: Math.round(price * 100) / 100 });
-  }
   for (let i = 11; i >= 0; i--) {
     const exDate = new Date(now.getFullYear(), now.getMonth() - i, 1);
     const exTime = exDate.getTime();
     const closest = priceHistory.reduce((best, p) => Math.abs(p.time - exTime) < Math.abs(best.time - exTime) ? p : best);
     const priceAtEx = closest.price;
+    const annualisedYield = priceAtEx > 0 ? monthlyDivPerShare * 12 / priceAtEx * 100 : 2;
     records.push({
       exDate: exDate.toLocaleDateString("en-AU", { day: "2-digit", month: "short", year: "numeric" }),
       payDate: new Date(exDate.getFullYear(), exDate.getMonth(), 15).toLocaleDateString("en-AU", { day: "2-digit", month: "short", year: "numeric" }),
       perShare: monthlyDivPerShare,
-      yieldPct: monthlyDivPerShare * 12 / priceAtEx * 100
+      yieldPct: annualisedYield
     });
   }
   return { records, priceHistory };
@@ -8487,7 +8524,8 @@ function PropertyOverview({
   percentageTokenized,
   volume24h,
   openOrdersValue,
-  holderCount
+  holderCount,
+  priceHistory: priceHistoryProp
 }) {
   const [isDescExpanded, setDescExpanded] = useState(false);
   const [showDividendHistory, setShowDividendHistory] = useState(false);
@@ -8647,6 +8685,7 @@ function PropertyOverview({
         totalTokens: resolvedTokensIssued,
         tokenPrice: tokenPriceValue,
         ticker,
+        priceHistory: priceHistoryProp,
         onClose: () => setShowDividendHistory(false)
       }
     ),
@@ -8779,9 +8818,10 @@ function DividendHistoryPopup({
   totalTokens,
   tokenPrice,
   ticker,
+  priceHistory: realPriceHistory,
   onClose
 }) {
-  const { records, priceHistory } = generateDividendHistory(valuation ?? 0, totalTokens ?? 0, tokenPrice ?? 0);
+  const { records, priceHistory } = generateDividendHistory(valuation ?? 0, totalTokens ?? 0, tokenPrice ?? 0, realPriceHistory);
   useEffect(() => {
     const handleEsc = (e) => {
       if (e.key === "Escape") onClose();