@loafmarkets/ui 0.1.13 → 0.1.16

package/dist/index.js

@@ -3374,6 +3374,7 @@ var YourOrders = React5__namespace.forwardRef(
     onTabChange,
     renderOrderActions,
     renderTabContent,
+    pageSize: pageSizeOverride,
     ...props
   }, ref) => {
     const [internalActiveTab, setInternalActiveTab] = React5__namespace.useState(tabs?.[0]?.id ?? "portfolio");
@@ -3394,7 +3395,8 @@ var YourOrders = React5__namespace.forwardRef(
     const activeOrders = activeTab?.orders ?? orders ?? [];
     const DEFAULT_PAGE_SIZE = 5;
     const HISTORY_PAGE_SIZE = 3;
-    const pageSize = activeTab?.id === "order-history" || activeTab?.id === "trade-history" ? HISTORY_PAGE_SIZE : DEFAULT_PAGE_SIZE;
+    const resolvedPageSize = pageSizeOverride ?? (activeTab?.id === "order-history" || activeTab?.id === "trade-history" ? HISTORY_PAGE_SIZE : DEFAULT_PAGE_SIZE);
+    const pageSize = Math.max(1, resolvedPageSize);
     const totalOrders = activeOrders.length;
     const totalPages = Math.max(1, Math.ceil(totalOrders / pageSize));
     const safePage = Math.min(page, totalPages - 1);
@@ -4090,6 +4092,10 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
     propertyTypeLabel,
     onTrade,
     onMakeOffer,
+    tradeButtonLabel = "Trade",
+    makeOfferButtonLabel = "Make Offer",
+    makeOfferDisabled = false,
+    hideMakeOfferButton = false,
     ...props
   }, ref) => {
     const isPositive = changePercent == null ? void 0 : changePercent >= 0;
@@ -4098,6 +4104,17 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
     const [isTradeInteracting, setIsTradeInteracting] = React5__namespace.useState(false);
     const [isOfferInteracting, setIsOfferInteracting] = React5__namespace.useState(false);
     const hasAmenities = beds != null || baths != null || cars != null || propertyTypeLabel != null;
+    const isTradeDisabled = !onTrade;
+    const isMakeOfferButtonDisabled = makeOfferDisabled || !onMakeOffer;
+    const showMakeOfferButton = !hideMakeOfferButton;
+    const setTradeInteraction = (state) => {
+      if (isTradeDisabled) return;
+      setIsTradeInteracting(state);
+    };
+    const setOfferInteraction = (state) => {
+      if (isMakeOfferButtonDisabled) return;
+      setIsOfferInteracting(state);
+    };
     const headingStyle = {
       fontSize: "clamp(1.6rem, 4vw, 2.5rem)",
       marginBottom: "0.5rem",
@@ -4182,54 +4199,60 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
               "button",
               {
                 type: "button",
-                onClick: onTrade,
+                onClick: isTradeDisabled ? void 0 : onTrade,
                 className: "flex items-center justify-center rounded border font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_4px_8px_rgba(0,0,0,0.2)] active:translate-y-0 active:shadow-[0_2px_4px_rgba(0,0,0,0.1)] text-[0.95rem] max-[480px]:text-[0.9rem]",
                 style: {
                   backgroundColor: isTradeInteracting ? tradeHoverColor : accentColor,
                   color: "black",
-                  width: "88.06px",
-                  height: "43px",
-                  minWidth: "88.06px",
+                  minWidth: "140px",
+                  padding: "0.65rem 1.5rem",
                   borderColor: isTradeInteracting ? accentColor : "transparent",
-                  boxShadow: isTradeInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none"
+                  boxShadow: isTradeInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none",
+                  opacity: isTradeDisabled ? 0.5 : 1,
+                  cursor: isTradeDisabled ? "not-allowed" : "pointer"
                 },
-                onMouseEnter: () => setIsTradeInteracting(true),
-                onMouseLeave: () => setIsTradeInteracting(false),
-                onMouseDown: () => setIsTradeInteracting(true),
-                onMouseUp: () => setIsTradeInteracting(false),
-                onFocus: () => setIsTradeInteracting(true),
-                onBlur: () => setIsTradeInteracting(false),
-                onTouchStart: () => setIsTradeInteracting(true),
-                onTouchEnd: () => setIsTradeInteracting(false),
-                children: "Trade"
+                onMouseEnter: () => setTradeInteraction(true),
+                onMouseLeave: () => setTradeInteraction(false),
+                onMouseDown: () => setTradeInteraction(true),
+                onMouseUp: () => setTradeInteraction(false),
+                onFocus: () => setTradeInteraction(true),
+                onBlur: () => setTradeInteraction(false),
+                onTouchStart: () => setTradeInteraction(true),
+                onTouchEnd: () => setTradeInteraction(false),
+                disabled: isTradeDisabled,
+                "aria-disabled": isTradeDisabled,
+                children: tradeButtonLabel
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            showMakeOfferButton ? /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
-                onClick: onMakeOffer,
+                onClick: isMakeOfferButtonDisabled ? void 0 : onMakeOffer,
                 className: "flex items-center justify-center rounded border font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_4px_8px_rgba(0,0,0,0.2)] active:translate-y-0 active:shadow-[0_2px_4px_rgba(0,0,0,0.1)] text-[0.95rem] max-[480px]:text-[0.9rem]",
                 style: {
                   backgroundColor: isOfferInteracting ? accentColor : "transparent",
                   borderColor: accentColor,
                   color: isOfferInteracting ? "black" : accentColor,
-                  width: "127.14px",
-                  height: "43px",
-                  minWidth: "127.14px",
-                  boxShadow: isOfferInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none"
+                  minWidth: "140px",
+                  padding: "0.65rem 1.5rem",
+                  boxShadow: isOfferInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none",
+                  opacity: isMakeOfferButtonDisabled ? 0.5 : 1,
+                  cursor: isMakeOfferButtonDisabled ? "not-allowed" : "pointer"
                 },
-                onMouseEnter: () => setIsOfferInteracting(true),
-                onMouseLeave: () => setIsOfferInteracting(false),
-                onMouseDown: () => setIsOfferInteracting(true),
-                onMouseUp: () => setIsOfferInteracting(false),
-                onFocus: () => setIsOfferInteracting(true),
-                onBlur: () => setIsOfferInteracting(false),
-                onTouchStart: () => setIsOfferInteracting(true),
-                onTouchEnd: () => setIsOfferInteracting(false),
-                children: "Make Offer"
+                onMouseEnter: () => setOfferInteraction(true),
+                onMouseLeave: () => setOfferInteraction(false),
+                onMouseDown: () => setOfferInteraction(true),
+                onMouseUp: () => setOfferInteraction(false),
+                onFocus: () => setOfferInteraction(true),
+                onBlur: () => setOfferInteraction(false),
+                onTouchStart: () => setOfferInteraction(true),
+                onTouchEnd: () => setOfferInteraction(false),
+                disabled: isMakeOfferButtonDisabled,
+                "aria-disabled": isMakeOfferButtonDisabled,
+                children: makeOfferButtonLabel
               }
-            )
+            ) : null
           ] })
         ] })
       ] }),
