@loafmarkets/ui 0.1.277 → 0.1.280

package/dist/index.mjs

@@ -14881,9 +14881,10 @@ var CToolbarLink = styled9.button`
 `;
 var CRow = styled9.button`
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 24px;
+  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) 24px;
   align-items: center;
   width: calc(100% - 1rem);
+  max-width: 420px;
   margin: 0.25rem 0.5rem;
   margin-bottom: ${(p) => p.$expanded ? "0" : "0.25rem"};
   padding: 0.55rem 0.65rem;
@@ -14947,6 +14948,7 @@ var CChevronWrap = styled9.span`
 `;
 var CExpandedWrap = styled9.div`
   margin: 0 0.5rem 0.25rem;
+  max-width: 420px;
   padding: 0.4rem 0.65rem 0.5rem;
   background: rgba(255, 255, 255, 0.035);
   border: 1px solid rgba(255, 255, 255, 0.06);
@@ -14955,7 +14957,7 @@ var CExpandedWrap = styled9.div`
 `;
 var CDetailGrid = styled9.div`
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 24px;
+  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) 24px;
   gap: 0.45rem 0;
 `;
 var CDetailItem = styled9.div``;
@@ -14971,28 +14973,39 @@ var CDValue = styled9.div`
   font-variant-numeric: tabular-nums;
 `;
 var CActionRow = styled9.div`
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.5rem;
+  display: flex;
+  gap: 0.35rem;
   margin-top: 0.5rem;
 `;
 var CCloseBtn = styled9.button`
   background: transparent;
   border: 1px solid rgba(230, 200, 126, 0.25);
-  border-radius: 6px;
-  padding: 0.45rem 0.6rem;
-  font-size: 0.72rem;
+  border-radius: 4px;
+  padding: 0.2rem 0.5rem;
+  font-size: 0.62rem;
   font-weight: 600;
   color: #E6C87E;
   cursor: pointer;
   white-space: nowrap;
-  text-align: center;
   transition: all 0.15s ease;
   &:hover {
     background: rgba(230, 200, 126, 0.1);
     border-color: rgba(230, 200, 126, 0.5);
   }
 `;
