@gearbox-protocol/permissionless-ui 1.4.3 → 1.4.4

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

@@ -42,8 +42,7 @@ const BAD_HF = 11e3;
 const CRITICAL_HF = 10500;
 const getHFZones = (hf) => {
   if (!hf) return void 0;
-  const numHf = Number(hf);
-  const hfInBasisPoints = numHf < 1e3 ? numHf * import_format_money.PERCENTAGE_FACTOR : numHf;
+  const hfInBasisPoints = Number(hf);
   if (hfInBasisPoints >= GOOD_HF) return "good";
   if (hfInBasisPoints > BAD_HF) return "medium";
   if (hfInBasisPoints > CRITICAL_HF) return "bad";
@@ -84,8 +83,7 @@ function HealthFactor({
   const renderValue = () => {
     if (zeroDebt) return "N/A";
     const numValue = Number(value);
-    const hfInBasisPoints = numValue < 1e3 ? numValue * import_format_money.PERCENTAGE_FACTOR : numValue;
-    const hfDecimal = hfInBasisPoints / import_format_money.PERCENTAGE_FACTOR;
+    const hfDecimal = numValue / import_format_money.PERCENTAGE_FACTOR;
     const formatted = (0, import_format_money.formatPercentAmount)(hfDecimal, decimals);
     return String(formatted);
   };

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

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var liquidation_graph_exports = {};
 __export(liquidation_graph_exports, {
@@ -33,23 +23,12 @@ __export(liquidation_graph_exports, {
 module.exports = __toCommonJS(liquidation_graph_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var ColorHeatmapModule = __toESM(require("reactochart/ColorHeatmap"));
-var XAxisModule = __toESM(require("reactochart/XAxis"));
-var XLineModule = __toESM(require("reactochart/XLine"));
-var XYPlotModule = __toESM(require("reactochart/XYPlot"));
-var YAxisModule = __toESM(require("reactochart/YAxis"));
-var YLineModule = __toESM(require("reactochart/YLine"));
 var import_use_hf = require('../../hooks/use-hf.js');
 var import_use_liquidation = require('../../hooks/use-liquidation/index.js');
+var import_reactochart_compat = require('../../utils/reactochart-compat.js');
 var import_vspace = require('../vspace.js');
 var import_liquidation_graph_legend = require('./liquidation-graph-legend.js');
 var import_liquidation_graph_tip = require('./liquidation-graph-tip.js');
-const ColorHeatmap = ColorHeatmapModule.default || ColorHeatmapModule;
-const XAxis = XAxisModule.default || XAxisModule;
-const XLine = XLineModule.default || XLineModule;
-const XYPlot = XYPlotModule.default || XYPlotModule;
-const YAxis = YAxisModule.default || YAxisModule;
-const YLine = YLineModule.default || YLineModule;
 const WIDTH = 300;
 const HEIGHT = 300;
 const CROSSHAIR_X = "rct-crosshair-x";
@@ -156,7 +135,7 @@ function LiquidationGraph({
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_vspace.VSpace, { height: 16 }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full liquidation-graph-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      XYPlot,
+      import_reactochart_compat.XYPlot,
       {
         width,
         height,
@@ -166,7 +145,7 @@ function LiquidationGraph({
         onMouseLeave: handleMouseLeave,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            XAxis,
+            import_reactochart_compat.XAxis,
             {
               showLine: false,
               title: (0, import_use_liquidation.formatAxisTipLabel)(xLabel, underlyingToken, xOrder),
@@ -180,7 +159,7 @@ function LiquidationGraph({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            YAxis,
+            import_reactochart_compat.YAxis,
             {
               showLine: false,
               title: (0, import_use_liquidation.formatAxisTipLabel)(yLabel, underlyingToken, yOrder),
@@ -194,7 +173,7 @@ function LiquidationGraph({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            ColorHeatmap,
+            import_reactochart_compat.ColorHeatmap,
             {
               data: heatmap,
               value: (d) => d.value,
@@ -205,8 +184,8 @@ function LiquidationGraph({
               rectClassName: (p) => (0, import_use_liquidation.getCellClass)(p, currentPoint, activePointX, activePointY)
             }
           ),
-          activePointX !== void 0 && activePointX !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XLine, { value: activePointX, className: CROSSHAIR_X }),
-          activePointY !== void 0 && activePointY !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YLine, { value: activePointY, className: CROSSHAIR_Y })
+          activePointX !== void 0 && activePointX !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_reactochart_compat.XLine, { value: activePointX, className: CROSSHAIR_X }),
+          activePointY !== void 0 && activePointY !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_reactochart_compat.YLine, { value: activePointY, className: CROSSHAIR_Y })
         ]
       }
     ) }),

package/dist/cjs/utils/reactochart-compat.js

@@ -0,0 +1,62 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var reactochart_compat_exports = {};
+__export(reactochart_compat_exports, {
+  ColorHeatmap: () => ColorHeatmap,
+  XAxis: () => XAxis,
+  XLine: () => XLine,
+  XYPlot: () => XYPlot,
+  YAxis: () => YAxis,
+  YLine: () => YLine
+});
+module.exports = __toCommonJS(reactochart_compat_exports);
+var import_ColorHeatmap = __toESM(require("reactochart/ColorHeatmap"));
+var import_XAxis = __toESM(require("reactochart/XAxis"));
+var import_XLine = __toESM(require("reactochart/XLine"));
+var import_XYPlot = __toESM(require("reactochart/XYPlot"));
+var import_YAxis = __toESM(require("reactochart/YAxis"));
+var import_YLine = __toESM(require("reactochart/YLine"));
+function resolveDefault(mod) {
+  return mod.default || mod;
+}
+const ColorHeatmap = resolveDefault(import_ColorHeatmap.default);
+const XAxis = resolveDefault(import_XAxis.default);
+const XLine = resolveDefault(import_XLine.default);
+const XYPlot = resolveDefault(import_XYPlot.default);
+const YAxis = resolveDefault(import_YAxis.default);
+const YLine = resolveDefault(import_YLine.default);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorHeatmap,
+  XAxis,
+  XLine,
+  XYPlot,
+  YAxis,
+  YLine
+});

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

@@ -6,8 +6,7 @@ const BAD_HF = 11e3;
 const CRITICAL_HF = 10500;
 const getHFZones = (hf) => {
   if (!hf) return void 0;
-  const numHf = Number(hf);
-  const hfInBasisPoints = numHf < 1e3 ? numHf * PERCENTAGE_FACTOR : numHf;
+  const hfInBasisPoints = Number(hf);
   if (hfInBasisPoints >= GOOD_HF) return "good";
   if (hfInBasisPoints > BAD_HF) return "medium";
   if (hfInBasisPoints > CRITICAL_HF) return "bad";
@@ -48,8 +47,7 @@ function HealthFactor({
   const renderValue = () => {
     if (zeroDebt) return "N/A";
     const numValue = Number(value);
-    const hfInBasisPoints = numValue < 1e3 ? numValue * PERCENTAGE_FACTOR : numValue;
-    const hfDecimal = hfInBasisPoints / PERCENTAGE_FACTOR;
+    const hfDecimal = numValue / PERCENTAGE_FACTOR;
     const formatted = formatPercentAmount(hfDecimal, decimals);
     return String(formatted);
   };

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

@@ -1,11 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-import * as ColorHeatmapModule from "reactochart/ColorHeatmap";
-import * as XAxisModule from "reactochart/XAxis";
-import * as XLineModule from "reactochart/XLine";
-import * as XYPlotModule from "reactochart/XYPlot";
-import * as YAxisModule from "reactochart/YAxis";
-import * as YLineModule from "reactochart/YLine";
 import { useHF } from "../../hooks/use-hf.js";
 import {
   DEFAULT_AXIS_MAX,
@@ -19,15 +13,17 @@ import {
   useLiquidationHeatmap,
   useWithLiquidationGraphActivePrices
 } from "../../hooks/use-liquidation/index.js";
+import {
+  ColorHeatmap,
+  XAxis,
+  XLine,
+  XYPlot,
+  YAxis,
+  YLine
+} from "../../utils/reactochart-compat.js";
 import { VSpace } from "../vspace.js";
 import { LiquidationGraphLegend } from "./liquidation-graph-legend.js";
 import { LiquidationGraphTip } from "./liquidation-graph-tip.js";
-const ColorHeatmap = ColorHeatmapModule.default || ColorHeatmapModule;
-const XAxis = XAxisModule.default || XAxisModule;
-const XLine = XLineModule.default || XLineModule;
-const XYPlot = XYPlotModule.default || XYPlotModule;
-const YAxis = YAxisModule.default || YAxisModule;
-const YLine = YLineModule.default || YLineModule;
 const WIDTH = 300;
 const HEIGHT = 300;
 const CROSSHAIR_X = "rct-crosshair-x";

package/dist/esm/utils/reactochart-compat.js

@@ -0,0 +1,23 @@
+function resolveDefault(mod) {
+  return mod.default || mod;
+}
+import ColorHeatmapImport from "reactochart/ColorHeatmap";
+import XAxisImport from "reactochart/XAxis";
+import XLineImport from "reactochart/XLine";
+import XYPlotImport from "reactochart/XYPlot";
+import YAxisImport from "reactochart/YAxis";
+import YLineImport from "reactochart/YLine";
+const ColorHeatmap = resolveDefault(ColorHeatmapImport);
+const XAxis = resolveDefault(XAxisImport);
+const XLine = resolveDefault(XLineImport);
+const XYPlot = resolveDefault(XYPlotImport);
+const YAxis = resolveDefault(YAxisImport);
+const YLine = resolveDefault(YLineImport);
+export {
+  ColorHeatmap,
+  XAxis,
+  XLine,
+  XYPlot,
+  YAxis,
+  YLine
+};

package/dist/types/components/health-factor.d.ts

@@ -4,17 +4,15 @@ export declare const GOOD_HF = 15000;
 export declare const BAD_HF = 11000;
 /**
  * Determines the health factor zone based on the value
- * @param hf - Health factor value (in basis points if >= 1000, otherwise as decimal)
+ * @param hf - Health factor value in basis points (e.g., 15000 for 1.5)
  * @returns The health factor zone or undefined
  */
 export declare const getHFZones: (hf: number | bigint | undefined) => HFZones | undefined;
 export interface HealthFactorProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
-     * The health factor value
-     * Can be provided as:
-     * - Decimal value (e.g., 1.5 for 150%)
-     * - Basis points (e.g., 15000 for 150%)
-     * Values >= 1000 are treated as basis points, < 1000 as decimal
+     * The health factor value in basis points
+     * For example: 15000 for health factor 1.5, 500 for health factor 0.05
+     * (SDK always returns health factor in basis points: 10000 = 1.0)
      */
     value: number | bigint;
     /**
@@ -49,15 +47,13 @@ export interface HealthFactorProps extends React.HTMLAttributes<HTMLDivElement>
  *
  * @example
  * ```tsx
- * // Using decimal value
- * <HealthFactor value={1.5} debt={1000000n} />  // Shows "1.500" in green
- * <HealthFactor value={1.2} debt={1000000n} decimals={2} />  // Shows "1.20" in yellow
- *
- * // Using basis points
+ * // Health factor in basis points (SDK format)
  * <HealthFactor value={15000} debt={1000000n} />  // Shows "1.500" in green
+ * <HealthFactor value={12000} debt={1000000n} decimals={2} />  // Shows "1.20" in yellow
+ * <HealthFactor value={500} debt={1000000n} />  // Shows "0.050" in red
  *
  * // Zero debt shows N/A
- * <HealthFactor value={1.5} debt={0n} />  // Shows "N/A"
+ * <HealthFactor value={15000} debt={0n} />  // Shows "N/A"
  * ```
  */
 export declare function HealthFactor({ value, debt, decimals, zone, showColor, className, ...props }: HealthFactorProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/utils/reactochart-compat.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Compatibility layer for reactochart CommonJS modules in ESM context
+ * Handles the default export resolution for CommonJS modules
+ */
+import ColorHeatmapImport from "reactochart/ColorHeatmap";
+import XAxisImport from "reactochart/XAxis";
+import XLineImport from "reactochart/XLine";
+import XYPlotImport from "reactochart/XYPlot";
+import YAxisImport from "reactochart/YAxis";
+import YLineImport from "reactochart/YLine";
+export declare const ColorHeatmap: typeof ColorHeatmapImport;
+export declare const XAxis: typeof XAxisImport;
+export declare const XLine: typeof XLineImport;
+export declare const XYPlot: typeof XYPlotImport;
+export declare const YAxis: typeof YAxisImport;
+export declare const YLine: typeof YLineImport;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/permissionless-ui",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "description": "Internal UI components",
   "license": "MIT",
   "main": "./dist/cjs/index.js",
@@ -65,7 +65,6 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^9.0.3",
     "react-markdown-math": "^1.0.2",
-    "reactochart": "^6.1.1",
     "remark-gfm": "^4.0.0",
     "sonner": "^1.7.2",
     "tailwind-merge": "^2.6.0",
@@ -82,6 +81,7 @@
     "react-dom": "^18 || ^19",
     "react-intl": "^6.0.0 || ^7.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0",
+    "reactochart": "^6.1.1",
     "viem": "^2.0.0",
     "wagmi": "^2.0.0"
   },
@@ -122,6 +122,7 @@
     "react-dom": "^19.1.1",
     "react-intl": "^6.7.4",
     "react-router-dom": "^7.9.6",
+    "reactochart": "^6.1.1",
     "tailwindcss": "^4.1.14",
     "tsup": "^8.5.0",
     "typescript": "^5.9.3",