@gearbox-protocol/ui-kit 3.11.1 → 3.11.2

package/dist/esm/components/composites/pool-table/pool-table.js

@@ -1,78 +1,79 @@
-import { jsx as t, Fragment as I, jsxs as N } from "react/jsx-runtime";
-import * as C from "react";
-import { HeadCell as q } from "../../head-cell/head-cell.js";
-import { HelpTip as R } from "../../help-tip/help-tip.js";
-import { GridLoadingLine as J } from "../../table/grid-loading-line.js";
-import { GridTable as K, GridTableHeader as Q, GridTableBody as U, GridTableRow as O, GridTableHead as V, GridTableCell as j } from "../../table/grid-table.js";
-import { TableLoaderGuard as W } from "../../table/table-loader-guard.js";
+import { jsx as t, Fragment as G, jsxs as N } from "react/jsx-runtime";
+import * as L from "react";
+import { HeadCell as F } from "../../head-cell/head-cell.js";
+import { HelpTip as B } from "../../help-tip/help-tip.js";
+import { RWA_POOL_ROW_HOVER_WRAPPER_CLASS as V } from "../../rwa-styles/index.js";
+import { GridLoadingLine as X } from "../../table/grid-loading-line.js";
+import { GridTable as q, GridTableHeader as J, GridTableBody as K, GridTableRow as H, GridTableHead as Q, GridTableCell as $ } from "../../table/grid-table.js";
+import { TableLoaderGuard as U } from "../../table/table-loader-guard.js";
 import { TableLineSm as Y, TableCellSm as Z } from "../../table/table-sm.js";
 import "@gearbox-protocol/sdk/common-utils";
 import "@gearbox-protocol/sdk";
