@loafmarkets/ui 0.1.340 → 0.1.342

package/dist/index.mjs

@@ -1705,21 +1705,6 @@ function useAmountChangeFlash(ref, amount, side) {
     prevAmountRef.current = amount;
   }, [amount, ref, side]);
 }
-function useMidPriceFlash(ref, midPrice, restBgColor) {
-  const prevMidRef = React5.useRef(midPrice);
-  React5.useEffect(() => {
-    const prev = prevMidRef.current;
-    const node = ref.current;
-    if (prev !== midPrice && prev > 0 && midPrice > 0 && node && typeof node.animate === "function") {
-      const color = midPrice > prev ? FLASH_UP_COLOR : FLASH_DOWN_COLOR;
-      node.animate(
-        [{ backgroundColor: color }, { backgroundColor: restBgColor }],
-        { duration: FLASH_DURATION_MS, easing: "ease-out" }
-      );
-    }
-    prevMidRef.current = midPrice;
-  }, [midPrice, ref, restBgColor]);
-}
 function ExternalLinkIcon() {
   return /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M1 9L9 1M9 1H4M9 1V6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
@@ -2063,8 +2048,6 @@ function DesktopOrderbookLayout({
   compactLevelCount: _compactLevelCount,
   fillHeight
 }) {
-  const midRef = React5.useRef(null);
-  useMidPriceFlash(midRef, midPrice, "#0b1a24");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 pt-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
@@ -2192,7 +2175,6 @@ function DesktopOrderbookLayout({
         /* @__PURE__ */ jsx(
           "div",
           {
-            ref: midRef,
             className: "flex items-center gap-2 bg-[#0b1a24] px-3 py-2 flex-shrink-0 overflow-hidden orderbook-mid-row",
             children: /* @__PURE__ */ jsx("div", { className: cn("text-lg font-semibold tabular-nums whitespace-nowrap orderbook-mid-price", midClass), children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { width: 110, height: 20 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
               "$",
@@ -2261,8 +2243,6 @@ function MobileOrderbookLayout({
   levelCount: _levelCount,
   compactLevelCount: effectiveCompactLevels
 }) {
-  const midRef = React5.useRef(null);
-  useMidPriceFlash(midRef, midPrice, "transparent");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: "px-3 pt-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -2348,7 +2328,6 @@ function MobileOrderbookLayout({
       /* @__PURE__ */ jsxs(
         "div",
         {
-          ref: midRef,
           className: "grid",
           style: {
             gridTemplateColumns: "1.2fr 0.8fr",
@@ -3137,7 +3116,7 @@ function PropertyMediaRow({
   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: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4 lg:flex-row lg:items-stretch lg:gap-6 lg:h-[480px] xl: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",
@@ -11415,13 +11394,9 @@ var IPOAssetSelector = styled9.div`
   &:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.15); }
 
   @media (max-width: 768px) {
-    flex-wrap: wrap;
-    padding: 0.75rem 1rem;
-    gap: 0.5rem;
-  }
-
-  @media (max-width: 480px) {
+    flex-wrap: nowrap;
     padding: 0.6rem 0.75rem;
+    gap: 0.4rem;
   }
 `;
 var AssetThumbnail = styled9.img`
@@ -11500,9 +11475,9 @@ var SelectorMetrics = styled9.div`
 var TrailingWrapper = styled9.div`
   display: flex;
   align-items: center;
+  flex-shrink: 0;
 
   @media (max-width: 768px) {
-    width: 100%;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
@@ -11517,7 +11492,7 @@ var TrailingInner = styled9.div`
     display: inline-flex;
     align-items: center;
     min-width: max-content;
-    gap: 0.75rem;
+    gap: 0.5rem;
   }
 `;
 var MetricLabel = styled9.span`
@@ -13353,6 +13328,7 @@ function OrderConfirmationModal({
               onConfirm();
             },
             disabled: isPlacing,
+            "data-placing": isPlacing,
             children: isPlacing ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(Spinner, { "aria-hidden": true }),
               /* @__PURE__ */ jsx("span", { children: placingLabel })
@@ -13384,6 +13360,7 @@ var Modal = styled9.div`
   max-width: 480px;
   width: 90%;
   box-shadow: 0 20px 60px rgba(0,0,0,0.5);
+  overflow: hidden;
 `;
 var ModalHeader = styled9.div`
   display: flex;
@@ -13518,6 +13495,7 @@ var BaseButton = styled9.button`
   justify-content: center;
   white-space: nowrap;
   flex-shrink: 0;
+  overflow: hidden;
   &:disabled {
     cursor: not-allowed;
     opacity: 0.75;
@@ -13533,6 +13511,10 @@ var PrimaryButton = styled9(BaseButton)`
   color: #fff;
   border: none;
   box-shadow: 0 4px 12px rgba(14,203,129,0.3);
+  &[data-placing='true'] {
+    font-size: 0.8rem;
+    padding: 0.75rem 0.9rem;
+  }
 `;
 
 // src/components/property-buy/constants.ts
@@ -14007,23 +13989,29 @@ function PortfolioActivityPanel({
       activeTab === "subscriptions" && /* @__PURE__ */ jsxs(Fragment, { children: [
         offeringOrders.length === 0 && /* @__PURE__ */ jsx(EmptyState, { children: "IPO allocations will appear here once you subscribe." }),
         offeringOrders.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(GridHeader, { $columns: "1.2fr 0.8fr 1fr 1fr 0.8fr 1fr", children: [
+          /* @__PURE__ */ jsxs(GridHeader, { $columns: "1.2fr 0.8fr 1fr 1fr 0.8fr 1fr 36px", children: [
             /* @__PURE__ */ jsx(GridHeaderCell, { children: "Asset" }),
             /* @__PURE__ */ jsx(GridHeaderCell, { children: "Qty" }),
             /* @__PURE__ */ jsx(GridHeaderCell, { children: "Price" }),
             /* @__PURE__ */ jsx(GridHeaderCell, { children: "Total" }),
             /* @__PURE__ */ jsx(GridHeaderCell, { children: "Status" }),
-            /* @__PURE__ */ jsx(GridHeaderCell, { children: "Date" })
+            /* @__PURE__ */ jsx(GridHeaderCell, { children: "Date" }),
+            /* @__PURE__ */ jsx(GridHeaderCell, {})
           ] }),
           pagedOfferingOrders.map((order) => {
             const meta = getOrderStatusMeta(order.status);
-            return /* @__PURE__ */ jsxs(GridRow, { $columns: "1.2fr 0.8fr 1fr 1fr 0.8fr 1fr", children: [
+            return /* @__PURE__ */ jsxs(GridRow, { $columns: "1.2fr 0.8fr 1fr 1fr 0.8fr 1fr 36px", children: [
               /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $primary: true, children: order.tokenName }) }),
               /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { children: formatNumber2(order.quantity) }) }),
               /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: formatCurrency4(order.price) }) }),
               /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { children: formatCurrency4(order.price * order.quantity) }) }),
               /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(ActivityTag, { $color: meta.color, $bg: meta.bg, children: prettyLabel(order.status) }) }),
-              /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: formatTimestamp(order.createdAt) }) })
+              /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: formatTimestamp(order.createdAt) }) }),
+              /* @__PURE__ */ jsx(GridCell, { children: order.txHash && /* @__PURE__ */ jsx(TxLink, { href: `${_blockExplorerBaseUrl}/${order.txHash}`, 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" })
+              ] }) }) })
             ] }, `${order.tokenName}-${order.txHash}-${order.createdAt}`);
           })
         ] })
