@dodoex/widgets 3.0.2-pool.3 → 3.0.2-pool.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,78 +0,0 @@
1
- "use strict";var e=require("bignumber.js"),t=require("lodash"),i=require("react"),r=require("@emotion/styled"),o=require("@emotion/react"),n=require("react-konva"),l=require("./helper-DLVXIS3T.cjs"),a=require("./index-COUbREiS.cjs"),s=require("@dodoex/api");require("@lingui/core"),require("@lingui/react"),require("@dodoex/components"),require("@dodoex/dodo-contract-request"),require("react-redux"),require("identicon.js"),require("@web3-react/core"),require("@web3-react/eip1193"),require("@web3-react/walletconnect-v2"),require("@web3-react/metamask"),require("@web3-react/types"),require("@reduxjs/toolkit"),require("redux"),require("@tanstack/react-query"),require("react-dom"),require("react-window"),require("@ethersproject/bignumber"),require("dayjs"),require("react-transition-group"),require("zustand"),require("@dodoex/contract-request"),require("axios"),require("recharts"),require("jsbi"),require("tiny-invariant"),require("@uniswap/sdk-core"),require("@uniswap/v2-sdk"),require("react-infinite-scroller"),require("d3"),require("rmc-date-picker");var c={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},u=i.createContext&&i.createContext(c),d=["attr","size","title"];function m(e,t){if(null==e)return{};var i,r,o=function(e,t){if(null==e)return{};var i,r,o={},n=Object.keys(e);for(r=0;r<n.length;r++)i=n[r],t.indexOf(i)>=0||(o[i]=e[i]);return o}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(r=0;r<n.length;r++)i=n[r],t.indexOf(i)>=0||Object.prototype.propertyIsEnumerable.call(e,i)&&(o[i]=e[i])}return o}function p(){return p=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r])}return e},p.apply(this,arguments)}function g(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,r)}return i}function h(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?g(Object(i),!0).forEach((function(t){f(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):g(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function f(e,t,i){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var r=i.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function b(e){return e&&e.map(((e,t)=>i.createElement(e.tag,h({key:t},e.attr),b(e.child))))}function M(e){return t=>i.createElement(v,p({attr:h({},e.attr)},t),b(e.child))}function v(e){var t=t=>{var r,{attr:o,size:n,title:l}=e,a=m(e,d),s=n||t.size||"1em";return t.className&&(r=t.className),e.className&&(r=(r?r+" ":"")+e.className),i.createElement("svg",p({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},t.attr,o,a,{className:r,style:h(h({color:e.color||t.color},t.style),e.style),height:s,width:s,xmlns:"http://www.w3.org/2000/svg"}),l&&i.createElement("title",null,l),e.children)};return void 0!==u?i.createElement(u.Consumer,null,(e=>t(e))):t(c)}function y(e){return M({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:[]}]})(e)}function P(e){return M({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:[]}]})(e)}function x(e){return M({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{d:"M5 11h14v2H5z"},child:[]}]})(e)}function L(e){return M({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{d:"M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"},child:[]}]})(e)}const w=r.input`
2
- margin: 4px 10px 4px 6px;
3
- border-radius: 10px;
4
- border: 1px solid #373739;
5
- padding: 4px 9px;
6
- background-color: #1a1a1b;
7
- color: #ffffff;
8
- font-size: 14px;
9
- font-weight: 400;
10
- line-height: 20px;
11
- outline: none;
12
- width: 96px;
13
- &:focus {
14
- border-color: #fff;
15
-
16
- ${({error:e})=>e&&o.css`
17
- border-color: red;
18
- `}
19
- }
20
- `;const E="rgba(38, 39, 41, 0.3)";function q({width:r,height:o,midPrice:s,pmmModel:c,params:u,baseTokenSymbol:d,quoteTokenSymbol:m,baseMinAndZoomMultiples:p,colorMap:g,setBaseMinAndZoomMultiples:h}){const f=t.merge({grid:"#2A2A2D",midPriceLine:"#313335",leftBg:[0,E,1,"#31645d"],leftLine:"#55f6db",leftColor:"",rightBg:[0,E,1,"#67303d"],rightLine:"#ff4f73",rightColor:"",tooltipBg:"#121212",tooltipColor:void 0},g),b=r,M=o-18,v=b/7,{buyBaseVert:y,sellBaseVert:P}=l.computeBaseVert({midPrice:s,q:u.q,q0:u.q0,pmmModel:c}),x=y.div(M),L=P.div(M),w=i.useRef(null),q=i.useRef(null),{current:z}=w,B=i.useRef(0),k=i.useRef(),{horizontalGridLines:T,verticalGridLines:R}=function({chartHeight:e,chartWidth:t,horizontalLineCount:r,verticalLineCount:o}){return i.useMemo((()=>{const i=[],n=e/(r+1),l=[],a=t/o;for(let e=0;e<r;e++){const r=n*(e+1);i.push([0,r,t,r])}for(let t=0;t<o;t++){const i=a*t+a/2;l.push([i,0,i,e])}return{horizontalGridLines:i,verticalGridLines:l}}),[e,t,r,o])}({chartHeight:M,chartWidth:b,horizontalLineCount:9,verticalLineCount:7}),{horizontalLabelTickPoints:C,horizontalLabelTextPoints:S}=function({chartHeight:e,chartWidth:t,xAxisPoints:r,oneXPx:o,baseMinAndZoomMultiples:n}){return i.useMemo((()=>{const i=l.computeXPortion(t,n.zoomMultiples),s=[],c=[];for(let t=0;t<r;t++){s.push([t*o+o/2,e,t*o+o/2,e+4]);const r=i.multipliedBy(t).multipliedBy(o).plus(i.multipliedBy(o/2)).toNumber(),l=n.baseMin.multipliedBy(10**r),u=t*o,d=e+2+4,m=a.formatShortNumber(l);c.push({x:u,y:d,text:m})}return{horizontalLabelTickPoints:s,horizontalLabelTextPoints:c}}),[n.baseMin,n.zoomMultiples,e,t,o,r])}({chartHeight:M,chartWidth:b,xAxisPoints:7,oneXPx:v,baseMinAndZoomMultiples:p}),{quoteLinePoints:N,quoteLineAreaPoints:O,quoteLineAreaLinearGradientEndPointY:A,baseLinePoints:X,baseLineAreaPoints:j,baseLineAreaLinearGradientEndPointY:Z,midPriceLinePoints:W}=function({chartHeight:t,chartWidth:r,midPrice:o,xPoints:n,pmmModel:a,baseMinAndZoomMultiples:s,buyYPortion:c,sellYPortion:u}){return i.useMemo((()=>{const i=[],d=[],m=[],{baseMin:p,zoomMultiples:g}=s,h=l.computeXPortion(r,g),f=2*g,b=new e(f).div(n);let M=new e(Math.log(o.div(p).toNumber())/Math.log(10));M=e.minimum(f,M),M=e.maximum(0,M);for(let r=new e(0);r.lte(M);){const e=p.multipliedBy(10**r.toNumber()),n=l.evalPoint({val:e,model:a,midPrice:o});if(!n.vert.isNaN()){const e=r.div(h).toNumber(),o=t-n.vert.div(c).toNumber();i.push(e,o)}r=r.plus(b)}for(let e=M;e.lte(f);){const i=p.multipliedBy(10**e.toNumber()),r=l.evalPoint({val:i,model:a,midPrice:o});if(!r.vert.isNaN()){const i=e.div(h).toNumber(),o=t-r.vert.div(u).toNumber();d.push(i,o)}e=e.plus(b)}const v=M.div(h).toNumber(),[,y]=i,P=a.k.eq(0);P&&i.push(v,y||t),i.push(v,t),m.push(v,t,v,0);const x=l.evalPoint({val:p.multipliedBy(10**f),model:a,midPrice:o});let L=t;const w=new e(f).div(h).toNumber();return x.vert.isNaN()||(L=t-x.vert.div(u).toNumber()),P&&d.length>=2&&(d.unshift(v,L),d.unshift(v,t)),d.push(w,L),M.lte(0)&&d.unshift(0,t),{quoteLinePoints:i,quoteLineAreaPoints:[0,t,0,y,...i],quoteLineAreaLinearGradientEndPointY:y,baseLinePoints:d,baseLineAreaPoints:[...d,w,t],baseLineAreaLinearGradientEndPointY:L,midPriceLinePoints:m}}),[s,r,n,o,a,t,c,u])}({chartHeight:M,chartWidth:b,midPrice:s,xPoints:50,pmmModel:c,baseMinAndZoomMultiples:p,buyYPortion:x,sellYPortion:L}),F=e=>{var t;const i=e.target;if(i&&z){const e=null===(t=i.getStage())||void 0===t?void 0:t.getPointerPosition();if(e){const{x:t}=e;if(t>b)return void z.hide();l.updateTooltip({x:t,tooltip:z,buyBaseVert:y,sellBaseVert:P,chartWidth:b,chartHeight:M,midPrice:s,pmmModel:c,baseTokenSymbol:d,quoteTokenSymbol:m,baseMinAndZoomMultiples:p,t:l.chartT,isHover:!0,color:f.tooltipColor,leftColor:f.leftLine,rightColor:f.rightLine})}}},H=i.useMemo((()=>t.throttle((e=>{const{target:t}=e,i=t.getStage();if(i){i.container().style.cursor="grabbing";const e=null==i?void 0:i.getPointerPosition();if(e){const t=e.x-B.current;B.current=e.x,k.current=e.x,h((e=>void 0===e.baseMin?e:{baseMin:l.computeBaseMinByDistance({dragDistance:t,prevBaseMin:e.baseMin,chartWidth:b,zoomMultiples:e.zoomMultiples}),zoomMultiples:e.zoomMultiples,targetMarginPriceX:0}))}}}),100)),[b,h]),D=i.useMemo((()=>t.throttle((e=>{e.cancelBubble=!0,e.evt.preventDefault();const t=e.evt.deltaY<0;h((e=>{const i=l.computeZoomMultiplesWhenZoom({zoomIn:t,prevZoomMultiples:e.zoomMultiples});return{baseMin:l.computeBaseAfterZoom({midPrice:s,zoomMultiples:i}),zoomMultiples:i,targetMarginPriceX:e.targetMarginPriceX}}))}),100)),[s,h]);return i.useEffect((()=>{p.targetMarginPriceX>0&&null!==z?l.updateTooltip({x:p.targetMarginPriceX,tooltip:z,buyBaseVert:y,sellBaseVert:P,chartWidth:b,chartHeight:M,midPrice:s,pmmModel:c,baseTokenSymbol:d,quoteTokenSymbol:m,baseMinAndZoomMultiples:p,t:l.chartT,color:f.tooltipColor,leftColor:f.leftLine,rightColor:f.rightLine}):void 0!==k.current&&null!==z&&l.updateTooltip({x:k.current,tooltip:z,buyBaseVert:y,sellBaseVert:P,chartWidth:b,chartHeight:M,midPrice:s,pmmModel:c,baseTokenSymbol:d,quoteTokenSymbol:m,baseMinAndZoomMultiples:p,t:l.chartT,isHover:!0,color:f.tooltipColor,leftColor:f.leftLine,rightColor:f.rightLine})}),[p,d,y,M,b,f.leftLine,f.rightLine,f.tooltipColor,s,c,m,P,z]),React.createElement(n.Stage,{ref:q,width:r,offsetY:-l.chartOffsetYBCToolTip,height:o+l.chartOffsetYBCToolTip,draggable:!0,dragBoundFunc:function(){return{x:this.absolutePosition().x,y:this.absolutePosition().y}},onMouseMove:F,onMouseOver:F,onMouseOut:()=>{z&&z.hide()},onDragStart:function(e){const{target:t}=e,i=t.getStage();if(i){const e=i.getPointerPosition();e&&(B.current=e.x)}},onDragMove:H,onDragEnd:e=>{const{target:t}=e,i=t.getStage();i&&(i.container().style.cursor="pointer")},onWheel:D},React.createElement(n.Layer,null,React.createElement(n.Rect,{x:0,y:0,width:r,height:M,stroke:f.grid,strokeWidth:1}),T.map(((e,t)=>React.createElement(n.Line,{key:t,points:e,stroke:f.grid,strokeWidth:1,lineCap:"round",lineJoin:"round",listening:!1}))),R.map(((e,t)=>React.createElement(n.Line,{key:t,points:e,stroke:f.grid,strokeWidth:1,lineCap:"round",lineJoin:"round",listening:!1}))),C.map(((e,t)=>React.createElement(n.Line,{key:t,points:e,stroke:"#9d9d9d",strokeWidth:1,lineCap:"round",lineJoin:"round",listening:!1}))),S.map(((e,t)=>React.createElement(n.Text,{key:t,x:e.x,y:e.y,text:e.text,fontFamily:"Manrope",fontSize:12,fill:"#9d9d9d",width:v,padding:0,align:"center",verticalAlign:"bottom",listening:!1}))),React.createElement(n.Line,{points:O,closed:!0,listening:!1,lineCap:"round",lineJoin:"round",fillLinearGradientStartPoint:{x:0,y:M},fillLinearGradientEndPoint:{x:0,y:A},fillLinearGradientColorStops:f.leftBg}),React.createElement(n.Line,{points:N,stroke:f.leftLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1}),React.createElement(n.Line,{points:j,closed:!0,listening:!1,lineCap:"round",lineJoin:"round",fillLinearGradientStartPoint:{x:b,y:M},fillLinearGradientEndPoint:{x:b,y:Z},fillLinearGradientColorStops:f.rightBg}),React.createElement(n.Line,{points:X,stroke:f.rightLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1}),React.createElement(n.Line,{points:W,stroke:f.midPriceLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1})),React.createElement(n.Layer,{ref:w,visible:!1,listening:!1},React.createElement(n.Line,{points:[],stroke:"#ff4f73",strokeWidth:1,lineCap:"round",lineJoin:"round",dash:[4,6],id:"toolTipVertLine"}),React.createElement(n.Line,{points:[],stroke:"ff4f73",strokeWidth:1,lineCap:"round",lineJoin:"round",dash:[4,6],id:"toolTipHoriLine"}),React.createElement(n.Circle,{x:0,y:0,radius:5,fill:"#FF5072",stroke:"rgba(255, 80, 114, 0.3)",strokeWidth:12,id:"joinCircle"}),React.createElement(n.Label,{x:0,y:0,id:"priceTextLabel"},React.createElement(n.Tag,{fill:f.tooltipBg,id:"priceTextLabel-tag"}),React.createElement(n.Text,{text:"",fontSize:12,fontFamily:"Manrope",padding:4,fill:"#FF5072",id:"priceTextLabel-text"})),React.createElement(n.Label,{x:0,y:0,id:"slippageTextLabel"},React.createElement(n.Tag,{fill:f.tooltipBg,id:"slippageTextLabel-tag"}),React.createElement(n.Text,{text:"",fontSize:12,fontFamily:"Manrope",padding:4,fill:"#FF5072",id:"slippageTextLabel-text"})),React.createElement(n.Label,{x:0,y:0,id:"toolTip"},React.createElement(n.Tag,{fill:f.tooltipBg,pointerDirection:"down",pointerWidth:15,pointerHeight:8,cornerRadius:8,lineJoin:"round",id:"toolTip-tag"}),React.createElement(n.Text,{text:"-",fontSize:12,lineHeight:17/12,padding:l.labelPadding,fontFamily:"Manrope",fill:"#FFFFFF",id:"toolTip-text"}))))}const z=r.button`
21
- margin: 0;
22
- border: none;
23
- padding: 0;
24
- background: none;
25
-
26
- &:focus {
27
- outline: none;
28
- }
29
- &:active {
30
- outline: none;
31
- }
32
- `,B=r.div`
33
- height: 100%;
34
- `,k=r.div`
35
- display: flex;
36
- align-items: center;
37
- `,T=r.div`
38
- border: 1px solid ${({borderColor:e})=>e||"#2a2a2d"};
39
- flex: 1 0 50%;
40
-
41
- display: flex;
42
- align-items: center;
43
- justify-content: center;
44
- font-size: 12px;
45
- font-weight: 400;
46
- line-height: 17px;
47
- color: #606066;
48
-
49
- & + & {
50
- border-left: none;
51
- }
52
- `,R=r.span`
53
- color: #85858d;
54
- `,C=r.div`
55
- margin-top: 20px;
56
- display: flex;
57
- justify-content: center;
58
- margin-bottom: 9px;
59
- `,S=r(z)`
60
- border-radius: 13px;
61
- background-color: #373739;
62
- width: 24px;
63
- height: 24px;
64
- font-size: 18px;
65
- color: #85858d;
66
- line-height: 0;
67
- & + & {
68
- margin-left: 10px;
69
- }
70
- &:first-child,
71
- &:last-child {
72
- font-size: 20px;
73
- }
74
-
75
- &:hover {
76
- color: #fff;
77
- }
78
- `;function N({params:t,target:i,isBuy:r=!0}){const o=new e(t.b),n=new e(t.q);let l=new e(t.b0);const a=new e(t.q0),c=new e(t.i),u=new e(t.k),{R:d}=t;1===d&&l.eq(o)&&(l=s.solveQuadraticFunctionForTarget(o,n.minus(a),new e(1).div(c),u));const m=r?o.plus(i):o.minus(i);if(m.lt(l)||o.eq(l)){let t=l.multipliedBy(l).div(m).div(m);return t=new e(1).minus(u).plus(u.multipliedBy(t)),c.multipliedBy(t)}const p=new s.PMMModel;p.RStatus=d,p.B=o,p.B0=l,p.Q=n,p.Q0=a,p.i=c,p.k=u,p.mtFeeRate=new e(0),p.lpFeeRate=new e(0);let g=new e(0);g=r?p.querySellBase(i):p.queryBuyBase(i);const h=r?n.minus(g):n.plus(g);let f=a.multipliedBy(a).div(h).div(h);return f=new e(1).minus(u).plus(u.multipliedBy(f)),c.div(f)}exports.default=({chartId:r,width:o=834,height:n=460,baseTokenSymbol:s,quoteTokenSymbol:c,pmmModel:u,pmmParams:d,midPrice:m=new e(0),colorMap:p,notShowAmountInput:g})=>{(({id:e})=>{i.useEffect((()=>{function t(e){e.preventDefault()}let i=!1;try{const e={get passive(){return i=!0,!1}};window.addEventListener("test",(()=>{}),e),window.removeEventListener("test",(()=>{}))}catch(e){i=!1}const r=document.getElementById(e),o=!!i&&{passive:!1};return null==r||r.addEventListener("wheel",t,o),()=>{null==r||r.removeEventListener("wheel",t)}}),[e])})({id:r});const[h,f]=i.useState(""),[b,M]=i.useState(""),[v,E]=i.useState("-"),[z,O]=i.useState("-"),[A,X]=i.useState({baseMin:new e(0),zoomMultiples:l.baseZoomMultiples,targetMarginPriceX:0});i.useEffect((()=>{void 0!==m&&X((e=>({baseMin:l.computeBaseAfterZoom({midPrice:m,zoomMultiples:e.zoomMultiples}),zoomMultiples:e.zoomMultiples,targetMarginPriceX:e.targetMarginPriceX})))}),[m]);const j=i.useMemo((()=>t.debounce((({type:t,amount:i})=>{""===i&&m&&(X({baseMin:l.computeBaseAfterZoom({midPrice:m,zoomMultiples:l.baseZoomMultiples}),zoomMultiples:l.baseZoomMultiples,targetMarginPriceX:0}),"buy"===t?E("-"):O("-"));const r=new e(i);if(!r.lte(0)&&!r.isNaN()&&(null==d?void 0:d.b)&&!r.gte(d.b)&&m)if("buy"===t){const e=N({params:d,target:r});X((i=>{const r=l.beforePriceImpactEffect({currentBaseMinAndZoomMultiples:i,targetPrice:e,midPrice:m,width:o});if(r.isSkip)return{baseMin:i.baseMin,zoomMultiples:i.zoomMultiples,targetMarginPriceX:r.targetX};if(r.targetX>0)return{baseMin:r.baseMin,zoomMultiples:r.zoomMultiples,targetMarginPriceX:r.targetX};const n=l.computeTargetXByTargetPrice({midPrice:m,width:o,type:t,targetPrice:e}),a=n.zoomMultiples.dp(6).toNumber();return{baseMin:l.computeBaseAfterZoom({midPrice:m,zoomMultiples:a}),zoomMultiples:a,targetMarginPriceX:n.targetX}})),E(`${a.formatPercentageNumber({input:e.minus(m).div(m)})}`)}else{const e=function({params:e,target:t}){return N({params:e,target:t,isBuy:!1})}({params:d,target:r});X((i=>{const r=l.beforePriceImpactEffect({currentBaseMinAndZoomMultiples:i,targetPrice:e,midPrice:m,width:o});if(r.isSkip)return{baseMin:i.baseMin,zoomMultiples:i.zoomMultiples,targetMarginPriceX:r.targetX};if(r.targetX>0)return{baseMin:r.baseMin,zoomMultiples:r.zoomMultiples,targetMarginPriceX:r.targetX};const n=l.computeTargetXByTargetPrice({midPrice:m,width:o,type:t,targetPrice:e}),a=n.zoomMultiples.dp(6).toNumber();return{baseMin:l.computeBaseAfterZoom({midPrice:m,zoomMultiples:a}),zoomMultiples:a,targetMarginPriceX:n.targetX}})),O(`+${a.formatPercentageNumber({input:e.minus(m).div(m)})}`)}}),300)),[d,m,o]);i.useEffect((()=>{void 0!==h&&j({type:"buy",amount:h})}),[j,h]),i.useEffect((()=>{void 0!==b&&j({type:"sell",amount:b})}),[j,b]);const Z=e=>{let t=0;t=e?-.1*o:.1*o,X((e=>void 0===e.baseMin?e:{baseMin:l.computeBaseMinByDistance({dragDistance:t,prevBaseMin:e.baseMin,chartWidth:o,zoomMultiples:e.zoomMultiples}),zoomMultiples:e.zoomMultiples,targetMarginPriceX:e.targetMarginPriceX}))},W=e=>{X((t=>{const i=l.computeZoomMultiplesWhenZoom({zoomIn:null!=e&&e,prevZoomMultiples:t.zoomMultiples});return{baseMin:l.computeBaseAfterZoom({midPrice:m,zoomMultiples:i}),zoomMultiples:i,targetMarginPriceX:t.targetMarginPriceX}}))},F=i.useMemo((()=>{if(""===h)return!1;const t=new e(h);return!(!t.lte(0)&&!t.isNaN()&&(null==d?void 0:d.b)&&!t.gte(d.b))}),[h,d]),H=i.useMemo((()=>{if(""===b)return!1;const t=new e(b);return!(!t.lte(0)&&!t.isNaN()&&(null==d?void 0:d.b)&&!t.gte(d.b))}),[b,d]);return React.createElement(B,{id:r},g?"":React.createElement(k,null,React.createElement(T,{borderColor:p&&p.grid},l.chartT("pool.chart.buy-amount",{symbol:s}),React.createElement(w,{value:h,error:F,onChange:e=>{const t=a.fixedInputStringToFormattedNumber(e.target.value,2);null!==t&&f(t)}}),React.createElement(R,null,l.chartT("pool.chart.price-impact",{amount:v}))),React.createElement(T,{borderColor:p&&p.grid},l.chartT("pool.chart.sell-amount",{symbol:s}),React.createElement(w,{value:b,error:H,onChange:e=>{const t=a.fixedInputStringToFormattedNumber(e.target.value,2);null!==t&&M(t)}}),React.createElement(R,null,l.chartT("pool.chart.price-impact",{amount:z})))),void 0!==d&&void 0!==m&&void 0!==u&&void 0!==A.baseMin&&void 0!==m&&React.createElement(q,{width:o,height:n,params:d,midPrice:m,pmmModel:u,baseTokenSymbol:s,quoteTokenSymbol:c,baseMinAndZoomMultiples:A,colorMap:p,setBaseMinAndZoomMultiples:X}),React.createElement(C,{className:"operate-btn-wrapper"},React.createElement(S,{onClick:()=>Z(!0)},React.createElement(y,null)),React.createElement(S,{onClick:()=>W(!1)},React.createElement(x,null)),React.createElement(S,{onClick:()=>W(!0)},React.createElement(L,null)),React.createElement(S,{onClick:()=>Z(!1)},React.createElement(P,null))))};
@@ -1,12 +0,0 @@
1
- "use strict";var e=require("@emotion/styled"),t=require("lodash"),i=require("react"),r=require("./helper-DLVXIS3T.cjs"),n=require("react-konva"),o=require("./index-COUbREiS.cjs"),a=require("bignumber.js"),l=require("@dodoex/api");require("@lingui/core"),require("@lingui/react"),require("@dodoex/components"),require("@dodoex/dodo-contract-request"),require("react-redux"),require("identicon.js"),require("@web3-react/core"),require("@web3-react/eip1193"),require("@web3-react/walletconnect-v2"),require("@web3-react/metamask"),require("@web3-react/types"),require("@reduxjs/toolkit"),require("redux"),require("@tanstack/react-query"),require("react-dom"),require("react-window"),require("@ethersproject/bignumber"),require("dayjs"),require("react-transition-group"),require("zustand"),require("@dodoex/contract-request"),require("axios"),require("recharts"),require("jsbi"),require("tiny-invariant"),require("@uniswap/sdk-core"),require("@uniswap/v2-sdk"),require("react-infinite-scroller"),require("d3"),require("rmc-date-picker");const u=e.div`
2
- height: 100%;
3
- position: relative;
4
- `,c=e.div`
5
- text-align: center;
6
- margin-top: 17.1px;
7
- margin-bottom: 88.41px;
8
- color: #606066;
9
- font-size: 12px;
10
- line-height: 17px;
11
- font-weight: 400;
12
- `,s=36;function d({maxHeight:e,gridAreaHeight:t,value:i}){const r=new a(t).minus(s),n=r.div(e);return r.minus(i.multipliedBy(n)).plus(s).toNumber()}function g({targetPrice:e,areaPoints:t,isLeft:i}){for(let r=0;r<t.length;r++){const n=t[r],o=r<t.length-1?t[r+1]:null;if(!o)return{targetAreaStatPoint:n,targetAreaStatPoints:t};if(i){if(e.lte(n.middlePrice)&&e.gte(o.middlePrice))return{targetAreaStatPoint:n,targetAreaStatPoints:t.slice(0,r+1)}}else if(e.gte(n.middlePrice)&&e.lte(o.middlePrice))return{targetAreaStatPoint:n,targetAreaStatPoints:t.slice(0,r+1)}}return{targetAreaStatPoint:null,targetAreaStatPoints:[]}}function m({x:e,width:t,minXLN10:i,maxXLN10:r}){const n=new a(e).div(t).multipliedBy(r.minus(i)).plus(i);return new a(10**n.toNumber())}function h({width:e,targetLN10:t,minXLN10:i,maxXLN10:r}){return t.minus(i).div(r.minus(i)).multipliedBy(e).toNumber()}function p({target:e}){return new a(Math.log10(e.toNumber()))}const f="rgba(38, 39, 41, 0.3)";function L({width:e,height:u,params:c,baseTokenSymbol:s,quoteTokenSymbol:L,colorMap:x}){const{maxLeftHeight:b,maxRightHeight:w,leftStatAreaPoints:A,rightStatAreaPoints:y,minXLN10:N,maxXLN10:P}=function({params:e}){return i.useMemo((()=>{const t=new a(e.b),i=new a(e.q);let r=new a(e.b0);const n=new a(e.q0),o=new a(e.i),u=new a(e.k),{R:c}=e;1===c&&r.eq(t)&&(r=l.solveQuadraticFunctionForTarget(t,i.minus(n),new a(1).div(o),u));const s=new l.PMMState({i:o,K:u,B:t,Q:i,B0:r,Q0:n,R:c,mtFeeRate:new a(0),lpFeeRate:new a(0)}),d=new l.PMMHelper,g=new a(s.B),m=[],h=[];let p=new a(0),f=new a(0);const L=d.GetMidPrice(s),x=i.gt(0)?t.div(i):new a(1);for(let e=0;e<=250;e++){let t=g.multipliedBy(e/100).multipliedBy(L.multipliedBy(x).multipliedBy(4));0===e&&(t=g.multipliedBy(1e-11));const i=null==d?void 0:d.QuerySellBase(t,s);if(i.isNaN()||!i.gt(0))m.push({giveAmount:t,getAmount:new a(0),price:new a(0)});else{const e=i.div(t);m.push({giveAmount:t,getAmount:i,price:e})}}for(let e=0;e<=250;e++){let t=g.multipliedBy(e/100).multipliedBy(L.multipliedBy(4));0===e&&(t=g.multipliedBy(1e-11));const i=null==d?void 0:d.QuerySellQuote(t,s);if(i.isNaN()||!i.gt(0))h.push({giveAmount:t,getAmount:new a(0),price:new a(0)});else{const e=t.dividedBy(i);h.push({giveAmount:t,getAmount:i,price:e})}}if(m.length<2&&h.length<2)return{leftStatAreaPoints:[],rightStatAreaPoints:[],maxLeftHeight:new a(10).multipliedBy(1.2),maxRightHeight:new a(10).multipliedBy(1.2),middlePriceLN10:new a(0),minXLN10:new a(-1),maxXLN10:new a(1)};const b=[];for(let e=1;e<m.length;e++){const t=m[e],{giveAmount:i,getAmount:r,price:n}=t,o=m[e-1];if(!n.isNaN()&&n.gt(0)&&o){const t=n.minus(o.price).abs(),l=i.minus(o.giveAmount).abs(),u=r.minus(o.getAmount).abs().multipliedBy(l);1===e&&b.push({area:r,price:n,middlePrice:n.plus(t.div(1.1)),rectangleHeight:u.plus(u.multipliedBy(.03))}),b.push({area:r,price:n,middlePrice:n.plus(t.div(2)),rectangleHeight:u}),p=a.max(u,p)}}const w=[];for(let e=1;e<h.length;e++){const t=h[e],{giveAmount:i,getAmount:r,price:n}=t,o=h[e-1],l=o.price,u=o.giveAmount,c=o.getAmount;if(!n.isNaN()&&n.gt(0)&&o){const t=n.minus(l).abs(),o=i.minus(u).abs(),s=r.minus(c).abs().multipliedBy(o);1===e&&w.push({area:r,price:n,middlePrice:n.minus(t.div(1.1)),rectangleHeight:s.plus(s.multipliedBy(.03))}),w.push({area:r,price:n,middlePrice:n.minus(t.div(2)),rectangleHeight:s}),f=a.max(s,f)}}const A=m.length>0?m[m.length-1]:h[0],y=h.length>0?h[0]:m[0],N=h.length>0?h[h.length-1]:m[0],P=A.price,R=N.price,q=y.price,v=new a(Math.log10(q.toNumber()));let S=P.gt(0)?new a(Math.log10(P.toNumber())):new a(-Math.log10(R.toNumber())),H=R.gt(0)?new a(Math.log10(R.toNumber())):new a(-Math.log10(P.toNumber()));const k=a.max(v.minus(S).abs(),H.minus(v).abs());return S=v.minus(k),H=v.plus(k),{leftStatAreaPoints:b,rightStatAreaPoints:w,maxLeftHeight:p.multipliedBy(1.2),maxRightHeight:f.multipliedBy(1.2),minXLN10:S,maxXLN10:H,middlePriceLN10:v}}),[e])}({params:c}),R=u-30.13,q=i.useRef(null),v=t.merge({grid:"#2A2A2D",midPriceLine:"#313335",leftBg:[0,f,1,"#31645d"],leftLine:"#55f6db",leftColor:"",rightBg:[0,f,1,"#67303d"],rightLine:"#ff4f73",rightColor:"",tooltipBg:"#121212",tooltipColor:void 0,textColor:"#606066"},x),S=t=>{var i;const{current:n}=q,a=t.target;if(a&&n){const t=null===(i=a.getStage())||void 0===i?void 0:i.getPointerPosition();if(t){const{x:i}=t,a=e/2;if(Math.abs(i-a)<=2)return;if(i<=2||e-i<=2)return;const l=m({x:i,width:e,minXLN10:N,maxXLN10:P});let u=null,c=[];const f=i<a;if(f){const e=g({areaPoints:A,targetPrice:l,isLeft:f});u=e.targetAreaStatPoint,c=e.targetAreaStatPoints}else{const e=g({areaPoints:y,targetPrice:l,isLeft:f});u=e.targetAreaStatPoint,c=e.targetAreaStatPoints}if(u){const t=p({target:u.middlePrice}),a=h({minXLN10:N,maxXLN10:P,width:e,targetLN10:t}),l=d({maxHeight:f?b:w,gridAreaHeight:R,value:u.rectangleHeight}),g=n.findOne("#tooltip"),m=n.findOne("#toolTipVertLine"),x=n.findOne("#joinCircle"),A=n.findOne("#tooltip-Text"),y=n.findOne("#tooltip-tag"),q=n.findOne("#priceTextLabel"),S=null==q?void 0:q.findOne("#priceTextLabel-text"),H=n.findOne("#area");null==g||g.position({x:a,y:l-5-6}),null==A||A.fill(v.tooltipColor||(f?"#00FAD9":"#FF5072")),null==A||A.text(f?r.chartT("pool.chart.liquidity-chart-buy",{amount:o.formatShortNumber(u.area),symbol:s,price:o.formatShortNumber(u.price)}):r.chartT("pool.chart.liquidity-chart-sell",{amount:o.formatShortNumber(u.area),symbol:L,price:o.formatShortNumber(u.price)})),g&&y&&(g.width()/2>i?(y.pointerDirection("left"),y.pointerHeight(15),y.pointerWidth(8),g.offsetX(-11),g.offsetY(-11)):g.width()/2+i>e?(y.pointerDirection("right"),y.pointerHeight(15),y.pointerWidth(8),g.offsetX(11),g.offsetY(-11)):(y.pointerDirection("down"),y.pointerHeight(8),y.pointerWidth(15),g.offsetX(0),g.offsetY(0))),null==m||m.points([a,R,a,l]),null==m||m.stroke(f?"#55f6db":"#ff4f73");let k=f?"rgb(86, 246, 218)":"#FF5072",E=f?"rgba(86, 246, 218, 0.3)":"rgba(255, 80, 114, 0.3)";v.leftLine&&v.rightLine&&(k=f?v.leftLine:v.rightLine,E=f?`rgba(${r.colorRgb(v.leftLine)}, 0.4)`:`rgba(${r.colorRgb(v.rightLine)}, 0.4)`),x&&(x.x(a),x.y(l),x.fill(k),x.stroke(E)),q&&(q.x(a),q.y(R+8.08+1),q.offsetX(q.width()/2),q.x()-q.width()/2<0?q.x(q.width()/2):q.x()+q.width()/2>e?q.x(e-q.width()/2):q.x(i)),S&&(S.fill(v.tooltipColor||(f?"#00FAD9":"#FF5072")),S.text(o.formatShortNumber(u.price)));const X=[];for(const t of c){const{middlePrice:i,rectangleHeight:r}=t,n=p({target:i}),o=h({minXLN10:N,maxXLN10:P,width:e,targetLN10:n}),a=d({maxHeight:f?b:w,gridAreaHeight:R,value:r});X.push(o,a+1)}const M=X.slice(),[B,C]=M;f?(M.push(a,l),M.push(a,R),M.push(B,R),M.push(B,C)):(M.unshift(B,R),M.unshift(a,R),M.unshift(a,l)),H&&(H.points(M),H.fill(f?v.leftLine||"#2c5b56":v.rightLine||"#7b3a48")),n.show()}}}},H=function({gridAreaHeight:e,gridAreaWidth:t,horizontalLineCount:r,verticalLineCount:o,color:a="#2A2A2D"}){return i.useMemo((()=>{const i=[],l=e/(r+1),u=[],c=t/(o+1);for(let e=0;e<r;e++){const r=l*(e+1);i.push([0,r,t,r])}for(let t=0;t<o;t++){const i=c*(t+1);u.push([i,0,i,e])}return React.createElement(React.Fragment,null,i.map(((e,t)=>React.createElement(n.Line,{key:t,points:e,stroke:a,strokeWidth:1,lineCap:"round",lineJoin:"round",tension:1,listening:!1}))),u.map(((e,t)=>React.createElement(n.Line,{key:t,points:e,stroke:a,strokeWidth:1,lineCap:"round",lineJoin:"round",tension:1,listening:!1}))))}),[e,t,r,o,a])}({gridAreaHeight:R,gridAreaWidth:e,horizontalLineCount:9,verticalLineCount:7,color:v.grid}),k=function({minXLN10:e,maxXLN10:t,labelCount:r,gridAreaHeight:a,gridAreaWidth:l,color:u="#606066"}){return i.useMemo((()=>{const i=l/(r+1),c=[],s=[];for(let n=0;n<r;n++){const r=i/2+i*n;c.push({x:r,y:a+10.08+1,text:o.formatShortNumber(m({x:i*(n+1),width:l,minXLN10:e,maxXLN10:t}))});const u=i*(n+1);s.push([u,a+1,u,a+4+1])}return React.createElement(React.Fragment,null,c.map(((e,t)=>React.createElement(n.Text,{key:t,x:e.x,y:e.y,text:e.text,fontSize:14,fontFamily:"Manrope",fill:u,width:i,padding:0,align:"center",verticalAlign:"bottom",listening:!1}))),s.map(((e,t)=>React.createElement(n.Line,{key:t,points:e,stroke:u,strokeWidth:1,lineCap:"butt",lineJoin:"miter",tension:1,listening:!1}))))}),[e,t,a,l,r])}({gridAreaHeight:R,gridAreaWidth:e,labelCount:7,minXLN10:N,maxXLN10:P,color:v.textColor}),E=function({gridAreaHeight:e,gridAreaWidth:t,color:r="#606066"}){return i.useMemo((()=>{const i=t/2;return React.createElement(n.Line,{points:[i,0,i,e-1],stroke:r,strokeWidth:1,lineCap:"round",lineJoin:"round",tension:1,listening:!1})}),[e,t,r])}({gridAreaHeight:R,gridAreaWidth:e,color:v.midPriceLine}),{leftLine:X,rightLine:M}=function({leftStatAreaPoints:e,rightStatAreaPoints:t,minXLN10:r,maxXLN10:o,maxLeftHeight:a,maxRightHeight:l,gridAreaWidth:u,gridAreaHeight:c,colorMap:s}){return{leftLine:i.useMemo((()=>{if(e.length<1)return React.createElement(React.Fragment,null);const t=[];let i=c;for(const n of e){const{middlePrice:e,rectangleHeight:l}=n,s=p({target:e}),g=h({minXLN10:r,maxXLN10:o,width:u,targetLN10:s}),m=d({maxHeight:a,gridAreaHeight:c,value:l});t.push(g,m),m<i&&(i=m)}const l=t.slice(),[g,m]=l,f=l[l.length-1],L=l[l.length-2];return l.push(L,f),l.push(L,c),l.push(g,c),l.push(g,m),React.createElement(React.Fragment,null,React.createElement(n.Line,{points:l,closed:!0,listening:!1,lineCap:"round",lineJoin:"round",fillLinearGradientStartPoint:{x:0,y:c},fillLinearGradientEndPoint:{x:0,y:i},fillLinearGradientColorStops:s.leftBg}),React.createElement(n.Line,{points:t,stroke:s.leftLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1}))}),[e,u,r,o,c,a]),rightLine:i.useMemo((()=>{if(t.length<1)return React.createElement(React.Fragment,null);const e=[];let i=c;for(const n of t){const{middlePrice:t,rectangleHeight:a}=n,s=p({target:t}),g=h({minXLN10:r,maxXLN10:o,width:u,targetLN10:s}),m=d({maxHeight:l,gridAreaHeight:c,value:a});e.push(g,m),m<i&&(i=m)}const a=e.slice(),[g]=a;return a.unshift(g,c),a.unshift(u,c),React.createElement(React.Fragment,null,React.createElement(n.Line,{points:a,closed:!0,listening:!1,lineCap:"round",lineJoin:"round",fillLinearGradientStartPoint:{x:0,y:c},fillLinearGradientEndPoint:{x:0,y:i},fillLinearGradientColorStops:s.rightBg}),React.createElement(n.Line,{points:e,stroke:s.rightLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1}))}),[t,u,r,o,c,l])}}({leftStatAreaPoints:A,rightStatAreaPoints:y,minXLN10:N,maxXLN10:P,maxLeftHeight:b,maxRightHeight:w,gridAreaWidth:e,gridAreaHeight:R,colorMap:v});return React.createElement(n.Stage,{width:e,height:u,onMouseMove:S,onMouseOver:S,onMouseEnter:S,onMouseOut:()=>{const{current:e}=q;e&&e.hide()}},React.createElement(n.Layer,null,React.createElement(n.Rect,{x:0,y:0,width:e,height:R,stroke:v.grid,strokeWidth:1}),H,k,X,M,E),React.createElement(n.Layer,{ref:q,visible:!1},React.createElement(n.Line,{points:[],closed:!0,listening:!1,lineCap:"round",lineJoin:"round",id:"area"}),React.createElement(n.Line,{points:[],strokeWidth:1,stroke:"#ff4f73",lineJoin:"round",lineCap:"round",dash:[4,6],id:"toolTipVertLine"}),React.createElement(n.Circle,{x:0,y:0,radius:5,fill:"#FF5072",stroke:"rgba(255, 80, 114, 0.3)",strokeWidth:12,id:"joinCircle"}),React.createElement(n.Label,{listening:!1,x:0,y:0,id:"priceTextLabel"},React.createElement(n.Tag,{fill:v.tooltipBg,id:"priceTextLabel-tag"}),React.createElement(n.Text,{text:"-",fontSize:14,fontFamily:"Manrope",padding:2,fill:"#FF5072",id:"priceTextLabel-text"})),React.createElement(n.Label,{listening:!1,id:"tooltip"},React.createElement(n.Tag,{fill:v.tooltipBg,pointerDirection:"down",pointerWidth:15,pointerHeight:8,cornerRadius:8,lineJoin:"round",id:"tooltip-tag"}),React.createElement(n.Text,{text:"",fontFamily:"Manrope",fontSize:12,lineHeight:17/12,padding:r.labelPadding,fill:"#FF5072",id:"tooltip-Text"}))))}exports.default=({width:e=834,height:t=462,baseTokenSymbol:i,quoteTokenSymbol:n,pmmModel:o,pmmParams:a,midPrice:l,notShowTipText:s,colorMap:d})=>React.createElement(u,null,void 0!==a&&void 0!==l&&void 0!==o&&void 0!==l&&React.createElement(L,{width:e,height:t,params:a,midPrice:l,pmmModel:o,baseTokenSymbol:i,quoteTokenSymbol:n,colorMap:d}),s?"":React.createElement(c,null,"* ",r.chartT("pool.chart.liquidity-chart-tip",{baseTokenSymbol:i})));