@loafmarkets/ui 0.1.327 → 0.1.329

package/dist/index.mjs

@@ -2832,6 +2832,7 @@ var PropertyNewsUpdates = React5.forwardRef(
     viewAllHref,
     viewAllLabel = "View All News",
     connectionStatus = "live",
+    disablePagination = false,
     ...props
   }, ref) => {
     const isPurchaseVariant = variant === "purchases";
@@ -2865,7 +2866,7 @@ var PropertyNewsUpdates = React5.forwardRef(
       () => Math.max(1, Math.ceil(homeFilteredItems.length / ITEMS_PER_PAGE)),
       [homeFilteredItems.length]
     );
-    const homePaginatedItems = homeFilteredItems.slice(homePage * ITEMS_PER_PAGE, (homePage + 1) * ITEMS_PER_PAGE);
+    const homePaginatedItems = disablePagination ? homeFilteredItems : homeFilteredItems.slice(homePage * ITEMS_PER_PAGE, (homePage + 1) * ITEMS_PER_PAGE);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -2920,7 +2921,7 @@ var PropertyNewsUpdates = React5.forwardRef(
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn("flex flex-1 flex-col overflow-hidden", isHomeVariant ? "mt-2 gap-0" : "mt-4 gap-3"),
+              className: cn("flex flex-1 flex-col overflow-y-auto overflow-x-hidden", isHomeVariant ? "mt-2 gap-0" : "mt-4 gap-3"),
               style: !isPurchaseVariant && !isHomeVariant ? { minHeight: `${ITEMS_PER_PAGE * 86}px` } : void 0,
               children: isPurchaseVariant ? purchaseItems.length > 0 ? purchaseItems.slice(0, 7).map((purchase, index) => {
                 const maxAmount = 6e4;
@@ -3064,7 +3065,7 @@ var PropertyNewsUpdates = React5.forwardRef(
               ] })
             }
           ),
