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

package/dist/esm/components/compound-apy/compound-apy.js

@@ -1,95 +1,101 @@
-import { jsx as n, jsxs as d } from "react/jsx-runtime";
-import { PointsIcon as R } from "../points-icon/points-icon.js";
-import { TokenIcon as Y } from "../token-icon/token-icon.js";
-import { YieldBreakdownTooltip as w } from "../yield-breakdown-tooltip/yield-breakdown-tooltip.js";
-import "react";
-import { positiveTokenRewardsOf as z, pointProgramsOf as I, totalApyOf as L } from "../../utils/apy-breakdown.js";
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { useId as w } from "react";
+import { YieldBreakdownTooltip as x } from "../yield-breakdown-tooltip/yield-breakdown-tooltip.js";
+import { totalApyOf as v, positiveTokenRewardsOf as C, pointProgramsOf as I } from "../../utils/apy-breakdown.js";
 import "@gearbox-protocol/sdk";
-import { bpsToPercent as N } from "../../utils/bps.js";
-import { cn as $ } from "../../utils/cn.js";
+import { bpsToPercent as k } from "../../utils/bps.js";
+import { cn as P } from "../../utils/cn.js";
 import "sonner";
-import { formatPercentAmount as v } from "../../utils/format-money.js";
+import { formatCompactPercent as A } from "../../utils/format-money.js";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-function K({
-  apy: e,
-  maxLeverage: f,
-  collateralApy: h,
-  borrowApy: g,
-  additionalBorrowApy: x,
-  decimals: u = 2,
-  className: a
+const l = 14;
+function O() {
+  const t = `additional-incentives-${w().replace(/:/g, "")}`;
+  return /* @__PURE__ */ r(
+    "svg",
+    {
+      width: l,
+      height: l,
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "size-3.5 shrink-0 overflow-clip",
+      role: "img",
+      "aria-label": "Incentives",
+      children: [
+        /* @__PURE__ */ e("title", { children: "Incentives" }),
+        /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z",
+            fill: `url(#${t})`
+          }
+        ),
+        /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M7 3.75V10.25M3.75 7H10.25",
+            stroke: "white",
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ r(
+          "linearGradient",
+          {
+            id: t,
+            x1: "0",
+            y1: "7",
+            x2: "14",
+            y2: "7",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ e("stop", { stopColor: "#FF2D8D" }),
+              /* @__PURE__ */ e("stop", { offset: "1", stopColor: "#FF6C20" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+function c(t) {
+  return t == null ? !1 : C(t).length > 0 || I(t).length > 0;
+}
+function U({
+  apy: t,
+  maxLeverage: p,
+  collateralApy: n,
+  borrowApy: d,
+  quotaRate: a,
+  decimals: m = 2,
+  tooltip: f = !0,
+  className: o
 }) {
-  if (!e)
-    return /* @__PURE__ */ n("span", { className: "text-secondary-foreground", children: "—" });
-  const i = z(e), m = I(e), p = L(e), A = p >= 1, l = () => {
-    const P = i.length > 0, k = m.length > 0, y = `${v(N(p), u)}%`, c = i.length, o = c + m.length;
-    return /* @__PURE__ */ d("div", { className: $("inline-flex items-center gap-1.5", a), children: [
-      /* @__PURE__ */ n("span", { className: "inline-flex items-center", children: y }),
-      (P || k) && /* @__PURE__ */ d("span", { className: "relative inline-flex", children: [
-        i.map((t, r) => {
-          const s = r === o - 1;
-          return /* @__PURE__ */ n(
-            "span",
-            {
-              style: {
-                zIndex: o - r,
-                marginRight: s ? 0 : -7
-              },
-              children: /* @__PURE__ */ n(
-                Y,
-                {
-                  token: t.token,
-                  size: 14,
-                  style: {
-                    margin: t.token.symbol === "GEAR" ? "-3px 0 0 0" : "0"
-                  }
-                }
-              )
-            },
-            `extra-${t.token.address}-${t.supplyApr ?? 0}`
-          );
-        }),
-        m.map((t, r) => {
-          const s = r + c, T = s === o - 1;
-          return /* @__PURE__ */ n(
-            "span",
-            {
-              style: {
-                zIndex: o - s,
-                marginRight: T ? 0 : -7
-              },
-              children: /* @__PURE__ */ n(
-                R,
-                {
-                  reward: {
-                    name: t.name,
-                    type: t.id
-                  },
-                  size: 14
-                }
-              )
-            },
-            `points-${t.id}`
-          );
-        })
-      ] })
+  if (!t)
+    return /* @__PURE__ */ e("span", { className: "text-secondary-foreground", children: "—" });
+  const i = v(t), h = c(t) || c(n), u = f && i >= 1, s = () => {
+    const g = A(k(i), m);
+    return /* @__PURE__ */ r("div", { className: P("inline-flex items-center gap-1.5", o), children: [
+      /* @__PURE__ */ e("span", { className: "inline-flex items-center", children: g }),
+      h ? /* @__PURE__ */ e(O, {}) : null
     ] });
   };
-  return A ? /* @__PURE__ */ n(
-    w,
+  return u ? /* @__PURE__ */ e(
+    x,
     {
-      supplyApy: e,
-      maxLeverage: f,
-      collateralApy: h,
-      borrowApy: g,
-      additionalBorrowApy: x,
-      className: a,
-      children: l()
+      supplyApy: t,
+      maxLeverage: p,
+      collateralApy: n,
+      borrowApy: d,
+      quotaRate: a,
+      className: o,
+      children: s()
     }
-  ) : l();
+  ) : s();
 }
 export {
-  K as CompoundAPY
+  U as CompoundAPY
 };

package/dist/esm/components/detailed-page-title/detailed-page-title-explorer-dropdown.js

@@ -1,59 +1,68 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { IconExternal as t } from "@gearbox-protocol/static";
-import * as a from "react";
-import { BaseLink as p } from "../base-link/base-link.js";
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { IconExternal as o } from "@gearbox-protocol/static";
+import * as s from "react";
+import { BaseLink as a } from "../base-link/base-link.js";
 import { IconButton as d } from "../icon-button/icon-button.js";
 import { SimpleDropdown as c } from "../simple-dropdown/simple-dropdown.js";
 import { SimpleDropdownMenuItem as f } from "../simple-dropdown/simple-dropdown-menu-item.js";
-import { useIsMobile as u } from "../../hooks/use-media-query.js";
+import { SimpleTooltip as u } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import { FormattedMessageTyped as h } from "../typed-intl/index.js";
+import { useIsMobile as x } from "../../hooks/use-media-query.js";
 import "@gearbox-protocol/sdk";
-import { cn as h } from "../../utils/cn.js";
+import { cn as g } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-const x = a.forwardRef(function({ explorerLinks: o, className: i, title: l }, n) {
-  const m = u() ? 32 : 40;
+const D = s.forwardRef(function({ explorerLinks: r, className: i, title: m }, n) {
+  const l = x() ? 32 : 40;
   return /* @__PURE__ */ e(
-    c,
+    u,
     {
-      title: l || /* @__PURE__ */ e(
-        d,
+      title: /* @__PURE__ */ e(
+        c,
         {
-          ref: n,
-          buttonType: "outlined",
-          size: m,
-          title: "View in explorer",
-          className: h(i),
-          children: /* @__PURE__ */ e("span", { className: "flex items-center justify-center text-foreground", children: /* @__PURE__ */ e(t, { size: 14 }) })
+          title: m || /* @__PURE__ */ e(
+            d,
+            {
+              ref: n,
+              buttonType: "outlined",
+              size: l,
+              className: g(i),
+              children: /* @__PURE__ */ e("span", { className: "flex items-center justify-center text-foreground", children: /* @__PURE__ */ e(o, { size: 14 }) })
+            }
+          ),
+          asChild: !0,
+          placement: "bottom",
+          align: "end",
+          children: r?.map((t) => /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ p(
+            a,
+            {
+              href: t.url,
+              external: !0,
+              className: "flex items-center gap-2",
+              children: [
+                t.name,
+                /* @__PURE__ */ e(
+                  o,
+                  {
+                    size: 14,
+                    className: "ml-auto",
+                    style: { width: 14, height: 14 }
+                  }
+                )
+              ]
+            }
+          ) }, t.url))
         }
       ),
-      asChild: !0,
-      placement: "bottom",
-      align: "end",
-      children: o?.map((r) => /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ s(
-        p,
-        {
-          href: r.url,
-          external: !0,
-          className: "flex items-center gap-2",
-          children: [
-            r.name,
-            /* @__PURE__ */ e(
-              t,
-              {
-                size: 14,
-                className: "ml-auto",
-                style: { width: 14, height: 14 }
-              }
-            )
-          ]
-        }
-      ) }, r.url))
+      placement: "top",
+      children: /* @__PURE__ */ e(h, { messageId: "components.openCopyButtons.explorer" })
     }
   );
 });
-x.displayName = "DetailedPageTitleExplorerDropdown";
+D.displayName = "DetailedPageTitleExplorerDropdown";
 export {
-  x as DetailedPageTitleExplorerDropdown
+  D as DetailedPageTitleExplorerDropdown
 };

package/dist/esm/components/filter/filter-chip.js

@@ -1,6 +1,7 @@
 import { jsx as r, jsxs as c } from "react/jsx-runtime";
 import * as m from "react";
 import { Badge as s } from "../badge/badge.js";
+import "../badge/chip.js";
 import { faXmark as f } from "@fortawesome/free-solid-svg-icons";
 import { FaIcon as l } from "../icons/fa-icon.js";
 import "@gearbox-protocol/sdk";

package/dist/esm/components/graph/default-config.js

@@ -4,17 +4,17 @@ const e = {
   bottomColor: "rgba(76, 175, 80, 0.04)",
   lineColor: "#02c39a",
   lineWidth: 2
-}, i = {
+}, s = {
   showLabel: !0,
   color: "#02c39a",
   labelBackgroundColor: "#02c39a",
   width: 2
-};
-function t() {
+}, l = 'Rubik, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', t = 14;
+function b() {
   const r = o(
-    "hsl(var(--foreground))",
-    "rgb(0, 0, 0)"
-  );
+    "hsl(var(--muted-foreground))",
+    "rgb(163, 163, 163)"
+  ), i = o("hsl(var(--card))", "rgb(24, 24, 24)");
   return {
     timeScale: {
       borderVisible: !0,
@@ -37,10 +37,11 @@ function t() {
     },
     layout: {
       background: {
-        color: "transparent"
+        color: i
       },
       textColor: r,
-      fontSize: 14
+      fontSize: t,
+      fontFamily: l
     },
     crosshair: {
       horzLine: {
@@ -66,7 +67,7 @@ function t() {
     }
   };
 }
-function a() {
+function n() {
   return {
     topColor: "rgba(76, 175, 80, 0.56)",
     bottomColor: "rgba(76, 175, 80, 0.04)",
@@ -74,7 +75,7 @@ function a() {
     lineWidth: 2
   };
 }
-function s() {
+function c() {
   return {
     showLabel: !0,
     color: e.lineColor,
@@ -82,7 +83,7 @@ function s() {
     width: 2
   };
 }
-const b = {
+const u = {
   timeScale: {
     borderVisible: !0,
     borderColor: "rgba(224, 227, 235, 0.1)",
@@ -102,8 +103,9 @@ const b = {
     background: {
       color: "transparent"
     },
-    textColor: "rgb(0, 0, 0)",
-    fontSize: 14
+    textColor: "rgb(163, 163, 163)",
+    fontSize: t,
+    fontFamily: l
   },
   crosshair: {
     horzLine: {
@@ -130,9 +132,9 @@ const b = {
 };
 export {
   e as DEFAULT_AREA_SERIES,
-  b as DEFAULT_OPTIONS,
-  i as DEFAULT_VERTICAL_LINE,
-  t as getDefaultOptions,
-  a as getDefaultSeries,
-  s as getDefaultVerticalLine
+  u as DEFAULT_OPTIONS,
+  s as DEFAULT_VERTICAL_LINE,
+  b as getDefaultOptions,
+  n as getDefaultSeries,
+  c as getDefaultVerticalLine
 };

package/dist/esm/components/graph/formatters.js

@@ -1,45 +1,45 @@
 import { TickMarkType as g } from "lightweight-charts";
 import { DateTime as S } from "luxon";
-import { isBelowDisplayThreshold as x, FORMAT_CONSTANTS as X, toSignificantDigits as L, formatNumberWithSuffix as k } from "../../utils/format-number.js";
-const { MIN_DISPLAY_THRESHOLD: M, MAX_EXPONENTIAL_THRESHOLD: I } = X, P = (t, e, o = "full") => {
+import { isBelowDisplayThreshold as x, FORMAT_CONSTANTS as P, toSignificantDigits as I, formatNumberWithSuffix as p } from "../../utils/format-number.js";
+const { MIN_DISPLAY_THRESHOLD: M, MAX_EXPONENTIAL_THRESHOLD: H } = P, w = (t, e, o = "full") => {
   if (x(t))
     return e ? `<${M}${e}` : `<${M}`;
   if (t === 0)
     return e ? `0${e}` : "0";
-  const r = k(t, {
-    maxExponentialThreshold: I,
+  const r = p(t, {
+    maxExponentialThreshold: H,
     minimumFractionDigits: 0,
     maximumFractionDigits: o === "short" ? 1 : 0,
     format: o,
     adaptiveDecimals: o === "short"
   });
   return e ? `${r}${e}` : r;
-}, U = 2, p = (t, e) => {
+}, C = 2, R = (t, e) => {
   if (x(t))
     return e ? `<${M}${e}` : `<${M}`;
   if (t === 0)
     return e ? `0${e}` : "0";
-  const o = L(t, U);
+  const o = I(t, C);
   return e ? `${o}${e}` : o;
-}, C = 4, w = (t) => {
+}, Y = 4, G = (t) => {
   if (x(t))
     return `<${M}`;
   if (t === 0)
     return "0";
   const e = Math.round(t), o = Math.abs(t - e);
-  return o > 0 && o < 0.01 ? t.toFixed(12).replace(/0+$/, "").replace(/\.$/, "") : L(t, C);
-}, G = (t, e) => {
+  return o > 0 && o < 0.01 ? t.toFixed(12).replace(/0+$/, "").replace(/\.$/, "") : I(t, Y);
+}, V = (t, e) => {
   if (x(t))
     return e ? `<${M} ${e}` : `<${M}`;
   if (t === 0)
     return e ? `0 ${e}` : "0";
   const o = Number.isInteger(t), r = Math.abs(t), i = o && r >= 1e3, s = Math.round(t), a = Math.abs(t - s);
   if (a > 0 && a < 0.01 && !i) {
-    const $ = t.toFixed(12).replace(/0+$/, "").replace(/\.$/, "");
-    return e ? `${$} ${e}` : $;
+    const D = t.toFixed(12).replace(/0+$/, "").replace(/\.$/, "");
+    return e ? `${D} ${e}` : D;
   }
-  const F = k(t, {
-    maxExponentialThreshold: I,
+  const F = p(t, {
+    maxExponentialThreshold: H,
     minimumFractionDigits: o ? 0 : 2,
     maximumFractionDigits: i ? 1 : o ? 0 : 2,
     format: i ? "short" : "full",
@@ -47,12 +47,12 @@ const { MIN_DISPLAY_THRESHOLD: M, MAX_EXPONENTIAL_THRESHOLD: I } = X, P = (t, e,
   });
   return e ? `${F} ${e}` : F;
 }, N = {
-  "%": p,
-  $: P,
-  token: G,
-  none: w
-}, J = (t) => N[t] || N.token;
-function Z(t, e, o = 4) {
+  "%": R,
+  $: w,
+  token: V,
+  none: G
+}, v = (t) => N[t] || N.token;
+function tt(t, e, o = 4) {
   if (t === 0)
     return e ? `0 ${e}` : "0";
   const r = e && Math.abs(t) >= 1e3 ? 0 : o, i = t.toLocaleString("en-US", {
@@ -61,14 +61,20 @@ function Z(t, e, o = 4) {
   });
   return e ? `${i} ${e}` : i;
 }
-function v(t, e, o) {
+function k(t, e) {
+  return !t || e === "none" || e === "token" ? t : e === "$" ? `$${t}` : e === "%" ? `${t}%` : `${t} ${e}`;
+}
+function L(t) {
+  return t.includes("/") ? "none" : t;
+}
+function et(t, e, o) {
   const r = o?.yScaleMin;
   let i = t.length > 0 ? Math.min(...t) : 0, s = t.length > 0 ? Math.max(...t) : 0, a = [];
   const u = () => {
     const n = (i + s) / 2;
     let c = 1, m = "";
     return n >= 1e9 ? (c = 1e9, m = "B") : n >= 1e6 ? (c = 1e6, m = "M") : n >= 1e3 && (c = 1e3, m = "K"), { scale: c, suffix: m };
-  }, F = 8, $ = 0.02;
+  }, F = 8, D = 0.02;
   let A = 0;
   const E = (n, c, m, d) => {
     const h = (c > 1 ? n / c : n).toLocaleString("en-US", {
@@ -77,45 +83,48 @@ function v(t, e, o) {
       useGrouping: !1
     });
     return c > 1 ? `${h}${m}` : h;
-  }, R = (n, c, m) => {
+  }, U = (n, c, m) => {
     for (let d = 0; d <= F; d++) {
-      const l = /* @__PURE__ */ new Set();
+      const $ = /* @__PURE__ */ new Set();
       let h = !0;
-      for (const D of n) {
-        const f = E(D, c, m, d);
-        if (l.has(f)) {
+      for (const T of n) {
+        const f = E(T, c, m, d);
+        if ($.has(f)) {
           h = !1;
           break;
         }
-        l.add(f);
+        $.add(f);
       }
       if (h) return d;
     }
     return F;
-  }, O = (n) => {
+  }, X = (n) => {
     if (r !== void 0 && n < r) return "";
-    if (n === 0) return "0";
+    if (n === 0) return k("0", L(e));
     const { scale: c, suffix: m } = u();
-    return E(n, c, m, A);
+    return k(
+      E(n, c, m, A),
+      L(e)
+    );
   };
   return {
-    formatter: (n) => O(n),
+    formatter: (n) => X(n),
     tickmarksFormatter: (n) => {
-      const { scale: c, suffix: m } = u(), d = s - i, l = d > 0 ? a.filter(
-        (f) => Math.abs(f) >= d * $
+      const { scale: c, suffix: m } = u(), d = s - i, $ = d > 0 ? a.filter(
+        (f) => Math.abs(f) >= d * D
       ) : a, h = n.filter(
         (f) => f !== 0 && !(r !== void 0 && f < r)
       );
-      A = R(
-        [...h, ...l],
+      A = U(
+        [...h, ...$],
         c,
         m
       );
-      const D = /* @__PURE__ */ new Set();
+      const T = /* @__PURE__ */ new Set();
       return n.map((f) => {
         if (r !== void 0 && f < r) return "";
-        const T = f === 0 ? "0" : E(f, c, m, A);
-        return !T || D.has(T) ? "" : (D.add(T), T);
+        const l = f === 0 ? "0" : E(f, c, m, A);
+        return !l || T.has(l) ? "" : (T.add(l), k(l, L(e)));
       });
     },
     updateVisibleRange: (n) => {
@@ -126,11 +135,11 @@ function v(t, e, o) {
     }
   };
 }
-const H = (t) => S.fromSeconds(Number(t)).toFormat("dd/LL/yyyy HH:mm"), Y = (t) => S.fromSeconds(Number(t)).toFormat("HH:mm"), V = (t, e) => p(Number(t), e), _ = {
-  time: H,
-  "%": V
+const O = (t) => S.fromSeconds(Number(t)).toFormat("dd/LL/yyyy HH:mm"), W = (t) => S.fromSeconds(Number(t)).toFormat("HH:mm"), q = (t, e) => R(Number(t), e), _ = {
+  time: O,
+  "%": q
 };
-function W(t) {
+function B(t) {
   const e = /* @__PURE__ */ new Map();
   return (o, r, i) => {
     const s = S.fromSeconds(Number(o));
@@ -160,26 +169,27 @@ function W(t) {
     return u || (u = /* @__PURE__ */ new Set(), e.set(r, u)), u.has(a) ? " " : (u.add(a), a);
   };
 }
-const b = (t, e) => {
+const y = (t, e) => {
   if (t === "time" && e && e.length > 0) {
     const r = S.fromSeconds(Number(e[0].time)), i = S.fromSeconds(
       Number(e[e.length - 1].time)
     ), s = r.hasSame(i, "day"), a = s ? 0 : Math.ceil(i.diff(r, "days").days);
     return {
-      timeFormatter: s ? Y : H,
-      tickMarkFormatter: W(a)
+      timeFormatter: s ? W : O,
+      tickMarkFormatter: B(a)
     };
   }
   const o = _[t] || _.time;
   return {
     timeFormatter: o,
-    tickMarkFormatter: (r) => o(r, void 0)
+    tickMarkFormatter: (r) => o(r, t)
   };
-}, tt = (t, e) => b(t, e).timeFormatter;
+}, rt = (t, e) => y(t, e).timeFormatter;
 export {
-  v as createAdaptiveYAxisFormatter,
-  Z as formatExactValue,
-  tt as getXFormatter,
-  b as getXFormatters,
-  J as getYFormatter
+  et as createAdaptiveYAxisFormatter,
+  tt as formatExactValue,
+  rt as getXFormatter,
+  y as getXFormatters,
+  v as getYFormatter,
+  k as withYAxisUnit
 };