@loafmarkets/ui 0.1.52 → 0.1.53

package/dist/index.d.mts

@@ -69,6 +69,7 @@ type OrderbookTrade = {
     amount: number;
     time?: string;
     tradeId?: number;
+    txHash?: string;
 };
 interface OrderbookProps extends React$1.HTMLAttributes<HTMLDivElement> {
     asks: OrderbookLevel[];
@@ -100,6 +101,8 @@ interface OrderbookProps extends React$1.HTMLAttributes<HTMLDivElement> {
      * a custom `rightHeader` is supplied.
      */
     onLoafLiquidityClick?: () => void;
+    /** Given a trade's txHash, returns the full explorer URL to link to. Defaults to Sepolia Etherscan. */
+    tradeExplorerUrl?: (txHash: string) => string;
 }
 declare const Orderbook: React$1.ForwardRefExoticComponent<OrderbookProps & React$1.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -69,6 +69,7 @@ type OrderbookTrade = {
     amount: number;
     time?: string;
     tradeId?: number;
+    txHash?: string;
 };
 interface OrderbookProps extends React$1.HTMLAttributes<HTMLDivElement> {
     asks: OrderbookLevel[];
@@ -100,6 +101,8 @@ interface OrderbookProps extends React$1.HTMLAttributes<HTMLDivElement> {
      * a custom `rightHeader` is supplied.
      */
     onLoafLiquidityClick?: () => void;
+    /** Given a trade's txHash, returns the full explorer URL to link to. Defaults to Sepolia Etherscan. */
+    tradeExplorerUrl?: (txHash: string) => string;
 }
 declare const Orderbook: React$1.ForwardRefExoticComponent<OrderbookProps & React$1.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -1832,13 +1832,17 @@ function useMidPriceFlash(ref, midPrice, restBgColor) {
     prevMidRef.current = midPrice;
   }, [midPrice, ref, restBgColor]);
 }
+function ExternalLinkIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 9L9 1M9 1H4M9 1V6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
 function TradeRow({
   trade,
   tradeKey,
   precision,
   amountPrecision,
   seenTradeKeysRef,
-  compact
+  compact,
+  explorerUrl
 }) {
   const rowRef = React5__namespace.useRef(null);
   const { type } = trade;
@@ -1858,14 +1862,27 @@ function TradeRow({
       "div",
       {
         ref: rowRef,
-        className: "grid",
+        className: "grid items-center",
         style: { gridTemplateColumns: "1.2fr 0.8fr", padding: "0.2rem 0", fontSize: "0.8rem" },
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: trade.type === "buy" ? "#0ecb81" : "#f6465d", fontWeight: 500 }, children: [
             "$",
             formatNumber(trade.price, precision)
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "right", paddingRight: "0.5rem" }, children: formatNumber(trade.amount, amountPrecision) })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "right", paddingRight: "0.5rem", display: "flex", alignItems: "center", justifyContent: "flex-end", gap: "4px" }, children: [
+            formatNumber(trade.amount, amountPrecision),
+            explorerUrl && /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: explorerUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: { color: "rgba(255,255,255,0.35)", lineHeight: 0 },
+                onClick: (e) => e.stopPropagation(),
+                children: /* @__PURE__ */ jsxRuntime.jsx(ExternalLinkIcon, {})
+              }
+            )
+          ] })
         ]
       }
     );
@@ -1874,7 +1891,7 @@ function TradeRow({
     "div",
     {
       ref: rowRef,
-      className: "grid grid-cols-2 items-center gap-3 px-3 py-1.5",
+      className: "grid grid-cols-3 items-center gap-3 px-3 py-1.5",
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
@@ -1889,7 +1906,22 @@ function TradeRow({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right tabular-nums text-white/90", children: formatNumber(trade.amount, amountPrecision) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right tabular-nums text-white/90", children: formatNumber(trade.amount, amountPrecision) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-1.5", children: [
+          trade.time != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums text-white/50 text-xs", children: trade.time }),
+          explorerUrl && /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: explorerUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "text-white/35 hover:text-white/70 transition-colors",
+              onClick: (e) => e.stopPropagation(),
+              "aria-label": "View on explorer",
+              children: /* @__PURE__ */ jsxRuntime.jsx(ExternalLinkIcon, {})
+            }
+          )
+        ] })
       ]
     }
   );