-import { useIsMobile as _, useIsMedium as w } from "../../../hooks/use-media-query.js";
-import { poolTableTestIds as k } from "../../../test-ids/pool-table.js";
-import { cn as L } from "../../../utils/cn.js";
-function H({
+import { useIsMobile as w, useIsMedium as ee } from "../../../hooks/use-media-query.js";
+import { poolTableTestIds as j } from "../../../test-ids/pool-table.js";
+import { cn as u } from "../../../utils/cn.js";
+function k({
   last: e,
   className: l,
   ...d
 }) {
   return /* @__PURE__ */ t(
-    O,
+    H,
     {
-      className: L(e && "*:after:hidden", l),
+      className: u(e && "*:after:hidden", l),
       ...d
     }
   );
 }
-function ee({
+function ie({
   columns: e,
   sort: l,
   isMedium: d
 }) {
-  return /* @__PURE__ */ t(O, { noHover: !0, height: "35px", children: e.map((i) => {
+  return /* @__PURE__ */ t(H, { noHover: !0, height: "35px", children: e.map((i) => {
     if (i.hideOnMedium && d) return null;
     const s = i.sort, a = s && l ? {
       direction: l.state?.field === s.field ? l.state.sort : null,
       onSort: () => l.set(s.field, s.defaultDirection ?? "desc")
-    } : void 0, p = typeof i.header == "function" ? i.header(a) : i.header;
+    } : void 0, m = typeof i.header == "function" ? i.header(a) : i.header;
     return /* @__PURE__ */ t(
-      V,
+      Q,
       {
         justify: i.align === "right" ? "end" : i.align === "center" ? "center" : "start",
         size: "sm",
         gapBefore: i.gapBefore,
-        className: L(i.className, i.headerClassName),
-        children: a ? /* @__PURE__ */ N(I, { children: [
+        className: u(i.className, i.headerClassName),
+        children: a ? /* @__PURE__ */ N(G, { children: [
           /* @__PURE__ */ t(
-            q,
+            F,
             {
-              title: p,
+              title: m,
               sortDirection: a.direction ?? void 0,
               onSort: a.onSort
             }
           ),
-          i.headerTip && /* @__PURE__ */ t(R, { className: "ml-1.5", children: i.headerTip })
-        ] }) : /* @__PURE__ */ N(I, { children: [
-          p,
-          i.headerTip && /* @__PURE__ */ t(R, { className: "ml-1.5", children: i.headerTip })
+          i.headerTip && /* @__PURE__ */ t(B, { className: "ml-1.5", children: i.headerTip })
+        ] }) : /* @__PURE__ */ N(G, { children: [
+          m,
+          i.headerTip && /* @__PURE__ */ t(B, { className: "ml-1.5", children: i.headerTip })
         ] })
       },
       i.id
     );
   }) });
 }
-function ie({
+function te({
   row: e,
   columns: l,
   last: d,
   rowHeight: i,
   isSmall: s,
   isMedium: a,
-  mobileColumnsXs: p,
-  mobileColumnsMd: c,
-  rowTestId: u
+  mobileColumnsXs: m,
+  mobileColumnsMd: h,
+  rowTestId: g
 }) {
-  const f = C.useMemo(
+  const c = L.useMemo(
     () => ({
       pool: e.pool,
       tokensList: e.tokensList,
@@ -84,113 +85,120 @@ function ie({
       isMobile: s
     }),
     [e, s]
-  ), M = a ? l.filter((n) => !n.hideOnMedium) : l;
+  ), M = a ? l.filter((r) => !r.hideOnMedium) : l;
   if (s) {
-    const n = l.filter((r) => !r.hideOnMobile), [g, ...x] = n, T = (r) => r.mobileCell ? r.mobileCell(f) : r.cell(f);
-    return /* @__PURE__ */ t(H, { last: d, href: e.href, "data-testid": u, children: /* @__PURE__ */ t(j, { span: "full", size: "sm", className: "px-3 py-0!", children: /* @__PURE__ */ t(
+    const r = l.filter((n) => !n.hideOnMobile), [b, ...x] = r, T = (n) => n.mobileCell ? n.mobileCell(c) : n.cell(c);
+    return /* @__PURE__ */ t(k, { last: d, href: e.href, "data-testid": g, children: /* @__PURE__ */ t($, { span: "full", size: "sm", className: "px-3 py-0!", children: /* @__PURE__ */ t(
       Y,
       {
-        title: g ? T(g) : void 0,
-        columnsXs: p,
-        columnsMd: c,
+        title: b ? T(b) : void 0,
+        columnsXs: m,
+        columnsMd: h,
         className: "w-full",
-        children: x.map((r) => /* @__PURE__ */ t(Z, { title: r.mobileTitle, children: T(r) }, r.id))
+        children: x.map((n) => /* @__PURE__ */ t(Z, { title: n.mobileTitle, children: T(n) }, n.id))
       }
     ) }) });
   }
   return /* @__PURE__ */ t(
-    H,
+    k,
     {
+      className: u(
+        e.pool.poolType === "rwa" && "[&>*]:before:bg-[#7fc8ea]/40"
+      ),
       last: d,
       href: e.href,
       height: `${i}px`,
-      "data-testid": u,
-      children: M.map((n) => /* @__PURE__ */ t(
-        j,
+      "data-testid": g,
+      children: M.map((r) => /* @__PURE__ */ t(
+        $,
         {
-          textAlign: n.align ?? "left",
+          textAlign: r.align ?? "left",
           size: "sm",
-          gapBefore: n.gapBefore,
-          className: n.className,
-          children: n.cell(f)
+          gapBefore: r.gapBefore,
+          className: r.className,
+          children: r.cell(c)
         },
-        n.id
+        r.id
       ))
     }
   );
 }
-function fe({
+function ge({
   columns: e,
   rows: l,
   loading: d = !1,
   partialLoading: i = !1,
   error: s,
   emptyContent: a,
-  skeletonRows: p = 5,
-  rowHeight: c = 75,
-  size: u = "lg",
-  mobileColumnsXs: f = 3,
+  skeletonRows: m = 5,
+  rowHeight: h = 75,
+  size: g = "lg",
+  mobileColumnsXs: c = 3,
   mobileColumnsMd: M = 3,
-  className: n,
-  wrapperClassName: g,
+  className: r,
+  wrapperClassName: b,
   sort: x,
   rowTestId: T,
-  loaderTestId: r
+  loaderTestId: n
 }) {
-  const z = T ?? k.poolLine, B = r ?? k.poolLineLoading, h = _(), b = w(), m = C.useMemo(
-    () => b ? e.filter((o) => !o.hideOnMedium) : e,
-    [e, b]
-  ), D = C.useMemo(() => h ? "1fr" : m.map((o) => o.width ?? "1fr").join(" "), [h, m]), S = C.useMemo(() => {
-    const o = m.map((E, F) => {
-      const G = E.gapBefore;
-      if (!G || G === "none") return null;
-      const X = G === "md" ? "pl-10" : "pl-5";
-      return `[&:nth-child(${F + 1})]:${X}`;
-    }).filter(Boolean).join(" "), v = m[m.length - 1]?.className?.includes("pr-4") ? "last:pr-4" : "";
-    return L("px-1 py-2 first:pl-4", v, o);
-  }, [m]), y = d || !l, A = !y && l && l.length === 0, $ = i && !y;
-  return s ? null : A && a ? /* @__PURE__ */ t(I, { children: a }) : /* @__PURE__ */ N(
-    K,
+  const _ = T ?? j.poolLine, P = n ?? j.poolLineLoading, f = w(), C = ee(), p = L.useMemo(
+    () => C ? e.filter((o) => !o.hideOnMedium) : e,
+    [e, C]
+  ), A = L.useMemo(() => f ? "1fr" : p.map((o) => o.width ?? "1fr").join(" "), [f, p]), S = L.useMemo(() => {
+    const o = p.map((E, W) => {
+      const v = E.gapBefore;
+      if (!v || v === "none") return null;
+      const D = v === "md" ? "pl-10" : "pl-5";
+      return `[&:nth-child(${W + 1})]:${D}`;
+    }).filter(Boolean).join(" "), R = p[p.length - 1]?.className?.includes("pr-4") ? "last:pr-4" : "";
+    return u("px-1 py-2 first:pl-4", R, o);
+  }, [p]), y = d || !l, z = !y && l && l.length === 0, I = i && !y;
+  return s ? null : z && a ? /* @__PURE__ */ t(G, { children: a }) : /* @__PURE__ */ N(
+    q,
     {
-      cols: D,
+      cols: A,
       gap: 0,
-      size: u,
-      wrapperClassName: L("overflow-visible", g),
-      className: n,
+      size: g,
+      wrapperClassName: u(
+        "overflow-visible",
+        V,
+        b
+      ),
+      className: r,
       children: [
-        !h && /* @__PURE__ */ t(Q, { children: /* @__PURE__ */ t(ee, { columns: e, sort: x, isMedium: b }) }),
+        !f && /* @__PURE__ */ t(J, { children: /* @__PURE__ */ t(ie, { columns: e, sort: x, isMedium: C }) }),
         /* @__PURE__ */ t(
-          W,
+          U,
           {
             showGuard: y,
-            rows: p,
-            columns: h ? 1 : m.length,
-            height: `${c}px`,
-            "data-testid": B,
-            cellClassName: h ? "px-1 py-2 first:pl-4 last:pr-4" : S,
-            children: /* @__PURE__ */ N(U, { children: [
-              l?.map((o, P, v) => /* @__PURE__ */ t(
-                ie,
+            rows: m,
+            columns: f ? 1 : p.length,
+            height: `${h}px`,
+            "data-testid": P,
+            cellClassName: f ? "px-1 py-2 first:pl-4 last:pr-4" : S,
+            children: /* @__PURE__ */ N(K, { children: [
+              l?.map((o, O, R) => /* @__PURE__ */ t(
+                te,
                 {
                   row: o,
                   columns: e,
-                  last: P === v.length - 1 && !$,
-                  rowHeight: c,
-                  isSmall: h,
-                  isMedium: b,
-                  mobileColumnsXs: f,
+                  last: O === R.length - 1 && !I,
+                  rowHeight: h,
+                  isSmall: f,
+                  isMedium: C,
+                  mobileColumnsXs: c,
                   mobileColumnsMd: M,
-                  rowTestId: z
+                  rowTestId: _
                 },
                 `${o.chainId}-${o.pool.address}`
               )),
-              $ && /* @__PURE__ */ t(
-                J,
+              I && /* @__PURE__ */ t(
+                X,
                 {
-                  height: `${c}px`,
-                  columns: m.length,
+                  height: `${h}px`,
+                  columns: p.length,
                   cellClassName: S,
-                  "data-testid": B,
+                  "data-testid": P,
                   last: !0
                 }
               )
@@ -202,5 +210,5 @@ function fe({
   );
 }
 export {
-  fe as PoolTable
+  ge as PoolTable
 };