@loafmarkets/ui 0.1.328 → 0.1.330

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.
package/dist/index.js CHANGED
@@ -2858,6 +2858,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
2858
2858
  viewAllHref,
2859
2859
  viewAllLabel = "View All News",
2860
2860
  connectionStatus = "live",
2861
+ disablePagination = false,
2861
2862
  ...props
2862
2863
  }, ref) => {
2863
2864
  const isPurchaseVariant = variant === "purchases";
@@ -2891,7 +2892,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
2891
2892
  () => Math.max(1, Math.ceil(homeFilteredItems.length / ITEMS_PER_PAGE)),
2892
2893
  [homeFilteredItems.length]
2893
2894
  );
2894
- const homePaginatedItems = homeFilteredItems.slice(homePage * ITEMS_PER_PAGE, (homePage + 1) * ITEMS_PER_PAGE);
2895
+ const homePaginatedItems = disablePagination ? homeFilteredItems : homeFilteredItems.slice(homePage * ITEMS_PER_PAGE, (homePage + 1) * ITEMS_PER_PAGE);
2895
2896
  return /* @__PURE__ */ jsxRuntime.jsxs(
2896
2897
  "div",
2897
2898
  {
@@ -3090,7 +3091,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
3090
3091
  ] })
3091
3092
  }
3092
3093
  ),
3093
- isHomeVariant && homeTotalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex items-center justify-between text-xs text-white/60", children: [
3094
+ isHomeVariant && !disablePagination && homeTotalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex items-center justify-between text-xs text-white/60", children: [
3094
3095
  /* @__PURE__ */ jsxRuntime.jsx(
3095
3096
  "button",
3096
3097
  {
@@ -3154,6 +3155,46 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
3154
3155
  }
3155
3156
  );
3156
3157
  PropertyNewsUpdates.displayName = "PropertyNewsUpdates";
