@dodoex/widgets 3.0.2-zetachain.10 → 3.0.2-zetachain.12

package/dist/helper-CMiEdcFd.js

@@ -0,0 +1,545 @@
+import { i18n } from '@lingui/core';
+import BigNumber from 'bignumber.js';
+import { f as formatShortNumber } from './index-bUI_7SKV.js';
+
+// \{\{([A-Za-z]+)\}\} to ${params.$1}
+function chartT(key, params) {
+  switch (key) {
+    case 'depth-chart.tips.buy':
+      return i18n._(
+      /*i18n*/
+      {
+        id: "q+Q952",
+        message: "Users pay {0} {1} and receive {2} {3}\\nPrice {4} ({5}%)",
+        values: {
+          0: params.amountText,
+          1: params.baseTokenSymbol,
+          2: params.oppositeAmountText,
+          3: params.quoteTokenSymbol,
+          4: params.priceText,
+          5: params.slippageText
+        }
+      });
+    case 'depth-chart.tips.mid-price':
+      return i18n._(
+      /*i18n*/
+      {
+        id: "cnbRVW",
+        message: "Initial Price {0} {1} = {2} {3}",
+        values: {
+          0: params.amountText,
+          1: params.baseTokenSymbol,
+          2: params.oppositeAmountText,
+          3: params.quoteTokenSymbol
+        }
+      });
+    case 'depth-chart.tips.sell':
+      return i18n._(
+      /*i18n*/
+      {
+        id: "q+Q952",
+        message: "Users pay {0} {1} and receive {2} {3}\\nPrice {4} ({5}%)",
+        values: {
+          0: params.oppositeAmountText,
+          1: params.quoteTokenSymbol,
+          2: params.amountText,
+          3: params.baseTokenSymbol,
+          4: params.priceText,
+          5: params.slippageText
+        }
+      });
+    case 'pool.chart.buy-amount':
+      return i18n._(
+      /*i18n*/
+      {
+        id: "TaScUS",
+        message: "Users sell {0} amount:",
+        values: {
+          0: params.symbol
+        }
+      });
+    case 'pool.chart.price-impact':
+      return i18n._(
+      /*i18n*/
+      {
+        id: "I0LXan",
+        message: "Price Impact: {0}",
+        values: {
+          0: params.amount
+        }
+      });
+    case 'pool.chart.sell-amount':
+      return i18n._(
+      /*i18n*/
+      {
+        id: "F2vX4t",
+        message: "Users buy {0} amount:",
+        values: {
+          0: params.symbol
+        }
+      });
+    case 'pool.create.disabled-token-amount':
+      return i18n._(
+      /*i18n*/
+      {
+        id: "5QDjef",
+        message: "The token amount is calculated by initial price."
+      });
+    case 'pool.create.set-pool.emulator.title':
+      return i18n._(
+      /*i18n*/
+      {
+        id: "FQfStS",
+        message: "Emulator"
+      });
+    case 'pool.create.set-pool.emulator.title.question':
+      return i18n._(
+      /*i18n*/
+      {
+        id: "9D2g7k",
+        message: "The liquidity of DODO is continuous, which is different from the discrete liquidity of UniV3. The ticks shown in the illustration are for demonstration purposes only."
+      });
+    // liquidity-chart
+    case 'pool.chart.liquidity-chart-tip':
+      return i18n._(
+      /*i18n*/
+      {
+        id: "YvXHDU",
+        message: "The area of the chart indicates the buy/sell volume of {0} that can be carried by the market when the current price changes to the hover price.",
+        values: {
+          0: params.baseTokenSymbol
+        }
+      });
+    case 'pool.chart.liquidity-chart-buy':
+      return i18n._(
+      /*i18n*/
+      {
+        id: "TvH4Ym",
+        message: "Bought {0} {1}, price in the pool decreased to {2}",
+        values: {
+          0: params.amount,
+          1: params.symbol,
+          2: params.price
+        }
+      });
+    case 'pool.chart.liquidity-chart-sell':
+      return i18n._(
+      /*i18n*/
+      {
+        id: "0O1wzf",
+        message: "Traders sold \u202A{0}\u202C {1}, price in the pool increased to {2}",
+        values: {
+          0: params.amount,
+          1: params.symbol,
+          2: params.price
+        }
+      });
+    default:
+      throw new Error(`Unknown key ${key}`);
+  }
+}
+
+const labelPadding = 12;
+// The distance between toolTip and the top of the column
+const toolTipMarginBottom = 6;
+// Since toolTip exceeds part of the drawing area, additional padding is required
+const chartOffsetYBCToolTip = labelPadding + toolTipMarginBottom;
+
+function colorRgb(str) {
+  let sColor = str.toLowerCase();
+  // Regular expression for hexadecimal color values
+  const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+  // If it is a hexadecimal color
+  if (sColor && reg.test(sColor)) {
+    if (sColor.length === 4) {
+      let sColorNew = '#';
+      for (let i = 1; i < 4; i += 1) {
+        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
+      }
+      sColor = sColorNew;
+    }
+    // Handle six-bit color values
+    const sColorChange = [];
+    for (let i = 1; i < 7; i += 2) {
+      sColorChange.push(parseInt(`0x${sColor.slice(i, i + 2)}`));
+    }
+    return sColorChange.join(',');
+  }
+  return sColor;
+}
+function evalPoint({
+  val,
+  model
+}) {
+  let v = val;
+  if (val.isNaN()) {
+    return {
+      side: 'no-one',
+      vert: new BigNumber(0),
+      base: new BigNumber(0),
+      quote: new BigNumber(0)
+    };
+  }
+  // If Q0=0, the minimum value of the abscissa must be greater than or equal to i. If the abscissa input is less than i, the vertical axis value when the abscissa is i is returned.
+  // If B0=0, the maximum value of the abscissa must be less than or equal to i. If the abscissa input is greater than i, the vertical axis value when the abscissa is i is returned.
+  if (model.Q0.eq(0) && val.lt(model.i)) {
+    v = model.i;
+  }
+  if (model.B0.eq(0) && val.gt(model.i)) {
+    v = model.i;
+  }
+  const resp = model.getPriceDepth(v);
+  const base = resp.baseAmount;
+  const quote = resp.quoteAmount;
+  const {
+    isBuy
+  } = resp;
+  return {
+    side: isBuy ? 'ask' : 'bid',
+    // vert: isBuy ? base.multipliedBy(midPrice) : quote,
+    vert: isBuy ? base : quote,
+    base,
+    quote
+  };
+}
+/**
+ * Returns two vertical coordinates, buyBaseVert on the left and sellBaseVert on the right.
+ * @param param0
+ */
+function computeBaseVert({
+  midPrice,
+  q,
+  q0,
+  pmmModel
+}) {
+  let baseVert = BigNumber.maximum(q, q0, pmmModel.B.multipliedBy(midPrice));
+  // Special handling to avoid exceptions
+  if (baseVert.isNaN()) {
+    baseVert = new BigNumber(10);
+  }
+  if (baseVert.eq(0)) {
+    baseVert = new BigNumber(1);
+  }
+  return {
+    buyBaseVert: baseVert.multipliedBy(1.2),
+    sellBaseVert: baseVert.div(midPrice).multipliedBy(1.2)
+  };
+}
+/**
+ * // 1000/800 The price represented by one pixel
+  // Maximum value on the right side of the middle price = middle price * 10 = middle price * 10^1
+  // Calculate the x-axis coordinate (price): middle price*10^(xPortion*x)+middle price; x is the number of equal parts that divide the right half into 50 parts
+ * @param chartWidth icon width
+ * @param zoomMultiples magnification factors
+ * @returns
+ */
+function computeXPortion(chartWidth, zoomMultiples = 1) {
+  return new BigNumber(zoomMultiples).div(chartWidth / 2);
+}
+function updateTooltip({
+  tooltip,
+  x,
+  chartWidth,
+  chartHeight,
+  buyBaseVert,
+  sellBaseVert,
+  pmmModel,
+  midPrice,
+  baseTokenSymbol,
+  quoteTokenSymbol,
+  t,
+  baseMinAndZoomMultiples,
+  isHover,
+  color,
+  leftColor,
+  rightColor
+}) {
+  const {
+    zoomMultiples,
+    baseMin
+  } = baseMinAndZoomMultiples;
+  const xPortion = computeXPortion(chartWidth, zoomMultiples);
+  const buyYPortion = buyBaseVert.div(chartHeight);
+  const sellYPortion = sellBaseVert.div(chartHeight);
+  const multiplesNum = zoomMultiples * 2;
+  const price = baseMin.multipliedBy(10 ** xPortion.multipliedBy(x).toNumber());
+  let midPriceN = new BigNumber(Math.log(midPrice.div(baseMin).toNumber()) / Math.log(10));
+  midPriceN = BigNumber.minimum(multiplesNum, midPriceN);
+  midPriceN = BigNumber.maximum(0, midPriceN);
+  const xMidPrice = midPriceN.div(xPortion);
+  const result = evalPoint({
+    val: price,
+    model: pmmModel,
+    midPrice
+  });
+  if (result.vert.isNaN()) {
+    return;
+  }
+  const isQuote = price.lt(midPrice);
+  let yy = chartHeight - result.vert.div(buyYPortion).toNumber();
+  if (!isQuote) {
+    yy = chartHeight - result.vert.div(sellYPortion).toNumber();
+  }
+  const priceText = formatShortNumber(price);
+  const amountText = formatShortNumber(result.vert);
+  const slippageText = price.minus(midPrice).abs().div(midPrice).multipliedBy(100).toFixed(2);
+  const xMidPriceText = xMidPrice.toNumber();
+  const toolTipVertLine = tooltip.findOne('#toolTipVertLine');
+  const toolTipHoriLine = tooltip.findOne('#toolTipHoriLine');
+  const joinCircle = tooltip.findOne('#joinCircle');
+  const tooltipLabel = tooltip.findOne('#toolTip');
+  const priceTextLabel = tooltip.findOne('#priceTextLabel');
+  const slippageTextLabel = tooltip.findOne('#slippageTextLabel');
+  if (!tooltipLabel) {
+    return;
+  }
+  tooltipLabel.x(x);
+  // yy + radius of intersection circle + border of intersection circle
+  tooltipLabel.y(yy - 5 - 6);
+  const toolTipText = tooltipLabel.getText();
+  const toolTipTag = tooltipLabel.getTag();
+  let oppositeAmountText = result.side === 'ask' ? formatShortNumber(result.quote) : formatShortNumber(result.base);
+  const isZeroK = pmmModel.k.lte(0);
+  if (isZeroK) {
+    oppositeAmountText = amountText;
+  }
+  const midPriceText = formatShortNumber(midPrice);
+  const tipTextParams = {
+    amountText,
+    baseTokenSymbol,
+    oppositeAmountText,
+    quoteTokenSymbol,
+    priceText: isZeroK ? midPriceText : priceText,
+    slippageText: `${isQuote ? '-' : '+'}${slippageText}`
+  };
+  if (xMidPrice.minus(4).lte(x) && xMidPrice.plus(2).gte(x) && isHover) {
+    // midPrice hover
+    toolTipText.text(t('depth-chart.tips.mid-price', {
+      amountText: 1,
+      baseTokenSymbol,
+      oppositeAmountText: midPriceText,
+      quoteTokenSymbol
+    }));
+    tooltipLabel.x(xMidPriceText);
+    tooltipLabel.y(chartHeight / 2);
+    toolTipVertLine === null || toolTipVertLine === void 0 ? void 0 : toolTipVertLine.hide();
+    toolTipHoriLine === null || toolTipHoriLine === void 0 ? void 0 : toolTipHoriLine.hide();
+    joinCircle === null || joinCircle === void 0 ? void 0 : joinCircle.hide();
+    priceTextLabel === null || priceTextLabel === void 0 ? void 0 : priceTextLabel.hide();
+    slippageTextLabel === null || slippageTextLabel === void 0 ? void 0 : slippageTextLabel.hide();
+  } else {
+    toolTipText.text(isQuote ? t('depth-chart.tips.buy', {
+      amountText: oppositeAmountText,
+      baseTokenSymbol,
+      oppositeAmountText: amountText,
+      quoteTokenSymbol,
+      priceText: isZeroK ? midPriceText : priceText,
+      slippageText: `${isQuote ? '-' : '+'}${slippageText}`
+    }) : t('depth-chart.tips.sell', tipTextParams));
+    const textColor = color || (isQuote ? '#55f6db' : '#ff4f73');
+    const lineColor = isQuote ? leftColor || '#55f6db' : rightColor || '#ff4f73';
+    toolTipText.fill(textColor);
+    if (tooltipLabel.width() / 2 > x) {
+      toolTipTag.pointerDirection('left');
+      toolTipTag.pointerHeight(15);
+      toolTipTag.pointerWidth(8);
+      tooltipLabel.offsetX(-(5 + 6));
+      tooltipLabel.offsetY(-(5 + 6));
+    } else if (tooltipLabel.width() / 2 + x > chartWidth) {
+      toolTipTag.pointerDirection('right');
+      toolTipTag.pointerHeight(15);
+      toolTipTag.pointerWidth(8);
+      tooltipLabel.offsetX(5 + 6);
+      tooltipLabel.offsetY(-(5 + 6));
+    } else {
+      // @ts-ignore
+      toolTipTag.pointerDirection('down');
+      toolTipTag.pointerHeight(8);
+      toolTipTag.pointerWidth(15);
+      tooltipLabel.offsetX(0);
+      tooltipLabel.offsetY(0);
+    }
+    toolTipVertLine === null || toolTipVertLine === void 0 ? void 0 : toolTipVertLine.points([x, chartHeight, x, yy]);
+    toolTipVertLine === null || toolTipVertLine === void 0 ? void 0 : toolTipVertLine.stroke(lineColor);
+    toolTipHoriLine === null || toolTipHoriLine === void 0 ? void 0 : toolTipHoriLine.points(isQuote ? [x, yy, xMidPriceText, yy] : [xMidPriceText, yy, x, yy]);
+    toolTipHoriLine === null || toolTipHoriLine === void 0 ? void 0 : toolTipHoriLine.stroke(lineColor);
+    joinCircle === null || joinCircle === void 0 ? void 0 : joinCircle.x(x);
+    joinCircle === null || joinCircle === void 0 ? void 0 : joinCircle.y(yy);
+    joinCircle === null || joinCircle === void 0 ? void 0 : joinCircle.fill(isQuote ? leftColor || 'rgb(86, 246, 218)' : rightColor || '#FF5072');
+    joinCircle === null || joinCircle === void 0 ? void 0 : joinCircle.stroke(
+    // eslint-disable-next-line no-nested-ternary
+    isQuote ? leftColor ? `rgba(${colorRgb(leftColor)}, 0.4)` : 'rgba(86, 246, 218, 0.3)' : rightColor ? `rgba(${colorRgb(rightColor)}, 0.4)` : 'rgba(255, 80, 114, 0.3)');
+    if (priceTextLabel) {
+      priceTextLabel.x(x);
+      priceTextLabel.y(chartHeight);
+      priceTextLabel.offsetX(priceTextLabel.width() / 2);
+      if (priceTextLabel.x() - priceTextLabel.width() / 2 < 0) {
+        priceTextLabel.x(priceTextLabel.width() / 2);
+      } else if (priceTextLabel.x() + priceTextLabel.width() / 2 > chartWidth) {
+        priceTextLabel.x(chartWidth - priceTextLabel.width() / 2);
+      } else {
+        priceTextLabel.x(x);
+      }
+    }
+    const priceTextLabelText = priceTextLabel === null || priceTextLabel === void 0 ? void 0 : priceTextLabel.findOne('#priceTextLabel-text');
+    if (priceTextLabelText) {
+      priceTextLabelText.fill(textColor);
+      priceTextLabelText.text(priceText);
+    }
+    if (slippageTextLabel) {
+      slippageTextLabel.x(isQuote ? x + (xMidPriceText - x) / 2 : x - (x - xMidPriceText) / 2);
+      slippageTextLabel.y(yy);
+      slippageTextLabel.offsetY(slippageTextLabel.height() / 2);
+      slippageTextLabel.offsetX(slippageTextLabel.width() / 2);
+    }
+    const slippageTextLabelText = slippageTextLabel === null || slippageTextLabel === void 0 ? void 0 : slippageTextLabel.findOne('#slippageTextLabel-text');
+    if (slippageTextLabelText) {
+      slippageTextLabelText.fill(textColor);
+      slippageTextLabelText.text(`${isQuote ? '-' : '+'}${slippageText}%`);
+    }
+    toolTipVertLine === null || toolTipVertLine === void 0 ? void 0 : toolTipVertLine.show();
+    toolTipHoriLine === null || toolTipHoriLine === void 0 ? void 0 : toolTipHoriLine.show();
+    joinCircle === null || joinCircle === void 0 ? void 0 : joinCircle.show();
+    priceTextLabel === null || priceTextLabel === void 0 ? void 0 : priceTextLabel.show();
+    slippageTextLabel === null || slippageTextLabel === void 0 ? void 0 : slippageTextLabel.show();
+  }
+  tooltip.show();
+}
+/**
+ * Calculate the minimum value on the left by pulling distance or button click
+ */
+function computeBaseMinByDistance({
+  dragDistance,
+  prevBaseMin,
+  chartWidth,
+  zoomMultiples
+}) {
+  const xPortion = computeXPortion(chartWidth, zoomMultiples);
+  if (dragDistance > 0) {
+    return prevBaseMin.multipliedBy(10 ** 0 - xPortion.multipliedBy(dragDistance).toNumber());
+  }
+  return prevBaseMin.multipliedBy(10 ** xPortion.multipliedBy(new BigNumber(dragDistance).abs()).plus(0).toNumber());
+}
+const baseZoomMultiples = 1;
+function computeZoomMultiplesWhenZoom({
+  prevZoomMultiples,
+  zoomIn
+}) {
+  if (!zoomIn) {
+    if (prevZoomMultiples <= baseZoomMultiples * 0.1) {
+      return prevZoomMultiples;
+    }
+    // The reduction ratio cannot exceed 0.001
+    // if (prevZoomMultiples <= baseZoomMultiples * 0.1) {
+    //   if (prevZoomMultiples <= baseZoomMultiples * 0.01) {
+    //     if (prevZoomMultiples === baseZoomMultiples * 0.001) {
+    //       return prevZoomMultiples;
+    //     }
+    //     return prevZoomMultiples - baseZoomMultiples * 0.001;
+    //   }
+    //   return prevZoomMultiples - baseZoomMultiples * 0.01;
+    // }
+  }
+  return zoomIn ? prevZoomMultiples + baseZoomMultiples * 0.1 : prevZoomMultiples - baseZoomMultiples * 0.1;
+}
+/**
+ * Given a price target corresponding to the abscissa, calculate the abscissa of the point
+ * The buying impact point is at the left 1/4 position
+ * The selling impact point is 3/4 on the right
+ *
+ * Returns a coordinate point, baseMin and zoomMultiples
+ *
+ * Take the initial state as the starting point, that is, midPrice * 10 ^ -1 as the starting point of the horizontal axis, and it is a left-right symmetrical state, that is, the logarithm of the horizontal axis is from -1 -> 0 -> 1
+ *
+ * type === 'sell'
+ * targetPrice = midPrice * 10 ^ n
+ * n = Math.log10(targetPrice / midPrice)
+ * n = maxN * (3 / 4)
+ *
+ * If the new price is within the existing range, the zoom factor will not be adjusted (the price impact will not change the shape of the graph after graph scaling or translation)
+ * If it is not within the current interval, check whether it is midPrice * 10 ^-1 and midPrice * 10^1. If you still do not adjust the zoom factor, hit the specified point directly, otherwise you need to adjust the zoom factor (avoid inputting extremely small values) The value cannot be scaled to the specified range, resulting in stuck)
+ */
+function computeTargetXByTargetPrice({
+  type,
+  targetPrice,
+  midPrice,
+  width
+}) {
+  if (type === 'sell') {
+    const n = new BigNumber(Math.log10(targetPrice.div(midPrice).toNumber()));
+    const maxN = n.minus(0).div(3 / 4).abs();
+    const zoomMultiples = maxN;
+    return {
+      zoomMultiples,
+      targetX: width / 2 * (3 / 4) + width / 2
+    };
+  }
+  const n = new BigNumber(Math.log10(targetPrice.div(midPrice).toNumber()));
+  const maxN = new BigNumber(0).minus(n).div(3 / 4).abs();
+  const zoomMultiples = maxN;
+  return {
+    zoomMultiples,
+    targetX: width / 2 * (1 / 4)
+  };
+}
+/**
+ * If the new price is within the existing range, the zoom factor will not be adjusted (the price impact will not change the shape of the graph after graph scaling or translation)
+ * If it is not within the current interval, check whether it is midPrice * 10 ^-1 and midPrice * 10^1. If it is within the range, adjust the zoom factor to 1, and then impact to the specified point, otherwise you need to adjust the zoom factor ( Avoid entering extremely small values ​​that may result in inability to scale to the specified range and cause stucks)
+ *
+ * Returns an abscissa and a flag indicating whether to skip
+ */
+function beforePriceImpactEffect({
+  currentBaseMinAndZoomMultiples,
+  targetPrice,
+  midPrice,
+  width
+}) {
+  const {
+    baseMin,
+    zoomMultiples
+  } = currentBaseMinAndZoomMultiples;
+  const minN = new BigNumber(Math.log10(baseMin.div(midPrice).toNumber()));
+  const maxN = minN.plus(zoomMultiples * 2);
+  // price maximum
+  const baseMax = new BigNumber(midPrice.multipliedBy(10 ** maxN.toNumber()));
+  if (targetPrice.gte(baseMin) && targetPrice.lte(baseMax)) {
+    const n = new BigNumber(Math.log10(targetPrice.div(midPrice).toNumber()));
+    const targetX = n.minus(minN).div(zoomMultiples * 2).multipliedBy(width).toNumber();
+    return {
+      isSkip: true,
+      targetX,
+      baseMin: new BigNumber(0),
+      zoomMultiples: baseZoomMultiples
+    };
+  }
+  // 是否在 midPrice 范围内
+  const defaultBaseMin = new BigNumber(midPrice.multipliedBy(10 ** -baseZoomMultiples));
+  const defaultBaseMax = new BigNumber(midPrice.multipliedBy(10 ** baseZoomMultiples));
+  if (targetPrice.gte(defaultBaseMin) && targetPrice.lte(defaultBaseMax)) {
+    const n = new BigNumber(Math.log10(targetPrice.div(midPrice).toNumber()));
+    const targetX = n.minus(-baseZoomMultiples).div(baseZoomMultiples * 2).multipliedBy(width).toNumber();
+    return {
+      isSkip: false,
+      targetX,
+      baseMin: defaultBaseMin,
+      zoomMultiples: baseZoomMultiples
+    };
+  }
+  return {
+    isSkip: false,
+    targetX: -1,
+    baseMin: new BigNumber(0),
+    zoomMultiples: baseZoomMultiples
+  };
+}
+/**
+ * Recalculate baseMin after the zoom factor changes
+ */
+function computeBaseAfterZoom({
+  midPrice,
+  zoomMultiples
+}) {
+  return midPrice.multipliedBy(10 ** -zoomMultiples);
+}
+
+export { computeBaseVert as a, computeBaseMinByDistance as b, computeXPortion as c, computeZoomMultiplesWhenZoom as d, evalPoint as e, computeBaseAfterZoom as f, chartT as g, chartOffsetYBCToolTip as h, baseZoomMultiples as i, beforePriceImpactEffect as j, computeTargetXByTargetPrice as k, labelPadding as l, colorRgb as m, updateTooltip as u };