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

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

@@ -0,0 +1,35 @@
+import { APYFeature as r, APYFeatureTooltip as t } from "./apy-feature/apy-feature.js";
+import { RWAFeature as p, StrategiesRewardsCell as i, StrategyPoints as l, ZeroSlippageFeature as s } from "./cells/cells.js";
+import { DisabledWrap as m, Plus as x, TitleGrid as u } from "./cells/cells.styles.js";
+import { Feature as d } from "./feature/feature.js";
+import { FeatureRoot as R } from "./feature/feature.styles.js";
+import { StrategiesTableNotFoundLine as w } from "./not-found-line.js";
+import { PointsFeature as g, PointsFeatureTooltip as S, PointsLabel as b } from "./points-feature/points-feature.js";
+import { RewardsTooltip as C, RewardsTooltipHover as L } from "./rewards-tooltip/rewards-tooltip.js";
+import { RewardsTooltipRoot as Y } from "./rewards-tooltip/rewards-tooltip-root.js";
+import { RewardsTooltipView as y } from "./rewards-tooltip/rewards-tooltip-view.js";
+import { RewardsTooltipContent as G } from "./rewards-tooltip/tooltip-content.js";
+import { StrategiesTable as N } from "./strategies-table.js";
+export {
+  r as APYFeature,
+  t as APYFeatureTooltip,
+  m as DisabledWrap,
+  d as Feature,
+  R as FeatureRoot,
+  x as Plus,
+  g as PointsFeature,
+  S as PointsFeatureTooltip,
+  b as PointsLabel,
+  p as RWAFeature,
+  C as RewardsTooltip,
+  G as RewardsTooltipContent,
+  L as RewardsTooltipHover,
+  Y as RewardsTooltipRoot,
+  y as RewardsTooltipView,
+  i as StrategiesRewardsCell,
+  N as StrategiesTable,
+  w as StrategiesTableNotFoundLine,
+  l as StrategyPoints,
+  u as TitleGrid,
+  s as ZeroSlippageFeature
+};

package/dist/esm/components/composites/strategies-table/components/not-found-line.js

@@ -0,0 +1,19 @@
+import { jsx as e } from "react/jsx-runtime";
+import { GridTableRow as r, GridTableCell as o } from "../../../table/grid-table.js";
+import { FormattedMessageTyped as t } from "../../../typed-intl/index.js";
+import { Typography as a } from "../../../typography/typography.js";
+function d() {
+  return /* @__PURE__ */ e(r, { noHover: !0, last: !0, children: /* @__PURE__ */ e(o, { span: "full", textAlign: "center", children: /* @__PURE__ */ e(
+    a,
+    {
+      as: "span",
+      color: "secondary",
+      variant: "body",
+      className: "py-0 sm:py-5",
+      children: /* @__PURE__ */ e(t, { messageId: "components.strategiesTable.body.notFound" })
+    }
+  ) }) });
+}
+export {
+  d as StrategiesTableNotFoundLine
+};

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

@@ -0,0 +1,6 @@
+import { PointsFeature as e, PointsFeatureTooltip as i, PointsLabel as r } from "./points-feature.js";
+export {
+  e as PointsFeature,
+  i as PointsFeatureTooltip,
+  r as PointsLabel
+};

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

