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

package/dist/esm/components/composites/strategies-table/components/strategies-table.js

@@ -0,0 +1,249 @@
+import { jsx as t, Fragment as $, jsxs as M } from "react/jsx-runtime";
+import * as L from "react";
+import { HeadCell as J } from "../../../head-cell/head-cell.js";
+import { HelpTip as A } from "../../../help-tip/help-tip.js";
+import { GridLoadingLine as K } from "../../../table/grid-loading-line.js";
+import { GridTable as Q, GridTableHeader as U, GridTableBody as V, GridTableRow as P, GridTableHead as Y, GridTableCell as z } from "../../../table/grid-table.js";
+import { TableLoaderGuard as Z } from "../../../table/table-loader-guard.js";
+import { TableLineSm as _, TableCellSm as ee } from "../../../table/table-sm.js";
+import { SimpleTooltip as te } from "../../../tooltip/simple-tooltip.js";
+import "../../../tooltip/tooltip.js";
+import { FormattedMessageTyped as ie } from "../../../typed-intl/index.js";
+import "@gearbox-protocol/sdk/common-utils";
+import "@gearbox-protocol/sdk";
+import { useIsMobile as re, useIsMedium as se, useIsDesktop as ae } from "../../../../hooks/use-media-query.js";
+import { strategiesTableTestIds as B } from "../../../../test-ids/strategies-table.js";
+import { cn as h } from "../../../../utils/cn.js";
+import { StrategiesTableNotFoundLine as le } from "./not-found-line.js";
+function F({
+  last: e,
+  className: s,
+  ...p
+}) {
+  return /* @__PURE__ */ t(
+    P,
+    {
+      className: h(e && "*:after:hidden", s),
+      ...p
+    }
+  );
+}
+function ne({
+  columns: e,
+  sort: s,
+  isMedium: p
+}) {
+  return /* @__PURE__ */ t(P, { noHover: !0, height: "32px", children: e.map((i) => {
+    if (i.hideOnMedium && p) return null;
+    const d = i.sort, m = d && s ? {
+      direction: s.state?.field === d.field ? s.state.sort : null,
+      onSort: () => s.set(d.field, d.defaultDirection ?? "desc")
+    } : void 0, f = typeof i.header == "function" ? i.header(m) : i.header;
+    return /* @__PURE__ */ t(
+      Y,
+      {
+        justify: i.align === "right" ? "end" : i.align === "center" ? "center" : "start",
+        size: "sm",
+        gapBefore: i.gapBefore,
+        className: h(i.className, i.headerClassName),
+        children: m ? /* @__PURE__ */ M($, { children: [
+          /* @__PURE__ */ t(
+            J,
+            {
+              arrowPosition: "right",
+              title: f,
+              sortDirection: m.direction ?? void 0,
+              onSort: m.onSort
+            }
+          ),
+          i.headerTip && /* @__PURE__ */ t(A, { className: "ml-1.5", children: i.headerTip })
+        ] }) : /* @__PURE__ */ M($, { children: [
+          f,
+          i.headerTip && /* @__PURE__ */ t(A, { className: "ml-1.5", children: i.headerTip })
+        ] })
+      },
+      i.id
+    );
+  }) });
+}
+function oe({
+  row: e,
+  columns: s,
+  last: p,
+  rowHeight: i,
+  isSmall: d,
+  isMedium: m,
+  isDesktop: f,
+  mobileColumnsXs: u,
+  mobileColumnsMd: N,
+  rowTestId: y,
+  onStrategyClick: S
+}) {
+  const g = e.strategy.tokenOutAddress, b = L.useMemo(
+    () => ({
+      row: e,
+      strategy: e.strategy,
+      tokensList: e.tokensList,
+      targetToken: e.tokensList?.[g],
+      targetTokenAddress: g,
+      rewardsCellInfo: e.rewardsCellInfo,
+      isMobile: d,
+      isDesktop: f
+    }),
+    [e, g, d, f]
+  ), x = m ? s.filter((r) => !r.hideOnMedium) : s, a = !!e.disabled, T = !!e.disabledStyle, v = () => S?.(e), C = d ? (() => {
+    const r = s.filter((n) => !n.hideOnMobile), [c, ...R] = r, l = (n) => n.mobileCell ? n.mobileCell(b) : n.cell(b);
+    return /* @__PURE__ */ t(
+      F,
+      {
+        last: p,
+        href: a ? void 0 : e.href,
+        noHover: a,
+        "data-disabled": a,
+        "data-testid": y,
+        className: h(
+          T && "text-secondary-foreground!",
+          a && "cursor-not-allowed"
+        ),
+        onRowClick: a ? () => {
+        } : v,
+        children: /* @__PURE__ */ t(z, { span: "full", size: "sm", className: "px-3 py-0!", children: /* @__PURE__ */ t(
+          _,
+          {
+            columns: N,
+            columnsXs: u,
+            columnsMd: N,
+            title: c ? l(c) : void 0,
+            className: "w-full",
+            children: R.map((n) => /* @__PURE__ */ t(ee, { title: n.mobileTitle, children: l(n) }, n.id))
+          }
+        ) })
+      }
+    );
+  })() : /* @__PURE__ */ t(
+    F,
+    {
+      last: p,
+      href: a ? void 0 : e.href,
+      height: `${i}px`,
+      noHover: a,
+      "data-disabled": a,
+      "data-testid": y,
+      className: h(
+        T && "text-secondary-foreground!",
+        a && "cursor-not-allowed"
+      ),
+      onRowClick: a ? () => {
+      } : v,
+      children: x.map((r) => /* @__PURE__ */ t(
+        z,
+        {
+          textAlign: r.align ?? "left",
+          size: "sm",
+          gapBefore: r.gapBefore,
+          className: r.className,
+          children: r.cell(b)
+        },
+        r.id
+      ))
+    }
+  );
+  return T ? /* @__PURE__ */ t(te, { placement: "top", useTitleAsTrigger: !0, title: C, children: e.disabledTooltip ?? /* @__PURE__ */ t(ie, { messageId: "components.strategiesTable.line.disabled" }) }) : C;
+}
+function Se({
+  columns: e,
+  rows: s,
+  loading: p = !1,
+  partialLoading: i = !1,
+  error: d,
+  emptyContent: m = /* @__PURE__ */ t(le, {}),
+  skeletonRows: f = 5,
+  rowHeight: u = 66,
+  size: N = "lg",
+  mobileColumnsXs: y = 2,
+  mobileColumnsMd: S = 2,
+  className: g,
+  wrapperClassName: b,
+  sort: x,
+  onStrategyClick: a,
+  rootTestId: T,
+  rowTestId: v,
+  loaderTestId: w
+}) {
+  const H = v ?? B.activeLine, C = w ?? B.activeLineLoading, r = re(), c = se(), R = ae(), l = L.useMemo(
+    () => c ? e.filter((o) => !o.hideOnMedium) : e,
+    [e, c]
+  ), n = L.useMemo(() => r ? "1fr" : l.map((o) => (c ? o.mediumWidth ?? o.width : o.width) ?? "1fr").join(" "), [r, c, l]), j = L.useMemo(() => {
+    const o = l.map((W, X) => {
+      const G = W.gapBefore;
+      if (!G || G === "none") return null;
+      const q = G === "md" ? "pl-10" : "pl-5";
+      return `[&:nth-child(${X + 1})]:${q}`;
+    }).filter(Boolean).join(" "), I = l[l.length - 1]?.className?.includes("pr-4") ? "last:pr-4" : "";
+    return h("px-1 py-2 first:pl-4", I, o);
+  }, [l]), k = p || !s, E = !k && s && s.length === 0, D = i && !k;
+  return d ? null : E && m ? /* @__PURE__ */ t($, { children: m }) : /* @__PURE__ */ M(
+    Q,
+    {
+      cols: n,
+      gap: 0,
+      size: N,
+      wrapperClassName: h("overflow-visible", b),
+      className: g,
+      "data-testid": T ?? B.root,
+      children: [
+        !r && /* @__PURE__ */ t(U, { children: /* @__PURE__ */ t(
+          ne,
+          {
+            columns: e,
+            sort: x,
+            isMedium: c
+          }
+        ) }),
+        /* @__PURE__ */ t(
+          Z,
+          {
+            showGuard: k,
+            rows: f,
+            columns: r ? 1 : l.length,
+            height: `${u}px`,
+            "data-testid": C,
+            cellClassName: r ? "px-1 py-2 first:pl-4 last:pr-4" : j,
+            children: /* @__PURE__ */ M(V, { children: [
+              s?.map((o, O, I) => /* @__PURE__ */ t(
+                oe,
+                {
+                  row: o,
+                  columns: e,
+                  last: O === I.length - 1 && !D,
+                  rowHeight: u,
+                  isSmall: r,
+                  isMedium: c,
+                  isDesktop: R,
+                  mobileColumnsXs: y,
+                  mobileColumnsMd: S,
+                  rowTestId: H,
+                  onStrategyClick: a
+                },
+                `${o.strategy.chainId}-${o.strategy.id}`
+              )),
+              D && /* @__PURE__ */ t(
+                K,
+                {
+                  height: `${u}px`,
+                  columns: l.length,
+                  cellClassName: j,
+                  "data-testid": C,
+                  last: !0
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Se as StrategiesTable
+};

package/dist/esm/components/composites/strategies-table/index.js

@@ -0,0 +1,40 @@
+import { customStrategyColumn as t, strategyColumn as r, strategyLeverageColumn as a, strategyRewardsColumn as p } from "./columns.js";
+import { APYFeature as l, APYFeatureTooltip as s } from "./components/apy-feature/apy-feature.js";
+import { RWAFeature as u, StrategiesRewardsCell as f, StrategyPoints as x, ZeroSlippageFeature as n } from "./components/cells/cells.js";
+import { DisabledWrap as g, Plus as R, TitleGrid as T } from "./components/cells/cells.styles.js";
+import { Feature as w } from "./components/feature/feature.js";
+import { FeatureRoot as C } from "./components/feature/feature.styles.js";
+import { StrategiesTableNotFoundLine as y } from "./components/not-found-line.js";
+import { PointsFeature as A, PointsFeatureTooltip as L, PointsLabel as v } from "./components/points-feature/points-feature.js";
+import { RewardsTooltip as Y, RewardsTooltipHover as c } from "./components/rewards-tooltip/rewards-tooltip.js";
+import { RewardsTooltipRoot as G } from "./components/rewards-tooltip/rewards-tooltip-root.js";
+import { RewardsTooltipView as N } from "./components/rewards-tooltip/rewards-tooltip-view.js";
+import { RewardsTooltipContent as Z } from "./components/rewards-tooltip/tooltip-content.js";
+import { StrategiesTable as j } from "./components/strategies-table.js";
+export {
+  l as APYFeature,
+  s as APYFeatureTooltip,
+  g as DisabledWrap,
+  w as Feature,
+  C as FeatureRoot,
+  R as Plus,
+  A as PointsFeature,
+  L as PointsFeatureTooltip,
+  v as PointsLabel,
+  u as RWAFeature,
+  Y as RewardsTooltip,
+  Z as RewardsTooltipContent,
+  c as RewardsTooltipHover,
+  G as RewardsTooltipRoot,
+  N as RewardsTooltipView,
+  f as StrategiesRewardsCell,
+  j as StrategiesTable,
+  y as StrategiesTableNotFoundLine,
+  x as StrategyPoints,
+  T as TitleGrid,
+  n as ZeroSlippageFeature,
+  t as customStrategyColumn,
+  r as strategyColumn,
+  a as strategyLeverageColumn,
+  p as strategyRewardsColumn
+};

package/dist/esm/components/composites/strategies-table/types/cells.js

@@ -0,0 +1 @@
+

package/dist/esm/components/composites/strategies-table/types/index.js

@@ -0,0 +1 @@
+

package/dist/esm/components/composites/strategies-table/types/points-reward.js

@@ -0,0 +1 @@
+

package/dist/esm/components/composites/strategies-table/types/rewards-tooltip.js

@@ -0,0 +1 @@
+

package/dist/esm/components/composites/strategies-table/types/table.js

@@ -0,0 +1 @@
+

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

@@ -65,6 +65,13 @@ import "../rounded-image/rounded-image.js";
 import "../progress/progress.js";
 import "../pool-indicator-icon/pool-indicator-icon.js";
 import "../skeleton/skeleton.js";
+import "../composites/strategies-table/components/feature/feature.styles.js";
+import "viem";
+import "../icon-button/icon-button.js";
+import "../separate-line/separate-line.js";
+import "../tip-card/tip-card.js";
+import "../vertical-list/vertical-list.js";
+import "../composites/strategies-table/components/rewards-tooltip/rewards-tooltip-root.js";
 import "../currency-button/currency-button.js";
 import "../detailed-apy/detailed-apy.js";
 import "../detailed-page-title/detailed-page-title.js";
@@ -79,7 +86,6 @@ import "../dialog/dialog-footer.js";
 import "../dialog/dialog-header.js";
 import "../dialog/dialog-title.js";
 import "../dialog/dialog-overlay.js";
-import "viem";
 import "../label/label.js";
 import "../dropdown-menu/dropdown-menu.js";
 import "../dropdown-menu/dropdown-menu-checkbox-item.js";
@@ -111,7 +117,6 @@ import "lightweight-charts";
 import "../graph/graph-view.js";
 import "../health-factor/health-factor.js";
 import "../horizontal-indicator/horizontal-indicator.js";
-import "../icon-button/icon-button.js";
 import "../layout/col/col.js";
 import "../layout/container/container.js";
 import "../layout/footer/footer.js";
@@ -139,7 +144,6 @@ import "../radio-group/radio-group.js";
 import "../search-bar/search-bar.js";
 import "../segmented-control/segmented-control.js";
 import "../select/select.js";
-import "../separate-line/separate-line.js";
 import "../separator/separator.js";
 import "../simple-accordion/simple-accordion.js";
 import "../simple-dropdown/simple-dropdown-menu-item.js";
@@ -158,15 +162,13 @@ import "../table/grid-table-loader.js";
 import "../textarea/textarea.js";
 import "../theme-provider.js";
 import "../time-to-liquidation/time-to-liquidation.js";
-import "../tip-card/tip-card.js";
 import "../toggle/toggle.js";
-import "../vertical-list/vertical-list.js";
 import "../with-filter-button/with-filter-button.js";
 function G(i, p) {
   const e = i?.symbol || p;
   return e === "GEAR" ? { icon: L("/logo/logo_symbol.png") } : C(i) || e;
 }
-function _r({
+function Br({
   totalAPY: i,
   totalAPYLoading: p,
   baseAPY: e,
@@ -268,6 +270,6 @@ function _r({
   ) : x();
 }
 export {
-  _r as CompoundAPY,
+  Br as CompoundAPY,
   G as getRewardTokenSymbol
 };

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

@@ -63,6 +63,12 @@ import "../vertical-list/vertical-list.js";
 import "../rounded-image/rounded-image.js";
 import "../progress/progress.js";
 import "../pool-indicator-icon/pool-indicator-icon.js";
+import "../composites/strategies-table/components/feature/feature.styles.js";
+import "viem";
+import "../icon-button/icon-button.js";
+import "../separate-line/separate-line.js";
+import "../tip-card/tip-card.js";
+import "../composites/strategies-table/components/rewards-tooltip/rewards-tooltip-root.js";
 import "../currency-button/currency-button.js";
 import "../detailed-apy/detailed-apy.js";
 import { DetailedPageTitleCopyButton as h } from "./detailed-page-title-copy-button.js";
@@ -76,7 +82,6 @@ import "../dialog/dialog-footer.js";
 import "../dialog/dialog-header.js";
 import "../dialog/dialog-title.js";
 import "../dialog/dialog-overlay.js";
-import "viem";
 import "../label/label.js";
 import "../dropdown-menu/dropdown-menu.js";
 import "../dropdown-menu/dropdown-menu-checkbox-item.js";
@@ -108,7 +113,6 @@ import "lightweight-charts";
 import "../graph/graph-view.js";
 import "../health-factor/health-factor.js";
 import "../horizontal-indicator/horizontal-indicator.js";
-import "../icon-button/icon-button.js";
 import "../layout/col/col.js";
 import "../layout/container/container.js";
 import "../layout/footer/footer.js";
@@ -135,7 +139,6 @@ import "../radio-group/radio-group.js";
 import "../search-bar/search-bar.js";
 import "../segmented-control/segmented-control.js";
 import "../select/select.js";
-import "../separate-line/separate-line.js";
 import "../separator/separator.js";
 import "../simple-accordion/simple-accordion.js";
 import "../simple-dropdown/simple-dropdown-menu-item.js";
@@ -154,7 +157,6 @@ import "../table/grid-table-loader.js";
 import "../textarea/textarea.js";
 import "../theme-provider.js";
 import "../time-to-liquidation/time-to-liquidation.js";
-import "../tip-card/tip-card.js";
 import "../toggle/toggle.js";
 import "../with-filter-button/with-filter-button.js";
 const b = g.forwardRef(function({