@loafmarkets/ui 0.1.213 → 0.1.215

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +140 -75
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +140 -75
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -8583,7 +8583,7 @@ function PropertyOverview({
8583
8583
  { label: "Location", value: location || "\u2014" }
8584
8584
  ];
8585
8585
  const vol24hDollar = volume24h != null && tokenPriceValue ? volume24h * tokenPriceValue : null;
8586
- const holdRatio = (() => {
8586
+ (() => {
8587
8587
  if (!tokenMarketCap || tokenMarketCap <= 0 || vol24hDollar == null) return null;
8588
8588
  const turnover = vol24hDollar / (tokenMarketCap / 2);
8589
8589
  const holdPct = Math.max(0, Math.min(100, (1 - turnover) * 100));
@@ -8657,40 +8657,32 @@ function PropertyOverview({
8657
8657
  ] }),
8658
8658
  /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
8659
8659
  /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "Statistics" }),
8660
- /* @__PURE__ */ jsxRuntime.jsxs(StatsTabbedCard, { children: [
8661
- /* @__PURE__ */ jsxRuntime.jsxs(StatsTabBar, { children: [
8662
- /* @__PURE__ */ jsxRuntime.jsx(StatsTab, { $active: statsTab === "token", onClick: () => setStatsTab("token"), children: "Token Performance" }),
8663
- /* @__PURE__ */ jsxRuntime.jsx(StatsTab, { $active: statsTab === "property", onClick: () => setStatsTab("property"), children: "Property Fundamentals" })
8660
+ /* @__PURE__ */ jsxRuntime.jsxs(StatsDesktop, { children: [
8661
+ /* @__PURE__ */ jsxRuntime.jsxs(StatsRowSection, { children: [
8662
+ /* @__PURE__ */ jsxRuntime.jsx(StatsRowLabel, { children: "Token Performance" }),
8663
+ /* @__PURE__ */ jsxRuntime.jsx(StatsHRow, { children: tokenStats.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(StatsHCell, { children: [
8664
+ /* @__PURE__ */ jsxRuntime.jsx(StatsHCellLabel, { children: item.label }),
8665
+ item.label === "Holders" && holderCount != null ? /* @__PURE__ */ jsxRuntime.jsx(StatValueClickable, { onClick: () => setShowHolders(true), children: item.value }) : /* @__PURE__ */ jsxRuntime.jsx(StatsHCellValue, { $gold: !!item.gold, children: item.value })
8666
+ ] }, item.label)) })
8664
8667
  ] }),
8665
- statsTab === "token" && /* @__PURE__ */ jsxRuntime.jsxs(StatsTabContent, { children: [
8666
- tokenStats.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(StatRow, { $gold: !!item.gold, children: [
8667
- /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: item.label }),
8668
- item.label === "Holders" && holderCount != null ? /* @__PURE__ */ jsxRuntime.jsx(StatValueClickable, { onClick: () => setShowHolders(true), children: item.value }) : /* @__PURE__ */ jsxRuntime.jsx(StatValue, { $gold: !!item.gold, children: item.value })
8669
- ] }, item.label)),
8670
- holdRatio && /* @__PURE__ */ jsxRuntime.jsxs(HoldRatioWrap, { children: [
8671
- /* @__PURE__ */ jsxRuntime.jsxs(HoldRatioTitle, { children: [
8672
- /* @__PURE__ */ jsxRuntime.jsx(HoldRatioTitleText, { children: "Holding Ratio" }),
8673
- /* @__PURE__ */ jsxRuntime.jsx(HoldRatioInfo, { "data-tip": "Proportion of token holders vs active traders over the last 24 hours, measured by trading volume against market capitalisation.", children: "?" })
8674
- ] }),
8675
- /* @__PURE__ */ jsxRuntime.jsxs(HoldRatioHeader, { children: [
8676
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
8677
- /* @__PURE__ */ jsxRuntime.jsx(HoldRatioLabel, { $side: "hold", children: "Holding " }),
8678
- /* @__PURE__ */ jsxRuntime.jsxs(HoldRatioValue, { $side: "hold", children: [
8679
- holdRatio.holdPct.toFixed(1),
8680
- "%"
8681
- ] })
8682
- ] }),
8683
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
8684
- /* @__PURE__ */ jsxRuntime.jsxs(HoldRatioValue, { $side: "trade", children: [
8685
- holdRatio.tradePct,
8686
- "%"
8687
- ] }),
8688
- /* @__PURE__ */ jsxRuntime.jsx(HoldRatioLabel, { $side: "trade", children: " Trading" })
8689
- ] })
8690
- ] }),
8691
- /* @__PURE__ */ jsxRuntime.jsx(HoldRatioTrack, { children: /* @__PURE__ */ jsxRuntime.jsx(HoldRatioFill, { $pct: holdRatio.holdPct }) })
8692
- ] })
8668
+ /* @__PURE__ */ jsxRuntime.jsxs(StatsRowSection, { children: [
8669
+ /* @__PURE__ */ jsxRuntime.jsx(StatsRowLabel, { children: "Property Fundamentals" }),
8670
+ /* @__PURE__ */ jsxRuntime.jsx(StatsHRow, { children: propertyStats.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(StatsHCell, { children: [
8671
+ /* @__PURE__ */ jsxRuntime.jsx(StatsHCellLabel, { children: item.label }),
8672
+ /* @__PURE__ */ jsxRuntime.jsx(StatsHCellValue, { children: item.value })
8673
+ ] }, item.label)) }),
8674
+ /* @__PURE__ */ jsxRuntime.jsx(DividendHistoryBtn, { onClick: () => setShowDividendHistory(true), children: "See Dividend History \u2192" })
8675
+ ] })
8676
+ ] }),
8677
+ /* @__PURE__ */ jsxRuntime.jsx(StatsMobile, { children: /* @__PURE__ */ jsxRuntime.jsxs(StatsTabbedCard, { children: [
8678
+ /* @__PURE__ */ jsxRuntime.jsxs(StatsTabBar, { children: [
8679
+ /* @__PURE__ */ jsxRuntime.jsx(StatsTab, { $active: statsTab === "token", onClick: () => setStatsTab("token"), children: "Token" }),
8680
+ /* @__PURE__ */ jsxRuntime.jsx(StatsTab, { $active: statsTab === "property", onClick: () => setStatsTab("property"), children: "Property" })
8693
8681
  ] }),
8682
+ statsTab === "token" && /* @__PURE__ */ jsxRuntime.jsx(StatsTabContent, { children: tokenStats.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(StatRow, { $gold: !!item.gold, children: [
8683
+ /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: item.label }),
8684
+ item.label === "Holders" && holderCount != null ? /* @__PURE__ */ jsxRuntime.jsx(StatValueClickable, { onClick: () => setShowHolders(true), children: item.value }) : /* @__PURE__ */ jsxRuntime.jsx(StatValue, { $gold: !!item.gold, children: item.value })
8685
+ ] }, item.label)) }),
8694
8686
  statsTab === "property" && /* @__PURE__ */ jsxRuntime.jsxs(StatsTabContent, { children: [
8695
8687
  propertyStats.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(StatRow, { children: [
8696
8688
  /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: item.label }),
@@ -8698,7 +8690,7 @@ function PropertyOverview({
8698
8690
  ] }, item.label)),
8699
8691
  /* @__PURE__ */ jsxRuntime.jsx(DividendHistoryBtn, { onClick: () => setShowDividendHistory(true), children: "See Dividend History \u2192" })
8700
8692
  ] })
8701
- ] })
8693
+ ] }) })
8702
8694
  ] }),