@@ -1898,6 +1930,7 @@ function DepthRow({
   side,
   price,
   amount,
+  cumDepth,
   depthPct,
   precision,
   amountPrecision,
@@ -1910,7 +1943,7 @@ function DepthRow({
     "div",
     {
       ref: rowRef,
-      className: "relative grid grid-cols-2 items-center gap-3 px-3 text-[0.8rem]",
+      className: "relative grid grid-cols-3 items-center gap-3 px-3 text-[0.8rem]",
       style: { height: `${DEPTH_ROW_HEIGHT_PX}px` },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1930,17 +1963,12 @@ function DepthRow({
             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) })
+        /* @__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) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-[1] text-right tabular-nums text-white/50", children: formatNumber(cumDepth, amountPrecision) })
       ]
     }
   );
@@ -1969,6 +1997,7 @@ var Orderbook = React5__namespace.forwardRef(
     userOrderPrices,
     isLoading = false,
     onLoafLiquidityClick,
+    tradeExplorerUrl,
     className,
     ...props
   }, ref) => {
@@ -2061,7 +2090,8 @@ var Orderbook = React5__namespace.forwardRef(
       userAskPrices,
       userBidPrices,
       isLoading,
-      seenTradeKeysRef
+      seenTradeKeysRef,
+      tradeExplorerUrl
     };
     return /* @__PURE__ */ jsxRuntime.jsx(
       Card,
@@ -2097,9 +2127,10 @@ function SkeletonRow({ compact }) {
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 items-center gap-3 px-3 py-1.5", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 items-center gap-3 px-3 py-1.5", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "60%", height: 12 }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "50%", height: 12 }) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "50%", height: 12 }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "40%", height: 12 }) })
   ] });
 }
 function DesktopOrderbookLayout({
@@ -2125,7 +2156,8 @@ function DesktopOrderbookLayout({
   userAskPrices,
   userBidPrices,
   isLoading,
-  seenTradeKeysRef
+  seenTradeKeysRef,
+  tradeExplorerUrl
 }) {
   const midRef = React5__namespace.useRef(null);
   useMidPriceFlash(midRef, midPrice, "#0b1a24");
@@ -2203,9 +2235,10 @@ function DesktopOrderbookLayout({
       ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: rightHeader })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col min-h-0 px-4 pt-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 px-3 py-2 text-xs text-white/60", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-3 px-3 py-2 text-xs text-white/60", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { children: priceLabel }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: amountLabel })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: amountLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: tab === "orderbook" ? "Total" : "Time" })
       ] }),
       tab === "trades" ? /* @__PURE__ */ jsxRuntime.jsx(
         "div",
@@ -2214,6 +2247,7 @@ function DesktopOrderbookLayout({
           style: { scrollbarGutter: "stable" },
           children: isLoading && tradeFiltered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-white/5", children: Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `trade-skel-${i}`)) }) : tradeFiltered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-10 text-center text-sm text-white/50", children: "No trades" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-white/5", children: tradeFiltered.map((trade, i) => {
             const tradeKey = getTradeKey(trade, i);
+            const explorerUrl = trade.txHash && tradeExplorerUrl ? tradeExplorerUrl(trade.txHash) : trade.txHash ? `https://sepolia.etherscan.io/tx/${trade.txHash}` : void 0;
             return /* @__PURE__ */ jsxRuntime.jsx(
               TradeRow,
               {
@@ -2221,7 +2255,8 @@ function DesktopOrderbookLayout({
                 tradeKey,
                 precision,
                 amountPrecision,
-                seenTradeKeysRef
+                seenTradeKeysRef,
+                explorerUrl
               },
               tradeKey
             );
@@ -2239,6 +2274,7 @@ function DesktopOrderbookLayout({
                 side: "ask",
                 price: l.price,
                 amount: l.amount,
+                cumDepth: askCumDepths[i],
                 depthPct: askCumDepths[i] / combinedMaxCumDepth * 100,
                 precision,
                 amountPrecision,
@@ -2278,6 +2314,7 @@ function DesktopOrderbookLayout({
                 side: "bid",
                 price: l.price,
                 amount: l.amount,
+                cumDepth: bidCumDepths[i],
                 depthPct: bidCumDepths[i] / combinedMaxCumDepth * 100,
                 precision,
                 amountPrecision,
@@ -2314,7 +2351,8 @@ function MobileOrderbookLayout({
   userAskPrices,
   userBidPrices,
   isLoading,
-  seenTradeKeysRef
+  seenTradeKeysRef,
+  tradeExplorerUrl
 }) {
   const midRef = React5__namespace.useRef(null);
   useMidPriceFlash(midRef, midPrice, "transparent");
@@ -2459,6 +2497,7 @@ function MobileOrderbookLayout({
       ),
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, overflowY: "auto", minHeight: 0 }, children: isLoading && tradeFiltered.length === 0 ? Array.from({ length: COMPACT_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, { compact: true }, `m-trade-skel-${i}`)) : tradeFiltered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center text-[0.7rem] text-white/50", children: "No trades" }) : tradeFiltered.map((trade, i) => {
         const tradeKey = getTradeKey(trade, i);
+        const explorerUrl = trade.txHash && tradeExplorerUrl ? tradeExplorerUrl(trade.txHash) : trade.txHash ? `https://sepolia.etherscan.io/tx/${trade.txHash}` : void 0;
         return /* @__PURE__ */ jsxRuntime.jsx(
           TradeRow,
           {
@@ -2467,7 +2506,8 @@ function MobileOrderbookLayout({
             precision,
             amountPrecision,
             seenTradeKeysRef,
-            compact: true
+            compact: true,
+            explorerUrl
           },
           tradeKey
         );