@gearbox-protocol/ui-kit 3.11.1 → 3.11.2-next.1

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

@@ -1,133 +1,157 @@
-import { jsx as i, jsxs as c } from "react/jsx-runtime";
-import { AssetsListCell as A } from "../../assets-list-cell/assets-list-cell.js";
+import { jsx as i, jsxs as m } from "react/jsx-runtime";
+import { AssetsListCell as k } from "../../assets-list-cell/assets-list-cell.js";
 import { CompoundAPY as C } from "../../compound-apy/compound-apy.js";
-import { Description as m } from "../../description/description.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";
+import { Description as p } from "../../description/description.js";
+import { NetworkIcon as N } from "../../network-icon/network-icon.js";
+import { PercentIndicator as v } from "../../percent-indicator/percent-indicator.js";
+import { PoolAPYTooltip as P } from "../../pool-apy-tooltip/pool-apy-tooltip.js";
+import { PoolIndicatorIcon as x } from "../../pool-indicator-icon/pool-indicator-icon.js";
 import { PoolPointsIndicator as D } from "../../pool-points-indicator/pool-points-indicator.js";
-import { Skeleton as u } from "../../skeleton/skeleton.js";
+import { RWA_GRADIENT_BORDER_CLASS as I } from "../../rwa-styles/index.js";
+import { Skeleton as f } from "../../skeleton/skeleton.js";
 import "react";
 import "@gearbox-protocol/sdk";
-import "clsx";
-import "tailwind-merge";
+import { cn as Y } from "../../../utils/cn.js";
 import "sonner";
-import { percentageTemplate as I, formatMoney as f } from "../../../utils/format-money.js";
-import { tokenTemplate as h } from "../../../utils/templates.js";
+import { percentageTemplate as z, formatMoney as g } from "../../../utils/format-money.js";
+import { tokenTemplate as T } from "../../../utils/templates.js";
 import "luxon";
 import "../../../utils/z-index.js";
-import { TokenSymbol as Y } from "../../token-symbol/token-symbol.js";
-import { FormattedMessageTyped as g } from "../../typed-intl/index.js";
-import { poolTableTestIds as z } from "../../../test-ids/pool-table.js";
+import { TokenSymbol as S } from "../../token-symbol/token-symbol.js";
+import { SimpleTooltip as B } from "../../tooltip/simple-tooltip.js";
+import "../../tooltip/tooltip.js";
+import { FormattedMessageTyped as w } from "../../typed-intl/index.js";
+import { poolTableTestIds as L } from "../../../test-ids/pool-table.js";
 function d(e, l, o) {
   const t = e?.header ?? /* @__PURE__ */ i(
-    g,
+    w,
     {
       messageId: e?.headerMessageId ?? l
     }
   );
-  let n;
+  let r;
   if (e?.headerTip !== null) {
-    const r = e?.headerTipMessageId ?? o;
-    n = e?.headerTip ?? (r && /* @__PURE__ */ i(g, { messageId: r }));
+    const n = e?.headerTipMessageId ?? o;
+    r = e?.headerTip ?? (n && /* @__PURE__ */ i(w, { messageId: n }));
   }
-  return { header: t, headerTip: n, mobileTitle: e?.mobileTitle ?? t };
+  return { header: t, headerTip: r, mobileTitle: e?.mobileTitle ?? t };
 }
-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,
+function M({
+  ctx: e,
+  rwaTooltip: l
+}) {
+  const { pool: o, underlyingToken: t, points: r, apy: n, isMobile: a } = e, s = a ? 20 : 24, c = /* @__PURE__ */ i(S, { token: t, size: s }), h = o.poolType === "rwa", u = r && r.length > 0 && n ? /* @__PURE__ */ i(
+    P,
     {
       totalAPY: n.totalAPY,
       baseAPY: n.baseAPY,
       extraAPY: n.extraAPY,
-      points: t,
+      points: r,
       tokensList: e.tokensList,
-      children: /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(v, { size: a, children: s }) })
+      children: /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(x, { size: s, children: c }) })
     }
-  ) : l.hasPoints ? /* @__PURE__ */ i(D, { size: a, children: s }) : s;
+  ) : o.hasPoints ? /* @__PURE__ */ i(D, { size: s, children: c }) : c;
+  return h ? /* @__PURE__ */ i(
+    B,
+    {
+      placement: "top",
+      useTitleAsTrigger: !0,
+      title: /* @__PURE__ */ i(
+        "div",
+        {
+          className: Y(
+            "relative inline-flex rounded-full p-1",
+            I
+          ),
+          children: /* @__PURE__ */ i("div", { className: "relative z-10", children: u })
+        }
+      ),
+      children: l ?? "RWA market"
+    }
+  ) : u;
 }
