@dodoex/widgets 3.16.0 → 3.18.0

package/dist/index-CQl4nYsF.cjs

@@ -0,0 +1,12 @@
+"use strict";var e=require("@emotion/styled"),t=require("lodash"),i=require("react"),r=require("./helper-C1OYS4SC.cjs"),n=require("react-konva"),o=require("./index-Cm0O00ow.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/duration"),require("dayjs/plugin/localizedFormat"),require("dayjs/plugin/utc"),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`
+  height: 100%;
+  position: relative;
+`,d=e.div`
+  text-align: center;
+  margin-top: 17.1px;
+  margin-bottom: 88.41px;
+  color: #606066;
+  font-size: 12px;
+  line-height: 17px;
+  font-weight: 400;
+`;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})]})]});