@@ -0,0 +1,69 @@
+import { jsx as t, jsxs as o, Fragment as s } from "react/jsx-runtime";
+import { formatLeverage as u } from "@gearbox-protocol/sdk";
+import { PointsIcon as m } from "../../../../points-icon/points-icon.js";
+import { Typography as a } from "../../../../typography/typography.js";
+import { Feature as l } from "../feature/feature.js";
+import "../feature/feature.styles.js";
+function b({
+  reward: e,
+  points: n,
+  precision: i,
+  theme: r
+}) {
+  return /* @__PURE__ */ t(
+    l,
+    {
+      theme: r,
+      title: /* @__PURE__ */ o("div", { className: "flex items-center gap-1 pr-2", children: [
+        /* @__PURE__ */ t(m, { reward: e }),
+        /* @__PURE__ */ t(a, { as: "span", variant: "caption", children: /* @__PURE__ */ t(c, { points: n, precision: i }) })
+      ] })
+    }
+  );
+}
+function y({
+  reward: e,
+  points: n,
+  precision: i,
+  tip: r,
+  theme: p
+}) {
+  return /* @__PURE__ */ t(
+    l,
+    {
+      theme: p,
+      size: "md",
+      padding: "8px",
+      title: /* @__PURE__ */ o("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ t(m, { reward: e, size: 16 }),
+        /* @__PURE__ */ t(a, { as: "span", variant: "bodySmall", children: /* @__PURE__ */ t(d, { reward: e }) })
+      ] }),
+      value: /* @__PURE__ */ t(a, { as: "span", variant: "bodySmall", children: /* @__PURE__ */ t(
+        c,
+        {
+          points: n,
+          precision: i,
+          startWith: "×",
+          endWith: ""
+        }
+      ) }),
+      tip: r
+    }
+  );
+}
+function d({ reward: e }) {
+  return /* @__PURE__ */ t(s, { children: [e.name, e.units].join(" ") });
+}
+function c({
+  points: e,
+  precision: n = 1,
+  startWith: i = "",
+  endWith: r = "×"
+}) {
+  return /* @__PURE__ */ t(s, { children: e === "soon" ? e : `${i}${u(Number(e), n)}${r}` });
+}
+export {
+  b as PointsFeature,
+  y as PointsFeatureTooltip,
+  d as PointsLabel
+};

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

@@ -0,0 +1,11 @@
+import { RewardsTooltip as e, RewardsTooltipHover as t } from "./rewards-tooltip.js";
+import { RewardsTooltipRoot as i } from "./rewards-tooltip-root.js";
+import { RewardsTooltipView as R } from "./rewards-tooltip-view.js";
+import { RewardsTooltipContent as d } from "./tooltip-content.js";
+export {
+  e as RewardsTooltip,
+  d as RewardsTooltipContent,
+  t as RewardsTooltipHover,
+  i as RewardsTooltipRoot,
+  R as RewardsTooltipView
+};

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

@@ -0,0 +1,30 @@
+import { jsx as e } from "react/jsx-runtime";
+import { cva as d } from "class-variance-authority";
+import { forwardRef as m } from "react";
+import { cn as p } from "../../../../../utils/cn.js";
+const s = d("", {
+  variants: {
+    theme: {
+      modal: "bg-modal",
+      box: "bg-card"
+    }
+  },
+  defaultVariants: {
+    theme: "modal"
+  }
+}), n = m(({ theme: o, children: r, className: t }, a) => /* @__PURE__ */ e(
+  "div",
+  {
+    ref: a,
+    className: p(
+      "relative p-4 w-[300px] xs:w-[400px] text-left font-normal",
+      "rounded-lg border border-border shadow-[0_4px_28px_4px_rgba(0,0,0,0.15)]",
+      s({ theme: o }),
+      t
+    ),
+    children: r
+  }
+));
+export {
+  n as RewardsTooltipRoot
+};

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

