@gearbox-protocol/ui-kit 2.1.0-next.1

package/dist/esm/hooks/index.js

@@ -0,0 +1,56 @@
+import { useCheckboxSelect as t } from "./use-checkbox-select.js";
+import { useControllableState as i } from "./use-controllable-state.js";
+import { useDebounce as u } from "./use-debounce.js";
+import { useDebounceCall as l } from "./use-debounce-call.js";
+import { getSortForField as p, useFilterAllSelected as L, useRangeFilter as x, useSelectFilter as n, useSort as A } from "./use-filter.js";
+import { useHF as f } from "./use-hf.js";
+import { useEditPriceManually as C, useLiquidationGraphParams as E, useLiquidationHeatmap as d } from "./use-liquidation/index.js";
+import { useIsDesktop as b, useIsExtraSmall as _, useIsMedium as D, useIsMobile as F, useIsTablet as P, useMediaQuery as T } from "./use-media-query.js";
+import { useOpenedState as M } from "./use-opened-state.js";
+import { usePrevious as q } from "./use-previous.js";
+import { useSmartNumberInput as G } from "./use-smart-number-input.js";
+import { CELL_BAD as R, CELL_CURRENT as U, CELL_GOOD as g, CELL_HOVERED as H, CELL_LIQUIDATION as X, CELL_OK as k, DEFAULT_AXIS_MAX as y, DEFAULT_AXIS_MIN as Q, formatAxisLabel as V, formatAxisTipLabel as B, formatAxisTipPrice as K, getCellClass as W, isPointInCell as j, useAxis as w, useFixedAssets as z, useIsAxisInRelativeUnits as J, useLiquidationGraphActivePrice as Y, useLiquidationGraphCurrentActiveValue as Z, usePriceInNumber as $, useWithLiquidationGraphActivePrices as ee } from "./use-liquidation/utils.js";
+export {
+  R as CELL_BAD,
+  U as CELL_CURRENT,
+  g as CELL_GOOD,
+  H as CELL_HOVERED,
+  X as CELL_LIQUIDATION,
+  k as CELL_OK,
+  y as DEFAULT_AXIS_MAX,
+  Q as DEFAULT_AXIS_MIN,
+  V as formatAxisLabel,
+  B as formatAxisTipLabel,
+  K as formatAxisTipPrice,
+  W as getCellClass,
+  p as getSortForField,
+  j as isPointInCell,
+  w as useAxis,
+  t as useCheckboxSelect,
+  i as useControllableState,
+  u as useDebounce,
+  l as useDebounceCall,
+  C as useEditPriceManually,
+  L as useFilterAllSelected,
+  z as useFixedAssets,
+  f as useHF,
+  J as useIsAxisInRelativeUnits,
+  b as useIsDesktop,
+  _ as useIsExtraSmall,
+  D as useIsMedium,
+  F as useIsMobile,
+  P as useIsTablet,
+  Y as useLiquidationGraphActivePrice,
+  Z as useLiquidationGraphCurrentActiveValue,
+  E as useLiquidationGraphParams,
+  d as useLiquidationHeatmap,
+  T as useMediaQuery,
+  M as useOpenedState,
+  q as usePrevious,
+  $ as usePriceInNumber,
+  x as useRangeFilter,
+  n as useSelectFilter,
+  G as useSmartNumberInput,
+  A as useSort,
+  ee as useWithLiquidationGraphActivePrices
+};

package/dist/esm/hooks/use-checkbox-select.js

