@loafmarkets/ui 0.1.98 → 0.1.100

package/dist/index.d.mts

@@ -107,6 +107,8 @@ interface OrderbookProps extends React$1.HTMLAttributes<HTMLDivElement> {
     tradeExplorerUrl?: (txHash: string) => string;
     /** Override the number of visible price levels per side (default 5). */
     maxLevels?: number;
+    /** When true, asks/bids sections stretch to fill the container instead of using fixed pixel heights. */
+    fillHeight?: boolean;
 }
 declare const Orderbook: React$1.ForwardRefExoticComponent<OrderbookProps & React$1.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -107,6 +107,8 @@ interface OrderbookProps extends React$1.HTMLAttributes<HTMLDivElement> {
     tradeExplorerUrl?: (txHash: string) => string;
     /** Override the number of visible price levels per side (default 5). */
     maxLevels?: number;
+    /** When true, asks/bids sections stretch to fill the container instead of using fixed pixel heights. */
+    fillHeight?: boolean;
 }
 declare const Orderbook: React$1.ForwardRefExoticComponent<OrderbookProps & React$1.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -2005,6 +2005,7 @@ var Orderbook = React5__namespace.forwardRef(
     onLoafLiquidityClick,
     tradeExplorerUrl,
     maxLevels,
+    fillHeight = false,
     className,
     ...props
   }, ref) => {
@@ -2105,7 +2106,8 @@ var Orderbook = React5__namespace.forwardRef(
       tradeExplorerUrl,
       onPriceClick,
       levelCount: effectiveLevels,
-      compactLevelCount: effectiveCompactLevels
+      compactLevelCount: effectiveCompactLevels,
+      fillHeight
     };
     return /* @__PURE__ */ jsxRuntime.jsx(
       Card,
@@ -2114,6 +2116,7 @@ var Orderbook = React5__namespace.forwardRef(
         className: cn(
           "w-full max-w-[520px] overflow-hidden rounded-[12px] border border-white/10 bg-[#111111] text-white shadow-md flex flex-col",
           isCompact && "max-w-none",
+          fillHeight && "h-full",
           className
         ),
         ...props,
@@ -2175,7 +2178,8 @@ function DesktopOrderbookLayout({
   tradeExplorerUrl,
   onPriceClick,
   levelCount: effectiveLevels,
-  compactLevelCount: _compactLevelCount
+  compactLevelCount: _compactLevelCount,
+  fillHeight
 }) {
   const midRef = React5__namespace.useRef(null);
   useMidPriceFlash(midRef, midPrice, "#0b1a24");
@@ -2280,12 +2284,12 @@ function DesktopOrderbookLayout({
             );
           }) })
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-h-0 overflow-hidden", children: [
+      ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col min-h-0 overflow-hidden", fillHeight && "flex-1"), children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "flex flex-col justify-end overflow-hidden flex-shrink-0",
-            style: { height: `${sectionHeight}px` },
+            className: cn("flex flex-col justify-end overflow-hidden", !fillHeight && "flex-shrink-0"),
+            style: fillHeight ? { flex: 1, minHeight: 0 } : { height: `${sectionHeight}px` },
             children: isLoading ? Array.from({ length: effectiveLevels }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `ask-skel-${i}`)) : askVisibleLevels.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No asks" }) : askVisibleLevels.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
               DepthRow,
               {
@@ -2325,8 +2329,8 @@ function DesktopOrderbookLayout({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "flex flex-col overflow-hidden flex-shrink-0",
-            style: { height: `${sectionHeight}px` },
+            className: cn("flex flex-col overflow-hidden", !fillHeight && "flex-shrink-0"),
+            style: fillHeight ? { flex: 1, minHeight: 0 } : { height: `${sectionHeight}px` },
             children: isLoading ? Array.from({ length: effectiveLevels }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `bid-skel-${i}`)) : bidVisibleLevels.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No bids" }) : bidVisibleLevels.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
               DepthRow,
               {
@@ -2763,7 +2767,8 @@ var formatDateShort = (value) => {
   if (diffS < 60) return "Just now";
   if (diffS < 3600) return `${Math.floor(diffS / 60)}m ago`;
   if (diffS < 86400) return `${Math.floor(diffS / 3600)}h ago`;
-  return d.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+  const time = d.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit", hour12: true });
+  return `${time} \xB7 ${d.toLocaleDateString(void 0, { month: "short", day: "numeric" })}`;
 };
 var formatTimeAgo = (timestamp) => {
   const diff = (Date.now() - new Date(timestamp).getTime()) / 1e3;