@@ -14111,14 +14099,15 @@ 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 1fr 1fr", children: [
+          /* @__PURE__ */ jsxs(GridHeader, { $columns: "1.2fr 0.6fr 0.8fr 1fr 1fr 1fr 1fr 36px", 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: "Settlement" }),
-            /* @__PURE__ */ jsx(GridHeaderCell, { children: "Date" })
+            /* @__PURE__ */ jsx(GridHeaderCell, { children: "Date" }),
+            /* @__PURE__ */ jsx(GridHeaderCell, {})
           ] }),
           pagedTradeHistory.map((trade) => {
             const s = trade.status?.toUpperCase();
@@ -14127,14 +14116,19 @@ function PortfolioActivityPanel({
             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: [
+            return /* @__PURE__ */ jsxs(GridRow, { $columns: "1.2fr 0.6fr 0.8fr 1fr 1fr 1fr 1fr 36px", 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) }) })
+              /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $muted: true, children: formatTimestamp(trade.executedAt) }) }),
+              /* @__PURE__ */ jsx(GridCell, { children: trade.txHash && /* @__PURE__ */ jsx(TxLink, { href: `${_blockExplorerBaseUrl}/${trade.txHash}`, 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" })
+              ] }) }) })
             ] }, trade.tradeId);
           })
         ] })