@loafmarkets/ui 0.1.44 → 0.1.46

package/dist/index.mjs

@@ -1777,20 +1777,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.useRef(amount);
   React9.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.useRef(midPrice);
@@ -1880,41 +1880,49 @@ function DepthRow({
 }) {
   const isAsk = side === "ask";
   const rowRef = React9.useRef(null);
-  useAmountChangeFlash(rowRef, amount);
-  return /* @__PURE__ */ jsxs("div", { ref: rowRef, className: "relative grid grid-cols-2 items-center gap-3 px-3 py-1.5", children: [
-    /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsxs(
-      "div",
-      {
-        className: cn("relative z-[1] tabular-nums", isAsk ? "text-[#f6465d]" : "text-[#0ecb81]"),
-        children: [
-          "$",
-          formatNumber(price, precision)
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "relative z-[1] text-right tabular-nums text-white/90", children: formatNumber(amount, amountPrecision) })
-  ] });
+        hasUserOrder ? /* @__PURE__ */ 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__ */ jsxs(
+          "div",
+          {
+            className: cn("relative z-[1] tabular-nums", isAsk ? "text-[#f6465d]" : "text-[#0ecb81]"),
+            children: [
+              "$",
+              formatNumber(price, precision)
+            ]
+          }
+        ),
+        /* @__PURE__ */ 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;
@@ -1931,13 +1939,15 @@ var Orderbook = React9.forwardRef(
     amountPrecision = 2,
     defaultTab = "orderbook",
     onTabChange,
-    rightHeader = /* @__PURE__ */ jsx(LoafLiquidityBadge, { className: "text-[0.6rem]" }),
+    rightHeader,
     variant = "auto",
     userOrderPrices,
     isLoading = false,
+    onLoafLiquidityClick,
     className,
     ...props
   }, ref) => {
+    const resolvedRightHeader = rightHeader ?? /* @__PURE__ */ jsx(LoafLiquidityBadge, { className: "text-[0.6rem]", onClick: onLoafLiquidityClick });
     const [tab, setTab] = React9.useState(defaultTab);
     const [tradeFilter, setTradeFilter] = React9.useState("all");
     const viewportCompact = useViewportCompact(COMPACT_BREAKPOINT_PX);
@@ -1988,7 +1998,7 @@ var Orderbook = React9.forwardRef(
       handleTab,
       tradeFilter,
       setTradeFilter,
-      rightHeader,
+      rightHeader: resolvedRightHeader,
       priceLabel,
       amountLabel,
       tradeFiltered,
@@ -2174,9 +2184,9 @@ function DesktopOrderbookLayout({
         /* @__PURE__ */ 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__ */ jsx(SkeletonRow, {}, `ask-skel-${i}`)) : asks.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No asks" }) : asks.map((l) => /* @__PURE__ */ 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__ */ jsx(SkeletonRow, {}, `ask-skel-${i}`)) : asks.length === 0 ? /* @__PURE__ */ 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__ */ jsx(
               DepthRow,
               {
                 side: "ask",
@@ -2213,9 +2223,9 @@ function DesktopOrderbookLayout({
         /* @__PURE__ */ 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__ */ jsx(SkeletonRow, {}, `bid-skel-${i}`)) : bids.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No bids" }) : bids.map((l) => /* @__PURE__ */ jsx(
+            className: "divide-y divide-white/5 overflow-hidden",
+            style: { height: `${sectionHeight}px` },
+            children: isLoading ? Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, {}, `bid-skel-${i}`)) : bids.length === 0 ? /* @__PURE__ */ 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__ */ jsx(
               DepthRow,
               {
                 side: "bid",
@@ -2260,7 +2270,7 @@ function MobileOrderbookLayout({
 }) {
   const midRef = React9.useRef(null);
   useMidPriceFlash(midRef, midPrice, "transparent");
-  const visibleAsks = React9.useMemo(() => asks.slice(0, COMPACT_ROWS_VISIBLE), [asks]);
+  const visibleAsks = React9.useMemo(() => asks.slice(-COMPACT_ROWS_VISIBLE), [asks]);
   const visibleBids = React9.useMemo(() => bids.slice(0, COMPACT_ROWS_VISIBLE), [bids]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: "px-3 pt-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
@@ -2430,7 +2440,7 @@ function MobileDepthRow({
 }) {
   const isAsk = side === "ask";
   const rowRef = React9.useRef(null);
-  useAmountChangeFlash(rowRef, amount);
+  useAmountChangeFlash(rowRef, amount, side);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -2449,14 +2459,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
             }
           }
@@ -11296,6 +11306,7 @@ var TabContainer = styled24.div`
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   margin-bottom: 0.75rem;
   overflow-x: auto;
+  overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   &::-webkit-scrollbar { display: none; }