@gearbox-protocol/permissionless-ui 1.7.2 → 1.7.4

package/dist/cjs/hooks/use-liquidation/index.cjs

@@ -0,0 +1,160 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const sdk = require('@gearbox-protocol/sdk');
+const React = require('react');
+const hooks_useLiquidation_utils = require('./utils.cjs');
+
+const RESOLUTION = 35;
+function useLiquidationHeatmap({
+  xMin,
+  xMax,
+  yMin,
+  yMax,
+  xLabel,
+  yLabel,
+  assets,
+  quotas,
+  prices,
+  liquidationThresholds,
+  quotasInfo,
+  underlyingTokenAddress,
+  debt,
+  tokensList
+}) {
+  const heatmap = React.useMemo(() => {
+    const intervalX = xMax - xMin;
+    const intervalY = yMax - yMin;
+    const stepX = intervalX / RESOLUTION;
+    const stepY = intervalY / RESOLUTION;
+    const GRID = Array.from(Array(RESOLUTION));
+    const pricesCopy = { ...prices };
+    return GRID.flatMap((_, i) => {
+      const x = xMin + i * stepX;
+      const xEnd = xMin + (i + 1) * stepX;
+      if (xLabel) {
+        pricesCopy[xLabel.address] = sdk.toBN(
+          String((x + xEnd) / 2),
+          sdk.PRICE_DECIMALS_POW
+        );
+      }
+      return GRID.map((__, j) => {
+        const y = yMin + j * stepY;
+        const yEnd = yMin + (j + 1) * stepY;
+        if (yLabel) {
+          pricesCopy[yLabel.address] = sdk.toBN(
+            String((y + yEnd) / 2),
+            sdk.PRICE_DECIMALS_POW
+          );
+        }
+        return {
+          x,
+          xEnd,
+          y,
+          yEnd,
+          value: sdk.CreditAccountData_Legacy.calcHealthFactor({
+            assets,
+            quotas,
+            prices: pricesCopy,
+            liquidationThresholds,
+            underlyingToken: underlyingTokenAddress,
+            debt,
+            quotasInfo,
+            tokensList
+          })
+        };
+      });
+    });
+  }, [
+    xMin,
+    xMax,
+    yMin,
+    yMax,
+    xLabel,
+    yLabel,
+    assets,
+    quotas,
+    prices,
+    liquidationThresholds,
+    underlyingTokenAddress,
+    debt,
+    quotasInfo,
+    tokensList
+  ]);
+  return heatmap;
+}
+function useEditPriceManually({ prices }) {
+  const [editedPrices, setEditedPrices] = React.useState({});
+  const allPrices = React.useMemo(
+    () => ({ ...prices, ...editedPrices }),
+    [prices, editedPrices]
+  );
+  const handleEditPrice = React.useCallback(
+    (newPrice, token) => {
+      setEditedPrices({ ...editedPrices, [token]: newPrice });
+    },
+    [editedPrices]
+  );
+  return [allPrices, handleEditPrice];
+}
+function useLiquidationGraphParams({
+  assets,
+  liquidationThresholds,
+  quotas,
+  quotasInfo,
+  tokensList,
+  prices
+}) {
+  const [fixedBalances] = hooks_useLiquidation_utils.useFixedAssets({
+    assets,
+    liquidationThresholds,
+    quotas,
+    quotasInfo
+  });
+  const [priceX, tokenX] = hooks_useLiquidation_utils.usePriceInNumber({
+    asset: fixedBalances[0],
+    tokensList,
+    prices
+  });
+  const [priceY, tokenY] = hooks_useLiquidation_utils.usePriceInNumber({
+    asset: fixedBalances[1],
+    tokensList,
+    prices
+  });
+  const xAxis = hooks_useLiquidation_utils.useAxis({ currentPrice: priceX, token: tokenX });
+  const yAxis = hooks_useLiquidation_utils.useAxis({ currentPrice: priceY, token: tokenY });
+  return {
+    xAxis,
+    yAxis,
+    currentPoint: [
+      priceX || hooks_useLiquidation_utils.DEFAULT_AXIS_MAX / 2,
+      priceY || hooks_useLiquidation_utils.DEFAULT_AXIS_MAX / 2
+    ],
+    fixedBalances
+  };
+}
+
+exports.CELL_BAD = hooks_useLiquidation_utils.CELL_BAD;
+exports.CELL_CURRENT = hooks_useLiquidation_utils.CELL_CURRENT;
+exports.CELL_GOOD = hooks_useLiquidation_utils.CELL_GOOD;
+exports.CELL_HOVERED = hooks_useLiquidation_utils.CELL_HOVERED;
+exports.CELL_LIQUIDATION = hooks_useLiquidation_utils.CELL_LIQUIDATION;
+exports.CELL_OK = hooks_useLiquidation_utils.CELL_OK;
+exports.DEFAULT_AXIS_MAX = hooks_useLiquidation_utils.DEFAULT_AXIS_MAX;
+exports.DEFAULT_AXIS_MIN = hooks_useLiquidation_utils.DEFAULT_AXIS_MIN;
+exports.formatAxisLabel = hooks_useLiquidation_utils.formatAxisLabel;
+exports.formatAxisTipLabel = hooks_useLiquidation_utils.formatAxisTipLabel;
+exports.formatAxisTipPrice = hooks_useLiquidation_utils.formatAxisTipPrice;
+exports.getCellClass = hooks_useLiquidation_utils.getCellClass;
+exports.isPointInCell = hooks_useLiquidation_utils.isPointInCell;
+exports.useAxis = hooks_useLiquidation_utils.useAxis;
+exports.useFixedAssets = hooks_useLiquidation_utils.useFixedAssets;
+exports.useIsAxisInRelativeUnits = hooks_useLiquidation_utils.useIsAxisInRelativeUnits;
+exports.useLiquidationGraphActivePrice = hooks_useLiquidation_utils.useLiquidationGraphActivePrice;
+exports.useLiquidationGraphCurrentActiveValue = hooks_useLiquidation_utils.useLiquidationGraphCurrentActiveValue;
+exports.usePriceInNumber = hooks_useLiquidation_utils.usePriceInNumber;
+exports.useWithLiquidationGraphActivePrices = hooks_useLiquidation_utils.useWithLiquidationGraphActivePrices;
+exports.useEditPriceManually = useEditPriceManually;
+exports.useLiquidationGraphParams = useLiquidationGraphParams;
+exports.useLiquidationHeatmap = useLiquidationHeatmap;