+var formatOrderCurrency = (amount) => {
+  if (amount >= 1e6) return `$${(amount / 1e6).toFixed(2)}M`;
+  return `$${Math.round(amount).toLocaleString()}`;
+};
+var formatTimeAgo2 = (timestamp) => {
+  const seconds = Math.floor(Date.now() / 1e3) - timestamp;
+  if (seconds < 60) return "less than a minute ago";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes} minute${minutes === 1 ? "" : "s"} ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours} hour${hours === 1 ? "" : "s"} ago`;
+  return `${Math.floor(hours / 24)}d ago`;
+};
 function PropertyBuy({
   propertyName = "Loaf Property",
   propertyLocation: propertyLocationLabel = "Sydney, NSW",
@@ -15039,6 +15052,7 @@ function PropertyBuy({
   const offeringValuation = saleData?.offeringValuation ?? tokenPrice * supplyToSell;
   const ipoStatus = saleData?.status ?? "PENDING";
   const ipoStarted = ipoStatus === "LIVE" || isPrivateClient && ipoStatus === "PENDING";
+  const ipoEnded = ipoStatus === "CLOSED" || ipoStatus === "CANCELLED";
   const statusLabel = ipoStatus;
   const statusColor = STATUS_COLOR2[ipoStatus] ?? "#D4AF37";
   const displayStatusLabel = isPrivateClient && ipoStatus !== "LIVE" ? "Private Client Access" : statusLabel;
@@ -15076,6 +15090,10 @@ function PropertyBuy({
     setOrderPlacedSuccess(false);
     setOrderPendingAllocation(false);
   }, []);
+  const sortedOrders = useMemo(
+    () => [...recentOrders].sort((a, b) => b.timestamp - a.timestamp).slice(0, 7),
+    [recentOrders]
+  );
   const isPurchaseInFlight = purchaseStatus === "checking-allowance" || purchaseStatus === "approving" || purchaseStatus === "purchasing" || purchaseStatus === "pending-allocation";
   const getOrderButtonText = () => {
     if (!isAuthenticated) return "Sign In to Invest";
@@ -15162,6 +15180,35 @@ function PropertyBuy({
           isPrivateClient
         }
       ),
+      /* @__PURE__ */ jsxs(RecentOrderPanel, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "roa-header", children: [
+          /* @__PURE__ */ jsxs("h3", { children: [
+            /* @__PURE__ */ jsx(LiveDot, { $active: ipoStarted && !ipoEnded }),
+            "Recent Order Activity"
+          ] }),
+          /* @__PURE__ */ jsx("span", { children: ipoEnded ? `Sale ended${ordersAllocated > 0 ? ` \xB7 ${ordersAllocated.toLocaleString()} orders` : ""}` : ipoStarted ? isLoadingActivity && sortedOrders.length === 0 ? "Loading orders\u2026" : `Active orders: ${ordersAllocated.toLocaleString()}` : "Waiting for Offer to Open" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "roa-content", children: ipoStarted && isLoadingActivity && sortedOrders.length === 0 ? /* @__PURE__ */ jsx(FeedList, { children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs(SkeletonFeedRow, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "info-col", children: [
+            /* @__PURE__ */ jsx(Skeleton, { width: 110, height: 14 }),
+            /* @__PURE__ */ jsx(Skeleton, { width: 56, height: 10 })
+          ] }),
+          /* @__PURE__ */ jsx(Skeleton, { width: 70, height: 14 })
+        ] }, `skel-${i}`)) }) : ipoStarted || ipoEnded && sortedOrders.length > 0 ? /* @__PURE__ */ jsx(FeedList, { children: sortedOrders.map((order, index) => {
+          const amount = tokenPrice * order.quantity;
+          const barPercent = Math.min(85, Math.max(15, amount / 6e4 * 100));
+          return /* @__PURE__ */ jsxs(PurchaseItem, { $barWidth: `${barPercent}%`, $isAlternate: index % 2 === 1, children: [
+            /* @__PURE__ */ jsxs(PurchaseInfo, { children: [
+              /* @__PURE__ */ jsx(PurchaseName, { children: order.buyerHandle || `${order.buyerAddress.slice(0, 6)}...${order.buyerAddress.slice(-4)}` }),
+              /* @__PURE__ */ jsx(PurchaseTime, { children: formatTimeAgo2(order.timestamp) })
+            ] }),
+            /* @__PURE__ */ jsx(PurchaseAmount, { children: formatOrderCurrency(amount) })
+          ] }, order.txHash);
+        }) }) : ipoEnded ? /* @__PURE__ */ jsx("div", { className: "roa-empty", children: /* @__PURE__ */ jsx("p", { children: "Sale ended \u2014 no orders were placed." }) }) : /* @__PURE__ */ jsxs("div", { className: "roa-empty", children: [
+          /* @__PURE__ */ jsx("div", { className: "roa-spinner" }),
+          /* @__PURE__ */ jsx("p", { children: "Activity will appear once the Offering opens" })
+        ] }) })
+      ] }),
       /* @__PURE__ */ jsx(ActivityWrapper, { children: /* @__PURE__ */ jsx(
         PortfolioActivityPanel,
         {
@@ -15267,7 +15314,7 @@ function PropertyBuy({
 var HeroGrid = styled9.div`
   display: grid;
   grid-template-columns: 1fr auto;
-  grid-template-rows: auto auto minmax(450px, 520px);
+  grid-template-rows: auto auto auto minmax(450px, 520px);
   gap: 1.5rem;
   width: 100%;
   max-width: 1800px;
@@ -15289,8 +15336,13 @@ var HeroGrid = styled9.div`
   }
 
   & > div:nth-child(4) {
+    grid-column: 1 / 2;
+    grid-row: 4 / 5;
+  }
+
+  & > div:nth-child(5) {
     grid-column: 2 / 3;
-    grid-row: 1 / 4;
+    grid-row: 1 / 5;
     display: flex;
     flex-direction: column;
   }
@@ -15311,7 +15363,7 @@ var HeroGrid = styled9.div`
       width: 100%;
     }
 
