@dodoex/widgets 2.6.7 → 3.0.0-beta.1

package/dist/index-ae19eed4.js

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