@gearbox-protocol/ui-kit 3.14.0-next.66 → 3.14.0-next.68

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

@@ -0,0 +1,222 @@
+import { jsxs as s, jsx as e, Fragment as I } from "react/jsx-runtime";
+import { faArrowUpRightFromSquare as R } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as T } from "../icons/fa-icon.js";
+import { PointsIcon as $ } from "../points-icon/points-icon.js";
+import { TokenIcon as j } from "../token-icon/token-icon.js";
+import { SimpleTooltip as F } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import { FormattedMessageTyped as a } from "../typed-intl/index.js";
+import "react";
+import { positiveTokenRewardsOf as P, pointProgramsOf as S, totalApyOf as Y } from "../../utils/apy-breakdown.js";
+import "@gearbox-protocol/sdk";
+import { bpsToPercent as v } from "../../utils/bps.js";
+import { cn as N } from "../../utils/cn.js";
+import "sonner";
+import { percentTemplate as p } from "../../utils/format-money.js";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+function z(t) {
+  const n = t.toFixed(1);
+  return n.endsWith(".0") ? n.slice(0, -2) : n;
+}
+function m(t) {
+  const n = v(t), i = p(Math.abs(n));
+  return n < 0 ? `-${i}` : n > 0 ? i : p(0);
+}
+function w(t) {
+  const n = v(Math.abs(t));
+  return `-${p(n)}`;
+}
+function Z({
+  supplyApy: t,
+  maxLeverage: n,
+  collateralApy: i,
+  borrowApy: l,
+  additionalBorrowApy: d,
+  children: k,
+  className: f
+}) {
+  const g = i ?? t, u = P(g), h = S(t), x = l !== void 0 && l > 0, b = d !== void 0 && d > 0, B = x || b, y = /* @__PURE__ */ s(
+    "div",
+    {
+      className: N(
+        "flex w-[400px] max-w-[calc(100vw-32px)] flex-col gap-4 p-4",
+        "rounded-xl",
+        "bg-popover text-popover-foreground",
+        "border border-white/[0.07]",
+        "shadow-[0_4px_14px_rgba(0,0,0,0.15)]",
+        "text-left font-normal"
+      ),
+      children: [
+        /* @__PURE__ */ s("div", { className: "flex h-6 items-center justify-between gap-3 text-base leading-4 text-foreground", children: [
+          /* @__PURE__ */ e("span", { className: "font-semibold", children: /* @__PURE__ */ e(
+            a,
+            {
+              messageId: "components.yieldBreakdown.title"
+            }
+          ) }),
+          n !== void 0 && n > 0 && /* @__PURE__ */ e("span", { className: "font-medium", children: /* @__PURE__ */ e(
+            a,
+            {
+              messageId: "components.yieldBreakdown.atLeverage",
+              values: { leverage: z(n) }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            label: /* @__PURE__ */ e(
+              a,
+              {
+                messageId: "components.yieldBreakdown.baseYield"
+              }
+            ),
+            value: /* @__PURE__ */ e("span", { className: "font-semibold", children: m(g.organicApy) })
+          }
+        ),
+        u.length > 0 && /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(
+            a,
+            {
+              messageId: "components.yieldBreakdown.incentiveYield"
+            }
+          ) }),
+          u.map((o) => /* @__PURE__ */ e(
+            r,
+            {
+              label: /* @__PURE__ */ s("span", { className: "inline-flex items-center gap-1.5", children: [
+                /* @__PURE__ */ e(j, { token: o.token, size: 20 }),
+                /* @__PURE__ */ e("span", { children: o.token.symbol }),
+                /* @__PURE__ */ e(
+                  T,
+                  {
+                    icon: R,
+                    className: "size-3.5 text-muted-foreground"
+                  }
+                )
+              ] }),
+              value: /* @__PURE__ */ e("span", { className: "font-semibold", children: m(o.supplyApr ?? 0) })
+            },
+            `incentive-${o.token.address}-${o.supplyApr ?? 0}`
+          ))
+        ] }),
+        B && /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(
+            a,
+            {
+              messageId: "components.yieldBreakdown.borrowRate"
+            }
+          ) }),
+          x && /* @__PURE__ */ e(
+            r,
+            {
+              label: /* @__PURE__ */ e(
+                a,
+                {
+                  messageId: "components.yieldBreakdown.baseRate"
+                }
+              ),
+              value: /* @__PURE__ */ e("span", { className: "font-semibold text-muted-foreground", children: w(l) })
+            }
+          ),
+          b && /* @__PURE__ */ e(
+            r,
+            {
+              label: /* @__PURE__ */ e(
+                a,
+                {
+                  messageId: "components.yieldBreakdown.additionalRate"
+                }
+              ),
+              value: /* @__PURE__ */ e("span", { className: "font-semibold text-muted-foreground", children: w(d) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            className: "h-7",
+            label: /* @__PURE__ */ e("span", { className: "text-sm font-bold uppercase leading-5 tracking-wide", children: /* @__PURE__ */ e(
+              a,
+              {
+                messageId: "components.yieldBreakdown.netYield"
+              }
+            ) }),
+            value: /* @__PURE__ */ e("span", { className: "text-xl font-bold leading-7", children: m(Y(t)) })
+          }
+        ),
+        h.length > 0 && /* @__PURE__ */ s(I, { children: [
+          /* @__PURE__ */ e("div", { className: "h-px w-full bg-[#2d3035]" }),
+          /* @__PURE__ */ s("div", { className: "flex h-5 items-center justify-between gap-3", children: [
+            /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(
+              a,
+              {
+                messageId: "components.yieldBreakdown.points"
+              }
+            ) }),
+            /* @__PURE__ */ e("div", { className: "flex items-center gap-1", children: h.map((o) => /* @__PURE__ */ s(
+              "span",
+              {
+                className: "inline-flex items-center gap-1 rounded-[10px] bg-[#242528] pr-2 text-sm font-semibold text-foreground",
+                children: [
+                  /* @__PURE__ */ e(
+                    $,
+                    {
+                      reward: {
+                        name: o.name,
+                        type: o.id
+                      },
+                      size: 20
+                    }
+                  ),
+                  o.multiplier != null ? `${o.multiplier}×` : "—"
+                ]
+              },
+              `points-${o.id}`
+            )) })
+          ] })
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ e(
+    F,
+    {
+      placement: "bottom",
+      triangle: !1,
+      type: "modal-tooltip",
+      minWidth: "100%",
+      maxWidth: "100%",
+      title: /* @__PURE__ */ e("span", { className: f, children: k }),
+      triggerClassName: f,
+      children: y
+    }
+  );
+}
+function c({ children: t }) {
+  return /* @__PURE__ */ e("span", { className: "text-xs font-normal uppercase leading-4 tracking-wide text-muted-foreground", children: t });
+}
+function r({
+  label: t,
+  value: n,
+  className: i
+}) {
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: N(
+        "flex h-6 items-center justify-between gap-3 text-sm leading-5 text-foreground",
+        i
+      ),
+      children: [
+        /* @__PURE__ */ e("span", { className: "min-w-0 font-normal", children: t }),
+        /* @__PURE__ */ e("span", { className: "shrink-0 tabular-nums", children: n })
+      ]
+    }
+  );
+}
+export {
+  Z as YieldBreakdownTooltip
+};

package/dist/esm/hooks/use-debounce-call.js

@@ -2,10 +2,11 @@ import "react";
 import { useDebounce as e } from "./use-debounce.js";
 import "@gearbox-protocol/sdk/common-utils";
 import "@gearbox-protocol/sdk";
+import "../components/breakpoint-provider.js";
 const n = (o) => o();
-function m(o) {
+function p(o) {
   return e(n, o);
 }
 export {
-  m as useDebounceCall
+  p as useDebounceCall
 };

package/dist/esm/hooks/use-media-query.js

@@ -1,19 +1,52 @@
-import { useState as c, useEffect as m } from "react";
-function t(n) {
-  const [s, a] = c(!1);
-  return m(() => {
-    const e = window.matchMedia(n);
-    e.matches !== s && a(e.matches);
-    const i = () => a(e.matches);
-    return e.addEventListener("change", i), () => e.removeEventListener("change", i);
-  }, [s, n]), s;
+import { useState as l, useEffect as u } from "react";
+import { useBreakpointContext as o, BREAKPOINT_QUERIES as c } from "../components/breakpoint-provider.js";
+function n(t, e = !0) {
+  const [i, a] = l(!1);
+  return u(() => {
+    if (!e)
+      return;
+    const s = window.matchMedia(t);
+    s.matches !== i && a(s.matches);
+    const r = () => a(s.matches);
+    return s.addEventListener("change", r), () => s.removeEventListener("change", r);
+  }, [i, t, e]), i;
 }
-const d = () => t("(max-width: 500px)"), h = () => t("(max-width: 768px)"), r = () => t("(min-width: 768px) and (max-width: 1024px)"), u = () => t("(max-width: 1024px)"), x = () => t("(min-width: 1024px)");
+const f = () => {
+  const t = o(), e = n(
+    c.isExtraSmall,
+    t === void 0
+  );
+  return t?.isExtraSmall ?? e;
+}, b = () => {
+  const t = o(), e = n(
+    c.isMobile,
+    t === void 0
+  );
+  return t?.isMobile ?? e;
+}, x = () => {
+  const t = o(), e = n(
+    c.isTablet,
+    t === void 0
+  );
+  return t?.isTablet ?? e;
+}, k = () => {
+  const t = o(), e = n(
+    c.isMedium,
+    t === void 0
+  );
+  return t?.isMedium ?? e;
+}, E = () => {
+  const t = o(), e = n(
+    c.isDesktop,
+    t === void 0
+  );
+  return t?.isDesktop ?? e;
+};
 export {
-  x as useIsDesktop,
-  d as useIsExtraSmall,
-  u as useIsMedium,
-  h as useIsMobile,
-  r as useIsTablet,
-  t as useMediaQuery
+  E as useIsDesktop,
+  f as useIsExtraSmall,
+  k as useIsMedium,
+  b as useIsMobile,
+  x as useIsTablet,
+  n as useMediaQuery
 };