@gearbox-protocol/ui-kit 3.5.2 → 3.6.0-next.2

package/dist/esm/components/PoolCreditManagersTable/PoolCreditManagersLine.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 o } 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 i } from "../vertical-indicator/vertical-indicator.js";
+import { PoolCreditManagersTableTest as u } from "./constants.js";
+function I({
+  creditManager: t,
+  last: l,
+  onClick: r,
+  totalDebtMoney: s,
+  underlyingToken: a
+}) {
+  return /* @__PURE__ */ m(
+    p,
+    {
+      last: l,
+      height: "75px",
+      onRowClick: r,
+      "data-testid": u.creditManagerLine,
+      children: [
+        /* @__PURE__ */ e(o, { textAlign: "left", className: "pl-4", size: "sm", children: /* @__PURE__ */ e(
+          i,
+          {
+            label: t.name,
+            description: n(t.address)
+          }
+        ) }),
+        /* @__PURE__ */ e(o, { 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(
+          i,
+          {
+            value: /* @__PURE__ */ e(
+              f,
+              {
+                value: t.totalDebt,
+                token: a
+              }
+            ),
+            valueDescription: d(s)
+          }
+        ) }) }) }),
+        /* @__PURE__ */ e(o, { 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(
+          i,
+          {
+            label: /* @__PURE__ */ e(c, { as: "span", children: /* @__PURE__ */ e(
+              h,
+              {
+                messageId: "components.poolCreditManagersTable.assets",
+                values: { amount: t.collateralTokens.length }
+              }
+            ) }),
+            description: " "
+          }
+        ) }) }) })
+      ]
+    }
+  );
+}
+export {
+  I as PoolCreditManagersLineView
+};

package/dist/esm/components/PoolCreditManagersTable/TableHead.js

@@ -0,0 +1,52 @@
+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 TableHead
+};

package/dist/esm/components/PoolCreditManagersTable/constants.js

@@ -0,0 +1,7 @@
+class a {
+  static creditManagerLine = "pool-credit-managers-line";
+  static creditManagerDetail = "pool-credit-managers-detail";
+}
+export {
+  a as PoolCreditManagersTableTest
+};

package/dist/esm/components/PoolCreditManagersTable/index.js

@@ -0,0 +1,45 @@
+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 { PoolCreditManagersLineView as T } from "./PoolCreditManagersLine.js";
+import { TableHead as c } from "./TableHead.js";
+import { PoolCreditManagersTableTest as S } from "./constants.js";
+function v({
+  handleSelectCM: i,
+  rows: e,
+  sort: l,
+  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: l }) }),
+        /* @__PURE__ */ r(b, { children: e.map(({ creditManager: o, totalDebtMoney: m }, t) => /* @__PURE__ */ r(
+          T,
+          {
+            creditManager: o,
+            last: t === e.length - 1,
+            onClick: i(o),
+            totalDebtMoney: m,
+            underlyingToken: s
+          },
+          o.address
+        )) })
+      ]
+    }
+  );
+}
+export {
+  T as PoolCreditManagersLineView,
+  S as PoolCreditManagersTableTest,
+  v as PoolCreditManagersTableView
+};

package/dist/esm/components/PoolCreditManagersTable/types.js

@@ -0,0 +1 @@
+

package/dist/esm/components/PoolsAssetsTable/PoolAssetsLine.js

