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

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

@@ -1,51 +1,66 @@
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { AssetsListCell as w } from "../../assets-list-cell/assets-list-cell.js";
-import { CompoundAPY as y } from "../../compound-apy/compound-apy.js";
-import { Description as s } from "../../description/description.js";
-import { NetworkIcon as P } from "../../network-icon/network-icon.js";
-import { PercentIndicator as b } from "../../percent-indicator/percent-indicator.js";
-import { PoolAPYTooltip as T } from "../../pool-apy-tooltip/pool-apy-tooltip.js";
-import { PoolIndicatorIcon as k } from "../../pool-indicator-icon/pool-indicator-icon.js";
-import { PoolPointsIndicator as A } from "../../pool-points-indicator/pool-points-indicator.js";
-import { Skeleton as m } from "../../skeleton/skeleton.js";
+import { jsx as i, jsxs as s } 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 { Description as m } from "../../description/description.js";
+import { NetworkIcon as C } 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 { PoolPointsIndicator as D } from "../../pool-points-indicator/pool-points-indicator.js";
+import { Skeleton as u } from "../../skeleton/skeleton.js";
 import "react";
 import "@gearbox-protocol/sdk";
 import "clsx";
 import "tailwind-merge";
 import "sonner";
-import { percentageTemplate as C, formatMoney as u } from "../../../utils/format-money.js";
-import { tokenTemplate as h } from "../../../utils/templates.js";
+import { percentageTemplate as I, formatMoney as p } from "../../../utils/format-money.js";
+import { tokenTemplate as f } from "../../../utils/templates.js";
 import "luxon";
 import "../../../utils/z-index.js";
-import { TokenSymbol as x } from "../../token-symbol/token-symbol.js";
-function N({ ctx: e }) {
-  const { pool: l, underlyingToken: r, points: t, apy: o, isMobile: n } = e, d = n ? 20 : 24, c = /* @__PURE__ */ i(x, { token: r, size: d });
-  return t && t.length > 0 && o ? /* @__PURE__ */ i(
-    T,
+import { TokenSymbol as Y } from "../../token-symbol/token-symbol.js";
+import { FormattedMessageTyped as h } from "../../typed-intl/index.js";
+function a(e, l, o) {
+  const t = e?.header ?? /* @__PURE__ */ i(
+    h,
     {
-      totalAPY: o.totalAPY,
-      baseAPY: o.baseAPY,
-      extraAPY: o.extraAPY,
+      messageId: e?.headerMessageId ?? l
+    }
+  );
+  let r;
+  if (e?.headerTip !== null) {
+    const n = e?.headerTipMessageId ?? o;
+    r = e?.headerTip ?? (n && /* @__PURE__ */ i(h, { messageId: n }));
+  }
+  return { header: t, headerTip: r, 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(
+    N,
+    {
+      totalAPY: r.totalAPY,
+      baseAPY: r.baseAPY,
+      extraAPY: r.extraAPY,
       points: t,
       tokensList: e.tokensList,
-      children: /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(k, { size: d, children: c }) })
+      children: /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(v, { size: d, children: c }) })
     }
-  ) : l.hasPoints ? /* @__PURE__ */ i(A, { size: d, children: c }) : c;
+  ) : l.hasPoints ? /* @__PURE__ */ i(D, { size: d, children: c }) : c;
 }
