@dodoex/widgets 2.6.7 → 3.0.0-beta.0

package/dist/cjs/index-256d5f78.cjs

@@ -0,0 +1,12 @@
+"use strict";var e=require("@emotion/styled"),t=require("lodash"),i=require("react"),r=require("./helper-889c5e9a.cjs"),n=require("react-konva"),o=require("./index-4190bae6.cjs"),l=require("bignumber.js"),a=require("@dodoex/api");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@lingui/core"),require("@lingui/react"),require("@dodoex/icons"),require("react-dom"),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-window"),require("@ethersproject/bignumber"),require("dayjs"),require("axios"),require("zustand"),require("react-infinite-scroller"),require("@emotion/react"),require("recharts");var u=s(e),d=s(l);const g=u.default.div`
+  height: 100%;
+  position: relative;
+`,m=u.default.div`
+  text-align: center;
+  margin-top: 17.1px;
+  margin-bottom: 88.41px;
+  color: #606066;
+  font-size: 12px;
+  line-height: 17px;
+  font-weight: 400;
+`;function c({maxHeight:e,gridAreaHeight:t,value:i}){const r=new d.default(t).minus(36),n=r.div(e);return r.minus(i.multipliedBy(n)).plus(36).toNumber()}function h({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 p({x:e,width:t,minXLN10:i,maxXLN10:r}){const n=new d.default(e).div(t).multipliedBy(r.minus(i)).plus(i);return new d.default(10**n.toNumber())}function x({width:e,targetLN10:t,minXLN10:i,maxXLN10:r}){return t.minus(i).div(r.minus(i)).multipliedBy(e).toNumber()}function f({target:e}){return new d.default(Math.log10(e.toNumber()))}function L({width:e,height:l,params:s,baseTokenSymbol:u,quoteTokenSymbol:g,colorMap:m}){const{maxLeftHeight:L,maxRightHeight:b,leftStatAreaPoints:j,rightStatAreaPoints:w,minXLN10:A,maxXLN10:N}=function({params:e}){return i.useMemo((()=>{const t=new d.default(e.b),i=new d.default(e.q);let r=new d.default(e.b0);const n=new d.default(e.q0),o=new d.default(e.i),l=new d.default(e.k),{R:s}=e;1===s&&r.eq(t)&&(r=a.solveQuadraticFunctionForTarget(t,i.minus(n),new d.default(1).div(o),l));const u=new a.PMMState({i:o,K:l,B:t,Q:i,B0:r,Q0:n,R:s,mtFeeRate:new d.default(0),lpFeeRate:new d.default(0)}),g=new a.PMMHelper,m=new d.default(u.B),c=[],h=[];let p=new d.default(0),x=new d.default(0);const f=g.GetMidPrice(u),L=i.gt(0)?t.div(i):new d.default(1);for(let e=0;e<=250;e++){let t=m.multipliedBy(e/100).multipliedBy(f.multipliedBy(L).multipliedBy(4));0===e&&(t=m.multipliedBy(1e-11));const i=null==g?void 0:g.QuerySellBase(t,u);if(i.isNaN()||!i.gt(0))c.push({giveAmount:t,getAmount:new d.default(0),price:new d.default(0)});else{const e=i.div(t);c.push({giveAmount:t,getAmount:i,price:e})}}for(let e=0;e<=250;e++){let t=m.multipliedBy(e/100).multipliedBy(f.multipliedBy(4));0===e&&(t=m.multipliedBy(1e-11));const i=null==g?void 0:g.QuerySellQuote(t,u);if(i.isNaN()||!i.gt(0))h.push({giveAmount:t,getAmount:new d.default(0),price:new d.default(0)});else{const e=t.dividedBy(i);h.push({giveAmount:t,getAmount:i,price:e})}}if(c.length<2&&h.length<2)return{leftStatAreaPoints:[],rightStatAreaPoints:[],maxLeftHeight:new d.default(10).multipliedBy(1.2),maxRightHeight:new d.default(10).multipliedBy(1.2),middlePriceLN10:new d.default(0),minXLN10:new d.default(-1),maxXLN10:new d.default(1)};const b=[];for(let e=1;e<c.length;e++){const t=c[e],{giveAmount:i,getAmount:r,price:n}=t,o=c[e-1];if(!n.isNaN()&&n.gt(0)&&o){const t=n.minus(o.price).abs(),l=i.minus(o.giveAmount).abs(),a=r.minus(o.getAmount).abs().multipliedBy(l);1===e&&b.push({area:r,price:n,middlePrice:n.plus(t.div(1.1)),rectangleHeight:a.plus(a.multipliedBy(.03))}),b.push({area:r,price:n,middlePrice:n.plus(t.div(2)),rectangleHeight:a}),p=d.default.max(a,p)}}const j=[];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,a=o.giveAmount,s=o.getAmount;if(!n.isNaN()&&n.gt(0)&&o){const t=n.minus(l).abs(),o=i.minus(a).abs(),u=r.minus(s).abs().multipliedBy(o);1===e&&j.push({area:r,price:n,middlePrice:n.minus(t.div(1.1)),rectangleHeight:u.plus(u.multipliedBy(.03))}),j.push({area:r,price:n,middlePrice:n.minus(t.div(2)),rectangleHeight:u}),x=d.default.max(u,x)}}const w=c.length>0?c[c.length-1]:h[0],A=h.length>0?h[0]:c[0],N=h.length>0?h[h.length-1]:c[0],y=w.price,P=N.price,R=A.price,v=new d.default(Math.log10(R.toNumber()));let S=y.gt(0)?new d.default(Math.log10(y.toNumber())):new d.default(-Math.log10(P.toNumber())),H=P.gt(0)?new d.default(Math.log10(P.toNumber())):new d.default(-Math.log10(y.toNumber()));const q=d.default.max(v.minus(S).abs(),H.minus(v).abs());return S=v.minus(q),H=v.plus(q),{leftStatAreaPoints:b,rightStatAreaPoints:j,maxLeftHeight:p.multipliedBy(1.2),maxRightHeight:x.multipliedBy(1.2),minXLN10:S,maxXLN10:H,middlePriceLN10:v}}),[e])}({params:s}),y=l-30.13,P=i.useRef(null),R=t.merge({grid:"#2A2A2D",midPriceLine:"#313335",leftBg:[0,"rgba(38, 39, 41, 0.3)",1,"#31645d"],leftLine:"#55f6db",leftColor:"",rightBg:[0,"rgba(38, 39, 41, 0.3)",1,"#67303d"],rightLine:"#ff4f73",rightColor:"",tooltipBg:"#121212",tooltipColor:void 0,textColor:"#606066"},m),v=t=>{var i;const{current:n}=P,l=t.target;if(l&&n){const t=null===(i=l.getStage())||void 0===i?void 0:i.getPointerPosition();if(t){const{x:i}=t,l=e/2;if(Math.abs(i-l)<=2)return;if(i<=2||e-i<=2)return;const a=p({x:i,width:e,minXLN10:A,maxXLN10:N});let s=null,d=[];const m=i<l;if(m){const e=h({areaPoints:j,targetPrice:a,isLeft:m});s=e.targetAreaStatPoint,d=e.targetAreaStatPoints}else{const e=h({areaPoints:w,targetPrice:a,isLeft:m});s=e.targetAreaStatPoint,d=e.targetAreaStatPoints}if(s){const t=f({target:s.middlePrice}),l=x({minXLN10:A,maxXLN10:N,width:e,targetLN10:t}),a=c({maxHeight:m?L:b,gridAreaHeight:y,value:s.rectangleHeight}),h=n.findOne("#tooltip"),p=n.findOne("#toolTipVertLine"),j=n.findOne("#joinCircle"),w=n.findOne("#tooltip-Text"),P=n.findOne("#tooltip-tag"),v=n.findOne("#priceTextLabel"),S=null==v?void 0:v.findOne("#priceTextLabel-text"),H=n.findOne("#area");null==h||h.position({x:l,y:a-5-6}),null==w||w.fill(R.tooltipColor||(m?"#00FAD9":"#FF5072")),null==w||w.text(m?r.chartT("pool.chart.liquidity-chart-buy",{amount:o.formatShortNumber(s.area),symbol:u,price:o.formatShortNumber(s.price)}):r.chartT("pool.chart.liquidity-chart-sell",{amount:o.formatShortNumber(s.area),symbol:g,price:o.formatShortNumber(s.price)})),h&&P&&(h.width()/2>i?(P.pointerDirection("left"),P.pointerHeight(15),P.pointerWidth(8),h.offsetX(-11),h.offsetY(-11)):h.width()/2+i>e?(P.pointerDirection("right"),P.pointerHeight(15),P.pointerWidth(8),h.offsetX(11),h.offsetY(-11)):(P.pointerDirection("down"),P.pointerHeight(8),P.pointerWidth(15),h.offsetX(0),h.offsetY(0))),null==p||p.points([l,y,l,a]),null==p||p.stroke(m?"#55f6db":"#ff4f73");let q=m?"rgb(86, 246, 218)":"#FF5072",X=m?"rgba(86, 246, 218, 0.3)":"rgba(255, 80, 114, 0.3)";R.leftLine&&R.rightLine&&(q=m?R.leftLine:R.rightLine,X=m?`rgba(${r.colorRgb(R.leftLine)}, 0.4)`:`rgba(${r.colorRgb(R.rightLine)}, 0.4)`),j&&(j.x(l),j.y(a),j.fill(q),j.stroke(X)),v&&(v.x(l),v.y(y+8.08+1),v.offsetX(v.width()/2),v.x()-v.width()/2<0?v.x(v.width()/2):v.x()+v.width()/2>e?v.x(e-v.width()/2):v.x(i)),S&&(S.fill(R.tooltipColor||(m?"#00FAD9":"#FF5072")),S.text(o.formatShortNumber(s.price)));const M=[];for(const t of d){const{middlePrice:i,rectangleHeight:r}=t,n=f({target:i}),o=x({minXLN10:A,maxXLN10:N,width:e,targetLN10:n}),l=c({maxHeight:m?L:b,gridAreaHeight:y,value:r});M.push(o,l+1)}const k=M.slice(),[B,C]=k;m?(k.push(l,a),k.push(l,y),k.push(B,y),k.push(B,C)):(k.unshift(B,y),k.unshift(l,y),k.unshift(l,a)),H&&(H.points(k),H.fill(m?R.leftLine||"#2c5b56":R.rightLine||"#7b3a48")),n.show()}}}},S=function({gridAreaHeight:e,gridAreaWidth:t,horizontalLineCount:r,verticalLineCount:l,color:a="#2A2A2D"}){return i.useMemo((()=>{const i=[],s=e/(r+1),u=[],d=t/(l+1);for(let e=0;e<r;e++){const r=s*(e+1);i.push([0,r,t,r])}for(let t=0;t<l;t++){const i=d*(t+1);u.push([i,0,i,e])}return o.jsxRuntime.exports.jsxs(o.jsxRuntime.exports.Fragment,{children:[i.map(((e,t)=>o.jsxRuntime.exports.jsx(n.Line,{points:e,stroke:a,strokeWidth:1,lineCap:"round",lineJoin:"round",tension:1,listening:!1},t))),u.map(((e,t)=>o.jsxRuntime.exports.jsx(n.Line,{points:e,stroke:a,strokeWidth:1,lineCap:"round",lineJoin:"round",tension:1,listening:!1},t)))]})}),[e,t,r,l,a])}({gridAreaHeight:y,gridAreaWidth:e,horizontalLineCount:9,verticalLineCount:7,color:R.grid}),H=function({minXLN10:e,maxXLN10:t,labelCount:r,gridAreaHeight:l,gridAreaWidth:a,color:s="#606066"}){return i.useMemo((()=>{const i=a/(r+1),u=[],d=[];for(let n=0;n<r;n++){const r=i/2+i*n;u.push({x:r,y:l+10.08+1,text:o.formatShortNumber(p({x:i*(n+1),width:a,minXLN10:e,maxXLN10:t}))});const s=i*(n+1);d.push([s,l+1,s,l+4+1])}return o.jsxRuntime.exports.jsxs(o.jsxRuntime.exports.Fragment,{children:[u.map(((e,t)=>o.jsxRuntime.exports.jsx(n.Text,{x:e.x,y:e.y,text:e.text,fontSize:14,fontFamily:"Manrope",fill:s,width:i,padding:0,align:"center",verticalAlign:"bottom",listening:!1},t))),d.map(((e,t)=>o.jsxRuntime.exports.jsx(n.Line,{points:e,stroke:s,strokeWidth:1,lineCap:"butt",lineJoin:"miter",tension:1,listening:!1},t)))]})}),[e,t,l,a,r])}({gridAreaHeight:y,gridAreaWidth:e,labelCount:7,minXLN10:A,maxXLN10:N,color:R.textColor}),q=function({gridAreaHeight:e,gridAreaWidth:t,color:r="#606066"}){return i.useMemo((()=>{const i=t/2;return o.jsxRuntime.exports.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:y,gridAreaWidth:e,color:R.midPriceLine}),{leftLine:X,rightLine:M}=function({leftStatAreaPoints:e,rightStatAreaPoints:t,minXLN10:r,maxXLN10:l,maxLeftHeight:a,maxRightHeight:s,gridAreaWidth:u,gridAreaHeight:d,colorMap:g}){return{leftLine:i.useMemo((()=>{if(e.length<1)return o.jsxRuntime.exports.jsx(o.jsxRuntime.exports.Fragment,{});const t=[];let i=d;for(const n of e){const{middlePrice:e,rectangleHeight:o}=n,s=f({target:e}),g=x({minXLN10:r,maxXLN10:l,width:u,targetLN10:s}),m=c({maxHeight:a,gridAreaHeight:d,value:o});t.push(g,m),m<i&&(i=m)}const s=t.slice(),[m,h]=s,p=s[s.length-1],L=s[s.length-2];return s.push(L,p),s.push(L,d),s.push(m,d),s.push(m,h),o.jsxRuntime.exports.jsxs(o.jsxRuntime.exports.Fragment,{children:[o.jsxRuntime.exports.jsx(n.Line,{points:s,closed:!0,listening:!1,lineCap:"round",lineJoin:"round",fillLinearGradientStartPoint:{x:0,y:d},fillLinearGradientEndPoint:{x:0,y:i},fillLinearGradientColorStops:g.leftBg}),o.jsxRuntime.exports.jsx(n.Line,{points:t,stroke:g.leftLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1})]})}),[e,u,r,l,d,a]),rightLine:i.useMemo((()=>{if(t.length<1)return o.jsxRuntime.exports.jsx(o.jsxRuntime.exports.Fragment,{});const e=[];let i=d;for(const n of t){const{middlePrice:t,rectangleHeight:o}=n,a=f({target:t}),g=x({minXLN10:r,maxXLN10:l,width:u,targetLN10:a}),m=c({maxHeight:s,gridAreaHeight:d,value:o});e.push(g,m),m<i&&(i=m)}const a=e.slice(),[m]=a;return a.unshift(m,d),a.unshift(u,d),o.jsxRuntime.exports.jsxs(o.jsxRuntime.exports.Fragment,{children:[o.jsxRuntime.exports.jsx(n.Line,{points:a,closed:!0,listening:!1,lineCap:"round",lineJoin:"round",fillLinearGradientStartPoint:{x:0,y:d},fillLinearGradientEndPoint:{x:0,y:i},fillLinearGradientColorStops:g.rightBg}),o.jsxRuntime.exports.jsx(n.Line,{points:e,stroke:g.rightLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1})]})}),[t,u,r,l,d,s])}}({leftStatAreaPoints:j,rightStatAreaPoints:w,minXLN10:A,maxXLN10:N,maxLeftHeight:L,maxRightHeight:b,gridAreaWidth:e,gridAreaHeight:y,colorMap:R});return o.jsxRuntime.exports.jsxs(n.Stage,{width:e,height:l,onMouseMove:v,onMouseOver:v,onMouseEnter:v,onMouseOut:()=>{const{current:e}=P;e&&e.hide()},children:[o.jsxRuntime.exports.jsxs(n.Layer,{children:[o.jsxRuntime.exports.jsx(n.Rect,{x:0,y:0,width:e,height:y,stroke:R.grid,strokeWidth:1}),S,H,X,M,q]}),o.jsxRuntime.exports.jsxs(n.Layer,{ref:P,visible:!1,children:[o.jsxRuntime.exports.jsx(n.Line,{points:[],closed:!0,listening:!1,lineCap:"round",lineJoin:"round",id:"area"}),o.jsxRuntime.exports.jsx(n.Line,{points:[],strokeWidth:1,stroke:"#ff4f73",lineJoin:"round",lineCap:"round",dash:[4,6],id:"toolTipVertLine"}),o.jsxRuntime.exports.jsx(n.Circle,{x:0,y:0,radius:5,fill:"#FF5072",stroke:"rgba(255, 80, 114, 0.3)",strokeWidth:12,id:"joinCircle"}),o.jsxRuntime.exports.jsxs(n.Label,{listening:!1,x:0,y:0,id:"priceTextLabel",children:[o.jsxRuntime.exports.jsx(n.Tag,{fill:R.tooltipBg,id:"priceTextLabel-tag"}),o.jsxRuntime.exports.jsx(n.Text,{text:"-",fontSize:14,fontFamily:"Manrope",padding:2,fill:"#FF5072",id:"priceTextLabel-text"})]}),o.jsxRuntime.exports.jsxs(n.Label,{listening:!1,id:"tooltip",children:[o.jsxRuntime.exports.jsx(n.Tag,{fill:R.tooltipBg,pointerDirection:"down",pointerWidth:15,pointerHeight:8,cornerRadius:8,lineJoin:"round",id:"tooltip-tag"}),o.jsxRuntime.exports.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:l,pmmParams:a,midPrice:s,notShowTipText:u,colorMap:d})=>o.jsxRuntime.exports.jsxs(g,{children:[void 0!==a&&void 0!==s&&void 0!==l&&void 0!==s&&o.jsxRuntime.exports.jsx(L,{width:e,height:t,params:a,midPrice:s,pmmModel:l,baseTokenSymbol:i,quoteTokenSymbol:n,colorMap:d}),u?"":o.jsxRuntime.exports.jsxs(m,{children:["* ",r.chartT("pool.chart.liquidity-chart-tip",{baseTokenSymbol:i})]})]});