-    & > div:nth-child(4) {
+    & > div:nth-child(5) {
       order: 2;
       min-width: 0;
       width: 100%;
@@ -15323,6 +15375,12 @@ var HeroGrid = styled9.div`
       min-width: 0;
       width: 100%;
     }
+
+    & > div:nth-child(4) {
+      order: 4;
+      min-width: 0;
+      width: 100%;
+    }
   }
 
   @media (max-width: 768px) {
@@ -15348,6 +15406,167 @@ var ActivityWrapper = styled9.div`
     min-height: auto;
   }
 `;
+var RecentOrderPanel = styled9.div`
+  background-color: var(--color-card-darker, #111);
+  border-radius: 8px;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+  border: 1px solid var(--color-border);
+  overflow: hidden;
+  @media (max-width: 768px) {
+    padding: 1rem;
+  }
+
+  .roa-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 0.75rem;
+    margin-bottom: 1rem;
+    border-bottom: 1px solid rgba(255,255,255,0.1);
+    h3 {
+      font-size: 0.9rem;
+      font-weight: 600;
+      color: var(--color-text);
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    span {
+      font-size: 0.75rem;
+      color: var(--color-text-secondary);
+      font-weight: 500;
+    }
+  }
+
+  .roa-content {
+    flex: 1;
+    overflow-y: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar { display: none; }
+  }
+
+  .roa-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 200px;
+    color: var(--color-text-secondary);
+    text-align: center;
+    gap: 0.75rem;
+    p { font-size: 0.85rem; margin: 0; }
+  }
+
+  .roa-spinner {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 2px solid rgba(212,175,55,0.3);
+    border-top-color: #D4AF37;
+    animation: roaSpin 1s linear infinite;
+  }
+
+  @keyframes roaSpin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+`;
+var LiveDot = styled9.span`
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  background-color: ${(p) => p.$active ? "#0ecb81" : "#848e9c"};
+  border-radius: 50%;
+  position: relative;
+  &:after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: ${(p) => p.$active ? "#0ecb81" : "transparent"};
+    animation: ${(p) => p.$active ? "livePulse 2s infinite" : "none"};
+  }
+  @keyframes livePulse {
+    0% { box-shadow: 0 0 0 0 rgba(14,203,129,0.4); }
+    70% { box-shadow: 0 0 0 10px rgba(14,203,129,0); }
+    100% { box-shadow: 0 0 0 0 rgba(14,203,129,0); }
+  }
+`;
+var FeedList = styled9.div`
+  width: 100%;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar { display: none; }
+`;
+var SkeletonFeedRow = styled9.div`
+  padding: 0.625rem 0.75rem;
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  &:last-child { border-bottom: none; }
+  .info-col {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    min-width: 0;
+    flex: 1;
+  }
+`;
+var PurchaseItem = styled9.div`
+  padding: 0.625rem 0.75rem;
+  border-bottom: 1px solid rgba(255,255,255,0.05);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  background-color: ${(p) => p.$isAlternate ? "rgba(255,255,255,0.03)" : "transparent"};
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: ${(p) => p.$barWidth || "20%"};
+    background: linear-gradient(90deg, transparent 0%, rgba(14,203,129,0.15) 100%);
+    pointer-events: none;
+  }
+  &:last-child { border-bottom: none; }
+`;
+var PurchaseInfo = styled9.div`
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+`;
+var PurchaseName = styled9.div`
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+var PurchaseTime = styled9.div`
+  font-size: 0.7rem;
+  color: var(--color-text-secondary);
+  margin-top: 0.125rem;
+`;
+var PurchaseAmount = styled9.div`
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: #fff;
+  white-space: nowrap;
+  margin-left: 1rem;
+`;
 var NewsVideoRow = styled9.div`
   display: flex;
   gap: 1.5rem;