@gearbox-protocol/permissionless-ui 1.15.3 → 1.15.4

package/dist/esm/components/liquidation/liquidation-graph/liquidation-graph.js

@@ -1,158 +1,172 @@
-import { jsxs as H, jsx as i } from "react/jsx-runtime";
-import { useCallback as I } from "react";
-import { VSpace as N } from "../../vspace/vspace.js";
-import { useHF as Q } from "../../../hooks/use-hf.js";
-import { useLiquidationHeatmap as Z } from "../../../hooks/use-liquidation/index.js";
-import { XYPlot as ii, XAxis as ei, YAxis as ti, ColorHeatmap as ai, XLine as oi, YLine as ni } from "../../../utils/reactochart-compat.js";
-import { LiquidationGraphLegend as ri } from "../liquidation-graph-legend/liquidation-graph-legend.js";
-import { LiquidationGraphTip as li } from "../liquidation-graph-tip/liquidation-graph-tip.js";
-import { DEFAULT_AXIS_MIN as O, DEFAULT_AXIS_MAX as E, useLiquidationGraphCurrentActiveValue as si, useWithLiquidationGraphActivePrices as ci, useIsAxisInRelativeUnits as F, useLiquidationGraphActivePrice as G, formatAxisLabel as R, formatAxisTipLabel as S, getCellClass as mi } from "../../../hooks/use-liquidation/utils.js";
-const ui = 300, xi = 300, hi = "rct-crosshair-x", di = "rct-crosshair-y";
-function Ci({
-  graphParams: T,
-  assets: d,
-  liquidationThresholds: v,
-  quotas: p,
-  quotasInfo: f,
-  underlyingToken: l,
-  debt: L,
+import { jsx as e, jsxs as Y } from "react/jsx-runtime";
+import { useCallback as F } from "react";
+import { FormattedMessageTyped as Q } from "../../typed-intl/index.js";
+import { VSpace as H } from "../../vspace/vspace.js";
+import { useHF as Z } from "../../../hooks/use-hf.js";
+import { useLiquidationHeatmap as ee } from "../../../hooks/use-liquidation/index.js";
+import { XYPlot as ie, XAxis as te, YAxis as ae, ColorHeatmap as oe, XLine as ne, YLine as re } from "../../../utils/reactochart-compat.js";
+import { LiquidationGraphLegend as se } from "../liquidation-graph-legend/liquidation-graph-legend.js";
+import { LiquidationGraphTip as le } from "../liquidation-graph-tip/liquidation-graph-tip.js";
+import { DEFAULT_AXIS_MIN as O, DEFAULT_AXIS_MAX as S, useLiquidationGraphCurrentActiveValue as ce, useWithLiquidationGraphActivePrices as me, useIsAxisInRelativeUnits as T, useLiquidationGraphActivePrice as D, formatAxisLabel as E, formatAxisTipLabel as G, getCellClass as de } from "../../../hooks/use-liquidation/utils.js";
+const ue = 300, xe = 300, he = "rct-crosshair-x", pe = "rct-crosshair-y";
+function Xe({
+  graphParams: R,
+  assets: f,
+  liquidationThresholds: L,
+  quotas: A,
+  quotasInfo: y,
+  underlyingToken: s,
+  debt: g,
   prices: c,
   tokensList: m,
-  width: A = ui,
-  height: _ = xi,
-  maxLabelLength: k
+  width: d = ue,
+  height: M = xe,
+  maxLabelLength: q
 }) {
-  const { xAxis: y, yAxis: M, currentPoint: u } = T, {
-    min: P = O,
-    max: b = E,
+  const { xAxis: u, yAxis: x, currentPoint: h } = R, {
+    min: b = O,
+    max: P = S,
     label: t,
-    order: x = "straight",
-    nextOrder: q
-  } = y || {}, {
+    order: p = "straight",
+    nextOrder: _
+  } = u || {}, {
     min: C = O,
-    max: X = E,
+    max: X = S,
     label: a,
-    order: h = "straight",
-    nextOrder: D
-  } = M || {}, U = Z({
-    xMin: P,
-    xMax: b,
+    order: v = "straight",
+    nextOrder: k
+  } = x || {}, W = ee({
+    xMin: b,
+    xMax: P,
     yMin: C,
     yMax: X,
     xLabel: t,
     yLabel: a,
-    assets: d,
-    quotas: p,
+    assets: f,
+    quotas: A,
     prices: c,
-    liquidationThresholds: v,
-    underlyingTokenAddress: l,
-    debt: L,
-    quotasInfo: f,
+    liquidationThresholds: L,
+    underlyingTokenAddress: s,
+    debt: g,
+    quotasInfo: y,
     tokensList: m
-  }), { activePoint: g, handleMouseLeave: W, handleMouseMove: j } = si(), [o, n] = g || [], V = ci({
+  }), { activePoint: w, handleMouseLeave: j, handleMouseMove: U } = ce(), [o, n] = w || [], $ = me({
     prices: c,
-    activePoint: g,
+    activePoint: w,
     xLabel: t,
     yLabel: a
-  }), $ = Q({
-    quotas: p,
-    quotasInfo: f,
-    assets: d,
-    prices: V,
-    liquidationThresholds: v,
-    underlyingToken: l,
-    debt: L,
+  }), V = Z({
+    quotas: A,
+    quotasInfo: y,
+    assets: f,
+    prices: $,
+    liquidationThresholds: L,
+    underlyingToken: s,
+    debt: g,
     tokensList: m
-  }), s = c[l] || 1n, r = m[l], w = F(t, r), Y = F(a, r), z = G(
-    o || u[0],
-    s,
-    w,
-    x
-  ), B = G(
-    n || u[1],
-    s,
-    Y,
-    h
-  ), J = I(
-    R(s, w, x),
+  }), l = c[s] || 1n, r = m[s], N = T(t, r), I = T(a, r), z = D(
+    o || h[0],
+    l,
+    N,
+    p
+  ), B = D(
+    n || h[1],
+    l,
+    I,
+    v
+  ), J = F(
+    E(l, N, p),
     []
-  ), K = I(
-    R(s, Y, h),
+  ), K = F(
+    E(l, I, v),
     []
   );
-  return /* @__PURE__ */ H("div", { className: "mx-auto", style: { width: `${A}px`, maxWidth: "100%" }, children: [
-    /* @__PURE__ */ i("div", { className: "w-full", children: /* @__PURE__ */ i(
-      li,
+  return !u?.label && !x?.label ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: "mx-auto flex items-center justify-center text-sm text-muted-foreground",
+      style: { width: `${d}px`, maxWidth: "100%", height: `${M}px` },
+      children: /* @__PURE__ */ e(
+        Q,
+        {
+          messageId: "components.creditSessionDetailedLiquidation.graph.noData",
+          defaultMessage: "No data"
+        }
+      )
+    }
+  ) : /* @__PURE__ */ Y("div", { className: "mx-auto", style: { width: `${d}px`, maxWidth: "100%" }, children: [
+    /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(
+      le,
       {
         underlyingToken: r,
-        hf: $.hf,
-        xAxis: y,
-        yAxis: M,
+        hf: V.hf,
+        xAxis: u,
+        yAxis: x,
         activePointX: z,
         activePointY: B,
-        maxLabelLength: k
+        maxLabelLength: q
       }
     ) }),
-    /* @__PURE__ */ i(N, { height: 16 }),
-    /* @__PURE__ */ i("div", { className: "w-full liquidation-graph-container", children: /* @__PURE__ */ H(
-      ii,
+    /* @__PURE__ */ e(H, { height: 16 }),
+    /* @__PURE__ */ e("div", { className: "w-full liquidation-graph-container overflow-hidden", children: /* @__PURE__ */ Y(
+      ie,
       {
-        width: A,
-        height: _,
-        xDomain: [P, b],
+        width: d,
+        height: M,
+        xDomain: [b, P],
         yDomain: [C, X],
-        onMouseMove: j,
-        onMouseLeave: W,
+        onMouseMove: U,
+        onMouseLeave: j,
         children: [
-          /* @__PURE__ */ i(
-            ei,
+          /* @__PURE__ */ e(
+            te,
             {
               showLine: !1,
-              title: S(t, r, x),
+              title: G(t, r, p),
               titleAlign: "right",
               tickCount: 5,
               labelFormat: J,
               showLabels: !!t,
               showTicks: !!t,
-              onMouseClickAxis: q,
+              onMouseClickAxis: _,
               nice: !1
             }
           ),
-          /* @__PURE__ */ i(
-            ti,
+          /* @__PURE__ */ e(
+            ae,
             {
               showLine: !1,
-              title: S(a, r, h),
+              title: G(a, r, v),
               titleAlign: "top",
               tickCount: 5,
               labelFormat: K,
               showLabels: !!a,
               showTicks: !!a,
-              onMouseClickAxis: D,
+              onMouseClickAxis: k,
               nice: !1
             }
           ),
-          /* @__PURE__ */ i(
-            ai,
+          /* @__PURE__ */ e(
+            oe,
             {
-              data: U,
-              value: (e) => e.value,
-              x: (e) => e.x,
-              xEnd: (e) => e.xEnd,
-              y: (e) => e.y,
-              yEnd: (e) => e.yEnd,
-              rectClassName: (e) => mi(e, u, o, n)
+              data: W,
+              value: (i) => i.value,
+              x: (i) => i.x,
+              xEnd: (i) => i.xEnd,
+              y: (i) => i.y,
+              yEnd: (i) => i.yEnd,
+              rectClassName: (i) => de(i, h, o, n)
             }
           ),
-          o != null && /* @__PURE__ */ i(oi, { value: o, className: hi }),
-          n != null && /* @__PURE__ */ i(ni, { value: n, className: di })
+          o != null && /* @__PURE__ */ e(ne, { value: o, className: he }),
+          n != null && /* @__PURE__ */ e(re, { value: n, className: pe })
         ]
       }
     ) }),
-    /* @__PURE__ */ i(N, { height: 12 }),
-    /* @__PURE__ */ i("div", { className: "w-full", children: /* @__PURE__ */ i(ri, {}) })
+    /* @__PURE__ */ e(H, { height: 12 }),
+    /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(se, {}) })
   ] });
 }
 export {
-  Ci as LiquidationGraph
+  Xe as LiquidationGraph
 };

package/dist/esm/components/next/index.js

@@ -1,12 +1,14 @@
 import { SignInRequired as e } from "../auth/signin-required.js";
-import { BackButton as n } from "./back-button.js";
-import { NextMarkdownViewer as f } from "./next-markdown-viewer.js";
-import { SIWEClientProvider as m } from "./siwe-provider.js";
-import { TokenIcon as d } from "./token-icon.js";
+import { preloadTokenIcons as n } from "../token-icon/token-icon.js";
+import { BackButton as x } from "./back-button.js";
+import { NextMarkdownViewer as m } from "./next-markdown-viewer.js";
+import { SIWEClientProvider as d } from "./siwe-provider.js";
+import { TokenIcon as I } from "./token-icon.js";
 export {
-  n as BackButton,
-  f as NextMarkdownViewer,
-  m as SIWEClientProvider,
+  x as BackButton,
+  m as NextMarkdownViewer,
+  d as SIWEClientProvider,
   e as SignInRequired,
-  d as TokenIcon
+  I as TokenIcon,
+  n as preloadTokenIcons
 };

package/dist/esm/components/next/token-icon.js

@@ -1,9 +1,8 @@
 import { jsx as n } from "react/jsx-runtime";
-import e from "next/image";
-import { TokenIcon as m } from "../token-icon/token-icon.js";
-function I(o) {
-  return /* @__PURE__ */ n(m, { ...o, ImageComponent: e });
+import { TokenIcon as r } from "../token-icon/token-icon.js";
+function c(o) {
+  return /* @__PURE__ */ n(r, { ...o });
 }
 export {
-  I as TokenIcon
+  c as TokenIcon
 };

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

@@ -69,7 +69,7 @@ const h = s(
           m && /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground mt-1", children: m })
         ] })
       ] }),
-      i && /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center gap-2 ml-auto md:ml-auto", children: i })
+      i && /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center gap-2 md:ml-auto", children: i })
     ] }) })
   ] })
 );

