@gearbox-protocol/ui-kit 4.0.0-next.4 → 4.0.0-next.5

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

@@ -1,95 +1,100 @@
-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 { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { useId as g } from "react";
 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 { totalApyOf as x, positiveTokenRewardsOf as v, pointProgramsOf as C } 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 I } from "../../utils/bps.js";
+import { cn as k } from "../../utils/cn.js";
 import "sonner";
-import { formatPercentAmount as v } from "../../utils/format-money.js";
+import { formatCompactPercent as P } 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 A() {
+  const t = `additional-incentives-${g().replace(/:/g, "")}`;
+  return /* @__PURE__ */ n(
+    "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__ */ n(
+          "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 : v(t).length > 0 || C(t).length > 0;
+}
+function E({
+  apy: t,
+  maxLeverage: p,
+  collateralApy: r,
+  borrowApy: d,
+  additionalBorrowApy: a,
+  decimals: m = 2,
+  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 = x(t), f = c(t) || c(r), h = i >= 1, s = () => {
+    const u = P(I(i), m);
+    return /* @__PURE__ */ n("div", { className: k("inline-flex items-center gap-1.5", o), children: [
+      /* @__PURE__ */ e("span", { className: "inline-flex items-center", children: u }),
+      f ? /* @__PURE__ */ e(A, {}) : null
     ] });
   };
-  return A ? /* @__PURE__ */ n(
+  return h ? /* @__PURE__ */ e(
     w,
     {
-      supplyApy: e,
-      maxLeverage: f,
-      collateralApy: h,
-      borrowApy: g,
-      additionalBorrowApy: x,
-      className: a,
-      children: l()
+      supplyApy: t,
+      maxLeverage: p,
+      collateralApy: r,
+      borrowApy: d,
+      additionalBorrowApy: a,
+      className: o,
+      children: s()
     }
-  ) : l();
+  ) : s();
 }
 export {
-  K as CompoundAPY
+  E as CompoundAPY
 };

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/graph-view.js

@@ -1,8 +1,8 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
 import { IconInfo as L } from "@gearbox-protocol/static";
 import { cva as D } from "class-variance-authority";
 import * as B from "react";
-import { useMemo as E, useRef as w, useState as O, useEffect as P } from "react";
+import { useMemo as E, useRef as b, useState as O, useEffect as P } from "react";
 import { SpinnerLoader as q } from "../spinner-loader/spinner-loader.js";
 import { cn as j } from "../../utils/cn.js";
 import { Graph as F } from "./graph.js";
@@ -14,7 +14,8 @@ const J = D(
         default: "shadow",
         elevated: "shadow-lg",
         outlined: "border-2",
-        ghost: "border-0 shadow-none"
+        ghost: "border-0 shadow-none",
+        plain: "shadow-none"
       },
       size: {
         sm: "h-48 sm:h-64",
@@ -42,8 +43,8 @@ const J = D(
     variant: t,
     size: l,
     padding: m,
-    title: s,
-    description: a,
+    title: a,
+    description: s,
     toolbar: n,
     loading: i = !1,
     emptyMessage: d,
@@ -51,8 +52,8 @@ const J = D(
     children: h,
     ...x
   }, g) => {
-    const u = s || a || n;
-    return /* @__PURE__ */ o(
+    const u = a || s || n;
+    return /* @__PURE__ */ f(
       "div",
       {
         ref: g,
@@ -62,20 +63,20 @@ const J = D(
         ),
         ...x,
         children: [
-          u && /* @__PURE__ */ o("div", { className: "mb-4 flex items-start justify-between gap-4 shrink-0", children: [
-            (s || a) && /* @__PURE__ */ o("div", { className: "flex-1", children: [
-              s && /* @__PURE__ */ e("h3", { className: "text-base sm:text-lg font-semibold leading-none tracking-tight", children: s }),
-              a && /* @__PURE__ */ e("p", { className: "mt-1 text-xs sm:text-sm text-muted-foreground", children: a })
+          u && /* @__PURE__ */ f("div", { className: "mb-4 flex items-start justify-between gap-4 shrink-0", children: [
+            (a || s) && /* @__PURE__ */ f("div", { className: "flex-1", children: [
+              a && /* @__PURE__ */ e("h3", { className: "text-base sm:text-lg font-semibold leading-none tracking-tight", children: a }),
+              s && /* @__PURE__ */ e("p", { className: "mt-1 text-xs sm:text-sm text-muted-foreground", children: s })
             ] }),
             n && /* @__PURE__ */ e("div", { className: "shrink-0 w-full", children: n })
           ] }),
-          /* @__PURE__ */ o("div", { className: "relative flex-1 w-full min-h-0", children: [
+          /* @__PURE__ */ f("div", { className: "relative flex-1 w-full min-h-0", children: [
             i && /* @__PURE__ */ e("div", { className: "absolute inset-0 z-10 flex items-center justify-center opacity-0 animate-delayed-fade-in", children: /* @__PURE__ */ e("div", { className: "flex flex-col items-center gap-2", children: /* @__PURE__ */ e(q, { size: 32, width: 3 }) }) }),
-            c && /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ o("div", { className: "flex flex-col items-center gap-2 text-muted-foreground", children: [
+            c && /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ f("div", { className: "flex flex-col items-center gap-2 text-muted-foreground", children: [
               /* @__PURE__ */ e(L, { size: 48, className: "size-12" }),
               /* @__PURE__ */ e("span", { className: "text-xs sm:text-sm", children: c })
             ] }) }),
-            !c && !h && d && /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ o("div", { className: "flex flex-col items-center gap-2 text-muted-foreground", children: [
+            !c && !h && d && /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ f("div", { className: "flex flex-col items-center gap-2 text-muted-foreground", children: [
               /* @__PURE__ */ e(
                 "svg",
                 {
@@ -119,8 +120,8 @@ function _({
   data: t,
   lineColor: l,
   color: m,
-  topColor: s,
-  bottomColor: a,
+  topColor: a,
+  bottomColor: s,
   graphId: n,
   onUnselectSeries: i,
   loading: d,
@@ -137,29 +138,29 @@ function _({
   showCurrentValue: y,
   ...H
 }) {
-  const v = E(() => {
+  const p = E(() => {
     if (r && r.length > 0)
       return r;
     if (t && t.length > 0) {
-      const f = l ?? m;
+      const o = l ?? m;
       return [
         {
-          data: t.map((p) => ({
-            time: typeof p.time == "number" ? p.time : Number(p.time),
-            value: p.value
+          data: t.map((v) => ({
+            time: typeof v.time == "number" ? v.time : Number(v.time),
+            value: v.value
           })),
           label: "Value",
           yMeasureUnit: N,
-          ...f && { lineColor: f },
-          ...s && { topColor: s },
-          ...a && { bottomColor: a }
+          ...o && { lineColor: o },
+          ...a && { topColor: a },
+          ...s && { bottomColor: s }
         }
       ];
     }
     return [];
-  }, [r, t, N, l, m, s, a]), b = v.some((f) => f.data.length > 0), A = !d && !b, R = w(v);
-  b && (R.current = v);
-  const V = d && !b ? R.current : v, I = V.some((f) => f.data.length > 0);
+  }, [r, t, N, l, m, a, s]), w = p.some((o) => o.data.length > 0), A = !d && !w, R = b(p);
+  w && (R.current = p);
+  const V = d && !w ? R.current : p, I = V.some((o) => o.data.length > 0);
   return /* @__PURE__ */ e(
     k,
     {
@@ -187,14 +188,14 @@ function _({
   );
 }
 function $(r = 0) {
-  const t = w(null), l = w(null), [m, s] = O(null);
+  const t = b(null), l = b(null), [m, a] = O(null);
   return P(() => {
-    const a = () => {
+    const s = () => {
       if (t.current && l.current) {
         const d = l.current.clientWidth, c = t.current.clientWidth;
-        s(d - c - r);
+        a(d - c - r);
       }
-    }, n = l.current, i = n ? new ResizeObserver(a) : null;
+    }, n = l.current, i = n ? new ResizeObserver(s) : null;
     return n && i?.observe(n), () => {
       n && i?.unobserve(n);
     };