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

package/dist/index-s8jAQFVo.js

@@ -0,0 +1,971 @@
+import styled from '@emotion/styled';
+import { merge } from 'lodash';
+import { useMemo, useRef } from 'react';
+import { l as labelPadding, g as chartT, m as colorRgb } from './helper-CMiEdcFd.js';
+import { Line, Text, Stage, Layer, Rect, Circle, Label, Tag } from 'react-konva';
+import { j as jsxRuntimeExports, f as formatShortNumber } from './index-bUI_7SKV.js';
+import BigNumber from 'bignumber.js';
+import { solveQuadraticFunctionForTarget, PMMState, PMMHelper } from '@dodoex/api';
+import '@lingui/core';
+import '@lingui/react';
+import '@dodoex/components';
+import '@web3-react/core';
+import 'axios';
+import '@ethersproject/bignumber';
+import 'zustand';
+import '@dodoex/dodo-contract-request';
+import '@tanstack/react-query';
+import 'pino';
+import 'events';
+import 'node-fetch';
+import '@web3-react/eip1193';
+import '@web3-react/walletconnect-v2';
+import '@web3-react/metamask';
+import '@web3-react/types';
+import '@ethersproject/contracts';
+import 'identicon.js';
+import 'react-dom';
+import 'dayjs';
+import 'react-transition-group';
+import '@dodoex/contract-request';
+import 'recharts';
+import 'react-window';
+import 'jsbi';
+import 'tiny-invariant';
+import '@ethersproject/units';
+import '@uniswap/sdk-core';
+import '@uniswap/v2-sdk';
+import 'react-infinite-scroller';
+import 'd3';
+import 'rmc-date-picker';
+
+const Container = styled.div`
+  height: 100%;
+  position: relative;
+`;
+const TipWrapper = styled.div`
+  text-align: center;
+  margin-top: 17.1px;
+  margin-bottom: 88.41px;
+  color: #606066;
+  font-size: 12px;
+  line-height: 17px;
+  font-weight: 400;
+`;
+
+// The space reserved at the top
+const topEmptyHeight = 36;
+function computePointYByHeight({
+  maxHeight,
+  gridAreaHeight,
+  value
+}) {
+  const height = new BigNumber(gridAreaHeight).minus(topEmptyHeight);
+  const onePXY = height.div(maxHeight);
+  const y = height.minus(value.multipliedBy(onePXY)).plus(topEmptyHeight);
+  return y.toNumber();
+}
+/**
+ * Obtain the closest data point from the data point collection through the coordinate point x and a series of point data subsets from the point to the center line.
+ */
+function getStatAreaPointByX({
+  targetPrice,
+  areaPoints,
+  isLeft
+}) {
+  for (let index = 0; index < areaPoints.length; index++) {
+    const point = areaPoints[index];
+    const nextPoint = index < areaPoints.length - 1 ? areaPoints[index + 1] : null;
+    if (!nextPoint) {
+      return {
+        targetAreaStatPoint: point,
+        targetAreaStatPoints: areaPoints
+      };
+    }
+    if (isLeft) {
+      if (targetPrice.lte(point.middlePrice) && targetPrice.gte(nextPoint.middlePrice)) {
+        return {
+          targetAreaStatPoint: point,
+          targetAreaStatPoints: areaPoints.slice(0, index + 1)
+        };
+      }
+    } else if (targetPrice.gte(point.middlePrice) && targetPrice.lte(nextPoint.middlePrice)) {
+      return {
+        targetAreaStatPoint: point,
+        targetAreaStatPoints: areaPoints.slice(0, index + 1)
+      };
+    }
+  }
+  return {
+    targetAreaStatPoint: null,
+    targetAreaStatPoints: []
+  };
+}
+/**
+ * Given a pixel's x-coordinate, width, logarithm of the minimum value of the abscissa, and logarithm of the maximum value of the abscissa, calculate the logarithmic coordinate corresponding to the point
+ */
+function computeTargetPrice({
+  x,
+  width,
+  minXLN10,
+  maxXLN10
+}) {
+  const xLN10 = new BigNumber(x).div(width).multipliedBy(maxXLN10.minus(minXLN10));
+  const power = xLN10.plus(minXLN10);
+  return new BigNumber(10 ** power.toNumber());
+}
+/**
+ * Given the logarithm of a coordinate, the width, the logarithm of the minimum value of the abscissa, and the logarithm of the maximum value of the abscissa, calculate the x coordinate corresponding to the point
+ */
+function computeTargetX({
+  width,
+  targetLN10,
+  minXLN10,
+  maxXLN10
+}) {
+  return targetLN10.minus(minXLN10).div(maxXLN10.minus(minXLN10)).multipliedBy(width).toNumber();
+}
+/**
+ * Calculate logarithm
+ */
+function computeTargetLN({
+  target
+}) {
+  return new BigNumber(Math.log10(target.toNumber()));
+}
+
+function useGridLine({
+  gridAreaHeight,
+  gridAreaWidth,
+  horizontalLineCount,
+  verticalLineCount,
+  color = '#2A2A2D'
+}) {
+  return useMemo(() => {
+    const horizontalGridLines = [];
+    const horizontalGridPerBlockHeight = gridAreaHeight / (horizontalLineCount + 1);
+    const verticalGridLines = [];
+    const verticalGridPerBlockHeight = gridAreaWidth / (verticalLineCount + 1);
+    for (let index = 0; index < horizontalLineCount; index++) {
+      const y = horizontalGridPerBlockHeight * (index + 1);
+      horizontalGridLines.push([0, y, gridAreaWidth, y]);
+    }
+    for (let index = 0; index < verticalLineCount; index++) {
+      const x = verticalGridPerBlockHeight * (index + 1);
+      verticalGridLines.push([x, 0, x, gridAreaHeight]);
+    }
+    return /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+      children: [horizontalGridLines.map((points, index) => /*#__PURE__*/jsxRuntimeExports.jsx(Line, {
+        points: points,
+        stroke: color,
+        strokeWidth: 1,
+        lineCap: "round",
+        lineJoin: "round",
+        tension: 1,
+        listening: false
+      }, index)), verticalGridLines.map((points, index) => /*#__PURE__*/jsxRuntimeExports.jsx(Line, {
+        points: points,
+        stroke: color,
+        strokeWidth: 1,
+        lineCap: "round",
+        lineJoin: "round",
+        tension: 1,
+        listening: false
+      }, index))]
+    });
+  }, [gridAreaHeight, gridAreaWidth, horizontalLineCount, verticalLineCount, color]);
+}
+
+function useHorizontalLabel({
+  minXLN10,
+  maxXLN10,
+  labelCount,
+  gridAreaHeight,
+  gridAreaWidth,
+  color = '#606066'
+}) {
+  return useMemo(() => {
+    const labelWidth = gridAreaWidth / (labelCount + 1);
+    const labelTextList = [];
+    const labelLines = [];
+    for (let index = 0; index < labelCount; index++) {
+      const x = labelWidth / 2 + labelWidth * index;
+      labelTextList.push({
+        x,
+        y: gridAreaHeight + 10.08 + 1,
+        text: formatShortNumber(computeTargetPrice({
+          x: labelWidth * (index + 1),
+          width: gridAreaWidth,
+          minXLN10,
+          maxXLN10
+        }))
+      });
+      const lineX = labelWidth * (index + 1);
+      labelLines.push([lineX, gridAreaHeight + 1, lineX, gridAreaHeight + 4 + 1]);
+    }
+    return /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+      children: [labelTextList.map((labelText, index) => /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+        x: labelText.x,
+        y: labelText.y,
+        text: labelText.text,
+        fontSize: 14,
+        fontFamily: "Manrope",
+        fill: color,
+        width: labelWidth,
+        padding: 0,
+        align: "center",
+        verticalAlign: "bottom",
+        listening: false
+      }, index)), labelLines.map((points, index) => /*#__PURE__*/jsxRuntimeExports.jsx(Line, {
+        points: points,
+        stroke: color,
+        strokeWidth: 1,
+        lineCap: "butt",
+        lineJoin: "miter",
+        tension: 1,
+        listening: false
+      }, index))]
+    });
+  }, [minXLN10, maxXLN10, gridAreaHeight, gridAreaWidth, labelCount]);
+}
+
+function useLiquidityLine({
+  leftStatAreaPoints,
+  rightStatAreaPoints,
+  minXLN10,
+  maxXLN10,
+  maxLeftHeight,
+  maxRightHeight,
+  gridAreaWidth,
+  gridAreaHeight,
+  colorMap
+}) {
+  const leftLine = useMemo(() => {
+    if (leftStatAreaPoints.length < 1) {
+      return /*#__PURE__*/jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
+    }
+    const points = [];
+    let minPointY = gridAreaHeight;
+    for (const statPoint of leftStatAreaPoints) {
+      const {
+        middlePrice,
+        rectangleHeight
+      } = statPoint;
+      const targetLN10 = computeTargetLN({
+        target: middlePrice
+      });
+      const x = computeTargetX({
+        minXLN10,
+        maxXLN10,
+        width: gridAreaWidth,
+        targetLN10
+      });
+      const y = computePointYByHeight({
+        maxHeight: maxLeftHeight,
+        gridAreaHeight,
+        value: rectangleHeight
+      });
+      points.push(x, y);
+      if (y < minPointY) {
+        minPointY = y;
+      }
+    }
+    // Gradient color points: from center to left
+    const linearGradientPoints = points.slice();
+    const [rightEndPointX, rightEndPointY] = linearGradientPoints;
+    const leftStartPointY = linearGradientPoints[linearGradientPoints.length - 1];
+    const leftStartPointX = linearGradientPoints[linearGradientPoints.length - 2];
+    linearGradientPoints.push(leftStartPointX, leftStartPointY);
+    linearGradientPoints.push(leftStartPointX, gridAreaHeight);
+    linearGradientPoints.push(rightEndPointX, gridAreaHeight);
+    linearGradientPoints.push(rightEndPointX, rightEndPointY);
+    return /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(Line, {
+        points: linearGradientPoints,
+        closed: true,
+        listening: false,
+        lineCap: "round",
+        lineJoin: "round",
+        fillLinearGradientStartPoint: {
+          x: 0,
+          y: gridAreaHeight
+        },
+        fillLinearGradientEndPoint: {
+          x: 0,
+          y: minPointY
+        },
+        fillLinearGradientColorStops: colorMap.leftBg
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(Line, {
+        points: points,
+        stroke: colorMap.leftLine,
+        strokeWidth: 2,
+        lineCap: "round",
+        lineJoin: "round",
+        listening: false
+      })]
+    });
+  }, [leftStatAreaPoints, gridAreaWidth, minXLN10, maxXLN10, gridAreaHeight, maxLeftHeight]);
+  const rightLine = useMemo(() => {
+    if (rightStatAreaPoints.length < 1) {
+      return /*#__PURE__*/jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
+    }
+    const points = [];
+    let minPointY = gridAreaHeight;
+    for (const statPoint of rightStatAreaPoints) {
+      const {
+        middlePrice,
+        rectangleHeight
+      } = statPoint;
+      const targetLN10 = computeTargetLN({
+        target: middlePrice
+      });
+      const x = computeTargetX({
+        minXLN10,
+        maxXLN10,
+        width: gridAreaWidth,
+        targetLN10
+      });
+      const y = computePointYByHeight({
+        maxHeight: maxRightHeight,
+        gridAreaHeight,
+        value: rectangleHeight
+      });
+      points.push(x, y);
+      if (y < minPointY) {
+        minPointY = y;
+      }
+    }
+    // Gradient colored dots
+    const linearGradientPoints = points.slice();
+    const [firstPointX] = linearGradientPoints;
+    linearGradientPoints.unshift(firstPointX, gridAreaHeight);
+    linearGradientPoints.unshift(gridAreaWidth, gridAreaHeight);
+    return /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(Line, {
+        points: linearGradientPoints,
+        closed: true,
+        listening: false,
+        lineCap: "round",
+        lineJoin: "round",
+        fillLinearGradientStartPoint: {
+          x: 0,
+          y: gridAreaHeight
+        },
+        fillLinearGradientEndPoint: {
+          x: 0,
+          y: minPointY
+        },
+        fillLinearGradientColorStops: colorMap.rightBg
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(Line, {
+        points: points,
+        stroke: colorMap.rightLine,
+        strokeWidth: 2,
+        lineCap: "round",
+        lineJoin: "round",
+        listening: false
+      })]
+    });
+  }, [rightStatAreaPoints, gridAreaWidth, minXLN10, maxXLN10, gridAreaHeight, maxRightHeight]);
+  return {
+    leftLine,
+    rightLine
+  };
+}
+
+function useMiddleLine({
+  gridAreaHeight,
+  gridAreaWidth,
+  color = '#606066'
+}) {
+  return useMemo(() => {
+    const topPointX = gridAreaWidth / 2;
+    return /*#__PURE__*/jsxRuntimeExports.jsx(Line, {
+      points: [topPointX, 0, topPointX, gridAreaHeight - 1],
+      stroke: color,
+      strokeWidth: 1,
+      lineCap: "round",
+      lineJoin: "round",
+      tension: 1,
+      listening: false
+    });
+  }, [gridAreaHeight, gridAreaWidth, color]);
+}
+
+function usePoints({
+  params
+}) {
+  return useMemo(() => {
+    const b = new BigNumber(params.b);
+    const q = new BigNumber(params.q);
+    let b0 = new BigNumber(params.b0);
+    const q0 = new BigNumber(params.q0);
+    const i = new BigNumber(params.i);
+    const K = new BigNumber(params.k);
+    const {
+      R
+    } = params;
+    // When created, b0 is equal to b, and a b0 needs to be calculated.
+    if (R === 1 && b0.eq(b)) {
+      b0 = solveQuadraticFunctionForTarget(b, q.minus(q0), new BigNumber(1).div(i), K);
+    }
+    const pmmState = new PMMState({
+      i,
+      K,
+      B: b,
+      Q: q,
+      B0: b0,
+      Q0: q0,
+      R,
+      mtFeeRate: new BigNumber(0),
+      lpFeeRate: new BigNumber(0)
+    });
+    const pmm = new PMMHelper();
+    const B = new BigNumber(pmmState.B);
+    // const Q = new BigNumber(pmmState.Q);
+    // A collection of data points, mapped into points on the graph through equal width and height proportions
+    const leftStatPoints = [];
+    const rightStatPoints = [];
+    let maxLeftHeight = new BigNumber(0);
+    let maxRightHeight = new BigNumber(0);
+    const midPrice = pmm.GetMidPrice(pmmState);
+    const portion = q.gt(0) ? b.div(q) : new BigNumber(1);
+    // console.log('v2 midPrice', midPrice.toString(), portion.toString());
+    for (let index = 0; index <= 250; index++) {
+      let giveAmount = B.multipliedBy(index / 100).multipliedBy(midPrice.multipliedBy(portion).multipliedBy(4));
+      // let giveAmount = B.multipliedBy(index / 100).multipliedBy(4);
+      // let giveAmount = B.multipliedBy(index / 100);
+      if (index === 0) {
+        giveAmount = B.multipliedBy(1 / 100000000000);
+      }
+      // sellBase needs to pass in the number of quotes and gets the number of bases
+      const getAmount = pmm === null || pmm === void 0 ? void 0 : pmm.QuerySellBase(giveAmount, pmmState);
+      // console.log('v2 QuerySellBase', giveAmount.toString(), getAmount.toString());
+      if (!getAmount.isNaN() && getAmount.gt(0)) {
+        // Price on the left
+        const price = getAmount.div(giveAmount);
+        leftStatPoints.push({
+          giveAmount,
+          getAmount,
+          price
+        });
+        continue;
+      }
+      leftStatPoints.push({
+        giveAmount,
+        getAmount: new BigNumber(0),
+        price: new BigNumber(0)
+      });
+    }
+    for (let index = 0; index <= 250; index++) {
+      let giveAmount = B.multipliedBy(index / 100).multipliedBy(midPrice.multipliedBy(4));
+      // let giveAmount = B.multipliedBy(index / 100);
+      if (index === 0) {
+        giveAmount = B.multipliedBy(1 / 100000000000);
+      }
+      // sellQuote needs to pass in the number of bases and get the number of quotes
+      const getAmount = pmm === null || pmm === void 0 ? void 0 : pmm.QuerySellQuote(giveAmount, pmmState);
+      // console.log('v2 QuerySellQuote', giveAmount.toString(), getAmount.toString());
+      if (!getAmount.isNaN() && getAmount.gt(0)) {
+        // Price on the right
+        const price = giveAmount.dividedBy(getAmount);
+        rightStatPoints.push({
+          giveAmount,
+          getAmount,
+          price
+        });
+        continue;
+      }
+      rightStatPoints.push({
+        giveAmount,
+        getAmount: new BigNumber(0),
+        price: new BigNumber(0)
+      });
+    }
+    if (leftStatPoints.length < 2 && rightStatPoints.length < 2) {
+      return {
+        leftStatAreaPoints: [],
+        rightStatAreaPoints: [],
+        maxLeftHeight: new BigNumber(10).multipliedBy(1.2),
+        maxRightHeight: new BigNumber(10).multipliedBy(1.2),
+        middlePriceLN10: new BigNumber(0),
+        minXLN10: new BigNumber(-1),
+        maxXLN10: new BigNumber(1)
+      };
+    }
+    // The data points are divided into two groups on the left and right, and the width and height corresponding to the area are calculated.
+    const leftStatAreaPoints = [];
+    for (let index = 1; index < leftStatPoints.length; index++) {
+      const statPoint = leftStatPoints[index];
+      const {
+        giveAmount,
+        getAmount,
+        price
+      } = statPoint;
+      const lastStatPoint = leftStatPoints[index - 1];
+      if (!price.isNaN() && price.gt(0) && lastStatPoint) {
+        const priceChange = price.minus(lastStatPoint.price).abs();
+        const giveAmountChange = giveAmount.minus(lastStatPoint.giveAmount).abs();
+        const getAmountChange = getAmount.minus(lastStatPoint.getAmount).abs();
+        const leftRectangleHeight = getAmountChange.multipliedBy(giveAmountChange);
+        if (index === 1) {
+          leftStatAreaPoints.push({
+            area: getAmount,
+            price,
+            middlePrice: price.plus(priceChange.div(1.1)),
+            rectangleHeight: leftRectangleHeight.plus(leftRectangleHeight.multipliedBy(0.03))
+          });
+        }
+        leftStatAreaPoints.push({
+          area: getAmount,
+          price,
+          middlePrice: price.plus(priceChange.div(2)),
+          rectangleHeight: leftRectangleHeight
+        });
+        maxLeftHeight = BigNumber.max(leftRectangleHeight, maxLeftHeight);
+      }
+    }
+    const rightStatAreaPoints = [];
+    for (let index = 1; index < rightStatPoints.length; index++) {
+      const statPoint = rightStatPoints[index];
+      const {
+        giveAmount,
+        getAmount,
+        price
+      } = statPoint;
+      const lastStatPoint = rightStatPoints[index - 1];
+      const lastPrice = lastStatPoint.price;
+      const lastGiveAmount = lastStatPoint.giveAmount;
+      const lastGetAmount = lastStatPoint.getAmount;
+      if (!price.isNaN() && price.gt(0) && lastStatPoint) {
+        const priceChange = price.minus(lastPrice).abs();
+        const giveAmountChange = giveAmount.minus(lastGiveAmount).abs();
+        const getAmountChange = getAmount.minus(lastGetAmount).abs();
+        const rightRectangleHeight = getAmountChange.multipliedBy(giveAmountChange);
+        if (index === 1) {
+          rightStatAreaPoints.push({
+            area: getAmount,
+            price,
+            middlePrice: price.minus(priceChange.div(1.1)),
+            rectangleHeight: rightRectangleHeight.plus(rightRectangleHeight.multipliedBy(0.03))
+          });
+        }
+        rightStatAreaPoints.push({
+          area: getAmount,
+          price,
+          middlePrice: price.minus(priceChange.div(2)),
+          rectangleHeight: rightRectangleHeight
+        });
+        maxRightHeight = BigNumber.max(rightRectangleHeight, maxRightHeight);
+      }
+    }
+    // Intuitively, the data points on the left are distributed from the middle to the left, and the data points on the right are distributed from the middle to the right.
+    // Left starting point
+    const leftStartStatPoint = leftStatPoints.length > 0 ? leftStatPoints[leftStatPoints.length - 1] : rightStatPoints[0];
+    // midpoint
+    const middleStatPoint = rightStatPoints.length > 0 ? rightStatPoints[0] : leftStatPoints[0];
+    // Right end point
+    const rightEndStatPoint = rightStatPoints.length > 0 ? rightStatPoints[rightStatPoints.length - 1] : leftStatPoints[0];
+    const minX = leftStartStatPoint.price;
+    const maxX = rightEndStatPoint.price;
+    const middlePrice = middleStatPoint.price;
+    const middlePriceLN10 = new BigNumber(Math.log10(middlePrice.toNumber()));
+    // Center the graphic
+    let minXLN10 = minX.gt(0) ? new BigNumber(Math.log10(minX.toNumber())) : new BigNumber(-Math.log10(maxX.toNumber()));
+    let maxXLN10 = maxX.gt(0) ? new BigNumber(Math.log10(maxX.toNumber())) : new BigNumber(-Math.log10(minX.toNumber()));
+    const rangeLN10 = BigNumber.max(middlePriceLN10.minus(minXLN10).abs(), maxXLN10.minus(middlePriceLN10).abs());
+    minXLN10 = middlePriceLN10.minus(rangeLN10);
+    maxXLN10 = middlePriceLN10.plus(rangeLN10);
+    // console.log('v2 price', {
+    //   // middlePrice: middlePrice.toString(),
+    //   minX: minX.toString(),
+    //   // maxX: maxX.toString(),
+    //   middlePriceLN10: middlePriceLN10.toString(),
+    //   minXLN10: minXLN10.toString(),
+    //   maxXLN10: maxXLN10.toString(),
+    // });
+    return {
+      leftStatAreaPoints,
+      rightStatAreaPoints,
+      maxLeftHeight: maxLeftHeight.multipliedBy(1.2),
+      maxRightHeight: maxRightHeight.multipliedBy(1.2),
+      minXLN10,
+      maxXLN10,
+      middlePriceLN10
+    };
+  }, [params]);
+}
+
+const bgColor = 'rgba(38, 39, 41, 0.3)';
+function LiquidityChartKonva({
+  width,
+  height,
+  params,
+  baseTokenSymbol,
+  quoteTokenSymbol,
+  colorMap
+}) {
+  const {
+    maxLeftHeight,
+    maxRightHeight,
+    leftStatAreaPoints,
+    rightStatAreaPoints,
+    minXLN10,
+    maxXLN10
+  } = usePoints({
+    params
+  });
+  const xAxisLabelHeight = 30.13;
+  const gridAreaHeight = height - xAxisLabelHeight;
+  const horizontalLineCount = 9;
+  // The number of vertical grid lines or the number of horizontal axis scales
+  const verticalLineCount = 7;
+  const tooltipRef = useRef(null);
+  const colorMapRes = merge({
+    grid: '#2A2A2D',
+    midPriceLine: '#313335',
+    leftBg: [0, bgColor, 1, '#31645d'],
+    leftLine: '#55f6db',
+    leftColor: '',
+    rightBg: [0, bgColor, 1, '#67303d'],
+    rightLine: '#ff4f73',
+    rightColor: '',
+    tooltipBg: '#121212',
+    tooltipColor: undefined,
+    textColor: '#606066'
+  }, colorMap);
+  const handleMouseover = evt => {
+    var _a;
+    const {
+      current: tooltip
+    } = tooltipRef;
+    const node = evt.target;
+    if (node && tooltip) {
+      // update tooltip
+      const mousePos = (_a = node.getStage()) === null || _a === void 0 ? void 0 : _a.getPointerPosition();
+      if (mousePos) {
+        const {
+          x
+        } = mousePos;
+        const middleX = width / 2;
+        if (Math.abs(x - middleX) <= 2) {
+          return;
+        }
+        if (x <= 2 || width - x <= 2) {
+          return;
+        }
+        const targetPrice = computeTargetPrice({
+          x,
+          width,
+          minXLN10,
+          maxXLN10
+        });
+        let targetAreaStatPoint = null;
+        let targetAreaStatPoints = [];
+        const isLeft = x < middleX;
+        if (isLeft) {
+          const result = getStatAreaPointByX({
+            areaPoints: leftStatAreaPoints,
+            targetPrice,
+            isLeft
+          });
+          targetAreaStatPoint = result.targetAreaStatPoint;
+          targetAreaStatPoints = result.targetAreaStatPoints;
+        } else {
+          const result = getStatAreaPointByX({
+            areaPoints: rightStatAreaPoints,
+            targetPrice,
+            isLeft
+          });
+          targetAreaStatPoint = result.targetAreaStatPoint;
+          targetAreaStatPoints = result.targetAreaStatPoints;
+        }
+        if (targetAreaStatPoint) {
+          const targetLN10 = computeTargetLN({
+            target: targetAreaStatPoint.middlePrice
+          });
+          const targetAreaPointX = computeTargetX({
+            minXLN10,
+            maxXLN10,
+            width,
+            targetLN10
+          });
+          const targetAreaPointY = computePointYByHeight({
+            maxHeight: isLeft ? maxLeftHeight : maxRightHeight,
+            gridAreaHeight,
+            value: targetAreaStatPoint.rectangleHeight
+          });
+          const tooltipLabel = tooltip.findOne('#tooltip');
+          const toolTipVertLine = tooltip.findOne('#toolTipVertLine');
+          const joinCircle = tooltip.findOne('#joinCircle');
+          const tooltipText = tooltip.findOne('#tooltip-Text');
+          const tooltipTag = tooltip.findOne('#tooltip-tag');
+          const priceTextLabel = tooltip.findOne('#priceTextLabel');
+          const priceTextLabelText = priceTextLabel === null || priceTextLabel === void 0 ? void 0 : priceTextLabel.findOne('#priceTextLabel-text');
+          const area = tooltip.findOne('#area');
+          tooltipLabel === null || tooltipLabel === void 0 ? void 0 : tooltipLabel.position({
+            x: targetAreaPointX,
+            y: targetAreaPointY - 5 - 6
+          });
+          tooltipText === null || tooltipText === void 0 ? void 0 : tooltipText.fill(colorMapRes.tooltipColor || (isLeft ? '#00FAD9' : '#FF5072'));
+          tooltipText === null || tooltipText === void 0 ? void 0 : tooltipText.text(isLeft ? chartT('pool.chart.liquidity-chart-buy', {
+            amount: formatShortNumber(targetAreaStatPoint.area),
+            symbol: baseTokenSymbol,
+            price: formatShortNumber(targetAreaStatPoint.price)
+          }) : chartT('pool.chart.liquidity-chart-sell', {
+            amount: formatShortNumber(targetAreaStatPoint.area),
+            symbol: quoteTokenSymbol,
+            price: formatShortNumber(targetAreaStatPoint.price)
+          }));
+          if (tooltipLabel && tooltipTag) {
+            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 > width) {
+              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([targetAreaPointX, gridAreaHeight, targetAreaPointX, targetAreaPointY]);
+          toolTipVertLine === null || toolTipVertLine === void 0 ? void 0 : toolTipVertLine.stroke(isLeft ? '#55f6db' : '#ff4f73');
+          let joinFill = isLeft ? 'rgb(86, 246, 218)' : '#FF5072';
+          let joinStroke = isLeft ? 'rgba(86, 246, 218, 0.3)' : 'rgba(255, 80, 114, 0.3)';
+          if (colorMapRes.leftLine && colorMapRes.rightLine) {
+            joinFill = isLeft ? colorMapRes.leftLine : colorMapRes.rightLine;
+            joinStroke = isLeft ? `rgba(${colorRgb(colorMapRes.leftLine)}, 0.4)` : `rgba(${colorRgb(colorMapRes.rightLine)}, 0.4)`;
+          }
+          if (joinCircle) {
+            joinCircle.x(targetAreaPointX);
+            joinCircle.y(targetAreaPointY);
+            joinCircle.fill(joinFill);
+            joinCircle.stroke(joinStroke);
+          }
+          if (priceTextLabel) {
+            priceTextLabel.x(targetAreaPointX);
+            priceTextLabel.y(gridAreaHeight + 8.08 + 1);
+            priceTextLabel.offsetX(priceTextLabel.width() / 2);
+            if (priceTextLabel.x() - priceTextLabel.width() / 2 < 0) {
+              priceTextLabel.x(priceTextLabel.width() / 2);
+            } else if (priceTextLabel.x() + priceTextLabel.width() / 2 > width) {
+              priceTextLabel.x(width - priceTextLabel.width() / 2);
+            } else {
+              priceTextLabel.x(x);
+            }
+          }
+          if (priceTextLabelText) {
+            priceTextLabelText.fill(colorMapRes.tooltipColor || (isLeft ? '#00FAD9' : '#FF5072'));
+            priceTextLabelText.text(formatShortNumber(targetAreaStatPoint.price));
+          }
+          // Gradient colored dots
+          const points = [];
+          for (const statPoint of targetAreaStatPoints) {
+            const {
+              middlePrice,
+              rectangleHeight
+            } = statPoint;
+            const targetLN10Gradient = computeTargetLN({
+              target: middlePrice
+            });
+            const xGradient = computeTargetX({
+              minXLN10,
+              maxXLN10,
+              width,
+              targetLN10: targetLN10Gradient
+            });
+            const y = computePointYByHeight({
+              maxHeight: isLeft ? maxLeftHeight : maxRightHeight,
+              gridAreaHeight,
+              value: rectangleHeight
+            });
+            points.push(xGradient, y + 1);
+          }
+          const linearGradientPoints = points.slice();
+          const [firstPointX, firstPointY] = linearGradientPoints;
+          if (isLeft) {
+            linearGradientPoints.push(targetAreaPointX, targetAreaPointY);
+            linearGradientPoints.push(targetAreaPointX, gridAreaHeight);
+            linearGradientPoints.push(firstPointX, gridAreaHeight);
+            linearGradientPoints.push(firstPointX, firstPointY);
+          } else {
+            linearGradientPoints.unshift(firstPointX, gridAreaHeight);
+            linearGradientPoints.unshift(targetAreaPointX, gridAreaHeight);
+            linearGradientPoints.unshift(targetAreaPointX, targetAreaPointY);
+          }
+          if (area) {
+            area.points(linearGradientPoints);
+            area.fill(isLeft ? colorMapRes.leftLine || '#2c5b56' : colorMapRes.rightLine || '#7b3a48');
+          }
+          tooltip.show();
+        }
+      }
+    }
+  };
+  const handleMouseOut = () => {
+    const {
+      current: tooltip
+    } = tooltipRef;
+    if (tooltip) {
+      tooltip.hide();
+    }
+  };
+  const gridLine = useGridLine({
+    gridAreaHeight,
+    gridAreaWidth: width,
+    horizontalLineCount,
+    verticalLineCount,
+    color: colorMapRes.grid
+  });
+  const horizontalLabel = useHorizontalLabel({
+    gridAreaHeight,
+    gridAreaWidth: width,
+    labelCount: verticalLineCount,
+    minXLN10,
+    maxXLN10,
+    color: colorMapRes.textColor
+  });
+  const middleLine = useMiddleLine({
+    gridAreaHeight,
+    gridAreaWidth: width,
+    color: colorMapRes.midPriceLine
+  });
+  const {
+    leftLine,
+    rightLine
+  } = useLiquidityLine({
+    leftStatAreaPoints,
+    rightStatAreaPoints,
+    minXLN10,
+    maxXLN10,
+    maxLeftHeight,
+    maxRightHeight,
+    gridAreaWidth: width,
+    gridAreaHeight,
+    colorMap: colorMapRes
+  });
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(Stage, {
+    width: width,
+    height: height,
+    onMouseMove: handleMouseover,
+    onMouseOver: handleMouseover,
+    onMouseEnter: handleMouseover,
+    onMouseOut: handleMouseOut,
+    children: [/*#__PURE__*/jsxRuntimeExports.jsxs(Layer, {
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(Rect, {
+        x: 0,
+        y: 0,
+        width: width,
+        height: gridAreaHeight,
+        stroke: colorMapRes.grid,
+        strokeWidth: 1
+      }), gridLine, horizontalLabel, leftLine, rightLine, middleLine]
+    }), /*#__PURE__*/jsxRuntimeExports.jsxs(Layer, {
+      ref: tooltipRef,
+      visible: false,
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(Line, {
+        points: [],
+        closed: true,
+        listening: false,
+        lineCap: "round",
+        lineJoin: "round",
+        id: "area"
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(Line, {
+        points: [],
+        strokeWidth: 1,
+        stroke: "#ff4f73",
+        lineJoin: "round",
+        lineCap: "round",
+        dash: [4, 6],
+        id: "toolTipVertLine"
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(Circle, {
+        x: 0,
+        y: 0,
+        radius: 5,
+        fill: "#FF5072",
+        stroke: "rgba(255, 80, 114, 0.3)",
+        strokeWidth: 12,
+        id: "joinCircle"
+      }), /*#__PURE__*/jsxRuntimeExports.jsxs(Label, {
+        listening: false,
+        x: 0,
+        y: 0,
+        id: "priceTextLabel",
+        children: [/*#__PURE__*/jsxRuntimeExports.jsx(Tag, {
+          fill: colorMapRes.tooltipBg,
+          id: "priceTextLabel-tag"
+        }), /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+          text: "-",
+          fontSize: 14,
+          fontFamily: "Manrope",
+          padding: 2,
+          fill: "#FF5072",
+          id: "priceTextLabel-text"
+        })]
+      }), /*#__PURE__*/jsxRuntimeExports.jsxs(Label, {
+        listening: false,
+        id: "tooltip",
+        children: [/*#__PURE__*/jsxRuntimeExports.jsx(Tag, {
+          fill: colorMapRes.tooltipBg,
+          pointerDirection: "down",
+          pointerWidth: 15,
+          pointerHeight: 8,
+          cornerRadius: 8,
+          lineJoin: "round",
+          id: "tooltip-tag"
+        }), /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+          text: "",
+          fontFamily: "Manrope",
+          fontSize: 12,
+          lineHeight: 17 / 12
+          // width={210}
+          ,
+          padding: labelPadding,
+          fill: "#FF5072",
+          id: "tooltip-Text"
+        })]
+      })]
+    })]
+  });
+}
+
+const LiquidityChart = ({
+  width = 834,
+  height = 462,
+  baseTokenSymbol,
+  quoteTokenSymbol,
+  pmmModel,
+  pmmParams,
+  midPrice,
+  notShowTipText,
+  colorMap
+}) => {
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(Container, {
+    children: [pmmParams !== undefined && midPrice !== undefined && pmmModel !== undefined && midPrice !== undefined && /*#__PURE__*/jsxRuntimeExports.jsx(LiquidityChartKonva, {
+      width: width,
+      height: height,
+      params: pmmParams,
+      midPrice: midPrice,
+      pmmModel: pmmModel,
+      baseTokenSymbol: baseTokenSymbol,
+      quoteTokenSymbol: quoteTokenSymbol,
+      colorMap: colorMap
+    }), !notShowTipText ? /*#__PURE__*/jsxRuntimeExports.jsxs(TipWrapper, {
+      children: ["*\xA0", chartT('pool.chart.liquidity-chart-tip', {
+        baseTokenSymbol
+      })]
+    }) : '']
+  });
+};
+
+export { LiquidityChart as default };