@gearbox-protocol/permissionless-ui 1.2.33 → 1.4.0

package/dist/cjs/components/layout/legal-disclaimer.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 legal_disclaimer_exports = {};
 __export(legal_disclaimer_exports, {
@@ -32,13 +22,13 @@ __export(legal_disclaimer_exports, {
 });
 module.exports = __toCommonJS(legal_disclaimer_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_link = __toESM(require("next/link"));
+var import_base_link = require('../base-link.js');
 function LegalDisclaimer({ hrefs }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
-      import_link.default,
+      import_base_link.BaseLink,
       {
         href: hrefs.termsOfService,
         className: "underline hover:text-foreground transition-colors",
@@ -49,7 +39,7 @@ function LegalDisclaimer({ hrefs }) {
     "and",
     " ",
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_link.default,
+      import_base_link.BaseLink,
       {
         href: hrefs.privacyNotice,
         className: "underline hover:text-foreground transition-colors",
@@ -59,7 +49,7 @@ function LegalDisclaimer({ hrefs }) {
     ", and acceptance of risks described in the",
     " ",
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_link.default,
+      import_base_link.BaseLink,
       {
         href: hrefs.riskDisclosure,
         className: "underline hover:text-foreground transition-colors",

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

@@ -0,0 +1,28 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var liquidation_exports = {};
+module.exports = __toCommonJS(liquidation_exports);
+__reExport(liquidation_exports, require('./liquidation-assets-table.js'), module.exports);
+__reExport(liquidation_exports, require('./liquidation-graph.js'), module.exports);
+__reExport(liquidation_exports, require('./liquidation-graph-legend.js'), module.exports);
+__reExport(liquidation_exports, require('./liquidation-graph-tip.js'), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require('./liquidation-assets-table.js'),
+  ...require('./liquidation-graph.js'),
+  ...require('./liquidation-graph-legend.js'),
+  ...require('./liquidation-graph-tip.js')
+});

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

@@ -0,0 +1,95 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var liquidation_assets_table_exports = {};
+__export(liquidation_assets_table_exports, {
+  LiquidationModellingAssetsTable: () => LiquidationModellingAssetsTable
+});
+module.exports = __toCommonJS(liquidation_assets_table_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_sdk = require("@gearbox-protocol/sdk");
+var import_react = require("react");
+var import_token_symbol = require('../token-symbol.js');
+var import_typed_intl = require('../typed-intl/index.js');
+const lineHeight = 51;
+function LiquidationModellingAssetsTable({
+  tokensList,
+  graphParams,
+  data,
+  prices,
+  editedPrices
+}) {
+  const { fixedBalances } = graphParams;
+  const fixedBalancesRecord = (0, import_react.useMemo)(() => {
+    return import_sdk.AssetUtils.constructAssetRecord(fixedBalances);
+  }, [fixedBalances]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-left text-sm font-medium text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typed_intl.FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.asset" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-right text-sm font-medium text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typed_intl.FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.currentPrice" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-right text-sm font-medium text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typed_intl.FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.modelPrice" }) })
+        ]
+      }
+    ),
+    data.map((c, num, arr) => {
+      const isLast = arr.length - 1 === num;
+      return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-left", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_token_symbol.TokenSymbol,
+              {
+                size: 24,
+                token: tokensList[c.token],
+                showSymbol: true,
+                maxLength: 8
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-right", children: [
+              "$",
+              formatPrice(prices[c.token])
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-right", children: fixedBalancesRecord[c.token] ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typed_intl.FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.seeGraph" }) }) : /* @__PURE__ */ (0, import_jsx_runtime.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(import_sdk.PRICE_DECIMALS)).toFixed(2);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LiquidationModellingAssetsTable
+});

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

@@ -0,0 +1,41 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var liquidation_graph_legend_exports = {};
+__export(liquidation_graph_legend_exports, {
+  LiquidationGraphLegend: () => LiquidationGraphLegend
+});
+module.exports = __toCommonJS(liquidation_graph_legend_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_typed_intl = require('../typed-intl/index.js');
+function LiquidationGraphLegend() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-center gap-8 w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-[9px] h-[9px] bg-white" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typed_intl.FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.graph.legend.point" }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-[9px] h-[9px] bg-[rgb(244,67,54)]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typed_intl.FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.graph.legend.area" }) })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LiquidationGraphLegend
+});

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

@@ -0,0 +1,93 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var liquidation_graph_tip_exports = {};
+__export(liquidation_graph_tip_exports, {
+  LiquidationGraphTip: () => LiquidationGraphTip
+});
+module.exports = __toCommonJS(liquidation_graph_tip_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_use_liquidation = require('../../hooks/use-liquidation/index.js');
+var import_health_factor = require('../health-factor.js');
+var import_short_string = require('../short-string.js');
+var import_token_symbol = require('../token-symbol.js');
+var import_typed_intl = require('../typed-intl/index.js');
+function LiquidationGraphTip({
+  activePointX,
+  activePointY,
+  xAxis,
+  yAxis,
+  hf,
+  underlyingToken,
+  maxLabelLength
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full justify-between items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      xAxis && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        PriceLine,
+        {
+          underlyingToken,
+          token: xAxis.label,
+          value: activePointX,
+          order: xAxis.order,
+          maxLabelLength
+        }
+      ) }),
+      yAxis && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        PriceLine,
+        {
+          underlyingToken,
+          token: yAxis.label,
+          value: activePointY,
+          order: yAxis.order,
+          maxLabelLength
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typed_intl.FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.graph.tip.hf" }),
+        ":"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_health_factor.HealthFactor, { value: hf, debt: 1n }) })
+    ] })
+  ] });
+}
+function PriceLine({
+  token,
+  underlyingToken,
+  value = 0,
+  order = "straight",
+  maxLabelLength = 13
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_token_symbol.TokenSymbol, { token, size: 12 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-sm text-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_short_string.ShortString, { maxLength: maxLabelLength, children: (0, import_use_liquidation.formatAxisTipLabel)(token, underlyingToken, order) }),
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typed_intl.FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.graph.tip.price" }),
+      ": ",
+      underlyingToken ? "" : "$",
+      (0, import_use_liquidation.formatAxisTipPrice)(value)
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LiquidationGraphTip
+});

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

