@gearbox-protocol/ui-kit 3.8.1 → 3.9.0

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

@@ -1,8 +1,8 @@
-import { jsx as i, jsxs as s } from "react/jsx-runtime";
+import { jsx as i, jsxs as c } from "react/jsx-runtime";
 import { AssetsListCell as A } from "../../assets-list-cell/assets-list-cell.js";
-import { CompoundAPY as P } from "../../compound-apy/compound-apy.js";
+import { CompoundAPY as C } from "../../compound-apy/compound-apy.js";
 import { Description as m } from "../../description/description.js";
-import { NetworkIcon as C } from "../../network-icon/network-icon.js";
+import { NetworkIcon as P } from "../../network-icon/network-icon.js";
 import { PercentIndicator as x } from "../../percent-indicator/percent-indicator.js";
 import { PoolAPYTooltip as N } from "../../pool-apy-tooltip/pool-apy-tooltip.js";
 import { PoolIndicatorIcon as v } from "../../pool-indicator-icon/pool-indicator-icon.js";
@@ -13,54 +13,55 @@ import "@gearbox-protocol/sdk";
 import "clsx";
 import "tailwind-merge";
 import "sonner";
-import { percentageTemplate as I, formatMoney as p } from "../../../utils/format-money.js";
-import { tokenTemplate as f } from "../../../utils/templates.js";
+import { percentageTemplate as I, formatMoney as f } from "../../../utils/format-money.js";
+import { tokenTemplate as h } from "../../../utils/templates.js";
 import "luxon";
 import "../../../utils/z-index.js";
 import { TokenSymbol as Y } from "../../token-symbol/token-symbol.js";
-import { FormattedMessageTyped as h } from "../../typed-intl/index.js";
-function a(e, l, o) {
+import { FormattedMessageTyped as g } from "../../typed-intl/index.js";
+import { poolTableTestIds as z } from "../../../test-ids/pool-table.js";
+function d(e, l, o) {
   const t = e?.header ?? /* @__PURE__ */ i(
-    h,
+    g,
     {
       messageId: e?.headerMessageId ?? l
     }
   );
-  let r;
+  let n;
   if (e?.headerTip !== null) {
-    const n = e?.headerTipMessageId ?? o;
-    r = e?.headerTip ?? (n && /* @__PURE__ */ i(h, { messageId: n }));
+    const r = e?.headerTipMessageId ?? o;
+    n = e?.headerTip ?? (r && /* @__PURE__ */ i(g, { messageId: r }));
   }
-  return { header: t, headerTip: r, mobileTitle: e?.mobileTitle ?? t };
+  return { header: t, headerTip: n, mobileTitle: e?.mobileTitle ?? t };
 }
-function z({ ctx: e }) {
-  const { pool: l, underlyingToken: o, points: t, apy: r, isMobile: n } = e, d = n ? 20 : 24, c = /* @__PURE__ */ i(Y, { token: o, size: d });
-  return t && t.length > 0 && r ? /* @__PURE__ */ i(
+function B({ ctx: e }) {
+  const { pool: l, underlyingToken: o, points: t, apy: n, isMobile: r } = e, a = r ? 20 : 24, s = /* @__PURE__ */ i(Y, { token: o, size: a });
+  return t && t.length > 0 && n ? /* @__PURE__ */ i(
     N,
     {
-      totalAPY: r.totalAPY,
-      baseAPY: r.baseAPY,
-      extraAPY: r.extraAPY,
+      totalAPY: n.totalAPY,
+      baseAPY: n.baseAPY,
+      extraAPY: n.extraAPY,
       points: t,
       tokensList: e.tokensList,
-      children: /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(v, { size: d, children: c }) })
+      children: /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(v, { size: a, children: s }) })
     }
-  ) : l.hasPoints ? /* @__PURE__ */ i(D, { size: d, children: c }) : c;
+  ) : l.hasPoints ? /* @__PURE__ */ i(D, { size: a, children: s }) : s;
 }