8703
8695
  showDividendHistory && /* @__PURE__ */ jsxRuntime.jsx(
8704
8696
  DividendHistoryPopup,
@@ -8719,37 +8711,39 @@ function PropertyOverview({
8719
8711
  onClose: () => setShowHolders(false)
8720
8712
  }
8721
8713
  ),
8722
- galleryImages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(GalleryBreakout, { children: /* @__PURE__ */ jsxRuntime.jsx(
8723
- GalleryMapSection,
8724
- {
8725
- images: galleryImages.map((img) => ({ src: img.imageUrl, title: img.title, subtitle: img.subtitle })),
8726
- categories: galleryCategories2,
8727
- propertyLocation: location,
8728
- videoUrl,
8729
- tokenName,
8730
- onPhotoClick: onPhotosClick
8731
- }
8732
- ) }),
8733
8714
  /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
8734
- /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "Investment Profile" }),
8735
- /* @__PURE__ */ jsxRuntime.jsxs(InvestmentNarrativesRow, { children: [
8736
- /* @__PURE__ */ jsxRuntime.jsxs(NarrativeCard, { children: [
8737
- /* @__PURE__ */ jsxRuntime.jsx(NarrativeIcon, { children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 12h-4l-3 9L9 3l-3 9H2" }) }) }),
8738
- /* @__PURE__ */ jsxRuntime.jsx(NarrativeTitle, { children: "Generational Compounding" }),
8739
- /* @__PURE__ */ jsxRuntime.jsx(NarrativeDesc, { children: "Acquired in 1976 for \xA340,000, compounded through every market cycle to a current valuation exceeding A$20M." })
8740
- ] }),
8741
- /* @__PURE__ */ jsxRuntime.jsxs(NarrativeCard, { children: [
8742
- /* @__PURE__ */ jsxRuntime.jsx(NarrativeIcon, { children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }) }),
8743
- /* @__PURE__ */ jsxRuntime.jsx(NarrativeTitle, { children: "Permanent Scarcity" }),
8744
- /* @__PURE__ */ jsxRuntime.jsx(NarrativeDesc, { children: "Heritage harbour-front estates in Mosman cannot be replicated. Sustained global demand into this safe-haven supports long-term price growth." })
8745
- ] }),
8746
- /* @__PURE__ */ jsxRuntime.jsxs(NarrativeCard, { children: [
8747
- /* @__PURE__ */ jsxRuntime.jsx(NarrativeIcon, { children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
8748
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
8749
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 6v6l4 2" })
8750
- ] }) }),
8751
- /* @__PURE__ */ jsxRuntime.jsx(NarrativeTitle, { children: "Liquidity Premium" }),
8752
- /* @__PURE__ */ jsxRuntime.jsx(NarrativeDesc, { children: "Listed assets historically trade at a 20\u201330% premium to unlisted counterparts. First individual property admitted to a continuously traded market." })
8715
+ /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "The Asset" }),
8716
+ galleryImages.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(AssetBentoGrid, { children: [
8717
+ /* @__PURE__ */ jsxRuntime.jsx(AssetBentoGallery, { children: /* @__PURE__ */ jsxRuntime.jsx(
8718
+ GalleryMapSection,
8719
+ {
8720
+ images: galleryImages.map((img) => ({ src: img.imageUrl, title: img.title, subtitle: img.subtitle })),
8721
+ categories: galleryCategories2,
8722
+ propertyLocation: location,
8723
+ videoUrl,
8724
+ tokenName,
8725
+ onPhotoClick: onPhotosClick
8726
+ }
8727
+ ) }),
8728
+ /* @__PURE__ */ jsxRuntime.jsxs(AssetBentoNarratives, { children: [
8729
+ /* @__PURE__ */ jsxRuntime.jsxs(NarrativeCard, { children: [
8730
+ /* @__PURE__ */ jsxRuntime.jsx(NarrativeIcon, { children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 12h-4l-3 9L9 3l-3 9H2" }) }) }),
8731
+ /* @__PURE__ */ jsxRuntime.jsx(NarrativeTitle, { children: "Generational Compounding" }),
8732
+ /* @__PURE__ */ jsxRuntime.jsx(NarrativeDesc, { children: "Acquired in 1976 for \xA340,000, compounded through every market cycle to a current valuation exceeding A$20M." })
8733
+ ] }),
8734
+ /* @__PURE__ */ jsxRuntime.jsxs(NarrativeCard, { children: [
8735
+ /* @__PURE__ */ jsxRuntime.jsx(NarrativeIcon, { children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }) }),
8736
+ /* @__PURE__ */ jsxRuntime.jsx(NarrativeTitle, { children: "Permanent Scarcity" }),
8737
+ /* @__PURE__ */ jsxRuntime.jsx(NarrativeDesc, { children: "Heritage harbour-front estates in Mosman cannot be replicated. Sustained global demand supports long-term price growth." })
8738
+ ] }),
8739
+ /* @__PURE__ */ jsxRuntime.jsxs(NarrativeCard, { children: [
8740
+ /* @__PURE__ */ jsxRuntime.jsx(NarrativeIcon, { children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
8741
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
8742
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 6v6l4 2" })
8743
+ ] }) }),
8744
+ /* @__PURE__ */ jsxRuntime.jsx(NarrativeTitle, { children: "Liquidity Premium" }),
8745
+ /* @__PURE__ */ jsxRuntime.jsx(NarrativeDesc, { children: "Listed assets historically trade at a 20\u201330% premium to unlisted counterparts. First individual property admitted to a continuously traded market." })
8746
+ ] })
8753
8747
  ] })
8754
8748
  ] }),
