@gearbox-protocol/permissionless-ui 1.4.3 → 1.5.0

package/dist/cjs/components/buttons/button.js

@@ -38,7 +38,7 @@ var import_class_variance_authority = require("class-variance-authority");
 var React = __toESM(require("react"));
 var import_utils = __toESM(require('../../utils/index.js'));
 const buttonVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-transparent",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-transparent outline-none focus-visible:outline-none",
   {
     variants: {
       variant: {

package/dist/cjs/components/detailed-page-title.js

@@ -33,24 +33,28 @@ __export(detailed_page_title_exports, {
 module.exports = __toCommonJS(detailed_page_title_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_lucide_react = require("lucide-react");
+var React = __toESM(require("react"));
 var import_utils = __toESM(require('../utils/index.js'));
 var import_copy = require('../utils/copy.js');
 var import_button = require('./buttons/button.js');
 var import_dropdown_menu = require('./dropdown-menu/index.js');
 var import_page_title = require('./page-title.js');
 var import_token_icon = require('./token-icon.js');
+var import_typed_intl = require('./typed-intl/index.js');
 function DetailedPageTitle({
   title,
   token,
   toCopy,
   explorerLinks,
-  className,
-  onCopySuccess
+  className
 }) {
+  const intl = (0, import_typed_intl.useIntlTyped)();
+  const [isPressed, setIsPressed] = React.useState(false);
   const handleCopy = () => {
     if (toCopy) {
       (0, import_copy.copyToClipboard)({ text: toCopy });
-      onCopySuccess?.();
+      setIsPressed(true);
+      setTimeout(() => setIsPressed(false), 150);
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -65,6 +69,10 @@ function DetailedPageTitle({
             size: "icon",
             onClick: handleCopy,
             title: "Copy address",
+            className: (0, import_utils.default)(
+              "transition-all",
+              isPressed ? "scale-75" : "scale-100"
+            ),
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Copy, { className: "h-4 w-4" })
           }
         ),

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

@@ -61,8 +61,8 @@ const graphViewVariants = (0, import_class_variance_authority.cva)(
       padding: {
         none: "p-0",
         sm: "p-2",
-        default: "p-6",
-        lg: "p-8"
+        default: "p-4 sm:p-6",
+        lg: "p-6"
       }
     },
     defaultVariants: {

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

@@ -37,6 +37,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_lightweight_charts = require("lightweight-charts");
 var React = __toESM(require("react"));
 var import_react = require("react");
+var import_use_media_query = require('../../hooks/use-media-query.js');
 var import_cn = require('../../utils/cn.js');
 var import_colors = require('../../utils/colors.js');
 var import_default_config = require('./default-config.js');
@@ -100,6 +101,7 @@ function Graph({
   const chartRef = (0, import_react.useRef)(null);
   const seriesRefs = (0, import_react.useRef)(/* @__PURE__ */ new Map());
   const parentRef = (0, import_react.useRef)(null);
+  const isMobile = (0, import_use_media_query.useIsMobile)();
   const allPoints = React.useMemo(() => {
     return series.flatMap((s) => s.data);
   }, [series]);
@@ -145,7 +147,7 @@ function Graph({
     const hasZero = allPoints.some((p) => p.value === 0);
     const shouldPreventNegativeAxis = !hasNegativeValues && hasZero;
     const useMultiplePriceScales = series.length > 1;
-    const shouldHideScaleLabels = useMultiplePriceScales;
+    const shouldHideScaleLabels = useMultiplePriceScales || isMobile;
     const defaultOptions = (0, import_default_config.getDefaultOptions)();
     const chart = initChart(graphId, {
       ...defaultOptions,
@@ -166,6 +168,7 @@ function Graph({
       },
       rightPriceScale: {
         ...defaultOptions.rightPriceScale || {},
+        visible: !isMobile,
         ...shouldPreventNegativeAxis && {
           scaleMargins: {
             top: 0.3,
@@ -308,7 +311,8 @@ function Graph({
     xMeasureUnit,
     yMeasureUnit,
     optionsOverrides,
-    subscribeLegendMove
+    subscribeLegendMove,
+    isMobile
   ]);
   (0, import_react.useEffect)(() => {
     const ch = chartRef.current;

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/layout/header.js

@@ -28,13 +28,24 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var header_exports = {};
 __export(header_exports, {
-  Header: () => Header
+  Header: () => Header,
+  useMobileMenu: () => useMobileMenu
 });
 module.exports = __toCommonJS(header_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_lucide_react = require("lucide-react");
 var import_react = __toESM(require("react"));
 var import_cn = require('../../utils/cn.js');
+const MobileMenuContext = import_react.default.createContext(
+  null
+);
+function useMobileMenu() {
+  const context = import_react.default.useContext(MobileMenuContext);
+  if (!context) {
+    throw new Error("useMobileMenu must be used within Header component");
+  }
+  return context;
+}
 const Header = import_react.default.forwardRef(
   ({
     navigation,
@@ -87,10 +98,16 @@ const Header = import_react.default.forwardRef(
               ]
             }
           ),
-          mobileMenuOpen && (navigation || mobileMenuContent) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute top-full left-0 right-0 bg-background border-b border-border md:hidden z-40 shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col px-4 py-4 space-y-2", children: [
-            mobileMenuContent || navigation,
-            actions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-2 pt-4 border-t border-border mt-4", children: actions })
-          ] }) })
+          mobileMenuOpen && (navigation || mobileMenuContent) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            MobileMenuContext.Provider,
+            {
+              value: { closeMobileMenu: () => setMobileMenuOpen(false) },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute top-full left-0 right-0 bg-background border-b border-border md:hidden z-40 shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col px-4 py-4 space-y-2", children: [
+                mobileMenuContent || navigation,
+                actions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-2 pt-4 border-t border-border mt-4", children: actions })
+              ] }) })
+            }
+          )
         ]
       }
     );
@@ -99,5 +116,6 @@ const Header = import_react.default.forwardRef(
 Header.displayName = "Header";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Header
+  Header,
+  useMobileMenu
 });

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/components/navitem.js

@@ -43,11 +43,11 @@ const navitemVariants = (0, import_class_variance_authority.cva)(
   {
     variants: {
       variant: {
-        default: "text-decoration-none text-foreground hover:text-foreground hover:bg-secondary",
-        active: "text-foreground",
-        ghost: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-secondary",
-        link: "text-decoration-none text-muted-foreground hover:text-foreground underline-offset-4 hover:underline",
-        pill: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-accent rounded-full",
+        default: "text-decoration-none text-foreground hover:text-foreground hover:bg-secondary data-[active=true]:bg-secondary md:data-[active=true]:bg-transparent data-[active=true]:text-foreground",
+        active: "text-foreground bg-secondary",
+        ghost: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-secondary data-[active=true]:bg-secondary md:data-[active=true]:bg-transparent data-[active=true]:text-foreground",
+        link: "text-decoration-none text-muted-foreground hover:text-foreground underline-offset-4 hover:underline data-[active=true]:text-foreground data-[active=true]:underline",
+        pill: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-accent rounded-full data-[active=true]:bg-accent data-[active=true]:text-foreground",
         tab: "text-decoration-none text-muted-foreground hover:text-foreground border-b-2 border-transparent hover:border-border data-[active=true]:border-primary data-[active=true]:text-foreground rounded-none"
       },
       size: {

package/dist/cjs/components/table/table-sm.js

@@ -63,7 +63,7 @@ function TableLineSm({
     "div",
     {
       className: (0, import_utils.default)(
-        "flex flex-col gap-3 p-4 border-b border-border",
+        "flex flex-col gap-3 py-3 px-0 md:px-4 border-b border-border",
         className
       ),
       ...props,
@@ -72,7 +72,7 @@ function TableLineSm({
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
-            className: "grid gap-4 table-sm-grid",
+            className: "grid gap-2 md:gap-4 table-sm-grid",
             style: {
               "--grid-cols-xs": colsXs,
               "--grid-cols-sm": colsSm,

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/buttons/button.js

@@ -4,7 +4,7 @@ import { cva } from "class-variance-authority";
 import * as React from "react";
 import cn from "../../utils/index.js";
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-transparent",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-transparent outline-none focus-visible:outline-none",
   {
     variants: {
       variant: {

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

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Copy, ExternalLink } from "lucide-react";
+import * as React from "react";
 import cn from "../utils/index.js";
 import { copyToClipboard } from "../utils/copy.js";
 import { Button } from "./buttons/button.js";
@@ -11,18 +12,21 @@ import {
 } from "./dropdown-menu/index.js";
 import { PageTitle } from "./page-title.js";
 import { TokenIcon } from "./token-icon.js";
+import { useIntlTyped } from "./typed-intl/index.js";
 function DetailedPageTitle({
   title,
   token,
   toCopy,
   explorerLinks,
-  className,
-  onCopySuccess
+  className
 }) {
+  const intl = useIntlTyped();
+  const [isPressed, setIsPressed] = React.useState(false);
   const handleCopy = () => {
     if (toCopy) {
       copyToClipboard({ text: toCopy });
-      onCopySuccess?.();
+      setIsPressed(true);
+      setTimeout(() => setIsPressed(false), 150);
     }
   };
   return /* @__PURE__ */ jsx(
@@ -37,6 +41,10 @@ function DetailedPageTitle({
             size: "icon",
             onClick: handleCopy,
             title: "Copy address",
+            className: cn(
+              "transition-all",
+              isPressed ? "scale-75" : "scale-100"
+            ),
             children: /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" })
           }
         ),

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

@@ -25,8 +25,8 @@ const graphViewVariants = cva(
       padding: {
         none: "p-0",
         sm: "p-2",
-        default: "p-6",
-        lg: "p-8"
+        default: "p-4 sm:p-6",
+        lg: "p-6"
       }
     },
     defaultVariants: {

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

@@ -3,6 +3,7 @@ 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 {
@@ -70,6 +71,7 @@ function Graph({
   const chartRef = useRef(null);
   const seriesRefs = useRef(/* @__PURE__ */ new Map());
   const parentRef = useRef(null);
+  const isMobile = useIsMobile();
   const allPoints = React.useMemo(() => {
     return series.flatMap((s) => s.data);
   }, [series]);
@@ -115,7 +117,7 @@ function Graph({
     const hasZero = allPoints.some((p) => p.value === 0);
     const shouldPreventNegativeAxis = !hasNegativeValues && hasZero;
     const useMultiplePriceScales = series.length > 1;
-    const shouldHideScaleLabels = useMultiplePriceScales;
+    const shouldHideScaleLabels = useMultiplePriceScales || isMobile;
     const defaultOptions = getDefaultOptions();
     const chart = initChart(graphId, {
       ...defaultOptions,
@@ -136,6 +138,7 @@ function Graph({
       },
       rightPriceScale: {
         ...defaultOptions.rightPriceScale || {},
+        visible: !isMobile,
         ...shouldPreventNegativeAxis && {
           scaleMargins: {
             top: 0.3,
@@ -278,7 +281,8 @@ function Graph({
     xMeasureUnit,
     yMeasureUnit,
     optionsOverrides,
-    subscribeLegendMove
+    subscribeLegendMove,
+    isMobile
   ]);
   useEffect(() => {
     const ch = chartRef.current;

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/layout/header.js

@@ -2,6 +2,16 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu, X } from "lucide-react";
 import React from "react";
 import { cn } from "../../utils/cn.js";
+const MobileMenuContext = React.createContext(
+  null
+);
+function useMobileMenu() {
+  const context = React.useContext(MobileMenuContext);
+  if (!context) {
+    throw new Error("useMobileMenu must be used within Header component");
+  }
+  return context;
+}
 const Header = React.forwardRef(
   ({
     navigation,
@@ -54,10 +64,16 @@ const Header = React.forwardRef(
               ]
             }
           ),
-          mobileMenuOpen && (navigation || mobileMenuContent) && /* @__PURE__ */ jsx("div", { className: "absolute top-full left-0 right-0 bg-background border-b border-border md:hidden z-40 shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-4 py-4 space-y-2", children: [
-            mobileMenuContent || navigation,
-            actions && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 pt-4 border-t border-border mt-4", children: actions })
-          ] }) })
+          mobileMenuOpen && (navigation || mobileMenuContent) && /* @__PURE__ */ jsx(
+            MobileMenuContext.Provider,
+            {
+              value: { closeMobileMenu: () => setMobileMenuOpen(false) },
+              children: /* @__PURE__ */ jsx("div", { className: "absolute top-full left-0 right-0 bg-background border-b border-border md:hidden z-40 shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-4 py-4 space-y-2", children: [
+                mobileMenuContent || navigation,
+                actions && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 pt-4 border-t border-border mt-4", children: actions })
+              ] }) })
+            }
+          )
         ]
       }
     );
@@ -65,5 +81,6 @@ const Header = React.forwardRef(
 );
 Header.displayName = "Header";
 export {
-  Header
+  Header,
+  useMobileMenu
 };

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/components/navitem.js

@@ -9,11 +9,11 @@ const navitemVariants = cva(
   {
     variants: {
       variant: {
-        default: "text-decoration-none text-foreground hover:text-foreground hover:bg-secondary",
-        active: "text-foreground",
-        ghost: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-secondary",
-        link: "text-decoration-none text-muted-foreground hover:text-foreground underline-offset-4 hover:underline",
-        pill: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-accent rounded-full",
+        default: "text-decoration-none text-foreground hover:text-foreground hover:bg-secondary data-[active=true]:bg-secondary md:data-[active=true]:bg-transparent data-[active=true]:text-foreground",
+        active: "text-foreground bg-secondary",
+        ghost: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-secondary data-[active=true]:bg-secondary md:data-[active=true]:bg-transparent data-[active=true]:text-foreground",
+        link: "text-decoration-none text-muted-foreground hover:text-foreground underline-offset-4 hover:underline data-[active=true]:text-foreground data-[active=true]:underline",
+        pill: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-accent rounded-full data-[active=true]:bg-accent data-[active=true]:text-foreground",
         tab: "text-decoration-none text-muted-foreground hover:text-foreground border-b-2 border-transparent hover:border-border data-[active=true]:border-primary data-[active=true]:text-foreground rounded-none"
       },
       size: {

package/dist/esm/components/table/table-sm.js

@@ -29,7 +29,7 @@ function TableLineSm({
     "div",
     {
       className: cn(
-        "flex flex-col gap-3 p-4 border-b border-border",
+        "flex flex-col gap-3 py-3 px-0 md:px-4 border-b border-border",
         className
       ),
       ...props,
@@ -38,7 +38,7 @@ function TableLineSm({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "grid gap-4 table-sm-grid",
+            className: "grid gap-2 md:gap-4 table-sm-grid",
             style: {
               "--grid-cols-xs": colsXs,
               "--grid-cols-sm": colsSm,

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/detailed-page-title.d.ts

@@ -1,5 +1,5 @@
 import type { TokenData } from "@gearbox-protocol/sdk";
-import type * as React from "react";
+import * as React from "react";
 export interface ExplorerLink {
     link: string;
     label: string;
@@ -10,7 +10,6 @@ export interface DetailedPageTitleProps {
     toCopy?: string;
     explorerLinks?: Array<ExplorerLink>;
     className?: string;
-    onCopySuccess?: () => void;
 }
 /**
  * DetailedPageTitle - page title with token icon, copy functionality, and explorer links
@@ -28,4 +27,4 @@ export interface DetailedPageTitleProps {
  * />
  * ```
  */
-export declare function DetailedPageTitle({ title, token, toCopy, explorerLinks, className, onCopySuccess, }: DetailedPageTitleProps): React.ReactElement;
+export declare function DetailedPageTitle({ title, token, toCopy, explorerLinks, className, }: DetailedPageTitleProps): React.ReactElement;

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/components/layout/header.d.ts

@@ -1,4 +1,25 @@
 import React from "react";
+interface MobileMenuContextValue {
+    closeMobileMenu: () => void;
+}
+/**
+ * Hook to access mobile menu control functions
+ * Use this hook inside mobileMenuContent to close the menu on navigation
+ *
+ * @example
+ * ```tsx
+ * function MobileNav() {
+ *   const { closeMobileMenu } = useMobileMenu();
+ *
+ *   return (
+ *     <nav>
+ *       <a href="/" onClick={closeMobileMenu}>Home</a>
+ *     </nav>
+ *   );
+ * }
+ * ```
+ */
+export declare function useMobileMenu(): MobileMenuContextValue;
 export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Navigation content (shown on desktop, hidden on mobile unless specified)
@@ -79,3 +100,4 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
  * ```
  */
 export declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;
+export {};

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.5.0",
   "description": "Internal UI components",
   "license": "MIT",
   "main": "./dist/cjs/index.js",
@@ -65,9 +65,8 @@
     "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",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7"
   },
@@ -82,6 +81,8 @@
     "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",
+    "sonner": "^2.0.0",
     "viem": "^2.0.0",
     "wagmi": "^2.0.0"
   },
@@ -94,6 +95,9 @@
     },
     "react-router-dom": {
       "optional": true
+    },
+    "sonner": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -122,6 +126,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",