@gearbox-protocol/ui-kit 4.0.0-next.17 → 4.0.0-next.19

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

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

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

@@ -69,7 +69,7 @@ function E({
   maxLeverage: p,
   collateralApy: r,
   borrowApy: d,
-  additionalBorrowApy: a,
+  quotaRate: a,
   decimals: m = 2,
   className: o
 }) {
@@ -89,7 +89,7 @@ function E({
       maxLeverage: p,
       collateralApy: r,
       borrowApy: d,
-      additionalBorrowApy: a,
+      quotaRate: a,
       className: o,
       children: s()
     }

package/dist/esm/components/hf-indicator/hf-indicator.js

@@ -1,33 +1,59 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-const o = [
-  [92, 0.8],
-  [104, 0.6],
-  [116, 0.4],
-  [128, 0.2]
-];
-function a(r) {
-  return 4 - Math.floor((r - 80) / 12);
-}
-function d({
-  value: r = "1.05"
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+const d = {
+  sm: {
+    core: 40,
+    rings: [
+      [46, 0.6],
+      [52, 0.3]
+    ],
+    font: "text-xs"
+  },
+  md: {
+    core: 80,
+    rings: [
+      [92, 0.8],
+      [104, 0.6],
+      [116, 0.4],
+      [128, 0.2]
+    ],
+    font: "text-[21px]"
+  }
+};
+function f({
+  value: o,
+  size: i = "md"
 }) {
-  return /* @__PURE__ */ l("div", { className: "relative m-6 flex w-[80px] h-[80px] justify-center items-center", children: [
-    o.map(([e, n]) => /* @__PURE__ */ t(
-      "div",
-      {
-        className: "absolute top-1/2 left-1/2 rounded-full border border-solid -translate-x-1/2 -translate-y-1/2 bg-transparent",
-        style: {
-          zIndex: a(e),
-          width: `${e}px`,
-          height: `${e}px`,
-          borderColor: `color-mix(in srgb, var(--color-destructive) ${n * 100}%, transparent)`
-        }
-      },
-      e
-    )),
-    /* @__PURE__ */ t("div", { className: "relative z-[5] flex w-[80px] h-[80px] justify-center items-center rounded-full bg-destructive", children: /* @__PURE__ */ t("span", { className: "text-[21px] font-bold", children: r }) })
-  ] });
+  const { core: t, rings: e, font: l } = d[i], n = e[e.length - 1]?.[0] ?? t;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: "relative flex shrink-0 items-center justify-center",
+      style: { width: n, height: n },
+      children: [
+        e.map(([r, c]) => /* @__PURE__ */ s(
+          "div",
+          {
+            className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border border-solid bg-transparent",
+            style: {
+              width: r,
+              height: r,
+              borderColor: `color-mix(in srgb, var(--color-destructive) ${c * 100}%, transparent)`
+            }
+          },
+          r
+        )),
+        /* @__PURE__ */ s(
+          "div",
+          {
+            className: "relative z-[1] flex items-center justify-center rounded-full bg-destructive",
+            style: { width: t, height: t },
+            children: /* @__PURE__ */ s("span", { className: `${l} font-bold`, children: o })
+          }
+        )
+      ]
+    }
+  );
 }
 export {
-  d as HFIndicator
+  f as HFIndicator
 };

package/dist/esm/components/yield-breakdown-tooltip/yield-breakdown-tooltip.js

@@ -1,35 +1,34 @@
-import { jsxs as a, jsx as e, Fragment as P } from "react/jsx-runtime";
-import { PointsIcon as A } from "../points-icon/points-icon.js";
-import { TokenIcon as I } from "../token-icon/token-icon.js";
-import { SimpleTooltip as T } from "../tooltip/simple-tooltip.js";
+import { jsxs as a, jsx as e, Fragment as k } from "react/jsx-runtime";
+import { PointsIcon as N } from "../points-icon/points-icon.js";
+import { TokenIcon as P } from "../token-icon/token-icon.js";
+import { SimpleTooltip as A } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
 import { FormattedMessageTyped as s } from "../typed-intl/index.js";
 import "react";
-import { tokenRewardsOf as B, pointProgramsOf as R, totalApyOf as $ } from "../../utils/apy-breakdown.js";
+import { tokenRewardsOf as I, pointProgramsOf as B, totalApyOf as T } from "../../utils/apy-breakdown.js";
 import "@gearbox-protocol/sdk";
-import { bpsToPercent as j } from "../../utils/bps.js";
+import { bpsToPercent as $ } from "../../utils/bps.js";
 import { cn as p } from "../../utils/cn.js";
 import "sonner";
-import { formatLeverage as S } from "../../utils/format-leverage.js";
-import { formatCompactPercent as C } from "../../utils/format-money.js";
-import { strategyQuotaRate as O } from "../../utils/strategy-apy.js";
+import { formatLeverage as j } from "../../utils/format-leverage.js";
+import { formatCompactPercent as S } from "../../utils/format-money.js";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 function i(n) {
-  const o = j(n), r = C(Math.abs(o));
+  const o = $(n), r = S(Math.abs(o));
   return o < 0 ? `-${r}` : r;
 }
-function L({
+function V({
   supplyApy: n,
   maxLeverage: o,
   collateralApy: r,
   borrowApy: c,
-  additionalBorrowApy: u,
+  quotaRate: u,
   children: h,
   className: f
 }) {
-  const g = o !== void 0 && o > 0, l = r ?? n, y = B(l), w = R(n), b = $(n), v = c != null || u != null, k = O({ additionalBorrowApy: u, maxLeverage: o }), d = v ? -((c ?? 0) + k) : void 0, x = w.filter((t) => t.multiplier != null), N = /* @__PURE__ */ a(
+  const g = o !== void 0 && o > 0, l = r ?? n, w = I(l), y = B(n), b = T(n), d = c != null || u != null ? -((c ?? 0) + (u ?? 0)) : void 0, x = y.filter((t) => t.multiplier != null), v = /* @__PURE__ */ a(
     "div",
     {
       className: p(
@@ -47,7 +46,7 @@ function L({
             {
               messageId: "components.yieldBreakdown.titleNetAtLeverage",
               values: {
-                leverage: S(o)
+                leverage: j(o)
               }
             }
           ) : /* @__PURE__ */ e(s, { messageId: "components.apyParts.totalAPY" }) }),
@@ -70,7 +69,7 @@ function L({
             value: i(l.organicApy)
           }
         ),
-        y.map((t) => t.supplyApr == null ? null : /* @__PURE__ */ e(
+        w.map((t) => t.supplyApr == null ? null : /* @__PURE__ */ e(
           m,
           {
             muted: t.supplyApr < 0,
@@ -82,7 +81,7 @@ function L({
                   values: { symbol: t.token.symbol }
                 }
               ) }),
-              /* @__PURE__ */ e(I, { token: t.token, size: 20 })
+              /* @__PURE__ */ e(P, { token: t.token, size: 20 })
             ] }),
             value: i(t.supplyApr)
           },
@@ -96,7 +95,7 @@ function L({
             value: i(d)
           }
         ),
-        x.length > 0 && /* @__PURE__ */ a(P, { children: [
+        x.length > 0 && /* @__PURE__ */ a(k, { children: [
           /* @__PURE__ */ e("div", { className: "h-px w-full bg-divider" }),
           x.map((t) => /* @__PURE__ */ e(
             m,
@@ -110,7 +109,7 @@ function L({
                   }
                 ) }),
                 /* @__PURE__ */ e(
-                  A,
+                  N,
                   {
                     reward: {
                       name: t.name,
@@ -129,7 +128,7 @@ function L({
     }
   );
   return /* @__PURE__ */ e(
-    T,
+    A,
     {
       placement: "bottom",
       triangle: !1,
@@ -138,7 +137,7 @@ function L({
       maxWidth: "100%",
       title: /* @__PURE__ */ e("span", { className: f, children: h }),
       triggerClassName: f,
-      children: N
+      children: v
     }
   );
 }
@@ -162,5 +161,5 @@ function m({
   ] });
 }
 export {
-  L as YieldBreakdownTooltip
+  V as YieldBreakdownTooltip
 };