@@ -0,0 +1,78 @@
+import { jsx as t } from "react/jsx-runtime";
+import { SimpleTooltip as n } from "../../../../tooltip/simple-tooltip.js";
+import "../../../../tooltip/tooltip.js";
+import { FormattedMessageTyped as s } from "../../../../typed-intl/index.js";
+import { RewardsTooltipContent as p } from "./tooltip-content.js";
+function x({
+  children: a,
+  handleTooltipChangeState: o,
+  handleTooltipChange: l,
+  open: r,
+  props: f
+}) {
+  const i = () => (
+    // biome-ignore lint/a11y/noStaticElementInteractions: nested tooltip trigger behavior preserved from legacy UI
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: "flex h-full flex-col justify-center",
+        onClick: (e) => {
+          e.preventDefault(), e.stopPropagation(), o();
+        },
+        onKeyDown: (e) => {
+          (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), o());
+        },
+        children: a
+      }
+    )
+  );
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: nested tooltip trigger behavior preserved from legacy UI
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: "flex h-full w-max flex-col justify-center",
+        onClick: (e) => {
+          e.preventDefault(), e.stopPropagation();
+        },
+        onKeyDown: (e) => {
+          (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation());
+        },
+        children: /* @__PURE__ */ t(
+          n,
+          {
+            placement: "bottom",
+            trigger: "click",
+            triangle: !1,
+            triggerClassName: "h-full flex flex-col justify-center",
+            title: r ? i() : /* @__PURE__ */ t(
+              n,
+              {
+                title: i(),
+                placement: "top",
+                triangle: !1,
+                triggerClassName: "h-full flex flex-col justify-center",
+                children: /* @__PURE__ */ t(s, { messageId: "components.rewardsTooltip.button" })
+              }
+            ),
+            minWidth: "100%",
+            maxWidth: "100%",
+            type: "modal-tooltip",
+            open: r,
+            onOpenChange: l,
+            children: /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
+              p,
+              {
+                onClose: () => l(!1),
+                ...f
+              }
+            ) })
+          }
+        )
+      }
+    )
+  );
+}
+export {
+  x as RewardsTooltipView
+};

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

@@ -0,0 +1,44 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useState as l } from "react";
+import { SimpleTooltip as p } from "../../../../tooltip/simple-tooltip.js";
+import "../../../../tooltip/tooltip.js";
+import { RewardsTooltipView as a } from "./rewards-tooltip-view.js";
+import { RewardsTooltipContent as m } from "./tooltip-content.js";
+function w({ children: o, ...e }) {
+  const [n, i] = l(!1);
+  return /* @__PURE__ */ t(
+    a,
+    {
+      handleTooltipChangeState: () => {
+        i(!0);
+      },
+      handleTooltipChange: (r) => {
+        i(r);
+      },
+      open: n,
+      props: e,
+      children: o
+    }
+  );
+}
+function C({
+  children: o,
+  ...e
+}) {
+  return /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
+    p,
+    {
+      placement: "bottom",
+      triangle: !1,
+      title: o,
+      minWidth: "100%",
+      maxWidth: "100%",
+      type: "modal-tooltip",
+      children: /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(m, { theme: "box", ...e }) })
+    }
+  ) });
+}
+export {
+  w as RewardsTooltip,
+  C as RewardsTooltipHover
+};

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

