@gearbox-protocol/ui-kit 4.0.0-next.9 → 4.0.0

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 w, 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), k = 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: w(
+            t,
+            "components.yieldBreakdown.titleNetAtLeverage",
+            "components.yieldBreakdown.titleNetAtLeverage7d"
+          ),
+          values: { leverage: P(r) }
+        }
+      ),
+      chip: c(m, !0),
+      chipPositive: m > 0,
+      children: [
+        n?.organicApy != null ? /* @__PURE__ */ e(
+          u,
+          {
+            muted: n.organicApy < 0,
+            label: /* @__PURE__ */ e(
+              a,
+              {
+                messageId: w(
+                  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}`
+          )
+        ),
+        k != null ? /* @__PURE__ */ e(
+          u,
+          {
+            muted: !0,
+            label: /* @__PURE__ */ e(
+              a,
+              {
+                messageId: w(
+                  t,
+                  "components.yieldBreakdown.borrowRate",
+                  "components.yieldBreakdown.borrowRate7d"
+                )
+              }
+            ),
+            value: c(k)
+          }
+        ) : 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/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/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
+};

package/dist/esm/hooks/index.js

@@ -1,36 +1,15 @@
-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 { useDebounceCall as r } from "./use-debounce-call.js";
+import { getSortForFields as t, nextMultiSortState as u, useSort as i } from "./use-filter.js";
+import { useIsDesktop as m, useIsMedium as p, useIsMobile as x, useMediaQuery as f } from "./use-media-query.js";
+import { usePrevious as S } 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
+  t as getSortForFields,
+  u as nextMultiSortState,
+  r as useDebounceCall,
+  m as useIsDesktop,
+  p as useIsMedium,
+  x as useIsMobile,
+  f as useMediaQuery,
+  S as usePrevious,
+  i as useSort
 };

package/dist/esm/hooks/use-copy-to-clipboard.js

@@ -0,0 +1,29 @@
+import { useState as a, useRef as n, useEffect as s, useCallback as l } from "react";
+function p(r = 1500) {
+  const [o, t] = a(!1), e = n(null);
+  s(
+    () => () => {
+      e.current && clearTimeout(e.current);
+    },
+    []
+  );
+  const c = l(
+    async (u) => {
+      try {
+        await navigator.clipboard.writeText(u);
+      } catch (i) {
+        console.error("Failed to copy:", i);
+        return;
+      }
+      e.current && clearTimeout(e.current), t(!0), e.current = setTimeout(
+        () => t(!1),
+        r
+      );
+    },
+    [r]
+  );
+  return { isCopied: o, copy: c };
+}
+export {
+  p as useCopyToClipboard
+};

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

@@ -1,11 +1,25 @@
-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);
+import { useMemo as s, useEffect as r } from "react";
+const l = (e, o) => {
+  let n = null;
+  const t = () => {
+    n && (clearTimeout(n), n = null);
+  }, c = (u) => () => {
+    e(u), t();
+  };
+  return [(u) => {
+    t(), n = window.setTimeout(c(u), o);
+  }, t];
+};
+function a(e, o = 1e3) {
+  const [n, t] = s(() => l(e, o), [e, o]);
+  return r(() => function() {
+    t();
+  }, [t]), n;
+}
+const i = (e) => e();
+function b(e) {
+  return a(i, e);
 }
 export {
-  m as useDebounceCall
+  b as useDebounceCall
 };

package/dist/esm/hooks/use-filter.js

@@ -1,74 +1,34 @@
-import { useState as i, useCallback as c, useMemo as a } from "react";
-function F() {
-  const [e, t] = i(null), r = c(() => t(null), []);
-  return [e, t, r];
-}
-function y(e = null) {
-  const [t, r] = i(e), n = c(() => r(null), []);
-  return [t, r, n];
-}
-const S = (e) => e === "asc" ? "desc" : "asc", M = (e, t) => {
-  if (e === t?.field)
-    return t.sort;
-};
-function R(e = null) {
-  const [t, r] = i(
-    e
-  ), n = c(
-    (o, s = "asc") => {
-      o === t?.field ? r({ field: o, sort: S(t.sort) }) : r({ field: o, sort: s });
+import { useState as u, useCallback as d } from "react";
+const c = (r) => r === "asc" ? "desc" : "asc";
+function l(r = null) {
+  const [t, o] = u(
+    r
+  ), s = d(
+    (n, i = "asc") => {
+      n === t?.field ? o({ field: n, sort: c(t.sort) }) : o({ field: n, sort: i });
     },
     [t]
   );
-  return [t, n];
+  return [t, s];
 }
-const b = (e, t) => {
-  const r = t?.findIndex((n) => n.field === e) ?? -1;
-  return !t || r === -1 ? { sort: void 0, priority: void 0 } : { sort: t[r].sort, priority: r + 1 };
+const x = (r, t) => {
+  const o = t?.findIndex((s) => s.field === r) ?? -1;
+  return !t || o === -1 ? { sort: void 0, priority: void 0 } : { sort: t[o].sort, priority: o + 1 };
 };
-function g(e, t, r = "asc", n = 2) {
-  const o = e.findIndex((u) => u.field === t);
-  if (o !== -1) {
-    if (e[o].sort === r) {
-      const u = [...e];
-      return u[o] = { field: t, sort: S(e[o].sort) }, u;
+function S(r, t, o = "asc", s = 2) {
+  const n = r.findIndex((e) => e.field === t);
+  if (n !== -1) {
+    if (r[n].sort === o) {
+      const e = [...r];
+      return e[n] = { field: t, sort: c(r[n].sort) }, e;
     }
-    return e.filter((u) => u.field !== t);
+    return r.filter((e) => e.field !== t);
   }
-  const s = [{ field: t, sort: r }, ...e];
-  return s.length > n ? s.slice(0, n) : s;
-}
-function p(e = null, { maxFields: t = 2 } = {}) {
-  const [r, n] = i(
-    e ?? []
-  ), o = c(
-    (l, d = "asc") => {
-      n(
-        (f) => g(f, l, d, t)
-      );
-    },
-    [t]
-  ), s = c((l) => {
-    n((d) => d.filter((f) => f.field !== l));
-  }, []), u = c(() => n([]), []);
-  return [r, o, { removeSortField: s, resetSort: u }];
-}
-function C(e) {
-  return a(() => Object.values(e).reduce(
-    ([r, n], o) => {
-      const s = !!o.state;
-      return [r || s, n && s];
-    },
-    [!1, !0]
-  ), [e]);
+  const i = [{ field: t, sort: o }, ...r];
+  return i.length > s ? i.slice(0, s) : i;
 }
 export {
-  M as getSortForField,
-  b as getSortForFields,
-  g as nextMultiSortState,
-  C as useFilterAllSelected,
-  p as useMultiSort,
-  F as useRangeFilter,
-  y as useSelectFilter,
-  R as useSort
+  x as getSortForFields,
+  S as nextMultiSortState,
+  l as useSort
 };

package/dist/esm/hooks/use-media-query.js

@@ -1,52 +1,38 @@
-import { useState as l, useEffect as u } from "react";
-import { useBreakpointContext as o, BREAKPOINT_QUERIES as c } from "../components/breakpoint-provider.js";
-function n(t, e = !0) {
-  const [i, a] = l(!1);
-  return u(() => {
-    if (!e)
+import { useState as u, useEffect as m } from "react";
+import { useBreakpointContext as n, BREAKPOINT_QUERIES as c } from "./breakpoint-state.js";
+function i(e, t = !0) {
+  const [o, r] = u(!1);
+  return m(() => {
+    if (!t)
       return;
-    const s = window.matchMedia(t);
-    s.matches !== i && a(s.matches);
-    const r = () => a(s.matches);
-    return s.addEventListener("change", r), () => s.removeEventListener("change", r);
-  }, [i, t, e]), i;
+    const s = window.matchMedia(e);
+    s.matches !== o && r(s.matches);
+    const a = () => r(s.matches);
+    return s.addEventListener("change", a), () => s.removeEventListener("change", a);
+  }, [o, e, t]), o;
 }
-const f = () => {
-  const t = o(), e = n(
-    c.isExtraSmall,
-    t === void 0
-  );
-  return t?.isExtraSmall ?? e;
-}, b = () => {
-  const t = o(), e = n(
+const l = () => {
+  const e = n(), t = i(
     c.isMobile,
-    t === void 0
-  );
-  return t?.isMobile ?? e;
-}, x = () => {
-  const t = o(), e = n(
-    c.isTablet,
-    t === void 0
+    e === void 0
   );
-  return t?.isTablet ?? e;
-}, k = () => {
-  const t = o(), e = n(
+  return e?.isMobile ?? t;
+}, M = () => {
+  const e = n(), t = i(
     c.isMedium,
-    t === void 0
+    e === void 0
   );
-  return t?.isMedium ?? e;
-}, E = () => {
-  const t = o(), e = n(
+  return e?.isMedium ?? t;
+}, h = () => {
+  const e = n(), t = i(
     c.isDesktop,
-    t === void 0
+    e === void 0
   );
-  return t?.isDesktop ?? e;
+  return e?.isDesktop ?? t;
 };
 export {
-  E as useIsDesktop,
-  f as useIsExtraSmall,
-  k as useIsMedium,
-  b as useIsMobile,
-  x as useIsTablet,
-  n as useMediaQuery
+  h as useIsDesktop,
+  M as useIsMedium,
+  l as useIsMobile,
+  i as useMediaQuery
 };