@loafmarkets/ui 0.1.327 → 0.1.329

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
  {
@@ -2946,7 +2947,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
2946
2947
  /* @__PURE__ */ jsxRuntime.jsx(
2947
2948
  "div",
2948
2949
  {
2949
- className: cn("flex flex-1 flex-col overflow-hidden", isHomeVariant ? "mt-2 gap-0" : "mt-4 gap-3"),
2950
+ className: cn("flex flex-1 flex-col overflow-y-auto overflow-x-hidden", isHomeVariant ? "mt-2 gap-0" : "mt-4 gap-3"),
2950
2951
  style: !isPurchaseVariant && !isHomeVariant ? { minHeight: `${ITEMS_PER_PAGE * 86}px` } : void 0,
2951
2952
  children: isPurchaseVariant ? purchaseItems.length > 0 ? purchaseItems.slice(0, 7).map((purchase, index) => {
2952
2953
  const maxAmount = 6e4;
@@ -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",
@@ -8544,14 +8585,6 @@ var DEFAULT_FEATURES = [
8544
8585
  { icon: /* @__PURE__ */ jsxRuntime.jsx(md.MdYard, { size: 18 }), label: "Garden" },
8545
8586
  { icon: /* @__PURE__ */ jsxRuntime.jsx(md.MdFitnessCenter, { size: 18 }), label: "Gym" }
8546
8587
  ];
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
8588
  var DEFAULT_DESCRIPTION = "Property description not available.";
8556
8589
  function truncateAddress(addr) {
8557
8590
  if (addr.length <= 12) return addr;
@@ -8592,7 +8625,7 @@ function generateDividendHistory(valuation, totalTokens, tokenPrice, realPriceHi
8592
8625
  return { records, priceHistory };
8593
8626
  }
8594
8627
  function PropertyOverview({
8595
- propertyName,
8628
+ propertyName: _propertyName,
8596
8629
  location,
8597
8630
  midPrice,
8598
8631
  onTradeClick,
@@ -8606,7 +8639,7 @@ function PropertyOverview({
8606
8639
  landSizeSqm: landProp,
8607
8640
  buildingSizeSqm: buildingProp,
8608
8641
  features: featuresProp,
8609
- propertyInfo: propertyInfoProp,
8642
+ propertyInfo: _propertyInfoProp,
8610
8643
  overviewData,
8611
8644
  bedrooms,
8612
8645
  bathrooms,
@@ -8644,25 +8677,11 @@ function PropertyOverview({
8644
8677
  }
8645
8678
  return f;
8646
8679
  })();
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
8680
  const resolvedTokensIssued = tokensIssued ?? overviewData?.tokensIssued ?? null;
8661
8681
  const resolvedValuation = overviewData?.offeringValuation ?? (midPrice && resolvedTokensIssued ? midPrice * resolvedTokensIssued : null);
8662
8682
  const tokenPriceValue = midPrice > 0 ? midPrice : null;
8663
8683
  const weeklyRent = overviewData?.weeklyRent ?? 0;
8664
8684
  const annualRent = weeklyRent * 52;
8665
- resolvedValuation && annualRent > 0 ? (annualRent / resolvedValuation * 100).toFixed(2) : null;
8666
8685
  const monthlyCoupon = annualRent / 12;
8667
8686
  const tokenMarketCap = tokenPriceValue && resolvedTokensIssued ? tokenPriceValue * resolvedTokensIssued : null;
8668
8687
  const currentDividendYield = tokenMarketCap && monthlyCoupon > 0 ? (monthlyCoupon * 12 / tokenMarketCap * 100).toFixed(2) : null;
@@ -8685,12 +8704,6 @@ function PropertyOverview({
8685
8704
  { label: "Location", value: location || "\u2014" }
8686
8705
  ];
8687
8706
  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
8707
  const fmtDollar = (v) => {
8695
8708
  if (v >= 1e6) return `$${(v / 1e6).toFixed(2)}M`;
8696
8709
  if (v >= 1e3) return `$${Math.round(v).toLocaleString()}`;
@@ -9450,20 +9463,6 @@ var AssetBentoNarratives = styled9__default.default.div`
9450
9463
  margin-top: 0.75rem;
9451
9464
  @media (max-width: 768px) { grid-template-columns: 1fr; }
9452
9465
  `;
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
9466
  var Section = styled9__default.default.div`
9468
9467
  background: #111;
9469
9468
  border-radius: 12px;
@@ -9580,45 +9579,6 @@ var TokenDetailValue = styled9__default.default.span`
9580
9579
  font-weight: 500;
9581
9580
  font-family: ${(p) => p.$mono ? "'SF Mono', 'Fira Code', monospace" : "inherit"};
9582
9581
  `;
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
9582
  var CopyBtn = styled9__default.default.button`
9623
9583
  background: none;
9624
9584
  border: none;
@@ -9724,12 +9684,6 @@ var StatsTab = styled9__default.default.button`
9724
9684
  var StatsTabContent = styled9__default.default.div`
9725
9685
  padding: 0.5rem 1.25rem 1.25rem;
9726
9686
  `;
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
9687
  var StatsColumn = styled9__default.default.div`
9734
9688
  background: #111111;
9735
9689
  border: 1px solid rgba(255,255,255,0.1);
@@ -9766,26 +9720,12 @@ var StatLabel = styled9__default.default.span`
9766
9720
  align-items: center;
9767
9721
  gap: 0.5rem;
9768
9722
  `;
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
9723
  var StatValue = styled9__default.default.span`
9777
9724
  font-size: 0.88rem;
9778
9725
  font-weight: 500;
9779
9726
  color: ${(p) => p.$gold ? "#D4AF37" : "#fff"};
9780
9727
  font-variant-numeric: tabular-nums;
9781
9728
  `;
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
9729
  var NarrativeCard = styled9__default.default.div`
9790
9730
  background: #111111;
9791
9731
  border: 1px solid rgba(255,255,255,0.1);
@@ -10066,65 +10006,6 @@ var CompAssetTooltipRow = styled9__default.default.div`
10066
10006
  font-variant-numeric: tabular-nums;
10067
10007
  }
10068
10008
  `;
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
10009
  var FeaturesPanel = styled9__default.default.div`
10129
10010
  display: flex;
10130
10011
  flex-wrap: wrap;
@@ -10135,14 +10016,6 @@ var FeaturesPanel = styled9__default.default.div`
10135
10016
  padding: 1rem 1.25rem;
10136
10017
  justify-content: center;
10137
10018
  `;
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
10019
  var AssetFeatureItem = styled9__default.default.div`
10147
10020
  display: flex;
10148
10021
  align-items: center;
@@ -10239,101 +10112,6 @@ var SecurityDocLink = styled9__default.default.a`
10239
10112
  color: rgba(212,175,55,0.9);
10240
10113
  }
10241
10114
  `;
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
10115
  var DividendHistoryBtn = styled9__default.default.button`
10338
10116
  margin-top: 0.75rem;
10339
10117
  padding: 0.5rem 0;
@@ -11737,6 +11515,10 @@ var AssetName = styled9__default.default.div`
11737
11515
  svg { margin-left: 0.75rem; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); opacity: 0.7; }
11738
11516
  &:hover svg { opacity: 1; }
11739
11517
 
11518
+ @media (min-width: 769px) and (max-width: 1200px) {
11519
+ font-size: clamp(0.9rem, 0.5vw + 0.55rem, 1.15rem);
11520
+ }
11521
+
11740
11522
  @media (max-width: 768px) {
11741
11523
  font-size: 1rem;
11742
11524
  }
@@ -11866,7 +11648,7 @@ var IPOOptionThumb = styled9__default.default.img`
11866
11648
  var IPOOptionName = styled9__default.default.div`
11867
11649
  font-weight: 500;
11868
11650
  font-size: 0.82rem;
11869
- color: ${(p) => "#ebebeb"};
11651
+ color: ${"#ebebeb"};
11870
11652
  line-height: 1.3;
11871
11653
  `;
11872
11654
  var IPOOptionLocation = styled9__default.default.div`
@@ -12897,9 +12679,9 @@ var Panel = styled9__default.default.div`
12897
12679
  height: 100%;
12898
12680
  display: flex;
12899
12681
  flex-direction: column;
12900
- min-width: 450px;
12901
- max-width: 520px;
12902
- width: 520px;
12682
+ min-width: 380px;
12683
+ max-width: 460px;
12684
+ width: 460px;
12903
12685
  overflow: hidden;
12904
12686
  @media (max-width: 1024px) {
12905
12687
  min-width: 0;
@@ -13743,7 +13525,7 @@ var STATUS_COLOR2 = {
13743
13525
  CLOSED: "#848e9c",
13744
13526
  CANCELLED: "#f6465d"
13745
13527
  };
13746
- var ACTIVITY_PAGE_SIZE_DEFAULT = 10;
13528
+ var ACTIVITY_PAGE_SIZE_DEFAULT = 8;
13747
13529
  var formatCurrency4 = (value, opts) => {
13748
13530
  const min = opts?.minimumFractionDigits ?? 2;
13749
13531
  const max = opts?.maximumFractionDigits ?? 2;
@@ -13835,12 +13617,13 @@ function PortfolioActivityPanel({
13835
13617
  compactPositions = false,
13836
13618
  defaultTab,
13837
13619
  pageSize = ACTIVITY_PAGE_SIZE_DEFAULT,
13838
- blockExplorerBaseUrl = "https://sepolia.basescan.org/tx",
13620
+ blockExplorerBaseUrl: _blockExplorerBaseUrl = "https://sepolia.basescan.org/tx",
13839
13621
  className,
13840
13622
  style
13841
13623
  }) {
13842
13624
  const resolvedDefaultTab = defaultTab ?? (showPositionsTab ? "positions" : showSubscriptionsTab ? "subscriptions" : "orders");
13843
13625
  const [activeTab, setActiveTab] = React5.useState(resolvedDefaultTab);
13626
+ const [currentPage, setCurrentPage] = React5.useState(0);
13844
13627
  const [pendingCancelOrderId, setPendingCancelOrderId] = React5.useState(null);
13845
13628
  const [cancelAllConfirmOpen, setCancelAllConfirmOpen] = React5.useState(false);
13846
13629
  const [cancellingAll, setCancellingAll] = React5.useState(false);
@@ -13943,24 +13726,6 @@ function PortfolioActivityPanel({
13943
13726
  }));
13944
13727
  return [...orderHistory, ...mapped].sort((a, b) => b.createdAt - a.createdAt);
13945
13728
  }, [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
13729
  const positionsCount = positions.length;
13965
13730
  const openOrdersCount = React5.useMemo(
13966
13731
  () => openOrders.filter((o) => o.status === "OPEN" || o.status === "PARTIALLY_FILLED").length,
@@ -13979,7 +13744,30 @@ function PortfolioActivityPanel({
13979
13744
  );
13980
13745
  const handleTabChange = (tab) => {
13981
13746
  setActiveTab(tab);
13747
+ setCurrentPage(0);
13982
13748
  };
13749
+ const activeDataLength = (() => {
13750
+ switch (activeTab) {
13751
+ case "subscriptions":
13752
+ return offeringOrders.length;
13753
+ case "open-orders":
13754
+ return openOrders.length;
13755
+ case "orders":
13756
+ return mergedOrderHistory.length;
13757
+ case "trades":
13758
+ return tradeHistory.length;
13759
+ case "transfers":
13760
+ return transfers.length;
13761
+ default:
13762
+ return 0;
13763
+ }
13764
+ })();
13765
+ const totalPages = Math.ceil(activeDataLength / pageSize);
13766
+ const pagedOfferingOrders = offeringOrders.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
13767
+ const pagedOpenOrders = openOrders.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
13768
+ const pagedOrderHistory = mergedOrderHistory.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
13769
+ const pagedTradeHistory = tradeHistory.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
13770
+ const pagedTransfers = transfers.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
13983
13771
  return /* @__PURE__ */ jsxRuntime.jsxs(Container2, { className, style, children: [
13984
13772
  /* @__PURE__ */ jsxRuntime.jsx(PanelTitle, { children: "Activity" }),
13985
13773
  /* @__PURE__ */ jsxRuntime.jsxs(TabContainer, { children: [
@@ -14208,7 +13996,7 @@ function PortfolioActivityPanel({
14208
13996
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Status" }),
14209
13997
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Date" })
14210
13998
  ] }),
14211
- offeringOrders.map((order) => {
13999
+ pagedOfferingOrders.map((order) => {
14212
14000
  const meta = getOrderStatusMeta(order.status);
14213
14001
  return /* @__PURE__ */ jsxRuntime.jsxs(GridRow, { $columns: "1.2fr 0.8fr 1fr 1fr 0.8fr 1fr", children: [
14214
14002
  /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $primary: true, children: order.tokenName }) }),
@@ -14235,7 +14023,7 @@ function PortfolioActivityPanel({
14235
14023
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Status" }),
14236
14024
  onCancelOrder && /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, {})
14237
14025
  ] }),
14238
- openOrders.map((order) => {
14026
+ pagedOpenOrders.map((order) => {
14239
14027
  const meta = getOrderStatusMeta(order.status);
14240
14028
  const isMarket = order.type === "MARKET";
14241
14029
  const filledPercent = order.quantity > 0 ? Math.round(order.filledQuantity / order.quantity * 100) : 0;
@@ -14280,7 +14068,7 @@ function PortfolioActivityPanel({
14280
14068
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Status" }),
14281
14069
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Date" })
14282
14070
  ] }),
14283
- mergedOrderHistory.map((order) => {
14071
+ pagedOrderHistory.map((order) => {
14284
14072
  const meta = getOrderStatusMeta(order.status);
14285
14073
  const isMarket = order.type === "MARKET";
14286
14074
  const filledPercent = order.quantity > 0 ? Math.round(order.filledQuantity / order.quantity * 100) : 0;
@@ -14304,40 +14092,50 @@ function PortfolioActivityPanel({
14304
14092
  activeTab === "trades" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
14305
14093
  tradeHistory.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: "Completed trades will appear here." }),
14306
14094
  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: [
14095
+ /* @__PURE__ */ jsxRuntime.jsxs(GridHeader, { $columns: "1.2fr 0.6fr 0.8fr 1fr 1fr 1fr 1fr", children: [
14308
14096
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Asset" }),
14309
14097
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Side" }),
14310
14098
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Qty" }),
14311
14099
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Price" }),
14312
14100
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Total" }),
14313
- /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Fee" }),
14101
+ /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Settlement" }),
14314
14102
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Date" })
14315
14103
  ] }),
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))
14104
+ pagedTradeHistory.map((trade) => {
14105
+ const s = trade.status?.toUpperCase();
14106
+ const isSettled = s === "SETTLED" || s === "CONFIRMED" || s === "FILLED" || s === "ALLOCATED";
14107
+ const isFailed = s === "SETTLEMENT_FAILED" || s === "REJECTED" || s === "CANCELLED" || s === "CANCELED";
14108
+ const isSettling = !isSettled && !isFailed && !!trade.status;
14109
+ const settlementLabel = isSettled ? "Settled" : isFailed ? "Settlement Failed" : isSettling ? prettyLabel(trade.status) : "\u2014";
14110
+ 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;
14111
+ return /* @__PURE__ */ jsxRuntime.jsxs(GridRow, { $columns: "1.2fr 0.6fr 0.8fr 1fr 1fr 1fr 1fr", children: [
14112
+ /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $primary: true, children: trade.tokenName }) }),
14113
+ /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(SideBadge, { $side: sideLabel(trade.side), children: sideLabel(trade.side) }) }),
14114
+ /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { children: formatNumber2(trade.quantity) }) }),
14115
+ /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { children: formatCurrency4(trade.price) }) }),
14116
+ /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { children: formatCurrency4(trade.price * trade.quantity) }) }),
14117
+ /* @__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" }) }),
14118
+ /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $muted: true, children: formatTimestamp(trade.executedAt) }) })
14119
+ ] }, trade.tradeId);
14120
+ })
14325
14121
  ] })
14326
14122
  ] }),
14327
14123
  activeTab === "transfers" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
14328
14124
  transfers.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: "Deposits and withdrawals will appear here." }),
14329
14125
  transfers.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
14330
- /* @__PURE__ */ jsxRuntime.jsxs(GridHeader, { $columns: "0.8fr 1fr 1.5fr 0.8fr 1fr", children: [
14126
+ /* @__PURE__ */ jsxRuntime.jsxs(GridHeader, { $columns: "0.8fr 1fr 1.5fr 0.8fr 1fr 36px", children: [
14331
14127
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Type" }),
14332
14128
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Amount" }),
14333
14129
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Address" }),
14334
14130
  /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Status" }),
14335
- /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Date" })
14131
+ /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, { children: "Date" }),
14132
+ /* @__PURE__ */ jsxRuntime.jsx(GridHeaderCell, {})
14336
14133
  ] }),
14337
- transfers.map((t, idx) => {
14134
+ pagedTransfers.map((t, idx) => {
14338
14135
  const isDeposit = t.type === "DEPOSIT";
14339
14136
  const statusMeta = getOrderStatusMeta(t.status);
14340
- return /* @__PURE__ */ jsxRuntime.jsxs(GridRow, { $columns: "0.8fr 1fr 1.5fr 0.8fr 1fr", children: [
14137
+ const txUrl = t.blockchainTxHash ? `${_blockExplorerBaseUrl}/${t.blockchainTxHash}` : null;
14138
+ return /* @__PURE__ */ jsxRuntime.jsxs(GridRow, { $columns: "0.8fr 1fr 1.5fr 0.8fr 1fr 36px", children: [
14341
14139
  /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(SideBadge, { $side: isDeposit ? "Buy" : "Sell", children: isDeposit ? "Deposit" : "Withdraw" }) }),
14342
14140
  /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsxs(CellText, { $color: isDeposit ? "#0ecb81" : "#f6465d", children: [
14343
14141
  isDeposit ? "+" : "-",
@@ -14345,12 +14143,26 @@ function PortfolioActivityPanel({
14345
14143
  ] }) }),
14346
14144
  /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $muted: true, children: formatAddress(t.address) }) }),
14347
14145
  /* @__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) }) })
14146
+ /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(CellText, { $muted: true, children: formatTimestamp(t.createdAt) }) }),
14147
+ /* @__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: [
14148
+ /* @__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" }),
14149
+ /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "15 3 21 3 21 9" }),
14150
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
14151
+ ] }) }) })
14349
14152
  ] }, t.blockchainTxHash ?? `transfer-${idx}`);
14350
14153
  })
14351
14154
  ] })
14352
14155
  ] })
14353
14156
  ] }),
14157
+ totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs(PaginationBar, { children: [
14158
+ /* @__PURE__ */ jsxRuntime.jsx(PaginationBtn, { disabled: currentPage === 0, onClick: () => setCurrentPage((p) => p - 1), children: "\u2039 Prev" }),
14159
+ /* @__PURE__ */ jsxRuntime.jsxs(PaginationInfo, { children: [
14160
+ currentPage + 1,
14161
+ " / ",
14162
+ totalPages
14163
+ ] }),
14164
+ /* @__PURE__ */ jsxRuntime.jsx(PaginationBtn, { disabled: currentPage >= totalPages - 1, onClick: () => setCurrentPage((p) => p + 1), children: "Next \u203A" })
14165
+ ] }),
14354
14166
  cancelAllConfirmOpen && /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmOverlay, { onClick: () => setCancelAllConfirmOpen(false), children: /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmModal, { onClick: (e) => e.stopPropagation(), children: [
14355
14167
  /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmTitle, { children: "Cancel All Orders" }),
14356
14168
  /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmBody, { children: [
@@ -14471,48 +14283,6 @@ var TabCount = styled9__default.default.span`
14471
14283
  font-weight: 600;
14472
14284
  margin-left: 2px;
14473
14285
  `;
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
14286
  var ActivityTag = styled9__default.default.span`
14517
14287
  font-size: 0.58rem;
14518
14288
  font-weight: 600;
@@ -14522,41 +14292,6 @@ var ActivityTag = styled9__default.default.span`
14522
14292
  background: ${({ $bg }) => $bg || "rgba(255, 255, 255, 0.06)"};
14523
14293
  white-space: nowrap;
14524
14294
  `;
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
14295
  var EmptyState = styled9__default.default.div`
14561
14296
  padding: 1.5rem 0.75rem;
14562
14297
  text-align: center;
@@ -15061,13 +14796,6 @@ var CAssetName = styled9__default.default.div`
15061
14796
  align-items: center;
15062
14797
  gap: 0.3rem;
15063
14798
  `;
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
14799
  var CUnitsCell = styled9__default.default.div`
15072
14800
  font-size: 0.78rem;
15073
14801
  color: rgba(255, 255, 255, 0.8);
@@ -15143,6 +14871,48 @@ var CCloseBtn = styled9__default.default.button`
15143
14871
  border-color: rgba(230, 200, 126, 0.5);
15144
14872
  }
15145
14873
  `;
14874
+ var TxLink = styled9__default.default.a`
14875
+ display: flex;
14876
+ align-items: center;
14877
+ justify-content: center;
14878
+ color: rgba(230, 200, 126, 0.7);
14879
+ transition: color 0.15s;
14880
+ &:hover { color: #E6C87E; }
14881
+ `;
14882
+ var PaginationBar = styled9__default.default.div`
14883
+ display: flex;
14884
+ align-items: center;
14885
+ justify-content: flex-end;
14886
+ gap: 0.5rem;
14887
+ padding: 0.45rem 0.75rem;
14888
+ border-top: 1px solid rgba(255, 255, 255, 0.06);
14889
+ flex-shrink: 0;
14890
+ `;
14891
+ var PaginationBtn = styled9__default.default.button`
14892
+ background: transparent;
14893
+ border: 1px solid rgba(255, 255, 255, 0.1);
14894
+ border-radius: 4px;
14895
+ padding: 0.2rem 0.6rem;
14896
+ font-size: 0.7rem;
14897
+ color: rgba(255, 255, 255, 0.55);
14898
+ cursor: pointer;
14899
+ transition: all 0.15s;
14900
+ &:hover:not(:disabled) {
14901
+ border-color: rgba(230, 200, 126, 0.4);
14902
+ color: #E6C87E;
14903
+ }
14904
+ &:disabled {
14905
+ opacity: 0.3;
14906
+ cursor: default;
14907
+ }
14908
+ `;
14909
+ var PaginationInfo = styled9__default.default.span`
14910
+ font-size: 0.7rem;
14911
+ color: rgba(255, 255, 255, 0.4);
14912
+ min-width: 3rem;
14913
+ text-align: center;
14914
+ font-variant-numeric: tabular-nums;
14915
+ `;
15146
14916
  var formatOrderCurrency = (amount) => {
15147
14917
  if (amount >= 1e6) return `$${(amount / 1e6).toFixed(2)}M`;
15148
14918
  return `$${Math.round(amount).toLocaleString()}`;
@@ -15158,7 +14928,7 @@ var formatTimeAgo2 = (timestamp) => {
15158
14928
  };
15159
14929
  function PropertyBuy({
15160
14930
  propertyName = "Loaf Property",
15161
- propertyLocation: propertyLocationLabel = "Sydney, NSW",
14931
+ propertyLocation: _propertyLocationLabel = "Sydney, NSW",
15162
14932
  tokenDisplayName = "Property Token",
15163
14933
  tokenSymbol = "LOAF",
15164
14934
  tokenName,
@@ -15183,6 +14953,7 @@ function PropertyBuy({
15183
14953
  portfolioActivity,
15184
14954
  newsItems = [],
15185
14955
  newsConnectionStatus,
14956
+ videoUrl,
15186
14957
  toast
15187
14958
  }) {
15188
14959
  const [sliderValue, setSliderValue] = React5.useState(0);
@@ -15425,32 +15196,15 @@ function PropertyBuy({
15425
15196
  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
15197
  ] })
15427
15198
  ] }),
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
- ] }),
15199
+ /* @__PURE__ */ jsxRuntime.jsx(
15200
+ PropertyMediaRow,
15201
+ {
15202
+ newsItems,
15203
+ newsConnectionStatus,
15204
+ videoSrc: videoUrl || "/property-showcase.mp4",
15205
+ videoTitle: propertyName
15206
+ }
15207
+ ),
15454
15208
  /* @__PURE__ */ jsxRuntime.jsx(
15455
15209
  OrderConfirmationModal,
15456
15210
  {
@@ -15473,7 +15227,7 @@ function PropertyBuy({
15473
15227
  }
15474
15228
  var HeroGrid = styled9__default.default.div`
15475
15229
  display: grid;
15476
- grid-template-columns: 1fr auto;
15230
+ grid-template-columns: minmax(0, 1fr) 460px;
15477
15231
  grid-template-rows: auto auto minmax(450px, 520px);
15478
15232
  gap: 1.5rem;
15479
15233
  width: 100%;
@@ -15483,16 +15237,21 @@ var HeroGrid = styled9__default.default.div`
15483
15237
  & > div:nth-child(1) {
15484
15238
  grid-column: 1 / 2;
15485
15239
  grid-row: 1 / 2;
15240
+ min-width: 0;
15486
15241
  }
15487
15242
 
15488
15243
  & > div:nth-child(2) {
15489
15244
  grid-column: 1 / 2;
15490
15245
  grid-row: 2 / 3;
15246
+ min-width: 0;
15247
+ overflow: hidden;
15491
15248
  }
15492
15249
 
15493
15250
  & > div:nth-child(3) {
15494
15251
  grid-column: 1 / 2;
15495
15252
  grid-row: 3 / 4;
15253
+ min-width: 0;
15254
+ overflow: hidden;
15496
15255
  }
15497
15256
 
15498
15257
  & > div:nth-child(4) {
@@ -15500,9 +15259,10 @@ var HeroGrid = styled9__default.default.div`
15500
15259
  grid-row: 1 / 4;
15501
15260
  display: flex;
15502
15261
  flex-direction: column;
15262
+ min-width: 0;
15503
15263
  }
15504
15264
 
15505
- @media (max-width: 1024px) {
15265
+ @media (max-width: 1280px) {
15506
15266
  display: flex;
15507
15267
  flex-direction: column;
15508
15268
  gap: 1rem;
@@ -15561,15 +15321,17 @@ var BottomRow = styled9__default.default.div`
15561
15321
  display: flex;
15562
15322
  gap: 1.5rem;
15563
15323
  align-items: stretch;
15564
- @media (max-width: 1024px) {
15324
+ min-width: 0;
15325
+ overflow: hidden;
15326
+ @media (max-width: 1280px) {
15565
15327
  flex-direction: column;
15566
15328
  gap: 1rem;
15567
15329
  }
15568
15330
  `;
15569
15331
  var RecentOrderPanel = styled9__default.default.div`
15570
- flex: 0 0 auto;
15571
- min-width: 420px;
15572
- max-width: 540px;
15332
+ flex: 0 0 340px;
15333
+ min-width: 0;
15334
+ max-width: 380px;
15573
15335
  background-color: var(--color-card-darker, #111);
15574
15336
  border-radius: 8px;
15575
15337
  padding: 1.5rem;
@@ -15735,78 +15497,6 @@ var PurchaseAmount = styled9__default.default.div`
15735
15497
  white-space: nowrap;
15736
15498
  margin-left: 1rem;
15737
15499
  `;
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
15500
  var PaymentOption = styled9__default.default.div`
15811
15501
  display: flex;
15812
15502
  align-items: center;
@@ -18361,6 +18051,7 @@ exports.PropertyDocuments = PropertyDocuments;
18361
18051
  exports.PropertyHeroHeader = PropertyHeroHeader;
18362
18052
  exports.PropertyHistory = PropertyHistory;
18363
18053
  exports.PropertyInspectionTimes = PropertyInspectionTimes;
18054
+ exports.PropertyMediaRow = PropertyMediaRow;
18364
18055
  exports.PropertyNewsUpdates = PropertyNewsUpdates;
18365
18056
  exports.PropertyOffers = PropertyOffers;
18366
18057
  exports.PropertyOverview = PropertyOverview;