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

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

@@ -1,12 +1,10 @@
 import { jsx as t, jsxs as l } from "react/jsx-runtime";
-import { IconCopy as v } from "@gearbox-protocol/static";
-import { useState as w, useRef as k } from "react";
-import { faCheck as N } from "@fortawesome/free-solid-svg-icons";
+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 "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as i } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 import "../accordion/accordion.js";
@@ -17,8 +15,6 @@ 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/filter-button/filter-button.js";
-import "../buttons/navigation-button/navigation-button.js";
 import "../buttons/tab-button/tab-button.js";
 import "../token-icon/token-icon.js";
 import { SimpleTooltip as T } from "../tooltip/simple-tooltip.js";
@@ -35,7 +31,9 @@ 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 "../points-icon/points-icon.js";
+import "viem";
 import "../vertical-indicator/vertical-indicator.js";
 import "../base/page-title/page-title.js";
 import "../detailed-page-title/detailed-page-title-copy-button.js";
@@ -45,9 +43,11 @@ 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";
@@ -71,7 +71,6 @@ import "../dialog/dialog-header.js";
 import "../dialog/dialog-title.js";
 import "../dialog/dialog-modal-container.js";
 import "../dialog/dialog-overlay.js";
-import "viem";
 import "../input/input.js";
 import "../label/label.js";
 import "../simple-dropdown/simple-dropdown.js";
@@ -79,42 +78,19 @@ import "../simple-dropdown/simple-dropdown-menu-item.js";
 import "../base/tabber/tabber.js";
 import "../link/link.js";
 import "../rounded-image/rounded-image.js";
-import "../network-icon/network-indicator.js";
 import "../base-link/base-link.js";
-import "../help-tip/help-tip.js";
 import "../base-table/base-table-line.js";
 import "../navigation-context/navigation-context.js";
 import "../cards/card/card.js";
-import "../checkbox-item/checkbox-item.js";
 import "../client-adapters/styled-button/styled-button.js";
-import "../client-adapters/styled-rounded-image/styled-rounded-image.js";
 import "../composites/tx-preview/confirm/amounts/TransactionConfirmAmountField.js";
 import "../composites/tx-preview/confirm/dialog/constants.js";
+import "../spinner/spinner.js";
 import "../spinner-loader/spinner-loader.js";
-import "../detailed-apy/detailed-apy.js";
 import "../dropdown-menu/dropdown-menu.js";
-import "../dropdown-menu/dropdown-menu-checkbox-item.js";
 import "../dropdown-menu/dropdown-menu-content.js";
 import "../dropdown-menu/dropdown-menu-item.js";
 import "../dropdown-menu/dropdown-menu-label.js";
-import "../dropdown-menu/dropdown-menu-radio-item.js";
-import "../dropdown-menu/dropdown-menu-separator.js";
-import "../dropdown-menu/dropdown-menu-shortcut.js";
-import "../dropdown-menu/dropdown-menu-sub-content.js";
-import "../dropdown-menu/dropdown-menu-sub-trigger.js";
-import "../filter/filter-block.js";
-import "../filter/filter-checkbox-item.js";
-import "../filter/filter-chip.js";
-import "../filter/filter-chips.js";
-import "../filter/filter-dropdown-item.js";
-import "../filter/filter-group.js";
-import "../filter/filter-label.js";
-import "../search-line/search-line.js";
-import "../tabs/tabs.js";
-import "../filter/filter-modal-item.js";
-import "../filter/filter-radio-item.js";
-import "../filter/filter-separator.js";
-import "../filter/variants.js";
 import "../icon-button/icon-button.js";
 import "../layout/app-footer/app-footer.js";
 import "../layout/app-header/app-header.js";
@@ -126,14 +102,16 @@ import "../legal-agreement/legal-agreement-theme.js";
 import "../loader/loader.js";
 import "../loading/loading.js";
 import "../loading-bar/loading-bar.js";
+import "../radio-group/radio-group.js";
+import "../status-dot/status-dot.js";
+import "../search-line/search-line.js";
 import "../segmented-control/segmented-control.js";
 import "../separate-line/separate-line.js";
-import "../spinner/spinner.js";
 import "../split-list/split-list.js";
-import "../status-dot/status-dot.js";
+import "../tabs/tabs.js";
 import "../textarea/textarea.js";
 import "../theme-provider.js";
