@loafmarkets/ui 0.1.212 → 0.1.214

package/dist/index.mjs

@@ -8499,6 +8499,7 @@ function PropertyOverview({
   const [showDividendHistory, setShowDividendHistory] = useState(false);
   const [showHolders, setShowHolders] = useState(false);
   const [copiedAddress, setCopiedAddress] = useState(false);
+  const [statsTab, setStatsTab] = useState("token");
   const description = descriptionProp ?? overviewData?.description ?? DEFAULT_DESCRIPTION;
   const landSize = landProp ?? overviewData?.landSizeSqm ?? null;
   const buildingSize = buildingProp ?? overviewData?.buildingSizeSqm ?? null;
@@ -8556,7 +8557,7 @@ function PropertyOverview({
     { 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));
@@ -8630,46 +8631,40 @@ function PropertyOverview({
     ] }),
     /* @__PURE__ */ jsxs(Section, { children: [
       /* @__PURE__ */ jsx(SectionHeader, { children: "Statistics" }),
-      /* @__PURE__ */ jsxs(StatsGrid, { children: [
-        /* @__PURE__ */ jsxs(StatsColumn, { children: [
-          /* @__PURE__ */ jsx(StatsColumnHeader, { children: "Token Performance" }),
-          tokenStats.map((item) => /* @__PURE__ */ jsxs(StatRow, { $gold: !!item.gold, children: [
-            /* @__PURE__ */ jsx(StatLabel, { children: item.label }),
-            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: [
-              /* @__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(StatsDesktop, { children: [
+        /* @__PURE__ */ jsxs(StatsRowSection, { children: [
+          /* @__PURE__ */ jsx(StatsRowLabel, { children: "Token Performance" }),
+          /* @__PURE__ */ jsx(StatsHRow, { children: tokenStats.map((item) => /* @__PURE__ */ jsxs(StatsHCell, { children: [
+            /* @__PURE__ */ jsx(StatsHCellLabel, { children: item.label }),
+            item.label === "Holders" && holderCount != null ? /* @__PURE__ */ jsx(StatValueClickable, { onClick: () => setShowHolders(true), children: item.value }) : /* @__PURE__ */ jsx(StatsHCellValue, { $gold: !!item.gold, children: item.value })
+          ] }, item.label)) })
         ] }),
-        /* @__PURE__ */ jsxs(StatsColumn, { children: [
-          /* @__PURE__ */ jsx(StatsColumnHeader, { children: "Property Fundamentals" }),
+        /* @__PURE__ */ jsxs(StatsRowSection, { children: [
+          /* @__PURE__ */ jsx(StatsRowLabel, { children: "Property Fundamentals" }),
+          /* @__PURE__ */ jsx(StatsHRow, { children: propertyStats.map((item) => /* @__PURE__ */ jsxs(StatsHCell, { children: [
+            /* @__PURE__ */ jsx(StatsHCellLabel, { children: item.label }),
+            /* @__PURE__ */ jsx(StatsHCellValue, { children: item.value })
+          ] }, item.label)) }),
+          /* @__PURE__ */ jsx(DividendHistoryBtn, { onClick: () => setShowDividendHistory(true), children: "See Dividend History \u2192" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(StatsMobile, { children: /* @__PURE__ */ jsxs(StatsTabbedCard, { children: [
+        /* @__PURE__ */ jsxs(StatsTabBar, { children: [
+          /* @__PURE__ */ jsx(StatsTab, { $active: statsTab === "token", onClick: () => setStatsTab("token"), children: "Token" }),
+          /* @__PURE__ */ jsx(StatsTab, { $active: statsTab === "property", onClick: () => setStatsTab("property"), children: "Property" })
+        ] }),
+        statsTab === "token" && /* @__PURE__ */ jsx(StatsTabContent, { children: tokenStats.map((item) => /* @__PURE__ */ jsxs(StatRow, { $gold: !!item.gold, children: [
+          /* @__PURE__ */ jsx(StatLabel, { children: item.label }),
+          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)) }),
+        statsTab === "property" && /* @__PURE__ */ jsxs(StatsTabContent, { children: [
           propertyStats.map((item) => /* @__PURE__ */ jsxs(StatRow, { children: [
             /* @__PURE__ */ jsx(StatLabel, { children: item.label }),
             /* @__PURE__ */ jsx(StatValue, { children: item.value })
           ] }, item.label)),
           /* @__PURE__ */ jsx(DividendHistoryBtn, { onClick: () => setShowDividendHistory(true), children: "See Dividend History \u2192" })
         ] })
-      ] })
+      ] }) })
     ] }),
     showDividendHistory && /* @__PURE__ */ jsx(
       DividendHistoryPopup,
@@ -9330,6 +9325,89 @@ var ChainLogoImg = styled9.img`
   width: auto;
   vertical-align: middle;
 `;
+var StatsDesktop = styled9.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  @media (max-width: 768px) { display: none; }
+`;
+var StatsMobile = styled9.div`
+  display: none;
+  @media (max-width: 768px) { display: block; }
+`;
+var StatsRowSection = styled9.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+var StatsRowLabel = styled9.div`
+  font-size: 0.65rem;
+  color: #D4AF37;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-weight: 600;
+`;
+var StatsHRow = styled9.div`
+  display: flex;
+  gap: 0;
+  background: rgba(255,255,255,0.025);
+  border: 1px solid rgba(255,255,255,0.06);
+  border-radius: 10px;
+  overflow: hidden;
+`;
+var StatsHCell = styled9.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 1rem 0.75rem;
+  border-right: 1px solid rgba(255,255,255,0.04);
+  &:last-child { border-right: none; }
+  transition: background 0.15s;
+  &:hover { background: rgba(255,255,255,0.03); }
+`;
+var StatsHCellLabel = styled9.span`
+  font-size: 0.7rem;
+  color: rgba(255,255,255,0.4);
+  font-weight: 400;
+  white-space: nowrap;
+`;
+var StatsHCellValue = styled9.span`
+  font-size: 0.92rem;
+  font-weight: 500;
+  color: ${(p) => p.$gold ? "#D4AF37" : "#fff"};
+  font-variant-numeric: tabular-nums;
+`;
+var StatsTabbedCard = styled9.div`
+  background: rgba(255,255,255,0.025);
+  border: 1px solid rgba(255,255,255,0.06);
+  border-radius: 10px;
+  max-width: 400px;
+`;
+var StatsTabBar = styled9.div`
+  display: flex;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+`;
+var StatsTab = styled9.button`
+  flex: 1;
+  padding: 0.85rem 1rem;
+  background: none;
+  border: none;
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+  color: ${(p) => p.$active ? "#D4AF37" : "rgba(255,255,255,0.35)"};
+  border-bottom: 2px solid ${(p) => p.$active ? "#D4AF37" : "transparent"};
+  margin-bottom: -1px;
+  &:hover { color: ${(p) => p.$active ? "#D4AF37" : "rgba(255,255,255,0.6)"}; }
+`;
+var StatsTabContent = styled9.div`
+  padding: 0.5rem 1.25rem 1.25rem;
+`;
 var StatsGrid = styled9.div`
   display: grid;
   grid-template-columns: 340px 340px;
@@ -9712,7 +9790,7 @@ var SecurityDocLink = styled9.a`
     color: rgba(212,175,55,0.9);
   }
 `;
-var HoldRatioWrap = styled9.div`
+styled9.div`
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -9720,19 +9798,19 @@ var HoldRatioWrap = styled9.div`
   margin-top: 0.5rem;
   border-top: 1px solid rgba(255,255,255,0.04);
 `;
-var HoldRatioTitle = styled9.div`
+styled9.div`
   display: flex;
   align-items: center;
   gap: 5px;
 `;
-var HoldRatioTitleText = styled9.span`
+styled9.span`
   font-size: 0.65rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: rgba(255,255,255,0.4);
 `;
-var HoldRatioInfo = styled9.span`
+styled9.span`
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -9775,32 +9853,32 @@ var HoldRatioInfo = styled9.span`
     opacity: 1;
   }
 `;
-var HoldRatioHeader = styled9.div`
+styled9.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
 `;
-var HoldRatioLabel = styled9.span`
+styled9.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 = styled9.span`
+styled9.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 = styled9.div`
+styled9.div`
   height: 6px;
   border-radius: 3px;
   background: rgba(246, 70, 93, 0.15);
   overflow: hidden;
   position: relative;
 `;
-var HoldRatioFill = styled9.div`
+styled9.div`
   height: 100%;
   width: ${(p) => p.$pct}%;
   border-radius: 3px;