@dodoex/widgets 3.14.1-react.1 → 3.14.1-react.3
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.
- package/dist/assets/bundle-BBymdwHN.css +65 -0
- package/dist/{helper-Dzp_C5O7.cjs → helper-B5R2naMs.cjs} +1 -1
- package/dist/{helper-CQ8Clocj.js → helper-DbTc6nlO.js} +1 -1
- package/dist/index-B9bPmfzC.cjs +14 -0
- package/dist/index-C4rT0PIz.js +12 -0
- package/dist/index-Cd2ZDWxJ.js +78 -0
- package/dist/index-CogIczA-.cjs +12 -0
- package/dist/index-dfN1Agfx.cjs +78 -0
- package/dist/index-uaF4pZWx.js +14 -0
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/dist/types/hooks/Swap/useSwapSettingStore.d.ts +5 -3
- package/dist/types/hooks/useTokenState.d.ts +5 -3
- package/package.json +3 -3
- package/dist/assets/bundle-DSSoJu9z.css +0 -297
- package/dist/index-BV7yhAFZ.cjs +0 -78
- package/dist/index-CM1znFdK.cjs +0 -12
- package/dist/index-CWlMhnOc.js +0 -40
- package/dist/index-CdnUu5l1.js +0 -12
- package/dist/index-Ci_MIjDG.js +0 -78
- package/dist/index-rXrwk4Lb.cjs +0 -40
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import t from"@emotion/styled";import{merge as e}from"lodash";import{useMemo as i,useRef as n}from"react";import{l as r,h as o,m as l}from"./helper-DbTc6nlO.js";import{Line as a,Text as s,Stage as d,Layer as m,Rect as p,Circle as g,Label as u,Tag as c}from"react-konva";import{f as h}from"./index-uaF4pZWx.js";import f from"bignumber.js";import{jsxs as x,Fragment as L,jsx as b}from"react/jsx-runtime";import{solveQuadraticFunctionForTarget as w,PMMState as A,PMMHelper as y}from"@dodoex/api";import"@lingui/core";import"@dodoex/components";import"@dodoex/dodo-contract-request";import"@babel/runtime/helpers/interopRequireDefault";import"@babel/runtime/helpers/defineProperty";import"@lingui/react";import"identicon.js";import"zustand";import"zustand/middleware";import"@web3-react/core";import"@web3-react/eip1193";import"@web3-react/walletconnect-v2";import"@web3-react/metamask";import"@web3-react/types";import"@tanstack/react-query";import"@ethersproject/bignumber";import"react-dom";import"react-window";import"dayjs";import"dayjs/plugin/utc";import"dayjs/plugin/duration";import"dayjs/plugin/localizedFormat";import"react-transition-group";import"react-is";import"@dodoex/contract-request";import"axios";import"recharts";import"react-dom/client";import"jsbi";import"tiny-invariant";import"@uniswap/sdk-core";import"@uniswap/v2-sdk";import"react-infinite-scroller";import"d3";import"rmc-date-picker";import"rmc-date-picker/assets/index.css";import"react-datetime/css/react-datetime.css";const P=t.div`
|
|
2
|
+
height: 100%;
|
|
3
|
+
position: relative;
|
|
4
|
+
`,N=t.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
|
+
`;function v({maxHeight:t,gridAreaHeight:e,value:i}){const n=new f(e).minus(36),r=n.div(t);return n.minus(i.multipliedBy(r)).plus(36).toNumber()}function H({targetPrice:t,areaPoints:e,isLeft:i}){for(let n=0;n<e.length;n++){const r=e[n],o=n<e.length-1?e[n+1]:null;if(!o)return{targetAreaStatPoint:r,targetAreaStatPoints:e};if(i){if(t.lte(r.middlePrice)&&t.gte(o.middlePrice))return{targetAreaStatPoint:r,targetAreaStatPoints:e.slice(0,n+1)}}else if(t.gte(r.middlePrice)&&t.lte(o.middlePrice))return{targetAreaStatPoint:r,targetAreaStatPoints:e.slice(0,n+1)}}return{targetAreaStatPoint:null,targetAreaStatPoints:[]}}function S({x:t,width:e,minXLN10:i,maxXLN10:n}){const r=new f(t).div(e).multipliedBy(n.minus(i)).plus(i);return new f(10**r.toNumber())}function k({width:t,targetLN10:e,minXLN10:i,maxXLN10:n}){return e.minus(i).div(n.minus(i)).multipliedBy(t).toNumber()}function X({target:t}){return new f(Math.log10(t.toNumber()))}const B="rgba(38, 39, 41, 0.3)";function C({width:t,height:P,params:N,baseTokenSymbol:C,quoteTokenSymbol:M,colorMap:W}){const{maxLeftHeight:F,maxRightHeight:T,leftStatAreaPoints:j,rightStatAreaPoints:q,minXLN10:J,maxXLN10:R}=function({params:t}){return i(()=>{const e=new f(t.b),i=new f(t.q);let n=new f(t.b0);const r=new f(t.q0),o=new f(t.i),l=new f(t.k),{R:a}=t;1===a&&n.eq(e)&&(n=w(e,i.minus(r),new f(1).div(o),l));const s=new A({i:o,K:l,B:e,Q:i,B0:n,Q0:r,R:a,mtFeeRate:new f(0),lpFeeRate:new f(0)}),d=new y,m=new f(s.B),p=[],g=[];let u=new f(0),c=new f(0);const h=d.GetMidPrice(s),x=i.gt(0)?e.div(i):new f(1);for(let t=0;t<=250;t++){let e=m.multipliedBy(t/100).multipliedBy(h.multipliedBy(x).multipliedBy(4));0===t&&(e=m.multipliedBy(1e-11));const i=null==d?void 0:d.QuerySellBase(e,s);if(!i.isNaN()&&i.gt(0)){const t=i.div(e);p.push({giveAmount:e,getAmount:i,price:t});continue}p.push({giveAmount:e,getAmount:new f(0),price:new f(0)})}for(let t=0;t<=250;t++){let e=m.multipliedBy(t/100).multipliedBy(h.multipliedBy(4));0===t&&(e=m.multipliedBy(1e-11));const i=null==d?void 0:d.QuerySellQuote(e,s);if(!i.isNaN()&&i.gt(0)){const t=e.dividedBy(i);g.push({giveAmount:e,getAmount:i,price:t});continue}g.push({giveAmount:e,getAmount:new f(0),price:new f(0)})}if(p.length<2&&g.length<2)return{leftStatAreaPoints:[],rightStatAreaPoints:[],maxLeftHeight:new f(10).multipliedBy(1.2),maxRightHeight:new f(10).multipliedBy(1.2),middlePriceLN10:new f(0),minXLN10:new f(-1),maxXLN10:new f(1)};const L=[];for(let t=1;t<p.length;t++){const e=p[t],{giveAmount:i,getAmount:n,price:r}=e,o=p[t-1];if(!r.isNaN()&&r.gt(0)&&o){const e=r.minus(o.price).abs(),l=i.minus(o.giveAmount).abs(),a=n.minus(o.getAmount).abs().multipliedBy(l);1===t&&L.push({area:n,price:r,middlePrice:r.plus(e.div(1.1)),rectangleHeight:a.plus(a.multipliedBy(.03))}),L.push({area:n,price:r,middlePrice:r.plus(e.div(2)),rectangleHeight:a}),u=f.max(a,u)}}const b=[];for(let t=1;t<g.length;t++){const e=g[t],{giveAmount:i,getAmount:n,price:r}=e,o=g[t-1],l=o.price,a=o.giveAmount,s=o.getAmount;if(!r.isNaN()&&r.gt(0)&&o){const e=r.minus(l).abs(),o=i.minus(a).abs(),d=n.minus(s).abs().multipliedBy(o);1===t&&b.push({area:n,price:r,middlePrice:r.minus(e.div(1.1)),rectangleHeight:d.plus(d.multipliedBy(.03))}),b.push({area:n,price:r,middlePrice:r.minus(e.div(2)),rectangleHeight:d}),c=f.max(d,c)}}const P=p.length>0?p[p.length-1]:g[0],N=g.length>0?g[0]:p[0],v=g.length>0?g[g.length-1]:p[0],H=P.price,S=v.price,k=N.price,X=new f(Math.log10(k.toNumber()));let B=H.gt(0)?new f(Math.log10(H.toNumber())):new f(-Math.log10(S.toNumber())),C=S.gt(0)?new f(Math.log10(S.toNumber())):new f(-Math.log10(H.toNumber()));const M=f.max(X.minus(B).abs(),C.minus(X).abs());return B=X.minus(M),C=X.plus(M),{leftStatAreaPoints:L,rightStatAreaPoints:b,maxLeftHeight:u.multipliedBy(1.2),maxRightHeight:c.multipliedBy(1.2),minXLN10:B,maxXLN10:C,middlePriceLN10:X}},[t])}({params:N}),O=P-30.13,z=n(null),D=e({grid:"#2A2A2D",midPriceLine:"#313335",leftBg:[0,B,1,"#31645d"],leftLine:"#55f6db",leftColor:"",rightBg:[0,B,1,"#67303d"],rightLine:"#ff4f73",rightColor:"",tooltipBg:"#121212",tooltipColor:void 0,textColor:"#606066"},W),G=e=>{var i;const{current:n}=z,r=e.target;if(r&&n){const e=null===(i=r.getStage())||void 0===i?void 0:i.getPointerPosition();if(e){const{x:i}=e,r=t/2;if(Math.abs(i-r)<=2)return;if(i<=2||t-i<=2)return;const a=S({x:i,width:t,minXLN10:J,maxXLN10:R});let s=null,d=[];const m=i<r;if(m){const t=H({areaPoints:j,targetPrice:a,isLeft:m});s=t.targetAreaStatPoint,d=t.targetAreaStatPoints}else{const t=H({areaPoints:q,targetPrice:a,isLeft:m});s=t.targetAreaStatPoint,d=t.targetAreaStatPoints}if(s){const e=X({target:s.middlePrice}),r=k({minXLN10:J,maxXLN10:R,width:t,targetLN10:e}),a=v({maxHeight:m?F:T,gridAreaHeight:O,value:s.rectangleHeight}),p=n.findOne("#tooltip"),g=n.findOne("#toolTipVertLine"),u=n.findOne("#joinCircle"),c=n.findOne("#tooltip-Text"),f=n.findOne("#tooltip-tag"),x=n.findOne("#priceTextLabel"),L=null==x?void 0:x.findOne("#priceTextLabel-text"),b=n.findOne("#area");null==p||p.position({x:r,y:a-5-6}),null==c||c.fill(D.tooltipColor||(m?"#00FAD9":"#FF5072")),null==c||c.text(m?o("pool.chart.liquidity-chart-buy",{amount:h(s.area),symbol:C,price:h(s.price)}):o("pool.chart.liquidity-chart-sell",{amount:h(s.area),symbol:M,price:h(s.price)})),p&&f&&(p.width()/2>i?(f.pointerDirection("left"),f.pointerHeight(15),f.pointerWidth(8),p.offsetX(-11),p.offsetY(-11)):p.width()/2+i>t?(f.pointerDirection("right"),f.pointerHeight(15),f.pointerWidth(8),p.offsetX(11),p.offsetY(-11)):(f.pointerDirection("down"),f.pointerHeight(8),f.pointerWidth(15),p.offsetX(0),p.offsetY(0))),null==g||g.points([r,O,r,a]),null==g||g.stroke(m?"#55f6db":"#ff4f73");let w=m?"rgb(86, 246, 218)":"#FF5072",A=m?"rgba(86, 246, 218, 0.3)":"rgba(255, 80, 114, 0.3)";D.leftLine&&D.rightLine&&(w=m?D.leftLine:D.rightLine,A=m?`rgba(${l(D.leftLine)}, 0.4)`:`rgba(${l(D.rightLine)}, 0.4)`),u&&(u.x(r),u.y(a),u.fill(w),u.stroke(A)),x&&(x.x(r),x.y(O+8.08+1),x.offsetX(x.width()/2),x.x()-x.width()/2<0?x.x(x.width()/2):x.x()+x.width()/2>t?x.x(t-x.width()/2):x.x(i)),L&&(L.fill(D.tooltipColor||(m?"#00FAD9":"#FF5072")),L.text(h(s.price)));const y=[];for(const e of d){const{middlePrice:i,rectangleHeight:n}=e,r=X({target:i}),o=k({minXLN10:J,maxXLN10:R,width:t,targetLN10:r}),l=v({maxHeight:m?F:T,gridAreaHeight:O,value:n});y.push(o,l+1)}const P=y.slice(),[N,H]=P;m?(P.push(r,a),P.push(r,O),P.push(N,O),P.push(N,H)):(P.unshift(N,O),P.unshift(r,O),P.unshift(r,a)),b&&(b.points(P),b.fill(m?D.leftLine||"#2c5b56":D.rightLine||"#7b3a48")),n.show()}}}},Q=function({gridAreaHeight:t,gridAreaWidth:e,horizontalLineCount:n,verticalLineCount:r,color:o="#2A2A2D"}){return i(()=>{const i=[],l=t/(n+1),s=[],d=e/(r+1);for(let t=0;t<n;t++){const n=l*(t+1);i.push([0,n,e,n])}for(let e=0;e<r;e++){const i=d*(e+1);s.push([i,0,i,t])}return x(L,{children:[i.map((t,e)=>b(a,{points:t,stroke:o,strokeWidth:1,lineCap:"round",lineJoin:"round",tension:1,listening:!1},e)),s.map((t,e)=>b(a,{points:t,stroke:o,strokeWidth:1,lineCap:"round",lineJoin:"round",tension:1,listening:!1},e))]})},[t,e,n,r,o])}({gridAreaHeight:O,gridAreaWidth:t,horizontalLineCount:9,verticalLineCount:7,color:D.grid}),E=function({minXLN10:t,maxXLN10:e,labelCount:n,gridAreaHeight:r,gridAreaWidth:o,color:l="#606066"}){return i(()=>{const i=o/(n+1),d=[],m=[];for(let l=0;l<n;l++){const n=i/2+i*l;d.push({x:n,y:r+10.08+1,text:h(S({x:i*(l+1),width:o,minXLN10:t,maxXLN10:e}))});const a=i*(l+1);m.push([a,r+1,a,r+4+1])}return x(L,{children:[d.map((t,e)=>b(s,{x:t.x,y:t.y,text:t.text,fontSize:14,fontFamily:"Manrope",fill:l,width:i,padding:0,align:"center",verticalAlign:"bottom",listening:!1},e)),m.map((t,e)=>b(a,{points:t,stroke:l,strokeWidth:1,lineCap:"butt",lineJoin:"miter",tension:1,listening:!1},e))]})},[t,e,r,o,n])}({gridAreaHeight:O,gridAreaWidth:t,labelCount:7,minXLN10:J,maxXLN10:R,color:D.textColor}),Y=function({gridAreaHeight:t,gridAreaWidth:e,color:n="#606066"}){return i(()=>{const i=e/2;return b(a,{points:[i,0,i,t-1],stroke:n,strokeWidth:1,lineCap:"round",lineJoin:"round",tension:1,listening:!1})},[t,e,n])}({gridAreaHeight:O,gridAreaWidth:t,color:D.midPriceLine}),{leftLine:V,rightLine:$}=function({leftStatAreaPoints:t,rightStatAreaPoints:e,minXLN10:n,maxXLN10:r,maxLeftHeight:o,maxRightHeight:l,gridAreaWidth:s,gridAreaHeight:d,colorMap:m}){return{leftLine:i(()=>{if(t.length<1)return b(L,{});const e=[];let i=d;for(const l of t){const{middlePrice:t,rectangleHeight:a}=l,m=X({target:t}),p=k({minXLN10:n,maxXLN10:r,width:s,targetLN10:m}),g=v({maxHeight:o,gridAreaHeight:d,value:a});e.push(p,g),g<i&&(i=g)}const l=e.slice(),[p,g]=l,u=l[l.length-1],c=l[l.length-2];return l.push(c,u),l.push(c,d),l.push(p,d),l.push(p,g),x(L,{children:[b(a,{points:l,closed:!0,listening:!1,lineCap:"round",lineJoin:"round",fillLinearGradientStartPoint:{x:0,y:d},fillLinearGradientEndPoint:{x:0,y:i},fillLinearGradientColorStops:m.leftBg}),b(a,{points:e,stroke:m.leftLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1})]})},[t,s,n,r,d,o]),rightLine:i(()=>{if(e.length<1)return b(L,{});const t=[];let i=d;for(const o of e){const{middlePrice:e,rectangleHeight:a}=o,m=X({target:e}),p=k({minXLN10:n,maxXLN10:r,width:s,targetLN10:m}),g=v({maxHeight:l,gridAreaHeight:d,value:a});t.push(p,g),g<i&&(i=g)}const o=t.slice(),[p]=o;return o.unshift(p,d),o.unshift(s,d),x(L,{children:[b(a,{points:o,closed:!0,listening:!1,lineCap:"round",lineJoin:"round",fillLinearGradientStartPoint:{x:0,y:d},fillLinearGradientEndPoint:{x:0,y:i},fillLinearGradientColorStops:m.rightBg}),b(a,{points:t,stroke:m.rightLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1})]})},[e,s,n,r,d,l])}}({leftStatAreaPoints:j,rightStatAreaPoints:q,minXLN10:J,maxXLN10:R,maxLeftHeight:F,maxRightHeight:T,gridAreaWidth:t,gridAreaHeight:O,colorMap:D});return x(d,{width:t,height:P,onMouseMove:G,onMouseOver:G,onMouseEnter:G,onMouseOut:()=>{const{current:t}=z;t&&t.hide()},children:[x(m,{children:[b(p,{x:0,y:0,width:t,height:O,stroke:D.grid,strokeWidth:1}),Q,E,V,$,Y]}),x(m,{ref:z,visible:!1,children:[b(a,{points:[],closed:!0,listening:!1,lineCap:"round",lineJoin:"round",id:"area"}),b(a,{points:[],strokeWidth:1,stroke:"#ff4f73",lineJoin:"round",lineCap:"round",dash:[4,6],id:"toolTipVertLine"}),b(g,{x:0,y:0,radius:5,fill:"#FF5072",stroke:"rgba(255, 80, 114, 0.3)",strokeWidth:12,id:"joinCircle"}),x(u,{listening:!1,x:0,y:0,id:"priceTextLabel",children:[b(c,{fill:D.tooltipBg,id:"priceTextLabel-tag"}),b(s,{text:"-",fontSize:14,fontFamily:"Manrope",padding:2,fill:"#FF5072",id:"priceTextLabel-text"})]}),x(u,{listening:!1,id:"tooltip",children:[b(c,{fill:D.tooltipBg,pointerDirection:"down",pointerWidth:15,pointerHeight:8,cornerRadius:8,lineJoin:"round",id:"tooltip-tag"}),b(s,{text:"",fontFamily:"Manrope",fontSize:12,lineHeight:17/12,padding:r,fill:"#FF5072",id:"tooltip-Text"})]})]})]})}const M=({width:t=834,height:e=462,baseTokenSymbol:i,quoteTokenSymbol:n,pmmModel:r,pmmParams:l,midPrice:a,notShowTipText:s,colorMap:d})=>x(P,{children:[void 0!==l&&void 0!==a&&void 0!==r&&void 0!==a&&b(C,{width:t,height:e,params:l,midPrice:a,pmmModel:r,baseTokenSymbol:i,quoteTokenSymbol:n,colorMap:d}),s?"":x(N,{children:["* ",o("pool.chart.liquidity-chart-tip",{baseTokenSymbol:i})]})]});export{M as default};
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import e from"bignumber.js";import{merge as t,throttle as i,debounce as o}from"lodash";import{useEffect as r,useMemo as n,useRef as l,useState as a}from"react";import{BiChevronLeft as s,BiMinus as d,BiPlus as p,BiChevronRight as u}from"react-icons/bi";import m from"@emotion/styled";import{css as c}from"@emotion/react";import{Stage as g,Layer as h,Rect as b,Line as M,Text as f,Circle as v,Label as P,Tag as x}from"react-konva";import{c as y,e as L,a as z,b as w,d as k,f as B,u as C,l as S,g as X,h as q,i as A,j as T,k as N}from"./helper-DbTc6nlO.js";import{f as W,a as F,b as j}from"./index-uaF4pZWx.js";import{jsxs as Z,jsx as G}from"react/jsx-runtime";import{solveQuadraticFunctionForTarget as H,PMMModel as E}from"@dodoex/api";import"@lingui/core";import"@dodoex/components";import"@dodoex/dodo-contract-request";import"@babel/runtime/helpers/interopRequireDefault";import"@babel/runtime/helpers/defineProperty";import"@lingui/react";import"identicon.js";import"zustand";import"zustand/middleware";import"@web3-react/core";import"@web3-react/eip1193";import"@web3-react/walletconnect-v2";import"@web3-react/metamask";import"@web3-react/types";import"@tanstack/react-query";import"@ethersproject/bignumber";import"react-dom";import"react-window";import"dayjs";import"dayjs/plugin/utc";import"dayjs/plugin/duration";import"dayjs/plugin/localizedFormat";import"react-transition-group";import"react-is";import"@dodoex/contract-request";import"axios";import"recharts";import"react-dom/client";import"jsbi";import"tiny-invariant";import"@uniswap/sdk-core";import"@uniswap/v2-sdk";import"react-infinite-scroller";import"d3";import"rmc-date-picker";import"rmc-date-picker/assets/index.css";import"react-datetime/css/react-datetime.css";const J=m.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&&c`
|
|
17
|
+
border-color: red;
|
|
18
|
+
`}
|
|
19
|
+
}
|
|
20
|
+
`;const D="rgba(38, 39, 41, 0.3)";function Y({width:o,height:a,midPrice:s,pmmModel:d,params:p,baseTokenSymbol:u,quoteTokenSymbol:m,baseMinAndZoomMultiples:c,colorMap:A,setBaseMinAndZoomMultiples:T}){const N=t({grid:"#2A2A2D",midPriceLine:"#313335",leftBg:[0,D,1,"#31645d"],leftLine:"#55f6db",leftColor:"",rightBg:[0,D,1,"#67303d"],rightLine:"#ff4f73",rightColor:"",tooltipBg:"#121212",tooltipColor:void 0},A),F=o,j=a-18,H=F/7,{buyBaseVert:E,sellBaseVert:J}=z({midPrice:s,q:p.q,q0:p.q0,pmmModel:d}),Y=E.div(j),V=J.div(j),R=l(null),I=l(null),{current:$}=R,O=l(0),Q=l(),{horizontalGridLines:K,verticalGridLines:U}=function({chartHeight:e,chartWidth:t,horizontalLineCount:i,verticalLineCount:o}){return n(()=>{const r=[],n=e/(i+1),l=[],a=t/o;for(let e=0;e<i;e++){const i=n*(e+1);r.push([0,i,t,i])}for(let t=0;t<o;t++){const i=a*t+a/2;l.push([i,0,i,e])}return{horizontalGridLines:r,verticalGridLines:l}},[e,t,i,o])}({chartHeight:j,chartWidth:F,horizontalLineCount:9,verticalLineCount:7}),{horizontalLabelTickPoints:_,horizontalLabelTextPoints:ee}=function({chartHeight:e,chartWidth:t,xAxisPoints:i,oneXPx:o,baseMinAndZoomMultiples:r}){return n(()=>{const n=y(t,r.zoomMultiples),l=[],a=[];for(let t=0;t<i;t++){l.push([t*o+o/2,e,t*o+o/2,e+4]);const i=n.multipliedBy(t).multipliedBy(o).plus(n.multipliedBy(o/2)).toNumber(),s=r.baseMin.multipliedBy(10**i),d=t*o,p=e+2+4,u=W(s);a.push({x:d,y:p,text:u})}return{horizontalLabelTickPoints:l,horizontalLabelTextPoints:a}},[r.baseMin,r.zoomMultiples,e,t,o,i])}({chartHeight:j,chartWidth:F,xAxisPoints:7,oneXPx:H,baseMinAndZoomMultiples:c}),{quoteLinePoints:te,quoteLineAreaPoints:ie,quoteLineAreaLinearGradientEndPointY:oe,baseLinePoints:re,baseLineAreaPoints:ne,baseLineAreaLinearGradientEndPointY:le,midPriceLinePoints:ae}=function({chartHeight:t,chartWidth:i,midPrice:o,xPoints:r,pmmModel:l,baseMinAndZoomMultiples:a,buyYPortion:s,sellYPortion:d}){return n(()=>{const n=[],p=[],u=[],{baseMin:m,zoomMultiples:c}=a,g=y(i,c),h=2*c,b=new e(h).div(r);let M=new e(Math.log(o.div(m).toNumber())/Math.log(10));M=e.minimum(h,M),M=e.maximum(0,M);for(let i=new e(0);i.lte(M);){const e=m.multipliedBy(10**i.toNumber()),o=L({val:e,model:l});if(!o.vert.isNaN()){const e=i.div(g).toNumber(),r=t-o.vert.div(s).toNumber();n.push(e,r)}i=i.plus(b)}for(let e=M;e.lte(h);){const i=m.multipliedBy(10**e.toNumber()),o=L({val:i,model:l});if(!o.vert.isNaN()){const i=e.div(g).toNumber(),r=t-o.vert.div(d).toNumber();p.push(i,r)}e=e.plus(b)}const f=M.div(g).toNumber(),[,v]=n,P=l.k.eq(0);P&&n.push(f,v||t),n.push(f,t),u.push(f,t,f,0);const x=L({val:m.multipliedBy(10**h),model:l});let z=t;const w=new e(h).div(g).toNumber();return x.vert.isNaN()||(z=t-x.vert.div(d).toNumber()),P&&p.length>=2&&(p.unshift(f,z),p.unshift(f,t)),p.push(w,z),M.lte(0)&&p.unshift(0,t),{quoteLinePoints:n,quoteLineAreaPoints:[0,t,0,v,...n],quoteLineAreaLinearGradientEndPointY:v,baseLinePoints:p,baseLineAreaPoints:[...p,w,t],baseLineAreaLinearGradientEndPointY:z,midPriceLinePoints:u}},[a,i,r,o,l,t,s,d])}({chartHeight:j,chartWidth:F,midPrice:s,xPoints:50,pmmModel:d,baseMinAndZoomMultiples:c,buyYPortion:Y,sellYPortion:V}),se=e=>{var t;const i=e.target;if(i&&$){const e=null===(t=i.getStage())||void 0===t?void 0:t.getPointerPosition();if(e){const{x:t}=e;if(t>F)return void $.hide();C({x:t,tooltip:$,buyBaseVert:E,sellBaseVert:J,chartWidth:F,chartHeight:j,midPrice:s,pmmModel:d,baseTokenSymbol:u,quoteTokenSymbol:m,baseMinAndZoomMultiples:c,t:q,isHover:!0,color:N.tooltipColor,leftColor:N.leftLine,rightColor:N.rightLine})}}},de=n(()=>i(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-O.current;O.current=e.x,Q.current=e.x,T(e=>void 0===e.baseMin?e:{baseMin:w({dragDistance:t,prevBaseMin:e.baseMin,chartWidth:F,zoomMultiples:e.zoomMultiples}),zoomMultiples:e.zoomMultiples,targetMarginPriceX:0})}}},100),[F,T]),pe=n(()=>i(e=>{e.cancelBubble=!0,e.evt.preventDefault();const t=e.evt.deltaY<0;T(e=>{const i=k({zoomIn:t,prevZoomMultiples:e.zoomMultiples});return{baseMin:B({midPrice:s,zoomMultiples:i}),zoomMultiples:i,targetMarginPriceX:e.targetMarginPriceX}})},100),[s,T]);return r(()=>{c.targetMarginPriceX>0&&null!==$?C({x:c.targetMarginPriceX,tooltip:$,buyBaseVert:E,sellBaseVert:J,chartWidth:F,chartHeight:j,midPrice:s,pmmModel:d,baseTokenSymbol:u,quoteTokenSymbol:m,baseMinAndZoomMultiples:c,t:q,color:N.tooltipColor,leftColor:N.leftLine,rightColor:N.rightLine}):void 0!==Q.current&&null!==$&&C({x:Q.current,tooltip:$,buyBaseVert:E,sellBaseVert:J,chartWidth:F,chartHeight:j,midPrice:s,pmmModel:d,baseTokenSymbol:u,quoteTokenSymbol:m,baseMinAndZoomMultiples:c,t:q,isHover:!0,color:N.tooltipColor,leftColor:N.leftLine,rightColor:N.rightLine})},[c,u,E,j,F,N.leftLine,N.rightLine,N.tooltipColor,s,d,m,J,$]),Z(g,{ref:I,width:o,offsetY:-X,height:a+X,draggable:!0,dragBoundFunc:function(){return{x:this.absolutePosition().x,y:this.absolutePosition().y}},onMouseMove:se,onMouseOver:se,onMouseOut:()=>{$&&$.hide()},onDragStart:function(e){const{target:t}=e,i=t.getStage();if(i){const e=i.getPointerPosition();e&&(O.current=e.x)}},onDragMove:de,onDragEnd:e=>{const{target:t}=e,i=t.getStage();i&&(i.container().style.cursor="pointer")},onWheel:pe,children:[Z(h,{children:[G(b,{x:0,y:0,width:o,height:j,stroke:N.grid,strokeWidth:1}),K.map((e,t)=>G(M,{points:e,stroke:N.grid,strokeWidth:1,lineCap:"round",lineJoin:"round",listening:!1},t)),U.map((e,t)=>G(M,{points:e,stroke:N.grid,strokeWidth:1,lineCap:"round",lineJoin:"round",listening:!1},t)),_.map((e,t)=>G(M,{points:e,stroke:"#9d9d9d",strokeWidth:1,lineCap:"round",lineJoin:"round",listening:!1},t)),ee.map((e,t)=>G(f,{x:e.x,y:e.y,text:e.text,fontFamily:"Manrope",fontSize:12,fill:"#9d9d9d",width:H,padding:0,align:"center",verticalAlign:"bottom",listening:!1},t)),G(M,{points:ie,closed:!0,listening:!1,lineCap:"round",lineJoin:"round",fillLinearGradientStartPoint:{x:0,y:j},fillLinearGradientEndPoint:{x:0,y:oe},fillLinearGradientColorStops:N.leftBg}),G(M,{points:te,stroke:N.leftLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1}),G(M,{points:ne,closed:!0,listening:!1,lineCap:"round",lineJoin:"round",fillLinearGradientStartPoint:{x:F,y:j},fillLinearGradientEndPoint:{x:F,y:le},fillLinearGradientColorStops:N.rightBg}),G(M,{points:re,stroke:N.rightLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1}),G(M,{points:ae,stroke:N.midPriceLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1})]}),Z(h,{ref:R,visible:!1,listening:!1,children:[G(M,{points:[],stroke:"#ff4f73",strokeWidth:1,lineCap:"round",lineJoin:"round",dash:[4,6],id:"toolTipVertLine"}),G(M,{points:[],stroke:"ff4f73",strokeWidth:1,lineCap:"round",lineJoin:"round",dash:[4,6],id:"toolTipHoriLine"}),G(v,{x:0,y:0,radius:5,fill:"#FF5072",stroke:"rgba(255, 80, 114, 0.3)",strokeWidth:12,id:"joinCircle"}),Z(P,{x:0,y:0,id:"priceTextLabel",children:[G(x,{fill:N.tooltipBg,id:"priceTextLabel-tag"}),G(f,{text:"",fontSize:12,fontFamily:"Manrope",padding:4,fill:"#FF5072",id:"priceTextLabel-text"})]}),Z(P,{x:0,y:0,id:"slippageTextLabel",children:[G(x,{fill:N.tooltipBg,id:"slippageTextLabel-tag"}),G(f,{text:"",fontSize:12,fontFamily:"Manrope",padding:4,fill:"#FF5072",id:"slippageTextLabel-text"})]}),Z(P,{x:0,y:0,id:"toolTip",children:[G(x,{fill:N.tooltipBg,pointerDirection:"down",pointerWidth:15,pointerHeight:8,cornerRadius:8,lineJoin:"round",id:"toolTip-tag"}),G(f,{text:"-",fontSize:12,lineHeight:17/12,padding:S,fontFamily:"Manrope",fill:"#FFFFFF",id:"toolTip-text"})]})]})]})}const V=m.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
|
+
`,R=m.div`
|
|
33
|
+
height: 100%;
|
|
34
|
+
`,I=m.div`
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
`,$=m.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
|
+
`,O=m.span`
|
|
53
|
+
color: #85858d;
|
|
54
|
+
`,Q=m.div`
|
|
55
|
+
margin-top: 20px;
|
|
56
|
+
display: flex;
|
|
57
|
+
justify-content: center;
|
|
58
|
+
margin-bottom: 9px;
|
|
59
|
+
`,K=m(V)`
|
|
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 U({params:t,target:i,isBuy:o=!0}){const r=new e(t.b),n=new e(t.q);let l=new e(t.b0);const a=new e(t.q0),s=new e(t.i),d=new e(t.k),{R:p}=t;1===p&&l.eq(r)&&(l=H(r,n.minus(a),new e(1).div(s),d));const u=o?r.plus(i):r.minus(i);if(u.lt(l)||r.eq(l)){let t=l.multipliedBy(l).div(u).div(u);return t=new e(1).minus(d).plus(d.multipliedBy(t)),s.multipliedBy(t)}const m=new E;m.RStatus=p,m.B=r,m.B0=l,m.Q=n,m.Q0=a,m.i=s,m.k=d,m.mtFeeRate=new e(0),m.lpFeeRate=new e(0);let c=new e(0);c=o?m.querySellBase(i):m.queryBuyBase(i);const g=o?n.minus(c):n.plus(c);let h=a.multipliedBy(a).div(g).div(g);return h=new e(1).minus(d).plus(d.multipliedBy(h)),s.div(h)}const _=({chartId:t,width:i=834,height:l=460,baseTokenSymbol:m,quoteTokenSymbol:c,pmmModel:g,pmmParams:h,midPrice:b=new e(0),colorMap:M,notShowAmountInput:f})=>{(({id:e})=>{r(()=>{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 o=document.getElementById(e),r=!!i&&{passive:!1};return null==o||o.addEventListener("wheel",t,r),()=>{null==o||o.removeEventListener("wheel",t)}},[e])})({id:t});const[v,P]=a(""),[x,y]=a(""),[L,z]=a("-"),[C,S]=a("-"),[X,W]=a({baseMin:new e(0),zoomMultiples:A,targetMarginPriceX:0});r(()=>{void 0!==b&&W(e=>({baseMin:B({midPrice:b,zoomMultiples:e.zoomMultiples}),zoomMultiples:e.zoomMultiples,targetMarginPriceX:e.targetMarginPriceX}))},[b]);const H=n(()=>o(({type:t,amount:o})=>{""===o&&b&&(W({baseMin:B({midPrice:b,zoomMultiples:A}),zoomMultiples:A,targetMarginPriceX:0}),"buy"===t?z("-"):S("-"));const r=new e(o);if(!r.lte(0)&&!r.isNaN()&&(null==h?void 0:h.b)&&!r.gte(h.b)&&b)if("buy"===t){const e=U({params:h,target:r});W(o=>{const r=T({currentBaseMinAndZoomMultiples:o,targetPrice:e,midPrice:b,width:i});if(r.isSkip)return{baseMin:o.baseMin,zoomMultiples:o.zoomMultiples,targetMarginPriceX:r.targetX};if(r.targetX>0)return{baseMin:r.baseMin,zoomMultiples:r.zoomMultiples,targetMarginPriceX:r.targetX};const n=N({midPrice:b,width:i,type:t,targetPrice:e}),l=n.zoomMultiples.dp(6).toNumber();return{baseMin:B({midPrice:b,zoomMultiples:l}),zoomMultiples:l,targetMarginPriceX:n.targetX}}),z(`${F({input:e.minus(b).div(b)})}`)}else{const e=function({params:e,target:t}){return U({params:e,target:t,isBuy:!1})}({params:h,target:r});W(o=>{const r=T({currentBaseMinAndZoomMultiples:o,targetPrice:e,midPrice:b,width:i});if(r.isSkip)return{baseMin:o.baseMin,zoomMultiples:o.zoomMultiples,targetMarginPriceX:r.targetX};if(r.targetX>0)return{baseMin:r.baseMin,zoomMultiples:r.zoomMultiples,targetMarginPriceX:r.targetX};const n=N({midPrice:b,width:i,type:t,targetPrice:e}),l=n.zoomMultiples.dp(6).toNumber();return{baseMin:B({midPrice:b,zoomMultiples:l}),zoomMultiples:l,targetMarginPriceX:n.targetX}}),S(`+${F({input:e.minus(b).div(b)})}`)}},300),[h,b,i]);r(()=>{void 0!==v&&H({type:"buy",amount:v})},[H,v]),r(()=>{void 0!==x&&H({type:"sell",amount:x})},[H,x]);const E=e=>{let t=0;t=e?-.1*i:.1*i,W(e=>void 0===e.baseMin?e:{baseMin:w({dragDistance:t,prevBaseMin:e.baseMin,chartWidth:i,zoomMultiples:e.zoomMultiples}),zoomMultiples:e.zoomMultiples,targetMarginPriceX:e.targetMarginPriceX})},D=e=>{W(t=>{const i=k({zoomIn:null!=e&&e,prevZoomMultiples:t.zoomMultiples});return{baseMin:B({midPrice:b,zoomMultiples:i}),zoomMultiples:i,targetMarginPriceX:t.targetMarginPriceX}})},V=n(()=>{if(""===v)return!1;const t=new e(v);return!(!t.lte(0)&&!t.isNaN()&&(null==h?void 0:h.b)&&!t.gte(h.b))},[v,h]),_=n(()=>{if(""===x)return!1;const t=new e(x);return!(!t.lte(0)&&!t.isNaN()&&(null==h?void 0:h.b)&&!t.gte(h.b))},[x,h]);return Z(R,{id:t,children:[f?"":Z(I,{children:[Z($,{borderColor:M&&M.grid,children:[q("pool.chart.buy-amount",{symbol:m}),G(J,{value:v,error:V,onChange:e=>{const t=j(e.target.value,2);null!==t&&P(t)}}),G(O,{children:q("pool.chart.price-impact",{amount:L})})]}),Z($,{borderColor:M&&M.grid,children:[q("pool.chart.sell-amount",{symbol:m}),G(J,{value:x,error:_,onChange:e=>{const t=j(e.target.value,2);null!==t&&y(t)}}),G(O,{children:q("pool.chart.price-impact",{amount:C})})]})]}),void 0!==h&&void 0!==b&&void 0!==g&&void 0!==X.baseMin&&void 0!==b&&G(Y,{width:i,height:l,params:h,midPrice:b,pmmModel:g,baseTokenSymbol:m,quoteTokenSymbol:c,baseMinAndZoomMultiples:X,colorMap:M,setBaseMinAndZoomMultiples:W}),Z(Q,{className:"operate-btn-wrapper",children:[G(K,{onClick:()=>E(!0),children:G(s,{})}),G(K,{onClick:()=>D(!1),children:G(d,{})}),G(K,{onClick:()=>D(!0),children:G(p,{})}),G(K,{onClick:()=>E(!1),children:G(u,{})})]})]})};export{_ as default};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";var e=require("@emotion/styled"),t=require("lodash"),i=require("react"),r=require("./helper-B5R2naMs.cjs"),n=require("react-konva"),o=require("./index-B9bPmfzC.cjs"),a=require("bignumber.js"),l=require("react/jsx-runtime"),s=require("@dodoex/api");require("@lingui/core"),require("@dodoex/components"),require("@dodoex/dodo-contract-request"),require("@babel/runtime/helpers/interopRequireDefault"),require("@babel/runtime/helpers/defineProperty"),require("@lingui/react"),require("identicon.js"),require("zustand"),require("zustand/middleware"),require("@web3-react/core"),require("@web3-react/eip1193"),require("@web3-react/walletconnect-v2"),require("@web3-react/metamask"),require("@web3-react/types"),require("@tanstack/react-query"),require("@ethersproject/bignumber"),require("react-dom"),require("react-window"),require("dayjs"),require("dayjs/plugin/utc"),require("dayjs/plugin/duration"),require("dayjs/plugin/localizedFormat"),require("react-transition-group"),require("react-is"),require("@dodoex/contract-request"),require("axios"),require("recharts"),require("react-dom/client"),require("jsbi"),require("tiny-invariant"),require("@uniswap/sdk-core"),require("@uniswap/v2-sdk"),require("react-infinite-scroller"),require("d3"),require("rmc-date-picker"),require("rmc-date-picker/assets/index.css"),require("react-datetime/css/react-datetime.css");const u=e.div`
|
|
2
|
+
height: 100%;
|
|
3
|
+
position: relative;
|
|
4
|
+
`,d=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
|
+
`;function g({maxHeight:e,gridAreaHeight:t,value:i}){const r=new a(t).minus(36),n=r.div(e);return r.minus(i.multipliedBy(n)).plus(36).toNumber()}function c({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 h({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 m({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 x({width:e,height:u,params:d,baseTokenSymbol:x,quoteTokenSymbol:L,colorMap:b}){const{maxLeftHeight:w,maxRightHeight:A,leftStatAreaPoints:y,rightStatAreaPoints:N,minXLN10:q,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),l=new a(e.k),{R:u}=e;1===u&&r.eq(t)&&(r=s.solveQuadraticFunctionForTarget(t,i.minus(n),new a(1).div(o),l));const d=new s.PMMState({i:o,K:l,B:t,Q:i,B0:r,Q0:n,R:u,mtFeeRate:new a(0),lpFeeRate:new a(0)}),g=new s.PMMHelper,c=new a(d.B),h=[],m=[];let p=new a(0),f=new a(0);const x=g.GetMidPrice(d),L=i.gt(0)?t.div(i):new a(1);for(let e=0;e<=250;e++){let t=c.multipliedBy(e/100).multipliedBy(x.multipliedBy(L).multipliedBy(4));0===e&&(t=c.multipliedBy(1e-11));const i=null==g?void 0:g.QuerySellBase(t,d);if(!i.isNaN()&&i.gt(0)){const e=i.div(t);h.push({giveAmount:t,getAmount:i,price:e});continue}h.push({giveAmount:t,getAmount:new a(0),price:new a(0)})}for(let e=0;e<=250;e++){let t=c.multipliedBy(e/100).multipliedBy(x.multipliedBy(4));0===e&&(t=c.multipliedBy(1e-11));const i=null==g?void 0:g.QuerySellQuote(t,d);if(!i.isNaN()&&i.gt(0)){const e=t.dividedBy(i);m.push({giveAmount:t,getAmount:i,price:e});continue}m.push({giveAmount:t,getAmount:new a(0),price:new a(0)})}if(h.length<2&&m.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<h.length;e++){const t=h[e],{giveAmount:i,getAmount:r,price:n}=t,o=h[e-1];if(!n.isNaN()&&n.gt(0)&&o){const t=n.minus(o.price).abs(),l=i.minus(o.giveAmount).abs(),s=r.minus(o.getAmount).abs().multipliedBy(l);1===e&&b.push({area:r,price:n,middlePrice:n.plus(t.div(1.1)),rectangleHeight:s.plus(s.multipliedBy(.03))}),b.push({area:r,price:n,middlePrice:n.plus(t.div(2)),rectangleHeight:s}),p=a.max(s,p)}}const w=[];for(let e=1;e<m.length;e++){const t=m[e],{giveAmount:i,getAmount:r,price:n}=t,o=m[e-1],l=o.price,s=o.giveAmount,u=o.getAmount;if(!n.isNaN()&&n.gt(0)&&o){const t=n.minus(l).abs(),o=i.minus(s).abs(),d=r.minus(u).abs().multipliedBy(o);1===e&&w.push({area:r,price:n,middlePrice:n.minus(t.div(1.1)),rectangleHeight:d.plus(d.multipliedBy(.03))}),w.push({area:r,price:n,middlePrice:n.minus(t.div(2)),rectangleHeight:d}),f=a.max(d,f)}}const A=h.length>0?h[h.length-1]:m[0],y=m.length>0?m[0]:h[0],N=m.length>0?m[m.length-1]:h[0],q=A.price,P=N.price,v=y.price,S=new a(Math.log10(v.toNumber()));let j=q.gt(0)?new a(Math.log10(q.toNumber())):new a(-Math.log10(P.toNumber())),H=P.gt(0)?new a(Math.log10(P.toNumber())):new a(-Math.log10(q.toNumber()));const k=a.max(S.minus(j).abs(),H.minus(S).abs());return j=S.minus(k),H=S.plus(k),{leftStatAreaPoints:b,rightStatAreaPoints:w,maxLeftHeight:p.multipliedBy(1.2),maxRightHeight:f.multipliedBy(1.2),minXLN10:j,maxXLN10:H,middlePriceLN10:S}},[e])}({params:d}),v=u-30.13,S=i.useRef(null),j=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"},b),H=t=>{var i;const{current:n}=S,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=h({x:i,width:e,minXLN10:q,maxXLN10:P});let s=null,u=[];const d=i<a;if(d){const e=c({areaPoints:y,targetPrice:l,isLeft:d});s=e.targetAreaStatPoint,u=e.targetAreaStatPoints}else{const e=c({areaPoints:N,targetPrice:l,isLeft:d});s=e.targetAreaStatPoint,u=e.targetAreaStatPoints}if(s){const t=p({target:s.middlePrice}),a=m({minXLN10:q,maxXLN10:P,width:e,targetLN10:t}),l=g({maxHeight:d?w:A,gridAreaHeight:v,value:s.rectangleHeight}),c=n.findOne("#tooltip"),h=n.findOne("#toolTipVertLine"),f=n.findOne("#joinCircle"),b=n.findOne("#tooltip-Text"),y=n.findOne("#tooltip-tag"),N=n.findOne("#priceTextLabel"),S=null==N?void 0:N.findOne("#priceTextLabel-text"),H=n.findOne("#area");null==c||c.position({x:a,y:l-5-6}),null==b||b.fill(j.tooltipColor||(d?"#00FAD9":"#FF5072")),null==b||b.text(d?r.chartT("pool.chart.liquidity-chart-buy",{amount:o.formatShortNumber(s.area),symbol:x,price:o.formatShortNumber(s.price)}):r.chartT("pool.chart.liquidity-chart-sell",{amount:o.formatShortNumber(s.area),symbol:L,price:o.formatShortNumber(s.price)})),c&&y&&(c.width()/2>i?(y.pointerDirection("left"),y.pointerHeight(15),y.pointerWidth(8),c.offsetX(-11),c.offsetY(-11)):c.width()/2+i>e?(y.pointerDirection("right"),y.pointerHeight(15),y.pointerWidth(8),c.offsetX(11),c.offsetY(-11)):(y.pointerDirection("down"),y.pointerHeight(8),y.pointerWidth(15),c.offsetX(0),c.offsetY(0))),null==h||h.points([a,v,a,l]),null==h||h.stroke(d?"#55f6db":"#ff4f73");let k=d?"rgb(86, 246, 218)":"#FF5072",X=d?"rgba(86, 246, 218, 0.3)":"rgba(255, 80, 114, 0.3)";j.leftLine&&j.rightLine&&(k=d?j.leftLine:j.rightLine,X=d?`rgba(${r.colorRgb(j.leftLine)}, 0.4)`:`rgba(${r.colorRgb(j.rightLine)}, 0.4)`),f&&(f.x(a),f.y(l),f.fill(k),f.stroke(X)),N&&(N.x(a),N.y(v+8.08+1),N.offsetX(N.width()/2),N.x()-N.width()/2<0?N.x(N.width()/2):N.x()+N.width()/2>e?N.x(e-N.width()/2):N.x(i)),S&&(S.fill(j.tooltipColor||(d?"#00FAD9":"#FF5072")),S.text(o.formatShortNumber(s.price)));const M=[];for(const t of u){const{middlePrice:i,rectangleHeight:r}=t,n=p({target:i}),o=m({minXLN10:q,maxXLN10:P,width:e,targetLN10:n}),a=g({maxHeight:d?w:A,gridAreaHeight:v,value:r});M.push(o,a+1)}const B=M.slice(),[C,F]=B;d?(B.push(a,l),B.push(a,v),B.push(C,v),B.push(C,F)):(B.unshift(C,v),B.unshift(a,v),B.unshift(a,l)),H&&(H.points(B),H.fill(d?j.leftLine||"#2c5b56":j.rightLine||"#7b3a48")),n.show()}}}},k=function({gridAreaHeight:e,gridAreaWidth:t,horizontalLineCount:r,verticalLineCount:o,color:a="#2A2A2D"}){return i.useMemo(()=>{const i=[],s=e/(r+1),u=[],d=t/(o+1);for(let e=0;e<r;e++){const r=s*(e+1);i.push([0,r,t,r])}for(let t=0;t<o;t++){const i=d*(t+1);u.push([i,0,i,e])}return l.jsxs(l.Fragment,{children:[i.map((e,t)=>l.jsx(n.Line,{points:e,stroke:a,strokeWidth:1,lineCap:"round",lineJoin:"round",tension:1,listening:!1},t)),u.map((e,t)=>l.jsx(n.Line,{points:e,stroke:a,strokeWidth:1,lineCap:"round",lineJoin:"round",tension:1,listening:!1},t))]})},[e,t,r,o,a])}({gridAreaHeight:v,gridAreaWidth:e,horizontalLineCount:9,verticalLineCount:7,color:j.grid}),X=function({minXLN10:e,maxXLN10:t,labelCount:r,gridAreaHeight:a,gridAreaWidth:s,color:u="#606066"}){return i.useMemo(()=>{const i=s/(r+1),d=[],g=[];for(let n=0;n<r;n++){const r=i/2+i*n;d.push({x:r,y:a+10.08+1,text:o.formatShortNumber(h({x:i*(n+1),width:s,minXLN10:e,maxXLN10:t}))});const l=i*(n+1);g.push([l,a+1,l,a+4+1])}return l.jsxs(l.Fragment,{children:[d.map((e,t)=>l.jsx(n.Text,{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},t)),g.map((e,t)=>l.jsx(n.Line,{points:e,stroke:u,strokeWidth:1,lineCap:"butt",lineJoin:"miter",tension:1,listening:!1},t))]})},[e,t,a,s,r])}({gridAreaHeight:v,gridAreaWidth:e,labelCount:7,minXLN10:q,maxXLN10:P,color:j.textColor}),M=function({gridAreaHeight:e,gridAreaWidth:t,color:r="#606066"}){return i.useMemo(()=>{const i=t/2;return l.jsx(n.Line,{points:[i,0,i,e-1],stroke:r,strokeWidth:1,lineCap:"round",lineJoin:"round",tension:1,listening:!1})},[e,t,r])}({gridAreaHeight:v,gridAreaWidth:e,color:j.midPriceLine}),{leftLine:B,rightLine:C}=function({leftStatAreaPoints:e,rightStatAreaPoints:t,minXLN10:r,maxXLN10:o,maxLeftHeight:a,maxRightHeight:s,gridAreaWidth:u,gridAreaHeight:d,colorMap:c}){return{leftLine:i.useMemo(()=>{if(e.length<1)return l.jsx(l.Fragment,{});const t=[];let i=d;for(const n of e){const{middlePrice:e,rectangleHeight:l}=n,s=p({target:e}),c=m({minXLN10:r,maxXLN10:o,width:u,targetLN10:s}),h=g({maxHeight:a,gridAreaHeight:d,value:l});t.push(c,h),h<i&&(i=h)}const s=t.slice(),[h,f]=s,x=s[s.length-1],L=s[s.length-2];return s.push(L,x),s.push(L,d),s.push(h,d),s.push(h,f),l.jsxs(l.Fragment,{children:[l.jsx(n.Line,{points:s,closed:!0,listening:!1,lineCap:"round",lineJoin:"round",fillLinearGradientStartPoint:{x:0,y:d},fillLinearGradientEndPoint:{x:0,y:i},fillLinearGradientColorStops:c.leftBg}),l.jsx(n.Line,{points:t,stroke:c.leftLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1})]})},[e,u,r,o,d,a]),rightLine:i.useMemo(()=>{if(t.length<1)return l.jsx(l.Fragment,{});const e=[];let i=d;for(const n of t){const{middlePrice:t,rectangleHeight:a}=n,l=p({target:t}),c=m({minXLN10:r,maxXLN10:o,width:u,targetLN10:l}),h=g({maxHeight:s,gridAreaHeight:d,value:a});e.push(c,h),h<i&&(i=h)}const a=e.slice(),[h]=a;return a.unshift(h,d),a.unshift(u,d),l.jsxs(l.Fragment,{children:[l.jsx(n.Line,{points:a,closed:!0,listening:!1,lineCap:"round",lineJoin:"round",fillLinearGradientStartPoint:{x:0,y:d},fillLinearGradientEndPoint:{x:0,y:i},fillLinearGradientColorStops:c.rightBg}),l.jsx(n.Line,{points:e,stroke:c.rightLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1})]})},[t,u,r,o,d,s])}}({leftStatAreaPoints:y,rightStatAreaPoints:N,minXLN10:q,maxXLN10:P,maxLeftHeight:w,maxRightHeight:A,gridAreaWidth:e,gridAreaHeight:v,colorMap:j});return l.jsxs(n.Stage,{width:e,height:u,onMouseMove:H,onMouseOver:H,onMouseEnter:H,onMouseOut:()=>{const{current:e}=S;e&&e.hide()},children:[l.jsxs(n.Layer,{children:[l.jsx(n.Rect,{x:0,y:0,width:e,height:v,stroke:j.grid,strokeWidth:1}),k,X,B,C,M]}),l.jsxs(n.Layer,{ref:S,visible:!1,children:[l.jsx(n.Line,{points:[],closed:!0,listening:!1,lineCap:"round",lineJoin:"round",id:"area"}),l.jsx(n.Line,{points:[],strokeWidth:1,stroke:"#ff4f73",lineJoin:"round",lineCap:"round",dash:[4,6],id:"toolTipVertLine"}),l.jsx(n.Circle,{x:0,y:0,radius:5,fill:"#FF5072",stroke:"rgba(255, 80, 114, 0.3)",strokeWidth:12,id:"joinCircle"}),l.jsxs(n.Label,{listening:!1,x:0,y:0,id:"priceTextLabel",children:[l.jsx(n.Tag,{fill:j.tooltipBg,id:"priceTextLabel-tag"}),l.jsx(n.Text,{text:"-",fontSize:14,fontFamily:"Manrope",padding:2,fill:"#FF5072",id:"priceTextLabel-text"})]}),l.jsxs(n.Label,{listening:!1,id:"tooltip",children:[l.jsx(n.Tag,{fill:j.tooltipBg,pointerDirection:"down",pointerWidth:15,pointerHeight:8,cornerRadius:8,lineJoin:"round",id:"tooltip-tag"}),l.jsx(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:s,notShowTipText:g,colorMap:c})=>l.jsxs(u,{children:[void 0!==a&&void 0!==s&&void 0!==o&&void 0!==s&&l.jsx(x,{width:e,height:t,params:a,midPrice:s,pmmModel:o,baseTokenSymbol:i,quoteTokenSymbol:n,colorMap:c}),g?"":l.jsxs(d,{children:["* ",r.chartT("pool.chart.liquidity-chart-tip",{baseTokenSymbol:i})]})]});
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
"use strict";var e=require("bignumber.js"),t=require("lodash"),i=require("react"),o=require("react-icons/bi"),r=require("@emotion/styled"),n=require("@emotion/react"),l=require("react-konva"),s=require("./helper-B5R2naMs.cjs"),a=require("./index-B9bPmfzC.cjs"),u=require("react/jsx-runtime"),d=require("@dodoex/api");require("@lingui/core"),require("@dodoex/components"),require("@dodoex/dodo-contract-request"),require("@babel/runtime/helpers/interopRequireDefault"),require("@babel/runtime/helpers/defineProperty"),require("@lingui/react"),require("identicon.js"),require("zustand"),require("zustand/middleware"),require("@web3-react/core"),require("@web3-react/eip1193"),require("@web3-react/walletconnect-v2"),require("@web3-react/metamask"),require("@web3-react/types"),require("@tanstack/react-query"),require("@ethersproject/bignumber"),require("react-dom"),require("react-window"),require("dayjs"),require("dayjs/plugin/utc"),require("dayjs/plugin/duration"),require("dayjs/plugin/localizedFormat"),require("react-transition-group"),require("react-is"),require("@dodoex/contract-request"),require("axios"),require("recharts"),require("react-dom/client"),require("jsbi"),require("tiny-invariant"),require("@uniswap/sdk-core"),require("@uniswap/v2-sdk"),require("react-infinite-scroller"),require("d3"),require("rmc-date-picker"),require("rmc-date-picker/assets/index.css"),require("react-datetime/css/react-datetime.css");const c=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&&n.css`
|
|
17
|
+
border-color: red;
|
|
18
|
+
`}
|
|
19
|
+
}
|
|
20
|
+
`;const p="rgba(38, 39, 41, 0.3)";function m({width:o,height:r,midPrice:n,pmmModel:d,params:c,baseTokenSymbol:m,quoteTokenSymbol:g,baseMinAndZoomMultiples:h,colorMap:b,setBaseMinAndZoomMultiples:M}){const f=t.merge({grid:"#2A2A2D",midPriceLine:"#313335",leftBg:[0,p,1,"#31645d"],leftLine:"#55f6db",leftColor:"",rightBg:[0,p,1,"#67303d"],rightLine:"#ff4f73",rightColor:"",tooltipBg:"#121212",tooltipColor:void 0},b),x=o,P=r-18,v=x/7,{buyBaseVert:y,sellBaseVert:L}=s.computeBaseVert({midPrice:n,q:c.q,q0:c.q0,pmmModel:d}),q=y.div(P),B=L.div(P),z=i.useRef(null),j=i.useRef(null),{current:w}=z,T=i.useRef(0),k=i.useRef(),{horizontalGridLines:C,verticalGridLines:S}=function({chartHeight:e,chartWidth:t,horizontalLineCount:o,verticalLineCount:r}){return i.useMemo(()=>{const i=[],n=e/(o+1),l=[],s=t/r;for(let e=0;e<o;e++){const o=n*(e+1);i.push([0,o,t,o])}for(let t=0;t<r;t++){const i=s*t+s/2;l.push([i,0,i,e])}return{horizontalGridLines:i,verticalGridLines:l}},[e,t,o,r])}({chartHeight:P,chartWidth:x,horizontalLineCount:9,verticalLineCount:7}),{horizontalLabelTickPoints:A,horizontalLabelTextPoints:X}=function({chartHeight:e,chartWidth:t,xAxisPoints:o,oneXPx:r,baseMinAndZoomMultiples:n}){return i.useMemo(()=>{const i=s.computeXPortion(t,n.zoomMultiples),l=[],u=[];for(let t=0;t<o;t++){l.push([t*r+r/2,e,t*r+r/2,e+4]);const o=i.multipliedBy(t).multipliedBy(r).plus(i.multipliedBy(r/2)).toNumber(),s=n.baseMin.multipliedBy(10**o),d=t*r,c=e+2+4,p=a.formatShortNumber(s);u.push({x:d,y:c,text:p})}return{horizontalLabelTickPoints:l,horizontalLabelTextPoints:u}},[n.baseMin,n.zoomMultiples,e,t,r,o])}({chartHeight:P,chartWidth:x,xAxisPoints:7,oneXPx:v,baseMinAndZoomMultiples:h}),{quoteLinePoints:N,quoteLineAreaPoints:Z,quoteLineAreaLinearGradientEndPointY:W,baseLinePoints:F,baseLineAreaPoints:E,baseLineAreaLinearGradientEndPointY:G,midPriceLinePoints:H}=function({chartHeight:t,chartWidth:o,midPrice:r,xPoints:n,pmmModel:l,baseMinAndZoomMultiples:a,buyYPortion:u,sellYPortion:d}){return i.useMemo(()=>{const i=[],c=[],p=[],{baseMin:m,zoomMultiples:g}=a,h=s.computeXPortion(o,g),b=2*g,M=new e(b).div(n);let f=new e(Math.log(r.div(m).toNumber())/Math.log(10));f=e.minimum(b,f),f=e.maximum(0,f);for(let o=new e(0);o.lte(f);){const e=m.multipliedBy(10**o.toNumber()),r=s.evalPoint({val:e,model:l});if(!r.vert.isNaN()){const e=o.div(h).toNumber(),n=t-r.vert.div(u).toNumber();i.push(e,n)}o=o.plus(M)}for(let e=f;e.lte(b);){const i=m.multipliedBy(10**e.toNumber()),o=s.evalPoint({val:i,model:l});if(!o.vert.isNaN()){const i=e.div(h).toNumber(),r=t-o.vert.div(d).toNumber();c.push(i,r)}e=e.plus(M)}const x=f.div(h).toNumber(),[,P]=i,v=l.k.eq(0);v&&i.push(x,P||t),i.push(x,t),p.push(x,t,x,0);const y=s.evalPoint({val:m.multipliedBy(10**b),model:l});let L=t;const q=new e(b).div(h).toNumber();return y.vert.isNaN()||(L=t-y.vert.div(d).toNumber()),v&&c.length>=2&&(c.unshift(x,L),c.unshift(x,t)),c.push(q,L),f.lte(0)&&c.unshift(0,t),{quoteLinePoints:i,quoteLineAreaPoints:[0,t,0,P,...i],quoteLineAreaLinearGradientEndPointY:P,baseLinePoints:c,baseLineAreaPoints:[...c,q,t],baseLineAreaLinearGradientEndPointY:L,midPriceLinePoints:p}},[a,o,n,r,l,t,u,d])}({chartHeight:P,chartWidth:x,midPrice:n,xPoints:50,pmmModel:d,baseMinAndZoomMultiples:h,buyYPortion:q,sellYPortion:B}),D=e=>{var t;const i=e.target;if(i&&w){const e=null===(t=i.getStage())||void 0===t?void 0:t.getPointerPosition();if(e){const{x:t}=e;if(t>x)return void w.hide();s.updateTooltip({x:t,tooltip:w,buyBaseVert:y,sellBaseVert:L,chartWidth:x,chartHeight:P,midPrice:n,pmmModel:d,baseTokenSymbol:m,quoteTokenSymbol:g,baseMinAndZoomMultiples:h,t:s.chartT,isHover:!0,color:f.tooltipColor,leftColor:f.leftLine,rightColor:f.rightLine})}}},R=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-T.current;T.current=e.x,k.current=e.x,M(e=>void 0===e.baseMin?e:{baseMin:s.computeBaseMinByDistance({dragDistance:t,prevBaseMin:e.baseMin,chartWidth:x,zoomMultiples:e.zoomMultiples}),zoomMultiples:e.zoomMultiples,targetMarginPriceX:0})}}},100),[x,M]),Y=i.useMemo(()=>t.throttle(e=>{e.cancelBubble=!0,e.evt.preventDefault();const t=e.evt.deltaY<0;M(e=>{const i=s.computeZoomMultiplesWhenZoom({zoomIn:t,prevZoomMultiples:e.zoomMultiples});return{baseMin:s.computeBaseAfterZoom({midPrice:n,zoomMultiples:i}),zoomMultiples:i,targetMarginPriceX:e.targetMarginPriceX}})},100),[n,M]);return i.useEffect(()=>{h.targetMarginPriceX>0&&null!==w?s.updateTooltip({x:h.targetMarginPriceX,tooltip:w,buyBaseVert:y,sellBaseVert:L,chartWidth:x,chartHeight:P,midPrice:n,pmmModel:d,baseTokenSymbol:m,quoteTokenSymbol:g,baseMinAndZoomMultiples:h,t:s.chartT,color:f.tooltipColor,leftColor:f.leftLine,rightColor:f.rightLine}):void 0!==k.current&&null!==w&&s.updateTooltip({x:k.current,tooltip:w,buyBaseVert:y,sellBaseVert:L,chartWidth:x,chartHeight:P,midPrice:n,pmmModel:d,baseTokenSymbol:m,quoteTokenSymbol:g,baseMinAndZoomMultiples:h,t:s.chartT,isHover:!0,color:f.tooltipColor,leftColor:f.leftLine,rightColor:f.rightLine})},[h,m,y,P,x,f.leftLine,f.rightLine,f.tooltipColor,n,d,g,L,w]),u.jsxs(l.Stage,{ref:j,width:o,offsetY:-s.chartOffsetYBCToolTip,height:r+s.chartOffsetYBCToolTip,draggable:!0,dragBoundFunc:function(){return{x:this.absolutePosition().x,y:this.absolutePosition().y}},onMouseMove:D,onMouseOver:D,onMouseOut:()=>{w&&w.hide()},onDragStart:function(e){const{target:t}=e,i=t.getStage();if(i){const e=i.getPointerPosition();e&&(T.current=e.x)}},onDragMove:R,onDragEnd:e=>{const{target:t}=e,i=t.getStage();i&&(i.container().style.cursor="pointer")},onWheel:Y,children:[u.jsxs(l.Layer,{children:[u.jsx(l.Rect,{x:0,y:0,width:o,height:P,stroke:f.grid,strokeWidth:1}),C.map((e,t)=>u.jsx(l.Line,{points:e,stroke:f.grid,strokeWidth:1,lineCap:"round",lineJoin:"round",listening:!1},t)),S.map((e,t)=>u.jsx(l.Line,{points:e,stroke:f.grid,strokeWidth:1,lineCap:"round",lineJoin:"round",listening:!1},t)),A.map((e,t)=>u.jsx(l.Line,{points:e,stroke:"#9d9d9d",strokeWidth:1,lineCap:"round",lineJoin:"round",listening:!1},t)),X.map((e,t)=>u.jsx(l.Text,{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},t)),u.jsx(l.Line,{points:Z,closed:!0,listening:!1,lineCap:"round",lineJoin:"round",fillLinearGradientStartPoint:{x:0,y:P},fillLinearGradientEndPoint:{x:0,y:W},fillLinearGradientColorStops:f.leftBg}),u.jsx(l.Line,{points:N,stroke:f.leftLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1}),u.jsx(l.Line,{points:E,closed:!0,listening:!1,lineCap:"round",lineJoin:"round",fillLinearGradientStartPoint:{x:x,y:P},fillLinearGradientEndPoint:{x:x,y:G},fillLinearGradientColorStops:f.rightBg}),u.jsx(l.Line,{points:F,stroke:f.rightLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1}),u.jsx(l.Line,{points:H,stroke:f.midPriceLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1})]}),u.jsxs(l.Layer,{ref:z,visible:!1,listening:!1,children:[u.jsx(l.Line,{points:[],stroke:"#ff4f73",strokeWidth:1,lineCap:"round",lineJoin:"round",dash:[4,6],id:"toolTipVertLine"}),u.jsx(l.Line,{points:[],stroke:"ff4f73",strokeWidth:1,lineCap:"round",lineJoin:"round",dash:[4,6],id:"toolTipHoriLine"}),u.jsx(l.Circle,{x:0,y:0,radius:5,fill:"#FF5072",stroke:"rgba(255, 80, 114, 0.3)",strokeWidth:12,id:"joinCircle"}),u.jsxs(l.Label,{x:0,y:0,id:"priceTextLabel",children:[u.jsx(l.Tag,{fill:f.tooltipBg,id:"priceTextLabel-tag"}),u.jsx(l.Text,{text:"",fontSize:12,fontFamily:"Manrope",padding:4,fill:"#FF5072",id:"priceTextLabel-text"})]}),u.jsxs(l.Label,{x:0,y:0,id:"slippageTextLabel",children:[u.jsx(l.Tag,{fill:f.tooltipBg,id:"slippageTextLabel-tag"}),u.jsx(l.Text,{text:"",fontSize:12,fontFamily:"Manrope",padding:4,fill:"#FF5072",id:"slippageTextLabel-text"})]}),u.jsxs(l.Label,{x:0,y:0,id:"toolTip",children:[u.jsx(l.Tag,{fill:f.tooltipBg,pointerDirection:"down",pointerWidth:15,pointerHeight:8,cornerRadius:8,lineJoin:"round",id:"toolTip-tag"}),u.jsx(l.Text,{text:"-",fontSize:12,lineHeight:17/12,padding:s.labelPadding,fontFamily:"Manrope",fill:"#FFFFFF",id:"toolTip-text"})]})]})]})}const g=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
|
+
`,h=r.div`
|
|
33
|
+
height: 100%;
|
|
34
|
+
`,b=r.div`
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
`,M=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
|
+
`,f=r.span`
|
|
53
|
+
color: #85858d;
|
|
54
|
+
`,x=r.div`
|
|
55
|
+
margin-top: 20px;
|
|
56
|
+
display: flex;
|
|
57
|
+
justify-content: center;
|
|
58
|
+
margin-bottom: 9px;
|
|
59
|
+
`,P=r(g)`
|
|
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 v({params:t,target:i,isBuy:o=!0}){const r=new e(t.b),n=new e(t.q);let l=new e(t.b0);const s=new e(t.q0),a=new e(t.i),u=new e(t.k),{R:c}=t;1===c&&l.eq(r)&&(l=d.solveQuadraticFunctionForTarget(r,n.minus(s),new e(1).div(a),u));const p=o?r.plus(i):r.minus(i);if(p.lt(l)||r.eq(l)){let t=l.multipliedBy(l).div(p).div(p);return t=new e(1).minus(u).plus(u.multipliedBy(t)),a.multipliedBy(t)}const m=new d.PMMModel;m.RStatus=c,m.B=r,m.B0=l,m.Q=n,m.Q0=s,m.i=a,m.k=u,m.mtFeeRate=new e(0),m.lpFeeRate=new e(0);let g=new e(0);g=o?m.querySellBase(i):m.queryBuyBase(i);const h=o?n.minus(g):n.plus(g);let b=s.multipliedBy(s).div(h).div(h);return b=new e(1).minus(u).plus(u.multipliedBy(b)),a.div(b)}exports.default=({chartId:r,width:n=834,height:l=460,baseTokenSymbol:d,quoteTokenSymbol:p,pmmModel:g,pmmParams:y,midPrice:L=new e(0),colorMap:q,notShowAmountInput:B})=>{(({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 o=document.getElementById(e),r=!!i&&{passive:!1};return null==o||o.addEventListener("wheel",t,r),()=>{null==o||o.removeEventListener("wheel",t)}},[e])})({id:r});const[z,j]=i.useState(""),[w,T]=i.useState(""),[k,C]=i.useState("-"),[S,A]=i.useState("-"),[X,N]=i.useState({baseMin:new e(0),zoomMultiples:s.baseZoomMultiples,targetMarginPriceX:0});i.useEffect(()=>{void 0!==L&&N(e=>({baseMin:s.computeBaseAfterZoom({midPrice:L,zoomMultiples:e.zoomMultiples}),zoomMultiples:e.zoomMultiples,targetMarginPriceX:e.targetMarginPriceX}))},[L]);const Z=i.useMemo(()=>t.debounce(({type:t,amount:i})=>{""===i&&L&&(N({baseMin:s.computeBaseAfterZoom({midPrice:L,zoomMultiples:s.baseZoomMultiples}),zoomMultiples:s.baseZoomMultiples,targetMarginPriceX:0}),"buy"===t?C("-"):A("-"));const o=new e(i);if(!o.lte(0)&&!o.isNaN()&&(null==y?void 0:y.b)&&!o.gte(y.b)&&L)if("buy"===t){const e=v({params:y,target:o});N(i=>{const o=s.beforePriceImpactEffect({currentBaseMinAndZoomMultiples:i,targetPrice:e,midPrice:L,width:n});if(o.isSkip)return{baseMin:i.baseMin,zoomMultiples:i.zoomMultiples,targetMarginPriceX:o.targetX};if(o.targetX>0)return{baseMin:o.baseMin,zoomMultiples:o.zoomMultiples,targetMarginPriceX:o.targetX};const r=s.computeTargetXByTargetPrice({midPrice:L,width:n,type:t,targetPrice:e}),l=r.zoomMultiples.dp(6).toNumber();return{baseMin:s.computeBaseAfterZoom({midPrice:L,zoomMultiples:l}),zoomMultiples:l,targetMarginPriceX:r.targetX}}),C(`${a.formatPercentageNumber({input:e.minus(L).div(L)})}`)}else{const e=function({params:e,target:t}){return v({params:e,target:t,isBuy:!1})}({params:y,target:o});N(i=>{const o=s.beforePriceImpactEffect({currentBaseMinAndZoomMultiples:i,targetPrice:e,midPrice:L,width:n});if(o.isSkip)return{baseMin:i.baseMin,zoomMultiples:i.zoomMultiples,targetMarginPriceX:o.targetX};if(o.targetX>0)return{baseMin:o.baseMin,zoomMultiples:o.zoomMultiples,targetMarginPriceX:o.targetX};const r=s.computeTargetXByTargetPrice({midPrice:L,width:n,type:t,targetPrice:e}),l=r.zoomMultiples.dp(6).toNumber();return{baseMin:s.computeBaseAfterZoom({midPrice:L,zoomMultiples:l}),zoomMultiples:l,targetMarginPriceX:r.targetX}}),A(`+${a.formatPercentageNumber({input:e.minus(L).div(L)})}`)}},300),[y,L,n]);i.useEffect(()=>{void 0!==z&&Z({type:"buy",amount:z})},[Z,z]),i.useEffect(()=>{void 0!==w&&Z({type:"sell",amount:w})},[Z,w]);const W=e=>{let t=0;t=e?-.1*n:.1*n,N(e=>void 0===e.baseMin?e:{baseMin:s.computeBaseMinByDistance({dragDistance:t,prevBaseMin:e.baseMin,chartWidth:n,zoomMultiples:e.zoomMultiples}),zoomMultiples:e.zoomMultiples,targetMarginPriceX:e.targetMarginPriceX})},F=e=>{N(t=>{const i=s.computeZoomMultiplesWhenZoom({zoomIn:null!=e&&e,prevZoomMultiples:t.zoomMultiples});return{baseMin:s.computeBaseAfterZoom({midPrice:L,zoomMultiples:i}),zoomMultiples:i,targetMarginPriceX:t.targetMarginPriceX}})},E=i.useMemo(()=>{if(""===z)return!1;const t=new e(z);return!(!t.lte(0)&&!t.isNaN()&&(null==y?void 0:y.b)&&!t.gte(y.b))},[z,y]),G=i.useMemo(()=>{if(""===w)return!1;const t=new e(w);return!(!t.lte(0)&&!t.isNaN()&&(null==y?void 0:y.b)&&!t.gte(y.b))},[w,y]);return u.jsxs(h,{id:r,children:[B?"":u.jsxs(b,{children:[u.jsxs(M,{borderColor:q&&q.grid,children:[s.chartT("pool.chart.buy-amount",{symbol:d}),u.jsx(c,{value:z,error:E,onChange:e=>{const t=a.fixedInputStringToFormattedNumber(e.target.value,2);null!==t&&j(t)}}),u.jsx(f,{children:s.chartT("pool.chart.price-impact",{amount:k})})]}),u.jsxs(M,{borderColor:q&&q.grid,children:[s.chartT("pool.chart.sell-amount",{symbol:d}),u.jsx(c,{value:w,error:G,onChange:e=>{const t=a.fixedInputStringToFormattedNumber(e.target.value,2);null!==t&&T(t)}}),u.jsx(f,{children:s.chartT("pool.chart.price-impact",{amount:S})})]})]}),void 0!==y&&void 0!==L&&void 0!==g&&void 0!==X.baseMin&&void 0!==L&&u.jsx(m,{width:n,height:l,params:y,midPrice:L,pmmModel:g,baseTokenSymbol:d,quoteTokenSymbol:p,baseMinAndZoomMultiples:X,colorMap:q,setBaseMinAndZoomMultiples:N}),u.jsxs(x,{className:"operate-btn-wrapper",children:[u.jsx(P,{onClick:()=>W(!0),children:u.jsx(o.BiChevronLeft,{})}),u.jsx(P,{onClick:()=>F(!1),children:u.jsx(o.BiMinus,{})}),u.jsx(P,{onClick:()=>F(!0),children:u.jsx(o.BiPlus,{})}),u.jsx(P,{onClick:()=>W(!1),children:u.jsx(o.BiChevronRight,{})})]})]})};
|