package/dist/esm/components/select/select.js

@@ -1,15 +1,15 @@
 import { jsxs as i, jsx as t } from "react/jsx-runtime";
 import * as e from "@radix-ui/react-select";
 import { cva as u } from "class-variance-authority";
-import { ChevronDown as c, ChevronUp as h, Check as b } from "lucide-react";
+import { ChevronDown as c, ChevronUp as h, Check as g } from "lucide-react";
 import * as l from "react";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk";
-const g = (a) => /* @__PURE__ */ t(e.Root, { ...a });
-g.displayName = "Select";
+const b = (a) => /* @__PURE__ */ t(e.Root, { ...a });
+b.displayName = "Select";
 const T = e.Group, V = e.Value, y = u(
-  "flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 bg-[rgb(40,40,40)] text-foreground cursor-pointer",
+  "group flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 bg-[rgb(40,40,40)] text-foreground cursor-pointer",
   {
     variants: {
       size: {
@@ -36,7 +36,7 @@ const T = e.Group, V = e.Value, y = u(
     ...n,
     children: [
       o,
-      /* @__PURE__ */ t(e.Icon, { asChild: !0, children: /* @__PURE__ */ t(c, { className: "h-4 w-4 opacity-50" }) })
+      /* @__PURE__ */ t(e.Icon, { asChild: !0, children: /* @__PURE__ */ t(c, { className: "h-4 w-4 opacity-50 transition-transform duration-200 group-data-[state=open]:rotate-180" }) })
     ]
   }
 ));
@@ -114,7 +114,7 @@ const S = l.forwardRef(({ className: a, children: o, ...r }, d) => /* @__PURE__
     ),
     ...r,
     children: [
-      /* @__PURE__ */ t("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ t(e.ItemIndicator, { children: /* @__PURE__ */ t(b, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ t("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ t(e.ItemIndicator, { children: /* @__PURE__ */ t(g, { className: "h-4 w-4" }) }) }),
       /* @__PURE__ */ t(e.ItemText, { children: o })
     ]
   }