@@ -0,0 +1,107 @@
+import { jsx as e, jsxs as t, Fragment as L } from "react/jsx-runtime";
+import "react";
+import "@gearbox-protocol/sdk/common-utils";
+import "@gearbox-protocol/sdk";
+import { useIsMobile as N, useIsDesktop as S } from "../../hooks/use-media-query.js";
+import "clsx";
+import "tailwind-merge";
+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 { ShortString as c } from "../short-string/short-string.js";
+import { GridTableRow as w, 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";
+import { FormattedMessageTyped as o } from "../typed-intl/index.js";
+function O({
+  poolName: h,
+  token: l,
+  currentQuota: g,
+  underlyingToken: r,
+  last: u
+}) {
+  const { limit: f, totalQuoted: x, rate: T } = g, i = N(), b = S() ? 21 : i ? 40 : 16, m = () => /* @__PURE__ */ t("div", { className: "flex items-center flex-col-auto", children: [
+    /* @__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 }) })
+    ] })
+  ] }), a = () => A(T), n = () => /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+    o,
+    {
+      messageId: "components.poolAssetsTable.usage",
+      values: {
+        amount: /* @__PURE__ */ e(
+          d,
+          {
+            value: x,
+            token: r,
+            decimalPartLength: 2,
+            precision: 2,
+            showSymbol: !1
+          },
+          "pool-assets-line-usage-amount"
+        ),
+        total: /* @__PURE__ */ e(
+          d,
+          {
+            value: f,
+            token: r,
+            decimalPartLength: 2,
+            precision: 2,
+            showSymbol: !1
+          },
+          "pool-assets-line-usage-total"
+        )
+      }
+    }
+  ) });
+  return /* @__PURE__ */ e(
+    w,
+    {
+      last: u,
+      height: "auto",
+      className: "cursor-default",
+      onRowClick: () => {
+      },
+      style: {
+        minHeight: "75px"
+      },
+      children: i ? /* @__PURE__ */ e(s, { span: "full", size: "sm", className: "px-3 py-0!", children: /* @__PURE__ */ t(
+        y,
+        {
+          columns: 2,
+          columnsXs: 2,
+          title: m(),
+          className: "w-full",
+          children: [
+            /* @__PURE__ */ e(
+              p,
+              {
+                title: /* @__PURE__ */ e(o, { messageId: "components.poolAssetsTable.rate" }),
+                children: a()
+              }
+            ),
+            /* @__PURE__ */ e(
+              p,
+              {
+                title: /* @__PURE__ */ e(o, { messageId: "components.poolAssetsTable.limits" }),
+                children: n()
+              }
+            )
+          ]
+        }
+      ) }) : /* @__PURE__ */ t(L, { children: [
+        /* @__PURE__ */ e(s, { textAlign: "left", className: "pl-4", size: "sm", children: m() }),
+        /* @__PURE__ */ e(s, { textAlign: "right", size: "sm", children: a() }),
+        /* @__PURE__ */ e(s, { textAlign: "right", className: "pr-4", size: "sm", children: n() })
+      ] })
+    }
+  );
+}
+export {
+  O as PoolAssetsLine
+};

package/dist/esm/components/PoolsAssetsTable/TableHead.js

@@ -0,0 +1,52 @@
+import { jsxs as c, 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 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 }) {
+  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(
+      a,
+      {
+        arrowPosition: "right",
+        title: /* @__PURE__ */ e(n, { messageId: "components.poolAssetsTable.asset" }),
+        sortDirection: r("name", t),
+        sortField: s.formatMessage({
+          messageId: "components.poolAssetsTable.asset"
+        }),
+        onSort: p
+      }
+    ) }),
+    /* @__PURE__ */ e(i, { justify: "end", size: "sm", children: /* @__PURE__ */ e(
+      a,
+      {
+        arrowPosition: "left",
+        title: /* @__PURE__ */ e(n, { messageId: "components.poolAssetsTable.rate" }),
+        sortDirection: r("rate", t),
+        sortField: s.formatMessage({
+          messageId: "components.poolAssetsTable.rate"
+        }),
+        onSort: d
+      }
+    ) }),
+    /* @__PURE__ */ e(i, { justify: "end", size: "sm", className: "pr-4", children: /* @__PURE__ */ e(
+      a,
+      {
+        arrowPosition: "left",
+        title: /* @__PURE__ */ e(n, { messageId: "components.poolAssetsTable.limits" }),
+        sortDirection: r("usage", t),
+        sortField: s.formatMessage({
+          messageId: "components.poolAssetsTable.limits"
+        }),
+        onSort: m
+      }
+    ) })
+  ] });
+}
+export {
+  j as TableHead
+};

package/dist/esm/components/PoolsAssetsTable/index.js

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

package/dist/esm/components/PoolsAssetsTable/types.js

@@ -0,0 +1 @@
+

package/dist/esm/components/compound-apy/compound-apy.js

@@ -132,6 +132,7 @@ import "../navbar/navbar-indicator-context.js";
 import "../app-bar/app-bar.js";
 import "../navitem/navitem.js";
 import "../simple-dropdown/simple-dropdown.js";
+import "../vertical-indicator/vertical-indicator.js";
 import "../progress-bar/progress-bar.js";
 import "../radio-group/radio-group.js";
 import "../search-bar/search-bar.js";
@@ -159,7 +160,6 @@ import "../time-to-liquidation/time-to-liquidation.js";
 import "../tip-card/tip-card.js";
 import "../toggle/toggle.js";
 import "../typography/typography.js";
-import "../vertical-indicator/vertical-indicator.js";
 import "../vertical-list/vertical-list.js";
 import "../with-filter-button/with-filter-button.js";
 function G(i, p) {