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

package/dist/index-CwQNn_Bp.js

@@ -0,0 +1,1209 @@
+import BigNumber from 'bignumber.js';
+import { merge, throttle, debounce } from 'lodash';
+import React__default, { useEffect, useMemo, useRef, useState } from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { Stage, Layer, Rect, Line, Text, Circle, Label, Tag } from 'react-konva';
+import { c as computeXPortion, e as evalPoint, a as computeBaseVert, b as computeBaseMinByDistance, d as computeZoomMultiplesWhenZoom, f as computeBaseAfterZoom, u as updateTooltip, g as chartT, h as chartOffsetYBCToolTip, l as labelPadding, i as baseZoomMultiples, j as beforePriceImpactEffect, k as computeTargetXByTargetPrice } from './helper-CMiEdcFd.js';
+import { f as formatShortNumber, j as jsxRuntimeExports, a as formatPercentageNumber, b as fixedInputStringToFormattedNumber } from './index-bUI_7SKV.js';
+import { solveQuadraticFunctionForTarget, PMMModel } 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';
+
+var DefaultContext = {
+  color: undefined,
+  size: undefined,
+  className: undefined,
+  style: undefined,
+  attr: undefined
+};
+var IconContext = React__default.createContext && /*#__PURE__*/React__default.createContext(DefaultContext);
+
+var _excluded = ["attr", "size", "title"];
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function Tree2Element(tree) {
+  return tree && tree.map((node, i) => /*#__PURE__*/React__default.createElement(node.tag, _objectSpread({
+    key: i
+  }, node.attr), Tree2Element(node.child)));
+}
+function GenIcon(data) {
+  // eslint-disable-next-line react/display-name
+  return props => /*#__PURE__*/React__default.createElement(IconBase, _extends({
+    attr: _objectSpread({}, data.attr)
+  }, props), Tree2Element(data.child));
+}
+function IconBase(props) {
+  var elem = conf => {
+    var {
+        attr,
+        size,
+        title
+      } = props,
+      svgProps = _objectWithoutProperties(props, _excluded);
+    var computedSize = size || conf.size || "1em";
+    var className;
+    if (conf.className) className = conf.className;
+    if (props.className) className = (className ? className + " " : "") + props.className;
+    return /*#__PURE__*/React__default.createElement("svg", _extends({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, conf.attr, attr, svgProps, {
+      className: className,
+      style: _objectSpread(_objectSpread({
+        color: props.color || conf.color
+      }, conf.style), props.style),
+      height: computedSize,
+      width: computedSize,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), title && /*#__PURE__*/React__default.createElement("title", null, title), props.children);
+  };
+  return IconContext !== undefined ? /*#__PURE__*/React__default.createElement(IconContext.Consumer, null, conf => elem(conf)) : elem(DefaultContext);
+}
+
+// THIS FILE IS AUTO GENERATED
+function BiChevronLeft (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"d":"M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"},"child":[]}]})(props);
+}function BiChevronRight (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"d":"M10.707 17.707 16.414 12l-5.707-5.707-1.414 1.414L13.586 12l-4.293 4.293z"},"child":[]}]})(props);
+}function BiMinus (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"d":"M5 11h14v2H5z"},"child":[]}]})(props);
+}function BiPlus (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"d":"M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"},"child":[]}]})(props);
+}
+
+const Input = styled.input`
+  margin: 4px 10px 4px 6px;
+  border-radius: 10px;
+  border: 1px solid #373739;
+  padding: 4px 9px;
+  background-color: #1a1a1b;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  outline: none;
+  width: 96px;
+  &:focus {
+    border-color: #fff;
+
+    ${({
+  error
+}) => error && css`
+        border-color: red;
+      `}
+  }
+`;
+
+/**
+ * 防止鼠标在图上滚动滚轮时页面上下滑动
+ * @param param0
+ */
+const usePreventWheel = ({
+  id
+}) => {
+  useEffect(() => {
+    function handleWheelEvt(event) {
+      event.preventDefault();
+    }
+    // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support
+    let passiveSupported = false;
+    try {
+      const options = {
+        get passive() {
+          // This function will be called when the browser
+          //   attempts to access the passive property.
+          passiveSupported = true;
+          return false;
+        }
+      };
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      window.addEventListener('test', () => {}, options);
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      window.removeEventListener('test', () => {});
+    } catch (err) {
+      passiveSupported = false;
+    }
+    const container = document.getElementById(id);
+    // https://github.com/inuyaksa/jquery.nicescroll/issues/799
+    const options = passiveSupported ? {
+      passive: false
+    } : false;
+    container === null || container === void 0 ? void 0 : container.addEventListener('wheel', handleWheelEvt, options);
+    return () => {
+      container === null || container === void 0 ? void 0 : container.removeEventListener('wheel', handleWheelEvt);
+    };
+  }, [id]);
+};
+
+function useDepthLinePoints({
+  chartHeight,
+  chartWidth,
+  midPrice,
+  xPoints,
+  pmmModel,
+  baseMinAndZoomMultiples,
+  buyYPortion,
+  sellYPortion
+}) {
+  return useMemo(() => {
+    const quoteLinePoints = [];
+    const baseLinePoints = [];
+    const midPriceLinePoints = [];
+    const {
+      baseMin,
+      zoomMultiples
+    } = baseMinAndZoomMultiples;
+    const xPortion = computeXPortion(chartWidth, zoomMultiples);
+    // 1 -> 10 -> 100 index increases from 0 to 2
+    // If the minimum value on the left is not midPrice/10, the existing calculation method is to calculate the maximum value based on the minimum value and multiply by 10^2
+    const multiplesNum = zoomMultiples * 2;
+    const step = new BigNumber(multiplesNum).div(xPoints);
+    // The position of the middle price
+    let midPriceN = new BigNumber(Math.log(midPrice.div(baseMin).toNumber()) / Math.log(10));
+    midPriceN = BigNumber.minimum(multiplesNum, midPriceN);
+    midPriceN = BigNumber.maximum(0, midPriceN);
+    for (let i = new BigNumber(0); i.lte(midPriceN);) {
+      const price = baseMin.multipliedBy(10 ** i.toNumber());
+      const result = evalPoint({
+        val: price,
+        model: pmmModel,
+        midPrice
+      });
+      if (!result.vert.isNaN()) {
+        const x = i.div(xPortion).toNumber();
+        const y = chartHeight - result.vert.div(buyYPortion).toNumber();
+        quoteLinePoints.push(x, y);
+      }
+      i = i.plus(step);
+    }
+    for (let i = midPriceN; i.lte(multiplesNum);) {
+      const price = baseMin.multipliedBy(10 ** i.toNumber());
+      const result = evalPoint({
+        val: price,
+        model: pmmModel,
+        midPrice
+      });
+      if (!result.vert.isNaN()) {
+        const x = i.div(xPortion).toNumber();
+        const y = chartHeight - result.vert.div(sellYPortion).toNumber();
+        baseLinePoints.push(x, y);
+      }
+      i = i.plus(step);
+    }
+    const midPriceX = midPriceN.div(xPortion).toNumber();
+    const [, firstY] = quoteLinePoints;
+    // k === 0 means selling coins at a constant price. The curve is two horizontal lines and requires special processing.
+    const isZeroK = pmmModel.k.eq(0);
+    if (isZeroK) {
+      quoteLinePoints.push(midPriceX, firstY || chartHeight);
+    }
+    quoteLinePoints.push(midPriceX, chartHeight);
+    midPriceLinePoints.push(midPriceX, chartHeight, midPriceX, 0);
+    const maxResult = evalPoint({
+      val: baseMin.multipliedBy(10 ** multiplesNum),
+      model: pmmModel,
+      midPrice
+    });
+    let maxHeightY = chartHeight;
+    const maxHeightX = new BigNumber(multiplesNum).div(xPortion).toNumber();
+    if (!maxResult.vert.isNaN()) {
+      maxHeightY = chartHeight - maxResult.vert.div(sellYPortion).toNumber();
+    }
+    if (isZeroK && baseLinePoints.length >= 2) {
+      baseLinePoints.unshift(midPriceX, maxHeightY);
+      baseLinePoints.unshift(midPriceX, chartHeight);
+    }
+    baseLinePoints.push(maxHeightX, maxHeightY);
+    // The left side has been dragged to the left side of baseMin
+    if (midPriceN.lte(0)) {
+      baseLinePoints.unshift(0, chartHeight);
+    }
+    return {
+      quoteLinePoints,
+      quoteLineAreaPoints: [0, chartHeight, 0, firstY, ...quoteLinePoints],
+      quoteLineAreaLinearGradientEndPointY: firstY,
+      baseLinePoints,
+      baseLineAreaPoints: [...baseLinePoints, maxHeightX, chartHeight],
+      baseLineAreaLinearGradientEndPointY: maxHeightY,
+      midPriceLinePoints
+    };
+  }, [baseMinAndZoomMultiples, chartWidth, xPoints, midPrice, pmmModel, chartHeight, buyYPortion, sellYPortion]);
+}
+
+function useGridLinePoints({
+  chartHeight,
+  chartWidth,
+  horizontalLineCount,
+  verticalLineCount
+}) {
+  return useMemo(() => {
+    const horizontalGridLines = [];
+    const horizontalGridPerBlockHeight = chartHeight / (horizontalLineCount + 1);
+    const verticalGridLines = [];
+    const verticalGridPerBlockWidth = chartWidth / verticalLineCount;
+    for (let index = 0; index < horizontalLineCount; index++) {
+      const y = horizontalGridPerBlockHeight * (index + 1);
+      horizontalGridLines.push([0, y, chartWidth, y]);
+    }
+    for (let index = 0; index < verticalLineCount; index++) {
+      const x = verticalGridPerBlockWidth * index + verticalGridPerBlockWidth / 2;
+      verticalGridLines.push([x, 0, x, chartHeight]);
+    }
+    return {
+      horizontalGridLines,
+      verticalGridLines
+    };
+  }, [chartHeight, chartWidth, horizontalLineCount, verticalLineCount]);
+}
+
+function useHorizontalLabelPoints({
+  chartHeight,
+  chartWidth,
+  xAxisPoints,
+  oneXPx,
+  baseMinAndZoomMultiples
+}) {
+  return useMemo(() => {
+    const xPortion = computeXPortion(chartWidth, baseMinAndZoomMultiples.zoomMultiples);
+    const horizontalLabelTickPoints = [];
+    const horizontalLabelTextPoints = [];
+    for (let i = 0; i < xAxisPoints; i++) {
+      horizontalLabelTickPoints.push([i * oneXPx + oneXPx / 2, chartHeight, i * oneXPx + oneXPx / 2, chartHeight + 4]);
+      const power = xPortion.multipliedBy(i).multipliedBy(oneXPx).plus(xPortion.multipliedBy(oneXPx / 2)).toNumber();
+      const axisNum = baseMinAndZoomMultiples.baseMin.multipliedBy(10 ** power);
+      const x = i * oneXPx;
+      const y = chartHeight + 2 + 4;
+      const text = formatShortNumber(axisNum);
+      horizontalLabelTextPoints.push({
+        x,
+        y,
+        text
+      });
+    }
+    return {
+      horizontalLabelTickPoints,
+      horizontalLabelTextPoints
+    };
+  }, [baseMinAndZoomMultiples.baseMin, baseMinAndZoomMultiples.zoomMultiples, chartHeight, chartWidth, oneXPx, xAxisPoints]);
+}
+
+const bgColor = 'rgba(38, 39, 41, 0.3)';
+// toolTip the height of the arrow
+const toolTipPointerHeight = 8;
+const toolTipPointerWidth = 15;
+const xAxisHight = 18;
+const xPoints = 50;
+/** The number of horizontal axis scales or the number of vertical grid lines */
+const xAxisPoints = 7;
+// Number of horizontal grid lines
+const horizontalLineCount = 9;
+function DepthChartKonva({
+  width,
+  height,
+  midPrice,
+  pmmModel,
+  params,
+  baseTokenSymbol,
+  quoteTokenSymbol,
+  baseMinAndZoomMultiples,
+  colorMap,
+  setBaseMinAndZoomMultiples
+}) {
+  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
+  }, colorMap);
+  const chartWidth = width;
+  const chartHeight = height - xAxisHight;
+  const oneXPx = chartWidth / xAxisPoints;
+  const {
+    buyBaseVert,
+    sellBaseVert
+  } = computeBaseVert({
+    midPrice,
+    q: params.q,
+    q0: params.q0,
+    pmmModel
+  });
+  const buyYPortion = buyBaseVert.div(chartHeight);
+  const sellYPortion = sellBaseVert.div(chartHeight);
+  const tooltipRef = useRef(null);
+  const stageRef = useRef(null);
+  const {
+    current: tooltip
+  } = tooltipRef;
+  const dragStartXRef = useRef(0);
+  const pointerXRef = useRef();
+  const {
+    horizontalGridLines,
+    verticalGridLines
+  } = useGridLinePoints({
+    chartHeight,
+    chartWidth,
+    horizontalLineCount,
+    verticalLineCount: xAxisPoints
+  });
+  const {
+    horizontalLabelTickPoints,
+    horizontalLabelTextPoints
+  } = useHorizontalLabelPoints({
+    chartHeight,
+    chartWidth,
+    xAxisPoints,
+    oneXPx,
+    baseMinAndZoomMultiples
+  });
+  const {
+    quoteLinePoints,
+    quoteLineAreaPoints,
+    quoteLineAreaLinearGradientEndPointY,
+    baseLinePoints,
+    baseLineAreaPoints,
+    baseLineAreaLinearGradientEndPointY,
+    midPriceLinePoints
+  } = useDepthLinePoints({
+    chartHeight,
+    chartWidth,
+    midPrice,
+    xPoints,
+    pmmModel,
+    baseMinAndZoomMultiples,
+    buyYPortion,
+    sellYPortion
+  });
+  const handleMouseover = evt => {
+    var _a;
+    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;
+        if (x > chartWidth) {
+          tooltip.hide();
+          return;
+        }
+        updateTooltip({
+          x,
+          tooltip,
+          buyBaseVert,
+          sellBaseVert,
+          chartWidth,
+          chartHeight,
+          midPrice,
+          pmmModel,
+          baseTokenSymbol,
+          quoteTokenSymbol,
+          baseMinAndZoomMultiples,
+          t: chartT,
+          isHover: true,
+          color: colorMapRes.tooltipColor,
+          leftColor: colorMapRes.leftLine,
+          rightColor: colorMapRes.rightLine
+        });
+      }
+    }
+  };
+  const handleMouseOut = () => {
+    if (tooltip) {
+      tooltip.hide();
+    }
+  };
+  const updateWhenDrag = useMemo(() => throttle(evt => {
+    const {
+      target
+    } = evt;
+    const stage = target.getStage();
+    if (stage) {
+      stage.container().style.cursor = 'grabbing';
+      const mousePos = stage === null || stage === void 0 ? void 0 : stage.getPointerPosition();
+      if (mousePos) {
+        const dragDistance = mousePos.x - dragStartXRef.current;
+        dragStartXRef.current = mousePos.x;
+        pointerXRef.current = mousePos.x;
+        setBaseMinAndZoomMultiples(prev => {
+          if (prev.baseMin === undefined) {
+            return prev;
+          }
+          return {
+            baseMin: computeBaseMinByDistance({
+              dragDistance,
+              prevBaseMin: prev.baseMin,
+              chartWidth,
+              zoomMultiples: prev.zoomMultiples
+            }),
+            zoomMultiples: prev.zoomMultiples,
+            targetMarginPriceX: 0
+          };
+        });
+      }
+    }
+  }, 100), [chartWidth, setBaseMinAndZoomMultiples]);
+  const updateWhenWheel = useMemo(() => throttle(event => {
+    // eslint-disable-next-line no-param-reassign
+    event.cancelBubble = true;
+    event.evt.preventDefault();
+    // scroll up
+    const isScrollUp = event.evt.deltaY < 0;
+    setBaseMinAndZoomMultiples(prev => {
+      const newZoomMultiples = computeZoomMultiplesWhenZoom({
+        zoomIn: isScrollUp,
+        prevZoomMultiples: prev.zoomMultiples
+      });
+      return {
+        baseMin: computeBaseAfterZoom({
+          midPrice,
+          zoomMultiples: newZoomMultiples
+        }),
+        zoomMultiples: newZoomMultiples,
+        targetMarginPriceX: prev.targetMarginPriceX
+      };
+    });
+  }, 100), [midPrice, setBaseMinAndZoomMultiples]);
+  useEffect(() => {
+    if (baseMinAndZoomMultiples.targetMarginPriceX > 0 && tooltip !== null) {
+      updateTooltip({
+        x: baseMinAndZoomMultiples.targetMarginPriceX,
+        tooltip,
+        buyBaseVert,
+        sellBaseVert,
+        chartWidth,
+        chartHeight,
+        midPrice,
+        pmmModel,
+        baseTokenSymbol,
+        quoteTokenSymbol,
+        baseMinAndZoomMultiples,
+        t: chartT,
+        color: colorMapRes.tooltipColor,
+        leftColor: colorMapRes.leftLine,
+        rightColor: colorMapRes.rightLine
+      });
+      return;
+    }
+    if (pointerXRef.current !== undefined && tooltip !== null) {
+      updateTooltip({
+        x: pointerXRef.current,
+        tooltip,
+        buyBaseVert,
+        sellBaseVert,
+        chartWidth,
+        chartHeight,
+        midPrice,
+        pmmModel,
+        baseTokenSymbol,
+        quoteTokenSymbol,
+        baseMinAndZoomMultiples,
+        t: chartT,
+        isHover: true,
+        color: colorMapRes.tooltipColor,
+        leftColor: colorMapRes.leftLine,
+        rightColor: colorMapRes.rightLine
+      });
+    }
+  }, [baseMinAndZoomMultiples, baseTokenSymbol, buyBaseVert, chartHeight, chartWidth, colorMapRes.leftLine, colorMapRes.rightLine, colorMapRes.tooltipColor, midPrice, pmmModel, quoteTokenSymbol, sellBaseVert, tooltip]);
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(Stage, {
+    ref: stageRef,
+    width: width,
+    offsetY: -chartOffsetYBCToolTip,
+    height: height + chartOffsetYBCToolTip,
+    draggable: true,
+    dragBoundFunc: function () {
+      return {
+        x: this.absolutePosition().x,
+        y: this.absolutePosition().y
+      };
+    },
+    onMouseMove: handleMouseover,
+    onMouseOver: handleMouseover,
+    onMouseOut: handleMouseOut,
+    onDragStart: function (evt) {
+      const {
+        target
+      } = evt;
+      const stage = target.getStage();
+      if (stage) {
+        const mousePos = stage.getPointerPosition();
+        if (mousePos) {
+          dragStartXRef.current = mousePos.x;
+        }
+      }
+    },
+    onDragMove: updateWhenDrag,
+    onDragEnd: evt => {
+      const {
+        target
+      } = evt;
+      const stage = target.getStage();
+      if (stage) {
+        stage.container().style.cursor = 'pointer';
+      }
+    },
+    onWheel: updateWhenWheel,
+    children: [/*#__PURE__*/jsxRuntimeExports.jsxs(Layer, {
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(Rect, {
+        x: 0,
+        y: 0,
+        width: width,
+        height: chartHeight,
+        stroke: colorMapRes.grid,
+        strokeWidth: 1
+      }), horizontalGridLines.map((points, index) => /*#__PURE__*/jsxRuntimeExports.jsx(Line, {
+        points: points,
+        stroke: colorMapRes.grid,
+        strokeWidth: 1,
+        lineCap: "round",
+        lineJoin: "round",
+        listening: false
+      }, index)), verticalGridLines.map((points, index) => /*#__PURE__*/jsxRuntimeExports.jsx(Line, {
+        points: points,
+        stroke: colorMapRes.grid,
+        strokeWidth: 1,
+        lineCap: "round",
+        lineJoin: "round",
+        listening: false
+      }, index)), horizontalLabelTickPoints.map((tickPoints, index) => /*#__PURE__*/jsxRuntimeExports.jsx(Line, {
+        points: tickPoints,
+        stroke: "#9d9d9d",
+        strokeWidth: 1,
+        lineCap: "round",
+        lineJoin: "round",
+        listening: false
+      }, index)), horizontalLabelTextPoints.map((textPoint, index) => /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+        x: textPoint.x,
+        y: textPoint.y,
+        text: textPoint.text,
+        fontFamily: "Manrope",
+        fontSize: 12,
+        fill: "#9d9d9d",
+        width: oneXPx,
+        padding: 0,
+        align: "center",
+        verticalAlign: "bottom",
+        listening: false
+      }, index)), /*#__PURE__*/jsxRuntimeExports.jsx(Line, {
+        points: quoteLineAreaPoints,
+        closed: true,
+        listening: false,
+        lineCap: "round",
+        lineJoin: "round",
+        fillLinearGradientStartPoint: {
+          x: 0,
+          y: chartHeight
+        },
+        fillLinearGradientEndPoint: {
+          x: 0,
+          y: quoteLineAreaLinearGradientEndPointY
+        },
+        fillLinearGradientColorStops: colorMapRes.leftBg
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(Line, {
+        points: quoteLinePoints,
+        stroke: colorMapRes.leftLine,
+        strokeWidth: 2,
+        lineCap: "round",
+        lineJoin: "round",
+        listening: false
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(Line, {
+        points: baseLineAreaPoints,
+        closed: true,
+        listening: false,
+        lineCap: "round",
+        lineJoin: "round",
+        fillLinearGradientStartPoint: {
+          x: chartWidth,
+          y: chartHeight
+        },
+        fillLinearGradientEndPoint: {
+          x: chartWidth,
+          y: baseLineAreaLinearGradientEndPointY
+        },
+        fillLinearGradientColorStops: colorMapRes.rightBg
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(Line, {
+        points: baseLinePoints,
+        stroke: colorMapRes.rightLine,
+        strokeWidth: 2,
+        lineCap: "round",
+        lineJoin: "round",
+        listening: false
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(Line, {
+        points: midPriceLinePoints,
+        stroke: colorMapRes.midPriceLine,
+        strokeWidth: 2,
+        lineCap: "round",
+        lineJoin: "round",
+        listening: false
+      })]
+    }), /*#__PURE__*/jsxRuntimeExports.jsxs(Layer, {
+      ref: tooltipRef,
+      visible: false,
+      listening: false,
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(Line, {
+        points: [],
+        stroke: "#ff4f73",
+        strokeWidth: 1,
+        lineCap: "round",
+        lineJoin: "round",
+        dash: [4, 6],
+        id: "toolTipVertLine"
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(Line, {
+        points: [],
+        stroke: "ff4f73",
+        strokeWidth: 1,
+        lineCap: "round",
+        lineJoin: "round",
+        dash: [4, 6],
+        id: "toolTipHoriLine"
+      }), /*#__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, {
+        x: 0,
+        y: 0,
+        id: "priceTextLabel",
+        children: [/*#__PURE__*/jsxRuntimeExports.jsx(Tag, {
+          fill: colorMapRes.tooltipBg,
+          id: "priceTextLabel-tag"
+        }), /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+          text: "",
+          fontSize: 12,
+          fontFamily: "Manrope",
+          padding: 4,
+          fill: "#FF5072",
+          id: "priceTextLabel-text"
+        })]
+      }), /*#__PURE__*/jsxRuntimeExports.jsxs(Label, {
+        x: 0,
+        y: 0,
+        id: "slippageTextLabel",
+        children: [/*#__PURE__*/jsxRuntimeExports.jsx(Tag, {
+          fill: colorMapRes.tooltipBg,
+          id: "slippageTextLabel-tag"
+        }), /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+          text: "",
+          fontSize: 12,
+          fontFamily: "Manrope",
+          padding: 4,
+          fill: "#FF5072",
+          id: "slippageTextLabel-text"
+        })]
+      }), /*#__PURE__*/jsxRuntimeExports.jsxs(Label, {
+        x: 0,
+        y: 0,
+        id: "toolTip",
+        children: [/*#__PURE__*/jsxRuntimeExports.jsx(Tag, {
+          fill: colorMapRes.tooltipBg,
+          pointerDirection: "down",
+          pointerWidth: toolTipPointerWidth,
+          pointerHeight: toolTipPointerHeight,
+          cornerRadius: toolTipPointerHeight,
+          lineJoin: "round",
+          id: "toolTip-tag"
+        }), /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+          text: "-",
+          fontSize: 12,
+          lineHeight: 17 / 12,
+          padding: labelPadding,
+          fontFamily: "Manrope",
+          fill: "#FFFFFF",
+          id: "toolTip-text"
+        })]
+      })]
+    })]
+  });
+}
+
+const BaseButton = styled.button`
+  margin: 0;
+  border: none;
+  padding: 0;
+  background: none;
+
+  &:focus {
+    outline: none;
+  }
+  &:active {
+    outline: none;
+  }
+`;
+
+const Container = styled.div`
+  height: 100%;
+`;
+const AmountInputContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const InputSectionWrapper = styled.div`
+  border: 1px solid ${({
+  borderColor
+}) => borderColor || '#2a2a2d'};
+  flex: 1 0 50%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 17px;
+  color: #606066;
+
+  & + & {
+    border-left: none;
+  }
+`;
+const PriceImpactWrapper = styled.span`
+  color: #85858d;
+`;
+const OptButtonGroup = styled.div`
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 9px;
+`;
+const OptButton = styled(BaseButton)`
+  border-radius: 13px;
+  background-color: #373739;
+  width: 24px;
+  height: 24px;
+  font-size: 18px;
+  color: #85858d;
+  line-height: 0;
+  & + & {
+    margin-left: 10px;
+  }
+  &:first-child,
+  &:last-child {
+    font-size: 20px;
+  }
+
+  &:hover {
+    color: #fff;
+  }
+`;
+
+/**
+ * Calculate marginPrice for buying or selling target baseToken
+ * @param param0
+ * @returns
+ */
+function computeMarginPrice({
+  params,
+  target,
+  isBuy = true
+}) {
+  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 newB = isBuy ? b.plus(target) : b.minus(target);
+  if (newB.lt(b0) || b.eq(b0)) {
+    // b < b0: The shortage of baseToken corresponds to the user buying baseToken. At this time, the quoteToken in the pool is higher than the regression target; the price curve is directly used to calculate the marginal price.
+    let r = b0.multipliedBy(b0).div(newB).div(newB);
+    r = new BigNumber(1).minus(k).plus(k.multipliedBy(r));
+    return i.multipliedBy(r);
+  }
+  // There is a shortage of quoteToken, which corresponds to the user selling baseToken, causing the number of quoteTokens in the pool to be lower than the return target at this time; the parameter target is the number of baseTokens sold by the user, and it is necessary to calculate the number of quoteTokens obtained after selling based on this value, that is, the user How many quoteTokens are obtained; then put this value into the price curve equation to calculate the marginal price.
+  const pmm = new PMMModel();
+  pmm.RStatus = R;
+  pmm.B = b;
+  pmm.B0 = b0;
+  pmm.Q = q;
+  pmm.Q0 = q0;
+  pmm.i = i;
+  pmm.k = k;
+  pmm.mtFeeRate = new BigNumber(0);
+  pmm.lpFeeRate = new BigNumber(0);
+  let getAmount = new BigNumber(0);
+  if (isBuy) {
+    getAmount = pmm.querySellBase(target);
+  } else {
+    getAmount = pmm.queryBuyBase(target);
+  }
+  const deltaQ = isBuy ? q.minus(getAmount) : q.plus(getAmount);
+  let r = q0.multipliedBy(q0).div(deltaQ).div(deltaQ);
+  r = new BigNumber(1).minus(k).plus(k.multipliedBy(r));
+  return i.div(r);
+}
+/**
+ * Calculate the margin price for selling target baseTokens
+ */
+function computeSellMarginPrice({
+  params,
+  target
+}) {
+  return computeMarginPrice({
+    params,
+    target,
+    isBuy: false
+  });
+}
+
+const DepthChart = ({
+  chartId,
+  width = 834,
+  height = 460,
+  baseTokenSymbol,
+  quoteTokenSymbol,
+  pmmModel,
+  pmmParams,
+  midPrice = new BigNumber(0),
+  colorMap,
+  notShowAmountInput
+}) => {
+  usePreventWheel({
+    id: chartId
+  });
+  const [buyAmount, setBuyAmount] = useState('');
+  const [sellAmount, setSellAmount] = useState('');
+  const [buyImpact, setBuyImpact] = useState('-');
+  const [sellImpact, setSellImpact] = useState('-');
+  // 横轴起点和缩放比例同时变化，变化也会引起价格冲击点变化
+  const [baseMinAndZoomMultiples, setBaseMinAndZoomMultiples] = useState({
+    baseMin: new BigNumber(0),
+    zoomMultiples: baseZoomMultiples,
+    targetMarginPriceX: 0
+  });
+  useEffect(() => {
+    if (midPrice !== undefined) {
+      setBaseMinAndZoomMultiples(prev => {
+        return {
+          baseMin: computeBaseAfterZoom({
+            midPrice,
+            zoomMultiples: prev.zoomMultiples
+          }),
+          zoomMultiples: prev.zoomMultiples,
+          targetMarginPriceX: prev.targetMarginPriceX
+        };
+      });
+    }
+  }, [midPrice]);
+  const amountOnChange = useMemo(() => debounce(({
+    type,
+    amount
+  }) => {
+    if (amount === '' && midPrice) {
+      setBaseMinAndZoomMultiples({
+        baseMin: computeBaseAfterZoom({
+          midPrice,
+          zoomMultiples: baseZoomMultiples
+        }),
+        zoomMultiples: baseZoomMultiples,
+        targetMarginPriceX: 0
+      });
+      if (type === 'buy') {
+        setBuyImpact('-');
+      } else {
+        setSellImpact('-');
+      }
+    }
+    const amountB = new BigNumber(amount);
+    if (amountB.lte(0) || amountB.isNaN() || !(pmmParams === null || pmmParams === void 0 ? void 0 : pmmParams.b) || amountB.gte(pmmParams.b) || !midPrice) {
+      return;
+    }
+    if (type === 'buy') {
+      const marginPrice = computeMarginPrice({
+        params: pmmParams,
+        target: amountB
+      });
+      setBaseMinAndZoomMultiples(prev => {
+        const impactResult = beforePriceImpactEffect({
+          currentBaseMinAndZoomMultiples: prev,
+          targetPrice: marginPrice,
+          midPrice,
+          width
+        });
+        if (impactResult.isSkip) {
+          return {
+            baseMin: prev.baseMin,
+            zoomMultiples: prev.zoomMultiples,
+            targetMarginPriceX: impactResult.targetX
+          };
+        }
+        if (impactResult.targetX > 0) {
+          return {
+            baseMin: impactResult.baseMin,
+            zoomMultiples: impactResult.zoomMultiples,
+            targetMarginPriceX: impactResult.targetX
+          };
+        }
+        const result = computeTargetXByTargetPrice({
+          midPrice,
+          width,
+          type,
+          targetPrice: marginPrice
+        });
+        const newZoomMultiples = result.zoomMultiples.dp(6).toNumber();
+        return {
+          baseMin: computeBaseAfterZoom({
+            midPrice,
+            zoomMultiples: newZoomMultiples
+          }),
+          zoomMultiples: newZoomMultiples,
+          targetMarginPriceX: result.targetX
+        };
+      });
+      // console.log(
+      //   'v2 marginPrice',
+      //   amountB.toFixed(6),
+      //   marginPrice.toFixed(6),
+      //   result.targetX,
+      //   result.zoomMultiples.toFixed(6),
+      // );
+      setBuyImpact(`${formatPercentageNumber({
+        input: marginPrice.minus(midPrice).div(midPrice)
+      })}`);
+    } else {
+      const marginPrice = computeSellMarginPrice({
+        params: pmmParams,
+        target: amountB
+      });
+      setBaseMinAndZoomMultiples(prev => {
+        const impactResult = beforePriceImpactEffect({
+          currentBaseMinAndZoomMultiples: prev,
+          targetPrice: marginPrice,
+          midPrice,
+          width
+        });
+        if (impactResult.isSkip) {
+          return {
+            baseMin: prev.baseMin,
+            zoomMultiples: prev.zoomMultiples,
+            targetMarginPriceX: impactResult.targetX
+          };
+        }
+        if (impactResult.targetX > 0) {
+          return {
+            baseMin: impactResult.baseMin,
+            zoomMultiples: impactResult.zoomMultiples,
+            targetMarginPriceX: impactResult.targetX
+          };
+        }
+        const result = computeTargetXByTargetPrice({
+          midPrice,
+          width,
+          type,
+          targetPrice: marginPrice
+        });
+        const newZoomMultiples = result.zoomMultiples.dp(6).toNumber();
+        return {
+          baseMin: computeBaseAfterZoom({
+            midPrice,
+            zoomMultiples: newZoomMultiples
+          }),
+          zoomMultiples: newZoomMultiples,
+          targetMarginPriceX: result.targetX
+        };
+      });
+      setSellImpact(`+${formatPercentageNumber({
+        input: marginPrice.minus(midPrice).div(midPrice)
+      })}`);
+    }
+  }, 300), [pmmParams, midPrice, width]);
+  useEffect(() => {
+    if (buyAmount !== undefined) {
+      amountOnChange({
+        type: 'buy',
+        amount: buyAmount
+      });
+    }
+  }, [amountOnChange, buyAmount]);
+  useEffect(() => {
+    if (sellAmount !== undefined) {
+      amountOnChange({
+        type: 'sell',
+        amount: sellAmount
+      });
+    }
+  }, [amountOnChange, sellAmount]);
+  const handleDragButtonMouseDown = moveLeft => {
+    let dragDistance = 0;
+    if (moveLeft) {
+      dragDistance = -(width * 0.1);
+    } else {
+      dragDistance = width * 0.1;
+    }
+    setBaseMinAndZoomMultiples(prev => {
+      if (prev.baseMin === undefined) {
+        return prev;
+      }
+      return {
+        baseMin: computeBaseMinByDistance({
+          dragDistance,
+          prevBaseMin: prev.baseMin,
+          chartWidth: width,
+          zoomMultiples: prev.zoomMultiples
+        }),
+        zoomMultiples: prev.zoomMultiples,
+        targetMarginPriceX: prev.targetMarginPriceX
+      };
+    });
+  };
+  const handleZoomButtonMouseDown = zoomIn => {
+    setBaseMinAndZoomMultiples(prev => {
+      const newZoomMultiples = computeZoomMultiplesWhenZoom({
+        zoomIn: zoomIn !== null && zoomIn !== void 0 ? zoomIn : false,
+        prevZoomMultiples: prev.zoomMultiples
+      });
+      return {
+        baseMin: computeBaseAfterZoom({
+          midPrice,
+          zoomMultiples: newZoomMultiples
+        }),
+        zoomMultiples: newZoomMultiples,
+        targetMarginPriceX: prev.targetMarginPriceX
+      };
+    });
+  };
+  const buyInputError = useMemo(() => {
+    if (buyAmount === '') {
+      return false;
+    }
+    const amountB = new BigNumber(buyAmount);
+    if (amountB.lte(0) || amountB.isNaN() || !(pmmParams === null || pmmParams === void 0 ? void 0 : pmmParams.b) || amountB.gte(pmmParams.b)) {
+      return true;
+    }
+    return false;
+  }, [buyAmount, pmmParams]);
+  const sellInputError = useMemo(() => {
+    if (sellAmount === '') {
+      return false;
+    }
+    const amountB = new BigNumber(sellAmount);
+    if (amountB.lte(0) || amountB.isNaN() || !(pmmParams === null || pmmParams === void 0 ? void 0 : pmmParams.b) || amountB.gte(pmmParams.b)) {
+      return true;
+    }
+    return false;
+  }, [sellAmount, pmmParams]);
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(Container, {
+    id: chartId,
+    children: [!notShowAmountInput ? /*#__PURE__*/jsxRuntimeExports.jsxs(AmountInputContainer, {
+      children: [/*#__PURE__*/jsxRuntimeExports.jsxs(InputSectionWrapper, {
+        borderColor: colorMap && colorMap.grid,
+        children: [chartT('pool.chart.buy-amount', {
+          symbol: baseTokenSymbol
+        }), /*#__PURE__*/jsxRuntimeExports.jsx(Input, {
+          value: buyAmount,
+          error: buyInputError,
+          onChange: evt => {
+            const amount = fixedInputStringToFormattedNumber(evt.target.value, 2);
+            if (amount !== null) {
+              setBuyAmount(amount);
+            }
+          }
+        }), /*#__PURE__*/jsxRuntimeExports.jsx(PriceImpactWrapper, {
+          children: chartT('pool.chart.price-impact', {
+            amount: buyImpact
+          })
+        })]
+      }), /*#__PURE__*/jsxRuntimeExports.jsxs(InputSectionWrapper, {
+        borderColor: colorMap && colorMap.grid,
+        children: [chartT('pool.chart.sell-amount', {
+          symbol: baseTokenSymbol
+        }), /*#__PURE__*/jsxRuntimeExports.jsx(Input, {
+          value: sellAmount,
+          error: sellInputError,
+          onChange: evt => {
+            const amount = fixedInputStringToFormattedNumber(evt.target.value, 2);
+            if (amount !== null) {
+              setSellAmount(amount);
+            }
+          }
+        }), /*#__PURE__*/jsxRuntimeExports.jsx(PriceImpactWrapper, {
+          children: chartT('pool.chart.price-impact', {
+            amount: sellImpact
+          })
+        })]
+      })]
+    }) : '', pmmParams !== undefined && midPrice !== undefined && pmmModel !== undefined && baseMinAndZoomMultiples.baseMin !== undefined && midPrice !== undefined && /*#__PURE__*/jsxRuntimeExports.jsx(DepthChartKonva, {
+      width: width,
+      height: height,
+      params: pmmParams,
+      midPrice: midPrice,
+      pmmModel: pmmModel,
+      baseTokenSymbol: baseTokenSymbol,
+      quoteTokenSymbol: quoteTokenSymbol,
+      baseMinAndZoomMultiples: baseMinAndZoomMultiples,
+      colorMap: colorMap,
+      setBaseMinAndZoomMultiples: setBaseMinAndZoomMultiples
+    }), /*#__PURE__*/jsxRuntimeExports.jsxs(OptButtonGroup, {
+      className: "operate-btn-wrapper",
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(OptButton, {
+        onClick: () => handleDragButtonMouseDown(true),
+        children: /*#__PURE__*/jsxRuntimeExports.jsx(BiChevronLeft, {})
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(OptButton, {
+        onClick: () => handleZoomButtonMouseDown(false),
+        children: /*#__PURE__*/jsxRuntimeExports.jsx(BiMinus, {})
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(OptButton, {
+        onClick: () => handleZoomButtonMouseDown(true),
+        children: /*#__PURE__*/jsxRuntimeExports.jsx(BiPlus, {})
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(OptButton, {
+        onClick: () => handleDragButtonMouseDown(false),
+        children: /*#__PURE__*/jsxRuntimeExports.jsx(BiChevronRight, {})
+      })]
+    })]
+  });
+};
+
+export { DepthChart as default };