@@ -0,0 +1,74 @@
+import { useState as I, useMemo as s, useEffect as b, useCallback as p } from "react";
+import { usePrevious as C } from "./use-previous.js";
+const u = (e, n) => e.map((c, r) => ({
+  item: c,
+  index: r,
+  checked: Array.isArray(n) ? n[r] ?? !1 : n
+})), h = (e, n) => e.map(({ item: c, index: r }) => ({
+  item: c,
+  index: r,
+  checked: n
+})), S = (e, n) => {
+  const c = e[n];
+  return c ? [
+    ...e.slice(0, n),
+    { ...c, checked: !c.checked },
+    ...e.slice(n + 1)
+  ] : e;
+};
+function x(e, n = !0, c = !0) {
+  const [r, o] = I(
+    () => u(e, n)
+  ), a = s(() => Array.isArray(n) ? n.join(",") : String(n), [n]), i = C(a);
+  b(() => {
+    if (e.length > 0 && r.length === 0) {
+      o(u(e, n));
+      return;
+    }
+    if (e.length !== r.length) {
+      o(u(e, n));
+      return;
+    }
+    const m = i !== a && !c ? u(e, n) : r.map((A, v) => ({
+      ...A,
+      item: e[v]
+    }));
+    o(m);
+  }, [e, c, a]);
+  const l = s(
+    () => r.length > 0 && r.every(({ checked: t }) => t),
+    [r]
+  ), g = s(
+    () => r.filter(({ checked: t }) => t).map(({ item: t }) => t),
+    [r]
+  ), f = s(
+    () => r.filter(({ checked: t }) => t).length,
+    [r]
+  ), k = p(
+    (t) => {
+      if (t !== void 0) {
+        if (t === l) return;
+        o(h(r, t));
+      } else
+        o(h(r, !l));
+    },
+    [l, r]
+  ), y = p(
+    (t) => {
+      o(S(r, t));
+    },
+    [r]
+  );
+  return {
+    allChecked: l,
+    checkItems: r,
+    handleClickAll: k,
+    handleClickSingle: y,
+    setCheckItems: o,
+    checkedItems: g,
+    checkedCount: f
+  };
+}
+export {
+  x as useCheckboxSelect
+};

package/dist/esm/hooks/use-controllable-state.js

@@ -0,0 +1,18 @@
+import { useState as i, useCallback as f } from "react";
+function p({
+  value: s,
+  defaultValue: c,
+  onChange: l
+}) {
+  const [t, r] = i(c), o = s !== void 0, u = o ? s : t, a = f(
+    (e) => {
+      const n = typeof e == "function" ? e(t) : e;
+      o || r(n), l?.(n);
+    },
+    [o, l, t]
+  );
+  return [u, a];
+}
+export {
+  p as useControllableState
+};

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

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

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

@@ -0,0 +1,21 @@
+import { useMemo as c, useEffect as r } from "react";
+const i = (t, o) => {
+  let e = null;
+  const n = () => {
+    e && (clearTimeout(e), e = null);
+  }, s = (u) => () => {
+    t(u), n();
+  };
+  return [(u) => {
+    n(), e = window.setTimeout(s(u), o);
+  }, n];
+};
+function f(t, o = 1e3) {
+  const [e, n] = c(() => i(t, o), [t, o]);
+  return r(() => function() {
+    n();
+  }, [n]), e;
+}
+export {
+  f as useDebounce
+};

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

@@ -0,0 +1,40 @@
+import { useState as u, useCallback as c, useMemo as l } from "react";
+function f() {
+  const [t, e] = u(null), r = c(() => e(null), []);
+  return [t, e, r];
+}
+function S(t = null) {
+  const [e, r] = u(t), s = c(() => r(null), []);
+  return [e, r, s];
+}
+const i = (t) => t === "asc" ? "desc" : "asc", d = (t, e) => {
+  if (t === e?.field)
+    return e.sort;
+};
+function g(t = null) {
+  const [e, r] = u(
+    t
+  ), s = c(
+    (n, o = "asc") => {
+      n === e?.field ? r({ field: n, sort: i(e.sort) }) : r({ field: n, sort: o });
+    },
+    [e]
+  );
+  return [e, s];
+}
+function F(t) {
+  return l(() => Object.values(t).reduce(
+    ([r, s], n) => {
+      const o = !!n.state;
+      return [r || o, s && o];
+    },
+    [!1, !0]
+  ), [t]);
+}
+export {
+  d as getSortForField,
+  F as useFilterAllSelected,
+  f as useRangeFilter,
+  S as useSelectFilter,
+  g as useSort
+};

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

@@ -0,0 +1,43 @@
+import { calcHealthFactor as p } from "@gearbox-protocol/sdk/common-utils";
+import { useMemo as E } from "react";
+function H({
+  assets: t,
+  quotas: c,
+  prices: f,
+  liquidationThresholds: n,
+  underlyingToken: u,
+  debt: e,
+  quotasInfo: o,
+  allowZeroDebt: m = !1,
+  tokensList: l
+}) {
+  return { hf: E(() => {
+    try {
+      return e === 0n && !m ? 0 : p({
+        assets: t,
+        quotas: c,
+        prices: f,
+        liquidationThresholds: n,
+        underlyingToken: u,
+        debt: e,
+        quotasInfo: o,
+        tokensList: l
+      });
+    } catch (r) {
+      return typeof r == "object" && r !== null && "reason" in r && r.reason === "overflow" ? Number.MAX_SAFE_INTEGER : 0;
+    }
+  }, [
+    t,
+    c,
+    f,
+    n,
+    u,
+    e,
+    o,
+    m,
+    l
+  ]) };
+}
+export {
+  H as useHF
+};

