@gearbox-protocol/ui-kit 4.0.0-next.26 → 4.0.0-next.28

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

@@ -1,213 +1,168 @@
-import { jsxs as n, jsx as e, Fragment as k } from "react/jsx-runtime";
-import { PointsIcon as w } from "../../points-icon/points-icon.js";
-import { TokenIcon as N } from "../../token-icon/token-icon.js";
-import { FormattedMessageTyped as l } from "../../typed-intl/index.js";
-import "react";
-import { totalApyOf as A, positiveTokenRewardsOf as I, pointProgramsOf as B } from "../../../utils/apy-breakdown.js";
-import "@gearbox-protocol/sdk/onchain";
-import { bpsToPercent as C } from "../../../utils/bps.js";
-import { cn as g } from "../../../utils/cn.js";
-import "sonner";
-import { formatLeverage as d } from "../../../utils/format-leverage.js";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
-import "../../../utils/z-index.js";
-import { StrategyApyBreakdownCardTest as i } from "./constants.js";
-const T = "—";
-function G({
-  data: s,
-  showFormula: o = !1
+import { jsxs as d, jsx as t, Fragment as b } from "react/jsx-runtime";
+import { ApyBreakdownBody as B, formatBreakdownRate as n, ApyBreakdownRow as m, periodMessageId as y, ApyBreakdownDivider as T, BREAKDOWN_DASH as h } from "../apy-breakdown-body/apy-breakdown-body.js";
+import { PointsIcon as x } from "../../points-icon/points-icon.js";
+import { TokenIcon as C } from "../../token-icon/token-icon.js";
+import { FormattedMessageTyped as s } from "../../typed-intl/index.js";
+import { totalApyOf as N, positiveTokenRewardsOf as R, pointProgramsOf as P } from "../../../utils/apy-breakdown.js";
+import { formatLeverage as l } from "../../../utils/format-leverage.js";
+import { StrategyApyBreakdownCardTest as o } from "./constants.js";
+function E({
+  data: r,
+  showFormula: p = !1,
+  period: c
 }) {
-  const { leverage: a, collateralApy: r } = s, c = A(s.netApy), u = c + s.borrowCost, h = r ? I(r) : [], b = r ? B(r) : [], v = h.map((t) => ({
-    reward: t,
-    value: Math.round(a * (t.supplyApr ?? 0))
-  })), x = u - v.reduce((t, f) => t + f.value, 0), y = a > 0 ? x / a : void 0;
-  return /* @__PURE__ */ n(
-    "div",
+  const { leverage: a, collateralApy: i } = r, u = N(r.netApy), f = u + r.borrowCost, w = i ? R(i) : [], g = i ? P(i) : [], k = w.map((e) => ({
+    reward: e,
+    value: Math.round(a * (e.supplyApr ?? 0))
+  })), I = f - k.reduce((e, v) => e + v.value, 0), A = a > 0 ? I / a : void 0;
+  return /* @__PURE__ */ d(
+    B,
     {
-      className: "flex w-full min-w-0 flex-col gap-4 rounded-xl border border-border bg-card p-4",
-      "data-testid": i.root,
+      testId: o.root,
+      title: /* @__PURE__ */ t(
+        s,
+        {
+          messageId: y(
+            c,
+            "components.yieldBreakdown.titleNetAtLeverage",
+            "components.yieldBreakdown.titleNetAtLeverage7d"
+          ),
+          values: { leverage: l(a) }
+        }
+      ),
+      chip: n(u),
+      chipPositive: u > 0,
+      chipTestId: o.net,
       children: [
-        /* @__PURE__ */ n("div", { className: "flex h-6 items-center justify-between gap-3", children: [
-          /* @__PURE__ */ e("span", { className: "text-base font-semibold leading-4 text-foreground", children: /* @__PURE__ */ e(
-            l,
-            {
-              messageId: "components.yieldBreakdown.titleNetAtLeverage",
-              values: { leverage: d(a) }
-            }
-          ) }),
-          /* @__PURE__ */ e(
-            "span",
-            {
-              className: g(
-                "rounded-md px-2 py-0.5 text-sm font-semibold tabular-nums",
-                c > 0 ? "bg-success/20 text-success" : "bg-muted text-muted-foreground"
-              ),
-              "data-testid": i.net,
-              children: m(c)
-            }
-          )
-        ] }),
-        /* @__PURE__ */ n("div", { className: "flex flex-col gap-3", children: [
-          /* @__PURE__ */ e(
-            p,
-            {
-              testId: i.collateral,
-              label: /* @__PURE__ */ e(l, { messageId: "components.yieldBreakdown.collateralApy" }),
-              value: m(x),
-              subtext: o && y !== void 0 ? /* @__PURE__ */ e(
-                l,
+        /* @__PURE__ */ t(
+          m,
+          {
+            testId: o.collateral,
+            valueTestId: o.value,
+            captionTestId: o.caption,
+            label: /* @__PURE__ */ t(
+              s,
+              {
+                messageId: y(
+                  c,
+                  "components.yieldBreakdown.collateralApy",
+                  "components.yieldBreakdown.collateralApy7d"
+                )
+              }
+            ),
+            value: n(I),
+            subtext: p && A !== void 0 ? /* @__PURE__ */ t(
+              s,
+              {
+                messageId: "components.strategyApyBreakdownCard.formula",
+                values: {
+                  leverage: l(a),
+                  base: n(A)
+                }
+              }
+            ) : void 0
+          }
+        ),
+        k.map(({ reward: e, value: v }) => /* @__PURE__ */ t(
+          m,
+          {
+            valueTestId: o.value,
+            captionTestId: o.caption,
+            label: /* @__PURE__ */ d("span", { className: "inline-flex items-center gap-1.5", children: [
+              /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(
+                s,
                 {
-                  messageId: "components.strategyApyBreakdownCard.formula",
-                  values: {
-                    leverage: d(a),
-                    base: m(y)
-                  }
+                  messageId: "components.apyParts.extraAPY",
+                  values: { symbol: e.token.symbol }
                 }
-              ) : void 0
-            }
-          ),
-          v.map(({ reward: t, value: f }) => /* @__PURE__ */ e(
-            p,
+              ) }),
+              /* @__PURE__ */ t(
+                C,
+                {
+                  token: e.token,
+                  symbol: e.token.symbol,
+                  size: 16,
+                  className: "shrink-0"
+                }
+              )
+            ] }),
+            value: n(v),
+            subtext: p ? /* @__PURE__ */ t(
+              s,
+              {
+                messageId: "components.strategyApyBreakdownCard.formula",
+                values: {
+                  leverage: l(a),
+                  base: n(e.supplyApr ?? 0)
+                }
+              }
+            ) : void 0
+          },
+          `incentive-${e.token.address}-${e.supplyApr ?? 0}`
+        )),
+        /* @__PURE__ */ t(
+          m,
+          {
+            muted: !0,
+            testId: o.borrow,
+            valueTestId: o.value,
+            label: /* @__PURE__ */ t(
+              s,
+              {
+                messageId: y(
+                  c,
+                  "components.yieldBreakdown.borrowRate",
+                  "components.yieldBreakdown.borrowRate7d"
+                )
+              }
+            ),
+            value: n(-r.borrowCost)
+          }
+        ),
+        g.length > 0 ? /* @__PURE__ */ d(b, { children: [
+          /* @__PURE__ */ t(T, {}),
+          g.map((e) => /* @__PURE__ */ t(
+            m,
             {
-              label: /* @__PURE__ */ n("span", { className: "inline-flex items-center gap-1.5", children: [
-                /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
-                  l,
+              valueTestId: o.points,
+              captionTestId: o.caption,
+              label: /* @__PURE__ */ d("span", { className: "inline-flex items-center gap-1.5", children: [
+                /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(
+                  s,
                   {
-                    messageId: "components.apyParts.extraAPY",
-                    values: { symbol: t.token.symbol }
+                    messageId: "components.yieldBreakdown.programPoints",
+                    values: { name: e.name }
                   }
                 ) }),
-                /* @__PURE__ */ e(
-                  N,
+                /* @__PURE__ */ t(
+                  x,
                   {
-                    token: t.token,
-                    symbol: t.token.symbol,
+                    reward: { name: e.name, type: e.id },
                     size: 16,
                     className: "shrink-0"
                   }
                 )
               ] }),
-              value: m(f),
-              subtext: o ? /* @__PURE__ */ e(
-                l,
+              value: e.multiplier != null ? `${l(e.multiplier * a)}×` : h,
+              subtext: p && e.multiplier != null ? /* @__PURE__ */ t(
+                s,
                 {
                   messageId: "components.strategyApyBreakdownCard.formula",
                   values: {
-                    leverage: d(a),
-                    base: m(t.supplyApr ?? 0)
+                    leverage: l(a),
+                    base: l(e.multiplier)
                   }
                 }
               ) : void 0
             },
-            `incentive-${t.token.address}-${t.supplyApr ?? 0}`
-          )),
-          /* @__PURE__ */ e(
-            p,
-            {
-              muted: !0,
-              testId: i.borrow,
-              label: /* @__PURE__ */ e(l, { messageId: "components.yieldBreakdown.borrowRate" }),
-              value: m(-s.borrowCost)
-            }
-          ),
-          b.length > 0 ? /* @__PURE__ */ n(k, { children: [
-            /* @__PURE__ */ e("div", { className: "h-px w-full bg-divider" }),
-            b.map((t) => /* @__PURE__ */ e(
-              p,
-              {
-                valueTestId: i.points,
-                label: /* @__PURE__ */ n("span", { className: "inline-flex items-center gap-1.5", children: [
-                  /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
-                    l,
-                    {
-                      messageId: "components.yieldBreakdown.programPoints",
-                      values: { name: t.name }
-                    }
-                  ) }),
-                  /* @__PURE__ */ e(
-                    w,
-                    {
-                      reward: { name: t.name, type: t.id },
-                      size: 16,
-                      className: "shrink-0"
-                    }
-                  )
-                ] }),
-                value: t.multiplier != null ? `${d(t.multiplier * a)}×` : T,
-                subtext: o && t.multiplier != null ? /* @__PURE__ */ e(
-                  l,
-                  {
-                    messageId: "components.strategyApyBreakdownCard.formula",
-                    values: {
-                      leverage: d(a),
-                      base: d(t.multiplier)
-                    }
-                  }
-                ) : void 0
-              },
-              t.id
-            ))
-          ] }) : null
-        ] })
-      ]
-    }
-  );
-}
-function m(s) {
-  const o = C(s), a = `${Math.abs(o).toFixed(2)}%`;
-  return o < 0 ? `−${a}` : a;
-}
-function p({
-  label: s,
-  value: o,
-  subtext: a,
-  muted: r = !1,
-  testId: c,
-  valueTestId: u = i.value
-}) {
-  return /* @__PURE__ */ n(
-    "div",
-    {
-      className: "flex items-start justify-between gap-3",
-      "data-testid": c,
-      children: [
-        /* @__PURE__ */ e(
-          "span",
-          {
-            className: g(
-              "min-w-0 text-sm font-semibold leading-5",
-              r ? "text-muted-foreground" : "text-foreground"
-            ),
-            children: s
-          }
-        ),
-        /* @__PURE__ */ n("span", { className: "flex shrink-0 flex-col items-end", children: [
-          /* @__PURE__ */ e(
-            "span",
-            {
-              className: g(
-                "text-sm font-semibold leading-5 tabular-nums",
-                r ? "text-muted-foreground" : "text-foreground"
-              ),
-              "data-testid": u,
-              children: o
-            }
-          ),
-          a != null ? /* @__PURE__ */ e(
-            "span",
-            {
-              className: "text-xs leading-4 text-muted-foreground",
-              "data-testid": i.caption,
-              children: a
-            }
-          ) : null
-        ] })
+            e.id
+          ))
+        ] }) : null
       ]
     }
   );
 }
 export {
-  G as StrategyApyBreakdownCard,
-  i as StrategyApyBreakdownCardTest
+  E as StrategyApyBreakdownCard,
+  o as StrategyApyBreakdownCardTest
 };

package/dist/esm/components/base/values/scalars.js

@@ -18,14 +18,15 @@ const x = "—";
 function n() {
   return /* @__PURE__ */ r("span", { "data-testid": i.placeholder, children: x });
 }
-function l(t) {
+function s(t) {
   return `${h(t / 100, 2)}%`;
 }
 function H({
   data: t,
-  tooltip: e = !0
+  tooltip: e = !0,
+  period: o
 }) {
-  return t === void 0 ? /* @__PURE__ */ r(n, {}) : typeof t == "number" ? /* @__PURE__ */ r("span", { "data-testid": i.apy, children: l(t) }) : /* @__PURE__ */ r("span", { "data-testid": i.apy, children: /* @__PURE__ */ r(p, { apy: t, tooltip: e }) });
+  return t === void 0 ? /* @__PURE__ */ r(n, {}) : typeof t == "number" ? /* @__PURE__ */ r("span", { "data-testid": i.apy, children: s(t) }) : /* @__PURE__ */ r("span", { "data-testid": i.apy, children: /* @__PURE__ */ r(p, { apy: t, tooltip: e, period: o }) });
 }
 function N({
   data: t
@@ -40,7 +41,7 @@ function w({
 function D({
   data: t
 }) {
-  return t === void 0 ? /* @__PURE__ */ r(n, {}) : /* @__PURE__ */ r("span", { "data-testid": i.utilization, children: l(t) });
+  return t === void 0 ? /* @__PURE__ */ r(n, {}) : /* @__PURE__ */ r("span", { "data-testid": i.utilization, children: s(t) });
 }
 function M({
   data: t
@@ -53,26 +54,26 @@ function M({
 function O({
   data: t,
   token: e,
-  showSymbol: s = !0
+  showSymbol: o = !0
 }) {
   if (t === void 0 || e === void 0)
     return /* @__PURE__ */ r(n, {});
-  const o = u(t, e.decimals);
+  const l = u(t, e.decimals);
   return (
     // `title` also keeps the amount where a hover tooltip cannot reach:
     // keyboard, touch, and the browser's own find — and keeps the symbol
     // reachable there even when the row is the one printing it
-    /* @__PURE__ */ m("span", { "data-testid": i.tokenBigint, title: `${o} ${e.symbol}`, children: [
+    /* @__PURE__ */ m("span", { "data-testid": i.tokenBigint, title: `${l} ${e.symbol}`, children: [
       /* @__PURE__ */ r(
         a,
         {
           placement: "top",
           className: "break-all",
           title: /* @__PURE__ */ r("span", { children: d(t, e.decimals) }),
-          children: /* @__PURE__ */ r("span", { children: o })
+          children: /* @__PURE__ */ r("span", { children: l })
         }
       ),
-      s && ` ${e.symbol}`
+      o && ` ${e.symbol}`
     ] })
   );
 }
@@ -83,5 +84,5 @@ export {
   O as TokenBigint,
   N as UsdValue,
   D as UtilizationValue,
-  l as bps
+  s as bps
 };

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

@@ -1,18 +1,18 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { useId as w } from "react";
-import { YieldBreakdownTooltip as x } from "../yield-breakdown-tooltip/yield-breakdown-tooltip.js";
-import { totalApyOf as v, positiveTokenRewardsOf as C, pointProgramsOf as I } from "../../utils/apy-breakdown.js";
+import { useId as x } from "react";
+import { YieldBreakdownTooltip as v } from "../yield-breakdown-tooltip/yield-breakdown-tooltip.js";
+import { totalApyOf as C, positiveTokenRewardsOf as I, pointProgramsOf as k } from "../../utils/apy-breakdown.js";
 import "@gearbox-protocol/sdk/onchain";
-import { bpsToPercent as k } from "../../utils/bps.js";
-import { cn as P } from "../../utils/cn.js";
+import { bpsToPercent as P } from "../../utils/bps.js";
+import { cn as A } from "../../utils/cn.js";
 import "sonner";
-import { formatCompactPercent as A } from "../../utils/format-money.js";
+import { formatCompactPercent as O } from "../../utils/format-money.js";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const l = 14;
-function O() {
-  const t = `additional-incentives-${w().replace(/:/g, "")}`;
+function F() {
+  const t = `additional-incentives-${x().replace(/:/g, "")}`;
   return /* @__PURE__ */ r(
     "svg",
     {
@@ -62,9 +62,9 @@ function O() {
   );
 }
 function c(t) {
-  return t == null ? !1 : C(t).length > 0 || I(t).length > 0;
+  return t == null ? !1 : I(t).length > 0 || k(t).length > 0;
 }
-function U({
+function Z({
   apy: t,
   maxLeverage: p,
   collateralApy: n,
@@ -72,30 +72,32 @@ function U({
   quotaRate: a,
   decimals: m = 2,
   tooltip: f = !0,
+  period: h,
   className: o
 }) {
   if (!t)
     return /* @__PURE__ */ e("span", { className: "text-secondary-foreground", children: "—" });
-  const i = v(t), h = c(t) || c(n), u = f && i >= 1, s = () => {
-    const g = A(k(i), m);
-    return /* @__PURE__ */ r("div", { className: P("inline-flex items-center gap-1.5", o), children: [
-      /* @__PURE__ */ e("span", { className: "inline-flex items-center", children: g }),
-      h ? /* @__PURE__ */ e(O, {}) : null
+  const i = C(t), u = c(t) || c(n), g = f && i >= 1, s = () => {
+    const w = O(P(i), m);
+    return /* @__PURE__ */ r("div", { className: A("inline-flex items-center gap-1.5", o), children: [
+      /* @__PURE__ */ e("span", { className: "inline-flex items-center", children: w }),
+      u ? /* @__PURE__ */ e(F, {}) : null
     ] });
   };
-  return u ? /* @__PURE__ */ e(
-    x,
+  return g ? /* @__PURE__ */ e(
+    v,
     {
       supplyApy: t,
       maxLeverage: p,
       collateralApy: n,
       borrowApy: d,
       quotaRate: a,
+      period: h,
       className: o,
       children: s()
     }
   ) : s();
 }
 export {
-  U as CompoundAPY
+  Z as CompoundAPY
 };