@gearbox-protocol/permissionless-ui 1.2.33 → 1.4.0

package/dist/esm/hooks/use-liquidation/utils.js

@@ -0,0 +1,215 @@
+import {
+  formatBN,
+  PERCENTAGE_FACTOR,
+  PRICE_DECIMALS_POW,
+  toBN
+} from "@gearbox-protocol/sdk";
+import { useCallback, useMemo, useState } from "react";
+import { bnToInputView } from "../../utils/bn-to-input-view.js";
+const CELL_HOVERED = "rct-chart__heatmap-cell--hovered";
+const CELL_CURRENT = "rct-chart__heatmap-cell--current";
+const CELL_GOOD = "rct-chart__heatmap-cell--good";
+const CELL_OK = "rct-chart__heatmap-cell--ok";
+const CELL_BAD = "rct-chart__heatmap-cell--bad";
+const CELL_LIQUIDATION = "rct-chart__heatmap-cell--liquidation";
+const DEFAULT_AXIS_MIN = 0;
+const DEFAULT_AXIS_MAX = 1;
+function useAxis({
+  token,
+  currentPrice
+}) {
+  const [order, setOrder] = useState("straight");
+  const nextOrder = useCallback(() => {
+    setOrder(order === "straight" ? "reverse" : "straight");
+  }, [order]);
+  const boundaries = useMemo(() => {
+    return currentPrice !== void 0 ? {
+      min: 0,
+      max: currentPrice * 1.5,
+      minHf: Number(PERCENTAGE_FACTOR)
+    } : void 0;
+  }, [currentPrice]);
+  const r = useMemo(() => {
+    return boundaries !== void 0 && token !== void 0 ? {
+      ...boundaries,
+      label: token,
+      nextOrder,
+      order
+    } : void 0;
+  }, [boundaries, token, nextOrder, order]);
+  return r;
+}
+function useFixedAssets({
+  assets,
+  liquidationThresholds,
+  quotas,
+  quotasInfo,
+  at = 0,
+  length = 2
+}) {
+  const b = useMemo(() => {
+    const copy = [...assets].filter((a) => {
+      const lt = liquidationThresholds[a.token] || 0n;
+      const qInfo = quotasInfo[a.token];
+      const qBalance = quotas[a.token]?.balance || 0n;
+      if (!qInfo) return lt > 0;
+      if (!qInfo.isActive) return false;
+      return lt > 0 && qBalance > 0;
+    });
+    const fixed = copy.splice(at, length);
+    return [fixed, copy];
+  }, [assets, liquidationThresholds, quotas, quotasInfo, at, length]);
+  return b;
+}
+const EMPTY_ADDRESS = "0x0000000000000000000000000000000000000000";
+function usePriceInNumber({
+  asset,
+  tokensList,
+  prices
+}) {
+  const r = useMemo(() => {
+    const price = prices[asset?.token || EMPTY_ADDRESS];
+    const token = tokensList[asset?.token || EMPTY_ADDRESS];
+    const priceNum = price ? Number(bnToInputView(price, 8)) : void 0;
+    return [priceNum, token];
+  }, [asset, tokensList, prices]);
+  return r;
+}
+function useIsAxisInRelativeUnits(axis, underlying) {
+  const r = useMemo(() => {
+    return !!axis && !!underlying && axis.address !== underlying.address;
+  }, [axis, underlying]);
+  return r;
+}
+const DECIMALS = 2;
+const MIN_NON_EXP = 1 / 10 ** DECIMALS;
+const MAX_SMALL_DECIMALS = 6;
+function formatAxisTipPrice(v) {
+  if (!Number.isFinite(v)) return "\u221E";
+  if (v < MIN_NON_EXP && v !== 0) {
+    const formatted = v.toFixed(MAX_SMALL_DECIMALS);
+    return formatted.replace(/\.?0+$/, "");
+  }
+  if (v > 1) return formatBN(toBN(v.toString(), DECIMALS), DECIMALS);
+  return v.toFixed(DECIMALS);
+}
+function formatAxisTipLabel(token, underlyingToken, order) {
+  const [t, u] = order === "straight" ? [token, underlyingToken] : [underlyingToken, token];
+  if (!token) return "";
+  return [
+    ...t ? [t.title] : [],
+    ...u && t && u.address !== t.address ? [u.title] : []
+  ].join("/");
+}
+function formatAxisLabel(underlyingPrice, isRelative, order = "straight") {
+  return (l = 0) => isRelative && underlyingPrice ? formatAxisTipPrice(
+    order === "straight" ? priceInPercent(l, underlyingPrice) : priceInPercent(underlyingPrice, l)
+  ) : `$${formatBN(
+    toBN(String(l), PRICE_DECIMALS_POW),
+    PRICE_DECIMALS_POW,
+    1
+  )}`;
+}
+function priceInPercent(price, base) {
+  const p = typeof price === "bigint" ? Number(bnToInputView(price, PRICE_DECIMALS_POW)) : price;
+  const b = typeof base === "bigint" ? Number(bnToInputView(base, PRICE_DECIMALS_POW)) : base;
+  return p / b;
+}
+function useLiquidationGraphActivePrice(activePoint, underlyingPrice, isRelative, order = "straight") {
+  const activePrice = useMemo(() => {
+    return underlyingPrice && isRelative ? order === "straight" ? priceInPercent(activePoint, underlyingPrice) : priceInPercent(underlyingPrice, activePoint) : activePoint;
+  }, [activePoint, underlyingPrice, order, isRelative]);
+  return activePrice;
+}
+function useLiquidationGraphCurrentActiveValue() {
+  const [activePoint, setActiveX] = useState(null);
+  const handleMouseMove = ({
+    xValue,
+    yValue
+  }) => {
+    setActiveX([
+      xValue === null ? void 0 : xValue,
+      yValue === null ? void 0 : yValue
+    ]);
+  };
+  const handleMouseLeave = () => {
+    setActiveX(null);
+  };
+  return {
+    activePoint,
+    handleMouseMove,
+    handleMouseLeave
+  };
+}
+function useWithLiquidationGraphActivePrices({
+  xLabel,
+  yLabel,
+  activePoint,
+  prices
+}) {
+  const [activePointX, activePointY] = activePoint || [];
+  const r = useMemo(() => {
+    return {
+      ...prices,
+      ...xLabel && activePointX ? { [xLabel.address]: toBN(String(activePointX), PRICE_DECIMALS_POW) } : {},
+      ...yLabel && activePointY ? { [yLabel.address]: toBN(String(activePointY), PRICE_DECIMALS_POW) } : {}
+    };
+  }, [prices, xLabel, yLabel, activePointX, activePointY]);
+  return r;
+}
+function isPointInCell(p, c) {
+  return p[0] >= c.x && p[0] <= c.xEnd && p[1] >= c.y && p[1] <= c.yEnd;
+}
+const GOOD_HF = 15e3;
+const BAD_HF = 11e3;
+const CRITICAL_HF = 10500;
+function getHFZones(hf) {
+  if (hf >= GOOD_HF) return "good";
+  if (hf > BAD_HF) return "medium";
+  if (hf > CRITICAL_HF) return "bad";
+  if (hf > PERCENTAGE_FACTOR) return "critical";
+  return "liquidation";
+}
+function getCellClass(p, currentPoint, activePointX, activePointY) {
+  const classes = [];
+  const z = getHFZones(p.value);
+  const isCurrentCell = isPointInCell(currentPoint, p);
+  const isHoveredCell = activePointX !== void 0 && activePointY !== void 0 ? isPointInCell([activePointX, activePointY], p) : false;
+  if (isHoveredCell) {
+    classes.push(CELL_HOVERED);
+  }
+  if (isCurrentCell) {
+    classes.push(CELL_CURRENT);
+  } else if (z === "good") {
+    classes.push(CELL_GOOD);
+  } else if (z === "medium") {
+    classes.push(CELL_OK);
+  } else if (z === "bad" || z === "critical") {
+    classes.push(CELL_BAD);
+  } else {
+    classes.push(CELL_LIQUIDATION);
+  }
+  return classes.join(" ");
+}
+export {
+  CELL_BAD,
+  CELL_CURRENT,
+  CELL_GOOD,
+  CELL_HOVERED,
+  CELL_LIQUIDATION,
+  CELL_OK,
+  DEFAULT_AXIS_MAX,
+  DEFAULT_AXIS_MIN,
+  formatAxisLabel,
+  formatAxisTipLabel,
+  formatAxisTipPrice,
+  getCellClass,
+  isPointInCell,
+  useAxis,
+  useFixedAssets,
+  useIsAxisInRelativeUnits,
+  useLiquidationGraphActivePrice,
+  useLiquidationGraphCurrentActiveValue,
+  usePriceInNumber,
+  useWithLiquidationGraphActivePrices
+};