8755
8749
  /* @__PURE__ */ jsxRuntime.jsxs(StatsGrid, { children: [
@@ -9168,7 +9162,24 @@ var Wrapper = styled9__default.default.div`
9168
9162
  flex-direction: column;
9169
9163
  gap: 1.5rem;
9170
9164
  `;
9171
- var GalleryBreakout = styled9__default.default.div`
9165
+ var AssetBentoGrid = styled9__default.default.div`
9166
+ display: flex;
9167
+ flex-direction: column;
9168
+ gap: 0.75rem;
9169
+ margin-bottom: 1.25rem;
9170
+ `;
9171
+ var AssetBentoGallery = styled9__default.default.div`
9172
+ border-radius: 12px;
9173
+ overflow: hidden;
9174
+ border: 1px solid rgba(255,255,255,0.06);
9175
+ `;
9176
+ var AssetBentoNarratives = styled9__default.default.div`
9177
+ display: grid;
9178
+ grid-template-columns: repeat(3, 1fr);
9179
+ gap: 0.75rem;
9180
+ @media (max-width: 768px) { grid-template-columns: 1fr; }
9181
+ `;
9182
+ styled9__default.default.div`
9172
9183
  width: 100vw;
9173
9184
  position: relative;
9174
9185
  left: 50%;
@@ -9359,6 +9370,60 @@ var ChainLogoImg = styled9__default.default.img`
9359
9370
  width: auto;
9360
9371
  vertical-align: middle;
9361
9372
  `;
9373
+ var StatsDesktop = styled9__default.default.div`
9374
+ display: flex;
9375
+ flex-direction: column;
9376
+ gap: 1.5rem;
9377
+ @media (max-width: 768px) { display: none; }
9378
+ `;
9379
+ var StatsMobile = styled9__default.default.div`
9380
+ display: none;
9381
+ @media (max-width: 768px) { display: block; }
9382
+ `;
9383
+ var StatsRowSection = styled9__default.default.div`
9384
+ display: flex;
9385
+ flex-direction: column;
9386
+ gap: 0.5rem;
9387
+ `;
9388
+ var StatsRowLabel = styled9__default.default.div`
9389
+ font-size: 0.65rem;
9390
+ color: #D4AF37;
9391
+ text-transform: uppercase;
9392
+ letter-spacing: 0.12em;
9393
+ font-weight: 600;
9394
+ `;
9395
+ var StatsHRow = styled9__default.default.div`
9396
+ display: flex;
9397
+ gap: 0;
9398
+ background: rgba(255,255,255,0.025);
9399
+ border: 1px solid rgba(255,255,255,0.06);
9400
+ border-radius: 10px;
9401
+ overflow: hidden;
9402
+ `;
9403
+ var StatsHCell = styled9__default.default.div`
9404
+ flex: 1;
9405
+ display: flex;
9406
+ flex-direction: column;
9407
+ align-items: center;
9408
+ gap: 6px;
9409
+ padding: 1rem 0.75rem;
9410
+ border-right: 1px solid rgba(255,255,255,0.04);
9411
+ &:last-child { border-right: none; }
9412
+ transition: background 0.15s;
9413
+ &:hover { background: rgba(255,255,255,0.03); }
9414
+ `;
9415
+ var StatsHCellLabel = styled9__default.default.span`
9416
+ font-size: 0.7rem;
9417
+ color: rgba(255,255,255,0.4);
9418
+ font-weight: 400;
9419
+ white-space: nowrap;
9420
+ `;
9421
+ var StatsHCellValue = styled9__default.default.span`
9422
+ font-size: 0.92rem;
9423
+ font-weight: 500;
9424
+ color: ${(p) => p.$gold ? "#D4AF37" : "#fff"};
9425
+ font-variant-numeric: tabular-nums;
9426
+ `;
9362
9427
  var StatsTabbedCard = styled9__default.default.div`
9363
9428
  background: rgba(255,255,255,0.025);
9364
9429
  border: 1px solid rgba(255,255,255,0.06);
@@ -9443,7 +9508,7 @@ var StatValue = styled9__default.default.span`
9443
9508
  color: ${(p) => p.$gold ? "#D4AF37" : "#fff"};
9444
9509
  font-variant-numeric: tabular-nums;
9445
9510
  `;
9446
- var InvestmentNarrativesRow = styled9__default.default.div`
9511
+ styled9__default.default.div`
9447
9512
  display: grid;
9448
9513
  grid-template-columns: repeat(3, 1fr);
9449
9514
  gap: 0.75rem;
@@ -9770,7 +9835,7 @@ var SecurityDocLink = styled9__default.default.a`
9770
9835
  color: rgba(212,175,55,0.9);
9771
9836
  }
9772
9837
  `;
9773
- var HoldRatioWrap = styled9__default.default.div`
9838
+ styled9__default.default.div`
9774
9839
  display: flex;
9775
9840
  flex-direction: column;
9776
9841
  gap: 6px;
@@ -9778,19 +9843,19 @@ var HoldRatioWrap = styled9__default.default.div`
9778
9843
  margin-top: 0.5rem;
9779
9844
  border-top: 1px solid rgba(255,255,255,0.04);
9780
9845
  `;
9781
- var HoldRatioTitle = styled9__default.default.div`
9846
+ styled9__default.default.div`
9782
9847
  display: flex;
9783
9848
  align-items: center;
9784
9849
  gap: 5px;
9785
9850
  `;
9786
- var HoldRatioTitleText = styled9__default.default.span`
9851
+ styled9__default.default.span`
9787
9852
  font-size: 0.65rem;
9788
9853
  font-weight: 600;
9789
9854
  text-transform: uppercase;
9790
9855
  letter-spacing: 0.06em;
9791
9856
  color: rgba(255,255,255,0.4);
9792
9857
  `;
9793
- var HoldRatioInfo = styled9__default.default.span`
9858
+ styled9__default.default.span`
9794
9859
  position: relative;
9795
9860
  display: inline-flex;
9796
9861
  align-items: center;
@@ -9833,32 +9898,32 @@ var HoldRatioInfo = styled9__default.default.span`
9833
9898
  opacity: 1;
9834
9899
  }
9835
9900
  `;
9836
- var HoldRatioHeader = styled9__default.default.div`
9901
+ styled9__default.default.div`
9837
9902
  display: flex;
9838
9903
  align-items: center;
9839
9904
  justify-content: space-between;
9840
9905
  `;
9841
- var HoldRatioLabel = styled9__default.default.span`
9906
+ styled9__default.default.span`
9842
9907
  font-size: 0.7rem;
9843
9908
  font-weight: 600;
9844
9909
  text-transform: uppercase;
9845
9910
  letter-spacing: 0.05em;
9846
9911
  color: ${(p) => p.$side === "trade" ? "rgba(246, 70, 93, 0.6)" : "rgba(14, 203, 129, 0.6)"};
9847
9912
  `;
9848
- var HoldRatioValue = styled9__default.default.span`
9913
+ styled9__default.default.span`
9849
9914
  font-size: 0.75rem;
9850
9915
  font-weight: 600;
9851
9916
  font-variant-numeric: tabular-nums;
9852
9917
  color: ${(p) => p.$side === "trade" ? "rgba(246, 70, 93, 0.7)" : "rgba(14, 203, 129, 0.7)"};
9853
9918
  `;
9854
- var HoldRatioTrack = styled9__default.default.div`
9919
+ styled9__default.default.div`
9855
9920
  height: 6px;
9856
9921
  border-radius: 3px;
9857
9922
  background: rgba(246, 70, 93, 0.15);
9858
9923
  overflow: hidden;
9859
9924
  position: relative;
9860
9925
  `;
9861
- var HoldRatioFill = styled9__default.default.div`
9926
+ styled9__default.default.div`
9862
9927
  height: 100%;
9863
9928
  width: ${(p) => p.$pct}%;
9864
9929
  border-radius: 3px;