@gearbox-protocol/permissionless-ui 1.7.2 → 1.7.4

package/dist/cjs/components/layout/header/header.cjs

@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const utils_cn = require('../../../utils/cn.cjs');
+
+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,
+    logo,
+    actions,
+    fixed = false,
+    sticky = false,
+    containerClassName,
+    className,
+    children,
+    mobileMenuContent,
+    ...props
+  }, ref) => {
+    const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "header",
+      {
+        ref,
+        className: utils_cn.cn(
+          "relative w-full bg-background h-18 border-b flex flex-nowrap items-center border-border",
+          fixed && "fixed top-0 left-0 right-0 z-50",
+          sticky && "sticky top-0 z-50",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: utils_cn.cn(
+                "w-full h-full flex items-stretch justify-between mx-auto px-4 max-w-[1440px]",
+                containerClassName
+              ),
+              children: [
+                logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: logo }),
+                navigation && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex items-center", children: navigation }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex items-center gap-2", children: actions }),
+                  (navigation || mobileMenuContent) && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "md:hidden flex items-center justify-center p-2 rounded-md hover:bg-accent hover:text-accent-foreground focus:outline-none",
+                      onClick: () => setMobileMenuOpen(!mobileMenuOpen),
+                      "aria-label": mobileMenuOpen ? "Close menu" : "Open menu",
+                      children: mobileMenuOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-6 w-6" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "h-6 w-6" })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          mobileMenuOpen && (navigation || mobileMenuContent) && /* @__PURE__ */ jsxRuntime.jsx(
+            MobileMenuContext.Provider,
+            {
+              value: { closeMobileMenu: () => setMobileMenuOpen(false) },
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-full left-0 right-0 bg-background border-b border-border md:hidden z-40 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col px-4 py-4 space-y-2", children: [
+                mobileMenuContent || navigation,
+                actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 pt-4 border-t border-border mt-4", children: actions })
+              ] }) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Header.displayName = "Header";
+
+exports.Header = Header;
+exports.useMobileMenu = useMobileMenu;

package/dist/cjs/components/layout/header/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_layout_header_header = require('./header.cjs');
+
+
+
+exports.Header = components_layout_header_header.Header;
+exports.useMobileMenu = components_layout_header_header.useMobileMenu;

package/dist/cjs/components/layout/index.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_layout_appLogo_appLogo = require('./app-logo/app-logo.cjs');
+const components_layout_col_col = require('./col/col.cjs');
+const components_layout_container_container = require('./container/container.cjs');
+const components_layout_footer_footer = require('./footer/footer.cjs');
+const components_layout_grid_grid = require('./grid/grid.cjs');
+const components_layout_header_header = require('./header/header.cjs');
+const components_layout_layout_layout = require('./layout/layout.cjs');
+const components_layout_legalDisclaimer_legalDisclaimer = require('./legal-disclaimer/legal-disclaimer.cjs');
+const components_layout_pageLayout_pageLayout = require('./page-layout/page-layout.cjs');
+
+
+
+exports.AppLogo = components_layout_appLogo_appLogo.AppLogo;
+exports.Col = components_layout_col_col.Col;
+exports.Container = components_layout_container_container.Container;
+exports.Footer = components_layout_footer_footer.Footer;
+exports.FooterLink = components_layout_footer_footer.FooterLink;
+exports.FooterLinkSection = components_layout_footer_footer.FooterLinkSection;
+exports.GearboxFooter = components_layout_footer_footer.GearboxFooter;
+exports.Grid = components_layout_grid_grid.Grid;
+exports.Header = components_layout_header_header.Header;
+exports.useMobileMenu = components_layout_header_header.useMobileMenu;
+exports.Layout = components_layout_layout_layout.Layout;
+exports.LegalDisclaimer = components_layout_legalDisclaimer_legalDisclaimer.LegalDisclaimer;
+exports.PageLayout = components_layout_pageLayout_pageLayout.PageLayout;

package/dist/cjs/components/layout/layout/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_layout_layout_layout = require('./layout.cjs');
+
+
+
+exports.Layout = components_layout_layout_layout.Layout;

