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

package/dist/esm/components/base/amount-input/token-select-panel.js

@@ -1,67 +1,57 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { ConfirmMenu as h } from "../../confirm-menu/confirm-menu.js";
-import "react-intl";
-import "../../buttons/button/button.js";
-import { VSpace as u } from "../../vspace/vspace.js";
-import { GridTable as b, GridTableBody as g, GridTableRow as v, GridTableCell as a } from "../../table/grid-table.js";
-import "../../skeleton/skeleton.js";
-import "react";
-import "@gearbox-protocol/sdk/onchain";
-import "clsx";
-import "tailwind-merge";
-import { formatAssetAmount as w } from "../../../utils/format-asset-amount.js";
-import { formatMoney as T } from "../../../utils/format-money.js";
-import "luxon";
-import "../../../utils/z-index.js";
-import "../../table/table.js";
-import { TokenSymbol as y } from "../../token-symbol/token-symbol.js";
-import { FormattedMessageTyped as N } from "../../typed-intl/index.js";
-import { AmountInputTest as s } from "./constants.js";
-function J({
-  tokens: i,
+import { GridTable as u, GridTableBody as b, GridTableRow as g, GridTableCell as t } from "../../table/grid-table.js";
+import { TokenSymbol as v } from "../../token-symbol/token-symbol.js";
+import { FormattedMessageTyped as w } from "../../typed-intl/index.js";
+import { VSpace as T } from "../../vspace/vspace.js";
+import { formatMoney as y } from "../../../utils/format-money.js";
+import { formatAssetAmount as N } from "../../../utils/internal/format-asset-amount.js";
+import { AmountInputTest as m } from "./constants.js";
+function P({
+  tokens: o,
   balances: d,
   usdPrices: n,
-  onSelect: p,
-  onClose: c
+  onSelect: c,
+  onClose: p
 }) {
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ l(
     "div",
     {
-      "data-testid": s.selectPanel,
+      "data-testid": m.selectPanel,
       className: "flex max-h-[calc(100vh-40px)] w-full flex-col overflow-hidden rounded-lg border border-gray-10 bg-modal p-4 shadow-[0_4px_28px_4px_rgba(0,0,0,0.25)] sm:max-h-[560px]",
       children: [
         /* @__PURE__ */ e(
           h,
           {
-            title: /* @__PURE__ */ e(N, { messageId: "components.amountInput.selectToken" }),
-            onClose: c
+            title: /* @__PURE__ */ e(w, { messageId: "components.amountInput.selectToken" }),
+            onClose: p
           }
         ),
-        /* @__PURE__ */ e(u, { size: 16 }),
+        /* @__PURE__ */ e(T, { size: 16 }),
         /* @__PURE__ */ e("div", { className: "flex min-h-[260px] flex-col overflow-y-auto pr-1", children: /* @__PURE__ */ e(
-          b,
+          u,
           {
             cols: "minmax(0,1fr) 120px",
             gap: 0,
             size: "sm",
             wrapperClassName: "overflow-visible",
-            children: /* @__PURE__ */ e(g, { children: i.map((r, f) => {
-              const l = d?.get(r.address) ?? 0n, t = n?.get(r.address), x = Number(l) / 10 ** r.decimals, m = t !== void 0 ? T(x * t, 4) : void 0;
-              return /* @__PURE__ */ o(
-                v,
+            children: /* @__PURE__ */ e(b, { children: o.map((r, f) => {
+              const a = d?.get(r.address) ?? 0n, s = n?.get(r.address), x = Number(a) / 10 ** r.decimals, i = s !== void 0 ? y(x * s, 4) : void 0;
+              return /* @__PURE__ */ l(
+                g,
                 {
-                  last: f === i.length - 1,
+                  last: f === o.length - 1,
                   height: "56px",
-                  "data-testid": s.selectOption,
-                  onRowClick: () => p(r),
+                  "data-testid": m.selectOption,
+                  onRowClick: () => c(r),
                   children: [
-                    /* @__PURE__ */ e(a, { size: "sm", children: /* @__PURE__ */ o("div", { className: "flex items-center gap-3", children: [
-                      /* @__PURE__ */ e(y, { token: r, size: 24, showSymbol: !1 }),
+                    /* @__PURE__ */ e(t, { size: "sm", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-3", children: [
+                      /* @__PURE__ */ e(v, { token: r, size: 24, showSymbol: !1 }),
                       /* @__PURE__ */ e("span", { className: "truncate", children: r.name })
                     ] }) }),
-                    /* @__PURE__ */ e(a, { size: "sm", textAlign: "right", children: /* @__PURE__ */ o("div", { children: [
-                      /* @__PURE__ */ e("div", { className: "block text-xs font-normal tabular-nums text-foreground", children: w(l, r.decimals) }),
-                      m !== void 0 ? /* @__PURE__ */ e("div", { className: "block text-[11px] font-normal leading-[13px] tabular-nums text-secondary-foreground", children: m }) : null
+                    /* @__PURE__ */ e(t, { size: "sm", textAlign: "right", children: /* @__PURE__ */ l("div", { children: [
+                      /* @__PURE__ */ e("div", { className: "block text-xs font-normal tabular-nums text-foreground", children: N(a, r.decimals) }),
+                      i !== void 0 ? /* @__PURE__ */ e("div", { className: "block text-[11px] font-normal leading-[13px] tabular-nums text-secondary-foreground", children: i }) : null
                     ] }) })
                   ]
                 },
@@ -75,5 +65,5 @@ function J({
   );
 }
 export {
-  J as TokenSelectPanel
+  P as TokenSelectPanel
 };

package/dist/esm/components/base/apy-breakdown-body/apy-breakdown-body.js

@@ -1,6 +1,6 @@
 import { jsxs as a, jsx as s } from "react/jsx-runtime";
-import { bpsToPercent as c } from "../../../utils/bps.js";
 import { cn as i } from "../../../utils/cn.js";
+import { bpsToPercent as c } from "../../../utils/internal/bps-to-percent.js";
 const x = "—", p = "400px";
 function g(n, t, e) {
   return n === "7d" ? e : t;

package/dist/esm/components/base/borrow-rate-block/borrow-rate-block.js

@@ -6,10 +6,9 @@ import { Typography as d } from "../../typography/typography.js";
 import { VSpace as f } from "../../vspace/vspace.js";
 import { InfoList as b, InfoLine as i } from "../info-list/info-list.js";
 import "../../help-tip/help-tip.js";
-import "@gearbox-protocol/sdk/onchain";
 import "clsx";
 import "tailwind-merge";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../../utils/z-index.js";
 import { ApyValue as a } from "../values/scalars.js";
 import "../../badge/badge.js";
@@ -21,7 +20,7 @@ function p(t) {
 function u(t) {
   return typeof t == "number" ? t : t?.base;
 }
-function L({
+function j({
   data: t,
   dataTo: r
 }) {
@@ -82,6 +81,6 @@ function L({
   ) }) });
 }
 export {
-  L as BorrowRateBlock,
+  j as BorrowRateBlock,
   n as BorrowRateBlockTest
 };

package/dist/esm/components/base/detailed-page-title/copy-button.js

@@ -1,70 +1,61 @@
-import { jsx as e, jsxs as f } from "react/jsx-runtime";
-import { faCheck as d } from "@fortawesome/free-solid-svg-icons";
-import { IconCopy as y } from "@gearbox-protocol/static";
-import * as r from "react";
-import { IconButton as x } from "../../icon-button/icon-button.js";
-import { FaIcon as C } from "../../icons/fa-icon.js";
-import { SimpleTooltip as T } from "../../tooltip/simple-tooltip.js";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { faCheck as p } from "@fortawesome/free-solid-svg-icons";
+import { IconCopy as m } from "@gearbox-protocol/static";
+import * as f from "react";
+import { IconButton as d } from "../../icon-button/icon-button.js";
+import { FaIcon as u } from "../../icons/fa-icon.js";
+import { SimpleTooltip as y } from "../../tooltip/simple-tooltip.js";
 import "../../tooltip/tooltip.js";
-import { FormattedMessageTyped as g } from "../../typed-intl/index.js";
-import { useIsMobile as h } from "../../../hooks/use-media-query.js";
+import { FormattedMessageTyped as C } from "../../typed-intl/index.js";
+import { useCopyToClipboard as x } from "../../../hooks/use-copy-to-clipboard.js";
+import { useIsMobile as g } from "../../../hooks/use-media-query.js";
+import { cn as i } from "../../../utils/cn.js";
 import "@gearbox-protocol/sdk/onchain";
-import { cn as s } from "../../../utils/cn.js";
-import "luxon";
 import "../../../utils/z-index.js";
-const I = r.forwardRef(function({ toCopy: t, className: n }, c) {
-  const l = h(), [o, a] = r.useState(!1), i = r.useRef(null), p = l ? 32 : 40, m = async () => {
-    if (t)
-      try {
-        await navigator.clipboard.writeText(t), i.current && clearTimeout(i.current), a(!0), i.current = setTimeout(() => {
-          a(!1);
-        }, 1500);
-      } catch (u) {
-        console.error("Failed to copy:", u);
-      }
-  };
+const T = f.forwardRef(function({ toCopy: t, className: r }, s) {
+  const n = g(), { isCopied: o, copy: a } = x(), c = n ? 32 : 40;
   return t ? /* @__PURE__ */ e(
-    T,
+    y,
     {
-      title: /* @__PURE__ */ f(
-        x,
+      title: /* @__PURE__ */ l(
+        d,
         {
-          ref: c,
+          ref: s,
           buttonType: "outlined",
-          size: p,
-          onClick: m,
+          size: c,
+          onClick: () => t && a(t),
           title: o ? "Copied!" : void 0,
-          className: s("relative", n),
+          className: i("relative", r),
           children: [
             /* @__PURE__ */ e(
               "span",
               {
-                className: s(
+                className: i(
                   "absolute inset-0 flex items-center justify-center transition-all duration-200",
                   o ? "opacity-100 scale-100 text-success" : "opacity-0 scale-50 text-foreground"
                 ),
-                children: /* @__PURE__ */ e(C, { icon: d, className: "size-4" })
+                children: /* @__PURE__ */ e(u, { icon: p, className: "size-4" })
               }
             ),
             /* @__PURE__ */ e(
               "span",
               {
-                className: s(
+                className: i(
                   "flex items-center justify-center transition-all duration-200 text-foreground",
                   o ? "opacity-0 scale-50" : "opacity-100 scale-100"
                 ),
-                children: /* @__PURE__ */ e(y, { size: 15 })
+                children: /* @__PURE__ */ e(m, { size: 15 })
               }
             )
           ]
         }
       ),
       placement: "top",
-      children: /* @__PURE__ */ e(g, { messageId: "components.openCopyButtons.copy" })
+      children: /* @__PURE__ */ e(C, { messageId: "components.openCopyButtons.copy" })
     }
   ) : null;
 });
-I.displayName = "DetailedPageTitleCopyButton";
+T.displayName = "DetailedPageTitleCopyButton";
 export {
-  I as DetailedPageTitleCopyButton
+  T as DetailedPageTitleCopyButton
 };

package/dist/esm/components/base/detailed-page-title/detailed-page-title.js

@@ -3,13 +3,12 @@ import { PageTitle as N } from "../page-title/page-title.js";
 import { Stack as r } from "../stack/stack.js";
 import { DetailedPageTitleExplorerDropdown as j } from "../../detailed-page-title/detailed-page-title-explorer-dropdown.js";
 import { TokenSymbol as x } from "../../token-symbol/token-symbol.js";
-import "@gearbox-protocol/sdk/onchain";
 import { cn as m } from "../../../utils/cn.js";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../../utils/z-index.js";
 import { DetailedPageTitleTest as s } from "./constants.js";
 import { DetailedPageTitleCopyButton as y } from "./copy-button.js";
-function G({
+function F({
   title: c,
   browserTitle: d,
   token: n,
@@ -87,6 +86,6 @@ function G({
   );
 }
 export {
-  G as DetailedPageTitle,
+  F as DetailedPageTitle,
   s as DetailedPageTitleTest
 };

package/dist/esm/components/base/details-view/detail-aside/detail-aside-scope.js

@@ -1,5 +1,5 @@
 import { jsx as u } from "react/jsx-runtime";
-import { createContext as l, useRef as A, useCallback as s, useMemo as f, useContext as a } from "react";
+import { createContext as l, useContext as a, useCallback as s, useRef as A, useMemo as f } from "react";
 import { defaultQuerySelectorAnchor as d } from "./sticky-controller.js";
 const i = l(null);
 function g({

package/dist/esm/components/base/details-view/detail-aside/detail-aside-screen-layout.js

@@ -1,15 +1,14 @@
 import { jsx as i } from "react/jsx-runtime";
-import { MainAsideLayout as n } from "../../../layout/main-aside-layout/main-aside-layout.js";
+import { MainAsideLayout as p } from "../../../layout/main-aside-layout/main-aside-layout.js";
+import { cn as r } from "../../../../utils/cn.js";
 import "@gearbox-protocol/sdk/onchain";
-import { cn as e } from "../../../../utils/cn.js";
-import "luxon";
 import "../../../../utils/z-index.js";
 import { DETAIL_MAIN_ASIDE_CLASS_NAME as d, DETAIL_MAIN_ASIDE_LAYOUT_CLASS_NAME as c } from "./constants.js";
 import { DetailAsideScope as _ } from "./detail-aside-scope.js";
 import { DetailAsideWrapper as f } from "./detail-aside-wrapper.js";
-function C({
+function y({
   children: o,
-  aside: r,
+  aside: e,
   mainRef: t,
   asidePosition: a,
   centeredMain: m,
@@ -17,15 +16,15 @@ function C({
   asideClassName: s,
   mainClassName: l
 }) {
-  const p = r != null ? /* @__PURE__ */ i(f, { children: r }) : null;
+  const n = e != null ? /* @__PURE__ */ i(f, { children: e }) : null;
   return /* @__PURE__ */ i(_, { children: /* @__PURE__ */ i(
-    n,
+    p,
     {
-      className: e(c, A),
-      asideClassName: e(d, s),
+      className: r(c, A),
+      asideClassName: r(d, s),
       mainClassName: l,
       mainRef: t,
-      aside: p,
+      aside: n,
       asidePosition: a,
       centeredMain: m,
       variant: "detail",
@@ -35,5 +34,5 @@ function C({
   ) });
 }
 export {
-  C as DetailAsideScreenLayout
+  y as DetailAsideScreenLayout
 };

package/dist/esm/components/base/details-view/details-view.js

@@ -1,7 +1,7 @@
 import { jsx as r, jsxs as p } from "react/jsx-runtime";
 import { Children as u, cloneElement as g, isValidElement as c } from "react";
 import { Stack as l } from "../stack/stack.js";
-import { isTabber as A } from "../tabber/tabber.js";
+import { isTabber as A } from "../tabber/is-tabber.js";
 import { Container as P } from "../../layout/container/container.js";
 import { useIsMedium as x } from "../../../hooks/use-media-query.js";
 import { DetailsViewTest as o } from "./constants.js";

package/dist/esm/components/base/details-view/index.js

@@ -1,14 +1,10 @@
-import { AsideAlignAnchor as t, DetailAsideScope as a, useDetailAsideAnchorGetter as o } from "./detail-aside/detail-aside-scope.js";
-import { DetailAsideScreenLayout as s } from "./detail-aside/detail-aside-screen-layout.js";
-import { DetailsView as n, DetailsViewLeftPane as A, DetailsViewManagePane as D } from "./details-view.js";
-import { DetailsViewTest as p } from "./constants.js";
+import { AsideAlignAnchor as t } from "./detail-aside/detail-aside-scope.js";
+import { DetailsView as o, DetailsViewLeftPane as r, DetailsViewManagePane as s } from "./details-view.js";
+import { DetailsViewTest as n } from "./constants.js";
 export {
   t as AsideAlignAnchor,
-  a as DetailAsideScope,
-  s as DetailAsideScreenLayout,
-  n as DetailsView,
-  A as DetailsViewLeftPane,
-  D as DetailsViewManagePane,
-  p as DetailsViewTest,
-  o as useDetailAsideAnchorGetter
+  o as DetailsView,
+  r as DetailsViewLeftPane,
+  s as DetailsViewManagePane,
+  n as DetailsViewTest
 };

package/dist/esm/components/base/history-chart/history-chart.js

@@ -2,10 +2,6 @@ import { jsx as y } from "react/jsx-runtime";
 import { CHART_RANGES as b } from "@gearbox-protocol/sdk/model";
 import { useMemo as S } from "react";
 import { useTitleText as w } from "../text/use-title-text.js";
-import "@gearbox-protocol/static";
-import "../../checkbox/checkbox.js";
-import "../../checkbox/checkbox-labeled.js";
-import "../../select/select.js";
 import { TradingView as D } from "../../trading-view/trading-view.js";
 import { useIntlTyped as H } from "../../typed-intl/index.js";
 import { HistoryChartTest as M } from "./constants.js";
@@ -16,13 +12,13 @@ const N = b, O = {
   "1y": "1Y",
   max: "MAX"
 };
-function F({
+function X({
   data: t,
   range: r,
-  onRange: s,
+  onRange: a,
   isLoading: g = !1,
   error: v,
-  yMeasureUnit: a = "none",
+  yMeasureUnit: m = "none",
   height: x,
   seriesTitles: c,
   priceLines: f,
@@ -34,39 +30,39 @@ function F({
   dualYAxis: E
 }) {
   const h = H(), G = w(), o = S(
-    () => Array.isArray(a) ? a : void 0,
-    [a]
-  ), d = o != null && new Set(o).size > 1, l = E ?? d, p = o?.[0], L = S(() => {
-    const n = (i, e) => {
-      if (!l) return i;
-      if (d && o != null && p != null) {
-        const m = o[e] ?? p;
+    () => Array.isArray(m) ? m : void 0,
+    [m]
+  ), p = o != null && new Set(o).size > 1, l = E ?? p, d = o?.[0], L = S(() => {
+    const n = (e, i) => {
+      if (!l) return e;
+      if (p && o != null && d != null) {
+        const s = o[i] ?? d;
         return {
-          ...i,
-          priceScaleId: m === p ? "left" : "right"
+          ...e,
+          priceScaleId: s === d ? "left" : "right"
         };
       }
       return {
-        ...i,
-        priceScaleId: e === 0 ? "left" : "right"
+        ...e,
+        priceScaleId: i === 0 ? "left" : "right"
       };
     };
     if (t)
       return (Array.isArray(t) ? t : [t]).map(
-        (e, m) => n(T(c)(e), m)
+        (i, s) => n(T(c)(i), s)
       );
     if (c)
       return Object.entries(c).map(
-        ([i, e], m) => n(
+        ([e, i], s) => n(
           {
-            id: i,
-            title: e,
+            id: e,
+            title: i,
             data: []
           },
-          m
+          s
         )
       );
-  }, [t, c, d, l, p, o]);
+  }, [t, c, p, l, d, o]);
   return /* @__PURE__ */ y("div", { "data-testid": M.root, children: /* @__PURE__ */ y(
     D,
     {
@@ -78,14 +74,14 @@ function F({
       }),
       dualYAxis: l,
       useSharedPriceScale: !l,
-      yMeasureUnit: a,
+      yMeasureUnit: m,
       height: x,
       rangeList: N.map((n) => ({
         value: n,
         label: O[n]
       })),
       range: r,
-      setRange: s,
+      setRange: a,
       priceLineOptions: f ? [...f] : void 0,
       zoneOptions: u ? [...u] : void 0,
       showCurrentValue: C,
@@ -100,13 +96,13 @@ function T(t) {
   return (r) => ({
     id: r.metric,
     title: t?.[r.metric] ?? r.metric,
-    data: r.points.map((s) => ({
-      time: s.timestamp,
-      value: s.value
+    data: r.points.map((a) => ({
+      time: a.timestamp,
+      value: a.value
     }))
   });
 }
 export {
-  F as HistoryChart,
+  X as HistoryChart,
   M as HistoryChartTest
 };