@@ -4535,10 +4558,22 @@ var Header = ({
     closeMenus();
     console.log("[Header] Add funding selected");
     if (LoginPopupComponent) {
-      setLoginPopupInitialView(void 0);
+      setLoginPopupInitialView("funding");
       setShowLoginPopup(true);
     }
   };
+  const handlePortfolioNavigate = (event) => {
+    event?.preventDefault();
+    closeMenus();
+    console.log("[Header] Portfolio selected");
+    if (_onOrdersNavigate) {
+      _onOrdersNavigate();
+      return;
+    }
+    if (onNavigate) {
+      onNavigate("/portfolio");
+    }
+  };
   const userPrimaryLabel = currentUser?.displayName?.trim() || "User";
   const resolveAuthReturnUrl = () => {
     if (getAuthReturnUrl) {
@@ -4750,14 +4785,13 @@ var Header = ({
           ),
           isUserMenuOpen && /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { className: "user-menu-dropdown", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
+              "button",
               {
-                style: {
-                  padding: "12px 16px",
-                  borderBottom: "1px solid rgba(255,255,255,0.08)",
-                  textAlign: "left"
+                type: "button",
+                onClick: (event) => {
+                  handlePortfolioNavigate(event);
                 },
-                children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, fontWeight: 600 }, children: userPrimaryLabel })
+                children: /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { children: "Portfolio" })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -6724,27 +6758,55 @@ var PriceChange = styled23__default.default.span`
   gap: 0.35rem;
   color: ${(props) => props.$isPositive == null ? "var(--color-text-secondary, rgba(255, 255, 255, 0.6))" : props.$isPositive ? "var(--color-positive, #0ecb81)" : "var(--color-negative, #f6465d)"};
 `;
-function PropertyOverview({ propertyName: _propertyName, location: _location, midPrice: _midPrice, onTradeClick: _onTradeClick }) {
+function PropertyOverview({
+  propertyName: _propertyName,
+  location: _location,
+  midPrice: _midPrice,
+  onTradeClick: _onTradeClick,
+  overviewData,
+  minimumParticipation,
+  bedrooms,
+  bathrooms,
+  carSpaces,
+  propertyTypeLabel
+}) {
+  const description = overviewData?.description ?? "N/A";
+  const tokensIssued = overviewData?.tokensIssued ?? null;
+  const offeringValuation = overviewData?.offeringValuation ?? null;
+  const weeklyRent = overviewData?.weeklyRent ?? null;
+  const indicativeListing = overviewData?.indicativeListing ?? "N/A";
+  const minParticipationValue = minimumParticipation ?? overviewData?.minimumParticipation ?? null;
+  const landSize = overviewData?.landSizeSqm ?? null;
+  const buildingSize = overviewData?.buildingSizeSqm ?? null;
+  const propertyType = propertyTypeLabel ?? overviewData?.propertyType ?? "N/A";
+  overviewData?.yearBuilt ?? null;
+  const ownership = overviewData?.ownership ?? "N/A";
+  const zoning = overviewData?.zoning ?? "N/A";
+  const levels = overviewData?.levels ?? null;
+  const daStatus = overviewData?.daStatus ?? "N/A";
+  const unitPrice = tokensIssued && offeringValuation ? offeringValuation / tokensIssued : null;
+  const formattedPropertyType = propertyType !== "N/A" ? propertyType.charAt(0).toUpperCase() + propertyType.slice(1).toLowerCase() : "N/A";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(TwoColGrid, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { children: "About This Property" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(BodyText, { children: [
-          "Musgrave is Mosman's oldest mansion. Built in 1880 and meticulously maintained for over 140 years. This is not just property - it's legacy.",
-          /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-          /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-          "Assets like this are irreplaceable. Pre-Federation sandstone architecture of this calibre simply cannot be recreated. With fewer than a handful of comparable estates remaining, scarcity drives enduring value."
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsx(BodyText, { children: description === "N/A" ? description : description.split("\n\n").map((paragraph, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          paragraph,
+          i < description.split("\n\n").length - 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+            /* @__PURE__ */ jsxRuntime.jsx("br", {})
+          ] })
+        ] }, i)) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { children: "The Offering" }),
         /* @__PURE__ */ jsxRuntime.jsx(OfferingGrid, { children: [
-          { label: "Units Issued", value: "50,000", gold: false },
-          { label: "Issue Price", value: "$250 / Unit", gold: true },
-          { label: "Implied Value", value: "$26,000,000", gold: false },
-          { label: "Minimum Participation", value: "$20,000", gold: false },
-          { label: "Est. Cash Flow", value: "$6000/wk", gold: true },
-          { label: "Indicative Listing Date", value: "MAY 2026", gold: false }
+          { label: "Units Issued", value: tokensIssued?.toLocaleString() ?? "-", gold: false },
+          { label: "Issue Price", value: unitPrice ? `$${unitPrice.toFixed(2)} / Unit` : "-", gold: true },
+          { label: "Implied Value", value: offeringValuation ? `$${offeringValuation.toLocaleString()}` : "-", gold: false },
+          { label: "Minimum Participation", value: minParticipationValue != null ? `$${minParticipationValue.toLocaleString()}` : "-", gold: false },
+          { label: "Est. Cash Flow", value: weeklyRent ? `$${weeklyRent.toLocaleString()}/wk` : "-", gold: true },
+          { label: "Indicative Listing Date", value: indicativeListing, gold: false }
         ].map(({ label, value, gold }) => /* @__PURE__ */ jsxRuntime.jsxs(OfferingItem, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(OfferingLabel, { children: label }),
           /* @__PURE__ */ jsxRuntime.jsx(OfferingValue, { $gold: gold, children: value })
@@ -6757,10 +6819,10 @@ function PropertyOverview({ propertyName: _propertyName, location: _location, mi
         /* @__PURE__ */ jsxRuntime.jsx(AssetDetailsTitle, { children: "Asset Details" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(StatGrid, { children: [
-        { label: "Bedrooms", value: "6", icon: "\u{1F6CF}\uFE0F" },
-        { label: "Bathrooms", value: "6", icon: "\u{1F6BF}" },
-        { type: "dual", label1: "Land", value1: "1,862", label2: "Floor", value2: "700", unit: "sqm", highlight: true },
-        { label: "Car Spaces", value: "6", icon: "\u{1F697}" }
+        { label: "Bedrooms", value: bedrooms != null ? bedrooms.toString() : "-", icon: "\u{1F6CF}\uFE0F" },
+        { label: "Bathrooms", value: bathrooms != null ? bathrooms.toString() : "-", icon: "\u{1F6BF}" },
+        { type: "dual", label1: "Land", value1: landSize?.toString() ?? "-", label2: "Floor", value2: buildingSize?.toString() ?? "-", unit: "sqm", highlight: true },
+        { label: "Car Spaces", value: carSpaces != null ? carSpaces.toString() : "-", icon: "\u{1F697}" }
       ].map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatCard, { $highlight: !!stat.highlight, children: stat.type === "dual" ? /* @__PURE__ */ jsxRuntime.jsxs(DualStatInner, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(DualStatCol, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { $gold: true, children: stat.label1 }),
@@ -6782,14 +6844,14 @@ function PropertyOverview({ propertyName: _propertyName, location: _location, mi
         /* @__PURE__ */ jsxRuntime.jsx(StatBigValue, { $gold: !!stat.highlight, children: stat.value })
       ] }) }, i)) }),
       /* @__PURE__ */ jsxRuntime.jsx(DetailTable, { children: /* @__PURE__ */ jsxRuntime.jsx(DetailTableGrid, { children: [
-        { label: "Last Sale", value: "$13M (2021)" },
-        { label: "Suburb Median", value: "$7M" },
-        { label: "Replication Cost of Architecture", value: "$7M" },
-        { label: "DA Status", value: "In Progress", status: "progress" },
-        { label: "Property Type", value: "Heritage Home" },
-        { label: "Ownership", value: "Freehold" },
-        { label: "Zoning", value: "R2 Low Density" },
-        { label: "Levels", value: "3" }
+        { label: "Last Sale", value: "-" },
+        { label: "Suburb Median", value: "-" },
+        { label: "Replication Cost of Architecture", value: "-" },
+        { label: "DA Status", value: daStatus, status: daStatus.toLowerCase() === "approved" ? "success" : "progress" },
+        { label: "Property Type", value: formattedPropertyType },
+        { label: "Ownership", value: ownership ?? "N/A" },
+        { label: "Zoning", value: zoning ?? "N/A" },
+        { label: "Levels", value: levels?.toString() ?? "N/A" }
       ].map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(DetailCell, { $borderBottom: i < 4, $borderRight: (i + 1) % 4 !== 0, children: [
         /* @__PURE__ */ jsxRuntime.jsx(DetailCellLabel, { children: item.label }),
         /* @__PURE__ */ jsxRuntime.jsxs(DetailCellValue, { $status: item.status, children: [
@@ -7675,7 +7737,7 @@ var DocIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height
   /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
   /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "10 9 9 9 8 9" })
 ] });
-var docs = [
+var fallbackDocs = [
   { href: "/documents/musgrave-valuation-report.pdf", label: "Valuation Report" },
   { href: "/documents/musgrave-offering-material.pdf", label: "Offering Material" },
   { href: "/documents/musgrave-mortgage-agreement.pdf", label: "Mortgage Agreement" },
@@ -7684,13 +7746,26 @@ var docs = [
   { href: "/documents/musgrave-risk-disclosure.pdf", label: "Risk Disclosure Statement" },
   { href: "/documents/musgrave-building-inspection.pdf", label: "Building & Pest Inspection Report" }
 ];
-function PropertyDocuments() {
+function PropertyDocuments({ documentsData }) {
+  const backendDocuments = Array.isArray(documentsData?.documents) ? documentsData.documents : null;
+  const hasBackendDocuments = !!backendDocuments?.length;
+  const documents = hasBackendDocuments ? backendDocuments : fallbackDocs.map((doc) => ({
+    title: doc.label,
+    documentUrl: doc.href
+  }));
   return /* @__PURE__ */ jsxRuntime.jsxs(Section2, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SectionHeading2, { children: "Investment Documents" }),
-    /* @__PURE__ */ jsxRuntime.jsx(DocList, { children: docs.map(({ href, label }) => /* @__PURE__ */ jsxRuntime.jsx(DocItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(DocLink, { href, target: "_blank", rel: "noopener noreferrer", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DocIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(DocIcon, {}) }),
-      label
-    ] }) }, href)) })
+    /* @__PURE__ */ jsxRuntime.jsx(DocList, { children: documents.map(({ documentUrl, title }) => {
+      const isAvailable = Boolean(documentUrl);
+      return /* @__PURE__ */ jsxRuntime.jsx(DocItem, { children: hasBackendDocuments && isAvailable ? /* @__PURE__ */ jsxRuntime.jsxs(DocLink, { href: documentUrl, target: "_blank", rel: "noopener noreferrer", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DocIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(DocIcon, {}) }),
+        title
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(DocItemDisabled, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DocIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(DocIcon, {}) }),
+        title,
+        /* @__PURE__ */ jsxRuntime.jsx(ComingSoonBadge, { children: "Coming Soon" })
+      ] }) }, `${title}-${documentUrl ?? "pending"}`);
+    }) })
   ] });
 }
 var Section2 = styled23__default.default.section`
@@ -7734,11 +7809,29 @@ var DocLink = styled23__default.default.a`
     color: var(--color-accent);
   }
 `;
+var DocItemDisabled = styled23__default.default.div`
+  display: flex;
+  align-items: center;
+  color: var(--color-text-secondary);
+  cursor: not-allowed;
+  opacity: 0.6;
+`;
 var DocIconWrapper = styled23__default.default.span`
   margin-right: 0.75rem;
   flex-shrink: 0;
   color: var(--color-text-secondary);
 `;
+var ComingSoonBadge = styled23__default.default.span`
+  margin-left: auto;
+  padding: 0.25rem 0.5rem;
+  background: rgba(212, 175, 55, 0.1);
+  color: #D4AF37;
+  border-radius: 0.25rem;
+  font-size: 0.7rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+`;
 var formatIsoDate = (value) => {
   const parsed = new Date(value);
   if (Number.isNaN(parsed.getTime())) return value;
@@ -8025,7 +8118,7 @@ function AssetSelectorBar({ propertyName, tokenPrice, offeringValuation }) {
     /* @__PURE__ */ jsxRuntime.jsxs(SelectorMetrics, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx(MetricLabel, { children: "Unit Price" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(MetricValue, { accent: true, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(MetricValue, { $accent: true, children: [
           "$",
           tokenPrice.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
         ] })
@@ -8120,7 +8213,7 @@ var MetricLabel = styled23__default.default.span`
 var MetricValue = styled23__default.default.span`
   font-size: 1.1rem;
   font-weight: 700;
-  color: ${(p) => p.accent ? "#D4AF37" : "#fff"};
+  color: ${(p) => p.$accent ? "#D4AF37" : "#fff"};
 `;
 var Separator = styled23__default.default.span`
   font-size: 1rem;
@@ -8239,7 +8332,7 @@ function OfferingProgressCard({
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u24D8" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(LivePercent, { children: [
-          percentSold.toFixed(1),
+          percentSold < 0.1 && percentSold > 0 ? percentSold.toFixed(3) : percentSold.toFixed(1),
           "%",
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u2191" })
         ] })
@@ -8612,7 +8705,8 @@ function OrderPanel({
   orderButtonText,
   isOrderButtonDisabled,
   hasInsufficientFunds,
-  onPlaceAnotherOrder
+  onPlaceAnotherOrder,
+  onDeposit
 }) {
   const [payInputValue, setPayInputValue] = React5.useState("");
   const [receiveInputValue, setReceiveInputValue] = React5.useState("");
@@ -8621,11 +8715,14 @@ function OrderPanel({
   const handlePayBlur = () => {
     setIsPayInputFocused(false);
     const parsed = parseInt(payInputValue.replace(/[^0-9]/g, ""), 10) || 0;
-    if (parsed > availableBalance) {
-      setManualOrderAmount(parsed);
+    if (parsed <= 0) {
+      setManualOrderAmount(null);
+      setSliderValue(0);
+    } else if (parsed >= availableBalance) {
+      setManualOrderAmount(null);
       setSliderValue(100);
     } else {
-      setManualOrderAmount(null);
+      setManualOrderAmount(parsed);
       const ratio = availableBalance === 0 ? 0 : Math.round(Math.max(0, parsed / availableBalance * 100));
       setSliderValue(ratio);
     }
@@ -8634,11 +8731,14 @@ function OrderPanel({
     setIsReceiveInputFocused(false);
     const parsed = parseFloat(receiveInputValue) || 0;
     const newOrderTotal = Math.round(parsed * tokenPrice);
-    if (newOrderTotal > availableBalance) {
-      setManualOrderAmount(newOrderTotal);
+    if (newOrderTotal <= 0) {
+      setManualOrderAmount(null);
+      setSliderValue(0);
+    } else if (newOrderTotal >= availableBalance) {
+      setManualOrderAmount(null);
       setSliderValue(100);
     } else {
-      setManualOrderAmount(null);
+      setManualOrderAmount(newOrderTotal);
       const ratio = availableBalance === 0 ? 0 : Math.round(Math.max(0, newOrderTotal / availableBalance * 100));
       setSliderValue(ratio);
     }
@@ -8708,7 +8808,7 @@ function OrderPanel({
               }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "AUD" })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "USDC" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(QuickSelectRow, { children: [25, 50, 75, 100].map((pct) => /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
@@ -8735,7 +8835,7 @@ function OrderPanel({
             availableBalance.toLocaleString()
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(DepositButton, { type: "button", children: "+ Deposit" })
+        /* @__PURE__ */ jsxRuntime.jsx(DepositButton, { type: "button", onClick: onDeposit, children: "+ Deposit" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(Divider2, { children: "\u2193" }),
       /* @__PURE__ */ jsxRuntime.jsxs(Card2, { children: [
@@ -8802,7 +8902,7 @@ function OrderPanel({
           /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
             "$",
             orderTotal.toLocaleString(),
-            " AUD"
+            " USDC"
           ] })
         ] })
       ] })
@@ -8824,7 +8924,7 @@ function OrderPanel({
           "$",
           availableBalance.toLocaleString()
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(BalanceAction, { children: "+ Deposit" })
+        /* @__PURE__ */ jsxRuntime.jsx(BalanceAction, { onClick: onDeposit, style: { cursor: onDeposit ? "pointer" : "default" }, children: "+ Deposit" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(BalanceCard, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(BalanceLabel, { children: "Musgrave Owned" }),
@@ -9456,7 +9556,23 @@ var IframeShield = styled23__default.default.div`
   z-index: 1;
   cursor: pointer;
 `;
-function NewsOrdersSection({ newsItems, userSubscription, tokenPrice }) {
+var SUBSCRIPTIONS_PAGE_SIZE = 6;
+function NewsOrdersSection({ newsItems, userSubscriptions, tokenPrice }) {
+  const [page, setPage] = React5.useState(0);
+  const totalPages = Math.max(1, Math.ceil(userSubscriptions.length / SUBSCRIPTIONS_PAGE_SIZE));
+  React5.useEffect(() => {
+    if (page > totalPages - 1) {
+      setPage(totalPages - 1);
+    }
+  }, [page, totalPages]);
+  React5.useEffect(() => {
+    setPage(0);
+  }, [userSubscriptions]);
+  const paginatedSubscriptions = React5.useMemo(() => {
+    const start = page * SUBSCRIPTIONS_PAGE_SIZE;
+    return userSubscriptions.slice(start, start + SUBSCRIPTIONS_PAGE_SIZE);
+  }, [page, userSubscriptions]);
+  const hasPagination = userSubscriptions.length > SUBSCRIPTIONS_PAGE_SIZE;
   return /* @__PURE__ */ jsxRuntime.jsxs(Row2, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(TradeNewsPanel, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(TradeNewsHeader, { children: [
@@ -9483,34 +9599,57 @@ function NewsOrdersSection({ newsItems, userSubscription, tokenPrice }) {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(TradeNewsPanel, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(TradeNewsHeader, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Your Orders" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Offering Subscriptions" })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Your Orders" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Offering Subscriptions" })
+        ] }),
+        hasPagination ? /* @__PURE__ */ jsxRuntime.jsxs(Pagination, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => setPage((prev) => Math.max(prev - 1, 0)), disabled: page === 0, children: "Prev" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            "Page ",
+            page + 1,
+            "/",
+            totalPages
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setPage((prev) => Math.min(prev + 1, totalPages - 1)),
+              disabled: page >= totalPages - 1,
+              children: "Next"
+            }
+          )
+        ] }) : null
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(OrdersTable, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(OrdersHead, { children: ["Date", "Units", "Price", "Total", "Status"].map((h) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: h }, h)) }),
-        userSubscription ? /* @__PURE__ */ jsxRuntime.jsxs(OrdersRow, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            new Date(userSubscription.timestamp).toLocaleDateString("en-AU", {
-              day: "2-digit",
-              month: "short",
-              year: "numeric"
-            }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: new Date(userSubscription.timestamp).toLocaleTimeString("en-AU", {
-              hour: "2-digit",
-              minute: "2-digit"
-            }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "units", children: userSubscription.tokens.toFixed(2) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            "$",
-            tokenPrice.toFixed(2)
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "total", children: [
-            "$",
-            userSubscription.value.toLocaleString()
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "status", children: "Confirmed" })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(OrdersEmpty, { children: [
+        paginatedSubscriptions.length ? paginatedSubscriptions.map((subscription) => {
+          const subscriptionDate = new Date(subscription.timestamp);
+          return /* @__PURE__ */ jsxRuntime.jsxs(OrdersRow, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              subscriptionDate.toLocaleDateString("en-AU", {
+                day: "2-digit",
+                month: "short",
+                year: "numeric"
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: subscriptionDate.toLocaleTimeString("en-AU", {
+                hour: "2-digit",
+                minute: "2-digit"
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "units", children: subscription.tokens.toFixed(2) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              "$",
+              tokenPrice.toFixed(2)
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "total", children: [
+              "$",
+              subscription.value.toLocaleString()
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "status", children: subscription.status ?? "Confirmed" })
+          ] }, `${subscription.timestamp}-${subscription.tokens}`);
+        }) : /* @__PURE__ */ jsxRuntime.jsxs(OrdersEmpty, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: "\u{1F4CB}" }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No orders yet" }),
           /* @__PURE__ */ jsxRuntime.jsx("small", { children: "Subscribe to the IPO above to place your first order" })
@@ -9637,6 +9776,28 @@ var OrdersTable = styled23__default.default.div`
   flex: 1;
   overflow: auto;
 `;
+var Pagination = styled23__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+
+  button {
+    border: 1px solid rgba(255,255,255,0.2);
+    background: rgba(255,255,255,0.05);
+    color: #fff;
+    border-radius: 9999px;
+    padding: 0.25rem 0.9rem;
+    font-size: 0.7rem;
+    cursor: pointer;
+    transition: opacity 0.2s;
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
+`;
 var OrdersHead = styled23__default.default.div`
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1.2fr;
@@ -9910,11 +10071,18 @@ function PropertyBuy({
   propertyLocation: propertyLocationLabel = "Mosman, Sydney",
   isAuthenticated,
   onSignIn,
-  saleData
+  saleData,
+  walletUsdcBalance,
+  walletPropertyTokenBalance,
+  onPurchase,
+  purchaseStatus = "idle",
+  purchaseError,
+  onDeposit,
+  initialUserSubscriptions = []
 }) {
   const [sliderValue, setSliderValue] = React5.useState(0);
-  const [availableBalance, setAvailableBalance] = React5.useState(125e3);
-  const [userSubscription, setUserSubscription] = React5.useState(null);
+  const [availableBalance, setAvailableBalance] = React5.useState(walletUsdcBalance ?? 125e3);
+  const [optimisticUserSubscriptions, setOptimisticUserSubscriptions] = React5.useState([]);
   const [manualOrderAmount, setManualOrderAmount] = React5.useState(null);
   const [ownedTokens, setOwnedTokens] = React5.useState(0);
   const [displayedOwnedTokens, setDisplayedOwnedTokens] = React5.useState(0);
@@ -9932,6 +10100,12 @@ function PropertyBuy({
       isNew: false
     }))
   );
+  const resolvedUserSubscriptions = initialUserSubscriptions && initialUserSubscriptions.length > 0 ? initialUserSubscriptions : optimisticUserSubscriptions;
+  React5.useEffect(() => {
+    if (initialUserSubscriptions?.length) {
+      setOptimisticUserSubscriptions([]);
+    }
+  }, [initialUserSubscriptions]);
   const tokenPrice = saleData?.tokenPrice ?? 250;
   const feeRate = (saleData?.feePercent ?? 0.5) / 100;
   const totalSold = saleData?.totalSold ?? 0;
@@ -9949,6 +10123,17 @@ function PropertyBuy({
   const orderTotal = totalSpend;
   const estExposure = (tokenQuantity / supplyToSell * 100).toFixed(4);
   const hasInsufficientFunds = orderTotal > availableBalance;
+  React5.useEffect(() => {
+    if (walletUsdcBalance != null) {
+      setAvailableBalance(walletUsdcBalance);
+    }
+  }, [walletUsdcBalance]);
+  React5.useEffect(() => {
+    if (walletPropertyTokenBalance != null) {
+      setOwnedTokens(walletPropertyTokenBalance);
+      setDisplayedOwnedTokens(walletPropertyTokenBalance);
+    }
+  }, [walletPropertyTokenBalance]);
   const handleOrderButtonClick = () => {
     if (!isAuthenticated) {
       onSignIn();
@@ -9959,8 +10144,12 @@ function PropertyBuy({
     }
     setShowOrderConfirmModal(true);
   };
+  const isPurchaseInFlight = purchaseStatus === "checking-allowance" || purchaseStatus === "approving" || purchaseStatus === "purchasing";
   const getOrderButtonText = () => {
     if (!isAuthenticated) return "Sign In to Invest";
+    if (purchaseStatus === "checking-allowance") return "Checking allowance\u2026";
+    if (purchaseStatus === "approving") return "Approving USDC\u2026";
+    if (purchaseStatus === "purchasing") return "Confirming purchase\u2026";
     if (scStatus === 0) return "Sale Not Open Yet";
     if (scStatus === 2) return "Sale Completed";
     if (scStatus === 3) return "Sale Paused";
@@ -9969,30 +10158,44 @@ function PropertyBuy({
   };
   const isOrderButtonDisabled = () => {
     if (!isAuthenticated) return false;
+    if (isPurchaseInFlight) return true;
     if (scStatus !== 1) return true;
     if (tokenQuantity === 0) return true;
     return false;
   };
-  const confirmOrder = () => {
+  const confirmOrder = async () => {
     setShowOrderConfirmModal(false);
-    setAvailableBalance((prev) => prev - orderTotal);
-    const newTokens = ownedTokens + tokenQuantity;
+    const tokenAmountInt = Math.floor(tokenQuantity);
+    if (tokenAmountInt <= 0) return;
+    if (onPurchase) {
+      try {
+        await onPurchase(tokenAmountInt);
+      } catch {
+        return;
+      }
+    }
+    if (walletUsdcBalance == null) {
+      setAvailableBalance((prev) => prev - orderTotal);
+    }
+    const newTokens = ownedTokens + tokenAmountInt;
     setOwnedTokens(newTokens);
     setDisplayedOwnedTokens(newTokens);
     setOwnedTokensJustUpdated(true);
-    setLastOrderQuantity(tokenQuantity);
+    setLastOrderQuantity(tokenAmountInt);
     setTimeout(() => setOwnedTokensJustUpdated(false), 2e3);
-    setUserSubscription({
+    const optimisticEntry = {
       propertyName,
       tokenSymbol: "MUS",
-      tokens: tokenQuantity,
+      tokens: tokenAmountInt,
       value: orderTotal,
       avgPrice: tokenPrice,
       percentOfProperty: estExposure,
-      timestamp: (/* @__PURE__ */ new Date()).toISOString()
-    });
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      status: "pending"
+    };
+    setOptimisticUserSubscriptions((prev) => [optimisticEntry, ...prev]);
     setLastOrderDetails({
-      tokens: tokenQuantity,
+      tokens: tokenAmountInt,
       total: orderTotal,
       price: tokenPrice,
       orderNumber: Math.floor(1e7 + Math.random() * 9e7)
@@ -10052,36 +10255,40 @@ function PropertyBuy({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(VideoActivitySection, { ipoStarted }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        OrderPanel,
-        {
-          statusLabel,
-          statusColor,
-          ipoStarted,
-          isAuthenticated,
-          tokenPrice,
-          feeRate,
-          supplyToSell,
-          availableBalance,
-          displayedOwnedTokens,
-          ownedTokensJustUpdated,
-          lastOrderQuantity,
-          orderPlacedSuccess,
-          lastOrderDetails,
-          tokenQuantity,
-          feeInTokens,
-          orderTotal,
-          sliderValue,
-          manualOrderAmount,
-          setSliderValue,
-          setManualOrderAmount,
-          onOrderButtonClick: handleOrderButtonClick,
-          orderButtonText: getOrderButtonText(),
-          isOrderButtonDisabled: isOrderButtonDisabled(),
-          hasInsufficientFunds,
-          onPlaceAnotherOrder: () => setOrderPlacedSuccess(false)
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          OrderPanel,
+          {
+            statusLabel,
+            statusColor,
+            ipoStarted,
+            isAuthenticated,
+            tokenPrice,
+            feeRate,
+            supplyToSell,
+            availableBalance,
+            displayedOwnedTokens,
+            ownedTokensJustUpdated,
+            lastOrderQuantity,
+            orderPlacedSuccess,
+            lastOrderDetails,
+            tokenQuantity,
+            feeInTokens,
+            orderTotal,
+            sliderValue,
+            manualOrderAmount,
+            setSliderValue,
+            setManualOrderAmount,
+            onOrderButtonClick: handleOrderButtonClick,
+            orderButtonText: getOrderButtonText(),
+            isOrderButtonDisabled: isOrderButtonDisabled(),
+            hasInsufficientFunds,
+            onPlaceAnotherOrder: () => setOrderPlacedSuccess(false),
+            onDeposit
+          }
+        ),
+        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 })
+      ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
       /* @__PURE__ */ jsxRuntime.jsx(GalleryMapSection, { propertyLocation: propertyLocationLabel }),
@@ -10089,7 +10296,7 @@ function PropertyBuy({
         NewsOrdersSection,
         {
           newsItems,
-          userSubscription,
+          userSubscriptions: resolvedUserSubscriptions,
           tokenPrice
         }
       )
@@ -12444,6 +12651,191 @@ function GalleryContent({ galleryImages, startIndex, title, subtitle, onClose })
     }
   );
 }
+var slideIn = styled23.keyframes`
+  from { transform: translateX(110%); opacity: 0; }
+  to   { transform: translateX(0);    opacity: 1; }
+`;
+var slideOut = styled23.keyframes`
+  from { transform: translateX(0);    opacity: 1; }
+  to   { transform: translateX(110%); opacity: 0; }
+`;
+var progressShrink = styled23.keyframes`
+  from { width: 100%; }
+  to   { width: 0%; }
+`;
+var VARIANT_COLORS = {
+  success: { accent: "#0ecb81", icon: "\u2713" },
+  error: { accent: "#f6465d", icon: "\u2715" },
+  info: { accent: "#E6C656", icon: "\u2139" },
+  pending: { accent: "#7EB3E6", icon: "\u25CC" }
+};
+var Wrapper = styled23__default.default.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 340px;
+  background: #0d0f1a;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
+  animation: ${({ $exiting }) => $exiting ? styled23.css`${slideOut} 0.28s cubic-bezier(0.4,0,1,1) forwards` : styled23.css`${slideIn} 0.32s cubic-bezier(0,0,0.2,1) forwards`};
+  pointer-events: all;
+`;
+var Body = styled23__default.default.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px 12px;
+`;
+var IconDot = styled23__default.default.div`
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: ${({ $color }) => $color}1a;
+  border: 1px solid ${({ $color }) => $color}55;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: ${({ $color }) => $color};
+  margin-top: 1px;
+`;
+var Content = styled23__default.default.div`
+  flex: 1;
+  min-width: 0;
+`;
+var Title2 = styled23__default.default.p`
+  margin: 0 0 2px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #fff;
+  letter-spacing: 0.01em;
+`;
+var Amount = styled23__default.default.p`
+  margin: 0 0 6px;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: #E6C656;
+  letter-spacing: -0.01em;
+`;
+var TxRow = styled23__default.default.a`
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-family: 'IBM Plex Mono', 'Space Mono', monospace;
+  font-size: 0.68rem;
+  color: rgba(255, 255, 255, 0.4);
+  text-decoration: none;
+  transition: color 0.15s;
+  &:hover {
+    color: #7EB3E6;
+  }
+`;
+var TxArrow = styled23__default.default.span`
+  font-size: 0.6rem;
+  opacity: 0.6;
+`;
+var CloseBtn = styled23__default.default.button`
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  padding: 2px 4px;
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.25);
+  font-size: 0.9rem;
+  line-height: 1;
+  transition: color 0.15s;
+  &:hover { color: rgba(255, 255, 255, 0.7); }
+`;
+var ProgressBar2 = styled23__default.default.div`
+  height: 2px;
+  background: rgba(255, 255, 255, 0.06);
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background: ${({ $color }) => $color};
+    animation: ${styled23.css`${progressShrink} ${({ $duration }) => $duration}ms linear forwards`};
+  }
+`;
+var Container2 = styled23__default.default.div`
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 10px;
+  pointer-events: none;
+`;
+var DEFAULT_EXPLORER = "https://sepolia.basescan.org/tx/";
+function truncateHash(hash) {
+  return `${hash.slice(0, 6)}\u2026${hash.slice(-4)}`;
+}
+function ToastItem({ toast, onDismiss }) {
+  const [exiting, setExiting] = React5.useState(false);
+  const timerRef = React5.useRef(null);
+  const dismiss = React5.useCallback(() => {
+    setExiting(true);
+    setTimeout(() => onDismiss(toast.id), 280);
+  }, [onDismiss, toast.id]);
+  React5.useEffect(() => {
+    const duration2 = toast.duration ?? 6e3;
+    if (duration2 > 0) {
+      timerRef.current = setTimeout(dismiss, duration2);
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [dismiss, toast.duration]);
+  const { accent, icon } = VARIANT_COLORS[toast.variant];
+  const duration = toast.duration ?? 6e3;
+  const explorerBase = toast.explorerUrl ?? DEFAULT_EXPLORER;
+  const txUrl = toast.txHash ? `${explorerBase}${toast.txHash}` : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { $exiting: exiting, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Body, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(IconDot, { $color: accent, children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Content, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Title2, { children: toast.title }),
+        toast.amount && /* @__PURE__ */ jsxRuntime.jsx(Amount, { children: toast.amount }),
+        toast.txHash && txUrl && /* @__PURE__ */ jsxRuntime.jsxs(TxRow, { href: txUrl, target: "_blank", rel: "noopener noreferrer", children: [
+          truncateHash(toast.txHash),
+          /* @__PURE__ */ jsxRuntime.jsx(TxArrow, { children: "\u2197" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(CloseBtn, { type: "button", onClick: dismiss, "aria-label": "Dismiss", children: "\u2715" })
+    ] }),
+    duration > 0 && /* @__PURE__ */ jsxRuntime.jsx(ProgressBar2, { $color: accent, $duration: duration })
+  ] });
+}
+var ToastContext = React5.createContext(null);
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = React5.useState([]);
+  const addToast = React5.useCallback((data) => {
+    const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+    setToasts((prev) => [...prev, { ...data, id }]);
+    return id;
+  }, []);
+  const dismiss = React5.useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { toast: addToast, dismiss }, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(Container2, { children: toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
+  ] });
+}
+function useToast() {
+  const ctx = React5.useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within a ToastProvider");
+  return ctx;
+}
 
 exports.Badge = Badge;
 exports.Button = Button;
@@ -12478,10 +12870,12 @@ exports.PropertyPhotoGallery = PropertyPhotoGallery;
 exports.PropertySubheader = PropertySubheader;
 exports.PropertyTour = PropertyTour;
 exports.PropertyValuation = PropertyValuation;
+exports.ToastProvider = ToastProvider;
 exports.TradeConfirmationModal = TradeConfirmationModal;
 exports.TradingSlider = TradingSlider;
 exports.YourOrders = YourOrders;
 exports.badgeVariants = badgeVariants;
 exports.buttonVariants = buttonVariants;
+exports.useToast = useToast;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map