-function M(e) {
+function F(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 S({
+function R({
   ctx: e,
   renderDescription: l,
-  getPoolName: o
+  getPoolName: o,
+  rwaTooltip: t
 }) {
-  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(
-        P,
+  const { pool: r } = e, n = o ? o(e) : F(e), a = r.poolType === "rwa";
+  return /* @__PURE__ */ m("div", { className: "grid grid-cols-[auto_1fr] gap-x-3", children: [
+    a && /* @__PURE__ */ i("span", { className: "hidden", "data-rwa-pool-marker": "true" }),
+    /* @__PURE__ */ m("div", { className: "flex items-center gap-3 shrink-0 leading-0", children: [
+      r.network && /* @__PURE__ */ i(
+        N,
         {
-          network: t.network,
+          network: r.network,
           isTest: !1,
           size: 14,
           showTooltip: !0
         }
       ),
-      /* @__PURE__ */ i(B, { ctx: e })
+      /* @__PURE__ */ i(M, { ctx: e, rwaTooltip: t })
     ] }),
-    /* @__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__ */ m("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) })
+      l && /* @__PURE__ */ i(p, { className: "min-w-0 text-xs", children: l(e) })
     ] })
   ] });
 }
-function F({ ctx: e }) {
+function j({ ctx: e }) {
   const { pool: l, underlyingToken: o, loading: t } = e;
-  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(
+  return /* @__PURE__ */ m("div", { className: "flex flex-col items-start md:items-end", children: [
+    /* @__PURE__ */ i(f, { loading: !!t, width: 60, children: g(l.expectedLiquidityInUSD ?? 0) }),
+    /* @__PURE__ */ i(p, { children: T(
       l.expectedLiquidity,
       o
     ) })
   ] });
 }
-function L({ ctx: e }) {
+function O({ ctx: e }) {
   const { pool: l, underlyingToken: o, loading: t } = e;
-  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(
+  return /* @__PURE__ */ m("div", { className: "flex flex-col items-start md:items-end", children: [
+    /* @__PURE__ */ i(f, { loading: !!t, width: 60, children: g(l.totalBorrowedInUSD ?? 0) }),
+    /* @__PURE__ */ i(p, { children: T(
       l.totalBorrowed,
       o
     ) })
   ] });
 }
-function j({ ctx: e }) {
-  const { pool: l, loading: o, underlyingToken: t } = e, n = t?.decimals ?? 18, r = l.poolTokenSymbol != null ? {
+function _({ ctx: e }) {
+  const { pool: l, loading: o, underlyingToken: t } = e, r = t?.decimals ?? 18, n = l.poolTokenSymbol != null ? {
     title: l.poolTokenSymbol,
-    decimals: n
+    decimals: r
   } : t;
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ m(
     "div",
     {
       className: "flex flex-col items-start md:items-end",
-      "data-testid": z.poolLineCellBalance,
+      "data-testid": L.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) })
+        /* @__PURE__ */ i(f, { loading: !!o, width: 60, children: g(l.userBalanceInUSD ?? 0) }),
+        l.userBalance !== void 0 && n && /* @__PURE__ */ i(p, { children: T(l.userBalance, n) })
       ]
     }
   );
 }
-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,
+function U(e, l, o) {
+  const t = e.pool.collateralTokens, { tokensList: r, isMobile: n } = e, { mode: a = "cascade", ...s } = o ?? {};
+  return !t?.length || !r ? null : /* @__PURE__ */ i(
+    k,
     {
       maxAssets: l,
-      tokensList: n,
-      balances: t.map((p) => ({ token: p })),
-      iconSize: r ? 20 : 24,
+      tokensList: r,
+      balances: t.map((c) => ({ token: c })),
+      iconSize: n ? 20 : 24,
       options: { mode: a, ...s }
     }
   );
 }
-function ae(e) {
+function ue(e) {
   const { header: l, mobileTitle: o } = d(
     e,
     "components.poolTable.pool"
@@ -139,17 +163,18 @@ function ae(e) {
     align: "left",
     className: "pl-4",
     cell: (t) => /* @__PURE__ */ i(
-      S,
+      R,
       {
         ctx: t,
         renderDescription: e?.renderDescription,
-        getPoolName: e?.getPoolName
+        getPoolName: e?.getPoolName,
+        rwaTooltip: e?.rwaTooltip
       }
     ),
     mobileTitle: o
   };
 }
-function de(e) {
+function pe(e) {
   const { header: l, mobileTitle: o } = d(
     e,
     "components.poolTable.supply"
@@ -161,11 +186,11 @@ function de(e) {
     align: "right",
     hideOnMedium: e?.hideOnMedium,
     sort: e?.sortField !== void 0 ? { field: e.sortField, defaultDirection: "desc" } : { field: "supply", defaultDirection: "desc" },
-    cell: (t) => /* @__PURE__ */ i(F, { ctx: t }),
+    cell: (t) => /* @__PURE__ */ i(j, { ctx: t }),
     mobileTitle: o
   };
 }
-function se(e) {
+function fe(e) {
   const { header: l, headerTip: o, mobileTitle: t } = d(
     e,
     "components.poolTable.supplyApy",
@@ -178,24 +203,24 @@ function se(e) {
     width: e?.width ?? "1.25fr",
     align: "right",
     sort: e?.sortField !== void 0 ? { field: e.sortField, defaultDirection: "desc" } : { field: "apy", defaultDirection: "desc" },
-    cell: (n) => {
-      const { apy: r, loading: a, points: s, tokensList: p } = n, {
-        totalAPY: T = 0,
-        baseAPY: b = [],
-        extraAPY: w = [],
+    cell: (r) => {
+      const { apy: n, loading: a, points: s, tokensList: c } = r, {
+        totalAPY: h = 0,
+        baseAPY: u = [],
+        extraAPY: b = [],
         externalAPY: y,
-        apy7DAgo: k
-      } = r ?? {};
-      return /* @__PURE__ */ i(u, { width: 60, loading: !!a, children: /* @__PURE__ */ i(
+        apy7DAgo: A
+      } = n ?? {};
+      return /* @__PURE__ */ i(f, { width: 60, loading: !!a, children: /* @__PURE__ */ i(
         C,
         {
-          totalAPY: T,
+          totalAPY: h,
           totalAPYLoading: !!a,
-          baseAPY: b,
-          extraAPY: w,
+          baseAPY: u,
+          extraAPY: b,
           points: s,
-          apy7DAgo: k,
-          tokensList: p,
+          apy7DAgo: A,
+          tokensList: c,
           externalAPY: y
         }
       ) });
@@ -203,7 +228,7 @@ function se(e) {
     mobileTitle: t
   };
 }
-function ce(e) {
+function he(e) {
   const { header: l, mobileTitle: o } = d(
     e,
     "components.poolTable.borrowed"
@@ -213,11 +238,11 @@ function ce(e) {
     header: l,
     width: e?.width ?? "1.15fr",
     align: "right",
-    cell: (t) => /* @__PURE__ */ i(L, { ctx: t }),
+    cell: (t) => /* @__PURE__ */ i(O, { ctx: t }),
     mobileTitle: o
   };
 }
-function me(e) {
+function ge(e) {
   const { header: l, headerTip: o, mobileTitle: t } = d(
     e,
     "components.poolTable.borrowApy"
@@ -228,14 +253,14 @@ function me(e) {
     headerTip: o,
     width: e?.width ?? "150px",
     align: "right",
-    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) });
+    cell: (r) => {
+      const n = r.pool.borrowAPY ?? e?.getBorrowRate?.(r.pool) ?? 0;
+      return /* @__PURE__ */ i("div", { className: "flex justify-start md:justify-end", children: z(n) });
     },
     mobileTitle: t
   };
 }
-function ue(e) {
+function Te(e) {
   const { header: l, mobileTitle: o } = d(
     e,
     "components.poolTable.utilization"
@@ -248,14 +273,14 @@ function ue(e) {
     className: "pr-4",
     sort: e?.sortField !== void 0 ? { field: e.sortField, defaultDirection: "desc" } : { field: "utilization", defaultDirection: "desc" },
     cell: (t) => {
-      const n = t.pool.utilization ?? 0;
-      return /* @__PURE__ */ i("div", { className: "flex justify-start md:justify-end", children: /* @__PURE__ */ i(x, { percent: n }) });
+      const r = t.pool.utilization ?? 0;
+      return /* @__PURE__ */ i("div", { className: "flex justify-start md:justify-end", children: /* @__PURE__ */ i(v, { percent: r }) });
     },
     mobileTitle: o
   };
 }
-function pe(e) {
-  const l = e?.maxAssets ?? 5, o = (r) => O(r, l, e?.options), { header: t, mobileTitle: n } = d(
+function we(e) {
+  const l = e?.maxAssets ?? 5, o = (n) => U(n, l, e?.options), { header: t, mobileTitle: r } = d(
     e,
     "components.poolTable.collateral"
   );
@@ -267,10 +292,10 @@ function pe(e) {
     gapBefore: e?.gapBefore ?? "md",
     cell: e?.cell ?? o,
     mobileCell: e?.mobileCell ?? e?.cell ?? o,
-    mobileTitle: n
+    mobileTitle: r
   };
 }
-function fe(e) {
+function be(e) {
   const { header: l, mobileTitle: o } = d(
     e,
     "components.poolTable.balance"
@@ -283,22 +308,22 @@ function fe(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(j, { ctx: t })),
+    cell: e?.cell ?? ((t) => /* @__PURE__ */ i(_, { ctx: t })),
     mobileTitle: o
   };
 }
-function he(e) {
+function ye(e) {
   return e;
 }
 export {
-  fe as balanceColumn,
-  me as borrowApyColumn,
-  ce as borrowedColumn,
-  pe as collateralColumn,
-  he as customColumn,
-  M as defaultPoolName,
-  ae as poolColumn,
-  se as supplyApyColumn,
-  de as supplyColumn,
-  ue as utilizationColumn
+  be as balanceColumn,
+  ge as borrowApyColumn,
+  he as borrowedColumn,
+  we as collateralColumn,
+  ye as customColumn,
+  F as defaultPoolName,
+  ue as poolColumn,
+  fe as supplyApyColumn,
+  pe as supplyColumn,
+  Te as utilizationColumn
 };