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

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

@@ -1,204 +1,184 @@
-import { jsxs as a, jsx as e, Fragment as N } 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 P } from "../tooltip/simple-tooltip.js";
+import { jsx as e, jsxs as c, Fragment as A } from "react/jsx-runtime";
+import { APY_BREAKDOWN_TOOLTIP_WIDTH as B, ApyBreakdownBody as v, formatBreakdownRate as u, ApyBreakdownRow as y, periodMessageId as w, ApyBreakdownDivider as h } from "../base/apy-breakdown-body/apy-breakdown-body.js";
+import { PoolApyBreakdownCard as b } from "../base/pool-apy-breakdown-card/pool-apy-breakdown-card.js";
+import { PointsIcon as I } from "../points-icon/points-icon.js";
+import { TokenIcon as P } from "../token-icon/token-icon.js";
+import { SimpleTooltip as T } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
-import { FormattedMessageTyped as s } from "../typed-intl/index.js";
-import "react";
-import { tokenRewardsOf as T, pointProgramsOf as $, totalApyOf as j } from "../../utils/apy-breakdown.js";
-import "@gearbox-protocol/sdk/onchain";
-import { bpsToPercent as R } from "../../utils/bps.js";
-import { cn as f } 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 "@gearbox-protocol/sdk/common-utils";
-import "luxon";
-import "../../utils/z-index.js";
-function p(o) {
-  const n = R(o), r = C(Math.abs(n));
-  return n < 0 ? `-${r}` : r;
+import { FormattedMessageTyped as d } from "../typed-intl/index.js";
+import { tokenRewardsOf as O, pointProgramsOf as R, totalApyOf as x } from "../../utils/apy-breakdown.js";
+import { formatLeverage as N } from "../../utils/format-leverage.js";
+function S({
+  title: t,
+  children: l,
+  placement: s = "left",
+  open: a,
+  className: i,
+  triggerClassName: n
+}) {
+  return /* @__PURE__ */ e(
+    T,
+    {
+      placement: s,
+      triangle: !1,
+      type: "modal-tooltip",
+      minWidth: B,
+      maxWidth: B,
+      title: t,
+      open: a,
+      className: i,
+      triggerClassName: n,
+      children: l
+    }
+  );
 }
-function m(o, n, r) {
-  return o === "7d" ? r : n;
+function H({
+  supplyApy: t,
+  maxLeverage: l,
+  collateralApy: s,
+  borrowApy: a,
+  quotaRate: i,
+  period: n,
+  children: r,
+  className: m,
+  open: g
+}) {
+  const p = l !== void 0 && l > 0;
+  return /* @__PURE__ */ e(
+    S,
+    {
+      placement: "bottom",
+      title: /* @__PURE__ */ e("span", { className: m, children: r }),
+      triggerClassName: m,
+      open: g,
+      children: p ? /* @__PURE__ */ e(
+        W,
+        {
+          supplyApy: t,
+          maxLeverage: l,
+          collateralApy: s,
+          borrowApy: a,
+          quotaRate: i,
+          period: n
+        }
+      ) : /* @__PURE__ */ e(b, { data: t, period: n })
+    }
+  );
 }
-function Z({
-  supplyApy: o,
-  maxLeverage: n,
-  collateralApy: r,
-  borrowApy: g,
-  quotaRate: b,
-  period: l,
-  children: h,
-  className: w
+function W({
+  supplyApy: t,
+  maxLeverage: l,
+  collateralApy: s,
+  borrowApy: a,
+  quotaRate: i,
+  period: n
 }) {
-  const d = n !== void 0 && n > 0, i = d ? r : r ?? o, k = i ? T(i) : [], v = $(o), x = j(o), u = g != null || b != null ? -((g ?? 0) + (b ?? 0)) : void 0, y = v.filter((t) => t.multiplier != null), B = /* @__PURE__ */ a(
-    "div",
+  const r = s, m = r ? O(r) : [], g = R(t), p = x(t), f = a != null || i != null ? -((a ?? 0) + (i ?? 0)) : void 0, k = g.filter((o) => o.multiplier != null);
+  return /* @__PURE__ */ c(
+    v,
     {
-      className: f(
-        "flex w-[400px] max-w-[calc(100vw-32px)] flex-col gap-4 p-4",
-        "rounded-xl",
-        "bg-card text-card-foreground",
-        "border border-border",
-        "shadow-[0_4px_14px_rgba(0,0,0,0.15)]",
-        "text-left font-normal"
+      title: /* @__PURE__ */ e(
+        d,
+        {
+          messageId: w(
+            n,
+            "components.yieldBreakdown.titleNetAtLeverage",
+            "components.yieldBreakdown.titleNetAtLeverage7d"
+          ),
+          values: { leverage: N(l) }
+        }
       ),
+      chip: u(p),
+      chipPositive: p > 0,
       children: [
-        /* @__PURE__ */ a("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: d ? /* @__PURE__ */ e(
-            s,
-            {
-              messageId: m(
-                l,
-                "components.yieldBreakdown.titleNetAtLeverage",
-                "components.yieldBreakdown.titleNetAtLeverage7d"
-              ),
-              values: {
-                leverage: S(n)
-              }
-            }
-          ) : /* @__PURE__ */ e(
-            s,
-            {
-              messageId: m(
-                l,
-                "components.yieldBreakdown.titleNet",
-                "components.yieldBreakdown.titleNet7d"
-              )
-            }
-          ) }),
-          /* @__PURE__ */ e(
-            "span",
-            {
-              className: f(
-                "rounded-md px-2 py-0.5 text-sm font-semibold tabular-nums",
-                x > 0 ? "bg-success/20 text-success" : "bg-muted text-muted-foreground"
-              ),
-              children: p(x)
-            }
-          )
-        ] }),
-        i?.organicApy != null && /* @__PURE__ */ e(
-          c,
+        r?.organicApy != null ? /* @__PURE__ */ e(
+          y,
           {
-            muted: i.organicApy < 0,
+            muted: r.organicApy < 0,
             label: /* @__PURE__ */ e(
-              s,
+              d,
               {
-                messageId: d ? m(
-                  l,
+                messageId: w(
+                  n,
                   "components.yieldBreakdown.collateralApy",
                   "components.yieldBreakdown.collateralApy7d"
-                ) : m(
-                  l,
-                  "components.yieldBreakdown.baseApy",
-                  "components.yieldBreakdown.baseApy7d"
                 )
               }
             ),
-            value: p(i.organicApy)
+            value: u(r.organicApy)
           }
+        ) : null,
+        m.map(
+          (o) => o.supplyApr == null ? null : /* @__PURE__ */ e(
+            y,
+            {
+              muted: o.supplyApr < 0,
+              label: /* @__PURE__ */ c("span", { className: "inline-flex items-center gap-1.5", children: [
+                /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+                  d,
+                  {
+                    messageId: "components.apyParts.extraAPY",
+                    values: { symbol: o.token.symbol }
+                  }
+                ) }),
+                /* @__PURE__ */ e(P, { token: o.token, size: 20 })
+              ] }),
+              value: u(o.supplyApr)
+            },
+            `incentive-${o.token.address}-${o.supplyApr}`
+          )
         ),
-        k.map((t) => t.supplyApr == null ? null : /* @__PURE__ */ e(
-          c,
-          {
-            muted: t.supplyApr < 0,
-            label: /* @__PURE__ */ a("span", { className: "inline-flex items-center gap-1.5", children: [
-              /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
-                s,
-                {
-                  messageId: "components.apyParts.extraAPY",
-                  values: { symbol: t.token.symbol }
-                }
-              ) }),
-              /* @__PURE__ */ e(I, { token: t.token, size: 20 })
-            ] }),
-            value: p(t.supplyApr)
-          },
-          `incentive-${t.token.address}-${t.supplyApr}`
-        )),
-        d && u != null && /* @__PURE__ */ e(
-          c,
+        f != null ? /* @__PURE__ */ e(
+          y,
           {
-            muted: u < 0,
+            muted: f < 0,
             label: /* @__PURE__ */ e(
-              s,
+              d,
               {
-                messageId: m(
-                  l,
+                messageId: w(
+                  n,
                   "components.yieldBreakdown.borrowRate",
                   "components.yieldBreakdown.borrowRate7d"
                 )
               }
             ),
-            value: p(u)
+            value: u(f)
           }
-        ),
-        y.length > 0 && /* @__PURE__ */ a(N, { children: [
-          /* @__PURE__ */ e("div", { className: "h-px w-full bg-divider" }),
-          y.map((t) => /* @__PURE__ */ e(
-            c,
+        ) : null,
+        k.length > 0 ? /* @__PURE__ */ c(A, { children: [
+          /* @__PURE__ */ e(h, {}),
+          k.map((o) => /* @__PURE__ */ e(
+            y,
             {
-              label: /* @__PURE__ */ a("span", { className: "inline-flex items-center gap-1.5", children: [
+              label: /* @__PURE__ */ c("span", { className: "inline-flex items-center gap-1.5", children: [
                 /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
-                  s,
+                  d,
                   {
                     messageId: "components.yieldBreakdown.programPoints",
-                    values: { name: t.name }
+                    values: { name: o.name }
                   }
                 ) }),
                 /* @__PURE__ */ e(
-                  A,
+                  I,
                   {
                     reward: {
-                      name: t.name,
-                      type: t.id
+                      name: o.name,
+                      type: o.id
                     },
                     size: 20
                   }
                 )
               ] }),
-              value: `${t.multiplier}×`
+              value: `${o.multiplier}×`
             },
-            `points-${t.id}`
+            `points-${o.id}`
           ))
-        ] })
+        ] }) : null
       ]
     }
   );
-  return /* @__PURE__ */ e(
-    P,
-    {
-      placement: "bottom",
-      triangle: !1,
-      type: "modal-tooltip",
-      minWidth: "100%",
-      maxWidth: "100%",
-      title: /* @__PURE__ */ e("span", { className: w, children: h }),
-      triggerClassName: w,
-      children: B
-    }
-  );
-}
-function c({
-  label: o,
-  value: n,
-  muted: r = !1
-}) {
-  return /* @__PURE__ */ a("div", { className: "flex h-6 items-center justify-between gap-3 text-sm leading-5", children: [
-    /* @__PURE__ */ e("span", { className: "min-w-0 font-normal text-muted-foreground", children: o }),
-    /* @__PURE__ */ e(
-      "span",
-      {
-        className: f(
-          "shrink-0 font-semibold tabular-nums",
-          r ? "text-muted-foreground" : "text-foreground"
-        ),
-        children: n
-      }
-    )
-  ] });
 }
 export {
-  Z as YieldBreakdownTooltip
+  S as ApyBreakdownTooltip,
+  H as YieldBreakdownTooltip
 };