package/dist/cjs/components/layout/layout/layout.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const utils_cn = require('../../../utils/cn.cjs');
+
+const Layout = React.forwardRef(
+  ({ header, footer, children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: utils_cn.cn("grid min-h-screen grid-rows-[auto_1fr_auto]", className),
+        style: {
+          gridTemplateAreas: `
+            "header"
+            "main"
+            "footer"
+          `
+        },
+        ...props,
+        children: [
+          header && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { gridArea: "header" }, children: header }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "main",
+            {
+              className: "overflow-x-hidden py-6",
+              style: {
+                gridArea: "main",
+                backgroundColor: "hsl(var(--background))",
+                color: "hsl(var(--foreground))"
+              },
+              children
+            }
+          ),
+          footer && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { gridArea: "footer" }, children: footer })
+        ]
+      }
+    );
+  }
+);
+Layout.displayName = "Layout";
+
+exports.Layout = Layout;

package/dist/cjs/components/layout/legal-disclaimer/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_layout_legalDisclaimer_legalDisclaimer = require('./legal-disclaimer.cjs');
+
+
+
+exports.LegalDisclaimer = components_layout_legalDisclaimer_legalDisclaimer.LegalDisclaimer;

package/dist/cjs/components/layout/legal-disclaimer/legal-disclaimer.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const components_baseLink_baseLink = require('../../base-link/base-link.cjs');
+
+function LegalDisclaimer({ hrefs }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground max-w-md", children: [
+    "Any use of and/or interaction with the Permissionless Interface is subject to the",
+    " ",
+    /* @__PURE__ */ jsxRuntime.jsx(
+      components_baseLink_baseLink.BaseLink,
+      {
+        href: hrefs.termsOfService,
+        className: "underline hover:text-foreground transition-colors",
+        children: "Terms of Service"
+      }
+    ),
+    " ",
+    "and",
+    " ",
+    /* @__PURE__ */ jsxRuntime.jsx(
+      components_baseLink_baseLink.BaseLink,
+      {
+        href: hrefs.privacyNotice,
+        className: "underline hover:text-foreground transition-colors",
+        children: "Privacy Notice"
+      }
+    ),
+    ", and acceptance of risks described in the",
+    " ",
+    /* @__PURE__ */ jsxRuntime.jsx(
+      components_baseLink_baseLink.BaseLink,
+      {
+        href: hrefs.riskDisclosure,
+        className: "underline hover:text-foreground transition-colors",
+        children: "Risk Disclosure Statement"
+      }
+    ),
+    "."
+  ] });
+}
+
+exports.LegalDisclaimer = LegalDisclaimer;

package/dist/cjs/components/layout/page-layout/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_layout_pageLayout_pageLayout = require('./page-layout.cjs');
+
+
+
+exports.PageLayout = components_layout_pageLayout_pageLayout.PageLayout;

package/dist/cjs/components/layout/page-layout/page-layout.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const components_buttons_backButton_backButton = require('../../buttons/back-button/back-button.cjs');
+const components_layout_container_container = require('../container/container.cjs');
+
+function PageLayout({
+  children,
+  title,
+  description,
+  icon,
+  backButton,
+  actionButton,
+  maxContainerWidth = "xl",
+  containerClassName
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(components_layout_container_container.Container, { maxWidth: maxContainerWidth, className: containerClassName, children: [
+    backButton && /* @__PURE__ */ jsxRuntime.jsx(
+      components_buttons_backButton_backButton.BackButton,
+      {
+        href: backButton.href,
+        text: backButton.text,
+        onClick: backButton.onClick
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-4 mb-6 w-full", children: [
+      icon,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold", children: title }),
+          actionButton
+        ] }),
+        description
+      ] })
+    ] }),
+    children
+  ] });
+}
+
+exports.PageLayout = PageLayout;

