@gearbox-protocol/permissionless-ui 1.7.3 → 1.7.4

package/dist/esm/components/form/form-field.js

@@ -1,8 +1,9 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useFormFieldIds } from "../../utils/a11y.js";
-import { cn } from "../../utils/cn.js";
-import { Input } from "../input.js";
-import { Label } from "../label.js";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Input } from '../input/input.js';
+import { Label } from '../label/label.js';
+import { useFormFieldIds } from '../../utils/a11y.js';
+import { cn } from '../../utils/cn.js';
+
 function FormField({
   label,
   error,
@@ -11,7 +12,7 @@ function FormField({
   inputProps,
   className
 }) {
-  const { inputId, errorId, helperId } = useFormFieldIds(label);
+  const { inputId, errorId, helperId } = useFormFieldIds();
   const hasError = !!error;
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
     /* @__PURE__ */ jsx(
@@ -38,6 +39,5 @@ function FormField({
     !hasError && helperText && /* @__PURE__ */ jsx("p", { id: helperId, className: "text-sm text-muted-foreground", children: helperText })
   ] });
 }
-export {
-  FormField
-};
+
+export { FormField };

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

@@ -1 +1 @@
-export * from "./form-field.js";
+export { FormField } from './form-field.js';

package/dist/esm/components/graph/default-config.js

@@ -1,4 +1,5 @@
-import { resolveCSSColor } from "../../utils/colors.js";
+import { resolveCSSColor } from '../../utils/colors.js';
+
 const DEFAULT_AREA_SERIES = {
   topColor: "rgba(76, 175, 80, 0.56)",
   bottomColor: "rgba(76, 175, 80, 0.04)",
@@ -12,6 +13,10 @@ const DEFAULT_VERTICAL_LINE = {
   width: 2
 };
 function getDefaultOptions() {
+  const foregroundColor = resolveCSSColor(
+    "hsl(var(--foreground))",
+    "rgb(0, 0, 0)"
+  );
   return {
     timeScale: {
       borderVisible: true,
@@ -23,13 +28,14 @@ function getDefaultOptions() {
       alignLabels: true,
       borderVisible: true,
       borderColor: "rgba(224, 227, 235, 0.1)",
-      entireTextOnly: false
+      entireTextOnly: false,
+      textColor: foregroundColor
     },
     layout: {
       background: {
         color: "transparent"
       },
-      textColor: resolveCSSColor("hsl(var(--foreground))", "rgb(0, 0, 0)"),
+      textColor: foregroundColor,
       fontSize: 14
     },
     crosshair: {
@@ -119,11 +125,5 @@ const DEFAULT_OPTIONS = {
     }
   }
 };
-export {
-  DEFAULT_AREA_SERIES,
-  DEFAULT_OPTIONS,
-  DEFAULT_VERTICAL_LINE,
-  getDefaultOptions,
-  getDefaultSeries,
-  getDefaultVerticalLine
-};
+
+export { DEFAULT_AREA_SERIES, DEFAULT_OPTIONS, DEFAULT_VERTICAL_LINE, getDefaultOptions, getDefaultSeries, getDefaultVerticalLine };

package/dist/esm/components/graph/formatters.js

@@ -1,105 +1,62 @@
-import { DateTime } from "luxon";
-const MAX_EXPONENTIAL_MONEY_THRESHOLD = 1e11;
-const EPSILON = 1e-10;
-const MIN_DISPLAY_THRESHOLD = 1e-4;
-function formatMoneyAmount({
-  amount,
-  maxExponentialThreshold,
-  minimumFractionDigits = 0,
-  maximumFractionDigits = 0,
-  format = "full"
-}) {
-  const absAmount = Math.abs(amount);
-  if (format === "short") {
-    if (absAmount >= 1e9) {
-      return `${(amount / 1e9).toFixed(maximumFractionDigits)}B`;
-    }
-    if (absAmount >= 1e6) {
-      return `${(amount / 1e6).toFixed(maximumFractionDigits)}M`;
-    }
-    if (absAmount >= 1e3) {
-      return `${(amount / 1e3).toFixed(maximumFractionDigits)}K`;
-    }
-  }
-  if (maxExponentialThreshold && absAmount > maxExponentialThreshold && absAmount > 0) {
-    return amount.toExponential(2);
-  }
-  return new Intl.NumberFormat("en-US", {
-    minimumFractionDigits,
-    maximumFractionDigits
-  }).format(amount);
-}
-function toSignificant(value, decimals) {
-  const divisor = 10n ** BigInt(decimals);
-  const result = Number(value) / Number(divisor);
-  return result.toFixed(decimals).replace(/\.?0+$/, "");
-}
+import { DateTime } from 'luxon';
+import { isBelowDisplayThreshold, FORMAT_CONSTANTS, toSignificantDigits, formatNumberWithSuffix } from '../../utils/format-number.js';
+
+const { MIN_DISPLAY_THRESHOLD, MAX_EXPONENTIAL_THRESHOLD } = FORMAT_CONSTANTS;
 const formatGraphMoney = (value, symbol, format = "full") => {
-  const absValue = Math.abs(value);
-  if (absValue < EPSILON && absValue > 0) {
+  if (isBelowDisplayThreshold(value)) {
     return symbol ? `<${MIN_DISPLAY_THRESHOLD}${symbol}` : `<${MIN_DISPLAY_THRESHOLD}`;
   }
-  if (absValue === 0) {
+  if (value === 0) {
     return symbol ? `0${symbol}` : "0";
   }
-  const f = formatMoneyAmount({
-    amount: value,
-    maxExponentialThreshold: MAX_EXPONENTIAL_MONEY_THRESHOLD,
+  const f = formatNumberWithSuffix(value, {
+    maxExponentialThreshold: MAX_EXPONENTIAL_THRESHOLD,
     minimumFractionDigits: 0,
-    maximumFractionDigits: 0,
-    format
+    maximumFractionDigits: format === "short" ? 1 : 0,
+    format,
+    adaptiveDecimals: format === "short"
   });
   if (symbol) return `${f}${symbol}`;
   return f;
 };
 const PERCENT_DECIMALS = 2;
 const formatGraphPercent = (value, symbol) => {
-  const absValue = Math.abs(value);
-  if (absValue < EPSILON && absValue > 0) {
+  if (isBelowDisplayThreshold(value)) {
     return symbol ? `<${MIN_DISPLAY_THRESHOLD}${symbol}` : `<${MIN_DISPLAY_THRESHOLD}`;
   }
-  if (absValue === 0) {
+  if (value === 0) {
     return symbol ? `0${symbol}` : "0";
   }
-  const f = toSignificant(
-    BigInt(Math.floor(value * 10 ** PERCENT_DECIMALS)),
-    PERCENT_DECIMALS
-  );
+  const f = toSignificantDigits(value, PERCENT_DECIMALS);
   if (symbol) return `${f}${symbol}`;
   return f;
 };
 const DEFAULT_DECIMALS = 4;
 const defaultFormatter = (value) => {
-  const absValue = Math.abs(value);
-  if (absValue < EPSILON && absValue > 0) {
+  if (isBelowDisplayThreshold(value)) {
     return `<${MIN_DISPLAY_THRESHOLD}`;
   }
-  if (absValue === 0) {
+  if (value === 0) {
     return "0";
   }
-  const f = toSignificant(
-    BigInt(Math.floor(value * 10 ** DEFAULT_DECIMALS)),
-    DEFAULT_DECIMALS
-  );
-  return f;
+  return toSignificantDigits(value, DEFAULT_DECIMALS);
 };
 const formatGraphToken = (value, symbol) => {
-  const absValue = Math.abs(value);
-  if (absValue < EPSILON && absValue > 0) {
+  if (isBelowDisplayThreshold(value)) {
     return symbol ? `<${MIN_DISPLAY_THRESHOLD} ${symbol}` : `<${MIN_DISPLAY_THRESHOLD}`;
   }
-  if (absValue === 0) {
+  if (value === 0) {
     return symbol ? `0 ${symbol}` : "0";
   }
   const isWholeNumber = Number.isInteger(value);
   const amountAbs = Math.abs(value);
   const shouldUseShortFormat = isWholeNumber && amountAbs >= 1e3;
-  const f = formatMoneyAmount({
-    amount: value,
-    maxExponentialThreshold: MAX_EXPONENTIAL_MONEY_THRESHOLD,
+  const f = formatNumberWithSuffix(value, {
+    maxExponentialThreshold: MAX_EXPONENTIAL_THRESHOLD,
     minimumFractionDigits: isWholeNumber ? 0 : 2,
     maximumFractionDigits: shouldUseShortFormat ? 1 : isWholeNumber ? 0 : 2,
-    format: shouldUseShortFormat ? "short" : "full"
+    format: shouldUseShortFormat ? "short" : "full",
+    adaptiveDecimals: shouldUseShortFormat
   });
   if (symbol) return `${f} ${symbol}`;
   return f;
@@ -144,7 +101,5 @@ const getXFormatter = (unit, points) => {
   }
   return X_FORMATTERS[unit] || X_FORMATTERS.time;
 };
-export {
-  getXFormatter,
-  getYFormatter
-};
+
+export { getXFormatter, getYFormatter };

package/dist/esm/components/graph/graph-current-value.js

@@ -1,6 +1,7 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "../../utils/cn.js";
-import { getXFormatter, getYFormatter } from "./formatters.js";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../utils/cn.js';
+import { getXFormatter, getYFormatter } from './formatters.js';
+
 function GraphCurrentValue({
   point,
   xMeasureUnit,
@@ -25,6 +26,5 @@ function GraphCurrentValue({
     }
   );
 }
-export {
-  GraphCurrentValue
-};
+
+export { GraphCurrentValue };

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

@@ -1,9 +1,9 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { cn } from "../../utils/cn.js";
-import { getXFormatter, getYFormatter } from "./formatters.js";
-import { DEFAULT_SERIES_COLORS } from "./graph.js";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { cn } from '../../utils/cn.js';
+import { getXFormatter, getYFormatter } from './formatters.js';
+import { DEFAULT_SERIES_COLORS } from './graph.js';
+
 function GraphTooltip({
   points,
   series,
@@ -113,6 +113,5 @@ function GraphTooltip({
     }
   );
 }
-export {
-  GraphTooltip
-};
+
+export { GraphTooltip };

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

@@ -1,10 +1,10 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
-import * as React from "react";
-import { useEffect, useRef, useState } from "react";
-import { cn } from "../../utils/cn.js";
-import { Graph } from "./graph.js";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { useRef, useState, useEffect } from 'react';
+import { cn } from '../../utils/cn.js';
+import { Graph } from './graph.js';
+
 const graphViewVariants = cva(
   "relative w-full overflow-hidden rounded-lg border-border border bg-card text-card-foreground",
   {
@@ -188,9 +188,5 @@ function useGraphAside(gap = 0) {
   }, [gap]);
   return { graphWidth: state, parentRef, asideRef };
 }
-export {
-  GraphView,
-  GraphViewWithData,
-  graphViewVariants,
-  useGraphAside
-};
+
+export { GraphView, GraphViewWithData, graphViewVariants, useGraphAside };

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

@@ -1,20 +1,16 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { createChart } from "lightweight-charts";
-import * as React from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useIsMobile } from "../../hooks/use-media-query.js";
-import { cn } from "../../utils/cn.js";
-import { generateColorsFromBase } from "../../utils/colors.js";
-import {
-  getDefaultOptions,
-  getDefaultSeries,
-  getDefaultVerticalLine
-} from "./default-config.js";
-import { getXFormatter, getYFormatter } from "./formatters.js";
-import { GraphCurrentValue } from "./graph-current-value.js";
-import { GraphTooltip } from "./graph-tooltip.js";
-import { VertLine } from "./plugins/vertical-line.js";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createChart } from 'lightweight-charts';
+import * as React from 'react';
+import { useRef, useEffect, useState, useCallback } from 'react';
+import { useIsMobile } from '../../hooks/use-media-query.js';
+import { cn } from '../../utils/cn.js';
+import { resolveCSSColor, generateColorsFromBase } from '../../utils/colors.js';
+import { getDefaultOptions, getDefaultSeries, getDefaultVerticalLine } from './default-config.js';
+import { getXFormatter, getYFormatter } from './formatters.js';
+import { GraphCurrentValue } from './graph-current-value.js';
+import { GraphTooltip } from './graph-tooltip.js';
+import { VertLine as d } from './plugins/vertical-line.js';
+
 const DEFAULT_SERIES_COLORS = [
   {
     line: "#02c39a",
@@ -59,7 +55,6 @@ const DEFAULT_SERIES_COLORS = [
 ];
 function Graph({
   series,
-  graphId,
   className,
   showLegend = false,
   onUnselectSeries,
@@ -71,6 +66,7 @@ function Graph({
   const chartRef = useRef(null);
   const seriesRefs = useRef(/* @__PURE__ */ new Map());
   const parentRef = useRef(null);
+  const chartContainerRef = useRef(null);
   const isMobile = useIsMobile();
   const allPoints = React.useMemo(() => {
     return series.flatMap((s) => s.data);
@@ -110,6 +106,7 @@ function Graph({
   }, []);
   useEffect(() => {
     if (series.length === 0) return;
+    if (!chartContainerRef.current) return;
     const xFormatter = xMeasureUnit === "time" ? getXFormatter(xMeasureUnit, allPoints) : getXFormatter(xMeasureUnit);
     const yFormatter = getYFormatter(yMeasureUnit);
     const minValue = allPoints.length > 0 ? Math.min(...allPoints.map((p) => p.value)) : 0;
@@ -119,7 +116,11 @@ function Graph({
     const useMultiplePriceScales = series.length > 1;
     const shouldHideScaleLabels = useMultiplePriceScales || isMobile;
     const defaultOptions = getDefaultOptions();
-    const chart = initChart(graphId, {
+    const foregroundColor = resolveCSSColor(
+      "hsl(var(--foreground))",
+      "rgb(0, 0, 0)"
+    );
+    const chart = initChart(chartContainerRef.current, {
       ...defaultOptions,
       localization: {
         ...defaultOptions.localization || {},
@@ -139,6 +140,7 @@ function Graph({
       rightPriceScale: {
         ...defaultOptions.rightPriceScale || {},
         visible: !isMobile,
+        textColor: foregroundColor,
         ...shouldPreventNegativeAxis && {
           scaleMargins: {
             top: 0.3,
@@ -227,7 +229,8 @@ function Graph({
               alignLabels: true,
               borderVisible: true,
               borderColor: "rgba(224, 227, 235, 0.1)",
-              entireTextOnly: false
+              entireTextOnly: false,
+              textColor: foregroundColor
             });
           }
         } catch (error) {
@@ -275,7 +278,6 @@ function Graph({
       chart.remove();
     };
   }, [
-    graphId,
     series,
     allPoints,
     xMeasureUnit,
@@ -292,7 +294,7 @@ function Graph({
       const defaultVerticalLine = getDefaultVerticalLine();
       const firstSeries = seriesList[0];
       for (const v of verticalLineOptions) {
-        const vertLine = new VertLine(ch, firstSeries, v.xCoordinate, {
+        const vertLine = new d(ch, firstSeries, v.xCoordinate, {
           ...defaultVerticalLine,
           ...v.options || {}
         });
@@ -351,7 +353,7 @@ function Graph({
         /* @__PURE__ */ jsx(
           "div",
           {
-            id: graphId,
+            ref: chartContainerRef,
             className: "LightweightChart w-full h-full overflow-hidden"
           }
         )
@@ -359,8 +361,8 @@ function Graph({
     }
   );
 }
-function initChart(id, config) {
-  return createChart(id, config);
+function initChart(container, config) {
+  return createChart(container, config);
 }
 function useCurrentPoint({
   series,
@@ -604,7 +606,5 @@ function GraphLegend({
     );
   }) });
 }
-export {
-  DEFAULT_SERIES_COLORS,
-  Graph
-};
+
+export { DEFAULT_SERIES_COLORS, Graph };

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

@@ -1,15 +1,7 @@
-export * from "./default-config.js";
-import {
-  getXFormatter,
-  getYFormatter
-} from "./formatters.js";
-export * from "./graph.js";
-export * from "./graph-current-value.js";
-export * from "./graph-tooltip.js";
-export * from "./graph-view.js";
-import { VertLine } from "./plugins/vertical-line.js";
-export {
-  VertLine,
-  getXFormatter,
-  getYFormatter
-};
+export { DEFAULT_AREA_SERIES, DEFAULT_OPTIONS, DEFAULT_VERTICAL_LINE, getDefaultOptions, getDefaultSeries, getDefaultVerticalLine } from './default-config.js';
+export { getXFormatter, getYFormatter } from './formatters.js';
+export { DEFAULT_SERIES_COLORS, Graph } from './graph.js';
+export { GraphCurrentValue } from './graph-current-value.js';
+export { GraphTooltip } from './graph-tooltip.js';
+export { GraphView, GraphViewWithData, graphViewVariants, useGraphAside } from './graph-view.js';
+export { VertLine } from './plugins/vertical-line.js';

package/dist/esm/components/graph/plugins/vertical-line.js

@@ -1,24 +1,32 @@
+/* eslint-disable */
 var h = Object.defineProperty;
-var a = (s, t, e) => t in s ? h(s, t, { enumerable: true, configurable: true, writable: true, value: e }) : s[t] = e;
+var a = (s, t, e) =>
+  t in s
+    ? h(s, t, { enumerable: true, configurable: true, writable: true, value: e })
+    : (s[t] = e);
 var i = (s, t, e) => (a(s, typeof t !== "symbol" ? `${t}` : t, e), e);
 function c(s) {
   return Math.floor(s * 0.5);
 }
 function _(s, t, e = 1, o) {
-  const n = Math.round(t * s), r = o ? e : Math.round(e * t), l = c(r);
+  const n = Math.round(t * s),
+    r = Math.round(e * t),
+    l = c(r);
   return { position: n - l, length: r };
 }
 class u {
   constructor(t, e) {
     i(this, "_x", null);
     i(this, "_options");
-    this._x = t, this._options = e;
+    (this._x = t), (this._options = e);
   }
   draw(t) {
-    t.useBitmapCoordinateSpace((e) => {
+    t.useBitmapCoordinateSpace(e => {
       if (this._x === null) return;
-      const o = e.context, n = _(this._x, e.horizontalPixelRatio, this._options.width);
-      o.fillStyle = this._options.color, o.fillRect(n.position, 0, n.length, e.bitmapSize.height);
+      const o = e.context,
+        n = _(this._x, e.horizontalPixelRatio, this._options.width);
+      (o.fillStyle = this._options.color),
+        o.fillRect(n.position, 0, n.length, e.bitmapSize.height);
     });
   }
 }
@@ -27,7 +35,7 @@ class p {
     i(this, "_source");
     i(this, "_x", null);
     i(this, "_options");
-    this._source = t, this._options = e;
+    (this._source = t), (this._options = e);
   }
   update() {
     const t = this._source._chart.timeScale();
@@ -42,7 +50,7 @@ class x {
     i(this, "_source");
     i(this, "_x", null);
     i(this, "_options");
-    this._source = t, this._options = e;
+    (this._source = t), (this._options = e);
   }
   update() {
     const t = this._source._chart.timeScale();
@@ -73,7 +81,7 @@ const w = {
   width: 3,
   labelBackgroundColor: "green",
   labelTextColor: "white",
-  showLabel: false
+  showLabel: false,
 };
 class d {
   constructor(t, e, o, n) {
@@ -84,12 +92,17 @@ class d {
     i(this, "_timeAxisViews");
     const r = {
       ...w,
-      ...n
+      ...n,
     };
-    this._chart = t, this._series = e, this._time = o, this._paneViews = [new p(this, r)], this._timeAxisViews = [new x(this, r)];
+    (this._chart = t),
+      (this._series = e),
+      (this._time = o),
+      (this._paneViews = [new p(this, r)]),
+      (this._timeAxisViews = [new x(this, r)]);
   }
   updateAllViews() {
-    this._paneViews.forEach((t) => t.update()), this._timeAxisViews.forEach((t) => t.update());
+    this._paneViews.forEach(t => t.update()),
+      this._timeAxisViews.forEach(t => t.update());
   }
   timeAxisViews() {
     return this._timeAxisViews;
@@ -98,6 +111,5 @@ class d {
     return this._paneViews;
   }
 }
-export {
-  d as VertLine
-};
+
+export { d as VertLine };

package/dist/esm/components/guard/guard.js

@@ -0,0 +1,9 @@
+function Guard({
+  showGuard,
+  guard,
+  children
+}) {
+  return showGuard ? guard : children;
+}
+
+export { Guard };

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

@@ -0,0 +1 @@
+export { Guard } from './guard.js';

package/dist/esm/components/health-factor/health-factor.js

@@ -0,0 +1,61 @@
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+import { PERCENTAGE_FACTOR, formatPercentAmount } from '../../utils/format-money.js';
+
+const GOOD_HF = 15e3;
+const BAD_HF = 11e3;
+const CRITICAL_HF = 10500;
+const getHFZones = (hf) => {
+  if (!hf) return void 0;
+  const hfInBasisPoints = Number(hf);
+  if (hfInBasisPoints >= GOOD_HF) return "good";
+  if (hfInBasisPoints > BAD_HF) return "medium";
+  if (hfInBasisPoints > CRITICAL_HF) return "bad";
+  if (hfInBasisPoints > PERCENTAGE_FACTOR) return "critical";
+  return "liquidation";
+};
+function HealthFactor({
+  value,
+  debt,
+  decimals = 3,
+  zone,
+  showColor = true,
+  className,
+  ...props
+}) {
+  const zeroDebt = debt !== void 0 && debt === 0n;
+  const getZone = () => {
+    if (zeroDebt) return void 0;
+    return zone === void 0 || zone === null ? getHFZones(value) : zone;
+  };
+  const currentZone = getZone();
+  const getColorClass = () => {
+    if (!showColor || currentZone === void 0) return "";
+    switch (currentZone) {
+      case "good":
+        return "text-green-600";
+      case "medium":
+        return "text-yellow-600";
+      case "bad":
+        return "text-orange-500";
+      case "critical":
+      case "liquidation":
+        return "text-destructive";
+      default:
+        return "";
+    }
+  };
+  const renderValue = () => {
+    if (zeroDebt) return "N/A";
+    const numValue = Number(value);
+    const hfDecimal = numValue / PERCENTAGE_FACTOR;
+    const formatted = formatPercentAmount(hfDecimal, decimals);
+    return String(formatted);
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("font-medium", getColorClass(), className), ...props, children: renderValue() });
+}
+
+export { BAD_HF, GOOD_HF, HealthFactor, getHFZones };

package/dist/esm/components/health-factor/index.js

@@ -0,0 +1 @@
+export { BAD_HF, GOOD_HF, HealthFactor, getHFZones } from './health-factor.js';