@gearbox-protocol/permissionless-ui 1.22.0-next.41 → 1.22.0-next.43

package/dist/esm/components/smart-number-input/balance-indicator.js

@@ -0,0 +1,60 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { cva as x } from "class-variance-authority";
+import { TextButton as u } from "../text-button/text-button.js";
+import { TokenTemplate as f } from "../token-template/token-template.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as a } from "../../utils/cn.js";
+import "sonner";
+const b = x("font-normal leading-[130%] text-foreground", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      md: "text-sm"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+function j({
+  title: m = "Balance",
+  className: i,
+  maxAmount: l,
+  token: c,
+  disabled: d,
+  maxButton: p = !0,
+  onMaxButtonClick: r,
+  size: e = "sm"
+}) {
+  const o = !d && p, n = /* @__PURE__ */ t(f, { value: l, token: c, showSymbol: !1 });
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: a("flex shrink-0 basis-auto items-center", i),
+      "data-testid": "balance-indicator",
+      children: [
+        /* @__PURE__ */ s("span", { className: a(b({ size: e })), children: [
+          m,
+          ": ",
+          o && e === "sm" ? /* @__PURE__ */ t(u, { onClick: r, children: n }) : n
+        ] }),
+        o && e !== "sm" && /* @__PURE__ */ t("div", { className: "ml-2", children: /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: r,
+            "data-testid": "balance-max",
+            className: a(
+              "rounded-[6px] border-0 py-[3px] px-1 text-[11px]! leading-[13px]!",
+              "text-center uppercase text-foreground",
+              "bg-gray-70 hover:bg-gray-90 transition-colors"
+            ),
+            children: "max"
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  j as BalanceIndicator
+};

package/dist/esm/components/smart-number-input/index.js

@@ -1,4 +1,6 @@
-import { SmartNumberInput as t } from "./smart-number-input.js";
+import { BalanceIndicator as t } from "./balance-indicator.js";
+import { SmartNumberInput as e } from "./smart-number-input.js";
 export {
-  t as SmartNumberInput
+  t as BalanceIndicator,
+  e as SmartNumberInput
 };

package/dist/esm/components/smart-number-input/smart-number-input.js

@@ -1,136 +1,131 @@
-import { jsx as s, jsxs as d } from "react/jsx-runtime";
-import * as G from "react";
-import "../buttons/back-button/back-button.js";
-import { Button as H } from "../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 { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { cva as u } from "class-variance-authority";
+import * as g from "react";
+import { CurrencyButton as E } from "../currency-button/currency-button.js";
+import { faXmark as G } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as H } from "../icons/fa-icon.js";
+import { useIsMobile as J, useIsTablet as K, useIsDesktop as O } from "../../hooks/use-media-query.js";
+import { bnToInputView as P } from "../../utils/bn-to-input-view.js";
 import "@gearbox-protocol/sdk";
-import { cn as g } from "../../utils/cn.js";
+import { parseInputToBN as Q } from "../../utils/parse-input-to-bn.js";
+import { cn as x } from "../../utils/cn.js";
 import "sonner";
-import "../buttons/tab-button/tab-button.js";
-import { faXmark as J } from "@fortawesome/free-solid-svg-icons";
-import { FaIcon as K } from "../icons/fa-icon.js";
-import { TokenIcon as Q } from "../token-icon/token-icon.js";
-function U(n, r) {
-  let t = n.replace(/^0+(?=\d)/, "");
-  if ((t === "" || t === ".") && (t = "0"), !/^[0-9]*\.?[0-9]*$/.test(t))
-    return [null, null];
-  try {
-    const e = t.split("."), a = e[0] || "0", p = (e[1] || "").slice(0, r).padEnd(r, "0");
-    return [BigInt(a + p), t];
-  } catch {
-    return [null, null];
-  }
-}
-function T(n, r) {
-  const t = n.toString().padStart(r + 1, "0"), e = t.slice(0, -r) || "0", a = t.slice(-r).replace(/0+$/, "");
-  return a ? `${e}.${a}` : e;
-}
-function W(n, r) {
-  const t = T(n, r), e = Number.parseFloat(t);
-  return e === 0 ? "0" : e < 1e-4 ? "< 0.0001" : e.toLocaleString(void 0, { maximumFractionDigits: 4 });
-}
-const Y = G.forwardRef(
-  ({
-    amount: n,
-    tokenSymbol: r,
-    tokenIcon: t,
-    token: e,
-    label: a = "Amount",
-    maxBalance: p,
-    maxAmount: o,
-    maxAmountLimit: m,
-    maxButtonLabel: $ = "Max",
-    showMaxButton: j,
-    maxButton: z,
-    chainId: Z,
-    network: L,
-    disabled: i = !1,
-    active: y = !1,
-    size: N = "default",
-    onAmountChange: b,
-    onSetAmount: c,
-    onMaxClick: x,
-    onTokenSelect: M,
-    onShowSelectDialog: P,
-    onRemove: w,
-    onFocus: S,
-    onBlur: F,
-    className: V
-  }, _) => {
-    const D = j ?? z ?? !0, h = r ?? e?.symbol, I = t ?? (e?.symbol ? /* @__PURE__ */ s(Q, { symbol: e.symbol, size: 24 }) : void 0), v = e?.decimals ?? 18, B = p ?? (o !== void 0 ? W(o, v) : void 0), f = M ?? P, E = {
-      sm: "p-3",
-      md: "p-3.5",
-      default: "p-4",
-      lg: "p-5"
-    }, O = {
-      sm: "text-lg",
-      md: "text-xl",
-      default: "text-2xl",
-      lg: "text-3xl"
-    }, R = (u) => {
-      const l = u.target.value;
-      if (!(!/^[0-9]*\.?[0-9]*$/.test(l) && l !== "") && (b && b(l), c)) {
-        const [k, C] = U(l, v);
-        k !== null && C !== null && c(k, C);
+import { BalanceIndicator as U } from "./balance-indicator.js";
+const W = u(
+  "relative w-full text-foreground bg-gray-20 border border-gray-30 transition-[background-color] duration-100 ease-linear [&:hover]:bg-gray-30 [&:hover]:border-gray-40 data-[active=true]:bg-gray-30 data-[active=true]:outline data-[active=true]:outline-2 data-[active=true]:outline-primary data-[active=true]:outline-offset-[-2px] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed",
+  {
+    variants: {
+      size: {
+        sm: "px-3 py-[7px] h-[60px] rounded-[8px]",
+        md: "pl-4 pr-3 py-[10px] h-[82px] rounded-lg"
       }
-    }, X = () => {
-      if (x) {
-        x();
-        return;
+    },
+    defaultVariants: { size: "md" }
+  }
+), Y = u("font-medium text-foreground", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      md: "text-sm"
+    }
+  },
+  defaultVariants: { size: "md" }
+}), Z = u(
+  "w-full p-0 bg-transparent border-none outline-none text-foreground placeholder:text-secondary-foreground focus:outline-none",
+  {
+    variants: {
+      size: {
+        sm: "text-[18px]! leading-[21px]!",
+        md: "text-[28px]! leading-[33px]!"
       }
-      if (c && o !== void 0) {
-        const u = o && m && o > m ? m : o, l = T(u, v);
-        c(u, l);
+    },
+    defaultVariants: { size: "md" }
+  }
+), _ = g.forwardRef(
+  ({
+    amount: v,
+    token: t,
+    label: y = "Amount",
+    maxAmount: a,
+    maxAmountLimit: o,
+    maxButtonLabel: w,
+    chainId: z,
+    network: N,
+    maxButton: C = !0,
+    disabled: n = !1,
+    active: V = !1,
+    size: I = "md",
+    onSetAmount: r,
+    onShowSelectDialog: c,
+    onRemove: m,
+    onFocus: B,
+    onBlur: k
+  }, M) => {
+    const p = t?.decimals ?? 18, j = (i) => {
+      const l = i.target.value, [b, h] = Q(l, p);
+      b === null || h === null || r && r(b, h);
+    }, F = () => {
+      if (r) {
+        const i = a && o && a > o ? o : a || 0n, l = P(i, p);
+        r(i, l);
       }
-    }, q = D && (x || c && o !== void 0);
+    }, [L, f] = g.useState(!1), T = () => {
+      f(!0), B?.();
+    }, D = () => {
+      f(!1), k?.();
+    }, s = I ?? "md", R = J(), S = K(), X = O(), $ = R ? 20 : S ? 30 : X ? 26 : 30, q = !!(t || c);
     return /* @__PURE__ */ d(
       "div",
       {
-        ref: _,
-        className: g(
-          "relative rounded-xl border bg-card transition-colors border-border",
-          y && "border-primary",
-          i && "opacity-50 cursor-not-allowed",
-          E[N],
-          V
-        ),
-        "data-active": y,
-        "data-disabled": i,
+        ref: M,
+        className: W({ size: s }),
+        "data-testid": "smart-number-input-root",
+        "data-active": L,
+        "data-disabled": n,
         children: [
-          w && /* @__PURE__ */ s(
-            "button",
+          m && /* @__PURE__ */ e(
+            "div",
             {
-              type: "button",
-              onClick: w,
-              className: "absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full bg-muted hover:bg-muted/80 text-muted-foreground",
-              children: /* @__PURE__ */ s(K, { icon: J, className: "size-3" })
-            }
-          ),
-          /* @__PURE__ */ d("div", { className: "flex items-center justify-between mb-2", children: [
-            /* @__PURE__ */ s("span", { className: "text-sm text-muted-foreground", children: a }),
-            B !== void 0 && /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ d("span", { className: "text-sm text-muted-foreground", children: [
-                "Balance: ",
-                B
-              ] }),
-              q && /* @__PURE__ */ s(
-                H,
+              className: "absolute top-0 right-0 flex h-5 w-5 translate-x-1/2 -translate-y-1/2 items-center justify-center",
+              "data-testid": "smart-number-input-close",
+              children: /* @__PURE__ */ e(
+                "button",
                 {
-                  variant: "ghost",
-                  size: "xs",
-                  onClick: X,
-                  disabled: i,
-                  className: "text-primary hover:text-primary/80",
-                  children: $
+                  type: "button",
+                  onClick: m,
+                  className: "flex h-5 w-5 items-center justify-center rounded-full bg-muted hover:bg-muted/80 text-muted-foreground",
+                  children: /* @__PURE__ */ e(H, { icon: G, className: "size-3" })
                 }
               )
-            ] })
+            }
+          ),
+          /* @__PURE__ */ d("div", { className: "mb-2 flex justify-between text-sm leading-[120%]", children: [
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: x(
+                  Y({ size: s }),
+                  "grow shrink-0 basis-0"
+                ),
+                "data-testid": "smart-number-input-label",
+                children: y
+              }
+            ),
+            a !== void 0 && t && /* @__PURE__ */ e(
+              U,
+              {
+                title: w,
+                token: t,
+                maxAmount: a,
+                size: s,
+                disabled: n,
+                maxButton: C,
+                onMaxButtonClick: F
+              }
+            )
           ] }),
-          /* @__PURE__ */ d("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ s(
+          /* @__PURE__ */ d("div", { className: "flex w-full max-w-full shrink-0 basis-full items-center", children: [
+            /* @__PURE__ */ e("div", { className: "mr-3 grow shrink-0 basis-0", children: /* @__PURE__ */ e(
               "input",
               {
                 type: "text",
@@ -140,41 +135,39 @@ const Y = G.forwardRef(
                 spellCheck: "false",
                 pattern: "^[0-9]*[.,]?[0-9]*$",
                 placeholder: "0",
-                value: n,
-                onChange: R,
-                onFocus: S,
-                onBlur: F,
-                disabled: i || !b && !c,
-                className: g(
-                  "flex-1 bg-transparent border-none outline-none text-foreground font-medium placeholder:text-muted-foreground",
-                  O[N]
-                )
+                value: v,
+                onChange: j,
+                onFocus: T,
+                onBlur: D,
+                disabled: n || !r,
+                className: x(Z({ size: s })),
+                "data-testid": "smart-number-input-input",
+                minLength: 1,
+                maxLength: 79,
+                title: "Amount"
               }
-            ),
-            (h || I) && /* @__PURE__ */ d(
-              "button",
+            ) }),
+            q ? /* @__PURE__ */ e(
+              E,
               {
-                type: "button",
-                onClick: f,
-                disabled: i || !f,
-                className: g(
-                  "flex items-center gap-2 rounded-full bg-secondary px-3 py-1.5 text-sm font-medium transition-colors",
-                  f && !i && "hover:bg-secondary/80 cursor-pointer",
-                  !f && "cursor-default"
-                ),
-                children: [
-                  I,
-                  h && /* @__PURE__ */ s("span", { children: h })
-                ]
+                active: V,
+                size: s,
+                disabled: n,
+                token: t,
+                showSelectDialog: c,
+                chainId: z,
+                network: N,
+                maxLength: $,
+                children: t?.symbol ?? "Select token"
               }
-            )
+            ) : null
           ] })
         ]
       }
     );
   }
 );
-Y.displayName = "SmartNumberInput";
+_.displayName = "SmartNumberInput";
 export {
-  Y as SmartNumberInput
+  _ as SmartNumberInput
 };

package/dist/esm/hooks/index.js

@@ -2,51 +2,54 @@ 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 x, useRangeFilter as m, useSelectFilter as n, useSort as A } from "./use-filter.js";
-import { useHF as f } from "./use-hf.js";
-import { useEditPriceManually as I, useLiquidationGraphParams as E, useLiquidationHeatmap as d } from "./use-liquidation/index.js";
-import { useIsDesktop as b, useIsMobile as D, useIsTablet as F, useMediaQuery as S } from "./use-media-query.js";
-import { useOpenedState as T } from "./use-opened-state.js";
-import { usePrevious as O } from "./use-previous.js";
-import { CELL_BAD as v, CELL_CURRENT as G, CELL_GOOD as M, CELL_HOVERED as R, CELL_LIQUIDATION as U, CELL_OK as N, DEFAULT_AXIS_MAX as g, DEFAULT_AXIS_MIN as H, formatAxisLabel as X, formatAxisTipLabel as k, formatAxisTipPrice as y, getCellClass as Q, isPointInCell as V, useAxis as B, useFixedAssets as K, useIsAxisInRelativeUnits as W, useLiquidationGraphActivePrice as j, useLiquidationGraphCurrentActiveValue as w, usePriceInNumber as z, useWithLiquidationGraphActivePrices as J } from "./use-liquidation/utils.js";
+import { getSortForField as L, useFilterAllSelected as m, useRangeFilter as x, useSelectFilter as n, useSort as A } from "./use-filter.js";
+import { useHF as I } 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 _, useIsMobile as D, useIsTablet as F, useMediaQuery as P } from "./use-media-query.js";
+import { useOpenedState as h } 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 N, CELL_CURRENT as R, CELL_GOOD as U, CELL_HOVERED as g, CELL_LIQUIDATION as H, CELL_OK as X, DEFAULT_AXIS_MAX as k, DEFAULT_AXIS_MIN as y, formatAxisLabel as Q, formatAxisTipLabel as V, formatAxisTipPrice as B, getCellClass as K, isPointInCell as W, useAxis as j, useFixedAssets as w, useIsAxisInRelativeUnits as z, useLiquidationGraphActivePrice as J, useLiquidationGraphCurrentActiveValue as Y, usePriceInNumber as Z, useWithLiquidationGraphActivePrices as $ } from "./use-liquidation/utils.js";
 export {
-  v as CELL_BAD,
-  G as CELL_CURRENT,
-  M as CELL_GOOD,
-  R as CELL_HOVERED,
-  U as CELL_LIQUIDATION,
-  N as CELL_OK,
-  g as DEFAULT_AXIS_MAX,
-  H as DEFAULT_AXIS_MIN,
-  X as formatAxisLabel,
-  k as formatAxisTipLabel,
-  y as formatAxisTipPrice,
-  Q as getCellClass,
-  p as getSortForField,
-  V as isPointInCell,
-  B as useAxis,
+  N as CELL_BAD,
+  R as CELL_CURRENT,
+  U as CELL_GOOD,
+  g as CELL_HOVERED,
+  H as CELL_LIQUIDATION,
+  X as CELL_OK,
+  k as DEFAULT_AXIS_MAX,
+  y as DEFAULT_AXIS_MIN,
+  Q as formatAxisLabel,
+  V as formatAxisTipLabel,
+  B as formatAxisTipPrice,
+  K as getCellClass,
+  L as getSortForField,
+  W as isPointInCell,
+  j as useAxis,
   t as useCheckboxSelect,
   i as useControllableState,
   u as useDebounce,
   l as useDebounceCall,
-  I as useEditPriceManually,
-  x as useFilterAllSelected,
-  K as useFixedAssets,
-  f as useHF,
-  W as useIsAxisInRelativeUnits,
+  C as useEditPriceManually,
+  m as useFilterAllSelected,
+  w as useFixedAssets,
+  I as useHF,
+  z as useIsAxisInRelativeUnits,
   b as useIsDesktop,
+  _ as useIsExtraSmall,
   D as useIsMobile,
   F as useIsTablet,
-  j as useLiquidationGraphActivePrice,
-  w as useLiquidationGraphCurrentActiveValue,
+  J as useLiquidationGraphActivePrice,
+  Y as useLiquidationGraphCurrentActiveValue,
   E as useLiquidationGraphParams,
   d as useLiquidationHeatmap,
-  S as useMediaQuery,
-  T as useOpenedState,
-  O as usePrevious,
-  z as usePriceInNumber,
-  m as useRangeFilter,
+  P as useMediaQuery,
+  h as useOpenedState,
+  q as usePrevious,
+  Z as usePriceInNumber,
+  x as useRangeFilter,
   n as useSelectFilter,
+  G as useSmartNumberInput,
   A as useSort,
-  J as useWithLiquidationGraphActivePrices
+  $ as useWithLiquidationGraphActivePrices
 };

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

@@ -1,17 +1,10 @@
-import { useRef as c, useCallback as n, useEffect as o } from "react";
-function f(r) {
-  const e = c(null), t = n(
-    (u) => {
-      e.current && clearTimeout(e.current), e.current = setTimeout(() => {
-        u();
-      }, r);
-    },
-    [r]
-  );
-  return o(() => () => {
-    e.current && clearTimeout(e.current);
-  }, []), t;
+import "react";
+import { useDebounce as o } from "./use-debounce.js";
+import "@gearbox-protocol/sdk";
+const n = (e) => e();
+function b(e) {
+  return o(n, e);
 }
 export {
-  f as useDebounceCall
+  b as useDebounceCall
 };

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

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

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

@@ -1,17 +1,18 @@
-import { useState as c, useEffect as o } from "react";
-function s(n) {
-  const [t, a] = c(!1);
-  return o(() => {
+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 !== t && a(e.matches);
+    e.matches !== s && a(e.matches);
     const i = () => a(e.matches);
     return e.addEventListener("change", i), () => e.removeEventListener("change", i);
-  }, [t, n]), t;
+  }, [s, n]), s;
 }
-const h = () => s("(max-width: 768px)"), d = () => s("(min-width: 768px) and (max-width: 1024px)"), r = () => s("(min-width: 1024px)");
+const h = () => t("(max-width: 500px)"), d = () => t("(max-width: 768px)"), r = () => t("(min-width: 768px) and (max-width: 1024px)"), u = () => t("(min-width: 1024px)");
 export {
-  r as useIsDesktop,
-  h as useIsMobile,
-  d as useIsTablet,
-  s as useMediaQuery
+  u as useIsDesktop,
+  h as useIsExtraSmall,
+  d as useIsMobile,
+  r as useIsTablet,
+  t as useMediaQuery
 };

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
+};