@gearbox-protocol/ui-kit 4.0.0-next.1 → 4.0.0-next.11

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

@@ -1,32 +1,46 @@
-import { jsxs as a, Fragment as f, jsx as g } from "react/jsx-runtime";
-import { useIntlTyped as p } from "../../typed-intl/index.js";
-import { Typography as c } from "../../typography/typography.js";
-import { PageTitleTest as T } from "./constants.js";
-function o(e, t) {
-  return typeof t == "string" ? t : e.formatMessage(t);
+import { jsx as s, jsxs as g, Fragment as p } from "react/jsx-runtime";
+import { createContext as x, useContext as T } from "react";
+import { useIntlTyped as l } from "../../typed-intl/index.js";
+import { Typography as u } from "../../typography/typography.js";
+import { PageTitleTest as y } from "./constants.js";
+const m = x(null);
+function b({
+  children: t,
+  render: e
+}) {
+  return /* @__PURE__ */ s(m.Provider, { value: e, children: t });
+}
+function n(t) {
+  return typeof t == "string" || !!t && typeof t == "object" && "messageId" in t;
+}
+function i(t, e) {
+  return e === void 0 ? "" : typeof e == "string" ? e : t.formatMessage(e);
 }
-function y({
-  title: e,
-  browserTitle: t,
-  head: n,
-  as: i = "h1",
-  className: s
+function I({
+  title: t,
+  browserTitle: e,
+  as: d = "h1",
+  className: f
 }) {
-  const r = p(), m = o(r, e), l = o(r, t ?? e);
-  return /* @__PURE__ */ a(f, { children: [
-    n?.(l),
-    /* @__PURE__ */ g(
-      c,
+  const o = l(), c = T(m), a = n(t) ? i(o, t) : t, r = i(
+    o,
+    e ?? (n(t) ? t : void 0)
+  );
+  return /* @__PURE__ */ g(p, { children: [
+    r ? c?.(r) : null,
+    /* @__PURE__ */ s(
+      u,
       {
-        as: i,
-        className: s ?? "m-0 text-3xl leading-none font-medium",
-        "data-testid": T.root,
-        children: m
+        as: d,
+        className: f ?? "m-0 text-3xl leading-none font-medium",
+        "data-testid": y.root,
+        children: a
       }
     )
   ] });
 }
 export {
-  y as PageTitle,
-  T as PageTitleTest
+  b as PageHeadProvider,
+  I as PageTitle,
+  y as PageTitleTest
 };

package/dist/esm/components/base/pool-apy-breakdown-card/constants.js

@@ -0,0 +1,7 @@
+class a {
+  static root = "pool-apy-breakdown-card-root";
+  static value = "pool-apy-breakdown-card-value";
+}
+export {
+  a as PoolApyBreakdownCardTest
+};

package/dist/esm/components/base/pool-apy-breakdown-card/index.js

@@ -0,0 +1,6 @@
+import { PoolApyBreakdownCardTest as e } from "./constants.js";
+import { PoolApyBreakdownCard as d } from "./pool-apy-breakdown-card.js";
+export {
+  d as PoolApyBreakdownCard,
+  e as PoolApyBreakdownCardTest
+};

package/dist/esm/components/base/pool-apy-breakdown-card/pool-apy-breakdown-card.js

@@ -0,0 +1,58 @@
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { FormattedMessageTyped as n } from "../../typed-intl/index.js";
+import { VerticalIndicator as m } from "../../vertical-indicator/vertical-indicator.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import "clsx";
+import "tailwind-merge";
+import "sonner";
+import { percentTemplate as a } from "../../../utils/format-money.js";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../utils/z-index.js";
+import { SideCard as d } from "../side-card/side-card.js";
+import { PoolApyBreakdownCardTest as i } from "./constants.js";
+function e({
+  title: r,
+  value: t
+}) {
+  return /* @__PURE__ */ o(
+    m,
+    {
+      size: "sm",
+      label: /* @__PURE__ */ o(n, { messageId: r }),
+      value: /* @__PURE__ */ o("span", { "data-testid": i.value, children: t === void 0 ? "—" : a(t / 100) })
+    }
+  );
+}
+function I({
+  data: r
+}) {
+  return /* @__PURE__ */ p(
+    d,
+    {
+      title: "components.poolApyBreakdownCard.title",
+      testId: i.root,
+      children: [
+        /* @__PURE__ */ o(
+          e,
+          {
+            title: "components.poolApyBreakdownCard.organicApy",
+            value: r?.organicApy
+          }
+        ),
+        /* @__PURE__ */ o(
+          e,
+          {
+            title: "components.poolApyBreakdownCard.incentiveApy",
+            value: r?.incentiveApy
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  I as PoolApyBreakdownCard,
+  i as PoolApyBreakdownCardTest
+};

package/dist/esm/components/base/side-card/constants.js

@@ -0,0 +1,8 @@
+class d {
+  static root = "side-card-root";
+  static title = "side-card-title";
+  static body = "side-card-body";
+}
+export {
+  d as SideCardTest
+};

package/dist/esm/components/base/side-card/index.js

@@ -0,0 +1,6 @@
+import { SideCardTest as d } from "./constants.js";
+import { SideCard as t } from "./side-card.js";
+export {
+  t as SideCard,
+  d as SideCardTest
+};

package/dist/esm/components/base/side-card/side-card.js

@@ -0,0 +1,57 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useTitleText as l } from "../text/use-title-text.js";
+import { Typography as p } from "../../typography/typography.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as n } from "../../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../utils/z-index.js";
+import { SideCardTest as r } from "./constants.js";
+function j({
+  title: o,
+  tip: i,
+  children: d,
+  className: a,
+  testId: m
+}) {
+  const s = l();
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: n(
+        "@container flex w-full flex-col gap-4 rounded-lg border border-border bg-card p-4 sm:p-6",
+        a
+      ),
+      "data-testid": m ?? r.root,
+      children: [
+        /* @__PURE__ */ t("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ e(
+            p,
+            {
+              as: "span",
+              variant: "body",
+              className: "m-0 text-base font-semibold leading-none text-card-foreground",
+              "data-testid": r.title,
+              children: s(o)
+            }
+          ),
+          i
+        ] }),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: "grid grid-cols-1 gap-4 @[24rem]:grid-cols-2 @[40rem]:grid-cols-3",
+            "data-testid": r.body,
+            children: d
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  j as SideCard,
+  r as SideCardTest
+};

package/dist/esm/components/base/stat-badge/stat-badge.js

@@ -1,4 +1,4 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import { Stack as g } from "../stack/stack.js";
 import { useTitleText as f } from "../text/use-title-text.js";
 import { Skeleton as u } from "../../skeleton/skeleton.js";
@@ -30,24 +30,24 @@ const p = {
 function A({
   title: i,
   value: r,
-  isLoading: o = !1,
+  isLoading: a = !1,
   size: t = "default",
   action: l,
-  className: s,
+  className: o,
   testId: n
 }) {
   const c = f();
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ s(
     "div",
     {
       className: d(
         "h-full w-full rounded-lg border border-border bg-card",
         p[t],
-        s
+        o
       ),
       "data-testid": n ?? m.root,
       children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ s(
           "div",
           {
             className: d(
@@ -66,7 +66,16 @@ function A({
             ]
           }
         ),
-        /* @__PURE__ */ e("div", { className: d("font-medium text-foreground", h[t]), children: /* @__PURE__ */ e(u, { width: 80, loading: o, children: /* @__PURE__ */ e(g, { gap: "xs", align: "start", children: r }) }) })
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: d(
+              "text-left font-medium text-foreground",
+              h[t]
+            ),
+            children: /* @__PURE__ */ e(u, { width: 80, loading: a, children: /* @__PURE__ */ e(g, { gap: "xs", align: "start", className: "w-full items-start", children: r }) })
+          }
+        )
       ]
     }
   );
@@ -89,7 +98,7 @@ const b = {
 function B({
   cols: i = 1,
   colsLg: r,
-  gap: o = "default",
+  gap: a = "default",
   children: t,
   className: l
 }) {
@@ -100,7 +109,7 @@ function B({
         "grid w-full",
         b[i],
         r ? I[r] : void 0,
-        _[o],
+        _[a],
         l
       ),
       "data-testid": m.grid,

package/dist/esm/components/base/strategy-apy-breakdown-card/constants.js

@@ -0,0 +1,8 @@
+class a {
+  static root = "strategy-apy-breakdown-card-root";
+  static row = "strategy-apy-breakdown-card-row";
+  static net = "strategy-apy-breakdown-card-net";
+}
+export {
+  a as StrategyApyBreakdownCardTest
+};

package/dist/esm/components/base/strategy-apy-breakdown-card/index.js

@@ -0,0 +1,6 @@
+import { StrategyApyBreakdownCardTest as t } from "./constants.js";
+import { StrategyApyBreakdownCard as o } from "./strategy-apy-breakdown-card.js";
+export {
+  o as StrategyApyBreakdownCard,
+  t as StrategyApyBreakdownCardTest
+};

package/dist/esm/components/base/strategy-apy-breakdown-card/strategy-apy-breakdown-card.js

@@ -0,0 +1,214 @@
+import { jsxs as a, jsx as n, Fragment as I } from "react/jsx-runtime";
+import { PointsIcon as P } from "../../points-icon/points-icon.js";
+import { TokenIcon as L } from "../../token-icon/token-icon.js";
+import { FormattedMessageTyped as p } from "../../typed-intl/index.js";
+import "react";
+import { positiveTokenRewardsOf as R, pointProgramsOf as M } from "../../../utils/apy-breakdown.js";
+import "@gearbox-protocol/sdk";
+import { bpsToPercent as T } from "../../../utils/bps.js";
+import { cn as w } from "../../../utils/cn.js";
+import "sonner";
+import { formatLeverage as g } from "../../../utils/format-leverage.js";
+import { formatCompactPercent as $ } from "../../../utils/format-money.js";
+import { formatChipLeverage as C } from "../../../utils/leverage-presets.js";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../utils/z-index.js";
+import { StrategyApyBreakdownCardTest as A } from "./constants.js";
+const u = "—";
+function m(r) {
+  const t = T(r);
+  if (Math.abs(t) >= 1e3) {
+    const i = $(Math.abs(t));
+    return t < 0 ? `−${i}` : i;
+  }
+  const l = Math.abs(t), s = l % 1 === 0 ? String(l) : l.toFixed(1);
+  return t < 0 ? `−${s}%` : `${s}%`;
+}
+function F(r) {
+  return r == null || r <= 0 ? "bg-muted text-muted-foreground" : "bg-success/20 text-success";
+}
+function y({
+  base: r,
+  leverage: t
+}) {
+  return /* @__PURE__ */ n(
+    p,
+    {
+      messageId: "components.strategyApyBreakdownCard.formula",
+      values: { base: r, leverage: t }
+    }
+  );
+}
+function Z({
+  data: r,
+  leverage: t
+}) {
+  const l = t ?? (r.maxLeverage != null && r.maxLeverage > 0 ? r.maxLeverage : void 0), s = l != null ? g(l) : u, i = r.collateralApy ? R(r.collateralApy) : [], k = r.collateralApy ? M(r.collateralApy) : [], N = r.borrowApy != null || r.additionalBorrowApy != null, f = N ? (r.borrowApy ?? 0) + (r.additionalBorrowApy ?? 0) : void 0, B = l != null ? Math.max(l - 1, 0) : void 0, v = r.collateralApy?.organicApy, d = v != null && l != null ? v * l : void 0, c = i.map(
+    (e) => e.supplyApr != null && l != null ? e.supplyApr * l : void 0
+  ), b = f != null && B != null ? -(f * B) : void 0, h = d != null && b != null && c.every((e) => e != null) ? d + c.reduce((e, o) => e + (o ?? 0), 0) + b : d != null && c.every((e) => e != null) && !N ? d + c.reduce((e, o) => e + (o ?? 0), 0) : void 0;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: "flex w-full min-w-0 flex-col gap-4 rounded-xl border border-border bg-card p-4",
+      "data-testid": A.root,
+      children: [
+        /* @__PURE__ */ a("div", { className: "flex h-6 items-center justify-between gap-3", children: [
+          /* @__PURE__ */ n("span", { className: "text-base font-semibold leading-4 text-foreground", children: /* @__PURE__ */ n(
+            p,
+            {
+              messageId: "components.strategyApyBreakdownCard.titleAtLeverage",
+              values: { leverage: s }
+            }
+          ) }),
+          /* @__PURE__ */ n(
+            "span",
+            {
+              className: w(
+                "rounded-md px-2 py-0.5 text-sm font-semibold tabular-nums",
+                F(h)
+              ),
+              "data-testid": A.net,
+              children: h == null ? u : m(h)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a("div", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ n(
+            x,
+            {
+              label: /* @__PURE__ */ n(p, { messageId: "components.strategyApyBreakdownCard.collateralApy" }),
+              value: d == null ? u : m(d),
+              subtext: v != null && l != null ? /* @__PURE__ */ n(
+                y,
+                {
+                  base: m(v),
+                  leverage: g(l)
+                }
+              ) : void 0
+            }
+          ),
+          i.map((e, o) => /* @__PURE__ */ n(
+            x,
+            {
+              label: /* @__PURE__ */ a("span", { className: "inline-flex items-center gap-1.5", children: [
+                /* @__PURE__ */ n("span", { children: /* @__PURE__ */ n(
+                  p,
+                  {
+                    messageId: "components.apyParts.extraAPY",
+                    values: { symbol: e.token.symbol }
+                  }
+                ) }),
+                /* @__PURE__ */ n(
+                  L,
+                  {
+                    token: e.token,
+                    symbol: e.token.symbol,
+                    size: 16,
+                    className: "shrink-0"
+                  }
+                )
+              ] }),
+              value: c[o] == null ? u : m(c[o]),
+              subtext: e.supplyApr != null && l != null ? /* @__PURE__ */ n(
+                y,
+                {
+                  base: m(e.supplyApr),
+                  leverage: g(l)
+                }
+              ) : void 0
+            },
+            `incentive-${e.token.address}-${e.supplyApr ?? 0}`
+          )),
+          /* @__PURE__ */ n(
+            x,
+            {
+              muted: !0,
+              label: /* @__PURE__ */ n(p, { messageId: "components.strategyApyBreakdownCard.borrowRate" }),
+              value: b == null ? u : m(b),
+              subtext: f != null && l != null ? /* @__PURE__ */ n(
+                y,
+                {
+                  base: m(f),
+                  leverage: g(l)
+                }
+              ) : void 0
+            }
+          ),
+          k.length > 0 ? /* @__PURE__ */ a(I, { children: [
+            /* @__PURE__ */ n("div", { className: "h-px w-full bg-divider" }),
+            k.map((e) => {
+              const o = e.multiplier != null && l != null ? e.multiplier * l : void 0;
+              return /* @__PURE__ */ n(
+                x,
+                {
+                  label: /* @__PURE__ */ a("span", { className: "inline-flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ n("span", { children: /* @__PURE__ */ n(
+                      p,
+                      {
+                        messageId: "components.yieldBreakdown.programPoints",
+                        values: { name: e.name }
+                      }
+                    ) }),
+                    /* @__PURE__ */ n(
+                      P,
+                      {
+                        reward: { name: e.name, type: e.id },
+                        size: 16,
+                        className: "shrink-0"
+                      }
+                    )
+                  ] }),
+                  value: o != null ? `${C(o)}×` : u,
+                  subtext: e.multiplier != null && l != null ? /* @__PURE__ */ n(
+                    y,
+                    {
+                      base: C(e.multiplier),
+                      leverage: g(l)
+                    }
+                  ) : void 0
+                },
+                e.id
+              );
+            })
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+}
+function x({
+  label: r,
+  value: t,
+  subtext: l,
+  muted: s = !1
+}) {
+  const i = s ? "text-muted-foreground" : "text-foreground";
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: "flex items-start justify-between gap-3",
+      "data-testid": A.row,
+      children: [
+        /* @__PURE__ */ n("span", { className: w("min-w-0 text-sm font-semibold leading-5", i), children: r }),
+        /* @__PURE__ */ a("span", { className: "flex shrink-0 flex-col items-end", children: [
+          /* @__PURE__ */ n(
+            "span",
+            {
+              className: w(
+                "text-sm font-semibold leading-5 tabular-nums",
+                t === u || s ? "text-muted-foreground" : "text-foreground"
+              ),
+              children: t
+            }
+          ),
+          l != null ? /* @__PURE__ */ n("span", { className: "text-xs leading-4 text-muted-foreground", children: l }) : null
+        ] })
+      ]
+    }
+  );
+}
+export {
+  Z as StrategyApyBreakdownCard,
+  A as StrategyApyBreakdownCardTest
+};