-function Y(e) {
-  const l = e.underlyingToken?.title ?? e.underlyingToken?.symbol ?? "", r = e.pool.version;
-  return r && r >= 300 && r < 310 ? `${l} v${Math.floor(r / 100)}` : l;
+function B(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 v({
+function M({
   ctx: e,
   renderDescription: l,
-  getPoolName: r
+  getPoolName: o
 }) {
-  const { pool: t } = e, o = r ? r(e) : Y(e);
-  return /* @__PURE__ */ a("div", { className: "grid grid-cols-[auto_1fr] gap-x-3", children: [
-    /* @__PURE__ */ a("div", { className: "flex items-center gap-3 shrink-0 leading-0", children: [
+  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: [
       t.network && /* @__PURE__ */ i(
-        P,
+        C,
         {
           network: t.network,
           isTest: !1,
@@ -53,196 +68,228 @@ function v({
           showTooltip: !0
         }
       ),
-      /* @__PURE__ */ i(N, { ctx: e })
+      /* @__PURE__ */ i(z, { ctx: e })
     ] }),
-    /* @__PURE__ */ a("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: o }),
-      l && /* @__PURE__ */ i(s, { className: "min-w-0 text-xs", children: l(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 }),
+      l && /* @__PURE__ */ i(m, { className: "min-w-0 text-xs", children: l(e) })
     ] })
   ] });
 }
-function D({ ctx: e }) {
-  const { pool: l, underlyingToken: r, loading: t } = e;
-  return /* @__PURE__ */ a("div", { className: "flex flex-col items-start md:items-end", children: [
-    /* @__PURE__ */ i(m, { loading: !!t, width: 60, children: u(l.expectedLiquidityInUSD ?? 0) }),
-    /* @__PURE__ */ i(s, { children: h(
+function S({ 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(
       l.expectedLiquidity,
-      r
+      o
     ) })
   ] });
 }
-function B({ ctx: e }) {
-  const { pool: l, underlyingToken: r, loading: t } = e;
-  return /* @__PURE__ */ a("div", { className: "flex flex-col items-start md:items-end", children: [
-    /* @__PURE__ */ i(m, { loading: !!t, width: 60, children: u(l.totalBorrowedInUSD ?? 0) }),
-    /* @__PURE__ */ i(s, { children: h(
+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.totalBorrowedInUSD ?? 0) }),
+    /* @__PURE__ */ i(m, { children: f(
       l.totalBorrowed,
-      r
+      o
     ) })
   ] });
 }
-function S({ ctx: e }) {
-  const { pool: l, loading: r, underlyingToken: t } = e, o = t?.decimals ?? 18, n = l.poolTokenSymbol != null ? {
+function L({ ctx: e }) {
+  const { pool: l, loading: o, underlyingToken: t } = e, r = t?.decimals ?? 18, n = l.poolTokenSymbol != null ? {
     title: l.poolTokenSymbol,
-    decimals: o
+    decimals: r
   } : t;
-  return /* @__PURE__ */ a("div", { className: "flex flex-col items-start md:items-end", children: [
-    /* @__PURE__ */ i(m, { loading: !!r, width: 60, children: u(l.userBalanceInUSD ?? 0) }),
-    l.userBalance !== void 0 && n && /* @__PURE__ */ i(s, { children: h(l.userBalance, n) })
+  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) })
   ] });
 }
-function z(e, l) {
-  const r = e.pool.collateralTokens, { tokensList: t, isMobile: o } = e;
-  return !r?.length || !t ? null : /* @__PURE__ */ i(
-    w,
+function j(e, l) {
+  const o = e.pool.collateralTokens, { tokensList: t, isMobile: r } = e;
+  return !o?.length || !t ? null : /* @__PURE__ */ i(
+    A,
     {
       maxAssets: l,
       tokensList: t,
-      balances: r.map((n) => ({ token: n })),
-      iconSize: o ? 20 : 24,
+      balances: o.map((n) => ({ token: n })),
+      iconSize: r ? 20 : 24,
       options: { mode: "cascade" }
     }
   );
 }
-function Z(e) {
+function re(e) {
+  const { header: l, mobileTitle: o } = a(
+    e,
+    "components.poolTable.pool"
+  );
   return {
     id: "pool",
-    header: e?.header ?? "Pool",
+    header: l,
     width: e?.width ?? "186px",
     align: "left",
     className: "pl-4",
-    cell: (l) => /* @__PURE__ */ i(
-      v,
+    cell: (t) => /* @__PURE__ */ i(
+      M,
       {
-        ctx: l,
+        ctx: t,
         renderDescription: e?.renderDescription,
         getPoolName: e?.getPoolName
       }
     ),
-    mobileTitle: e?.header ?? "Pool"
+    mobileTitle: o
   };
 }
-function ee(e) {
+function ne(e) {
+  const { header: l, mobileTitle: o } = a(
+    e,
+    "components.poolTable.supply"
+  );
   return {
     id: "supply",
-    header: e?.header ?? "Supply",
+    header: l,
     width: e?.width ?? "1fr",
     align: "right",
     hideOnMedium: e?.hideOnMedium,
     sort: e?.sortField !== void 0 ? { field: e.sortField, defaultDirection: "desc" } : { field: "supply", defaultDirection: "desc" },
-    cell: (l) => /* @__PURE__ */ i(D, { ctx: l }),
-    mobileTitle: e?.header ?? "Supply"
+    cell: (t) => /* @__PURE__ */ i(S, { ctx: t }),
+    mobileTitle: o
   };
 }
-function le(e) {
+function ae(e) {
+  const { header: l, headerTip: o, mobileTitle: t } = a(
+    e,
+    "components.poolTable.supplyApy",
+    "components.poolTable.supplyApy.tip"
+  );
   return {
     id: "supplyApy",
-    header: e?.header ?? "Supply APY",
-    headerTip: e?.headerTip,
+    header: l,
+    headerTip: o,
     width: e?.width ?? "1.25fr",
     align: "right",
     sort: e?.sortField !== void 0 ? { field: e.sortField, defaultDirection: "desc" } : { field: "apy", defaultDirection: "desc" },
-    cell: (l) => {
-      const { apy: r, loading: t, points: o, tokensList: n } = l, {
-        totalAPY: d = 0,
-        baseAPY: c = [],
-        extraAPY: f = [],
-        externalAPY: p,
-        apy7DAgo: g
-      } = r ?? {};
-      return /* @__PURE__ */ i(m, { width: 60, loading: !!t, children: /* @__PURE__ */ i(
-        y,
+    cell: (r) => {
+      const { apy: n, loading: d, points: c, tokensList: g } = r, {
+        totalAPY: b = 0,
+        baseAPY: T = [],
+        extraAPY: w = [],
+        externalAPY: y,
+        apy7DAgo: k
+      } = n ?? {};
+      return /* @__PURE__ */ i(u, { width: 60, loading: !!d, children: /* @__PURE__ */ i(
+        P,
         {
-          totalAPY: d,
-          totalAPYLoading: !!t,
-          baseAPY: c,
-          extraAPY: f,
-          points: o,
-          apy7DAgo: g,
-          tokensList: n,
-          externalAPY: p
+          totalAPY: b,
+          totalAPYLoading: !!d,
+          baseAPY: T,
+          extraAPY: w,
+          points: c,
+          apy7DAgo: k,
+          tokensList: g,
+          externalAPY: y
         }
       ) });
     },
-    mobileTitle: e?.header ?? "Supply APY"
+    mobileTitle: t
   };
 }
-function re(e) {
+function de(e) {
+  const { header: l, mobileTitle: o } = a(
+    e,
+    "components.poolTable.borrowed"
+  );
   return {
     id: "borrowed",
-    header: e?.header ?? "Borrowed",
+    header: l,
     width: e?.width ?? "1.15fr",
     align: "right",
-    cell: (l) => /* @__PURE__ */ i(B, { ctx: l }),
-    mobileTitle: e?.header ?? "Borrowed"
+    cell: (t) => /* @__PURE__ */ i(F, { ctx: t }),
+    mobileTitle: o
   };
 }
-function ie(e) {
+function se(e) {
+  const { header: l, headerTip: o, mobileTitle: t } = a(
+    e,
+    "components.poolTable.borrowApy"
+  );
   return {
     id: "borrowApy",
-    header: e?.header ?? "Borrow APY",
-    headerTip: e?.headerTip,
+    header: l,
+    headerTip: o,
     width: e?.width ?? "150px",
     align: "right",
-    cell: (l) => {
-      const r = l.pool.borrowAPY ?? e?.getBorrowRate?.(l.pool) ?? 0;
-      return /* @__PURE__ */ i("div", { className: "flex justify-start md:justify-end", children: C(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: I(n) });
     },
-    mobileTitle: e?.header ?? "Borrow APY"
+    mobileTitle: t
   };
 }
-function te(e) {
+function ce(e) {
+  const { header: l, mobileTitle: o } = a(
+    e,
+    "components.poolTable.utilization"
+  );
   return {
     id: "utilization",
-    header: e?.header ?? "Utilization",
+    header: l,
     width: e?.width ?? "150px",
     align: "right",
     className: "pr-4",
     sort: e?.sortField !== void 0 ? { field: e.sortField, defaultDirection: "desc" } : { field: "utilization", defaultDirection: "desc" },
-    cell: (l) => {
-      const r = l.pool.utilization ?? 0;
-      return /* @__PURE__ */ i("div", { className: "flex justify-start md:justify-end", children: /* @__PURE__ */ i(b, { percent: r }) });
+    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 }) });
     },
-    mobileTitle: e?.header ?? "Utilization"
+    mobileTitle: o
   };
 }
-function oe(e) {
-  const l = e?.maxAssets ?? 5, r = (t) => z(t, l);
+function me(e) {
+  const l = e?.maxAssets ?? 5, o = (n) => j(n, l), { header: t, mobileTitle: r } = a(
+    e,
+    "components.poolTable.collateral"
+  );
   return {
     id: "collateral",
-    header: e?.header ?? "Collateral",
+    header: t,
     width: e?.width ?? "148px",
     align: e?.align ?? "left",
     gapBefore: e?.gapBefore ?? "md",
-    cell: e?.cell ?? r,
-    mobileCell: e?.mobileCell ?? e?.cell ?? r,
-    mobileTitle: e?.header ?? "Collateral"
+    cell: e?.cell ?? o,
+    mobileCell: e?.mobileCell ?? e?.cell ?? o,
+    mobileTitle: r
   };
 }
-function ne(e) {
+function ue(e) {
+  const { header: l, mobileTitle: o } = a(
+    e,
+    "components.poolTable.balance"
+  );
   return {
     id: "balance",
-    header: e?.header ?? "Your Balance",
+    header: l,
     width: e?.width ?? "1.15fr",
     align: "right",
     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 ?? ((l) => /* @__PURE__ */ i(S, { ctx: l })),
-    mobileTitle: e?.header ?? "Your Balance"
+    cell: e?.cell ?? ((t) => /* @__PURE__ */ i(L, { ctx: t })),
+    mobileTitle: o
   };
 }
-function ae(e) {
+function pe(e) {
   return e;
 }
 export {
-  ne as balanceColumn,
-  ie as borrowApyColumn,
-  re as borrowedColumn,
-  oe as collateralColumn,
-  ae as customColumn,
-  Z as poolColumn,
-  le as supplyApyColumn,
-  ee as supplyColumn,
-  te as utilizationColumn
+  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
 };

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

@@ -52,15 +52,18 @@ import "../input/input.js";
 import "../with-title/with-title.js";
 import "../smart-number-input/balance-indicator.js";
 import "../smart-number-input/smart-number-input.js";
+import "../table/grid-table.js";
+import "../help-tip/help-tip.js";
 import "../description/description.js";
+import { getSymbolOrIcon as C } from "../token-symbol/token-symbol.js";
+import "../confirm-menu/confirm-menu.js";
+import "../dialog/dialog-modal-container.js";
+import "../text-button/text-button.js";
+import "../vertical-indicator/vertical-indicator.js";
 import "../rounded-image/rounded-image.js";
 import "../progress/progress.js";
 import "../pool-indicator-icon/pool-indicator-icon.js";
 import "../skeleton/skeleton.js";
-import { getSymbolOrIcon as C } from "../token-symbol/token-symbol.js";
-import "../help-tip/help-tip.js";
-import "../table/grid-table.js";
-import "../confirm-menu/confirm-menu.js";
 import "../currency-button/currency-button.js";
 import "../detailed-apy/detailed-apy.js";
 import "../detailed-page-title/detailed-page-title.js";
@@ -74,7 +77,6 @@ import "../dialog/dialog-description.js";
 import "../dialog/dialog-footer.js";
 import "../dialog/dialog-header.js";
 import "../dialog/dialog-title.js";
-import "../dialog/dialog-modal-container.js";
 import "../dialog/dialog-overlay.js";
 import "viem";
 import "../label/label.js";
@@ -121,7 +123,6 @@ import "../layout/social-icons/social-icons.js";
 import "../link/link.js";
 import "../../utils/reactochart-compat.js";
 import "../status-elements/status-elements.js";
-import "../text-button/text-button.js";
 import "../loader/loader.js";
 import "../loading/loading.js";
 import "../loading-bar/loading-bar.js";
@@ -132,7 +133,6 @@ 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";

package/dist/esm/components/detailed-page-title/detailed-page-title.js

@@ -48,18 +48,20 @@ import "../input/input.js";
 import "../with-title/with-title.js";
 import "../smart-number-input/balance-indicator.js";
 import "../smart-number-input/smart-number-input.js";
+import "../table/grid-table.js";
+import "../help-tip/help-tip.js";
+import "../description/description.js";
+import { getSymbolOrIcon as P } from "../token-symbol/token-symbol.js";
+import "../confirm-menu/confirm-menu.js";
+import "../dialog/dialog-modal-container.js";
+import "../text-button/text-button.js";
+import "../vertical-indicator/vertical-indicator.js";
 import "../points-icon/points-icon.js";
 import "../skeleton/skeleton.js";
-import "../vertical-indicator/vertical-indicator.js";
 import "../vertical-list/vertical-list.js";
-import "../description/description.js";
 import "../rounded-image/rounded-image.js";
 import "../progress/progress.js";
 import "../pool-indicator-icon/pool-indicator-icon.js";
-import { getSymbolOrIcon as P } from "../token-symbol/token-symbol.js";
-import "../help-tip/help-tip.js";
-import "../table/grid-table.js";
-import "../confirm-menu/confirm-menu.js";
 import "../currency-button/currency-button.js";
 import "../detailed-apy/detailed-apy.js";
 import { DetailedPageTitleCopyButton as h } from "./detailed-page-title-copy-button.js";
@@ -72,7 +74,6 @@ import "../dialog/dialog-description.js";
 import "../dialog/dialog-footer.js";
 import "../dialog/dialog-header.js";
 import "../dialog/dialog-title.js";
-import "../dialog/dialog-modal-container.js";
 import "../dialog/dialog-overlay.js";
 import "viem";
 import "../label/label.js";
@@ -118,7 +119,6 @@ import "../layout/social-icons/social-icons.js";
 import "../link/link.js";
 import "../../utils/reactochart-compat.js";
 import "../status-elements/status-elements.js";
-import "../text-button/text-button.js";
 import "../loader/loader.js";
 import "../loading/loading.js";
 import "../loading-bar/loading-bar.js";