package/dist/esm/hooks/use-media-query.js

@@ -0,0 +1,24 @@
+"use client";
+import { useEffect, useState } from "react";
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => setMatches(media.matches);
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [matches, query]);
+  return matches;
+}
+const useIsMobile = () => useMediaQuery("(max-width: 768px)");
+const useIsTablet = () => useMediaQuery("(min-width: 768px) and (max-width: 1024px)");
+const useIsDesktop = () => useMediaQuery("(min-width: 1024px)");
+export {
+  useIsDesktop,
+  useIsMobile,
+  useIsTablet,
+  useMediaQuery
+};

package/dist/esm/hooks/use-previous.js

@@ -0,0 +1,12 @@
+"use client";
+import { useEffect, useRef } from "react";
+function usePrevious(value) {
+  const ref = useRef(void 0);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+export {
+  usePrevious
+};

package/dist/esm/index.js

@@ -1,2 +1,85 @@
-export * from "./components/index.js";
+export * from "./components/alert-dialog.js";
+export * from "./components/asset-line.js";
+export * from "./components/assets-list-cell.js";
+export * from "./components/assets-ratio.js";
+export * from "./components/auth/index.js";
+export * from "./components/badge.js";
+export * from "./components/base-link.js";
+export * from "./components/block-sync.js";
+export * from "./components/breadcrumbs.js";
+export * from "./components/buttons/index.js";
+export * from "./components/card-grid.js";
+export * from "./components/cards/index.js";
+export * from "./components/checkbox.js";
+export * from "./components/compound-apy.js";
+export * from "./components/credit-session-status.js";
+export * from "./components/description.js";
+export * from "./components/detailed-page-title.js";
+export * from "./components/dialog/index.js";
+export * from "./components/dropdown-menu/index.js";
+export * from "./components/error-message.js";
+export * from "./components/filter/index.js";
+export * from "./components/form/index.js";
+export * from "./components/graph/index.js";
+export * from "./components/guard.js";
+export * from "./components/health-factor.js";
+export * from "./components/help-center-container.js";
+export * from "./components/hide-on.js";
+export * from "./components/horizontal-indicator.js";
+export * from "./components/input.js";
+export * from "./components/label.js";
+export * from "./components/layout/index.js";
+export * from "./components/liquidation/index.js";
+export * from "./components/loader-guard.js";
+export * from "./components/loading-guard.js";
+export * from "./components/markdown-viewer.js";
+export * from "./components/navbar.js";
+export * from "./components/navitem.js";
+export * from "./components/not-found.js";
+export * from "./components/options-list.js";
+export * from "./components/page-title.js";
+export * from "./components/percent-indicator.js";
+export * from "./components/pool-points-indicator.js";
+export * from "./components/search-bar.js";
+export * from "./components/search-line.js";
+export * from "./components/select.js";
+export * from "./components/short-string.js";
+export * from "./components/signatures/index.js";
+export * from "./components/skeleton.js";
+export * from "./components/stat-badge.js";
+export * from "./components/tab-control.js";
+export * from "./components/table/index.js";
+export * from "./components/tabs.js";
+export * from "./components/textarea.js";
+export * from "./components/theme-provider.js";
+export * from "./components/theme-toggle.js";
+export * from "./components/token-icon.js";
+export * from "./components/token-symbol.js";
+export * from "./components/tooltip.js";
+export * from "./components/typed-intl/index.js";
+export * from "./components/vspace.js";
+export * from "./components/with-filter-button.js";
+export * from "./configs/design-tokens.js";
+export * from "./configs/variants.js";
+export * from "./hooks/index.js";
 export * from "./utils/index.js";
+export * from "./utils/a11y.js";
+import { cn } from "./utils/cn.js";
+export * from "./utils/copy.js";
+export * from "./utils/format.js";
+import {
+  formatMoney,
+  formatPercentAmount,
+  PERCENTAGE_FACTOR,
+  percentageTemplate,
+  percentTemplate
+} from "./utils/format-money.js";
+export * from "./utils/templates.js";
+export {
+  PERCENTAGE_FACTOR,
+  cn,
+  formatMoney,
+  formatPercentAmount,
+  percentTemplate,
+  percentageTemplate
+};

package/dist/esm/utils/a11y.js

@@ -0,0 +1,14 @@
+import { useId } from "react";
+function generateId(prefix) {
+  return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
+}
+function useFormFieldIds(_name) {
+  const inputId = useId();
+  const errorId = `${inputId}-error`;
+  const helperId = `${inputId}-helper`;
+  return { inputId, errorId, helperId };
+}
+export {
+  generateId,
+  useFormFieldIds
+};

package/dist/esm/utils/bn-to-input-view.js

@@ -0,0 +1,36 @@
+const applyPrecision = (num, decimals, precision) => {
+  if (precision === void 0) return num;
+  const pr = Math.max(0, Math.min(decimals, precision));
+  const prD = decimals - pr;
+  return num / 10n ** BigInt(prD) * 10n ** BigInt(prD);
+};
+function removeTrailingZeros(numStr) {
+  const removeZeros = /\.0*$|(\.\d*[1-9])0+$/gm;
+  const withoutZeros = numStr.replace(removeZeros, "$1");
+  return withoutZeros;
+}
+function bnWithDecimals(num, decimals) {
+  const numStr = num.toString();
+  const numLength = numStr.length;
+  if (numLength <= decimals) {
+    const missingZeros = "0".repeat(decimals - numLength);
+    return `0.${missingZeros}${numStr}`;
+  }
+  const pointPlace = numLength - decimals;
+  const integerPart = numStr.slice(0, pointPlace);
+  const decimalPart = numStr.slice(pointPlace, numLength);
+  return `${integerPart}.${decimalPart}`;
+}
+function bnToInputView(number, decimals, allowNegative = false, precision) {
+  const n = applyPrecision(number, decimals, precision);
+  if (n < 0 && !allowNegative) {
+    return "";
+  }
+  if (n < 0 && allowNegative) {
+    return removeTrailingZeros(bnWithDecimals(n, decimals));
+  }
+  return removeTrailingZeros(bnWithDecimals(n, decimals));
+}
+export {
+  bnToInputView
+};

package/dist/esm/utils/colors.js

@@ -0,0 +1,69 @@
+function resolveCSSColor(color, fallback = "#000000") {
+  if (!color.includes("var(")) {
+    return color;
+  }
+  try {
+    const tempElement = document.createElement("div");
+    tempElement.style.color = color;
+    tempElement.style.display = "none";
+    document.body.appendChild(tempElement);
+    const computedColor = window.getComputedStyle(tempElement).color;
+    document.body.removeChild(tempElement);
+    if (computedColor && computedColor !== "rgba(0, 0, 0, 0)") {
+      return computedColor;
+    }
+  } catch (error) {
+    console.warn(`Failed to resolve CSS color: ${color}`, error);
+  }
+  return fallback;
+}
+function getCSSVariable(variableName, fallback = "#000000") {
+  const name = variableName.startsWith("--") ? variableName : `--${variableName}`;
+  try {
+    const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+    if (value) {
+      if (/^[\d\s.%]+$/.test(value)) {
+        return `hsl(${value})`;
+      }
+      return value;
+    }
+  } catch (error) {
+    console.warn(`Failed to get CSS variable: ${name}`, error);
+  }
+  return fallback;
+}
+function hexToRgba(hex, alpha) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function generateColorsFromBase(color) {
+  if (color.startsWith("rgba")) {
+    const rgbaMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    if (rgbaMatch) {
+      const [, r, g, b] = rgbaMatch;
+      return {
+        topColor: `rgba(${r}, ${g}, ${b}, 0.56)`,
+        bottomColor: `rgba(${r}, ${g}, ${b}, 0.04)`
+      };
+    }
+  }
+  if (color.startsWith("#") && (color.length === 7 || color.length === 4)) {
+    const fullHex = color.length === 4 ? `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}` : color;
+    return {
+      topColor: hexToRgba(fullHex, 0.56),
+      bottomColor: hexToRgba(fullHex, 0.04)
+    };
+  }
+  return {
+    topColor: color,
+    bottomColor: color
+  };
+}
+export {
+  generateColorsFromBase,
+  getCSSVariable,
+  hexToRgba,
+  resolveCSSColor
+};

package/dist/esm/utils/format-asset-amount.js

@@ -0,0 +1,19 @@
+import { formatBN } from "@gearbox-protocol/sdk";
+const AMOUNT_PRECISION = 3;
+function isZero(precision) {
+  const zero = `0.${"0".repeat(precision)}`;
+  return (formattedBn) => zero === formattedBn;
+}
+function formatAssetAmount(amount, decimals, precision = AMOUNT_PRECISION) {
+  const formatted = formatBN(amount, decimals, precision);
+  if (amount < 10n) {
+    return `0.${"0".repeat(precision)}`;
+  }
+  if (isZero(precision)(formatted)) {
+    return `< 0.${"0".repeat(precision - 1)}1`;
+  }
+  return formatted;
+}
+export {
+  formatAssetAmount
+};

package/dist/esm/utils/format-money.js

@@ -0,0 +1,40 @@
+import { BigIntMath, formatBN, WAD_DECIMALS_POW } from "@gearbox-protocol/sdk";
+const ONE_CENT = 10000000000000000n;
+function moneyToBn(money) {
+  return BigInt(money.toFixed(18).replace(".", ""));
+}
+function formatMoney(money, precision) {
+  const isNegative = typeof money === "number" && money < 0 || typeof money === "bigint" && money < 0n;
+  const sign = isNegative ? "-" : "";
+  const moneyBn = typeof money === "number" ? moneyToBn(Math.abs(money)) : BigIntMath.abs(money);
+  const lessThanCent = moneyBn < ONE_CENT && moneyBn > 0n;
+  const formattedBn = lessThanCent ? "0.01" : formatBN(moneyBn, WAD_DECIMALS_POW, precision);
+  const moneyTemplated = `${sign}$${formattedBn}`;
+  return lessThanCent ? `< ${moneyTemplated}` : moneyTemplated;
+}
+const MAX_EXPONENTIAL_PERCENT_THRESHOLD = 1e4;
+function formatPercentAmount(value, decimals) {
+  const numValue = typeof value === "number" ? value : Number(value);
+  if (Number.isNaN(numValue) || numValue === void 0 || numValue === null) {
+    return "0";
+  }
+  if (numValue === 0) return 0;
+  if (numValue > MAX_EXPONENTIAL_PERCENT_THRESHOLD)
+    return numValue.toExponential(decimals);
+  return numValue.toFixed(decimals);
+}
+function percentTemplate(value, decimals = 2) {
+  return `${formatPercentAmount(value, decimals)}%`;
+}
+const PERCENTAGE_FACTOR = 1e4;
+function percentageTemplate(value, decimals = 2) {
+  const formatted = Number(value) / Number(PERCENTAGE_FACTOR);
+  return `${formatPercentAmount(formatted, decimals)}%`;
+}
+export {
+  PERCENTAGE_FACTOR,
+  formatMoney,
+  formatPercentAmount,
+  percentTemplate,
+  percentageTemplate
+};

package/dist/esm/utils/index.js

@@ -1,7 +1,27 @@
+export * from "./a11y.js";
+export * from "./bn-to-input-view.js";
 export * from "./cn.js";
 import { cn } from "./cn.js";
+export * from "./colors.js";
 export * from "./copy.js";
 export * from "./format.js";
+export * from "./format-asset-amount.js";
+import {
+  formatMoney,
+  formatPercentAmount,
+  PERCENTAGE_FACTOR,
+  percentageTemplate,
+  percentTemplate
+} from "./format-money.js";
+export * from "./interface.js";
+export * from "./react.js";
+export * from "./short-sha.js";
+export * from "./templates.js";
 export {
-  cn as default
+  PERCENTAGE_FACTOR,
+  cn as default,
+  formatMoney,
+  formatPercentAmount,
+  percentTemplate,
+  percentageTemplate
 };

package/dist/esm/utils/react.js

@@ -0,0 +1,70 @@
+import * as React from "react";
+function extractTextFromLabel(label) {
+  if (label === null || label === void 0) {
+    return "";
+  }
+  if (typeof label === "string" || typeof label === "number") {
+    return String(label);
+  }
+  if (typeof label === "boolean") {
+    return label ? "true" : "false";
+  }
+  if (React.isValidElement(label)) {
+    const props = label.props;
+    const children = props?.children;
+    if (children === void 0 || children === null) {
+      return "";
+    }
+    if (Array.isArray(children)) {
+      return children.map(extractTextFromLabel).join(" ");
+    }
+    return extractTextFromLabel(children);
+  }
+  if (Array.isArray(label)) {
+    return label.map(extractTextFromLabel).join(" ");
+  }
+  try {
+    return String(label);
+  } catch {
+    return "";
+  }
+}
+function serializeValue(value) {
+  if (value === null || value === void 0) {
+    return String(value);
+  }
+  const valueType = typeof value;
+  if (valueType === "string" || valueType === "number" || valueType === "boolean") {
+    return String(value);
+  }
+  if (valueType === "bigint") {
+    return `bigint:${value.toString()}`;
+  }
+  if (valueType === "symbol" || valueType === "function") {
+    return `${valueType}:${String(value)}`;
+  }
+  try {
+    return JSON.stringify(value, (_, val) => {
+      if (typeof val === "bigint") {
+        return `bigint:${val.toString()}`;
+      }
+      if (typeof val === "symbol") {
+        return `symbol:${String(val)}`;
+      }
+      if (typeof val === "function") {
+        return `function:${val.name || "anonymous"}`;
+      }
+      return val;
+    });
+  } catch {
+    try {
+      return `${valueType}:${String(value)}`;
+    } catch {
+      return `[unserializable:${valueType}]`;
+    }
+  }
+}
+export {
+  extractTextFromLabel,
+  serializeValue
+};

package/dist/esm/utils/short-sha.js

@@ -0,0 +1,4 @@
+const shortSHA = (sha) => sha.slice(0, 7);
+export {
+  shortSHA
+};

package/dist/esm/utils/templates.js

@@ -0,0 +1,24 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { formatBN } from "@gearbox-protocol/sdk";
+import { percentTemplate } from "./format-money.js";
+function percentageTemplate(value, decimals = 2) {
+  return /* @__PURE__ */ jsx(Fragment, { children: percentTemplate(value, decimals) });
+}
+function tokenTemplate(value, token, precision, spaceSymbol = " ") {
+  const { decimals = 18 } = token || {};
+  const formattedBn = formatBN(value, decimals, precision);
+  const tokenName = token?.title || token?.symbol || "undefined";
+  return /* @__PURE__ */ jsx(Fragment, { children: formattedBn === "-" ? formattedBn : `${formattedBn}${spaceSymbol}${tokenName}` });
+}
+function tokenTemplateNumber(value, token, precision = 2) {
+  if (value === void 0) return "-";
+  const formattedValue = value.toFixed(precision);
+  const sign = Math.abs(Number(formattedValue)) > 0 ? "" : "< ";
+  const result = sign ? `${formattedValue.slice(0, formattedValue.length - 1)}1` : formattedValue;
+  return `${sign}${result} ${token?.title}`;
+}
+export {
+  percentageTemplate,
+  tokenTemplate,
+  tokenTemplateNumber
+};