package/dist/esm/hooks/use-liquidation/index.js

@@ -0,0 +1,138 @@
+import { toBN as v, PRICE_DECIMALS_POW as R } from "@gearbox-protocol/sdk";
+import { calcHealthFactor as U } from "@gearbox-protocol/sdk/common-utils";
+import { useMemo as G, useState as F, useCallback as Y } from "react";
+import { useFixedAssets as g, usePriceInNumber as S, useAxis as X, DEFAULT_AXIS_MAX as x } from "./utils.js";
+import { CELL_BAD as Z, CELL_CURRENT as $, CELL_GOOD as b, CELL_HOVERED as j, CELL_LIQUIDATION as M, CELL_OK as tt, DEFAULT_AXIS_MIN as et, formatAxisLabel as rt, formatAxisTipLabel as it, formatAxisTipPrice as st, getCellClass as nt, isPointInCell as ct, useIsAxisInRelativeUnits as ot, useLiquidationGraphActivePrice as at, useLiquidationGraphCurrentActiveValue as ut, useWithLiquidationGraphActivePrices as pt } from "./utils.js";
+const L = 35;
+function K({
+  xMin: t,
+  xMax: e,
+  yMin: r,
+  yMax: c,
+  xLabel: i,
+  yLabel: s,
+  assets: n,
+  quotas: o,
+  prices: u,
+  liquidationThresholds: a,
+  quotasInfo: p,
+  underlyingTokenAddress: m,
+  debt: A,
+  tokensList: l
+}) {
+  return G(() => {
+    const N = e - t, T = c - r, P = N / L, d = T / L, f = Array.from(Array(L)), E = { ...u };
+    return f.flatMap((B, C) => {
+      const _ = t + C * P, I = t + (C + 1) * P;
+      return i && (E[i.address] = v(
+        String((_ + I) / 2),
+        R
+      )), f.map((H, D) => {
+        const O = r + D * d, h = r + (D + 1) * d;
+        return s && (E[s.address] = v(
+          String((O + h) / 2),
+          R
+        )), {
+          x: _,
+          xEnd: I,
+          y: O,
+          yEnd: h,
+          value: U({
+            assets: n,
+            quotas: o,
+            prices: E,
+            liquidationThresholds: a,
+            underlyingToken: m,
+            debt: A,
+            quotasInfo: p,
+            tokensList: l
+          })
+        };
+      });
+    });
+  }, [
+    t,
+    e,
+    r,
+    c,
+    i,
+    s,
+    n,
+    o,
+    u,
+    a,
+    m,
+    A,
+    p,
+    l
+  ]);
+}
+function Q({ prices: t }) {
+  const [e, r] = F({}), c = G(
+    () => ({ ...t, ...e }),
+    [t, e]
+  ), i = Y(
+    (s, n) => {
+      r({ ...e, [n]: s });
+    },
+    [e]
+  );
+  return [c, i];
+}
+function w({
+  assets: t,
+  liquidationThresholds: e,
+  quotas: r,
+  quotasInfo: c,
+  tokensList: i,
+  prices: s
+}) {
+  const [n] = g({
+    assets: t,
+    liquidationThresholds: e,
+    quotas: r,
+    quotasInfo: c
+  }), [o, u] = S({
+    asset: n[0],
+    tokensList: i,
+    prices: s
+  }), [a, p] = S({
+    asset: n[1],
+    tokensList: i,
+    prices: s
+  }), m = X({ currentPrice: o, token: u }), A = X({ currentPrice: a, token: p });
+  return {
+    xAxis: m,
+    yAxis: A,
+    currentPoint: [
+      o || x / 2,
+      a || x / 2
+    ],
+    fixedBalances: n
+  };
+}
+export {
+  Z as CELL_BAD,
+  $ as CELL_CURRENT,
+  b as CELL_GOOD,
+  j as CELL_HOVERED,
+  M as CELL_LIQUIDATION,
+  tt as CELL_OK,
+  x as DEFAULT_AXIS_MAX,
+  et as DEFAULT_AXIS_MIN,
+  rt as formatAxisLabel,
+  it as formatAxisTipLabel,
+  st as formatAxisTipPrice,
+  nt as getCellClass,
+  ct as isPointInCell,
+  X as useAxis,
+  Q as useEditPriceManually,
+  g as useFixedAssets,
+  ot as useIsAxisInRelativeUnits,
+  at as useLiquidationGraphActivePrice,
+  ut as useLiquidationGraphCurrentActiveValue,
+  w as useLiquidationGraphParams,
+  K as useLiquidationHeatmap,
+  S as usePriceInNumber,
+  pt as useWithLiquidationGraphActivePrices
+};