-          isHomeVariant && homeTotalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center justify-between text-xs text-white/60", children: [
+          isHomeVariant && !disablePagination && homeTotalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center justify-between text-xs text-white/60", children: [
             /* @__PURE__ */ jsx(
               "button",
               {
@@ -3128,6 +3129,46 @@ var PropertyNewsUpdates = React5.forwardRef(
   }
 );
 PropertyNewsUpdates.displayName = "PropertyNewsUpdates";
+function PropertyMediaRow({
+  newsItems,
+  newsConnectionStatus,
+  videoSrc,
+  videoTitle,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4 lg:flex-row lg:items-stretch lg:gap-6 lg:h-[700px]", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "lg:hidden h-[320px]", children: /* @__PURE__ */ jsx(PropertyTour, { title: videoTitle, src: videoSrc, className: "h-full w-full !max-w-none" }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        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]",
+        style: { background: "#111111" },
+        children: /* @__PURE__ */ jsx(
+          PropertyNewsUpdates,
+          {
+            items: newsItems,
+            variant: "home",
+            heading: "Property News & Headlines",
+            connectionStatus: newsConnectionStatus,
+            highlightFirst: false,
+            disablePagination: true,
+            style: {
+              maxWidth: "none",
+              background: "transparent",
+              borderRadius: 0,
+              padding: "1.25rem 1.5rem",
+              boxShadow: "none",
+              border: "none",
+              height: "100%",
+              overflow: "visible"
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "hidden lg:flex lg:flex-1 lg:min-w-0 lg:h-full", children: /* @__PURE__ */ jsx(PropertyTour, { title: videoTitle, src: videoSrc, className: "h-full w-full !max-w-none" }) })
+  ] });
+}
 var defaultFormat = (value) => new Intl.NumberFormat("en-US", {
   style: "currency",
   currency: "USD",
@@ -8518,14 +8559,6 @@ var DEFAULT_FEATURES = [
   { icon: /* @__PURE__ */ jsx(MdYard, { size: 18 }), label: "Garden" },
   { icon: /* @__PURE__ */ jsx(MdFitnessCenter, { size: 18 }), label: "Gym" }
 ];
-var DEFAULT_PROPERTY_INFO = [
-  { label: "Property Type", value: "N/A" },
-  { label: "Built", value: "N/A" },
-  { label: "Ownership", value: "N/A" },
-  { label: "Zoning", value: "N/A" },
-  { label: "Levels", value: "N/A" },
-  { label: "Status", value: "N/A" }
-];
 var DEFAULT_DESCRIPTION = "Property description not available.";
 function truncateAddress(addr) {
   if (addr.length <= 12) return addr;
@@ -8566,7 +8599,7 @@ function generateDividendHistory(valuation, totalTokens, tokenPrice, realPriceHi
   return { records, priceHistory };
 }
 function PropertyOverview({
-  propertyName,
+  propertyName: _propertyName,
   location,
   midPrice,
   onTradeClick,
@@ -8580,7 +8613,7 @@ function PropertyOverview({
   landSizeSqm: landProp,
   buildingSizeSqm: buildingProp,
   features: featuresProp,
-  propertyInfo: propertyInfoProp,
+  propertyInfo: _propertyInfoProp,
   overviewData,
   bedrooms,
   bathrooms,
@@ -8618,25 +8651,11 @@ function PropertyOverview({
     }
     return f;
   })();
-  propertyInfoProp ?? (() => {
-    const info = [...DEFAULT_PROPERTY_INFO];
-    if (propertyTypeLabel && !overviewData) info[0] = { label: "Property Type", value: propertyTypeLabel };
-    if (overviewData) {
-      info[0] = { label: "Property Type", value: overviewData.propertyType ?? propertyTypeLabel ?? "N/A" };
-      info[1] = { label: "Built", value: String(overviewData.yearBuilt) };
-      info[2] = { label: "Ownership", value: overviewData.ownership };
-      info[3] = { label: "Zoning", value: overviewData.zoning };
-      info[4] = { label: "Levels", value: String(overviewData.levels) };
-      info[5] = { label: "DA Status", value: overviewData.daStatus, status: overviewData.daStatus?.toLowerCase() === "approved" ? "active" : "progress" };
-    }
-    return info;
-  })();
   const resolvedTokensIssued = tokensIssued ?? overviewData?.tokensIssued ?? null;
   const resolvedValuation = overviewData?.offeringValuation ?? (midPrice && resolvedTokensIssued ? midPrice * resolvedTokensIssued : null);
   const tokenPriceValue = midPrice > 0 ? midPrice : null;
   const weeklyRent = overviewData?.weeklyRent ?? 0;
   const annualRent = weeklyRent * 52;
-  resolvedValuation && annualRent > 0 ? (annualRent / resolvedValuation * 100).toFixed(2) : null;
   const monthlyCoupon = annualRent / 12;
   const tokenMarketCap = tokenPriceValue && resolvedTokensIssued ? tokenPriceValue * resolvedTokensIssued : null;
   const currentDividendYield = tokenMarketCap && monthlyCoupon > 0 ? (monthlyCoupon * 12 / tokenMarketCap * 100).toFixed(2) : null;
@@ -8659,12 +8678,6 @@ function PropertyOverview({
     { label: "Location", value: location || "\u2014" }
   ];
   const vol24hDollar = volume24h != null && tokenPriceValue ? volume24h * tokenPriceValue : null;
-  (() => {
-    if (!tokenMarketCap || tokenMarketCap <= 0 || vol24hDollar == null) return null;
-    const turnover = vol24hDollar / (tokenMarketCap / 2);
-    const holdPct = Math.max(0, Math.min(100, (1 - turnover) * 100));
-    return { holdPct, tradePct: +(100 - holdPct).toFixed(1) };
-  })();
   const fmtDollar = (v) => {
     if (v >= 1e6) return `$${(v / 1e6).toFixed(2)}M`;
     if (v >= 1e3) return `$${Math.round(v).toLocaleString()}`;
@@ -9424,20 +9437,6 @@ var AssetBentoNarratives = styled9.div`
   margin-top: 0.75rem;
   @media (max-width: 768px) { grid-template-columns: 1fr; }
 `;
-styled9.div`
-  width: 100vw;
-  position: relative;
-  left: 50%;
-  margin-left: -50vw;
-  display: flex;
-  justify-content: center;
-  > * {
-    width: 100%;
-    max-width: 1800px;
-    padding: 0 clamp(1rem, 2vw, 2rem);
-    box-sizing: border-box;
-  }
-`;
 var Section = styled9.div`
   background: #111;
   border-radius: 12px;
@@ -9554,45 +9553,6 @@ var TokenDetailValue = styled9.span`
   font-weight: 500;
   font-family: ${(p) => p.$mono ? "'SF Mono', 'Fira Code', monospace" : "inherit"};
 `;
-styled9.div`
-  background: rgba(255,255,255,0.025);
-  border: 1px solid rgba(255,255,255,0.06);
-  border-radius: 10px;
-  padding: 1rem 1.25rem;
-`;
-styled9.div`
-  font-size: 0.6rem;
-  color: rgba(255,255,255,0.3);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  font-weight: 500;
-  margin-bottom: 0.85rem;
-`;
-styled9.div`
-  display: flex;
-  gap: 0.5rem;
-  justify-content: space-between;
-`;
-styled9.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.4rem;
-  flex: 1;
-  min-width: 0;
-`;
-styled9.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 44px;
-`;
-styled9.span`
-  font-size: 0.62rem;
-  color: rgba(255,255,255,0.35);
-  font-weight: 400;
-  text-align: center;
-`;
 var CopyBtn = styled9.button`
   background: none;
   border: none;
@@ -9698,12 +9658,6 @@ var StatsTab = styled9.button`
 var StatsTabContent = styled9.div`
   padding: 0.5rem 1.25rem 1.25rem;
 `;
-styled9.div`
-  display: grid;
-  grid-template-columns: 340px 340px;
-  gap: 1rem;
-  @media (max-width: 768px) { grid-template-columns: 1fr; }
-`;
 var StatsColumn = styled9.div`
   background: #111111;
   border: 1px solid rgba(255,255,255,0.1);
@@ -9740,26 +9694,12 @@ var StatLabel = styled9.span`
   align-items: center;
   gap: 0.5rem;
 `;
-styled9.span`
-  font-size: 0.6rem;
-  color: #4CAF50;
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-`;
 var StatValue = styled9.span`
   font-size: 0.88rem;
   font-weight: 500;
   color: ${(p) => p.$gold ? "#D4AF37" : "#fff"};
   font-variant-numeric: tabular-nums;
 `;
-styled9.div`
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0.75rem;
-  margin-bottom: 1.25rem;
-  @media (max-width: 768px) { grid-template-columns: 1fr; }
-`;
 var NarrativeCard = styled9.div`
   background: #111111;
   border: 1px solid rgba(255,255,255,0.1);
@@ -10040,65 +9980,6 @@ var CompAssetTooltipRow = styled9.div`
     font-variant-numeric: tabular-nums;
   }
 `;
-styled9.div`
-  font-size: 0.65rem;
-  color: rgba(255,255,255,0.35);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  font-weight: 500;
-  margin-top: 1rem;
-  padding-top: 0.75rem;
-  padding-bottom: 0.35rem;
-  border-top: 1px solid rgba(255,255,255,0.04);
-`;
-styled9.div`
-  font-size: 0.72rem;
-  color: rgba(255,255,255,0.3);
-  line-height: 1.5;
-  margin-bottom: 0.6rem;
-`;
-styled9.div`
-  display: flex;
-  flex-direction: column;
-`;
-styled9.div`
-  display: grid;
-  grid-template-columns: 1fr 52px auto auto;
-  align-items: center;
-  gap: 0.4rem;
-  padding: 0.45rem 0;
-  border-bottom: ${(p) => p.$last ? "none" : "1px solid rgba(255,255,255,0.03)"};
-  ${(p) => p.$active ? `
-    background: rgba(212,175,55,0.04);
-    margin: 0 -0.5rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    border-radius: 6px;
-  ` : ""}
-`;
-styled9.span`
-  font-size: 0.8rem;
-  font-weight: 500;
-  color: rgba(255,255,255,0.7);
-`;
-styled9.span`
-  font-size: 0.72rem;
-  color: rgba(255,255,255,0.3);
-  text-align: center;
-  font-variant-numeric: tabular-nums;
-`;
-styled9.span`
-  font-size: 0.65rem;
-  color: rgba(255,255,255,0.2);
-  text-align: right;
-  white-space: nowrap;
-`;
-styled9.span`
-  font-size: 0.68rem;
-  font-weight: 500;
-  text-align: right;
-  color: ${(p) => p.$status === "listed" ? "#D4AF37" : "rgba(255,255,255,0.25)"};
-`;
 var FeaturesPanel = styled9.div`
   display: flex;
   flex-wrap: wrap;
@@ -10109,14 +9990,6 @@ var FeaturesPanel = styled9.div`
   padding: 1rem 1.25rem;
   justify-content: center;
 `;
-styled9.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem 1.25rem;
-  padding-top: 0.75rem;
-  margin-top: 0.25rem;
-  border-top: 1px solid rgba(255,255,255,0.04);
-`;
 var AssetFeatureItem = styled9.div`
   display: flex;
   align-items: center;
@@ -10213,101 +10086,6 @@ var SecurityDocLink = styled9.a`
     color: rgba(212,175,55,0.9);
   }
 `;
-styled9.div`
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 0.75rem 0 0;
-  margin-top: 0.5rem;
-  border-top: 1px solid rgba(255,255,255,0.04);
-`;
-styled9.div`
-  display: flex;
-  align-items: center;
-  gap: 5px;
-`;
-styled9.span`
-  font-size: 0.65rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: rgba(255,255,255,0.4);
-`;
-styled9.span`
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 13px;
-  height: 13px;
-  border-radius: 50%;
-  border: 1px solid rgba(255,255,255,0.15);
-  font-size: 0.5rem;
-  font-weight: 700;
-  color: rgba(255,255,255,0.3);
-  cursor: help;
-  flex-shrink: 0;
-
-  &::after {
-    content: attr(data-tip);
-    position: absolute;
-    bottom: calc(100% + 6px);
-    left: 0;
-    width: max-content;
-    max-width: 260px;
-    padding: 8px 12px;
-    border-radius: 6px;
-    background: #1a1a1e;
-    border: 1px solid rgba(255,255,255,0.1);
-    color: rgba(255,255,255,0.7);
-    font-size: 0.7rem;
-    font-weight: 400;
-    letter-spacing: 0;
-    text-transform: none;
-    line-height: 1.45;
-    white-space: normal;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.15s;
-    z-index: 10;
-  }
-
-  &:hover::after {
-    opacity: 1;
-  }
-`;
-styled9.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-styled9.span`
-  font-size: 0.7rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: ${(p) => p.$side === "trade" ? "rgba(246, 70, 93, 0.6)" : "rgba(14, 203, 129, 0.6)"};
-`;
-styled9.span`
-  font-size: 0.75rem;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  color: ${(p) => p.$side === "trade" ? "rgba(246, 70, 93, 0.7)" : "rgba(14, 203, 129, 0.7)"};
-`;
-styled9.div`
-  height: 6px;
-  border-radius: 3px;
-  background: rgba(246, 70, 93, 0.15);
-  overflow: hidden;
-  position: relative;
-`;
-styled9.div`
-  height: 100%;
-  width: ${(p) => p.$pct}%;
-  border-radius: 3px;
-  background: rgba(14, 203, 129, 0.35);
-  transition: width 0.6s ease;
-`;
 var DividendHistoryBtn = styled9.button`
   margin-top: 0.75rem;
   padding: 0.5rem 0;
@@ -11711,6 +11489,10 @@ var AssetName = styled9.div`
   svg { margin-left: 0.75rem; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); opacity: 0.7; }
   &:hover svg { opacity: 1; }
 
+  @media (min-width: 769px) and (max-width: 1200px) {
+    font-size: clamp(0.9rem, 0.5vw + 0.55rem, 1.15rem);
+  }
+
   @media (max-width: 768px) {
     font-size: 1rem;
   }
@@ -11840,7 +11622,7 @@ var IPOOptionThumb = styled9.img`
 var IPOOptionName = styled9.div`
   font-weight: 500;
   font-size: 0.82rem;
-  color: ${(p) => "#ebebeb"};
+  color: ${"#ebebeb"};
   line-height: 1.3;
 `;
 var IPOOptionLocation = styled9.div`
@@ -12871,9 +12653,9 @@ var Panel = styled9.div`
   height: 100%;
   display: flex;
   flex-direction: column;
-  min-width: 450px;
-  max-width: 520px;
-  width: 520px;
+  min-width: 380px;
+  max-width: 460px;
+  width: 460px;
   overflow: hidden;
   @media (max-width: 1024px) {
     min-width: 0;
@@ -13717,7 +13499,7 @@ var STATUS_COLOR2 = {
   CLOSED: "#848e9c",
   CANCELLED: "#f6465d"
 };
-var ACTIVITY_PAGE_SIZE_DEFAULT = 10;
+var ACTIVITY_PAGE_SIZE_DEFAULT = 8;
 var formatCurrency4 = (value, opts) => {
   const min = opts?.minimumFractionDigits ?? 2;
   const max = opts?.maximumFractionDigits ?? 2;
@@ -13809,12 +13591,13 @@ function PortfolioActivityPanel({
   compactPositions = false,
   defaultTab,
   pageSize = ACTIVITY_PAGE_SIZE_DEFAULT,
-  blockExplorerBaseUrl = "https://sepolia.basescan.org/tx",
+  blockExplorerBaseUrl: _blockExplorerBaseUrl = "https://sepolia.basescan.org/tx",
   className,
   style
 }) {
   const resolvedDefaultTab = defaultTab ?? (showPositionsTab ? "positions" : showSubscriptionsTab ? "subscriptions" : "orders");
   const [activeTab, setActiveTab] = useState(resolvedDefaultTab);
+  const [currentPage, setCurrentPage] = useState(0);
   const [pendingCancelOrderId, setPendingCancelOrderId] = useState(null);
   const [cancelAllConfirmOpen, setCancelAllConfirmOpen] = useState(false);
   const [cancellingAll, setCancellingAll] = useState(false);
@@ -13917,24 +13700,6 @@ function PortfolioActivityPanel({
     }));
     return [...orderHistory, ...mapped].sort((a, b) => b.createdAt - a.createdAt);
   }, [showSubscriptionsTab, offeringOrders, orderHistory]);
-  useMemo(() => {
-    switch (activeTab) {
-      case "positions":
-        return positions.length;
-      case "subscriptions":
-        return offeringOrders.length;
-      case "open-orders":
-        return openOrders.length;
-      case "orders":
-        return mergedOrderHistory.length;
-      case "trades":
-        return tradeHistory.length;
-      case "transfers":
-        return transfers.length;
-      default:
-        return 0;
-    }
-  }, [activeTab, positions.length, offeringOrders.length, openOrders.length, mergedOrderHistory.length, tradeHistory.length, transfers.length]);
   const positionsCount = positions.length;
   const openOrdersCount = useMemo(
     () => openOrders.filter((o) => o.status === "OPEN" || o.status === "PARTIALLY_FILLED").length,
@@ -13953,7 +13718,30 @@ function PortfolioActivityPanel({
   );
   const handleTabChange = (tab) => {
     setActiveTab(tab);
+    setCurrentPage(0);
   };
+  const activeDataLength = (() => {
+    switch (activeTab) {
+      case "subscriptions":
+        return offeringOrders.length;
+      case "open-orders":
+        return openOrders.length;
+      case "orders":
+        return mergedOrderHistory.length;
+      case "trades":
+        return tradeHistory.length;
+      case "transfers":
+        return transfers.length;
+      default:
+        return 0;
+    }
+  })();
+  const totalPages = Math.ceil(activeDataLength / pageSize);
+  const pagedOfferingOrders = offeringOrders.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
+  const pagedOpenOrders = openOrders.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
+  const pagedOrderHistory = mergedOrderHistory.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
+  const pagedTradeHistory = tradeHistory.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
+  const pagedTransfers = transfers.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
   return /* @__PURE__ */ jsxs(Container2, { className, style, children: [
     /* @__PURE__ */ jsx(PanelTitle, { children: "Activity" }),
     /* @__PURE__ */ jsxs(TabContainer, { children: [
@@ -14182,7 +13970,7 @@ function PortfolioActivityPanel({
             /* @__PURE__ */ jsx(GridHeaderCell, { children: "Status" }),
             /* @__PURE__ */ jsx(GridHeaderCell, { children: "Date" })
           ] }),
-          offeringOrders.map((order) => {
+          pagedOfferingOrders.map((order) => {
             const meta = getOrderStatusMeta(order.status);
             return /* @__PURE__ */ jsxs(GridRow, { $columns: "1.2fr 0.8fr 1fr 1fr 0.8fr 1fr", children: [
               /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $primary: true, children: order.tokenName }) }),
@@ -14209,7 +13997,7 @@ function PortfolioActivityPanel({
             /* @__PURE__ */ jsx(GridHeaderCell, { children: "Status" }),
             onCancelOrder && /* @__PURE__ */ jsx(GridHeaderCell, {})
           ] }),
-          openOrders.map((order) => {
+          pagedOpenOrders.map((order) => {
             const meta = getOrderStatusMeta(order.status);
             const isMarket = order.type === "MARKET";
             const filledPercent = order.quantity > 0 ? Math.round(order.filledQuantity / order.quantity * 100) : 0;
@@ -14254,7 +14042,7 @@ function PortfolioActivityPanel({
             /* @__PURE__ */ jsx(GridHeaderCell, { children: "Status" }),
             /* @__PURE__ */ jsx(GridHeaderCell, { children: "Date" })
           ] }),
-          mergedOrderHistory.map((order) => {
+          pagedOrderHistory.map((order) => {
             const meta = getOrderStatusMeta(order.status);
             const isMarket = order.type === "MARKET";
             const filledPercent = order.quantity > 0 ? Math.round(order.filledQuantity / order.quantity * 100) : 0;
@@ -14278,40 +14066,50 @@ function PortfolioActivityPanel({
       activeTab === "trades" && /* @__PURE__ */ jsxs(Fragment, { children: [
         tradeHistory.length === 0 && /* @__PURE__ */ jsx(EmptyState, { children: "Completed trades will appear here." }),
         tradeHistory.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(GridHeader, { $columns: "1.2fr 0.6fr 0.8fr 1fr 1fr 0.8fr 1fr", children: [
+          /* @__PURE__ */ jsxs(GridHeader, { $columns: "1.2fr 0.6fr 0.8fr 1fr 1fr 1fr 1fr", children: [
             /* @__PURE__ */ jsx(GridHeaderCell, { children: "Asset" }),
             /* @__PURE__ */ jsx(GridHeaderCell, { children: "Side" }),
             /* @__PURE__ */ jsx(GridHeaderCell, { children: "Qty" }),
             /* @__PURE__ */ jsx(GridHeaderCell, { children: "Price" }),
             /* @__PURE__ */ jsx(GridHeaderCell, { children: "Total" }),
-            /* @__PURE__ */ jsx(GridHeaderCell, { children: "Fee" }),
+            /* @__PURE__ */ jsx(GridHeaderCell, { children: "Settlement" }),
             /* @__PURE__ */ jsx(GridHeaderCell, { children: "Date" })
           ] }),
-          tradeHistory.map((trade) => /* @__PURE__ */ jsxs(GridRow, { $columns: "1.2fr 0.6fr 0.8fr 1fr 1fr 0.8fr 1fr", children: [
-            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $primary: true, children: trade.tokenName }) }),
-            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(SideBadge, { $side: sideLabel(trade.side), children: sideLabel(trade.side) }) }),
-            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { children: formatNumber2(trade.quantity) }) }),
-            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { children: formatCurrency4(trade.price) }) }),
-            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { children: formatCurrency4(trade.price * trade.quantity) }) }),
-            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: formatCurrency4(trade.fee) }) }),
-            /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: formatTimestamp(trade.executedAt) }) })
-          ] }, trade.tradeId))
+          pagedTradeHistory.map((trade) => {
+            const s = trade.status?.toUpperCase();
+            const isSettled = s === "SETTLED" || s === "CONFIRMED" || s === "FILLED" || s === "ALLOCATED";
+            const isFailed = s === "SETTLEMENT_FAILED" || s === "REJECTED" || s === "CANCELLED" || s === "CANCELED";
+            const isSettling = !isSettled && !isFailed && !!trade.status;
+            const settlementLabel = isSettled ? "Settled" : isFailed ? "Settlement Failed" : isSettling ? prettyLabel(trade.status) : "\u2014";
+            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;
+            return /* @__PURE__ */ jsxs(GridRow, { $columns: "1.2fr 0.6fr 0.8fr 1fr 1fr 1fr 1fr", children: [
+              /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $primary: true, children: trade.tokenName }) }),
+              /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(SideBadge, { $side: sideLabel(trade.side), children: sideLabel(trade.side) }) }),
+              /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { children: formatNumber2(trade.quantity) }) }),
+              /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { children: formatCurrency4(trade.price) }) }),
+              /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { children: formatCurrency4(trade.price * trade.quantity) }) }),
+              /* @__PURE__ */ jsx(GridCell, { children: settlementMeta ? /* @__PURE__ */ jsx(ActivityTag, { $color: settlementMeta.color, $bg: settlementMeta.bg, children: settlementLabel }) : /* @__PURE__ */ jsx(CellText, { $muted: true, children: "\u2014" }) }),
+              /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: formatTimestamp(trade.executedAt) }) })
+            ] }, trade.tradeId);
+          })
         ] })
       ] }),
       activeTab === "transfers" && /* @__PURE__ */ jsxs(Fragment, { children: [
         transfers.length === 0 && /* @__PURE__ */ jsx(EmptyState, { children: "Deposits and withdrawals will appear here." }),
         transfers.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(GridHeader, { $columns: "0.8fr 1fr 1.5fr 0.8fr 1fr", children: [
+          /* @__PURE__ */ jsxs(GridHeader, { $columns: "0.8fr 1fr 1.5fr 0.8fr 1fr 36px", children: [
             /* @__PURE__ */ jsx(GridHeaderCell, { children: "Type" }),
             /* @__PURE__ */ jsx(GridHeaderCell, { children: "Amount" }),
             /* @__PURE__ */ jsx(GridHeaderCell, { children: "Address" }),
             /* @__PURE__ */ jsx(GridHeaderCell, { children: "Status" }),
-            /* @__PURE__ */ jsx(GridHeaderCell, { children: "Date" })
+            /* @__PURE__ */ jsx(GridHeaderCell, { children: "Date" }),
+            /* @__PURE__ */ jsx(GridHeaderCell, {})
           ] }),
-          transfers.map((t, idx) => {
+          pagedTransfers.map((t, idx) => {
             const isDeposit = t.type === "DEPOSIT";
             const statusMeta = getOrderStatusMeta(t.status);
-            return /* @__PURE__ */ jsxs(GridRow, { $columns: "0.8fr 1fr 1.5fr 0.8fr 1fr", children: [
+            const txUrl = t.blockchainTxHash ? `${_blockExplorerBaseUrl}/${t.blockchainTxHash}` : null;
+            return /* @__PURE__ */ jsxs(GridRow, { $columns: "0.8fr 1fr 1.5fr 0.8fr 1fr 36px", children: [
               /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(SideBadge, { $side: isDeposit ? "Buy" : "Sell", children: isDeposit ? "Deposit" : "Withdraw" }) }),
               /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsxs(CellText, { $color: isDeposit ? "#0ecb81" : "#f6465d", children: [
                 isDeposit ? "+" : "-",
@@ -14319,12 +14117,26 @@ function PortfolioActivityPanel({
               ] }) }),
               /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: formatAddress(t.address) }) }),
               /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(ActivityTag, { $color: statusMeta.color, $bg: statusMeta.bg, children: prettyLabel(t.status) }) }),
-              /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: formatTimestamp(t.createdAt) }) })
+              /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: formatTimestamp(t.createdAt) }) }),
+              /* @__PURE__ */ jsx(GridCell, { children: txUrl && /* @__PURE__ */ jsx(TxLink, { href: txUrl, target: "_blank", rel: "noopener noreferrer", title: "View on BaseScan", children: /* @__PURE__ */ jsxs("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+                /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+                /* @__PURE__ */ jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+              ] }) }) })
             ] }, t.blockchainTxHash ?? `transfer-${idx}`);
           })
         ] })
       ] })
     ] }),
+    totalPages > 1 && /* @__PURE__ */ jsxs(PaginationBar, { children: [
+      /* @__PURE__ */ jsx(PaginationBtn, { disabled: currentPage === 0, onClick: () => setCurrentPage((p) => p - 1), children: "\u2039 Prev" }),
+      /* @__PURE__ */ jsxs(PaginationInfo, { children: [
+        currentPage + 1,
+        " / ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ jsx(PaginationBtn, { disabled: currentPage >= totalPages - 1, onClick: () => setCurrentPage((p) => p + 1), children: "Next \u203A" })
+    ] }),
     cancelAllConfirmOpen && /* @__PURE__ */ jsx(CancelConfirmOverlay, { onClick: () => setCancelAllConfirmOpen(false), children: /* @__PURE__ */ jsxs(CancelConfirmModal, { onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ jsx(CancelConfirmTitle, { children: "Cancel All Orders" }),
       /* @__PURE__ */ jsxs(CancelConfirmBody, { children: [
@@ -14445,48 +14257,6 @@ var TabCount = styled9.span`
   font-weight: 600;
   margin-left: 2px;
 `;
-styled9.div`
-  display: grid;
-  grid-template-columns: auto 1fr auto auto;
-  align-items: center;
-  gap: 0 1rem;
-  padding: 0.6rem 0.25rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.015);
-  }
-`;
-styled9.span`
-  font-size: 0.6rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  padding: 0.2rem 0.45rem;
-  border-radius: 3px;
-  min-width: 28px;
-  text-align: center;
-  color: ${({ $side }) => $side === "Buy" ? "#0ecb81" : "#f6465d"};
-  background: ${({ $side }) => $side === "Buy" ? "rgba(14, 203, 129, 0.1)" : "rgba(246, 70, 93, 0.1)"};
-`;
-styled9.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.1rem;
-`;
-styled9.span`
-  font-size: 0.8rem;
-  color: #fff;
-  font-weight: 500;
-`;
-styled9.span`
-  font-size: 0.6rem;
-  color: rgba(255, 255, 255, 0.35);
-`;
 var ActivityTag = styled9.span`
   font-size: 0.58rem;
   font-weight: 600;
@@ -14496,41 +14266,6 @@ var ActivityTag = styled9.span`
   background: ${({ $bg }) => $bg || "rgba(255, 255, 255, 0.06)"};
   white-space: nowrap;
 `;
-styled9.span`
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: #fff;
-  text-align: right;
-  white-space: nowrap;
-`;
-styled9.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.35rem;
-`;
-styled9.a`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  border-radius: 6px;
-  border: 1px solid rgba(14, 203, 129, 0.4);
-  color: #0ecb81;
-  transition: opacity 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
-
-  &:hover {
-    opacity: 0.85;
-    transform: translateY(-1px);
-    border-color: rgba(14, 203, 129, 0.8);
-  }
-
-  &:focus-visible {
-    outline: 2px solid rgba(14, 203, 129, 0.8);
-    outline-offset: 2px;
-  }
-`;
 var EmptyState = styled9.div`
   padding: 1.5rem 0.75rem;
   text-align: center;
@@ -15035,13 +14770,6 @@ var CAssetName = styled9.div`
   align-items: center;
   gap: 0.3rem;
 `;
-styled9.img`
-  width: 22px;
-  height: 22px;
-  border-radius: 4px;
-  object-fit: cover;
-  flex-shrink: 0;
-`;
 var CUnitsCell = styled9.div`
   font-size: 0.78rem;
   color: rgba(255, 255, 255, 0.8);
@@ -15117,6 +14845,48 @@ var CCloseBtn = styled9.button`
     border-color: rgba(230, 200, 126, 0.5);
   }
 `;
+var TxLink = styled9.a`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(230, 200, 126, 0.7);
+  transition: color 0.15s;
+  &:hover { color: #E6C87E; }
+`;
+var PaginationBar = styled9.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0.45rem 0.75rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  flex-shrink: 0;
+`;
+var PaginationBtn = styled9.button`
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  padding: 0.2rem 0.6rem;
+  font-size: 0.7rem;
+  color: rgba(255, 255, 255, 0.55);
+  cursor: pointer;
+  transition: all 0.15s;
+  &:hover:not(:disabled) {
+    border-color: rgba(230, 200, 126, 0.4);
+    color: #E6C87E;
+  }
+  &:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+`;
+var PaginationInfo = styled9.span`
+  font-size: 0.7rem;
+  color: rgba(255, 255, 255, 0.4);
+  min-width: 3rem;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+`;
 var formatOrderCurrency = (amount) => {
   if (amount >= 1e6) return `$${(amount / 1e6).toFixed(2)}M`;
   return `$${Math.round(amount).toLocaleString()}`;
@@ -15132,7 +14902,7 @@ var formatTimeAgo2 = (timestamp) => {
 };
 function PropertyBuy({
   propertyName = "Loaf Property",
-  propertyLocation: propertyLocationLabel = "Sydney, NSW",
+  propertyLocation: _propertyLocationLabel = "Sydney, NSW",
   tokenDisplayName = "Property Token",
   tokenSymbol = "LOAF",
   tokenName,
@@ -15157,6 +14927,7 @@ function PropertyBuy({
   portfolioActivity,
   newsItems = [],
   newsConnectionStatus,
+  videoUrl,
   toast
 }) {
   const [sliderValue, setSliderValue] = useState(0);
@@ -15399,32 +15170,15 @@ function PropertyBuy({
         purchaseError && /* @__PURE__ */ 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 })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs(NewsVideoRow, { children: [
-      /* @__PURE__ */ jsx(
-        PropertyNewsUpdates,
-        {
-          items: newsItems,
-          variant: "home",
-          heading: "Property News & Headlines",
-          connectionStatus: newsConnectionStatus,
-          highlightFirst: false,
-          style: {
-            maxWidth: "none",
-            background: "#111111",
-            borderRadius: "8px",
-            padding: "1.25rem 1.5rem",
-            boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
-            border: "none",
-            height: "100%",
-            overflow: "hidden"
-          }
-        }
-      ),
-      /* @__PURE__ */ jsxs(VideoPanel, { children: [
-        /* @__PURE__ */ jsx("div", { className: "video-header", children: /* @__PURE__ */ jsx("h3", { children: propertyName }) }),
-        /* @__PURE__ */ jsx("div", { className: "video-frame", children: /* @__PURE__ */ jsx("video", { controls: true, loop: true, autoPlay: true, muted: true, playsInline: true, children: /* @__PURE__ */ jsx("source", { src: "/properties/Musgrave/musgrave.mp4", type: "video/mp4" }) }) })
-      ] })
-    ] }),
+    /* @__PURE__ */ jsx(
+      PropertyMediaRow,
+      {
+        newsItems,
+        newsConnectionStatus,
+        videoSrc: videoUrl || "/property-showcase.mp4",
+        videoTitle: propertyName
+      }
+    ),
     /* @__PURE__ */ jsx(
       OrderConfirmationModal,
       {
@@ -15447,7 +15201,7 @@ function PropertyBuy({
 }
 var HeroGrid = styled9.div`
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: minmax(0, 1fr) 460px;
   grid-template-rows: auto auto minmax(450px, 520px);
   gap: 1.5rem;
   width: 100%;
@@ -15457,16 +15211,21 @@ var HeroGrid = styled9.div`
   & > div:nth-child(1) {
     grid-column: 1 / 2;
     grid-row: 1 / 2;
+    min-width: 0;
   }
 
   & > div:nth-child(2) {
     grid-column: 1 / 2;
     grid-row: 2 / 3;
+    min-width: 0;
+    overflow: hidden;
   }
 
   & > div:nth-child(3) {
     grid-column: 1 / 2;
     grid-row: 3 / 4;
+    min-width: 0;
+    overflow: hidden;
   }
 
   & > div:nth-child(4) {
@@ -15474,9 +15233,10 @@ var HeroGrid = styled9.div`
     grid-row: 1 / 4;
     display: flex;
     flex-direction: column;
+    min-width: 0;
   }
 
-  @media (max-width: 1024px) {
+  @media (max-width: 1280px) {
     display: flex;
     flex-direction: column;
     gap: 1rem;
@@ -15535,15 +15295,17 @@ var BottomRow = styled9.div`
   display: flex;
   gap: 1.5rem;
   align-items: stretch;
-  @media (max-width: 1024px) {
+  min-width: 0;
+  overflow: hidden;
+  @media (max-width: 1280px) {
     flex-direction: column;
     gap: 1rem;
   }
 `;
 var RecentOrderPanel = styled9.div`
-  flex: 0 0 auto;
-  min-width: 420px;
-  max-width: 540px;
+  flex: 0 0 340px;
+  min-width: 0;
+  max-width: 380px;
   background-color: var(--color-card-darker, #111);
   border-radius: 8px;
   padding: 1.5rem;
@@ -15709,78 +15471,6 @@ var PurchaseAmount = styled9.div`
   white-space: nowrap;
   margin-left: 1rem;
 `;
-var NewsVideoRow = styled9.div`
-  display: flex;
-  gap: 1.5rem;
-  height: 700px;
-  align-items: stretch;
-
-  & > *:first-child {
-    flex: 0 1 520px;
-    min-width: 380px;
-    max-width: 520px;
-  }
-
-  & > *:last-child {
-    flex: 1 1 0%;
-    min-width: 0;
-  }
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    height: auto;
-    gap: 1rem;
-
-    & > *:first-child {
-      flex: none;
-      max-width: none;
-      width: 100%;
-    }
-
-    & > *:last-child {
-      flex: none;
-      width: 100%;
-      min-height: 400px;
-    }
-  }
-`;
-var VideoPanel = styled9.div`
-  background: #111111;
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-
-  .video-header {
-    padding: 1.25rem 1.5rem 0;
-    h3 {
-      font-size: 1.1rem;
-      font-weight: 600;
-      color: #fff;
-      margin: 0 0 1rem;
-    }
-  }
-
-  .video-frame {
-    flex: 1;
-    position: relative;
-    margin: 0 1.5rem 1.5rem;
-    border-radius: 8px;
-    overflow: hidden;
-    background: #000;
-
-    video {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-`;
 var PaymentOption = styled9.div`
   display: flex;
   align-items: center;
@@ -18306,6 +17996,6 @@ function hasPendingActivity(data) {
   }) ?? false;
 }
 
-export { AssetSelectorBar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Header, HousePositionSlider, HousePositionSliderMobile, LoafLiquidityBadge, LoafLiquidityLogo, LoginPopup, MobileTradeNav, OfferingProgressCard, Orderbook, owner_booking_default as OwnerBooking, PaymentPopup, PortfolioActivityPanel, PortfolioSummary, PriceChart, PropertyBuy, PropertyCompareBar, PropertyDocuments, PropertyHeroHeader, PropertyHistory, PropertyInspectionTimes, PropertyNewsUpdates, PropertyOffers, PropertyOverview, PropertyPhotoGallery, PropertySubheader, PropertyTour, PropertyValuation, Skeleton, SlideDigit, ToastProvider, TradeConfirmationModal, TradingSlider, YourOrders, badgeVariants, buttonVariants, hasPendingActivity, useAdaptivePolling, useToast };
+export { AssetSelectorBar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Header, HousePositionSlider, HousePositionSliderMobile, LoafLiquidityBadge, LoafLiquidityLogo, LoginPopup, MobileTradeNav, OfferingProgressCard, Orderbook, owner_booking_default as OwnerBooking, PaymentPopup, PortfolioActivityPanel, PortfolioSummary, PriceChart, PropertyBuy, PropertyCompareBar, PropertyDocuments, PropertyHeroHeader, PropertyHistory, PropertyInspectionTimes, PropertyMediaRow, PropertyNewsUpdates, PropertyOffers, PropertyOverview, PropertyPhotoGallery, PropertySubheader, PropertyTour, PropertyValuation, Skeleton, SlideDigit, ToastProvider, TradeConfirmationModal, TradingSlider, YourOrders, badgeVariants, buttonVariants, hasPendingActivity, useAdaptivePolling, useToast };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map