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

package/dist/esm/components/base/apy-breakdown-body/apy-breakdown-body.js

@@ -0,0 +1,106 @@
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+import { bpsToPercent as c } from "../../../utils/bps.js";
+import { cn as i } from "../../../utils/cn.js";
+const x = "—", p = "400px";
+function g(n, t, e) {
+  return n === "7d" ? e : t;
+}
+function b(n) {
+  const t = c(n), e = `${Math.abs(t).toFixed(2)}%`;
+  return t < 0 ? `−${e}` : e;
+}
+function h({
+  title: n,
+  chip: t,
+  chipPositive: e = !1,
+  chipTestId: d,
+  children: r,
+  testId: o
+}) {
+  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": o,
+      children: [
+        /* @__PURE__ */ a("div", { className: "flex min-h-6 items-center justify-between gap-3", children: [
+          /* @__PURE__ */ s("span", { className: "min-w-0 text-base font-semibold leading-5 text-foreground", children: n }),
+          /* @__PURE__ */ s(
+            "span",
+            {
+              className: i(
+                "shrink-0 rounded-md px-2 py-0.5 text-sm font-semibold tabular-nums",
+                e ? "bg-success/20 text-success" : "bg-muted text-muted-foreground"
+              ),
+              "data-testid": d,
+              children: t
+            }
+          )
+        ] }),
+        /* @__PURE__ */ s("div", { className: "flex flex-col gap-3", children: r })
+      ]
+    }
+  );
+}
+function N({
+  label: n,
+  value: t,
+  subtext: e,
+  muted: d = !1,
+  testId: r,
+  valueTestId: o,
+  captionTestId: l
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: "flex items-start justify-between gap-3",
+      "data-testid": r,
+      children: [
+        /* @__PURE__ */ s(
+          "span",
+          {
+            className: i(
+              "min-w-0 text-sm font-semibold leading-5",
+              d ? "text-muted-foreground" : "text-foreground"
+            ),
+            children: n
+          }
+        ),
+        /* @__PURE__ */ a("span", { className: "flex shrink-0 flex-col items-end", children: [
+          /* @__PURE__ */ s(
+            "span",
+            {
+              className: i(
+                "text-sm font-semibold leading-5 tabular-nums",
+                d ? "text-muted-foreground" : "text-foreground"
+              ),
+              "data-testid": o,
+              children: t
+            }
+          ),
+          e != null ? /* @__PURE__ */ s(
+            "span",
+            {
+              className: "text-xs leading-4 text-muted-foreground",
+              "data-testid": l,
+              children: e
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+function w() {
+  return /* @__PURE__ */ s("div", { className: "h-px w-full bg-divider" });
+}
+export {
+  p as APY_BREAKDOWN_TOOLTIP_WIDTH,
+  h as ApyBreakdownBody,
+  w as ApyBreakdownDivider,
+  N as ApyBreakdownRow,
+  x as BREAKDOWN_DASH,
+  b as formatBreakdownRate,
+  g as periodMessageId
+};

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

@@ -0,0 +1,10 @@
+import { APY_BREAKDOWN_TOOLTIP_WIDTH as r, ApyBreakdownBody as d, ApyBreakdownDivider as a, ApyBreakdownRow as A, BREAKDOWN_DASH as B, formatBreakdownRate as p, periodMessageId as w } from "./apy-breakdown-body.js";
+export {
+  r as APY_BREAKDOWN_TOOLTIP_WIDTH,
+  d as ApyBreakdownBody,
+  a as ApyBreakdownDivider,
+  A as ApyBreakdownRow,
+  B as BREAKDOWN_DASH,
+  p as formatBreakdownRate,
+  w as periodMessageId
+};

package/dist/esm/components/base/info-list/info-list.js

@@ -14,9 +14,9 @@ import { PointsValue as l } from "../values/points-value.js";
 import "viem";
 import "../../points-icon/points-icon.js";
 import "../../token-icon/token-icon.js";
+import "react-intl";
 import "../../tooltip/simple-tooltip.js";
 import "../../tooltip/tooltip.js";
-import "react-intl";
 import "../../badge/badge.js";
 import "../../badge/chip.js";
 import { Typography as u } from "../../typography/typography.js";

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

@@ -1,7 +1,10 @@
-class a {
+class o {
   static root = "pool-apy-breakdown-card-root";
+  static net = "pool-apy-breakdown-card-net";
   static value = "pool-apy-breakdown-card-value";
+  static reward = "pool-apy-breakdown-card-reward";
+  static points = "pool-apy-breakdown-card-points";
 }
 export {
-  a as PoolApyBreakdownCardTest
+  o as PoolApyBreakdownCardTest
 };

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

@@ -1,74 +1,128 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { FormattedMessageTyped as a } from "../../typed-intl/index.js";
-import { VerticalIndicator as m } from "../../vertical-indicator/vertical-indicator.js";
-import "react";
-import "@gearbox-protocol/sdk/onchain";
-import "clsx";
-import "tailwind-merge";
-import "sonner";
-import { percentTemplate as l } from "../../../utils/format-money.js";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
-import "../../../utils/z-index.js";
-import { SideCard as s } from "../side-card/side-card.js";
-import { PoolApyBreakdownCardTest as p } from "./constants.js";
-function t(r, o, i) {
-  return r === "7d" ? i : o;
-}
-function n({
-  title: r,
-  value: o
+import { jsxs as a, jsx as o, Fragment as v } from "react/jsx-runtime";
+import { ApyBreakdownBody as w, BREAKDOWN_DASH as t, formatBreakdownRate as p, ApyBreakdownRow as i, periodMessageId as c, ApyBreakdownDivider as g } from "../apy-breakdown-body/apy-breakdown-body.js";
+import { PointsIcon as f } from "../../points-icon/points-icon.js";
+import { TokenIcon as B } from "../../token-icon/token-icon.js";
+import { FormattedMessageTyped as s } from "../../typed-intl/index.js";
+import { totalApyOf as I, tokenRewardsOf as h, pointProgramsOf as b } from "../../../utils/apy-breakdown.js";
+import { PoolApyBreakdownCardTest as l } from "./constants.js";
+function D({
+  data: n,
+  period: d
 }) {
-  return /* @__PURE__ */ e(
-    m,
+  const r = n ? I(n) : void 0, m = n?.organicApy, y = n == null ? void 0 : (r ?? 0) - (m ?? 0), u = n ? h(n) : [], A = n ? b(n) : [], k = [...u.filter((e) => e.supplyApr != null), ...A];
+  return /* @__PURE__ */ a(
+    w,
     {
-      size: "sm",
-      label: /* @__PURE__ */ e(a, { messageId: r }),
-      value: /* @__PURE__ */ e("span", { "data-testid": p.value, children: o === void 0 ? "—" : l(o / 100) })
-    }
-  );
-}
-function h({
-  data: r,
-  period: o
-}) {
-  return /* @__PURE__ */ d(
-    s,
-    {
-      title: t(
-        o,
-        "components.poolApyBreakdownCard.title",
-        "components.poolApyBreakdownCard.title7d"
+      testId: l.root,
+      title: /* @__PURE__ */ o(
+        s,
+        {
+          messageId: c(
+            d,
+            "components.poolApyBreakdownCard.title",
+            "components.poolApyBreakdownCard.title7d"
+          )
+        }
       ),
-      testId: p.root,
+      chip: r == null ? t : p(r),
+      chipPositive: (r ?? 0) > 0,
+      chipTestId: l.net,
       children: [
-        /* @__PURE__ */ e(
-          n,
+        /* @__PURE__ */ o(
+          i,
           {
-            title: t(
-              o,
-              "components.poolApyBreakdownCard.organicApy",
-              "components.poolApyBreakdownCard.organicApy7d"
+            valueTestId: l.value,
+            label: /* @__PURE__ */ o(
+              s,
+              {
+                messageId: c(
+                  d,
+                  "components.poolApyBreakdownCard.organicApy",
+                  "components.poolApyBreakdownCard.organicApy7d"
+                )
+              }
             ),
-            value: r?.organicApy
+            value: m == null ? t : p(m)
           }
         ),
-        /* @__PURE__ */ e(
-          n,
+        /* @__PURE__ */ o(
+          i,
           {
-            title: t(
-              o,
-              "components.poolApyBreakdownCard.incentiveApy",
-              "components.poolApyBreakdownCard.incentiveApy7d"
+            valueTestId: l.value,
+            label: /* @__PURE__ */ o(
+              s,
+              {
+                messageId: c(
+                  d,
+                  "components.poolApyBreakdownCard.incentiveApy",
+                  "components.poolApyBreakdownCard.incentiveApy7d"
+                )
+              }
             ),
-            value: r == null ? void 0 : r.incentiveApy ?? 0
+            value: y == null ? t : p(y)
           }
-        )
+        ),
+        k.length > 0 ? /* @__PURE__ */ a(v, { children: [
+          /* @__PURE__ */ o(g, {}),
+          u.map(
+            (e) => e.supplyApr == null ? null : /* @__PURE__ */ o(
+              i,
+              {
+                valueTestId: l.reward,
+                label: /* @__PURE__ */ a("span", { className: "inline-flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(
+                    s,
+                    {
+                      messageId: "components.apyParts.extraAPY",
+                      values: { symbol: e.token.symbol }
+                    }
+                  ) }),
+                  /* @__PURE__ */ o(
+                    B,
+                    {
+                      token: e.token,
+                      symbol: e.token.symbol,
+                      size: 16,
+                      className: "shrink-0"
+                    }
+                  )
+                ] }),
+                value: p(e.supplyApr)
+              },
+              `incentive-${e.token.address}-${e.supplyApr}`
+            )
+          ),
+          A.map((e) => /* @__PURE__ */ o(
+            i,
+            {
+              valueTestId: l.points,
+              label: /* @__PURE__ */ a("span", { className: "inline-flex items-center gap-1.5", children: [
+                /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(
+                  s,
+                  {
+                    messageId: "components.yieldBreakdown.programPoints",
+                    values: { name: e.name }
+                  }
+                ) }),
+                /* @__PURE__ */ o(
+                  f,
+                  {
+                    reward: { name: e.name, type: e.id },
+                    size: 16,
+                    className: "shrink-0"
+                  }
+                )
+              ] }),
+              value: e.multiplier != null ? `${e.multiplier}×` : t
+            },
+            e.id
+          ))
+        ] }) : null
       ]
     }
   );
 }
 export {
-  h as PoolApyBreakdownCard,
-  p as PoolApyBreakdownCardTest
+  D as PoolApyBreakdownCard,
+  l as PoolApyBreakdownCardTest
 };