@dodoex/widgets 3.16.0 → 3.18.0

package/dist/index-XzRE8z_c.js

@@ -0,0 +1,78 @@
+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-DUWFcWe6.js";import{f as W,a as F,b as j}from"./index-ZV1FQySp.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/duration";import"dayjs/plugin/localizedFormat";import"dayjs/plugin/utc";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`
+  margin: 4px 10px 4px 6px;
+  border-radius: 10px;
+  border: 1px solid #373739;
+  padding: 4px 9px;
+  background-color: #1a1a1b;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  outline: none;
+  width: 96px;
+  &:focus {
+    border-color: #fff;
+
+    ${({error:e})=>e&&c`
+        border-color: red;
+      `}
+  }
+`;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`
+  margin: 0;
+  border: none;
+  padding: 0;
+  background: none;
+
+  &:focus {
+    outline: none;
+  }
+  &:active {
+    outline: none;
+  }
+`,R=m.div`
+  height: 100%;
+`,I=m.div`
+  display: flex;
+  align-items: center;
+`,$=m.div`
+  border: 1px solid ${({borderColor:e})=>e||"#2a2a2d"};
+  flex: 1 0 50%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 17px;
+  color: #606066;
+
+  & + & {
+    border-left: none;
+  }
+`,O=m.span`
+  color: #85858d;
+`,Q=m.div`
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 9px;
+`,K=m(V)`
+  border-radius: 13px;
+  background-color: #373739;
+  width: 24px;
+  height: 24px;
+  font-size: 18px;
+  color: #85858d;
+  line-height: 0;
+  & + & {
+    margin-left: 10px;
+  }
+  &:first-child,
+  &:last-child {
+    font-size: 20px;
+  }
+
+  &:hover {
+    color: #fff;
+  }
+`;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};