package/dist/esm/hooks/use-liquidation/types.js

@@ -0,0 +1 @@
+

package/dist/esm/hooks/use-liquidation/utils.js

@@ -0,0 +1,144 @@
+import { formatBN as E, toBN as f, PRICE_DECIMALS_POW as c, PERCENTAGE_FACTOR as C } from "@gearbox-protocol/sdk";
+import { useState as p, useCallback as I, useMemo as i } from "react";
+import { bnToInputView as m } from "../../utils/bn-to-input-view.js";
+import { formatPrice as M } from "../../utils/format-number.js";
+const b = "rct-chart__heatmap-cell--hovered", D = "rct-chart__heatmap-cell--current", N = "rct-chart__heatmap-cell--good", S = "rct-chart__heatmap-cell--ok", O = "rct-chart__heatmap-cell--bad", g = "rct-chart__heatmap-cell--liquidation", k = 0, W = 1;
+function $({
+  token: t,
+  currentPrice: r
+}) {
+  const [n, o] = p("straight"), e = I(() => {
+    o(n === "straight" ? "reverse" : "straight");
+  }, [n]), s = i(() => r !== void 0 ? {
+    min: 0,
+    max: r * 1.5,
+    minHf: Number(C)
+  } : void 0, [r]);
+  return i(() => s !== void 0 && t !== void 0 ? {
+    ...s,
+    label: t,
+    nextOrder: e,
+    order: n
+  } : void 0, [s, t, e, n]);
+}
+function w({
+  assets: t,
+  liquidationThresholds: r,
+  quotas: n,
+  quotasInfo: o,
+  at: e = 0,
+  length: s = 2
+}) {
+  return i(() => {
+    const l = [...t].filter((d) => {
+      const _ = r[d.token] || 0n, h = o[d.token], L = n[d.token]?.balance || 0n;
+      return h ? h.isActive ? _ > 0 && L > 0 : !1 : _ > 0;
+    });
+    return [l.splice(e, s), l];
+  }, [t, r, n, o, e, s]);
+}
+const A = "0x0000000000000000000000000000000000000000";
+function z({
+  asset: t,
+  tokensList: r,
+  prices: n
+}) {
+  return i(() => {
+    const e = n[t?.token || A], s = r[t?.token || A];
+    return [e ? Number(m(e, 8)) : void 0, s];
+  }, [t, r, n]);
+}
+function K(t, r) {
+  return i(() => !!t && !!r && t.address !== r.address, [t, r]);
+}
+const x = 2, T = 6;
+function F(t) {
+  return M(t, x, T);
+}
+function Q(t, r, n) {
+  const [o, e] = n === "straight" ? [t, r] : [r, t];
+  return t ? [
+    ...o ? [o.title] : [],
+    ...e && o && e.address !== o.address ? [e.title] : []
+  ].join("/") : "";
+}
+function V(t, r, n = "straight") {
+  return (o = 0) => r && t ? F(
+    n === "straight" ? a(o, t) : a(t, o)
+  ) : `$${E(
+    f(String(o), c),
+    c,
+    1
+  )}`;
+}
+function a(t, r) {
+  const n = typeof t == "bigint" ? Number(m(t, c)) : t, o = typeof r == "bigint" ? Number(m(r, c)) : r;
+  return n / o;
+}
+function Y(t, r, n, o = "straight") {
+  return i(() => r && n ? o === "straight" ? a(t, r) : a(r, t) : t, [t, r, o, n]);
+}
+function Z() {
+  const [t, r] = p(null);
+  return {
+    activePoint: t,
+    handleMouseMove: ({
+      xValue: e,
+      yValue: s
+    }) => {
+      r([
+        e === null ? void 0 : e,
+        s === null ? void 0 : s
+      ]);
+    },
+    handleMouseLeave: () => {
+      r(null);
+    }
+  };
+}
+function J({
+  xLabel: t,
+  yLabel: r,
+  activePoint: n,
+  prices: o
+}) {
+  const [e, s] = n || [];
+  return i(() => ({
+    ...o,
+    ...t && e ? { [t.address]: f(String(e), c) } : {},
+    ...r && s ? { [r.address]: f(String(s), c) } : {}
+  }), [o, t, r, e, s]);
+}
+function v(t, r) {
+  return t[0] >= r.x && t[0] <= r.xEnd && t[1] >= r.y && t[1] <= r.yEnd;
+}
+const H = 15e3, R = 11e3, G = 10500;
+function B(t) {
+  return t >= H ? "good" : t > R ? "medium" : t > G ? "bad" : t > C ? "critical" : "liquidation";
+}
+function y(t, r, n, o) {
+  const e = [], s = B(t.value), u = v(r, t);
+  return (n !== void 0 && o !== void 0 ? v([n, o], t) : !1) && e.push(b), u ? e.push(D) : s === "good" ? e.push(N) : s === "medium" ? e.push(S) : s === "bad" || s === "critical" ? e.push(O) : e.push(g), e.join(" ");
+}
+export {
+  O as CELL_BAD,
+  D as CELL_CURRENT,
+  N as CELL_GOOD,
+  b as CELL_HOVERED,
+  g as CELL_LIQUIDATION,
+  S as CELL_OK,
+  W as DEFAULT_AXIS_MAX,
+  k as DEFAULT_AXIS_MIN,
+  V as formatAxisLabel,
+  Q as formatAxisTipLabel,
+  F as formatAxisTipPrice,
+  y as getCellClass,
+  v as isPointInCell,
+  $ as useAxis,
+  w as useFixedAssets,
+  K as useIsAxisInRelativeUnits,
+  Y as useLiquidationGraphActivePrice,
+  Z as useLiquidationGraphCurrentActiveValue,
+  z as usePriceInNumber,
+  J as useWithLiquidationGraphActivePrices
+};

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