-function tr({
+function Bo({
   toCopy: u,
   children: d,
   onCopySuccess: f,
@@ -145,7 +123,7 @@ function tr({
   trigger: r = "button",
   tooltip: a
 }) {
-  const [p, s] = w(!1), m = k(null), e = async () => {
+  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);
@@ -188,7 +166,7 @@ function tr({
                     children: /* @__PURE__ */ t(
                       j,
                       {
-                        icon: N,
+                        icon: v,
                         style: { fontSize: o },
                         className: "block"
                       }
@@ -202,7 +180,7 @@ function tr({
                       "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"
                     ),
-                    children: y ?? /* @__PURE__ */ t(v, { size: o })
+                    children: y ?? /* @__PURE__ */ t(w, { size: o })
                   }
                 )
               ]
@@ -215,5 +193,5 @@ function tr({
   return a ? /* @__PURE__ */ t(T, { placement: "top", triangle: !0, title: c(), children: a }) : c();
 }
 export {
-  tr as WithCopy
+  Bo as WithCopy
 };

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

@@ -1,13 +1,10 @@
-import { jsxs as p, jsx as i } from "react/jsx-runtime";
-import { cva as x } from "class-variance-authority";
-import "react";
-import "@gearbox-protocol/sdk";
-import { cn as e } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
+import { jsxs as x, jsx as e } from "react/jsx-runtime";
+import { cva as a } from "class-variance-authority";
+import "@gearbox-protocol/sdk/onchain";
+import { cn as i } from "../../utils/cn.js";
 import "luxon";
 import "../../utils/z-index.js";
-const a = x("", {
+const l = a("", {
   variants: {
     size: {
       sm: "text-[14px] mb-[14px]",
@@ -20,27 +17,27 @@ const a = x("", {
     size: "default"
   }
 });
-function g({
+function u({
   title: m,
   children: t,
   size: o = "default",
   className: r
 }) {
-  return /* @__PURE__ */ p("div", { className: e("flex flex-col"), children: [
-    /* @__PURE__ */ i(
+  return /* @__PURE__ */ x("div", { className: i("flex flex-col"), children: [
+    /* @__PURE__ */ e(
       "div",
       {
-        className: e(
+        className: i(
           "text-foreground font-medium",
-          a({ size: o }),
+          l({ size: o }),
           r
         ),
         children: m
       }
     ),
-    t !== void 0 && /* @__PURE__ */ i("div", { children: t })
+    t !== void 0 && /* @__PURE__ */ e("div", { children: t })
   ] });
 }
 export {
-  g as WithTitle
+  u as WithTitle
 };

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

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

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

@@ -1,165 +1,184 @@
-import { jsxs as a, jsx as e, Fragment as k } from "react/jsx-runtime";
-import { PointsIcon as N } from "../points-icon/points-icon.js";
+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 A } from "../tooltip/simple-tooltip.js";
+import { SimpleTooltip as T } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
-import { FormattedMessageTyped as s } from "../typed-intl/index.js";
-import "react";
-import { tokenRewardsOf as I, pointProgramsOf as B, totalApyOf as T } from "../../utils/apy-breakdown.js";
-import "@gearbox-protocol/sdk";
-import { bpsToPercent as $ } from "../../utils/bps.js";
-import { cn as p } from "../../utils/cn.js";
-import "sonner";
-import { formatLeverage as j } from "../../utils/format-leverage.js";
-import { formatCompactPercent as R } from "../../utils/format-money.js";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
-import "../../utils/z-index.js";
-function i(n) {
-  const o = $(n), r = R(Math.abs(o));
-  return o < 0 ? `-${r}` : r;
+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({
+  title: t,
+  children: l,
+  placement: s = "left",
+  open: a,
+  className: i,
+  triggerClassName: n
+}) {
+  return /* @__PURE__ */ e(
+    T,
+    {
+      placement: s,
+      triangle: !1,
+      type: "modal-tooltip",
+      minWidth: B,
+      maxWidth: B,
+      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 U({
-  supplyApy: n,
-  maxLeverage: o,
-  collateralApy: r,
-  borrowApy: c,
-  additionalBorrowApy: u,
-  children: h,
-  className: f
+function W({
+  supplyApy: t,
+  maxLeverage: l,
+  collateralApy: s,
+  borrowApy: a,
+  quotaRate: i,
+  period: n
 }) {
-  const g = o !== void 0 && o > 0, l = r ?? n, w = I(l), y = B(n), b = T(n), d = c != null || u != null ? -((c ?? 0) + (u ?? 0)) : void 0, x = y.filter((t) => t.multiplier != null), v = /* @__PURE__ */ a(
-    "div",
+  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,
     {
-      className: p(
-        "flex w-[400px] max-w-[calc(100vw-32px)] flex-col gap-4 p-4",
-        "rounded-xl",
-        "bg-card text-card-foreground",
-        "border border-border",
-        "shadow-[0_4px_14px_rgba(0,0,0,0.15)]",
-        "text-left font-normal"
+      title: /* @__PURE__ */ e(
+        d,
+        {
+          messageId: w(
+            n,
+            "components.yieldBreakdown.titleNetAtLeverage",
+            "components.yieldBreakdown.titleNetAtLeverage7d"
+          ),
+          values: { leverage: N(l) }
+        }
       ),
+      chip: u(p),
+      chipPositive: p > 0,
       children: [
-        /* @__PURE__ */ a("div", { className: "flex h-6 items-center justify-between gap-3", children: [
-          /* @__PURE__ */ e("span", { className: "text-base font-semibold leading-4 text-foreground", children: g ? /* @__PURE__ */ e(
-            s,
-            {
-              messageId: "components.yieldBreakdown.titleNetAtLeverage",
-              values: {
-                leverage: j(o)
+        r?.organicApy != null ? /* @__PURE__ */ e(
+          y,
+          {
+            muted: r.organicApy < 0,
+            label: /* @__PURE__ */ e(
+              d,
+              {
+                messageId: w(
+                  n,
+                  "components.yieldBreakdown.collateralApy",
+                  "components.yieldBreakdown.collateralApy7d"
+                )
               }
-            }
-          ) : /* @__PURE__ */ e(s, { messageId: "components.apyParts.totalAPY" }) }),
-          /* @__PURE__ */ e(
-            "span",
+            ),
+            value: u(r.organicApy)
+          }
+        ) : null,
+        m.map(
+          (o) => o.supplyApr == null ? null : /* @__PURE__ */ e(
+            y,
             {
-              className: p(
-                "rounded-md px-2 py-0.5 text-sm font-semibold tabular-nums",
-                b > 0 ? "bg-success/20 text-success" : "bg-muted text-muted-foreground"
-              ),
-              children: i(b)
-            }
+              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}`
           )
-        ] }),
-        l.organicApy != null && /* @__PURE__ */ e(
-          m,
-          {
-            muted: l.organicApy < 0,
-            label: /* @__PURE__ */ e(s, { messageId: "components.yieldBreakdown.collateralApy" }),
-            value: i(l.organicApy)
-          }
         ),
-        w.map((t) => t.supplyApr == null ? null : /* @__PURE__ */ e(
-          m,
-          {
-            muted: t.supplyApr < 0,
-            label: /* @__PURE__ */ a("span", { className: "inline-flex items-center gap-1.5", children: [
-              /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
-                s,
-                {
-                  messageId: "components.apyParts.extraAPY",
-                  values: { symbol: t.token.symbol }
-                }
-              ) }),
-              /* @__PURE__ */ e(P, { token: t.token, size: 20 })
-            ] }),
-            value: i(t.supplyApr)
-          },
-          `incentive-${t.token.address}-${t.supplyApr}`
-        )),
-        g && d != null && /* @__PURE__ */ e(
-          m,
+        f != null ? /* @__PURE__ */ e(
+          y,
           {
-            muted: d < 0,
-            label: /* @__PURE__ */ e(s, { messageId: "components.yieldBreakdown.borrowRate" }),
-            value: i(d)
+            muted: f < 0,
+            label: /* @__PURE__ */ e(
+              d,
+              {
+                messageId: w(
+                  n,
+                  "components.yieldBreakdown.borrowRate",
+                  "components.yieldBreakdown.borrowRate7d"
+                )
+              }
+            ),
+            value: u(f)
           }
-        ),
-        x.length > 0 && /* @__PURE__ */ a(k, { children: [
-          /* @__PURE__ */ e("div", { className: "h-px w-full bg-divider" }),
-          x.map((t) => /* @__PURE__ */ e(
-            m,
+        ) : null,
+        k.length > 0 ? /* @__PURE__ */ c(A, { children: [
+          /* @__PURE__ */ e(h, {}),
+          k.map((o) => /* @__PURE__ */ e(
+            y,
             {
-              label: /* @__PURE__ */ a("span", { className: "inline-flex items-center gap-1.5", children: [
+              label: /* @__PURE__ */ c("span", { className: "inline-flex items-center gap-1.5", children: [
                 /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
-                  s,
+                  d,
                   {
                     messageId: "components.yieldBreakdown.programPoints",
-                    values: { name: t.name }
+                    values: { name: o.name }
                   }
                 ) }),
                 /* @__PURE__ */ e(
-                  N,
+                  I,
                   {
                     reward: {
-                      name: t.name,
-                      type: t.id
+                      name: o.name,
+                      type: o.id
                     },
                     size: 20
                   }
                 )
               ] }),
-              value: `${t.multiplier}×`
+              value: `${o.multiplier}×`
             },
-            `points-${t.id}`
+            `points-${o.id}`
           ))
-        ] })
+        ] }) : null
       ]
     }
   );
-  return /* @__PURE__ */ e(
-    A,
-    {
-      placement: "bottom",
-      triangle: !1,
-      type: "modal-tooltip",
-      minWidth: "100%",
-      maxWidth: "100%",
-      title: /* @__PURE__ */ e("span", { className: f, children: h }),
-      triggerClassName: f,
-      children: v
-    }
-  );
-}
-function m({
-  label: n,
-  value: o,
-  muted: r = !1
-}) {
-  return /* @__PURE__ */ a("div", { className: "flex h-6 items-center justify-between gap-3 text-sm leading-5", children: [
-    /* @__PURE__ */ e("span", { className: "min-w-0 font-normal text-muted-foreground", children: n }),
-    /* @__PURE__ */ e(
-      "span",
-      {
-        className: p(
-          "shrink-0 font-semibold tabular-nums",
-          r ? "text-muted-foreground" : "text-foreground"
-        ),
-        children: o
-      }
-    )
-  ] });
 }
 export {
-  U as YieldBreakdownTooltip
+  S as ApyBreakdownTooltip,
+  H as YieldBreakdownTooltip
 };

package/dist/esm/configs/index.js

@@ -1,14 +1,7 @@
-import { designTokens as a } from "./design-tokens.js";
-import { default as i } from "./tailwind.config.js";
-import { preset as n, preset as o } from "./tailwind-preset.js";
-import { interactiveVariants as d, paddingVariants as f, sizeVariants as m, stateVariants as x } from "./variants.js";
+import { default as r } from "./tailwind.config.js";
+import { preset as i, preset as o } from "./tailwind-preset.js";
 export {
-  a as designTokens,
-  d as interactiveVariants,
-  f as paddingVariants,
-  n as preset,
-  m as sizeVariants,
-  x as stateVariants,
-  i as tailwindConfig,
+  i as preset,
+  r as tailwindConfig,
   o as tailwindPreset
 };

package/dist/esm/hooks/index.js

@@ -1,36 +1,20 @@
-import { useCheckboxSelect as r } from "./use-checkbox-select.js";
-import { useControllableState as s } from "./use-controllable-state.js";
-import { useDebounce as l } from "./use-debounce.js";
-import { useDebounceCall as p } from "./use-debounce-call.js";
-import { getSortForField as S, getSortForFields as i, nextMultiSortState as a, useFilterAllSelected as f, useMultiSort as b, useRangeFilter as d, useSelectFilter as F, useSort as n } from "./use-filter.js";
-import { useHF as I } from "./use-hf.js";
-import { useIsDesktop as g, useIsExtraSmall as C, useIsMedium as D, useIsMobile as h, useIsTablet as k, useMediaQuery as v } from "./use-media-query.js";
-import { useObservedWidthKey as O } from "./use-observed-width-key.js";
-import { useOpenedState as E } from "./use-opened-state.js";
-import { usePrevious as K } from "./use-previous.js";
-import { useSmartNumberInput as P } from "./use-smart-number-input.js";
+import { useDebounce as r } from "./use-debounce.js";
+import { useDebounceCall as s } from "./use-debounce-call.js";
+import { getSortForField as i, getSortForFields as m, nextMultiSortState as p, useSort as x } from "./use-filter.js";
+import { useIsDesktop as f, useIsMedium as l, useIsMobile as S, useMediaQuery as b } from "./use-media-query.js";
+import { useObservedWidthKey as M } from "./use-observed-width-key.js";
+import { usePrevious as n } from "./use-previous.js";
 export {
-  S as getSortForField,
-  i as getSortForFields,
-  a as nextMultiSortState,
-  r as useCheckboxSelect,
-  s as useControllableState,
-  l as useDebounce,
-  p as useDebounceCall,
-  f as useFilterAllSelected,
-  I as useHF,
-  g as useIsDesktop,
-  C as useIsExtraSmall,
-  D as useIsMedium,
-  h as useIsMobile,
-  k as useIsTablet,
-  v as useMediaQuery,
-  b as useMultiSort,
-  O as useObservedWidthKey,
-  E as useOpenedState,
-  K as usePrevious,
-  d as useRangeFilter,
-  F as useSelectFilter,
-  P as useSmartNumberInput,
-  n as useSort
+  i as getSortForField,
+  m as getSortForFields,
+  p as nextMultiSortState,
+  r as useDebounce,
+  s as useDebounceCall,
+  f as useIsDesktop,
+  l as useIsMedium,
+  S as useIsMobile,
+  b as useMediaQuery,
+  M as useObservedWidthKey,
+  n as usePrevious,
+  x as useSort
 };

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

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