@gearbox-protocol/ui-kit 4.0.0-next.60 → 4.0.0-next.61

package/dist/esm/components/with-copy/with-copy.js

@@ -1,171 +1,54 @@
-import { jsx as t, jsxs as l } from "react/jsx-runtime";
-import { faCheck as v } from "@fortawesome/free-solid-svg-icons";
-import { IconCopy as w } from "@gearbox-protocol/static";
-import { useState as k, useRef as N } from "react";
-import { FaIcon as j } from "../icons/fa-icon.js";
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { faCheck as y } from "@fortawesome/free-solid-svg-icons";
+import { IconCopy as f } from "@gearbox-protocol/static";
+import { FaIcon as h } from "../icons/fa-icon.js";
+import { SimpleTooltip as C } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import { useCopyToClipboard as x } from "../../hooks/use-copy-to-clipboard.js";
+import { cn as a } from "../../utils/cn.js";
 import "@gearbox-protocol/sdk/onchain";
-import { cn as i } from "../../utils/cn.js";
-import "luxon";
 import "../../utils/z-index.js";
-import "../accordion/accordion.js";
-import "../alert-badge/alert-badge.js";
-import "../alert-dialog/alert-dialog.js";
-import "../alert-modal/alert-modal.js";
-import "../buttons/back-button/back-button.js";
-import "../buttons/button/button.js";
-import "../buttons/copy-button/copy-button.js";
-import "../buttons/external-button/external-button.js";
-import "../buttons/tab-button/tab-button.js";
-import "../token-icon/token-icon.js";
-import { SimpleTooltip as T } from "../tooltip/simple-tooltip.js";
-import "../tooltip/tooltip.js";
-import "../badge/badge.js";
-import "../badge/chip.js";
-import "../base/amount-input/amount-input.js";
-import "../confirm-menu/confirm-menu.js";
-import "react-intl";
-import "../table/grid-table.js";
-import "../skeleton/skeleton.js";
-import "../table/table.js";
-import "../token-symbol/token-symbol.js";
-import "../simple-accordion/simple-accordion.js";
-import "../tip-card/tip-card.js";
-import "../typography/typography.js";
-import "../help-tip/help-tip.js";
-import "viem";
-import "../points-icon/points-icon.js";
-import "../vertical-indicator/vertical-indicator.js";
-import "../base/page-title/page-title.js";
-import "../detailed-page-title/detailed-page-title-explorer-dropdown.js";
-import "../base/detailed-page-title/copy-button.js";
-import "../base/details-view/detail-aside/detail-aside-scope.js";
-import "../layout/main-aside-layout/main-aside-layout.js";
-import "../base/details-view/details-view.js";
-import "../fadeout-loading/fadeout-loading.js";
-import "../health-factor/health-factor.js";
-import "@gearbox-protocol/sdk/model";
-import "../checkbox/checkbox.js";
-import "../checkbox/checkbox-labeled.js";
-import "../select/select.js";
-import "sonner";
-import "../breakpoint-provider.js";
-import "lightweight-charts";
-import "../graph/formatters.js";
-import "../graph/graph-view.js";
-import "../edit-input/edit-input.js";
-import "../slider/slider.js";
-import "../slider/slider-context.js";
-import "../text-button/text-button.js";
-import "react-router-dom";
-import "../status-elements/status-elements.js";
-import "../base/manage-pane/manage-pane.js";
-import "../base/tabber/tabber.js";
-import "../link/link.js";
-import "../rounded-image/rounded-image.js";
-import "../base-link/base-link.js";
-import "../base-table/base-table-line.js";
-import "../navigation-context/navigation-context.js";
-import "../cards/card/card.js";
-import "../client-adapters/styled-button/styled-button.js";
-import "../client-adapters/styled-dialog-container/styled-dialog-container.js";
-import "../simple-dropdown/simple-dropdown.js";
-import "../simple-dropdown/simple-dropdown-menu-item.js";
-import "../composites/tx-preview/confirm/amounts/TransactionConfirmAmountField.js";
-import "../composites/tx-preview/confirm/dialog/constants.js";
-import "../modal/modal.js";
-import "../spinner/spinner.js";
-import "../spinner-loader/spinner-loader.js";
-import "@radix-ui/react-dialog";
-import "../dialog/dialog-container.js";
-import "../dialog/dialog-content.js";
-import "../dialog/dialog-description.js";
-import "../dialog/dialog-footer.js";
-import "../dialog/dialog-header.js";
-import "../dialog/dialog-title.js";
-import "../dialog/dialog-modal-container.js";
-import "../dialog/dialog-overlay.js";
-import "../input/input.js";
-import "../label/label.js";
-import "../dropdown-menu/dropdown-menu.js";
-import "../dropdown-menu/dropdown-menu-content.js";
-import "../dropdown-menu/dropdown-menu-item.js";
-import "../dropdown-menu/dropdown-menu-label.js";
-import "../icon-button/icon-button.js";
-import "../layout/app-footer/app-footer.js";
-import "../layout/app-header/app-header.js";
-import "../layout/col/col.js";
-import "../layout/container/container.js";
-import "../layout/grid/grid.js";
-import "../layout/layout/layout.js";
-import "../legal-agreement/legal-agreement-theme.js";
-import "../loader/loader.js";
-import "../loading/loading.js";
-import "../markdown-text/markdown-text.js";
-import "../radio-group/radio-group.js";
-import "../search-line/search-line.js";
-import "../segmented-control/segmented-control.js";
-import "../separate-line/separate-line.js";
-import "../split-list/split-list.js";
-import "../tabs/tabs.js";
-import "../textarea/textarea.js";
-import "../theme-provider.js";
-function Ko({
-  toCopy: u,
-  children: d,
-  onCopySuccess: f,
-  iconSize: o = 14,
-  icon: y,
-  className: h,
-  buttonClassName: x,
-  successDuration: b = 1500,
-  trigger: r = "button",
-  tooltip: a
+const e = 14;
+function E({
+  toCopy: l,
+  children: p,
+  trigger: o = "button",
+  tooltip: r
 }) {
-  const [p, s] = k(!1), m = N(null), e = async () => {
-    try {
-      await navigator.clipboard.writeText(u), m.current && clearTimeout(m.current), s(!0), m.current = setTimeout(() => {
-        s(!1);
-      }, b), f?.();
-    } catch (n) {
-      console.error("Failed to copy:", n);
-    }
-  }, C = (n) => {
-    n.key === "Enter" && e();
-  }, c = () => (
+  const { isCopied: i, copy: m } = x(), n = () => m(l), u = (d) => {
+    d.key === "Enter" && n();
+  }, s = () => (
     // biome-ignore lint/a11y/noStaticElementInteractions: Root should be clickable and shouldn't be a button
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ c(
       "div",
       {
-        className: i("group flex items-center min-w-0", h),
-        onClick: r === "root" ? e : void 0,
-        onKeyDown: r === "root" ? C : void 0,
-        role: r === "root" ? "button" : void 0,
+        className: "group flex items-center min-w-0",
+        onClick: o === "root" ? n : void 0,
+        onKeyDown: o === "root" ? u : void 0,
+        role: o === "root" ? "button" : void 0,
         children: [
-          /* @__PURE__ */ t("span", { className: "truncate", children: d }),
-          /* @__PURE__ */ l(
+          /* @__PURE__ */ t("span", { className: "truncate", children: p }),
+          /* @__PURE__ */ c(
             "button",
             {
               type: "button",
-              onClick: r === "button" ? e : void 0,
-              className: i(
-                "ml-1 cursor-pointer relative flex-shrink-0",
-                x
-              ),
-              style: { width: o, height: o },
-              title: p ? "Copied!" : "Copy to clipboard",
+              onClick: o === "button" ? n : void 0,
+              className: "ml-1 cursor-pointer relative flex-shrink-0",
+              style: { width: e, height: e },
+              title: i ? "Copied!" : "Copy to clipboard",
               children: [
                 /* @__PURE__ */ t(
                   "span",
                   {
-                    className: i(
+                    className: a(
                       "absolute inset-0 flex items-center justify-center transition-all duration-200",
-                      p ? "opacity-100 scale-100 text-green-500" : "opacity-0 scale-50 text-green-500"
+                      i ? "opacity-100 scale-100 text-green-500" : "opacity-0 scale-50 text-green-500"
                     ),
                     children: /* @__PURE__ */ t(
-                      j,
+                      h,
                       {
-                        icon: v,
-                        style: { fontSize: o },
+                        icon: y,
+                        style: { fontSize: e },
                         className: "block"
                       }
                     )
@@ -174,11 +57,11 @@ function Ko({
                 /* @__PURE__ */ t(
                   "span",
                   {
-                    className: i(
+                    className: a(
                       "absolute inset-0 flex items-center justify-center transition-all duration-200",
-                      p ? "opacity-0 scale-50" : "opacity-100 scale-100 text-gray-400 group-hover:text-white"
+                      i ? "opacity-0 scale-50" : "opacity-100 scale-100 text-gray-400 group-hover:text-white"
                     ),
-                    children: y ?? /* @__PURE__ */ t(w, { size: o })
+                    children: /* @__PURE__ */ t(f, { size: e })
                   }
                 )
               ]
@@ -188,8 +71,8 @@ function Ko({
       }
     )
   );
-  return a ? /* @__PURE__ */ t(T, { placement: "top", triangle: !0, title: c(), children: a }) : c();
+  return r ? /* @__PURE__ */ t(C, { placement: "top", triangle: !0, title: s(), children: r }) : s();
 }
 export {
-  Ko as WithCopy
+  E as WithCopy
 };

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

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

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

@@ -1,184 +1,31 @@
-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 { jsx as l } from "react/jsx-runtime";
+import { APY_BREAKDOWN_TOOLTIP_WIDTH as o } from "../base/apy-breakdown-body/apy-breakdown-body.js";
+import { SimpleTooltip as f } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
-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({
+function W({
   title: t,
-  children: l,
-  placement: s = "left",
-  open: a,
-  className: i,
-  triggerClassName: n
+  children: i,
+  placement: r = "left",
+  open: m,
+  className: p,
+  triggerClassName: e
 }) {
-  return /* @__PURE__ */ e(
-    T,
+  return /* @__PURE__ */ l(
+    f,
     {
-      placement: s,
+      placement: r,
       triangle: !1,
       type: "modal-tooltip",
-      minWidth: B,
-      maxWidth: B,
+      minWidth: o,
+      maxWidth: o,
       title: t,
-      open: a,
-      className: i,
-      triggerClassName: n,
-      children: l
-    }
-  );
-}
-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 W({
-  supplyApy: t,
-  maxLeverage: l,
-  collateralApy: s,
-  borrowApy: a,
-  quotaRate: i,
-  period: n
-}) {
-  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,
-    {
-      title: /* @__PURE__ */ e(
-        d,
-        {
-          messageId: w(
-            n,
-            "components.yieldBreakdown.titleNetAtLeverage",
-            "components.yieldBreakdown.titleNetAtLeverage7d"
-          ),
-          values: { leverage: N(l) }
-        }
-      ),
-      chip: u(p),
-      chipPositive: p > 0,
-      children: [
-        r?.organicApy != null ? /* @__PURE__ */ e(
-          y,
-          {
-            muted: r.organicApy < 0,
-            label: /* @__PURE__ */ e(
-              d,
-              {
-                messageId: w(
-                  n,
-                  "components.yieldBreakdown.collateralApy",
-                  "components.yieldBreakdown.collateralApy7d"
-                )
-              }
-            ),
-            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}`
-          )
-        ),
-        f != null ? /* @__PURE__ */ e(
-          y,
-          {
-            muted: f < 0,
-            label: /* @__PURE__ */ e(
-              d,
-              {
-                messageId: w(
-                  n,
-                  "components.yieldBreakdown.borrowRate",
-                  "components.yieldBreakdown.borrowRate7d"
-                )
-              }
-            ),
-            value: u(f)
-          }
-        ) : null,
-        k.length > 0 ? /* @__PURE__ */ c(A, { children: [
-          /* @__PURE__ */ e(h, {}),
-          k.map((o) => /* @__PURE__ */ e(
-            y,
-            {
-              label: /* @__PURE__ */ c("span", { className: "inline-flex items-center gap-1.5", children: [
-                /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
-                  d,
-                  {
-                    messageId: "components.yieldBreakdown.programPoints",
-                    values: { name: o.name }
-                  }
-                ) }),
-                /* @__PURE__ */ e(
-                  I,
-                  {
-                    reward: {
-                      name: o.name,
-                      type: o.id
-                    },
-                    size: 20
-                  }
-                )
-              ] }),
-              value: `${o.multiplier}×`
-            },
-            `points-${o.id}`
-          ))
-        ] }) : null
-      ]
+      open: m,
+      className: p,
+      triggerClassName: e,
+      children: i
     }
   );
 }
 export {
-  S as ApyBreakdownTooltip,
-  H as YieldBreakdownTooltip
+  W as ApyBreakdownTooltip
 };

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

@@ -0,0 +1,158 @@
+import { jsx as e, jsxs as p, Fragment as B } from "react/jsx-runtime";
+import { ApyBreakdownBody as A, formatBreakdownRate as c, ApyBreakdownRow as u, periodMessageId as k, ApyBreakdownDivider as v } from "../base/apy-breakdown-body/apy-breakdown-body.js";
+import { PoolApyBreakdownCard as h } from "../base/pool-apy-breakdown-card/pool-apy-breakdown-card.js";
+import { PointsIcon as b } from "../points-icon/points-icon.js";
+import { TokenIcon as I } from "../token-icon/token-icon.js";
+import { FormattedMessageTyped as a } from "../typed-intl/index.js";
+import { formatLeverage as P } from "../../utils/format-leverage.js";
+import { tokenRewardsOf as R, pointProgramsOf as T, totalApyOf as x } from "../../utils/internal/apy-breakdown.js";
+import { ApyBreakdownTooltip as N } from "./yield-breakdown-tooltip.js";
+function E({
+  supplyApy: l,
+  maxLeverage: r,
+  collateralApy: y,
+  borrowApy: s,
+  quotaRate: i,
+  period: t,
+  children: n,
+  className: d,
+  open: g
+}) {
+  const m = r !== void 0 && r > 0;
+  return /* @__PURE__ */ e(
+    N,
+    {
+      placement: "bottom",
+      title: /* @__PURE__ */ e("span", { className: d, children: n }),
+      triggerClassName: d,
+      open: g,
+      children: m ? /* @__PURE__ */ e(
+        $,
+        {
+          supplyApy: l,
+          maxLeverage: r,
+          collateralApy: y,
+          borrowApy: s,
+          quotaRate: i,
+          period: t
+        }
+      ) : /* @__PURE__ */ e(h, { data: l, period: t })
+    }
+  );
+}
+function $({
+  supplyApy: l,
+  maxLeverage: r,
+  collateralApy: y,
+  borrowApy: s,
+  quotaRate: i,
+  period: t
+}) {
+  const n = y, d = n ? R(n) : [], g = T(l), m = x(l), w = s != null || i != null ? -((s ?? 0) + (i ?? 0)) : void 0, f = g.filter((o) => o.multiplier != null);
+  return /* @__PURE__ */ p(
+    A,
+    {
+      title: /* @__PURE__ */ e(
+        a,
+        {
+          messageId: k(
+            t,
+            "components.yieldBreakdown.titleNetAtLeverage",
+            "components.yieldBreakdown.titleNetAtLeverage7d"
+          ),
+          values: { leverage: P(r) }
+        }
+      ),
+      chip: c(m),
+      chipPositive: m > 0,
+      children: [
+        n?.organicApy != null ? /* @__PURE__ */ e(
+          u,
+          {
+            muted: n.organicApy < 0,
+            label: /* @__PURE__ */ e(
+              a,
+              {
+                messageId: k(
+                  t,
+                  "components.yieldBreakdown.collateralApy",
+                  "components.yieldBreakdown.collateralApy7d"
+                )
+              }
+            ),
+            value: c(n.organicApy)
+          }
+        ) : null,
+        d.map(
+          (o) => o.supplyApr == null ? null : /* @__PURE__ */ e(
+            u,
+            {
+              muted: o.supplyApr < 0,
+              label: /* @__PURE__ */ p("span", { className: "inline-flex items-center gap-1.5", children: [
+                /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+                  a,
+                  {
+                    messageId: "components.apyParts.extraAPY",
+                    values: { symbol: o.token.symbol }
+                  }
+                ) }),
+                /* @__PURE__ */ e(I, { token: o.token, size: 20 })
+              ] }),
+              value: c(o.supplyApr)
+            },
+            `incentive-${o.token.address}-${o.supplyApr}`
+          )
+        ),
+        w != null ? /* @__PURE__ */ e(
+          u,
+          {
+            muted: w < 0,
+            label: /* @__PURE__ */ e(
+              a,
+              {
+                messageId: k(
+                  t,
+                  "components.yieldBreakdown.borrowRate",
+                  "components.yieldBreakdown.borrowRate7d"
+                )
+              }
+            ),
+            value: c(w)
+          }
+        ) : null,
+        f.length > 0 ? /* @__PURE__ */ p(B, { children: [
+          /* @__PURE__ */ e(v, {}),
+          f.map((o) => /* @__PURE__ */ e(
+            u,
+            {
+              label: /* @__PURE__ */ p("span", { className: "inline-flex items-center gap-1.5", children: [
+                /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+                  a,
+                  {
+                    messageId: "components.yieldBreakdown.programPoints",
+                    values: { name: o.name }
+                  }
+                ) }),
+                /* @__PURE__ */ e(
+                  b,
+                  {
+                    reward: {
+                      name: o.name,
+                      type: o.id
+                    },
+                    size: 20
+                  }
+                )
+              ] }),
+              value: `${o.multiplier}×`
+            },
+            `points-${o.id}`
+          ))
+        ] }) : null
+      ]
+    }
+  );
+}
+export {
+  E as YieldBreakdownTooltip
+};

package/dist/esm/configs/tailwind-preset.js

@@ -72,18 +72,12 @@ const e = {
         "success-foreground": "hsl(var(--success-foreground))",
         "success-hover": "hsl(var(--success-hover))",
         warning: "hsl(var(--warning))",
-        info: {
-          DEFAULT: "hsl(var(--info))",
-          foreground: "hsl(var(--info-foreground))"
-        },
         liquidation: "hsl(var(--liquidation))",
-        "liquidation-line": "hsl(var(--liquidation-line))",
         border: "hsl(var(--border))",
         divider: "hsl(var(--divider))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
         "text-secondary": "hsl(var(--text-secondary))",
-        "dropdown-dark-button": "hsl(var(--dropdown-dark-button))",
         white: "hsl(var(--white))",
         black: "hsl(var(--black))",
         gray: {

package/dist/esm/hooks/breakpoint-state.js

@@ -0,0 +1,54 @@
+import { createContext as m, useContext as r } from "react";
+const t = {
+  isExtraSmall: "(max-width: 500px)",
+  isMobile: "(max-width: 768px)",
+  isTablet: "(min-width: 768px) and (max-width: 1024px)",
+  isMedium: "(max-width: 1024px)",
+  isDesktop: "(min-width: 1024px)"
+}, p = {
+  isExtraSmall: !1,
+  isMobile: !1,
+  isTablet: !1,
+  isMedium: !1,
+  isDesktop: !1
+};
+function b(e) {
+  return {
+    isExtraSmall: e(t.isExtraSmall).matches,
+    isMobile: e(t.isMobile).matches,
+    isTablet: e(t.isTablet).matches,
+    isMedium: e(t.isMedium).matches,
+    isDesktop: e(t.isDesktop).matches
+  };
+}
+function u(e, n) {
+  const a = Object.keys(t), s = Object.fromEntries(
+    a.map((i) => [i, e(t[i])])
+  ), l = () => ({
+    isExtraSmall: s.isExtraSmall.matches,
+    isMobile: s.isMobile.matches,
+    isTablet: s.isTablet.matches,
+    isMedium: s.isMedium.matches,
+    isDesktop: s.isDesktop.matches
+  }), o = () => n(l());
+  for (const i of a)
+    s[i].addEventListener("change", o);
+  return () => {
+    for (const i of a)
+      s[i].removeEventListener("change", o);
+  };
+}
+const c = m(
+  void 0
+);
+function E() {
+  return r(c);
+}
+export {
+  t as BREAKPOINT_QUERIES,
+  c as BreakpointContext,
+  p as DEFAULT_BREAKPOINT_STATE,
+  b as getBreakpointState,
+  u as subscribeBreakpoints,
+  E as useBreakpointContext
+};