@@ -0,0 +1,19 @@
+import { useState as c, useEffect as m } from "react";
+function t(n) {
+  const [s, a] = c(!1);
+  return m(() => {
+    const e = window.matchMedia(n);
+    e.matches !== s && a(e.matches);
+    const i = () => a(e.matches);
+    return e.addEventListener("change", i), () => e.removeEventListener("change", i);
+  }, [s, n]), s;
+}
+const d = () => t("(max-width: 500px)"), h = () => t("(max-width: 768px)"), r = () => t("(min-width: 768px) and (max-width: 1024px)"), u = () => t("(max-width: 1024px)"), x = () => t("(min-width: 1024px)");
+export {
+  x as useIsDesktop,
+  d as useIsExtraSmall,
+  u as useIsMedium,
+  h as useIsMobile,
+  r as useIsTablet,
+  t as useMediaQuery
+};

package/dist/esm/hooks/use-opened-state.js

@@ -0,0 +1,20 @@
+import { useState as p, useCallback as t } from "react";
+function u(s = !1) {
+  const [n, e] = p(s), o = t(() => {
+    e(!0);
+  }, []), c = t(() => {
+    e(!1);
+  }, []), a = t(() => {
+    e((l) => !l);
+  }, []);
+  return {
+    isOpen: n,
+    open: o,
+    close: c,
+    toggle: a,
+    setIsOpen: e
+  };
+}
+export {
+  u as useOpenedState
+};

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

@@ -0,0 +1,10 @@
+import { useRef as t, useEffect as o } from "react";
+function f(r) {
+  const e = t(void 0);
+  return o(() => {
+    e.current = r;
+  }, [r]), e.current;
+}
+export {
+  f as usePrevious
+};

package/dist/esm/hooks/use-smart-number-input.js

@@ -0,0 +1,10 @@
+import { useState as t, useCallback as i } from "react";
+function p(n = 0n, e = "") {
+  const [o, u] = t(n), [m, a] = t(e), s = i((r, c) => {
+    u(r), a(c);
+  }, []);
+  return [o, m, s];
+}
+export {
+  p as useSmartNumberInput
+};