@@ -130,7 +130,7 @@ const v = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
 ));
 v.displayName = e.Separator.displayName;
 export {
-  g as Select,
+  b as Select,
   x as SelectContent,
   T as SelectGroup,
   S as SelectItem,

package/dist/esm/components/tab-control/tab-control.js

@@ -1,4 +1,4 @@
-import { jsxs as C, jsx as f, Fragment as S } from "react/jsx-runtime";
+import { jsx as f, jsxs as C, Fragment as S } from "react/jsx-runtime";
 import { useRef as h, useState as v, useCallback as m, useMemo as w, useEffect as T } from "react";
 import { useLocation as U, useNavigate as N } from "react-router-dom";
 import { cn as b } from "../../utils/cn.js";
@@ -44,27 +44,27 @@ function q({
     c.current,
     d
   ), e = (n, a) => () => t.handleTabChange(n, a);
-  return /* @__PURE__ */ C("div", { className: "relative w-full flex flex-col border-b border-border", children: [
-    l && /* @__PURE__ */ f(
-      "div",
-      {
-        className: "absolute bottom-[-1px] left-0 h-[3px] bg-primary transition-transform duration-200 ease-in-out",
-        style: {
-          width: `${l.width}px`,
-          transform: `translate(${l.left}px)`
-        }
-      }
-    ),
-    /* @__PURE__ */ f(
-      "div",
-      {
-        ref: c,
-        className: b(
-          "relative bottom-[-1px] flex items-stretch gap-3 overflow-x-auto overflow-y-hidden w-full",
-          "navbar-scrollbar",
-          i && "border-b border-border"
+  return /* @__PURE__ */ f("div", { className: "relative w-full flex flex-col border-b border-border", children: /* @__PURE__ */ C(
+    "div",
+    {
+      ref: c,
+      className: b(
+        "relative bottom-[-1px] flex items-stretch gap-3 overflow-x-auto overflow-y-hidden w-full",
+        "navbar-scrollbar",
+        i && "border-b border-border"
+      ),
+      children: [
+        l && /* @__PURE__ */ f(
+          "div",
+          {
+            className: "absolute bottom-[-1px] left-0 h-[3px] bg-primary transition-transform duration-200 ease-in-out pointer-events-none",
+            style: {
+              width: `${l.width}px`,
+              transform: `translate(${l.left}px)`
+            }
+          }
         ),
-        children: r.map((n, a, u) => {
+        r.map((n, a, u) => {
           const p = n.id === t.id, x = a === u.length - 1;
           return /* @__PURE__ */ f(
             "button",
@@ -88,9 +88,9 @@ function q({
             `tab-item-${n.id}`
           );
         })
-      }
-    )
-  ] });
+      ]
+    }
+  ) });
 }
 function B({
   icon: r,

package/dist/esm/components/table/grid-error-line.js

@@ -9,7 +9,7 @@ function C({
   btnTitle: i,
   onClick: s,
   last: n = !0,
-  height: a = "75px"
+  height: a = "100px"
 }) {
   return /* @__PURE__ */ e(
     "div",

package/dist/esm/components/token-icon/index.js

@@ -1,4 +1,5 @@
-import { TokenIcon as n } from "./token-icon.js";
+import { TokenIcon as n, preloadTokenIcons as r } from "./token-icon.js";
 export {
-  n as TokenIcon
+  n as TokenIcon,
+  r as preloadTokenIcons
 };

package/dist/esm/components/token-icon/token-icon.js

@@ -1,80 +1,47 @@
-import { jsxs as h, jsx as o } from "react/jsx-runtime";
-import { useState as i } from "react";
-import { Image as f } from "../image/image.js";
-import { cn as u } from "../../utils/cn.js";
-function k({
-  symbol: a,
-  size: t = 48,
-  className: r,
-  ImageComponent: n = f
-}) {
-  const s = a.replace("/", "").replace(" ", "").replace("-f", "").replace("-", "_").toLowerCase(), c = "https://static.gearbox.fi/tokens/default.svg", [l, p] = i(
-    `https://static.gearbox.fi/tokens/${s}.svg`
-  ), [e, d] = i(!0);
-  return /* @__PURE__ */ h(
-    "div",
-    {
-      style: {
-        width: t,
-        height: t,
-        position: "relative",
-        display: "inline-block",
-        border: "none"
-      },
-      children: [
-        e && /* @__PURE__ */ o(
-          "div",
-          {
-            style: {
-              width: t,
-              height: t,
-              borderRadius: "50%",
-              backgroundColor: "#9ca3af",
-              position: "absolute",
-              top: 0,
-              left: 0,
-              animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
-            }
-          }
-        ),
-        /* @__PURE__ */ o(
-          "div",
-          {
-            style: {
-              width: t,
-              height: t,
-              position: "relative",
-              opacity: e ? 0 : 1,
-              transition: "opacity 0.3s ease-in-out"
-            },
-            children: /* @__PURE__ */ o(
-              n,
-              {
-                src: l,
-                alt: "",
-                width: t,
-                height: t,
-                className: u("w-full h-full object-contain block", r),
-                onError: () => p(c),
-                onLoad: () => d(!1)
-              }
-            )
-          }
+import { jsx as p } from "react/jsx-runtime";
+import { useState as s, useRef as h } from "react";
+import { cn as m } from "../../utils/cn.js";
+const a = "https://static.gearbox.fi/tokens/default.svg", i = /* @__PURE__ */ new Set();
+function w(t) {
+  const e = t.replace("/", "").replace(" ", "").replace("-f", "").replace("-", "_").toLowerCase();
+  if (!e) return a;
+  const r = `https://static.gearbox.fi/tokens/${e}.svg`;
+  return i.has(r) ? a : r;
+}
+function I({ symbol: t, size: e = 48, className: r }) {
+  const n = w(t), [o, l] = s(n), [f, d] = s(!1), c = h(!1), u = () => {
+    c.current || (c.current = !0, i.add(o), l(a));
+  }, g = () => {
+    d(!0);
+  };
+  return (
+    // biome-ignore lint/performance/noImgElement: Simple img for CDN icons with browser caching
+    /* @__PURE__ */ p(
+      "img",
+      {
+        src: o,
+        alt: "",
+        width: e,
+        height: e,
+        className: m(
+          "object-contain rounded-full",
+          !f && "bg-gray-200 dark:bg-gray-700",
+          r
         ),
-        /* @__PURE__ */ o("style", { children: `
-          @keyframes pulse {
-            0%, 100% {
-              opacity: 1;
-            }
-            50% {
-              opacity: 0.5;
-            }
-          }
-        ` })
-      ]
-    }
+        style: { width: e, height: e },
+        onError: u,
+        onLoad: g
+      }
+    )
   );
 }
+function x(t) {
+  t.forEach((e) => {
+    const n = `https://static.gearbox.fi/tokens/${e.replace("/", "").replace(" ", "").replace("-f", "").replace("-", "_").toLowerCase()}.svg`, o = new window.Image();
+    o.src = n;
+  });
+}
 export {
-  k as TokenIcon
+  I as TokenIcon,
+  x as preloadTokenIcons
 };

package/dist/esm/components/typed-intl/index.js

@@ -1,25 +1,27 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useCallback as s, useMemo as a } from "react";
-import { FormattedMessage as i, useIntl as m } from "react-intl";
-const d = (e) => /* @__PURE__ */ o("strong", { children: e });
+import { jsx as r } from "react/jsx-runtime";
+import { useCallback as a, useMemo as i } from "react";
+import { FormattedMessage as m, useIntl as d } from "react-intl";
+const l = (e) => /* @__PURE__ */ r("strong", { children: e });
 function f({
   messageId: e,
-  values: t
+  values: t,
+  defaultMessage: o
 }) {
-  return /* @__PURE__ */ o(
-    i,
+  return /* @__PURE__ */ r(
+    m,
     {
       id: e,
-      values: { strong: d, ...t }
+      defaultMessage: o,
+      values: { strong: l, ...t }
     }
   );
 }
 function g() {
-  const e = m(), t = s(
-    ({ messageId: r }, n) => e.formatMessage({ id: r }, n),
+  const e = d(), t = a(
+    ({ messageId: n }, s) => e.formatMessage({ id: n }, s),
     [e]
   );
-  return a(
+  return i(
     () => ({ formatMessage: t, intl: e }),
     [e, t]
   );