-function B(e) {
+function M(e) {
   const l = e.underlyingToken?.title ?? e.underlyingToken?.symbol ?? "", o = e.pool.version;
   return o && o >= 300 && o < 310 ? `${l} v${Math.floor(o / 100)}` : l;
 }
-function M({
+function S({
   ctx: e,
   renderDescription: l,
   getPoolName: o
 }) {
-  const { pool: t } = e, r = o ? o(e) : B(e);
-  return /* @__PURE__ */ s("div", { className: "grid grid-cols-[auto_1fr] gap-x-3", children: [
-    /* @__PURE__ */ s("div", { className: "flex items-center gap-3 shrink-0 leading-0", children: [
+  const { pool: t } = e, n = o ? o(e) : M(e);
+  return /* @__PURE__ */ c("div", { className: "grid grid-cols-[auto_1fr] gap-x-3", children: [
+    /* @__PURE__ */ c("div", { className: "flex items-center gap-3 shrink-0 leading-0", children: [
       t.network && /* @__PURE__ */ i(
-        C,
+        P,
         {
           network: t.network,
           isTest: !1,
@@ -68,59 +69,66 @@ function M({
           showTooltip: !0
         }
       ),
-      /* @__PURE__ */ i(z, { ctx: e })
+      /* @__PURE__ */ i(B, { ctx: e })
     ] }),
-    /* @__PURE__ */ s("div", { className: "flex md:flex-col min-w-0 overflow-hidden items-center md:items-start gap-2 md:gap-0", children: [
-      /* @__PURE__ */ i("span", { className: "truncate max-w-full", children: r }),
+    /* @__PURE__ */ c("div", { className: "flex md:flex-col min-w-0 overflow-hidden items-center md:items-start gap-2 md:gap-0", children: [
+      /* @__PURE__ */ i("span", { className: "truncate max-w-full", children: n }),
       l && /* @__PURE__ */ i(m, { className: "min-w-0 text-xs", children: l(e) })
     ] })
   ] });
 }
-function S({ ctx: e }) {
+function F({ ctx: e }) {
   const { pool: l, underlyingToken: o, loading: t } = e;
-  return /* @__PURE__ */ s("div", { className: "flex flex-col items-start md:items-end", children: [
-    /* @__PURE__ */ i(u, { loading: !!t, width: 60, children: p(l.expectedLiquidityInUSD ?? 0) }),
-    /* @__PURE__ */ i(m, { children: f(
+  return /* @__PURE__ */ c("div", { className: "flex flex-col items-start md:items-end", children: [
+    /* @__PURE__ */ i(u, { loading: !!t, width: 60, children: f(l.expectedLiquidityInUSD ?? 0) }),
+    /* @__PURE__ */ i(m, { children: h(
       l.expectedLiquidity,
       o
     ) })
   ] });
 }
-function F({ ctx: e }) {
+function L({ ctx: e }) {
   const { pool: l, underlyingToken: o, loading: t } = e;
-  return /* @__PURE__ */ s("div", { className: "flex flex-col items-start md:items-end", children: [
-    /* @__PURE__ */ i(u, { loading: !!t, width: 60, children: p(l.totalBorrowedInUSD ?? 0) }),
-    /* @__PURE__ */ i(m, { children: f(
+  return /* @__PURE__ */ c("div", { className: "flex flex-col items-start md:items-end", children: [
+    /* @__PURE__ */ i(u, { loading: !!t, width: 60, children: f(l.totalBorrowedInUSD ?? 0) }),
+    /* @__PURE__ */ i(m, { children: h(
       l.totalBorrowed,
       o
     ) })
   ] });
 }
-function L({ ctx: e }) {
-  const { pool: l, loading: o, underlyingToken: t } = e, r = t?.decimals ?? 18, n = l.poolTokenSymbol != null ? {
+function j({ ctx: e }) {
+  const { pool: l, loading: o, underlyingToken: t } = e, n = t?.decimals ?? 18, r = l.poolTokenSymbol != null ? {
     title: l.poolTokenSymbol,
-    decimals: r
+    decimals: n
   } : t;
-  return /* @__PURE__ */ s("div", { className: "flex flex-col items-start md:items-end", children: [
-    /* @__PURE__ */ i(u, { loading: !!o, width: 60, children: p(l.userBalanceInUSD ?? 0) }),
-    l.userBalance !== void 0 && n && /* @__PURE__ */ i(m, { children: f(l.userBalance, n) })
-  ] });
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: "flex flex-col items-start md:items-end",
+      "data-testid": z.poolLineCellBalance,
+      children: [
+        /* @__PURE__ */ i(u, { loading: !!o, width: 60, children: f(l.userBalanceInUSD ?? 0) }),
+        l.userBalance !== void 0 && r && /* @__PURE__ */ i(m, { children: h(l.userBalance, r) })
+      ]
+    }
+  );
 }
-function j(e, l) {
-  const o = e.pool.collateralTokens, { tokensList: t, isMobile: r } = e;
-  return !o?.length || !t ? null : /* @__PURE__ */ i(
+function O(e, l, o) {
+  const t = e.pool.collateralTokens, { tokensList: n, isMobile: r } = e, { mode: a = "cascade", ...s } = o ?? {};
+  return !t?.length || !n ? null : /* @__PURE__ */ i(
     A,
     {
       maxAssets: l,
-      tokensList: t,
-      balances: o.map((n) => ({ token: n })),
+      tokensList: n,
+      balances: t.map((p) => ({ token: p })),
       iconSize: r ? 20 : 24,
-      options: { mode: "cascade" }
+      options: { mode: a, ...s }
     }
   );
 }
-function re(e) {
-  const { header: l, mobileTitle: o } = a(
+function ae(e) {
+  const { header: l, mobileTitle: o } = d(
     e,
     "components.poolTable.pool"
   );
@@ -131,7 +139,7 @@ function re(e) {
     align: "left",
     className: "pl-4",
     cell: (t) => /* @__PURE__ */ i(
-      M,
+      S,
       {
         ctx: t,
         renderDescription: e?.renderDescription,
@@ -141,8 +149,8 @@ function re(e) {
     mobileTitle: o
   };
 }
-function ne(e) {
-  const { header: l, mobileTitle: o } = a(
+function de(e) {
+  const { header: l, mobileTitle: o } = d(
     e,
     "components.poolTable.supply"
   );
@@ -153,12 +161,12 @@ function ne(e) {
     align: "right",
     hideOnMedium: e?.hideOnMedium,
     sort: e?.sortField !== void 0 ? { field: e.sortField, defaultDirection: "desc" } : { field: "supply", defaultDirection: "desc" },
-    cell: (t) => /* @__PURE__ */ i(S, { ctx: t }),
+    cell: (t) => /* @__PURE__ */ i(F, { ctx: t }),
     mobileTitle: o
   };
 }
-function ae(e) {
-  const { header: l, headerTip: o, mobileTitle: t } = a(
+function se(e) {
+  const { header: l, headerTip: o, mobileTitle: t } = d(
     e,
     "components.poolTable.supplyApy",
     "components.poolTable.supplyApy.tip"
@@ -170,24 +178,24 @@ function ae(e) {
     width: e?.width ?? "1.25fr",
     align: "right",
     sort: e?.sortField !== void 0 ? { field: e.sortField, defaultDirection: "desc" } : { field: "apy", defaultDirection: "desc" },
-    cell: (r) => {
-      const { apy: n, loading: d, points: c, tokensList: g } = r, {
-        totalAPY: b = 0,
-        baseAPY: T = [],
+    cell: (n) => {
+      const { apy: r, loading: a, points: s, tokensList: p } = n, {
+        totalAPY: T = 0,
+        baseAPY: b = [],
         extraAPY: w = [],
         externalAPY: y,
         apy7DAgo: k
-      } = n ?? {};
-      return /* @__PURE__ */ i(u, { width: 60, loading: !!d, children: /* @__PURE__ */ i(
-        P,
+      } = r ?? {};
+      return /* @__PURE__ */ i(u, { width: 60, loading: !!a, children: /* @__PURE__ */ i(
+        C,
         {
-          totalAPY: b,
-          totalAPYLoading: !!d,
-          baseAPY: T,
+          totalAPY: T,
+          totalAPYLoading: !!a,
+          baseAPY: b,
           extraAPY: w,
-          points: c,
+          points: s,
           apy7DAgo: k,
-          tokensList: g,
+          tokensList: p,
           externalAPY: y
         }
       ) });
@@ -195,8 +203,8 @@ function ae(e) {
     mobileTitle: t
   };
 }
-function de(e) {
-  const { header: l, mobileTitle: o } = a(
+function ce(e) {
+  const { header: l, mobileTitle: o } = d(
     e,
     "components.poolTable.borrowed"
   );
@@ -205,12 +213,12 @@ function de(e) {
     header: l,
     width: e?.width ?? "1.15fr",
     align: "right",
-    cell: (t) => /* @__PURE__ */ i(F, { ctx: t }),
+    cell: (t) => /* @__PURE__ */ i(L, { ctx: t }),
     mobileTitle: o
   };
 }
-function se(e) {
-  const { header: l, headerTip: o, mobileTitle: t } = a(
+function me(e) {
+  const { header: l, headerTip: o, mobileTitle: t } = d(
     e,
     "components.poolTable.borrowApy"
   );
@@ -220,15 +228,15 @@ function se(e) {
     headerTip: o,
     width: e?.width ?? "150px",
     align: "right",
-    cell: (r) => {
-      const n = r.pool.borrowAPY ?? e?.getBorrowRate?.(r.pool) ?? 0;
-      return /* @__PURE__ */ i("div", { className: "flex justify-start md:justify-end", children: I(n) });
+    cell: (n) => {
+      const r = n.pool.borrowAPY ?? e?.getBorrowRate?.(n.pool) ?? 0;
+      return /* @__PURE__ */ i("div", { className: "flex justify-start md:justify-end", children: I(r) });
     },
     mobileTitle: t
   };
 }
-function ce(e) {
-  const { header: l, mobileTitle: o } = a(
+function ue(e) {
+  const { header: l, mobileTitle: o } = d(
     e,
     "components.poolTable.utilization"
   );
@@ -240,14 +248,14 @@ function ce(e) {
     className: "pr-4",
     sort: e?.sortField !== void 0 ? { field: e.sortField, defaultDirection: "desc" } : { field: "utilization", defaultDirection: "desc" },
     cell: (t) => {
-      const r = t.pool.utilization ?? 0;
-      return /* @__PURE__ */ i("div", { className: "flex justify-start md:justify-end", children: /* @__PURE__ */ i(x, { percent: r }) });
+      const n = t.pool.utilization ?? 0;
+      return /* @__PURE__ */ i("div", { className: "flex justify-start md:justify-end", children: /* @__PURE__ */ i(x, { percent: n }) });
     },
     mobileTitle: o
   };
 }
-function me(e) {
-  const l = e?.maxAssets ?? 5, o = (n) => j(n, l), { header: t, mobileTitle: r } = a(
+function pe(e) {
+  const l = e?.maxAssets ?? 5, o = (r) => O(r, l, e?.options), { header: t, mobileTitle: n } = d(
     e,
     "components.poolTable.collateral"
   );
@@ -259,11 +267,11 @@ function me(e) {
     gapBefore: e?.gapBefore ?? "md",
     cell: e?.cell ?? o,
     mobileCell: e?.mobileCell ?? e?.cell ?? o,
-    mobileTitle: r
+    mobileTitle: n
   };
 }
-function ue(e) {
-  const { header: l, mobileTitle: o } = a(
+function fe(e) {
+  const { header: l, mobileTitle: o } = d(
     e,
     "components.poolTable.balance"
   );
@@ -275,21 +283,21 @@ function ue(e) {
     className: e?.className ?? "pr-4",
     headerClassName: e?.headerClassName ?? "pr-4",
     sort: e?.sortField !== void 0 ? { field: e.sortField, defaultDirection: "desc" } : { field: "balance", defaultDirection: "desc" },
-    cell: e?.cell ?? ((t) => /* @__PURE__ */ i(L, { ctx: t })),
+    cell: e?.cell ?? ((t) => /* @__PURE__ */ i(j, { ctx: t })),
     mobileTitle: o
   };
 }
-function pe(e) {
+function he(e) {
   return e;
 }
 export {
-  ue as balanceColumn,
-  se as borrowApyColumn,
-  de as borrowedColumn,
-  me as collateralColumn,
-  pe as customColumn,
-  re as poolColumn,
-  ae as supplyApyColumn,
-  ne as supplyColumn,
-  ce as utilizationColumn
+  fe as balanceColumn,
+  me as borrowApyColumn,
+  ce as borrowedColumn,
+  pe as collateralColumn,
+  he as customColumn,
+  ae as poolColumn,
+  se as supplyApyColumn,
+  de as supplyColumn,
+  ue as utilizationColumn
 };