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

package/dist/index-s8jAQFVo.js

@@ -1,971 +0,0 @@
-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 };