package/dist/cjs/components/liquidation/index.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_liquidation_liquidationAssetsTable_liquidationAssetsTable = require('./liquidation-assets-table/liquidation-assets-table.cjs');
+const components_liquidation_liquidationGraph_liquidationGraph = require('./liquidation-graph/liquidation-graph.cjs');
+const components_liquidation_liquidationGraphLegend_liquidationGraphLegend = require('./liquidation-graph-legend/liquidation-graph-legend.cjs');
+const components_liquidation_liquidationGraphTip_liquidationGraphTip = require('./liquidation-graph-tip/liquidation-graph-tip.cjs');
+
+
+
+exports.LiquidationModellingAssetsTable = components_liquidation_liquidationAssetsTable_liquidationAssetsTable.LiquidationModellingAssetsTable;
+exports.LiquidationGraph = components_liquidation_liquidationGraph_liquidationGraph.LiquidationGraph;
+exports.LiquidationGraphLegend = components_liquidation_liquidationGraphLegend_liquidationGraphLegend.LiquidationGraphLegend;
+exports.LiquidationGraphTip = components_liquidation_liquidationGraphTip_liquidationGraphTip.LiquidationGraphTip;

package/dist/cjs/components/liquidation/liquidation-assets-table/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_liquidation_liquidationAssetsTable_liquidationAssetsTable = require('./liquidation-assets-table.cjs');
+
+
+
+exports.LiquidationModellingAssetsTable = components_liquidation_liquidationAssetsTable_liquidationAssetsTable.LiquidationModellingAssetsTable;

package/dist/cjs/components/liquidation/liquidation-assets-table/liquidation-assets-table.cjs

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const sdk = require('@gearbox-protocol/sdk');
+const React = require('react');
+const components_tokenSymbol_tokenSymbol = require('../../token-symbol/token-symbol.cjs');
+const components_typedIntl_index = require('../../typed-intl/index.cjs');
+
+const lineHeight = 51;
+function LiquidationModellingAssetsTable({
+  tokensList,
+  graphParams,
+  data,
+  prices,
+  editedPrices
+}) {
+  const { fixedBalances } = graphParams;
+  const fixedBalancesRecord = React.useMemo(() => {
+    return sdk.AssetUtils.constructAssetRecord(fixedBalances);
+  }, [fixedBalances]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "grid w-full px-4 gap-2 items-center h-[30px] relative after:absolute after:bottom-0 after:left-2 after:right-2 after:h-px after:border-b after:border-border",
+        style: { gridTemplateColumns: "1fr 1fr 1fr" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-left text-sm font-medium text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(components_typedIntl_index.FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.asset" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right text-sm font-medium text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(components_typedIntl_index.FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.currentPrice" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right text-sm font-medium text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(components_typedIntl_index.FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.modelPrice" }) })
+        ]
+      }
+    ),
+    data.map((c, num, arr) => {
+      const isLast = arr.length - 1 === num;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: `grid w-full px-4 gap-2 items-center relative ${isLast ? "" : "after:absolute after:bottom-0 after:left-2 after:right-2 after:h-px after:border-b after:border-border"}`,
+          style: {
+            gridTemplateColumns: "1fr 1fr 1fr",
+            height: `${lineHeight}px`
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-left", children: /* @__PURE__ */ jsxRuntime.jsx(
+              components_tokenSymbol_tokenSymbol.TokenSymbol,
+              {
+                size: 24,
+                token: tokensList[c.token],
+                showSymbol: true,
+                maxLength: 8
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-right", children: [
+              "$",
+              formatPrice(prices[c.token])
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: fixedBalancesRecord[c.token] ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(components_typedIntl_index.FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.seeGraph" }) }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [
+              "$",
+              formatPrice(editedPrices[c.token] || prices[c.token])
+            ] }) })
+          ]
+        },
+        c.token
+      );
+    })
+  ] });
+}
+function formatPrice(price) {
+  return (Number(price || 0n) / Number(sdk.PRICE_DECIMALS)).toFixed(2);
+}
+
+exports.LiquidationModellingAssetsTable = LiquidationModellingAssetsTable;

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

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_liquidation_liquidationGraph_liquidationGraph = require('./liquidation-graph.cjs');
+
+
+
+exports.LiquidationGraph = components_liquidation_liquidationGraph_liquidationGraph.LiquidationGraph;

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