package/dist/cjs/hooks/use-liquidation/types.cjs

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/hooks/use-liquidation/utils.cjs

@@ -0,0 +1,208 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const sdk = require('@gearbox-protocol/sdk');
+const React = require('react');
+const utils_bnToInputView = require('../../utils/bn-to-input-view.cjs');
+const utils_formatNumber = require('../../utils/format-number.cjs');
+
+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] = React.useState("straight");
+  const nextOrder = React.useCallback(() => {
+    setOrder(order === "straight" ? "reverse" : "straight");
+  }, [order]);
+  const boundaries = React.useMemo(() => {
+    return currentPrice !== void 0 ? {
+      min: 0,
+      max: currentPrice * 1.5,
+      minHf: Number(sdk.PERCENTAGE_FACTOR)
+    } : void 0;
+  }, [currentPrice]);
+  const r = React.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 = React.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 = React.useMemo(() => {
+    const price = prices[asset?.token || EMPTY_ADDRESS];
+    const token = tokensList[asset?.token || EMPTY_ADDRESS];
+    const priceNum = price ? Number(utils_bnToInputView.bnToInputView(price, 8)) : void 0;
+    return [priceNum, token];
+  }, [asset, tokensList, prices]);
+  return r;
+}
+function useIsAxisInRelativeUnits(axis, underlying) {
+  const r = React.useMemo(() => {
+    return !!axis && !!underlying && axis.address !== underlying.address;
+  }, [axis, underlying]);
+  return r;
+}
+const DECIMALS = 2;
+const MAX_SMALL_DECIMALS = 6;
+function formatAxisTipPrice(v) {
+  return utils_formatNumber.formatPrice(v, DECIMALS, MAX_SMALL_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)
+  ) : `$${sdk.formatBN(
+    sdk.toBN(String(l), sdk.PRICE_DECIMALS_POW),
+    sdk.PRICE_DECIMALS_POW,
+    1
+  )}`;
+}
+function priceInPercent(price, base) {
+  const p = typeof price === "bigint" ? Number(utils_bnToInputView.bnToInputView(price, sdk.PRICE_DECIMALS_POW)) : price;
+  const b = typeof base === "bigint" ? Number(utils_bnToInputView.bnToInputView(base, sdk.PRICE_DECIMALS_POW)) : base;
+  return p / b;
+}
+function useLiquidationGraphActivePrice(activePoint, underlyingPrice, isRelative, order = "straight") {
+  const activePrice = React.useMemo(() => {
+    return underlyingPrice && isRelative ? order === "straight" ? priceInPercent(activePoint, underlyingPrice) : priceInPercent(underlyingPrice, activePoint) : activePoint;
+  }, [activePoint, underlyingPrice, order, isRelative]);
+  return activePrice;
+}
+function useLiquidationGraphCurrentActiveValue() {
+  const [activePoint, setActiveX] = React.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 = React.useMemo(() => {
+    return {
+      ...prices,
+      ...xLabel && activePointX ? { [xLabel.address]: sdk.toBN(String(activePointX), sdk.PRICE_DECIMALS_POW) } : {},
+      ...yLabel && activePointY ? { [yLabel.address]: sdk.toBN(String(activePointY), sdk.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 > sdk.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(" ");
+}
+
+exports.CELL_BAD = CELL_BAD;
+exports.CELL_CURRENT = CELL_CURRENT;
+exports.CELL_GOOD = CELL_GOOD;
+exports.CELL_HOVERED = CELL_HOVERED;
+exports.CELL_LIQUIDATION = CELL_LIQUIDATION;
+exports.CELL_OK = CELL_OK;
+exports.DEFAULT_AXIS_MAX = DEFAULT_AXIS_MAX;
+exports.DEFAULT_AXIS_MIN = DEFAULT_AXIS_MIN;
+exports.formatAxisLabel = formatAxisLabel;
+exports.formatAxisTipLabel = formatAxisTipLabel;
+exports.formatAxisTipPrice = formatAxisTipPrice;
+exports.getCellClass = getCellClass;
+exports.isPointInCell = isPointInCell;
+exports.useAxis = useAxis;
+exports.useFixedAssets = useFixedAssets;
+exports.useIsAxisInRelativeUnits = useIsAxisInRelativeUnits;
+exports.useLiquidationGraphActivePrice = useLiquidationGraphActivePrice;
+exports.useLiquidationGraphCurrentActiveValue = useLiquidationGraphCurrentActiveValue;
+exports.usePriceInNumber = usePriceInNumber;
+exports.useWithLiquidationGraphActivePrices = useWithLiquidationGraphActivePrices;

package/dist/cjs/hooks/use-media-query.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+
+function useMediaQuery(query) {
+  const [matches, setMatches] = React.useState(false);
+  React.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)");
+
+exports.useIsDesktop = useIsDesktop;
+exports.useIsMobile = useIsMobile;
+exports.useIsTablet = useIsTablet;
+exports.useMediaQuery = useMediaQuery;

package/dist/cjs/hooks/use-previous.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+
+function usePrevious(value) {
+  const ref = React.useRef(void 0);
+  React.useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+exports.usePrevious = usePrevious;