@@ -0,0 +1,263 @@
+import { jsxs as r, jsx as e, Fragment as L } from "react/jsx-runtime";
+import { faXmark as M } from "@fortawesome/free-solid-svg-icons";
+import { formatPercentage as s, formatLeverage as _ } from "@gearbox-protocol/sdk";
+import { zeroAddress as $ } from "viem";
+import { IconButton as H } from "../../../../icon-button/icon-button.js";
+import { FaIcon as U } from "../../../../icons/fa-icon.js";
+import { SeparateLine as W } from "../../../../separate-line/separate-line.js";
+import { Skeleton as b } from "../../../../skeleton/skeleton.js";
+import "react";
+import { cn as X } from "../../../../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../../../utils/z-index.js";
+import { TipCard as f } from "../../../../tip-card/tip-card.js";
+import { FormattedMessageTyped as o } from "../../../../typed-intl/index.js";
+import { Typography as m } from "../../../../typography/typography.js";
+import { VerticalIndicator as C } from "../../../../vertical-indicator/vertical-indicator.js";
+import { VerticalList as Y } from "../../../../vertical-list/vertical-list.js";
+import { VSpace as R } from "../../../../vspace/vspace.js";
+import { APYFeatureTooltip as p } from "../apy-feature/apy-feature.js";
+import { PointsFeatureTooltip as d } from "../points-feature/points-feature.js";
+import { RewardsTooltipRoot as G } from "./rewards-tooltip-root.js";
+const J = 0;
+function xe({
+  cellInfo: a,
+  targetToken: n,
+  apyList: i,
+  tokensList: c,
+  strategyCreditManagers: x,
+  onClose: T,
+  theme: j = "modal"
+}) {
+  const {
+    maxAPY: F,
+    minCreditManager: l,
+    bonusAPY: v,
+    maxLeverage: P,
+    apyLoading: u,
+    hasPoints: B,
+    isPointsWithAPY: S,
+    rewards: I,
+    debtRewards: A,
+    rewardRates: z,
+    debtRewardRates: D,
+    apyListByNetwork: V,
+    quotaRate: q
+  } = a, k = i?.[n] || 0, h = V?.[l?.chainId || J]?.extraCollateralAPYList?.[l?.pool || $]?.[n], E = S || !B;
+  return /* @__PURE__ */ r(G, { theme: j, children: [
+    T && /* @__PURE__ */ e("div", { style: { position: "absolute", top: "-10px", right: "-10px" }, children: /* @__PURE__ */ e(H, { size: 26, buttonType: "filledDark", onClick: T, children: /* @__PURE__ */ e(U, { icon: M, style: { width: "12px", height: "12px" } }) }) }),
+    /* @__PURE__ */ e(f, { textColor: "dark", children: /* @__PURE__ */ r(
+      y,
+      {
+        title: /* @__PURE__ */ e(o, { messageId: "components.rewardsTooltip.without.title" }),
+        children: [
+          k > 0 && /* @__PURE__ */ e(
+            b,
+            {
+              className: "inline-block align-text-bottom",
+              width: 50,
+              loading: u,
+              children: /* @__PURE__ */ e(p, { value: `${s(k)}%` })
+            }
+          ),
+          h && h.value > 0 && /* @__PURE__ */ e(
+            b,
+            {
+              className: "inline-block align-text-bottom",
+              width: 50,
+              loading: u,
+              children: /* @__PURE__ */ e(
+                p,
+                {
+                  title: /* @__PURE__ */ e(o, { messageId: "components.rewardsTooltip.without.extra" }),
+                  tip: /* @__PURE__ */ e(o, { messageId: "components.rewardsTooltip.without.extra.tip" }),
+                  value: `${s(h.value)}%`
+                }
+              )
+            }
+          ),
+          I.map((t) => /* @__PURE__ */ e(
+            d,
+            {
+              reward: t,
+              points: t.multiplier
+            },
+            ["base", t.multiplier, t.name, t.type, t.units].join("-")
+          )),
+          A.map((t) => /* @__PURE__ */ e(
+            d,
+            {
+              reward: t,
+              points: t.multiplier,
+              tip: /* @__PURE__ */ e(
+                N,
+                {
+                  tokensList: c,
+                  strategyCreditManagers: x,
+                  reward: t
+                }
+              )
+            },
+            ["debt", t.multiplier, t.name, t.type, t.units, t.cm].join(
+              "-"
+            )
+          ))
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(R, { height: 16 }),
+    /* @__PURE__ */ r(f, { textColor: "dark", borderColor: "gradient", children: [
+      /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ r(
+        y,
+        {
+          title: /* @__PURE__ */ e(
+            o,
+            {
+              messageId: "components.rewardsTooltip.with.title",
+              values: {
+                leverage: P > 0 ? `${_(Number(P))}×` : ""
+              }
+            }
+          ),
+          children: [
+            E && /* @__PURE__ */ e(
+              b,
+              {
+                className: "inline-block align-text-bottom",
+                width: 50,
+                loading: u,
+                children: /* @__PURE__ */ e(p, { value: `${s(F)}%` })
+              }
+            ),
+            I.map((t, w) => {
+              const g = z?.[w] || 0n;
+              return /* @__PURE__ */ e(
+                d,
+                {
+                  reward: t,
+                  points: g
+                },
+                ["base", t.multiplier, t.name, t.type, t.units].join(
+                  "-"
+                )
+              );
+            }),
+            A.map((t, w) => {
+              const g = D?.[w] || 0n;
+              return /* @__PURE__ */ e(
+                d,
+                {
+                  reward: t,
+                  points: g,
+                  tip: /* @__PURE__ */ e(
+                    N,
+                    {
+                      tokensList: c,
+                      strategyCreditManagers: x,
+                      reward: t
+                    }
+                  )
+                },
+                [
+                  "debt",
+                  t.multiplier,
+                  t.name,
+                  t.type,
+                  t.units,
+                  t.cm
+                ].join("-")
+              );
+            })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e(W, { margin: 16 }),
+      /* @__PURE__ */ r(Y, { children: [
+        l && /* @__PURE__ */ e(
+          C,
+          {
+            label: /* @__PURE__ */ e(m, { as: "span", color: "secondary", children: /* @__PURE__ */ e(
+              o,
+              {
+                values: {
+                  symbol: c?.[l.underlyingToken]?.title || "Utilization"
+                },
+                messageId: "components.rewardsTooltip.with.borrowRate"
+              }
+            ) }),
+            value: /* @__PURE__ */ e(m, { as: "span", color: "secondary", children: `${s(
+              l.baseBorrowRate
+            )}%` })
+          }
+        ),
+        l && /* @__PURE__ */ e(
+          C,
+          {
+            label: /* @__PURE__ */ e(m, { as: "span", color: "secondary", children: /* @__PURE__ */ e(o, { messageId: "components.rewardsTooltip.with.quotaRate" }) }),
+            value: /* @__PURE__ */ e(m, { as: "span", color: "secondary", children: `${s(Number(q))}%` })
+          }
+        )
+      ] })
+    ] }),
+    v && /* @__PURE__ */ r(L, { children: [
+      /* @__PURE__ */ e(R, { height: 16 }),
+      /* @__PURE__ */ e(
+        f,
+        {
+          backgroundColor: "gray-10",
+          textColor: "light",
+          borderColor: "dark",
+          children: /* @__PURE__ */ e(
+            y,
+            {
+              title: /* @__PURE__ */ e(o, { messageId: "components.rewardsTooltip.with.bonusAPY.title" }),
+              children: /* @__PURE__ */ e("div", { className: "flex-col-12", children: /* @__PURE__ */ e(
+                p,
+                {
+                  theme: "light",
+                  tip: /* @__PURE__ */ e(o, { messageId: "components.rewardsTooltip.with.bonusAPY.tip" }),
+                  value: `${s(v.value)}%`
+                }
+              ) })
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+function y({ title: a, children: n, theme: i = "main" }) {
+  return /* @__PURE__ */ r(L, { children: [
+    /* @__PURE__ */ e("div", { className: X("flex-col-12", i === "main" ? "mb-3" : "mb-2"), children: /* @__PURE__ */ e(
+      m,
+      {
+        as: "span",
+        variant: "bodySmall",
+        weight: i === "main" ? "bold" : "normal",
+        color: i === "main" ? "default" : "secondary",
+        children: a
+      }
+    ) }),
+    /* @__PURE__ */ e("div", { className: "flex-row-row gap-2 w-full", children: n })
+  ] });
+}
+function N({
+  reward: a,
+  strategyCreditManagers: n,
+  tokensList: i
+}) {
+  return a.cm === "any" ? /* @__PURE__ */ e(o, { messageId: "components.strategiesTable.line.points.tipAny" }) : /* @__PURE__ */ e(
+    o,
+    {
+      messageId: "components.strategiesTable.line.points.tip",
+      values: {
+        symbol: i?.[n[a.cm]?.underlyingToken || $]?.title || "unknown"
+      }
+    }
+  );
+}
+export {
+  xe as RewardsTooltipContent
+};