@gearbox-protocol/ui-kit 3.6.0-next.1 → 3.6.0-next.3

package/dist/esm/components/pool-apy-tooltip/pool-apy-tooltip.js

@@ -1,5 +1,5 @@
-import { jsx as e, jsxs as o, Fragment as b } from "react/jsx-runtime";
-import { faPlus as N } from "@fortawesome/free-solid-svg-icons";
+import { jsx as e, jsxs as n, Fragment as b } from "react/jsx-runtime";
+import { faPlus as P } from "@fortawesome/free-solid-svg-icons";
 import { IconLighting as T } from "@gearbox-protocol/static";
 import { getRewardTokenSymbol as k } from "../compound-apy/compound-apy.js";
 import { FaIcon as S } from "../icons/fa-icon.js";
@@ -7,22 +7,22 @@ import { PointsIcon as _ } from "../points-icon/points-icon.js";
 import { Skeleton as z } from "../skeleton/skeleton.js";
 import "react";
 import "@gearbox-protocol/sdk";
-import { cn as y } from "../../utils/cn.js";
+import { cn as u } from "../../utils/cn.js";
 import "sonner";
 import { percentTemplate as r } from "../../utils/format-money.js";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 import { TokenIcon as C } from "../token-icon/token-icon.js";
-import { SimpleTooltip as Y } from "../tooltip/simple-tooltip.js";
+import { SimpleTooltip as L } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
-import { FormattedMessageTyped as n } from "../typed-intl/index.js";
-import { VerticalIndicator as l } from "../vertical-indicator/vertical-indicator.js";
-import { VerticalList as u } from "../vertical-list/vertical-list.js";
-const A = {
+import { FormattedMessageTyped as o } from "../typed-intl/index.js";
+import { VerticalIndicator as d } from "../vertical-indicator/vertical-indicator.js";
+import { VerticalList as y } from "../vertical-list/vertical-list.js";
+const $ = {
   supplyAPY: "components.apyParts.supplyAPY",
   tokenYield: "components.apyParts.tokenYield"
-}, L = {
+}, O = {
   supplyAPY: "components.apyParts.supplyAPY.tip",
   tokenYield: "components.apyParts.tokenYield.tip"
 }, v = {
@@ -30,29 +30,29 @@ const A = {
   "cross-chain-deposit": "components.apyParts.points.condition.crossDeposit",
   holding: void 0
 };
-function $({ children: d }) {
-  return /* @__PURE__ */ e("div", { className: "w-[110px] grid grid-cols-2 items-end text-end", children: d });
+function Y({ children: m }) {
+  return /* @__PURE__ */ e("div", { className: "w-[110px] grid grid-cols-2 items-end text-end", children: m });
 }
-function ne({
-  children: d,
+function oe({
+  children: m,
   totalAPY: f,
   baseAPY: c,
   extraAPY: h,
-  points: s,
+  points: i,
   apy7DAgo: a,
-  externalAPY: m,
+  externalAPY: s,
   tokensList: w,
   className: g
 }) {
-  if (!(f !== void 0 || c && c.length > 0 || h && h.length > 0 || s && s.length > 0))
-    return /* @__PURE__ */ e("span", { className: g, children: d });
-  const I = !a || !!a.totalAPYLoading || !!a.loading7DAgo, x = !!a, p = (t, i) => x ? /* @__PURE__ */ o($, { children: [
+  if (!(f !== void 0 || c && c.length > 0 || h && h.length > 0 || i && i.length > 0))
+    return /* @__PURE__ */ e("span", { className: g, children: m });
+  const I = !a || !!a.totalAPYLoading || !!a.loading7DAgo, x = !!a, p = (t, l) => x ? /* @__PURE__ */ n(Y, { children: [
     /* @__PURE__ */ e("span", { children: t }),
-    /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(z, { width: 30, height: 14, loading: I, children: i }) })
-  ] }) : t, P = /* @__PURE__ */ o(
+    /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(z, { width: 30, height: 14, loading: I, children: l }) })
+  ] }) : t, N = /* @__PURE__ */ n(
     "div",
     {
-      className: y(
+      className: u(
         "w-[370px] max-w-[calc(100vw-32px)] p-6",
         "bg-popover",
         "border border-border",
@@ -61,13 +61,13 @@ function ne({
         "text-left font-normal"
       ),
       children: [
-        /* @__PURE__ */ o(u, { children: [
+        /* @__PURE__ */ n(y, { children: [
           x && /* @__PURE__ */ e(
-            l,
+            d,
             {
               size: "sm",
               label: /* @__PURE__ */ e("span", { className: "uppercase text-muted-foreground text-xs", children: /* @__PURE__ */ e(
-                n,
+                o,
                 {
                   messageId: "components.apyParts.title"
                 }
@@ -75,33 +75,33 @@ function ne({
               value: /* @__PURE__ */ e("span", { className: "text-muted-foreground text-xs", children: p("1D", "7D") })
             }
           ),
-          c?.map((t, i) => /* @__PURE__ */ e(
-            l,
+          c?.map((t, l) => /* @__PURE__ */ e(
+            d,
             {
               size: "sm",
-              label: /* @__PURE__ */ e(n, { messageId: A[t.type] }),
+              label: /* @__PURE__ */ e(o, { messageId: $[t.type] }),
               description: /* @__PURE__ */ e(
-                n,
+                o,
                 {
-                  messageId: L[t.type]
+                  messageId: O[t.type]
                 }
               ),
               value: p(
                 r(t.apy),
-                r(a?.baseAPY?.[i]?.apy || 0)
+                r(a?.baseAPY?.[l]?.apy || 0)
               )
             },
             `base-${t.type}-${t.apy}`
           )),
           h?.map((t) => {
-            const i = w?.[t.rewardToken];
+            const l = w?.[t.rewardToken];
             return /* @__PURE__ */ e(
-              l,
+              d,
               {
                 size: "sm",
-                label: /* @__PURE__ */ o("span", { className: "inline-flex items-center", children: [
+                label: /* @__PURE__ */ n("span", { className: "inline-flex items-center", children: [
                   /* @__PURE__ */ e(
-                    n,
+                    o,
                     {
                       messageId: "components.apyParts.extraAPY",
                       values: { symbol: t.rewardTokenSymbol }
@@ -110,13 +110,13 @@ function ne({
                   /* @__PURE__ */ e("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ e(
                     C,
                     {
-                      symbol: k(i, t.rewardTokenSymbol),
+                      symbol: k(l, t.rewardTokenSymbol),
                       size: 14
                     }
                   ) })
                 ] }),
                 description: /* @__PURE__ */ e(
-                  n,
+                  o,
                   {
                     messageId: "components.apyParts.extraAPY.tip"
                   }
@@ -131,12 +131,12 @@ function ne({
           })
         ] }),
         /* @__PURE__ */ e("div", { className: "my-5 border-t border-border" }),
-        /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(
-          l,
+        /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(
+          d,
           {
             size: "sm",
             label: /* @__PURE__ */ e("span", { className: "font-bold", children: /* @__PURE__ */ e(
-              n,
+              o,
               {
                 messageId: "components.apyParts.totalAPY"
               }
@@ -147,55 +147,61 @@ function ne({
             )
           }
         ) }),
-        m && /* @__PURE__ */ e(
+        s && /* @__PURE__ */ e(
           "div",
           {
-            className: y(
+            className: u(
               "mt-5 px-8 pt-[18px] pb-4",
               "rounded-[10px]",
               "text-[13px] leading-[120%] text-center",
               "border border-dashed border-gray-40"
             ),
-            children: /* @__PURE__ */ e(
-              n,
-              {
-                messageId: m.tooltip,
-                values: {
-                  name: m.name,
-                  value: /* @__PURE__ */ o(b, { children: [
-                    /* @__PURE__ */ e("span", { className: "text-gray-90 mr-1.5", children: /* @__PURE__ */ e(T, { size: 14, style: { verticalAlign: "top" } }) }),
-                    /* @__PURE__ */ o("span", { className: "font-bold", children: [
-                      "+",
-                      r(m.apy)
-                    ] })
-                  ] })
+            children: (() => {
+              const t = /* @__PURE__ */ n(b, { children: [
+                /* @__PURE__ */ e("span", { className: "text-gray-90 mr-1.5", children: /* @__PURE__ */ e(T, { size: 14, style: { verticalAlign: "top" } }) }),
+                /* @__PURE__ */ n("span", { className: "font-bold", children: [
+                  "+",
+                  r(s.apy)
+                ] })
+              ] });
+              return s.tooltip ? /* @__PURE__ */ e(
+                o,
+                {
+                  messageId: s.tooltip,
+                  values: {
+                    name: s.name,
+                    value: t
+                  }
                 }
-              }
-            )
+              ) : /* @__PURE__ */ n("span", { className: "inline-flex flex-wrap items-center justify-center gap-x-1", children: [
+                /* @__PURE__ */ e("span", { children: s.name }),
+                t
+              ] });
+            })()
           }
         ),
-        s && s.length > 0 && /* @__PURE__ */ o(b, { children: [
+        i && i.length > 0 && /* @__PURE__ */ n(b, { children: [
           /* @__PURE__ */ e("div", { className: "relative my-2.5 mx-6 border-t-2 border-border", children: /* @__PURE__ */ e(
             "div",
             {
-              className: y(
+              className: u(
                 "absolute -top-[10px] left-0",
                 "w-5 h-5",
                 "flex items-center justify-center",
                 "rounded-full",
                 "bg-gray-20"
               ),
-              children: /* @__PURE__ */ e(S, { icon: N, className: "size-2.5 text-white" })
+              children: /* @__PURE__ */ e(S, { icon: P, className: "size-2.5 text-white" })
             }
           ) }),
           /* @__PURE__ */ e("div", { className: "h-6" }),
-          /* @__PURE__ */ e(u, { children: s.map((t) => /* @__PURE__ */ e(
-            l,
+          /* @__PURE__ */ e(y, { children: i.map((t) => /* @__PURE__ */ e(
+            d,
             {
               size: "sm",
-              label: /* @__PURE__ */ o("span", { className: "inline-flex items-center", children: [
+              label: /* @__PURE__ */ n("span", { className: "inline-flex items-center", children: [
                 /* @__PURE__ */ e(
-                  n,
+                  o,
                   {
                     messageId: "components.apyParts.points",
                     values: { symbol: t.name }
@@ -212,13 +218,13 @@ function ne({
                   }
                 ) })
               ] }),
-              description: /* @__PURE__ */ o("div", { children: [
+              description: /* @__PURE__ */ n("div", { children: [
                 /* @__PURE__ */ e("div", { children: `Per ${[
                   ...t.reward?.duration ? [t.reward.duration] : [],
                   ...t.tokenTitle ? [`1 ${t.tokenTitle}`] : []
                 ].join(" per ")}` }),
                 t.reward?.condition && v[t.reward.condition] && /* @__PURE__ */ e("span", { className: "text-warning", children: /* @__PURE__ */ e(
-                  n,
+                  o,
                   {
                     messageId: v[t.reward.condition]
                   }
@@ -233,19 +239,19 @@ function ne({
     }
   );
   return /* @__PURE__ */ e(
-    Y,
+    L,
     {
       placement: "bottom",
       triangle: !1,
       type: "modal-tooltip",
       minWidth: "100%",
       maxWidth: "100%",
-      title: /* @__PURE__ */ e("span", { className: g, children: d }),
+      title: /* @__PURE__ */ e("span", { className: g, children: m }),
       triggerClassName: g,
-      children: P
+      children: N
     }
   );
 }
 export {
-  ne as PoolAPYTooltip
+  oe as PoolAPYTooltip
 };

package/dist/esm/components/pool-assets-table/index.js

@@ -0,0 +1,8 @@
+import { PoolAssetsTable as s } from "./pool-assets-table.js";
+import { PoolAssetsTableHead as r } from "./pool-assets-table-head.js";
+import { PoolAssetsTableRow as a } from "./pool-assets-table-row.js";
+export {
+  s as PoolAssetsTable,
+  r as PoolAssetsTableHead,
+  a as PoolAssetsTableRow
+};

package/dist/esm/components/{PoolsAssetsTable/TableHead.js → pool-assets-table/pool-assets-table-head.js}

@@ -6,7 +6,9 @@ import "@gearbox-protocol/sdk";
 import { HeadCell as a } from "../head-cell/head-cell.js";
 import { GridTableRow as g, GridTableHead as i } from "../table/grid-table.js";
 import { useIntlTyped as f, FormattedMessageTyped as n } from "../typed-intl/index.js";
-function j({ sort: l }) {
+function j({
+  sort: l
+}) {
   const s = f(), { state: t, set: o } = l, m = () => o("usage", "desc"), d = () => o("rate", "desc"), p = () => o("name", "desc");
   return /* @__PURE__ */ c(g, { noHover: !0, height: "35px", children: [
     /* @__PURE__ */ e(i, { justify: "start", size: "sm", className: "pl-4", children: /* @__PURE__ */ e(
@@ -48,5 +50,5 @@ function j({ sort: l }) {
   ] });
 }
 export {
-  j as TableHead
+  j as PoolAssetsTableHead
 };

package/dist/esm/components/{PoolsAssetsTable/PoolAssetsLine.js → pool-assets-table/pool-assets-table-row.js}

@@ -9,9 +9,9 @@ import "sonner";
 import { percentageTemplate as A } from "../../utils/format-money.js";
 import "luxon";
 import "../../utils/z-index.js";
-import { Description as k } from "../description/description.js";
+import { Description as w } from "../description/description.js";
 import { ShortString as c } from "../short-string/short-string.js";
-import { GridTableRow as w, GridTableCell as s } from "../table/grid-table.js";
+import { GridTableRow as k, GridTableCell as s } from "../table/grid-table.js";
 import { TableLineSm as y, TableCellSm as p } from "../table/table-sm.js";
 import { TokenSymbol as z } from "../token-symbol/token-symbol.js";
 import { TokenTemplate as d } from "../token-template/token-template.js";
@@ -27,7 +27,7 @@ function O({
     /* @__PURE__ */ e(z, { token: l, size: 32 }),
     /* @__PURE__ */ t("span", { className: "ml-1.5 md:ml-2.5 text-left", children: [
       /* @__PURE__ */ e(c, { maxLength: b, children: l?.title }),
-      /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(c, { maxLength: 20, children: h }) })
+      /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(c, { maxLength: 20, children: h }) })
     ] })
   ] }), a = () => A(T), n = () => /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
     o,
@@ -60,7 +60,7 @@ function O({
     }
   ) });
   return /* @__PURE__ */ e(
-    w,
+    k,
     {
       last: u,
       height: "auto",
@@ -103,5 +103,5 @@ function O({
   );
 }
 export {
-  O as PoolAssetsLine
+  O as PoolAssetsTableRow
 };

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

@@ -0,0 +1,43 @@
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import "react";
+import "@gearbox-protocol/sdk/common-utils";
+import "@gearbox-protocol/sdk";
+import { useIsMobile as n } from "../../hooks/use-media-query.js";
+import { GridTable as d, GridTableHeader as f, GridTableBody as b } from "../table/grid-table.js";
+import { PoolAssetsTableHead as c } from "./pool-assets-table-head.js";
+import { PoolAssetsTableRow as T } from "./pool-assets-table-row.js";
+function P({
+  list: e,
+  poolName: l,
+  sort: t,
+  tokensList: i,
+  underlyingToken: a
+}) {
+  const s = n();
+  return /* @__PURE__ */ p(
+    d,
+    {
+      cols: s ? "1fr" : "1fr 180px 1fr",
+      gap: 0,
+      size: "lg",
+      wrapperClassName: "overflow-visible",
+      children: [
+        !s && /* @__PURE__ */ o(f, { children: /* @__PURE__ */ o(c, { sort: t }) }),
+        /* @__PURE__ */ o(b, { children: e.map((r, m) => /* @__PURE__ */ o(
+          T,
+          {
+            poolName: l,
+            currentQuota: r,
+            token: i[r.token],
+            underlyingToken: a,
+            last: m === e.length - 1
+          },
+          r.token
+        )) })
+      ]
+    }
+  );
+}
+export {
+  P as PoolAssetsTable
+};

package/dist/esm/components/pool-credit-managers-table/index.js

@@ -0,0 +1,10 @@
+import { PoolCreditManagersTable as r } from "./pool-credit-managers-table.js";
+import { poolCreditManagersTableTestIds as t } from "./pool-credit-managers-table.test-ids.js";
+import { PoolCreditManagersTableHead as d } from "./pool-credit-managers-table-head.js";
+import { PoolCreditManagersTableRow as p } from "./pool-credit-managers-table-row.js";
+export {
+  r as PoolCreditManagersTable,
+  d as PoolCreditManagersTableHead,
+  p as PoolCreditManagersTableRow,
+  t as poolCreditManagersTableTestIds
+};

package/dist/esm/components/pool-credit-managers-table/pool-credit-managers-table-head.js

@@ -0,0 +1,54 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import "react";
+import { getSortForField as r } from "../../hooks/use-filter.js";
+import "@gearbox-protocol/sdk/common-utils";
+import "@gearbox-protocol/sdk";
+import { HeadCell as a } from "../head-cell/head-cell.js";
+import { GridTableRow as d, GridTableHead as i } from "../table/grid-table.js";
+import { useIntlTyped as p, FormattedMessageTyped as n } from "../typed-intl/index.js";
+function I({
+  sort: m
+}) {
+  const s = p(), { state: t, set: o } = m;
+  return /* @__PURE__ */ l(d, { noHover: !0, height: "35px", children: [
+    /* @__PURE__ */ e(i, { justify: "start", size: "sm", className: "pl-4", children: /* @__PURE__ */ e(
+      a,
+      {
+        arrowPosition: "right",
+        title: /* @__PURE__ */ e(n, { messageId: "components.poolAssetsTable.head.name" }),
+        sortDirection: r("name", t),
+        sortField: s.formatMessage({
+          messageId: "components.poolAssetsTable.head.name"
+        }),
+        onSort: () => o("name")
+      }
+    ) }),
+    /* @__PURE__ */ e(i, { justify: "end", size: "sm", children: /* @__PURE__ */ e(
+      a,
+      {
+        arrowPosition: "left",
+        title: /* @__PURE__ */ e(n, { messageId: "components.poolAssetsTable.head.currentDebt" }),
+        sortDirection: r("currentDebt", t),
+        sortField: s.formatMessage({
+          messageId: "components.poolAssetsTable.head.currentDebt"
+        }),
+        onSort: () => o("currentDebt", "desc")
+      }
+    ) }),
+    /* @__PURE__ */ e(i, { justify: "end", size: "sm", className: "pr-4", children: /* @__PURE__ */ e(
+      a,
+      {
+        arrowPosition: "left",
+        title: /* @__PURE__ */ e(n, { messageId: "components.poolAssetsTable.head.assets" }),
+        sortDirection: r("assets", t),
+        sortField: s.formatMessage({
+          messageId: "components.poolAssetsTable.head.assets"
+        }),
+        onSort: () => o("assets", "desc")
+      }
+    ) })
+  ] });
+}
+export {
+  I as PoolCreditManagersTableHead
+};

package/dist/esm/components/pool-credit-managers-table/pool-credit-managers-table-row.js

@@ -0,0 +1,71 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { shortAddress as n } from "@gearbox-protocol/sdk";
+import "react";
+import "clsx";
+import "tailwind-merge";
+import "sonner";
+import { formatMoney as d } from "../../utils/format-money.js";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+import { GridTableRow as p, GridTableCell as t } from "../table/grid-table.js";
+import { TextButton as c } from "../text-button/text-button.js";
+import { TokenTemplate as f } from "../token-template/token-template.js";
+import { FormattedMessageTyped as h } from "../typed-intl/index.js";
+import { VerticalIndicator as l } from "../vertical-indicator/vertical-indicator.js";
+import { poolCreditManagersTableTestIds as u } from "./pool-credit-managers-table.test-ids.js";
+function D({
+  creditManager: o,
+  last: i,
+  onClick: r,
+  totalDebtMoney: s,
+  underlyingToken: a
+}) {
+  return /* @__PURE__ */ m(
+    p,
+    {
+      last: i,
+      height: "75px",
+      onRowClick: r,
+      "data-testid": u.creditManagerLine,
+      children: [
+        /* @__PURE__ */ e(t, { textAlign: "left", className: "pl-4", size: "sm", children: /* @__PURE__ */ e(
+          l,
+          {
+            label: o.name,
+            description: n(o.address)
+          }
+        ) }),
+        /* @__PURE__ */ e(t, { textAlign: "right", size: "sm", children: /* @__PURE__ */ e("div", { className: "flex justify-end flex-col-auto", children: /* @__PURE__ */ e("div", { className: "flex-col-auto", children: /* @__PURE__ */ e(
+          l,
+          {
+            value: /* @__PURE__ */ e(
+              f,
+              {
+                value: o.totalDebt,
+                token: a
+              }
+            ),
+            valueDescription: d(s)
+          }
+        ) }) }) }),
+        /* @__PURE__ */ e(t, { textAlign: "right", className: "pr-4", size: "sm", children: /* @__PURE__ */ e("div", { className: "flex justify-end flex-col-auto", children: /* @__PURE__ */ e("div", { className: "flex-col-auto", children: /* @__PURE__ */ e(
+          l,
+          {
+            label: /* @__PURE__ */ e(c, { as: "span", children: /* @__PURE__ */ e(
+              h,
+              {
+                messageId: "components.poolCreditManagersTable.assets",
+                values: { amount: o.collateralTokens.length }
+              }
+            ) }),
+            description: " "
+          }
+        ) }) }) })
+      ]
+    }
+  );
+}
+export {
+  D as PoolCreditManagersTableRow
+};

package/dist/esm/components/pool-credit-managers-table/pool-credit-managers-table.js

@@ -0,0 +1,42 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import "react";
+import "@gearbox-protocol/sdk/common-utils";
+import "@gearbox-protocol/sdk";
+import { useIsMobile as d } from "../../hooks/use-media-query.js";
+import { GridTable as f, GridTableHeader as n, GridTableBody as b } from "../table/grid-table.js";
+import { PoolCreditManagersTableHead as c } from "./pool-credit-managers-table-head.js";
+import { PoolCreditManagersTableRow as C } from "./pool-credit-managers-table-row.js";
+function w({
+  handleSelectCM: e,
+  rows: l,
+  sort: i,
+  underlyingToken: s
+}) {
+  const a = d() ? "1fr 120px 0.75fr" : "2fr 1fr 1fr";
+  return /* @__PURE__ */ p(
+    f,
+    {
+      cols: a,
+      gap: 0,
+      size: "lg",
+      wrapperClassName: "overflow-visible",
+      children: [
+        /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(c, { sort: i }) }),
+        /* @__PURE__ */ r(b, { children: l.map(({ creditManager: o, totalDebtMoney: m }, t) => /* @__PURE__ */ r(
+          C,
+          {
+            creditManager: o,
+            last: t === l.length - 1,
+            onClick: e(o),
+            totalDebtMoney: m,
+            underlyingToken: s
+          },
+          o.address
+        )) })
+      ]
+    }
+  );
+}
+export {
+  w as PoolCreditManagersTable
+};

package/dist/esm/components/pool-credit-managers-table/pool-credit-managers-table.test-ids.js

@@ -0,0 +1,6 @@
+const e = {
+  creditManagerLine: "pool-credit-managers-line"
+};
+export {
+  e as poolCreditManagersTableTestIds
+};

package/dist/esm/components/pool-credit-managers-table/types.js

@@ -0,0 +1 @@
+