@loafmarkets/ui 0.1.44 → 0.1.45

package/dist/index.d.mts

@@ -94,6 +94,12 @@ interface OrderbookProps extends React$1.HTMLAttributes<HTMLDivElement> {
     }[];
     /** When true, render skeleton placeholders in place of ask/bid rows and mid price. */
     isLoading?: boolean;
+    /**
+     * Called when the Loaf Liquidity badge in the right header is clicked. Consumers
+     * typically wire this to route to the Loaf Liquidity marketing page. Ignored if
+     * a custom `rightHeader` is supplied.
+     */
+    onLoafLiquidityClick?: () => void;
 }
 declare const Orderbook: React$1.ForwardRefExoticComponent<OrderbookProps & React$1.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -94,6 +94,12 @@ interface OrderbookProps extends React$1.HTMLAttributes<HTMLDivElement> {
     }[];
     /** When true, render skeleton placeholders in place of ask/bid rows and mid price. */
     isLoading?: boolean;
+    /**
+     * Called when the Loaf Liquidity badge in the right header is clicked. Consumers
+     * typically wire this to route to the Loaf Liquidity marketing page. Ignored if
+     * a custom `rightHeader` is supplied.
+     */
+    onLoafLiquidityClick?: () => void;
 }
 declare const Orderbook: React$1.ForwardRefExoticComponent<OrderbookProps & React$1.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -1802,20 +1802,20 @@ function getTradeKey(trade, fallbackIndex) {
   if (trade.time != null) return `t-${trade.time}-${trade.type}-${trade.price}-${trade.amount}`;
   return `idx-${fallbackIndex}-${trade.type}-${trade.price}-${trade.amount}`;
 }
-function useAmountChangeFlash(ref, amount) {
+function useAmountChangeFlash(ref, amount, side) {
   const prevAmountRef = React9__namespace.useRef(amount);
   React9__namespace.useEffect(() => {
     const prev = prevAmountRef.current;
     const node = ref.current;
     if (prev !== amount && node && typeof node.animate === "function") {
-      const color = amount > prev ? FLASH_UP_COLOR : FLASH_DOWN_COLOR;
+      const color = side === "bid" ? FLASH_UP_COLOR : FLASH_DOWN_COLOR;
       node.animate(
         [{ backgroundColor: color }, { backgroundColor: "transparent" }],
         { duration: FLASH_DURATION_MS, easing: "ease-out" }
       );
     }
     prevAmountRef.current = amount;
-  }, [amount, ref]);
+  }, [amount, ref, side]);
 }
 function useMidPriceFlash(ref, midPrice, restBgColor) {
   const prevMidRef = React9__namespace.useRef(midPrice);
@@ -1905,41 +1905,49 @@ function DepthRow({
 }) {
   const isAsk = side === "ask";
   const rowRef = React9__namespace.useRef(null);
-  useAmountChangeFlash(rowRef, amount);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rowRef, className: "relative grid grid-cols-2 items-center gap-3 px-3 py-1.5", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn(
-          "absolute inset-y-0 right-0",
-          isAsk ? "bg-rose-900/30" : "bg-emerald-900/30"
+  useAmountChangeFlash(rowRef, amount, side);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: rowRef,
+      className: "relative grid grid-cols-2 items-center gap-3 px-3 text-[0.8rem]",
+      style: { height: `${DEPTH_ROW_HEIGHT_PX}px` },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "absolute inset-y-0 right-0",
+              isAsk ? "bg-rose-900/30" : "bg-emerald-900/30"
+            ),
+            style: { width: `${clamp3(depthPct, 0, 100)}%`, transition: "width 300ms ease-out" }
+          }
         ),
-        style: { width: `${clamp3(depthPct, 0, 100)}%`, transition: "width 300ms ease-out" }
-      }
-    ),
-    hasUserOrder ? /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        "aria-label": "Your order at this price",
-        className: "absolute left-0 top-0 bottom-0 z-[2] w-[3px] rounded-r-sm bg-[#C9A227] shadow-[0_0_6px_rgba(201,162,39,0.6)]"
-      }
-    ) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: cn("relative z-[1] tabular-nums", isAsk ? "text-[#f6465d]" : "text-[#0ecb81]"),
-        children: [
-          "$",
-          formatNumber(price, precision)
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-[1] text-right tabular-nums text-white/90", children: formatNumber(amount, amountPrecision) })
-  ] });
+        hasUserOrder ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-label": "Your order at this price",
+            className: "absolute left-2 top-1/2 -translate-y-1/2 z-[2] h-[6px] w-[6px] rounded-full bg-[#C9A227] shadow-[0_0_6px_rgba(201,162,39,0.7)]"
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn("relative z-[1] tabular-nums", isAsk ? "text-[#f6465d]" : "text-[#0ecb81]"),
+            children: [
+              "$",
+              formatNumber(price, precision)
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-[1] text-right tabular-nums text-white/90", children: formatNumber(amount, amountPrecision) })
+      ]
+    }
+  );
 }
 var clamp3 = (value, min, max) => Math.min(max, Math.max(min, value));
 var LEVEL_ROWS_VISIBLE = 6;