3158
+ function PropertyMediaRow({
3159
+ newsItems,
3160
+ newsConnectionStatus,
3161
+ videoSrc,
3162
+ videoTitle,
3163
+ className
3164
+ }) {
3165
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-4 lg:flex-row lg:items-stretch lg:gap-6 lg:h-[700px]", className), children: [
3166
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:hidden h-[320px]", children: /* @__PURE__ */ jsxRuntime.jsx(PropertyTour, { title: videoTitle, src: videoSrc, className: "h-full w-full !max-w-none" }) }),
3167
+ /* @__PURE__ */ jsxRuntime.jsx(
3168
+ "div",
3169
+ {
3170
+ className: "overflow-auto w-full max-h-[480px] lg:max-h-none lg:flex-[0_1_520px] lg:min-w-[380px] lg:max-w-[520px] lg:h-full border border-white/10 rounded-[12px]",
3171
+ style: { background: "#111111" },
3172
+ children: /* @__PURE__ */ jsxRuntime.jsx(
3173
+ PropertyNewsUpdates,
3174
+ {
3175
+ items: newsItems,
3176
+ variant: "home",
3177
+ heading: "Property News & Headlines",
3178
+ connectionStatus: newsConnectionStatus,
3179
+ highlightFirst: false,
3180
+ disablePagination: true,
3181
+ style: {
3182
+ maxWidth: "none",
3183
+ background: "transparent",
3184
+ borderRadius: 0,
3185
+ padding: "1.25rem 1.5rem",
3186
+ boxShadow: "none",
3187
+ border: "none",
3188
+ height: "100%",
3189
+ overflow: "visible"
3190
+ }
3191
+ }
3192
+ )
3193
+ }
3194
+ ),
3195
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:flex lg:flex-1 lg:min-w-0 lg:h-full", children: /* @__PURE__ */ jsxRuntime.jsx(PropertyTour, { title: videoTitle, src: videoSrc, className: "h-full w-full !max-w-none" }) })
3196
+ ] });
3197
+ }
3157
3198
  var defaultFormat = (value) => new Intl.NumberFormat("en-US", {
3158
3199
  style: "currency",
3159
3200
  currency: "USD",
@@ -6625,13 +6666,18 @@ var LoginPopup = ({
6625
6666
  }
6626
6667
  setFundingError("");
6627
6668
  setFiatFundingLoading(true);
6669
+ if (typeof window !== "undefined") {
6670
+ window.dispatchEvent(new CustomEvent("loaf:prefetch-kyc"));
6671
+ }
6628
6672
  try {
6629
6673
  const result = await onFundWallet({ amount: fundingAmount, mode: "fiat" });
6630
6674
  if (result?.widgetUrl) {
6631
6675
  setTransakWidgetUrl(result.widgetUrl);
6632
6676
  } else if (result?.requiresKyc) {
6633
- setView("kyc");
6634
- setShowKycWidget(true);
6677
+ onClose();
6678
+ if (typeof window !== "undefined") {
6679
+ window.dispatchEvent(new CustomEvent("loaf:open-login-popup", { detail: { initialView: "kyc" } }));
6680
+ }
6635
6681
  } else if (result?.funded) {
6636
6682
  onClose();
6637
6683
  }
@@ -6819,9 +6865,9 @@ var LoginPopup = ({
6819
6865
  $expanded: showKycWidget,
6820
6866
  children: [
6821
6867
  /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
6822
- renderKycWidget && showKycWidget && /* @__PURE__ */ jsxRuntime.jsxs(KycWidgetContainer, { children: [
6868
+ renderKycWidget && /* @__PURE__ */ jsxRuntime.jsxs(KycWidgetContainer, { style: showKycWidget ? {} : { position: "absolute", visibility: "hidden", pointerEvents: "none" }, children: [
6823
6869
  renderKycWidget(handleKycWidgetResult),
6824
- showKycFooter && /* @__PURE__ */ jsxRuntime.jsxs(KycWidgetFooter, { children: [
6870
+ showKycWidget && showKycFooter && /* @__PURE__ */ jsxRuntime.jsxs(KycWidgetFooter, { children: [
6825
6871
  /* @__PURE__ */ jsxRuntime.jsxs(KycProgressSaved, { children: [
6826
6872
  /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "#0ecb81", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }),
6827
6873
  "Progress saved"
@@ -7062,9 +7108,6 @@ var KycLandingContainer = styled9__default.default.div`
7062
7108
  align-items: center;
7063
7109
  text-align: center;
7064
7110
  `;
7065
- styled9__default.default.div`
7066
- display: none;
7067
- `;
7068
7111
  var KycLockIcon = styled9__default.default.div`
7069
7112
  width: 44px;
7070
7113
  height: 44px;
@@ -7089,12 +7132,6 @@ var KycSubline = styled9__default.default.p`
7089
7132
  margin: 0 0 1.75rem;
7090
7133
  line-height: 1.5;
7091
7134
  `;
7092
- styled9__default.default.div`
7093
- display: none;
7094
- `;
7095
- styled9__default.default.div`
7096
- display: none;
7097
- `;
7098
7135
  var KycStartButton = styled9__default.default.button`
7099
7136
  width: 100%;
7100
7137
  padding: 0.8rem 1rem;
@@ -7132,35 +7169,6 @@ var KycExitLink = styled9__default.default.button`
7132
7169
  transition: color 0.15s ease;
7133
7170
  &:hover { color: rgba(255,255,255,0.6); }
7134
7171
  `;
7135
- styled9__default.default.div`
7136
- display: none;
7137
- `;
7138
- styled9__default.default.button`
7139
- position: absolute;
7140
- top: -12px;
7141
- right: -12px;
7142
- background: rgba(0, 0, 0, 0.4);
7143
- border: 1px solid rgba(255, 255, 255, 0.1);
7144
- border-radius: 999px;
7145
- color: var(--color-text-secondary, #848e9c);
7146
- width: 32px;
7147
- height: 32px;
7148
- display: flex;
7149
- align-items: center;
7150
- justify-content: center;
7151
- cursor: pointer;
7152
- transition: color 0.2s ease, background 0.2s ease;
7153
-
7154
- &:hover {
7155
- background: rgba(0, 0, 0, 0.6);
7156
- color: var(--color-accent, #e6c656);
7157
- }
7158
-
7159
- svg {
7160
- width: 18px;
7161
- height: 18px;
7162
- }
7163
- `;
7164
7172
  var CloseButton = styled9__default.default.button`
7165
7173
  position: absolute;
7166
7174
  top: 1rem;
@@ -8544,14 +8552,6 @@ var DEFAULT_FEATURES = [
8544
8552
  { icon: /* @__PURE__ */ jsxRuntime.jsx(md.MdYard, { size: 18 }), label: "Garden" },
8545
8553
  { icon: /* @__PURE__ */ jsxRuntime.jsx(md.MdFitnessCenter, { size: 18 }), label: "Gym" }
8546
8554
  ];
8547
- var DEFAULT_PROPERTY_INFO = [
8548
- { label: "Property Type", value: "N/A" },
8549
- { label: "Built", value: "N/A" },
8550
- { label: "Ownership", value: "N/A" },
8551
- { label: "Zoning", value: "N/A" },
8552
- { label: "Levels", value: "N/A" },
8553
- { label: "Status", value: "N/A" }
8554
- ];
8555
8555
  var DEFAULT_DESCRIPTION = "Property description not available.";
8556
8556
  function truncateAddress(addr) {
8557
8557
  if (addr.length <= 12) return addr;
@@ -8592,7 +8592,7 @@ function generateDividendHistory(valuation, totalTokens, tokenPrice, realPriceHi
8592
8592
  return { records, priceHistory };
8593
8593
  }
8594
8594
  function PropertyOverview({
8595
- propertyName,
8595
+ propertyName: _propertyName,
8596
8596
  location,
8597
8597
  midPrice,
8598
8598
  onTradeClick,
@@ -8606,7 +8606,7 @@ function PropertyOverview({
8606
8606
  landSizeSqm: landProp,
8607
8607
  buildingSizeSqm: buildingProp,
8608
8608
  features: featuresProp,
8609
- propertyInfo: propertyInfoProp,
8609
+ propertyInfo: _propertyInfoProp,
8610
8610
  overviewData,
8611
8611
  bedrooms,
8612
8612
  bathrooms,
@@ -8644,25 +8644,11 @@ function PropertyOverview({
8644
8644
  }
8645
8645
  return f;
8646
8646
  })();
8647
- propertyInfoProp ?? (() => {
8648
- const info = [...DEFAULT_PROPERTY_INFO];
8649
- if (propertyTypeLabel && !overviewData) info[0] = { label: "Property Type", value: propertyTypeLabel };
8650
- if (overviewData) {
8651
- info[0] = { label: "Property Type", value: overviewData.propertyType ?? propertyTypeLabel ?? "N/A" };
8652
- info[1] = { label: "Built", value: String(overviewData.yearBuilt) };
8653
- info[2] = { label: "Ownership", value: overviewData.ownership };
8654
- info[3] = { label: "Zoning", value: overviewData.zoning };
8655
- info[4] = { label: "Levels", value: String(overviewData.levels) };
8656
- info[5] = { label: "DA Status", value: overviewData.daStatus, status: overviewData.daStatus?.toLowerCase() === "approved" ? "active" : "progress" };
8657
- }
8658
- return info;
8659
- })();
8660
8647
  const resolvedTokensIssued = tokensIssued ?? overviewData?.tokensIssued ?? null;
8661
8648
  const resolvedValuation = overviewData?.offeringValuation ?? (midPrice && resolvedTokensIssued ? midPrice * resolvedTokensIssued : null);
8662
8649
  const tokenPriceValue = midPrice > 0 ? midPrice : null;
8663
8650
  const weeklyRent = overviewData?.weeklyRent ?? 0;
8664
8651
  const annualRent = weeklyRent * 52;
8665
- resolvedValuation && annualRent > 0 ? (annualRent / resolvedValuation * 100).toFixed(2) : null;
8666
8652
  const monthlyCoupon = annualRent / 12;
8667
8653
  const tokenMarketCap = tokenPriceValue && resolvedTokensIssued ? tokenPriceValue * resolvedTokensIssued : null;
8668
8654
  const currentDividendYield = tokenMarketCap && monthlyCoupon > 0 ? (monthlyCoupon * 12 / tokenMarketCap * 100).toFixed(2) : null;
@@ -8685,12 +8671,6 @@ function PropertyOverview({
8685
8671
  { label: "Location", value: location || "\u2014" }
8686
8672
  ];
8687
8673
  const vol24hDollar = volume24h != null && tokenPriceValue ? volume24h * tokenPriceValue : null;
8688
- (() => {
8689
- if (!tokenMarketCap || tokenMarketCap <= 0 || vol24hDollar == null) return null;
8690
- const turnover = vol24hDollar / (tokenMarketCap / 2);
8691
- const holdPct = Math.max(0, Math.min(100, (1 - turnover) * 100));
8692
- return { holdPct, tradePct: +(100 - holdPct).toFixed(1) };
8693
- })();
8694
8674
  const fmtDollar = (v) => {
8695
8675
  if (v >= 1e6) return `$${(v / 1e6).toFixed(2)}M`;
8696
8676
  if (v >= 1e3) return `$${Math.round(v).toLocaleString()}`;
@@ -9450,20 +9430,6 @@ var AssetBentoNarratives = styled9__default.default.div`
9450
9430
  margin-top: 0.75rem;
9451
9431
  @media (max-width: 768px) { grid-template-columns: 1fr; }
9452
9432
  `;
9453
- styled9__default.default.div`
9454
- width: 100vw;
9455
- position: relative;
9456
- left: 50%;
9457
- margin-left: -50vw;
9458
- display: flex;
9459
- justify-content: center;
9460
- > * {
9461
- width: 100%;
9462
- max-width: 1800px;
9463
- padding: 0 clamp(1rem, 2vw, 2rem);
9464
- box-sizing: border-box;
9465
- }
9466
- `;
9467
9433
  var Section = styled9__default.default.div`
9468
9434
  background: #111;
9469
9435
  border-radius: 12px;
@@ -9580,45 +9546,6 @@ var TokenDetailValue = styled9__default.default.span`
9580
9546
  font-weight: 500;
9581
9547
  font-family: ${(p) => p.$mono ? "'SF Mono', 'Fira Code', monospace" : "inherit"};
9582
9548
  `;
9583
- styled9__default.default.div`
9584
- background: rgba(255,255,255,0.025);
9585
- border: 1px solid rgba(255,255,255,0.06);
9586
- border-radius: 10px;
9587
- padding: 1rem 1.25rem;
9588
- `;
9589
- styled9__default.default.div`
9590
- font-size: 0.6rem;
9591
- color: rgba(255,255,255,0.3);
9592
- text-transform: uppercase;
9593
- letter-spacing: 0.1em;
9594
- font-weight: 500;
9595
- margin-bottom: 0.85rem;
9596
- `;
9597
- styled9__default.default.div`
9598
- display: flex;
9599
- gap: 0.5rem;
9600
- justify-content: space-between;
9601
- `;
9602
- styled9__default.default.div`
9603
- display: flex;
9604
- flex-direction: column;
9605
- align-items: center;
9606
- gap: 0.4rem;
9607
- flex: 1;
9608
- min-width: 0;
9609
- `;
9610
- styled9__default.default.div`
9611
- display: flex;
9612
- align-items: center;
9613
- justify-content: center;
9614
- height: 44px;
9615
- `;
9616
- styled9__default.default.span`
9617
- font-size: 0.62rem;
9618
- color: rgba(255,255,255,0.35);
9619
- font-weight: 400;
9620
- text-align: center;
9621
- `;
9622
9549
  var CopyBtn = styled9__default.default.button`
9623
9550
  background: none;
9624
9551
  border: none;
@@ -9724,12 +9651,6 @@ var StatsTab = styled9__default.default.button`
9724
9651
  var StatsTabContent = styled9__default.default.div`
9725
9652
  padding: 0.5rem 1.25rem 1.25rem;
9726
9653
  `;
9727
- styled9__default.default.div`
9728
- display: grid;
9729
- grid-template-columns: 340px 340px;
9730
- gap: 1rem;
9731
- @media (max-width: 768px) { grid-template-columns: 1fr; }
9732
- `;
9733
9654
  var StatsColumn = styled9__default.default.div`
9734
9655
  background: #111111;
9735
9656
  border: 1px solid rgba(255,255,255,0.1);
@@ -9766,26 +9687,12 @@ var StatLabel = styled9__default.default.span`
9766
9687
  align-items: center;
9767
9688
  gap: 0.5rem;
9768
9689
  `;
9769
- styled9__default.default.span`
9770
- font-size: 0.6rem;
9771
- color: #4CAF50;
9772
- display: inline-flex;
9773
- align-items: center;
9774
- gap: 3px;
9775
- `;
9776
9690
  var StatValue = styled9__default.default.span`
9777
9691
  font-size: 0.88rem;
9778
9692
  font-weight: 500;
9779
9693
  color: ${(p) => p.$gold ? "#D4AF37" : "#fff"};
9780
9694
  font-variant-numeric: tabular-nums;
9781
9695
  `;
9782
- styled9__default.default.div`
9783
- display: grid;
9784
- grid-template-columns: repeat(3, 1fr);
9785
- gap: 0.75rem;
9786
- margin-bottom: 1.25rem;
9787
- @media (max-width: 768px) { grid-template-columns: 1fr; }
9788
- `;
9789
9696
  var NarrativeCard = styled9__default.default.div`
9790
9697
  background: #111111;
9791
9698
  border: 1px solid rgba(255,255,255,0.1);
@@ -10066,65 +9973,6 @@ var CompAssetTooltipRow = styled9__default.default.div`
10066
9973
  font-variant-numeric: tabular-nums;
10067
9974
  }
10068
9975
  `;
10069
- styled9__default.default.div`
10070
- font-size: 0.65rem;
10071
- color: rgba(255,255,255,0.35);
10072
- text-transform: uppercase;
10073
- letter-spacing: 0.08em;
10074
- font-weight: 500;
10075
- margin-top: 1rem;
10076
- padding-top: 0.75rem;
10077
- padding-bottom: 0.35rem;
10078
- border-top: 1px solid rgba(255,255,255,0.04);
10079
- `;
10080
- styled9__default.default.div`
10081
- font-size: 0.72rem;
10082
- color: rgba(255,255,255,0.3);
10083
- line-height: 1.5;
10084
- margin-bottom: 0.6rem;
10085
- `;
10086
- styled9__default.default.div`
10087
- display: flex;
10088
- flex-direction: column;
10089
- `;
10090
- styled9__default.default.div`
10091
- display: grid;
10092
- grid-template-columns: 1fr 52px auto auto;
10093
- align-items: center;
10094
- gap: 0.4rem;
10095
- padding: 0.45rem 0;
10096
- border-bottom: ${(p) => p.$last ? "none" : "1px solid rgba(255,255,255,0.03)"};
10097
- ${(p) => p.$active ? `
10098
- background: rgba(212,175,55,0.04);
10099
- margin: 0 -0.5rem;
10100
- padding-left: 0.5rem;
10101
- padding-right: 0.5rem;
10102
- border-radius: 6px;
10103
- ` : ""}
10104
- `;
10105
- styled9__default.default.span`
10106
- font-size: 0.8rem;
10107
- font-weight: 500;
10108
- color: rgba(255,255,255,0.7);
10109
- `;
10110
- styled9__default.default.span`
10111
- font-size: 0.72rem;
10112
- color: rgba(255,255,255,0.3);
10113
- text-align: center;
10114
- font-variant-numeric: tabular-nums;
10115
- `;
10116
- styled9__default.default.span`
10117
- font-size: 0.65rem;
10118
- color: rgba(255,255,255,0.2);
10119
- text-align: right;
10120
- white-space: nowrap;
10121
- `;
10122
- styled9__default.default.span`
10123
- font-size: 0.68rem;
10124
- font-weight: 500;
10125
- text-align: right;
10126
- color: ${(p) => p.$status === "listed" ? "#D4AF37" : "rgba(255,255,255,0.25)"};
10127
- `;
10128
9976
  var FeaturesPanel = styled9__default.default.div`
10129
9977
  display: flex;
10130
9978
  flex-wrap: wrap;
@@ -10135,14 +9983,6 @@ var FeaturesPanel = styled9__default.default.div`
10135
9983
  padding: 1rem 1.25rem;
10136
9984
  justify-content: center;
10137
9985
  `;
10138
- styled9__default.default.div`
10139
- display: flex;
10140
- flex-wrap: wrap;
10141
- gap: 0.5rem 1.25rem;
10142
- padding-top: 0.75rem;
10143
- margin-top: 0.25rem;
10144
- border-top: 1px solid rgba(255,255,255,0.04);
10145
- `;
10146
9986
  var AssetFeatureItem = styled9__default.default.div`
10147
9987
  display: flex;
10148
9988
  align-items: center;
@@ -10239,101 +10079,6 @@ var SecurityDocLink = styled9__default.default.a`
10239
10079
  color: rgba(212,175,55,0.9);
10240
10080
  }
10241
10081
  `;
10242
- styled9__default.default.div`
10243
- display: flex;
10244
- flex-direction: column;
10245
- gap: 6px;
10246
- padding: 0.75rem 0 0;
10247
- margin-top: 0.5rem;
10248
- border-top: 1px solid rgba(255,255,255,0.04);
10249
- `;
10250
- styled9__default.default.div`
10251
- display: flex;
10252
- align-items: center;
10253
- gap: 5px;
10254
- `;
10255
- styled9__default.default.span`
10256
- font-size: 0.65rem;
10257
- font-weight: 600;
10258
- text-transform: uppercase;
10259
- letter-spacing: 0.06em;
10260
- color: rgba(255,255,255,0.4);
10261
- `;
10262
- styled9__default.default.span`
10263
- position: relative;
10264
- display: inline-flex;
10265
- align-items: center;
10266
- justify-content: center;
10267
- width: 13px;
10268
- height: 13px;
10269
- border-radius: 50%;
10270
- border: 1px solid rgba(255,255,255,0.15);
10271
- font-size: 0.5rem;
10272
- font-weight: 700;
10273
- color: rgba(255,255,255,0.3);
10274
- cursor: help;
10275
- flex-shrink: 0;
10276
-
10277
- &::after {
10278
- content: attr(data-tip);
10279
- position: absolute;
10280
- bottom: calc(100% + 6px);
10281
- left: 0;
10282
- width: max-content;
10283
- max-width: 260px;
10284
- padding: 8px 12px;
10285
- border-radius: 6px;
10286
- background: #1a1a1e;
10287
- border: 1px solid rgba(255,255,255,0.1);
10288
- color: rgba(255,255,255,0.7);
10289
- font-size: 0.7rem;
10290
- font-weight: 400;
10291
- letter-spacing: 0;
10292
- text-transform: none;
10293
- line-height: 1.45;
10294
- white-space: normal;
10295
- pointer-events: none;
10296
- opacity: 0;
10297
- transition: opacity 0.15s;
10298
- z-index: 10;
10299
- }
10300
-
10301
- &:hover::after {
10302
- opacity: 1;
10303
- }
10304
- `;
10305
- styled9__default.default.div`
10306
- display: flex;
10307
- align-items: center;
10308
- justify-content: space-between;
10309
- `;
10310
- styled9__default.default.span`
10311
- font-size: 0.7rem;
10312
- font-weight: 600;
10313
- text-transform: uppercase;
10314
- letter-spacing: 0.05em;
10315
- color: ${(p) => p.$side === "trade" ? "rgba(246, 70, 93, 0.6)" : "rgba(14, 203, 129, 0.6)"};
10316
- `;
10317
- styled9__default.default.span`
10318
- font-size: 0.75rem;
10319
- font-weight: 600;
10320
- font-variant-numeric: tabular-nums;
10321
- color: ${(p) => p.$side === "trade" ? "rgba(246, 70, 93, 0.7)" : "rgba(14, 203, 129, 0.7)"};
10322
- `;
10323
- styled9__default.default.div`
10324
- height: 6px;
10325
- border-radius: 3px;
10326
- background: rgba(246, 70, 93, 0.15);
10327
- overflow: hidden;
10328
- position: relative;
10329
- `;
10330
- styled9__default.default.div`
10331
- height: 100%;
10332
- width: ${(p) => p.$pct}%;
10333
- border-radius: 3px;
10334
- background: rgba(14, 203, 129, 0.35);
10335
- transition: width 0.6s ease;
10336
- `;
10337
10082
  var DividendHistoryBtn = styled9__default.default.button`
10338
10083
  margin-top: 0.75rem;
10339
10084
  padding: 0.5rem 0;
@@ -11737,6 +11482,10 @@ var AssetName = styled9__default.default.div`
11737
11482
  svg { margin-left: 0.75rem; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); opacity: 0.7; }
11738
11483
  &:hover svg { opacity: 1; }
11739
11484
 
11485
+ @media (min-width: 769px) and (max-width: 1200px) {
11486
+ font-size: clamp(0.9rem, 0.5vw + 0.55rem, 1.15rem);
11487
+ }
11488
+
11740
11489
  @media (max-width: 768px) {
11741
11490
  font-size: 1rem;
11742
11491
  }
@@ -11866,7 +11615,7 @@ var IPOOptionThumb = styled9__default.default.img`
11866
11615
  var IPOOptionName = styled9__default.default.div`
11867
11616
  font-weight: 500;
11868
11617
  font-size: 0.82rem;
11869
- color: ${(p) => "#ebebeb"};
11618
+ color: ${"#ebebeb"};
11870
11619
  line-height: 1.3;
11871
11620
  `;
11872
11621
  var IPOOptionLocation = styled9__default.default.div`
@@ -12897,9 +12646,9 @@ var Panel = styled9__default.default.div`
12897
12646
  height: 100%;
12898
12647
  display: flex;
12899
12648
  flex-direction: column;
12900
- min-width: 450px;
12901
- max-width: 520px;
12902
- width: 520px;
12649
+ min-width: 380px;
12650
+ max-width: 460px;
12651
+ width: 460px;
12903
12652
  overflow: hidden;
12904
12653
  @media (max-width: 1024px) {
12905
12654
  min-width: 0;
@@ -13743,7 +13492,7 @@ var STATUS_COLOR2 = {
13743
13492
  CLOSED: "#848e9c",
13744
13493
  CANCELLED: "#f6465d"
13745
13494
  };
13746
- var ACTIVITY_PAGE_SIZE_DEFAULT = 10;
13495
+ var ACTIVITY_PAGE_SIZE_DEFAULT = 8;
13747
13496
  var formatCurrency4 = (value, opts) => {
13748
13497
  const min = opts?.minimumFractionDigits ?? 2;
13749
13498
  const max = opts?.maximumFractionDigits ?? 2;
@@ -13835,12 +13584,13 @@ function PortfolioActivityPanel({
13835
13584
  compactPositions = false,
13836
13585
  defaultTab,
13837
13586
  pageSize = ACTIVITY_PAGE_SIZE_DEFAULT,
13838
- blockExplorerBaseUrl = "https://sepolia.basescan.org/tx",
13587
+ blockExplorerBaseUrl: _blockExplorerBaseUrl = "https://sepolia.basescan.org/tx",
13839
13588
  className,
13840
13589
  style
13841
13590
  }) {
13842
13591
  const resolvedDefaultTab = defaultTab ?? (showPositionsTab ? "positions" : showSubscriptionsTab ? "subscriptions" : "orders");
13843
13592
  const [activeTab, setActiveTab] = React5.useState(resolvedDefaultTab);
13593
+ const [currentPage, setCurrentPage] = React5.useState(0);
13844
13594
  const [pendingCancelOrderId, setPendingCancelOrderId] = React5.useState(null);
13845
13595
  const [cancelAllConfirmOpen, setCancelAllConfirmOpen] = React5.useState(false);
13846
13596
  const [cancellingAll, setCancellingAll] = React5.useState(false);
@@ -13943,24 +13693,6 @@ function PortfolioActivityPanel({
13943
13693
  }));
13944
13694
  return [...orderHistory, ...mapped].sort((a, b) => b.createdAt - a.createdAt);
13945
13695
  }, [showSubscriptionsTab, offeringOrders, orderHistory]);
13946
- React5.useMemo(() => {
13947
- switch (activeTab) {
13948
- case "positions":
13949
- return positions.length;
13950
- case "subscriptions":
13951
- return offeringOrders.length;
13952
- case "open-orders":
13953
- return openOrders.length;
13954
- case "orders":
13955
- return mergedOrderHistory.length;
13956
- case "trades":
13957
- return tradeHistory.length;
13958
- case "transfers":
13959
- return transfers.length;
13960
- default:
13961
- return 0;
13962
- }
13963
- }, [activeTab, positions.length, offeringOrders.length, openOrders.length, mergedOrderHistory.length, tradeHistory.length, transfers.length]);
13964
13696
  const positionsCount = positions.length;
13965
13697
  const openOrdersCount = React5.useMemo(
13966
13698
  () => openOrders.filter((o) => o.status === "OPEN" || o.status === "PARTIALLY_FILLED").length,
@@ -13979,7 +13711,30 @@ function PortfolioActivityPanel({
13979
13711
  );
13980
13712
  const handleTabChange = (tab) => {
13981
13713
  setActiveTab(tab);
13714
+ setCurrentPage(0);
13982
13715
  };
13716
+ const activeDataLength = (() => {
13717
+ switch (activeTab) {
13718
+ case "subscriptions":
13719
+ return offeringOrders.length;
13720
+ case "open-orders":
13721
+ return openOrders.length;
13722
+ case "orders":
13723
+ return mergedOrderHistory.length;
13724
+ case "trades":
13725
+ return tradeHistory.length;
13726
+ case "transfers":
13727
+ return transfers.length;
13728
+ default:
13729
+ return 0;
13730
+ }
13731
+ })();
13732
+ const totalPages = Math.ceil(activeDataLength / pageSize);
13733
+ const pagedOfferingOrders = offeringOrders.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
13734
+ const pagedOpenOrders = openOrders.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
13735
+ const pagedOrderHistory = mergedOrderHistory.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
13736
+ const pagedTradeHistory = tradeHistory.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
13737
+ const pagedTransfers = transfers.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
13983
13738
  return /* @__PURE__ */ jsxRuntime.jsxs(Container2, { className, style, children: [
13984
13739
  /* @__PURE__ */ jsxRuntime.jsx(PanelTitle, { children: "Activity" }),
13985
13740
  /* @__PURE__ */ jsxRuntime.jsxs(TabContainer, { children: [
@@ -14208,7 +13963,7 @@ function PortfolioActivityPanel({
14208
13963
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Status" }),
14209
13964
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Date" })
14210
13965
  ] }),
14211
- offeringOrders.map((order) => {
13966
+ pagedOfferingOrders.map((order) => {
14212
13967
  const meta = getOrderStatusMeta(order.status);
14213
13968
  return /* @__PURE__ */ jsxRuntime.jsxs(GridRow, { $columns: "1.2fr 0.8fr 1fr 1fr 0.8fr 1fr", children: [
14214
13969
  /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $primary: true, children: order.tokenName }) }),
@@ -14235,7 +13990,7 @@ function PortfolioActivityPanel({
14235
13990
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Status" }),
14236
13991
  onCancelOrder && /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, {})
14237
13992
  ] }),
14238
- openOrders.map((order) => {
13993
+ pagedOpenOrders.map((order) => {
14239
13994
  const meta = getOrderStatusMeta(order.status);
14240
13995
  const isMarket = order.type === "MARKET";
14241
13996
  const filledPercent = order.quantity > 0 ? Math.round(order.filledQuantity / order.quantity * 100) : 0;
@@ -14280,7 +14035,7 @@ function PortfolioActivityPanel({
14280
14035
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Status" }),
14281
14036
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Date" })
14282
14037
  ] }),
14283
- mergedOrderHistory.map((order) => {
14038
+ pagedOrderHistory.map((order) => {
14284
14039
  const meta = getOrderStatusMeta(order.status);
14285
14040
  const isMarket = order.type === "MARKET";
14286
14041
  const filledPercent = order.quantity > 0 ? Math.round(order.filledQuantity / order.quantity * 100) : 0;
@@ -14304,40 +14059,50 @@ function PortfolioActivityPanel({
14304
14059
  activeTab === "trades" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
14305
14060
  tradeHistory.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: "Completed trades will appear here." }),
14306
14061
  tradeHistory.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
14307
- /* @__PURE__ */ jsxRuntime.jsxs(GridHeader, { $columns: "1.2fr 0.6fr 0.8fr 1fr 1fr 0.8fr 1fr", children: [
14062
+ /* @__PURE__ */ jsxRuntime.jsxs(GridHeader, { $columns: "1.2fr 0.6fr 0.8fr 1fr 1fr 1fr 1fr", children: [
14308
14063
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Asset" }),
14309
14064
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Side" }),
14310
14065
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Qty" }),
14311
14066
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Price" }),
14312
14067
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Total" }),
14313
- /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Fee" }),
14068
+ /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Settlement" }),
14314
14069
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Date" })
14315
14070
  ] }),
14316
- tradeHistory.map((trade) => /* @__PURE__ */ jsxRuntime.jsxs(GridRow, { $columns: "1.2fr 0.6fr 0.8fr 1fr 1fr 0.8fr 1fr", children: [
14317
- /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $primary: true, children: trade.tokenName }) }),
14318
- /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(SideBadge, { $side: sideLabel(trade.side), children: sideLabel(trade.side) }) }),
14319
- /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { children: formatNumber2(trade.quantity) }) }),
14320
- /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { children: formatCurrency4(trade.price) }) }),
14321
- /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { children: formatCurrency4(trade.price * trade.quantity) }) }),
14322
- /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $muted: true, children: formatCurrency4(trade.fee) }) }),
14323
- /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $muted: true, children: formatTimestamp(trade.executedAt) }) })
14324
- ] }, trade.tradeId))
14071
+ pagedTradeHistory.map((trade) => {
14072
+ const s = trade.status?.toUpperCase();
14073
+ const isSettled = s === "SETTLED" || s === "CONFIRMED" || s === "FILLED" || s === "ALLOCATED";
14074
+ const isFailed = s === "SETTLEMENT_FAILED" || s === "REJECTED" || s === "CANCELLED" || s === "CANCELED";
14075
+ const isSettling = !isSettled && !isFailed && !!trade.status;
14076
+ const settlementLabel = isSettled ? "Settled" : isFailed ? "Settlement Failed" : isSettling ? prettyLabel(trade.status) : "\u2014";
14077
+ const settlementMeta = isSettled ? { color: "#0ecb81", bg: "rgba(14,203,129,0.1)" } : isFailed ? { color: "#f6465d", bg: "rgba(246,70,93,0.12)" } : isSettling ? { color: "#f0b90b", bg: "rgba(240,185,11,0.15)" } : null;
14078
+ return /* @__PURE__ */ jsxRuntime.jsxs(GridRow, { $columns: "1.2fr 0.6fr 0.8fr 1fr 1fr 1fr 1fr", children: [
14079
+ /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $primary: true, children: trade.tokenName }) }),
14080
+ /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(SideBadge, { $side: sideLabel(trade.side), children: sideLabel(trade.side) }) }),
14081
+ /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { children: formatNumber2(trade.quantity) }) }),
14082
+ /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { children: formatCurrency4(trade.price) }) }),
14083
+ /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { children: formatCurrency4(trade.price * trade.quantity) }) }),
14084
+ /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: settlementMeta ? /* @__PURE__ */ jsxRuntime.jsx(ActivityTag, { $color: settlementMeta.color, $bg: settlementMeta.bg, children: settlementLabel }) : /* @__PURE__ */ jsxRuntime.jsx(CellText, { $muted: true, children: "\u2014" }) }),
14085
+ /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $muted: true, children: formatTimestamp(trade.executedAt) }) })
14086
+ ] }, trade.tradeId);
14087
+ })
14325
14088
  ] })
14326
14089
  ] }),
14327
14090
  activeTab === "transfers" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
14328
14091
  transfers.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: "Deposits and withdrawals will appear here." }),
14329
14092
  transfers.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
14330
- /* @__PURE__ */ jsxRuntime.jsxs(GridHeader, { $columns: "0.8fr 1fr 1.5fr 0.8fr 1fr", children: [
14093
+ /* @__PURE__ */ jsxRuntime.jsxs(GridHeader, { $columns: "0.8fr 1fr 1.5fr 0.8fr 1fr 36px", children: [
14331
14094
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Type" }),
14332
14095
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Amount" }),
14333
14096
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Address" }),
14334
14097
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Status" }),
14335
- /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Date" })
14098
+ /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Date" }),
14099
+ /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, {})
14336
14100
  ] }),
14337
- transfers.map((t, idx) => {
14101
+ pagedTransfers.map((t, idx) => {
14338
14102
  const isDeposit = t.type === "DEPOSIT";
14339
14103
  const statusMeta = getOrderStatusMeta(t.status);
14340
- return /* @__PURE__ */ jsxRuntime.jsxs(GridRow, { $columns: "0.8fr 1fr 1.5fr 0.8fr 1fr", children: [
14104
+ const txUrl = t.blockchainTxHash ? `${_blockExplorerBaseUrl}/${t.blockchainTxHash}` : null;
14105
+ return /* @__PURE__ */ jsxRuntime.jsxs(GridRow, { $columns: "0.8fr 1fr 1.5fr 0.8fr 1fr 36px", children: [
14341
14106
  /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(SideBadge, { $side: isDeposit ? "Buy" : "Sell", children: isDeposit ? "Deposit" : "Withdraw" }) }),
14342
14107
  /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsxs(CellText, { $color: isDeposit ? "#0ecb81" : "#f6465d", children: [
14343
14108
  isDeposit ? "+" : "-",
@@ -14345,12 +14110,26 @@ function PortfolioActivityPanel({
14345
14110
  ] }) }),
14346
14111
  /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $muted: true, children: formatAddress(t.address) }) }),
14347
14112
  /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(ActivityTag, { $color: statusMeta.color, $bg: statusMeta.bg, children: prettyLabel(t.status) }) }),
14348
- /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $muted: true, children: formatTimestamp(t.createdAt) }) })
14113
+ /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $muted: true, children: formatTimestamp(t.createdAt) }) }),
14114
+ /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: txUrl && /* @__PURE__ */ jsxRuntime.jsx(TxLink, { href: txUrl, target: "_blank", rel: "noopener noreferrer", title: "View on BaseScan", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
14115
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
14116
+ /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "15 3 21 3 21 9" }),
14117
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
14118
+ ] }) }) })
14349
14119
  ] }, t.blockchainTxHash ?? `transfer-${idx}`);
14350
14120
  })
14351
14121
  ] })
14352
14122
  ] })
14353
14123
  ] }),
14124
+ totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs(PaginationBar, { children: [
14125
+ /* @__PURE__ */ jsxRuntime.jsx(PaginationBtn, { disabled: currentPage === 0, onClick: () => setCurrentPage((p) => p - 1), children: "\u2039 Prev" }),
14126
+ /* @__PURE__ */ jsxRuntime.jsxs(PaginationInfo, { children: [
14127
+ currentPage + 1,
14128
+ " / ",
14129
+ totalPages
14130
+ ] }),
14131
+ /* @__PURE__ */ jsxRuntime.jsx(PaginationBtn, { disabled: currentPage >= totalPages - 1, onClick: () => setCurrentPage((p) => p + 1), children: "Next \u203A" })
14132
+ ] }),
14354
14133
  cancelAllConfirmOpen && /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmOverlay, { onClick: () => setCancelAllConfirmOpen(false), children: /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmModal, { onClick: (e) => e.stopPropagation(), children: [
14355
14134
  /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmTitle, { children: "Cancel All Orders" }),
14356
14135
  /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmBody, { children: [
@@ -14471,48 +14250,6 @@ var TabCount = styled9__default.default.span`
14471
14250
  font-weight: 600;
14472
14251
  margin-left: 2px;
14473
14252
  `;
14474
- styled9__default.default.div`
14475
- display: grid;
14476
- grid-template-columns: auto 1fr auto auto;
14477
- align-items: center;
14478
- gap: 0 1rem;
14479
- padding: 0.6rem 0.25rem;
14480
- border-bottom: 1px solid rgba(255, 255, 255, 0.04);
14481
-
14482
- &:last-child {
14483
- border-bottom: none;
14484
- }
14485
-
14486
- &:hover {
14487
- background: rgba(255, 255, 255, 0.015);
14488
- }
14489
- `;
14490
- styled9__default.default.span`
14491
- font-size: 0.6rem;
14492
- font-weight: 700;
14493
- text-transform: uppercase;
14494
- letter-spacing: 0.03em;
14495
- padding: 0.2rem 0.45rem;
14496
- border-radius: 3px;
14497
- min-width: 28px;
14498
- text-align: center;
14499
- color: ${({ $side }) => $side === "Buy" ? "#0ecb81" : "#f6465d"};
14500
- background: ${({ $side }) => $side === "Buy" ? "rgba(14, 203, 129, 0.1)" : "rgba(246, 70, 93, 0.1)"};
14501
- `;
14502
- styled9__default.default.div`
14503
- display: flex;
14504
- flex-direction: column;
14505
- gap: 0.1rem;
14506
- `;
14507
- styled9__default.default.span`
14508
- font-size: 0.8rem;
14509
- color: #fff;
14510
- font-weight: 500;
14511
- `;
14512
- styled9__default.default.span`
14513
- font-size: 0.6rem;
14514
- color: rgba(255, 255, 255, 0.35);
14515
- `;
14516
14253
  var ActivityTag = styled9__default.default.span`
14517
14254
  font-size: 0.58rem;
14518
14255
  font-weight: 600;
@@ -14522,41 +14259,6 @@ var ActivityTag = styled9__default.default.span`
14522
14259
  background: ${({ $bg }) => $bg || "rgba(255, 255, 255, 0.06)"};
14523
14260
  white-space: nowrap;
14524
14261
  `;
14525
- styled9__default.default.span`
14526
- font-size: 0.8rem;
14527
- font-weight: 600;
14528
- color: #fff;
14529
- text-align: right;
14530
- white-space: nowrap;
14531
- `;
14532
- styled9__default.default.div`
14533
- display: flex;
14534
- align-items: center;
14535
- justify-content: flex-end;
14536
- gap: 0.35rem;
14537
- `;
14538
- styled9__default.default.a`
14539
- display: inline-flex;
14540
- align-items: center;
14541
- justify-content: center;
14542
- width: 26px;
14543
- height: 26px;
14544
- border-radius: 6px;
14545
- border: 1px solid rgba(14, 203, 129, 0.4);
14546
- color: #0ecb81;
14547
- transition: opacity 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
14548
-
14549
- &:hover {
14550
- opacity: 0.85;
14551
- transform: translateY(-1px);
14552
- border-color: rgba(14, 203, 129, 0.8);
14553
- }
14554
-
14555
- &:focus-visible {
14556
- outline: 2px solid rgba(14, 203, 129, 0.8);
14557
- outline-offset: 2px;
14558
- }
14559
- `;
14560
14262
  var EmptyState = styled9__default.default.div`
14561
14263
  padding: 1.5rem 0.75rem;
14562
14264
  text-align: center;
@@ -15061,13 +14763,6 @@ var CAssetName = styled9__default.default.div`
15061
14763
  align-items: center;
15062
14764
  gap: 0.3rem;
15063
14765
  `;
15064
- styled9__default.default.img`
15065
- width: 22px;
15066
- height: 22px;
15067
- border-radius: 4px;
15068
- object-fit: cover;
15069
- flex-shrink: 0;
15070
- `;
15071
14766
  var CUnitsCell = styled9__default.default.div`
15072
14767
  font-size: 0.78rem;
15073
14768
  color: rgba(255, 255, 255, 0.8);
@@ -15143,6 +14838,48 @@ var CCloseBtn = styled9__default.default.button`
15143
14838
  border-color: rgba(230, 200, 126, 0.5);
15144
14839
  }
15145
14840
  `;
14841
+ var TxLink = styled9__default.default.a`
14842
+ display: flex;
14843
+ align-items: center;
14844
+ justify-content: center;
14845
+ color: rgba(230, 200, 126, 0.7);
14846
+ transition: color 0.15s;
14847
+ &:hover { color: #E6C87E; }
14848
+ `;
14849
+ var PaginationBar = styled9__default.default.div`
14850
+ display: flex;
14851
+ align-items: center;
14852
+ justify-content: flex-end;
14853
+ gap: 0.5rem;
14854
+ padding: 0.45rem 0.75rem;
14855
+ border-top: 1px solid rgba(255, 255, 255, 0.06);
14856
+ flex-shrink: 0;
14857
+ `;
14858
+ var PaginationBtn = styled9__default.default.button`
14859
+ background: transparent;
14860
+ border: 1px solid rgba(255, 255, 255, 0.1);
14861
+ border-radius: 4px;
14862
+ padding: 0.2rem 0.6rem;
14863
+ font-size: 0.7rem;
14864
+ color: rgba(255, 255, 255, 0.55);
14865
+ cursor: pointer;
14866
+ transition: all 0.15s;
14867
+ &:hover:not(:disabled) {
14868
+ border-color: rgba(230, 200, 126, 0.4);
14869
+ color: #E6C87E;
14870
+ }
14871
+ &:disabled {
14872
+ opacity: 0.3;
14873
+ cursor: default;
14874
+ }
14875
+ `;
14876
+ var PaginationInfo = styled9__default.default.span`
14877
+ font-size: 0.7rem;
14878
+ color: rgba(255, 255, 255, 0.4);
14879
+ min-width: 3rem;
14880
+ text-align: center;
14881
+ font-variant-numeric: tabular-nums;
14882
+ `;
15146
14883
  var formatOrderCurrency = (amount) => {
15147
14884
  if (amount >= 1e6) return `$${(amount / 1e6).toFixed(2)}M`;
15148
14885
  return `$${Math.round(amount).toLocaleString()}`;
@@ -15158,7 +14895,7 @@ var formatTimeAgo2 = (timestamp) => {
15158
14895
  };
15159
14896
  function PropertyBuy({
15160
14897
  propertyName = "Loaf Property",
15161
- propertyLocation: propertyLocationLabel = "Sydney, NSW",
14898
+ propertyLocation: _propertyLocationLabel = "Sydney, NSW",
15162
14899
  tokenDisplayName = "Property Token",
15163
14900
  tokenSymbol = "LOAF",
15164
14901
  tokenName,
@@ -15183,6 +14920,7 @@ function PropertyBuy({
15183
14920
  portfolioActivity,
15184
14921
  newsItems = [],
15185
14922
  newsConnectionStatus,
14923
+ videoUrl,
15186
14924
  toast
15187
14925
  }) {
15188
14926
  const [sliderValue, setSliderValue] = React5.useState(0);
@@ -15425,32 +15163,15 @@ function PropertyBuy({
15425
15163
  purchaseError && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "0.75rem", padding: "0.75rem 1rem", borderRadius: "8px", background: "rgba(246,70,93,0.1)", border: "1px solid rgba(246,70,93,0.3)", color: "#f6465d", fontSize: "0.8rem", fontWeight: 500 }, children: purchaseError })
15426
15164
  ] })
15427
15165
  ] }),
15428
- /* @__PURE__ */ jsxRuntime.jsxs(NewsVideoRow, { children: [
15429
- /* @__PURE__ */ jsxRuntime.jsx(
15430
- PropertyNewsUpdates,
15431
- {
15432
- items: newsItems,
15433
- variant: "home",
15434
- heading: "Property News & Headlines",
15435
- connectionStatus: newsConnectionStatus,
15436
- highlightFirst: false,
15437
- style: {
15438
- maxWidth: "none",
15439
- background: "#111111",
15440
- borderRadius: "8px",
15441
- padding: "1.25rem 1.5rem",
15442
- boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
15443
- border: "none",
15444
- height: "100%",
15445
- overflow: "hidden"
15446
- }
15447
- }
15448
- ),
15449
- /* @__PURE__ */ jsxRuntime.jsxs(VideoPanel, { children: [
15450
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "video-header", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { children: propertyName }) }),
15451
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "video-frame", children: /* @__PURE__ */ jsxRuntime.jsx("video", { controls: true, loop: true, autoPlay: true, muted: true, playsInline: true, children: /* @__PURE__ */ jsxRuntime.jsx("source", { src: "/properties/Musgrave/musgrave.mp4", type: "video/mp4" }) }) })
15452
- ] })
15453
- ] }),
15166
+ /* @__PURE__ */ jsxRuntime.jsx(
15167
+ PropertyMediaRow,
15168
+ {
15169
+ newsItems,
15170
+ newsConnectionStatus,
15171
+ videoSrc: videoUrl || "/property-showcase.mp4",
15172
+ videoTitle: propertyName
15173
+ }
15174
+ ),
15454
15175
  /* @__PURE__ */ jsxRuntime.jsx(
15455
15176
  OrderConfirmationModal,
15456
15177
  {
@@ -15473,7 +15194,7 @@ function PropertyBuy({
15473
15194
  }
15474
15195
  var HeroGrid = styled9__default.default.div`
15475
15196
  display: grid;
15476
- grid-template-columns: 1fr auto;
15197
+ grid-template-columns: minmax(0, 1fr) 460px;
15477
15198
  grid-template-rows: auto auto minmax(450px, 520px);
15478
15199
  gap: 1.5rem;
15479
15200
  width: 100%;
@@ -15483,16 +15204,21 @@ var HeroGrid = styled9__default.default.div`
15483
15204
  & > div:nth-child(1) {
15484
15205
  grid-column: 1 / 2;
15485
15206
  grid-row: 1 / 2;
15207
+ min-width: 0;
15486
15208
  }
15487
15209
 
15488
15210
  & > div:nth-child(2) {
15489
15211
  grid-column: 1 / 2;
15490
15212
  grid-row: 2 / 3;
15213
+ min-width: 0;
15214
+ overflow: hidden;
15491
15215
  }
15492
15216
 
15493
15217
  & > div:nth-child(3) {
15494
15218
  grid-column: 1 / 2;
15495
15219
  grid-row: 3 / 4;
15220
+ min-width: 0;
15221
+ overflow: hidden;
15496
15222
  }
15497
15223
 
15498
15224
  & > div:nth-child(4) {
@@ -15500,9 +15226,10 @@ var HeroGrid = styled9__default.default.div`
15500
15226
  grid-row: 1 / 4;
15501
15227
  display: flex;
15502
15228
  flex-direction: column;
15229
+ min-width: 0;
15503
15230
  }
15504
15231
 
15505
- @media (max-width: 1024px) {
15232
+ @media (max-width: 1280px) {
15506
15233
  display: flex;
15507
15234
  flex-direction: column;
15508
15235
  gap: 1rem;
@@ -15561,15 +15288,17 @@ var BottomRow = styled9__default.default.div`
15561
15288
  display: flex;
15562
15289
  gap: 1.5rem;
15563
15290
  align-items: stretch;
15564
- @media (max-width: 1024px) {
15291
+ min-width: 0;
15292
+ overflow: hidden;
15293
+ @media (max-width: 1280px) {
15565
15294
  flex-direction: column;
15566
15295
  gap: 1rem;
15567
15296
  }
15568
15297
  `;
15569
15298
  var RecentOrderPanel = styled9__default.default.div`
15570
- flex: 0 0 auto;
15571
- min-width: 420px;
15572
- max-width: 540px;
15299
+ flex: 0 0 340px;
15300
+ min-width: 0;
15301
+ max-width: 380px;
15573
15302
  background-color: var(--color-card-darker, #111);
15574
15303
  border-radius: 8px;
15575
15304
  padding: 1.5rem;
@@ -15735,78 +15464,6 @@ var PurchaseAmount = styled9__default.default.div`
15735
15464
  white-space: nowrap;
15736
15465
  margin-left: 1rem;
15737
15466
  `;
15738
- var NewsVideoRow = styled9__default.default.div`
15739
- display: flex;
15740
- gap: 1.5rem;
15741
- height: 700px;
15742
- align-items: stretch;
15743
-
15744
- & > *:first-child {
15745
- flex: 0 1 520px;
15746
- min-width: 380px;
15747
- max-width: 520px;
15748
- }
15749
-
15750
- & > *:last-child {
15751
- flex: 1 1 0%;
15752
- min-width: 0;
15753
- }
15754
-
15755
- @media (max-width: 1024px) {
15756
- flex-direction: column;
15757
- height: auto;
15758
- gap: 1rem;
15759
-
15760
- & > *:first-child {
15761
- flex: none;
15762
- max-width: none;
15763
- width: 100%;
15764
- }
15765
-
15766
- & > *:last-child {
15767
- flex: none;
15768
- width: 100%;
15769
- min-height: 400px;
15770
- }
15771
- }
15772
- `;
15773
- var VideoPanel = styled9__default.default.div`
15774
- background: #111111;
15775
- border-radius: 8px;
15776
- display: flex;
15777
- flex-direction: column;
15778
- overflow: hidden;
15779
- width: 100%;
15780
- height: 100%;
15781
-
15782
- .video-header {
15783
- padding: 1.25rem 1.5rem 0;
15784
- h3 {
15785
- font-size: 1.1rem;
15786
- font-weight: 600;
15787
- color: #fff;
15788
- margin: 0 0 1rem;
15789
- }
15790
- }
15791
-
15792
- .video-frame {
15793
- flex: 1;
15794
- position: relative;
15795
- margin: 0 1.5rem 1.5rem;
15796
- border-radius: 8px;
15797
- overflow: hidden;
15798
- background: #000;
15799
-
15800
- video {
15801
- position: absolute;
15802
- top: 0;
15803
- left: 0;
15804
- width: 100%;
15805
- height: 100%;
15806
- object-fit: cover;
15807
- }
15808
- }
15809
- `;
15810
15467
  var PaymentOption = styled9__default.default.div`
15811
15468
  display: flex;
15812
15469
  align-items: center;
@@ -18361,6 +18018,7 @@ exports.PropertyDocuments = PropertyDocuments;
18361
18018
  exports.PropertyHeroHeader = PropertyHeroHeader;
18362
18019
  exports.PropertyHistory = PropertyHistory;
18363
18020
  exports.PropertyInspectionTimes = PropertyInspectionTimes;
18021
+ exports.PropertyMediaRow = PropertyMediaRow;
18364
18022
  exports.PropertyNewsUpdates = PropertyNewsUpdates;
18365
18023
  exports.PropertyOffers = PropertyOffers;
18366
18024
  exports.PropertyOverview = PropertyOverview;