@@ -0,0 +1,180 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const components_vspace_vspace = require('../../vspace/vspace.cjs');
+const hooks_useHf = require('../../../hooks/use-hf.cjs');
+const hooks_useLiquidation_index = require('../../../hooks/use-liquidation/index.cjs');
+const utils_reactochartCompat = require('../../../utils/reactochart-compat.cjs');
+const components_liquidation_liquidationGraphLegend_liquidationGraphLegend = require('../liquidation-graph-legend/liquidation-graph-legend.cjs');
+const components_liquidation_liquidationGraphTip_liquidationGraphTip = require('../liquidation-graph-tip/liquidation-graph-tip.cjs');
+const hooks_useLiquidation_utils = require('../../../hooks/use-liquidation/utils.cjs');
+
+const WIDTH = 300;
+const HEIGHT = 300;
+const CROSSHAIR_X = "rct-crosshair-x";
+const CROSSHAIR_Y = "rct-crosshair-y";
+function LiquidationGraph({
+  graphParams,
+  assets,
+  liquidationThresholds,
+  quotas,
+  quotasInfo,
+  underlyingToken: underlyingTokenAddress,
+  debt,
+  prices,
+  tokensList,
+  width = WIDTH,
+  height = HEIGHT,
+  maxLabelLength
+}) {
+  const { xAxis, yAxis, currentPoint } = graphParams;
+  const {
+    min: xMin = hooks_useLiquidation_utils.DEFAULT_AXIS_MIN,
+    max: xMax = hooks_useLiquidation_utils.DEFAULT_AXIS_MAX,
+    label: xLabel,
+    order: xOrder = "straight",
+    nextOrder: nextOrderX
+  } = xAxis || {};
+  const {
+    min: yMin = hooks_useLiquidation_utils.DEFAULT_AXIS_MIN,
+    max: yMax = hooks_useLiquidation_utils.DEFAULT_AXIS_MAX,
+    label: yLabel,
+    order: yOrder = "straight",
+    nextOrder: nextOrderY
+  } = yAxis || {};
+  const heatmap = hooks_useLiquidation_index.useLiquidationHeatmap({
+    xMin,
+    xMax,
+    yMin,
+    yMax,
+    xLabel,
+    yLabel,
+    assets,
+    quotas,
+    prices,
+    liquidationThresholds,
+    underlyingTokenAddress,
+    debt,
+    quotasInfo,
+    tokensList
+  });
+  const { activePoint, handleMouseLeave, handleMouseMove } = hooks_useLiquidation_utils.useLiquidationGraphCurrentActiveValue();
+  const [activePointX, activePointY] = activePoint || [];
+  const activePrices = hooks_useLiquidation_utils.useWithLiquidationGraphActivePrices({
+    prices,
+    activePoint,
+    xLabel,
+    yLabel
+  });
+  const hf = hooks_useHf.useHF({
+    quotas,
+    quotasInfo,
+    assets,
+    prices: activePrices,
+    liquidationThresholds,
+    underlyingToken: underlyingTokenAddress,
+    debt,
+    tokensList
+  });
+  const underlyingPrice = prices[underlyingTokenAddress] || 1n;
+  const underlyingToken = tokensList[underlyingTokenAddress];
+  const xRelative = hooks_useLiquidation_utils.useIsAxisInRelativeUnits(xLabel, underlyingToken);
+  const yRelative = hooks_useLiquidation_utils.useIsAxisInRelativeUnits(yLabel, underlyingToken);
+  const activePriceX = hooks_useLiquidation_utils.useLiquidationGraphActivePrice(
+    activePointX || currentPoint[0],
+    underlyingPrice,
+    xRelative,
+    xOrder
+  );
+  const activePriceY = hooks_useLiquidation_utils.useLiquidationGraphActivePrice(
+    activePointY || currentPoint[1],
+    underlyingPrice,
+    yRelative,
+    yOrder
+  );
+  const labelXFormatter = React.useCallback(
+    hooks_useLiquidation_utils.formatAxisLabel(underlyingPrice, xRelative, xOrder),
+    []
+  );
+  const labelYFormatter = React.useCallback(
+    hooks_useLiquidation_utils.formatAxisLabel(underlyingPrice, yRelative, yOrder),
+    []
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto", style: { width: `${width}px`, maxWidth: "100%" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+      components_liquidation_liquidationGraphTip_liquidationGraphTip.LiquidationGraphTip,
+      {
+        underlyingToken,
+        hf: hf.hf,
+        xAxis,
+        yAxis,
+        activePointX: activePriceX,
+        activePointY: activePriceY,
+        maxLabelLength
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(components_vspace_vspace.VSpace, { height: 16 }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full liquidation-graph-container", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      utils_reactochartCompat.XYPlot,
+      {
+        width,
+        height,
+        xDomain: [xMin, xMax],
+        yDomain: [yMin, yMax],
+        onMouseMove: handleMouseMove,
+        onMouseLeave: handleMouseLeave,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            utils_reactochartCompat.XAxis,
+            {
+              showLine: false,
+              title: hooks_useLiquidation_utils.formatAxisTipLabel(xLabel, underlyingToken, xOrder),
+              titleAlign: "right",
+              tickCount: 5,
+              labelFormat: labelXFormatter,
+              showLabels: !!xLabel,
+              showTicks: !!xLabel,
+              onMouseClickAxis: nextOrderX,
+              nice: false
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            utils_reactochartCompat.YAxis,
+            {
+              showLine: false,
+              title: hooks_useLiquidation_utils.formatAxisTipLabel(yLabel, underlyingToken, yOrder),
+              titleAlign: "top",
+              tickCount: 5,
+              labelFormat: labelYFormatter,
+              showLabels: !!yLabel,
+              showTicks: !!yLabel,
+              onMouseClickAxis: nextOrderY,
+              nice: false
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            utils_reactochartCompat.ColorHeatmap,
+            {
+              data: heatmap,
+              value: (d) => d.value,
+              x: (d) => d.x,
+              xEnd: (d) => d.xEnd,
+              y: (d) => d.y,
+              yEnd: (d) => d.yEnd,
+              rectClassName: (p) => hooks_useLiquidation_utils.getCellClass(p, currentPoint, activePointX, activePointY)
+            }
+          ),
+          activePointX !== void 0 && activePointX !== null && /* @__PURE__ */ jsxRuntime.jsx(utils_reactochartCompat.XLine, { value: activePointX, className: CROSSHAIR_X }),
+          activePointY !== void 0 && activePointY !== null && /* @__PURE__ */ jsxRuntime.jsx(utils_reactochartCompat.YLine, { value: activePointY, className: CROSSHAIR_Y })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(components_vspace_vspace.VSpace, { height: 12 }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(components_liquidation_liquidationGraphLegend_liquidationGraphLegend.LiquidationGraphLegend, {}) })
+  ] });
+}
+
+exports.LiquidationGraph = LiquidationGraph;

package/dist/cjs/components/liquidation/liquidation-graph-legend/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_liquidation_liquidationGraphLegend_liquidationGraphLegend = require('./liquidation-graph-legend.cjs');
+
+
+
+exports.LiquidationGraphLegend = components_liquidation_liquidationGraphLegend_liquidationGraphLegend.LiquidationGraphLegend;

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

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const components_typedIntl_index = require('../../typed-intl/index.cjs');
+
+function LiquidationGraphLegend() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-8 w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[9px] h-[9px] bg-white" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(components_typedIntl_index.FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.graph.legend.point" }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[9px] h-[9px] bg-[rgb(244,67,54)]" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(components_typedIntl_index.FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.graph.legend.area" }) })
+    ] })
+  ] });
+}
+
+exports.LiquidationGraphLegend = LiquidationGraphLegend;

package/dist/cjs/components/liquidation/liquidation-graph-tip/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_liquidation_liquidationGraphTip_liquidationGraphTip = require('./liquidation-graph-tip.cjs');
+
+
+
+exports.LiquidationGraphTip = components_liquidation_liquidationGraphTip_liquidationGraphTip.LiquidationGraphTip;