-var DEPTH_ROW_HEIGHT_PX = 34;
+var DEPTH_ROW_HEIGHT_PX = 26;
 var COMPACT_ROWS_VISIBLE = 5;
 var COMPACT_ROW_HEIGHT_PX = 30;
 var COMPACT_BREAKPOINT_PX = 1024;
@@ -1956,13 +1964,15 @@ var Orderbook = React9__namespace.forwardRef(
     amountPrecision = 2,
     defaultTab = "orderbook",
     onTabChange,
-    rightHeader = /* @__PURE__ */ jsxRuntime.jsx(LoafLiquidityBadge, { className: "text-[0.6rem]" }),
+    rightHeader,
     variant = "auto",
     userOrderPrices,
     isLoading = false,
+    onLoafLiquidityClick,
     className,
     ...props
   }, ref) => {
+    const resolvedRightHeader = rightHeader ?? /* @__PURE__ */ jsxRuntime.jsx(LoafLiquidityBadge, { className: "text-[0.6rem]", onClick: onLoafLiquidityClick });
     const [tab, setTab] = React9__namespace.useState(defaultTab);
     const [tradeFilter, setTradeFilter] = React9__namespace.useState("all");
     const viewportCompact = useViewportCompact(COMPACT_BREAKPOINT_PX);
@@ -2013,7 +2023,7 @@ var Orderbook = React9__namespace.forwardRef(
       handleTab,
       tradeFilter,
       setTradeFilter,
-      rightHeader,
+      rightHeader: resolvedRightHeader,
       priceLabel,
       amountLabel,
       tradeFiltered,
@@ -2199,9 +2209,9 @@ function DesktopOrderbookLayout({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "flex flex-col justify-end divide-y divide-white/5 overflow-y-auto",
-            style: { height: `${sectionHeight}px`, scrollbarGutter: "stable" },
-            children: isLoading ? Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `ask-skel-${i}`)) : asks.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No asks" }) : asks.map((l) => /* @__PURE__ */ jsxRuntime.jsx(
+            className: "flex flex-col justify-end divide-y divide-white/5 overflow-hidden",
+            style: { height: `${sectionHeight}px` },
+            children: isLoading ? Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `ask-skel-${i}`)) : asks.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No asks" }) : asks.slice(-LEVEL_ROWS_VISIBLE).map((l) => /* @__PURE__ */ jsxRuntime.jsx(
               DepthRow,
               {
                 side: "ask",
@@ -2238,9 +2248,9 @@ function DesktopOrderbookLayout({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "divide-y divide-white/5 overflow-y-auto",
-            style: { height: `${sectionHeight}px`, scrollbarGutter: "stable" },
-            children: isLoading ? Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `bid-skel-${i}`)) : bids.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No bids" }) : bids.map((l) => /* @__PURE__ */ jsxRuntime.jsx(
+            className: "divide-y divide-white/5 overflow-hidden",
+            style: { height: `${sectionHeight}px` },
+            children: isLoading ? Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `bid-skel-${i}`)) : bids.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No bids" }) : bids.slice(0, LEVEL_ROWS_VISIBLE).map((l) => /* @__PURE__ */ jsxRuntime.jsx(
               DepthRow,
               {
                 side: "bid",
@@ -2285,7 +2295,7 @@ function MobileOrderbookLayout({
 }) {
   const midRef = React9__namespace.useRef(null);
   useMidPriceFlash(midRef, midPrice, "transparent");
-  const visibleAsks = React9__namespace.useMemo(() => asks.slice(0, COMPACT_ROWS_VISIBLE), [asks]);
+  const visibleAsks = React9__namespace.useMemo(() => asks.slice(-COMPACT_ROWS_VISIBLE), [asks]);
   const visibleBids = React9__namespace.useMemo(() => bids.slice(0, COMPACT_ROWS_VISIBLE), [bids]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pt-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
@@ -2455,7 +2465,7 @@ function MobileDepthRow({
 }) {
   const isAsk = side === "ask";
   const rowRef = React9__namespace.useRef(null);
-  useAmountChangeFlash(rowRef, amount);
+  useAmountChangeFlash(rowRef, amount, side);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -2474,14 +2484,14 @@ function MobileDepthRow({
             "aria-label": "Your order at this price",
             style: {
               position: "absolute",
-              left: 0,
-              top: 0,
-              bottom: 0,
-              width: "3px",
+              left: "6px",
+              top: "50%",
+              transform: "translateY(-50%)",
+              width: "6px",
+              height: "6px",
+              borderRadius: "50%",
               backgroundColor: "#C9A227",
-              boxShadow: "0 0 6px rgba(201,162,39,0.6)",
-              borderTopRightRadius: "2px",
-              borderBottomRightRadius: "2px",
+              boxShadow: "0 0 6px rgba(201,162,39,0.7)",
               zIndex: 2
             }
           }