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

package/dist/esm/components/tooltip/simple-tooltip.js

@@ -1,4 +1,4 @@
-import { jsxs as L, jsx as r } from "react/jsx-runtime";
+import { jsxs as I, jsx as r } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-tooltip";
 import * as e from "react";
 import "@gearbox-protocol/sdk/onchain";
@@ -7,63 +7,63 @@ import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import { Z_INDEX as F } from "../../utils/z-index.js";
-const I = e.createContext({ lockParent: () => {
+const A = e.createContext({ lockParent: () => {
 }, unlockParent: () => {
-} }), A = e.createContext(!1), H = 7, J = 12;
+} }), H = e.createContext(!1), K = 7, J = 12;
 function Q({
-  children: K,
+  children: S,
   title: d,
-  placement: S = "top",
+  placement: W = "top",
   trigger: n = "hover",
-  triangle: W = !0,
+  triangle: _ = !0,
   delayShow: h = 5,
-  maxWidth: C = "200px",
-  minWidth: _,
+  maxWidth: v = "200px",
+  minWidth: C,
   type: j = "tooltip",
-  open: P,
-  onOpenChange: v,
+  open: x,
+  onOpenChange: P,
   className: z,
-  triggerClassName: x,
+  triggerClassName: w,
   useTitleAsTrigger: B = !1
 }) {
-  const [M, g] = e.useState(!1), [y, w] = e.useState(!1), f = e.useRef(null), i = e.useRef(null), p = P !== void 0, c = p ? P : M, o = e.useCallback(
+  const [M, $] = e.useState(!1), [y, R] = e.useState(!1), f = e.useRef(null), l = e.useRef(null), p = x !== void 0, c = p ? x : M, o = e.useCallback(
     (t) => {
-      p ? v?.(t) : g(t);
+      p ? P?.(t) : $(t);
     },
-    [p, v]
-  ), s = e.useContext(I), G = e.useMemo(
+    [p, P]
+  ), s = e.useContext(A), g = e.useMemo(
     () => ({
-      lockParent: () => w(!0),
-      unlockParent: () => w(!1)
+      lockParent: () => R(!0),
+      unlockParent: () => R(!1)
     }),
     []
-  ), R = e.useRef(!1);
-  R.current = y;
-  const l = e.useRef(
+  ), T = e.useRef(!1);
+  T.current = y;
+  const i = e.useRef(
     null
   ), u = e.useCallback(() => {
-    l.current !== null && (clearTimeout(l.current), l.current = null);
-  }, []), V = e.useCallback(
+    i.current !== null && (clearTimeout(i.current), i.current = null);
+  }, []), G = e.useCallback(
     (t) => {
       if (n !== "click") {
         if (t) {
           u(), o(!0), s.lockParent();
           return;
         }
-        l.current = setTimeout(() => {
-          l.current = null, !R.current && (o(!1), s.unlockParent());
+        i.current = setTimeout(() => {
+          i.current = null, !T.current && (o(!1), s.unlockParent());
         }, 100);
       }
     },
     [n, o, s, u]
   );
   e.useEffect(() => u, [u]);
-  const X = e.useCallback(
+  const V = e.useCallback(
     (t) => {
       n === "click" && (t.stopPropagation(), o(!c));
     },
     [n, c, o]
-  ), Z = e.useCallback(
+  ), X = e.useCallback(
     (t) => {
       n === "click" && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), o(!c));
     },
@@ -72,71 +72,73 @@ function Q({
   e.useEffect(() => {
     if (n !== "click" || !c) return;
     const t = (m) => {
-      const N = m.target;
-      f.current && !f.current.contains(N) && i.current && !i.current.contains(N) && o(!1);
-    }, O = (m) => {
+      const L = m.target;
+      f.current && !f.current.contains(L) && l.current && !l.current.contains(L) && o(!1);
+    }, N = (m) => {
       m.key === "Escape" && o(!1);
     };
-    return document.addEventListener("pointerdown", t), document.addEventListener("keydown", O), () => {
-      document.removeEventListener("pointerdown", t), document.removeEventListener("keydown", O);
+    return document.addEventListener("pointerdown", t), document.addEventListener("keydown", N), () => {
+      document.removeEventListener("pointerdown", t), document.removeEventListener("keydown", N);
     };
   }, [n, c, o]);
-  const T = e.useRef(s.unlockParent);
-  T.current = s.unlockParent, e.useEffect(() => () => T.current(), []);
-  const b = j === "modal-tooltip", D = W && !b, $ = k(
+  const b = e.useRef(s.unlockParent);
+  b.current = s.unlockParent, e.useEffect(() => () => b.current(), []);
+  const D = j === "modal-tooltip", E = _ && !D, Z = k(
     F.TOOLTIP,
     "pointer-events-auto",
     "animate-in fade-in-0 zoom-in-75 duration-150",
     "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-75 data-[state=closed]:duration-150",
-    b ? "bg-transparent p-0" : "rounded bg-black/85 px-2 py-1 text-[0.85rem] leading-[1.5] font-normal text-center text-white/85 antialiased break-words min-w-0",
+    D ? "bg-transparent p-0" : "rounded bg-black/85 px-2 py-1 text-[0.85rem] leading-[1.5] font-normal text-center text-white/85 antialiased break-words min-w-0",
     z
-  ), q = e.useContext(A), E = /* @__PURE__ */ L(
+  ), q = e.useContext(H), O = /* @__PURE__ */ I(
     a.Root,
     {
       open: c || y,
-      onOpenChange: V,
+      onOpenChange: G,
       delayDuration: n === "click" ? 0 : h,
       children: [
         /* @__PURE__ */ r(a.Trigger, { asChild: !0, children: B ? d : n === "click" ? /* @__PURE__ */ r(
           "button",
           {
-            ref: i,
+            ref: l,
             type: "button",
-            onClick: X,
-            onKeyDown: Z,
+            onClick: V,
+            onKeyDown: X,
             className: k(
               "inline-flex appearance-none border-0 bg-transparent p-0 text-inherit font-inherit cursor-pointer",
-              x
+              w
             ),
             children: d
           }
         ) : /* @__PURE__ */ r(
           "span",
           {
-            ref: i,
-            className: k("inline-flex", x),
+            ref: l,
+            className: k("inline-flex", w),
             children: d
           }
         ) }),
-        /* @__PURE__ */ r(a.Portal, { children: /* @__PURE__ */ L(
+        /* @__PURE__ */ r(a.Portal, { children: /* @__PURE__ */ I(
           a.Content,
           {
             ref: f,
-            side: S,
-            sideOffset: D ? H - 4 : 8,
+            side: W,
+            sideOffset: E ? K - 4 : 8,
             collisionPadding: 8,
-            className: $,
+            className: Z,
             style: {
-              maxWidth: C ? `min(${C}, calc(100vw - 16px))` : "calc(100vw - 16px)",
-              minWidth: _
+              maxWidth: v ? `min(${v}, calc(100vw - 16px))` : "calc(100vw - 16px)",
+              // min-width wins over max-width in CSS; cap it the same way or a
+              // 400px breakdown overflows a phone.
+              minWidth: C ? `min(${C}, calc(100vw - 16px))` : void 0
             },
             children: [
-              /* @__PURE__ */ r(I.Provider, { value: G, children: K }),
-              D && /* @__PURE__ */ r(
+              /* @__PURE__ */ r(A.Provider, { value: g, children: S }),
+              E && /* @__PURE__ */ r(
                 a.Arrow,
                 {
                   width: J,
-                  height: H,
+                  height: K,
                   className: "fill-black/85"
                 }
               )
@@ -146,12 +148,12 @@ function Q({
       ]
     }
   );
-  return q ? E : /* @__PURE__ */ r(A.Provider, { value: !0, children: /* @__PURE__ */ r(
+  return q ? O : /* @__PURE__ */ r(H.Provider, { value: !0, children: /* @__PURE__ */ r(
     a.Provider,
     {
       delayDuration: n === "click" ? 0 : h,
       skipDelayDuration: 300,
-      children: E
+      children: O
     }
   ) });
 }

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

@@ -1,4 +1,5 @@
-import { YieldBreakdownTooltip as r } from "./yield-breakdown-tooltip.js";
+import { ApyBreakdownTooltip as p, YieldBreakdownTooltip as r } from "./yield-breakdown-tooltip.js";
 export {
+  p as ApyBreakdownTooltip,
   r as YieldBreakdownTooltip
 };

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
 };