@gearbox-protocol/ui-kit 4.0.0-next.20 → 4.0.0-next.21

package/dist/esm/components/base/position-assets/position-assets.js

@@ -1,5 +1,5 @@
-import { jsx as i, jsxs as p } from "react/jsx-runtime";
-import { Stack as d } from "../stack/stack.js";
+import { jsx as n, jsxs as m, Fragment as p } from "react/jsx-runtime";
+import { Stack as h } from "../stack/stack.js";
 import "react";
 import "@gearbox-protocol/sdk";
 import "clsx";
@@ -9,65 +9,88 @@ import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../../utils/z-index.js";
 import "../../points-icon/points-icon.js";
-import { TokenBigint as c } from "../values/scalars.js";
+import { TokenBigint as d } from "../values/scalars.js";
 import "../../badge/badge.js";
 import "../../badge/chip.js";
 import "react-intl";
-import { TokenSymbol as f } from "../../token-symbol/token-symbol.js";
-import { Typography as u } from "../../typography/typography.js";
-import { PositionAssetsTest as m } from "./constants.js";
-const k = 1;
-function _({
-  assets: r,
-  against: e,
-  empty: s,
-  testId: n
+import { ShortString as f } from "../../short-string/short-string.js";
+import { TokenSymbol as u } from "../../token-symbol/token-symbol.js";
+import { Typography as k } from "../../typography/typography.js";
+import { PositionAssetsTest as c } from "./constants.js";
+const v = 1, g = 20;
+function Y({
+  assets: s,
+  to: e,
+  empty: a,
+  testId: i
 }) {
-  const t = h(r, e);
-  return /* @__PURE__ */ i(d, { gap: "sm", align: "end", "data-testid": n ?? m.root, children: t.length === 0 ? s !== void 0 && /* @__PURE__ */ i(
-    u,
+  const t = y(s, e), r = e !== void 0;
+  return /* @__PURE__ */ n(h, { gap: "sm", align: "end", "data-testid": i ?? c.root, children: t.length === 0 ? a !== void 0 && /* @__PURE__ */ n(
+    k,
     {
       variant: "caption",
       color: "secondary",
       as: "div",
-      "data-testid": m.empty,
-      children: s
+      "data-testid": c.empty,
+      children: a
     }
-  ) : t.map((o) => /* @__PURE__ */ p(
+  ) : t.map((o) => /* @__PURE__ */ m(
     "span",
     {
       className: "flex items-center gap-2",
-      "data-testid": m.row,
+      "data-testid": c.row,
       children: [
-        /* @__PURE__ */ i(f, { size: 20, token: o.token }),
-        /* @__PURE__ */ i(c, { data: o.value, token: o.token })
+        /* @__PURE__ */ n(u, { size: 20, token: o.token }),
+        /* @__PURE__ */ m("span", { className: "flex items-center", children: [
+          r && /* @__PURE__ */ m(p, { children: [
+            /* @__PURE__ */ n("span", { className: "text-secondary-foreground line-through [&_*]:text-secondary-foreground [&_*]:line-through", children: /* @__PURE__ */ n(
+              d,
+              {
+                data: o.value,
+                token: o.token,
+                showSymbol: !1
+              }
+            ) }),
+            /* @__PURE__ */ n("span", { className: "px-1.5 text-gray-70", children: "→" })
+          ] }),
+          /* @__PURE__ */ n(
+            d,
+            {
+              data: r ? o.valueTo : o.value,
+              token: o.token,
+              showSymbol: !1
+            }
+          ),
+          /* @__PURE__ */ n(f, { className: "ml-1", maxLength: g, children: o.token.symbol })
+        ] })
       ]
     },
     o.token.address
   )) });
 }
-function h(r, e) {
-  const s = /* @__PURE__ */ new Map(), n = (t, o) => {
-    const l = t.token.address.toLowerCase(), a = s.get(l);
-    s.set(l, {
-      token: a?.token ?? t.token,
-      // a token the other side alone holds is a zero here, not a gap
-      value: o ? t.value : a?.value ?? 0n,
-      worth: v(a?.worth, t.valueUsd)
+function y(s, e) {
+  const a = /* @__PURE__ */ new Map(), i = (t, r) => {
+    const o = t.token.address.toLowerCase(), l = a.get(o);
+    a.set(o, {
+      token: l?.token ?? t.token,
+      // a token only the other side holds is a zero here, not a gap
+      value: r === "from" ? t.value : l?.value ?? 0n,
+      valueTo: r === "to" ? t.value : l?.valueTo ?? 0n,
+      worth: x(l?.worth, t.valueUsd)
     });
   };
-  for (const t of r ?? []) n(t, !0);
-  for (const t of e ?? []) n(t, !1);
-  return [...s.values()].filter((t) => t.worth === null || t.worth >= k).sort(
-    (t, o) => (o.worth ?? 0) - (t.worth ?? 0) || // a tie has to break the same way on both sides, or the rows drift
-    t.token.address.localeCompare(o.token.address)
+  for (const t of s ?? []) i(t, "from");
+  for (const t of e ?? []) i(t, "to");
+  return [...a.values()].filter((t) => t.worth === null || t.worth >= v).sort(
+    (t, r) => (r.worth ?? 0) - (t.worth ?? 0) || // a tie has to break the same way every render, or the rows drift
+    t.token.address.localeCompare(r.token.address)
   );
 }
-function v(r, e) {
-  return r === void 0 ? e : r === null || e === null ? null : Math.max(r, e);
+function x(s, e) {
+  return s === void 0 ? e : s === null || e === null ? null : Math.max(s, e);
 }
 export {
-  _ as PositionAssets,
-  m as PositionAssetsTest,
-  h as visibleAssets
+  Y as PositionAssets,
+  c as PositionAssetsTest,
+  y as visibleAssets
 };

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

@@ -1,8 +1,12 @@
-class a {
+class t {
   static root = "strategy-apy-breakdown-card-root";
-  static row = "strategy-apy-breakdown-card-row";
   static net = "strategy-apy-breakdown-card-net";
+  static collateral = "strategy-apy-breakdown-card-collateral";
+  static borrow = "strategy-apy-breakdown-card-borrow";
+  static value = "strategy-apy-breakdown-card-value";
+  static points = "strategy-apy-breakdown-card-points";
+  static caption = "strategy-apy-breakdown-card-caption";
 }
 export {
-  a as StrategyApyBreakdownCardTest
+  t as StrategyApyBreakdownCardTest
 };

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

@@ -1,239 +1,213 @@
-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 { 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 { positiveTokenRewardsOf as M, pointProgramsOf as L, totalApyOf as T } from "../../../utils/apy-breakdown.js";
+import { totalApyOf as A, positiveTokenRewardsOf as I, pointProgramsOf as B } from "../../../utils/apy-breakdown.js";
 import "@gearbox-protocol/sdk";
-import { bpsToPercent as $ } from "../../../utils/bps.js";
-import { cn as h } from "../../../utils/cn.js";
+import { bpsToPercent as C } from "../../../utils/bps.js";
+import { cn as g } from "../../../utils/cn.js";
 import "sonner";
-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 { formatLeverage as d } from "../../../utils/format-leverage.js";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../../utils/z-index.js";
-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(n).toFixed(2);
-  return n < 0 ? `−${m}%` : `${m}%`;
-}
-function S(e) {
-  return e == null || e <= 0 ? "bg-muted text-muted-foreground" : "bg-success/20 text-success";
-}
-function g({
-  base: e,
-  leverage: n
+import { StrategyApyBreakdownCardTest as i } from "./constants.js";
+const T = "—";
+function G({
+  data: s,
+  showFormula: o = !1
 }) {
-  return /* @__PURE__ */ t(
-    p,
-    {
-      messageId: "components.strategyApyBreakdownCard.formula",
-      values: { base: e, leverage: n }
-    }
-  );
-}
-function te({
-  data: e,
-  leverage: n
-}) {
-  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,
-    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(
+  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",
     {
       className: "flex w-full min-w-0 flex-col gap-4 rounded-xl border border-border bg-card p-4",
-      "data-testid": w.root,
+      "data-testid": i.root,
       children: [
-        /* @__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,
+        /* @__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.strategyApyBreakdownCard.titleAtLeverage",
-              values: { leverage: m }
+              messageId: "components.yieldBreakdown.titleNetAtLeverage",
+              values: { leverage: d(a) }
             }
           ) }),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ e(
             "span",
             {
-              className: h(
+              className: g(
                 "rounded-md px-2 py-0.5 text-sm font-semibold tabular-nums",
-                S(A)
+                c > 0 ? "bg-success/20 text-success" : "bg-muted text-muted-foreground"
               ),
-              "data-testid": w.net,
-              children: A == null ? u : s(A)
+              "data-testid": i.net,
+              children: m(c)
             }
           )
         ] }),
-        /* @__PURE__ */ i("div", { className: "flex flex-col gap-3", children: [
-          /* @__PURE__ */ t(
-            b,
+        /* @__PURE__ */ n("div", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ e(
+            p,
             {
-              label: /* @__PURE__ */ t(p, { messageId: "components.strategyApyBreakdownCard.collateralApy" }),
-              value: y == null ? u : s(y),
-              subtext: f != null && o != null ? /* @__PURE__ */ t(
-                g,
+              testId: i.collateral,
+              label: /* @__PURE__ */ e(l, { messageId: "components.yieldBreakdown.collateralApy" }),
+              value: m(x),
+              subtext: o && y !== void 0 ? /* @__PURE__ */ e(
+                l,
                 {
-                  base: s(f),
-                  leverage: a(o)
+                  messageId: "components.strategyApyBreakdownCard.formula",
+                  values: {
+                    leverage: d(a),
+                    base: m(y)
+                  }
                 }
               ) : void 0
             }
           ),
-          d.map((l, c) => /* @__PURE__ */ t(
-            b,
+          v.map(({ reward: t, value: f }) => /* @__PURE__ */ e(
+            p,
             {
-              label: /* @__PURE__ */ i("span", { className: "inline-flex items-center gap-1.5", children: [
-                /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(
-                  p,
+              label: /* @__PURE__ */ n("span", { className: "inline-flex items-center gap-1.5", children: [
+                /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+                  l,
                   {
                     messageId: "components.apyParts.extraAPY",
-                    values: { symbol: l.token.symbol }
+                    values: { symbol: t.token.symbol }
                   }
                 ) }),
-                /* @__PURE__ */ t(
-                  P,
+                /* @__PURE__ */ e(
+                  N,
                   {
-                    token: l.token,
-                    symbol: l.token.symbol,
+                    token: t.token,
+                    symbol: t.token.symbol,
                     size: 16,
                     className: "shrink-0"
                   }
                 )
               ] }),
-              value: v[c] == null ? u : s(v[c]),
-              subtext: l.supplyApr != null && o != null ? /* @__PURE__ */ t(
-                g,
+              value: m(f),
+              subtext: o ? /* @__PURE__ */ e(
+                l,
                 {
-                  base: s(l.supplyApr),
-                  leverage: a(o)
+                  messageId: "components.strategyApyBreakdownCard.formula",
+                  values: {
+                    leverage: d(a),
+                    base: m(t.supplyApr ?? 0)
+                  }
                 }
               ) : void 0
             },
-            `incentive-${l.token.address}-${l.supplyApr ?? 0}`
+            `incentive-${t.token.address}-${t.supplyApr ?? 0}`
           )),
-          /* @__PURE__ */ t(
-            b,
+          /* @__PURE__ */ e(
+            p,
             {
               muted: !0,
-              label: /* @__PURE__ */ t(p, { messageId: "components.strategyApyBreakdownCard.borrowRate" }),
-              value: N == null ? u : s(N),
-              subtext: e.borrowApy != null && r != null ? /* @__PURE__ */ t(
-                g,
-                {
-                  base: s(-e.borrowApy),
-                  leverage: a(r.debtMultiplier)
-                }
-              ) : void 0
+              testId: i.borrow,
+              label: /* @__PURE__ */ e(l, { messageId: "components.yieldBreakdown.borrowRate" }),
+              value: m(-s.borrowCost)
             }
           ),
-          x ? /* @__PURE__ */ t(
-            b,
-            {
-              muted: !0,
-              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__ */ 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__ */ i("span", { className: "inline-flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(
-                      p,
-                      {
-                        messageId: "components.yieldBreakdown.programPoints",
-                        values: { name: l.name }
-                      }
-                    ) }),
-                    /* @__PURE__ */ t(
-                      I,
-                      {
-                        reward: { name: l.name, type: l.id },
-                        size: 16,
-                        className: "shrink-0"
-                      }
-                    )
-                  ] }),
-                  value: c != null ? `${a(c)}×` : u,
-                  subtext: l.multiplier != null && o != null ? /* @__PURE__ */ t(
-                    g,
+          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,
                     {
-                      base: a(l.multiplier),
-                      leverage: a(o)
+                      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
-                },
-                l.id
-              );
-            })
+                  }
+                ) : void 0
+              },
+              t.id
+            ))
           ] }) : null
         ] })
       ]
     }
   );
 }
-function b({
-  label: e,
-  value: n,
-  subtext: o,
-  muted: m = !1
+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
 }) {
-  const d = m ? "text-muted-foreground" : "text-foreground";
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ n(
     "div",
     {
       className: "flex items-start justify-between gap-3",
-      "data-testid": w.row,
+      "data-testid": c,
       children: [
-        /* @__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(
+        /* @__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: h(
+              className: g(
                 "text-sm font-semibold leading-5 tabular-nums",
-                n === u || m ? "text-muted-foreground" : "text-foreground"
+                r ? "text-muted-foreground" : "text-foreground"
               ),
-              children: n
+              "data-testid": u,
+              children: o
             }
           ),
-          o != null ? /* @__PURE__ */ t("span", { className: "text-xs leading-4 text-muted-foreground", children: o }) : null
+          a != null ? /* @__PURE__ */ e(
+            "span",
+            {
+              className: "text-xs leading-4 text-muted-foreground",
+              "data-testid": i.caption,
+              children: a
+            }
+          ) : null
         ] })
       ]
     }
   );
 }
 export {
-  te as StrategyApyBreakdownCard,
-  w as StrategyApyBreakdownCardTest
+  G as StrategyApyBreakdownCard,
+  i as StrategyApyBreakdownCardTest
 };