@@ -0,0 +1,214 @@
+"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 liquidation_graph_exports = {};
+__export(liquidation_graph_exports, {
+  LiquidationGraph: () => LiquidationGraph
+});
+module.exports = __toCommonJS(liquidation_graph_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+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"));
+var import_use_hf = require('../../hooks/use-hf.js');
+var import_use_liquidation = require('../../hooks/use-liquidation/index.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 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 = import_use_liquidation.DEFAULT_AXIS_MIN,
+    max: xMax = import_use_liquidation.DEFAULT_AXIS_MAX,
+    label: xLabel,
+    order: xOrder = "straight",
+    nextOrder: nextOrderX
+  } = xAxis || {};
+  const {
+    min: yMin = import_use_liquidation.DEFAULT_AXIS_MIN,
+    max: yMax = import_use_liquidation.DEFAULT_AXIS_MAX,
+    label: yLabel,
+    order: yOrder = "straight",
+    nextOrder: nextOrderY
+  } = yAxis || {};
+  const heatmap = (0, import_use_liquidation.useLiquidationHeatmap)({
+    xMin,
+    xMax,
+    yMin,
+    yMax,
+    xLabel,
+    yLabel,
+    assets,
+    quotas,
+    prices,
+    liquidationThresholds,
+    underlyingTokenAddress,
+    debt,
+    quotasInfo,
+    tokensList
+  });
+  const { activePoint, handleMouseLeave, handleMouseMove } = (0, import_use_liquidation.useLiquidationGraphCurrentActiveValue)();
+  const [activePointX, activePointY] = activePoint || [];
+  const activePrices = (0, import_use_liquidation.useWithLiquidationGraphActivePrices)({
+    prices,
+    activePoint,
+    xLabel,
+    yLabel
+  });
+  const hf = (0, import_use_hf.useHF)({
+    quotas,
+    quotasInfo,
+    assets,
+    prices: activePrices,
+    liquidationThresholds,
+    underlyingToken: underlyingTokenAddress,
+    debt,
+    tokensList
+  });
+  const underlyingPrice = prices[underlyingTokenAddress] || 1n;
+  const underlyingToken = tokensList[underlyingTokenAddress];
+  const xRelative = (0, import_use_liquidation.useIsAxisInRelativeUnits)(xLabel, underlyingToken);
+  const yRelative = (0, import_use_liquidation.useIsAxisInRelativeUnits)(yLabel, underlyingToken);
+  const activePriceX = (0, import_use_liquidation.useLiquidationGraphActivePrice)(
+    activePointX || currentPoint[0],
+    underlyingPrice,
+    xRelative,
+    xOrder
+  );
+  const activePriceY = (0, import_use_liquidation.useLiquidationGraphActivePrice)(
+    activePointY || currentPoint[1],
+    underlyingPrice,
+    yRelative,
+    yOrder
+  );
+  const labelXFormatter = (0, import_react.useCallback)(
+    (0, import_use_liquidation.formatAxisLabel)(underlyingPrice, xRelative, xOrder),
+    []
+  );
+  const labelYFormatter = (0, import_react.useCallback)(
+    (0, import_use_liquidation.formatAxisLabel)(underlyingPrice, yRelative, yOrder),
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mx-auto", style: { width: `${width}px`, maxWidth: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_liquidation_graph_tip.LiquidationGraphTip,
+      {
+        underlyingToken,
+        hf: hf.hf,
+        xAxis,
+        yAxis,
+        activePointX: activePriceX,
+        activePointY: activePriceY,
+        maxLabelLength
+      }
+    ) }),
+    /* @__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)(
+      import_XYPlot.default,
+      {
+        width,
+        height,
+        xDomain: [xMin, xMax],
+        yDomain: [yMin, yMax],
+        onMouseMove: handleMouseMove,
+        onMouseLeave: handleMouseLeave,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_XAxis.default,
+            {
+              showLine: false,
+              title: (0, import_use_liquidation.formatAxisTipLabel)(xLabel, underlyingToken, xOrder),
+              titleAlign: "right",
+              tickCount: 5,
+              labelFormat: labelXFormatter,
+              showLabels: !!xLabel,
+              showTicks: !!xLabel,
+              onMouseClickAxis: nextOrderX,
+              nice: false
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_YAxis.default,
+            {
+              showLine: false,
+              title: (0, import_use_liquidation.formatAxisTipLabel)(yLabel, underlyingToken, yOrder),
+              titleAlign: "top",
+              tickCount: 5,
+              labelFormat: labelYFormatter,
+              showLabels: !!yLabel,
+              showTicks: !!yLabel,
+              onMouseClickAxis: nextOrderY,
+              nice: false
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ColorHeatmap.default,
+            {
+              data: heatmap,
+              value: (d) => d.value,
+              x: (d) => d.x,
+              xEnd: (d) => d.xEnd,
+              y: (d) => d.y,
+              yEnd: (d) => d.yEnd,
+              rectClassName: (p) => (0, import_use_liquidation.getCellClass)(p, currentPoint, activePointX, activePointY)
+            }
+          ),
+          activePointX !== void 0 && activePointX !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XLine.default, { value: activePointX, className: CROSSHAIR_X }),
+          activePointY !== void 0 && activePointY !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_YLine.default, { value: activePointY, className: CROSSHAIR_Y })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_vspace.VSpace, { height: 12 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_liquidation_graph_legend.LiquidationGraphLegend, {}) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LiquidationGraph
+});

package/dist/cjs/components/loader-guard.js

@@ -0,0 +1,47 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var loader_guard_exports = {};
+__export(loader_guard_exports, {
+  LoaderGuard: () => LoaderGuard
+});
+module.exports = __toCommonJS(loader_guard_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_guard = require('./guard.js');
+var import_layout = require('./layout/index.js');
+var import_skeleton = require('./skeleton.js');
+function LoaderGuard({
+  showGuard: show,
+  children,
+  loader
+}) {
+  const defaultLoader = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_layout.Container, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4 p-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: "h-8 w-64" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: "h-4 w-full" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: "h-4 w-full" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: "h-4 w-3/4" })
+    ] })
+  ] }) });
+  const showGuard = show;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_guard.Guard, { showGuard, guard: showGuard && (loader || defaultLoader), children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LoaderGuard
+});

package/dist/cjs/components/loading-guard.js

@@ -0,0 +1,55 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var loading_guard_exports = {};
+__export(loading_guard_exports, {
+  LoadingGuard: () => LoadingGuard
+});
+module.exports = __toCommonJS(loading_guard_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_layout = require('./layout/index.js');
+var import_skeleton = require('./skeleton.js');
+function LoadingGuard({
+  showGuard,
+  children,
+  fallback
+}) {
+  if (showGuard) {
+    if (fallback) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: fallback });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_layout.Container, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4 p-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: "h-8 w-64" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: "h-4 w-full" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: "h-4 w-full" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: "h-4 w-3/4" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-3 gap-4 mt-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: "h-32 w-full" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: "h-32 w-full" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: "h-32 w-full" })
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LoadingGuard
+});

package/dist/cjs/components/markdown-viewer.js

@@ -51,8 +51,10 @@ function getTextContent(children) {
   if (Array.isArray(children)) {
     return children.map(getTextContent).join("");
   }
-  if (children && typeof children === "object" && "props" in children) {
-    return getTextContent(children.props.children);
+  if (children && typeof children === "object" && "props" in children && typeof children.props === "object" && children.props !== null && "children" in children.props) {
+    return getTextContent(
+      children.props.children
+    );
   }
   return "";
 }