@dodoex/widgets 2.6.6 → 3.0.0-beta.0

package/dist/cjs/index-457c65f3.cjs

@@ -0,0 +1,78 @@
+"use strict";var e=require("bignumber.js"),t=require("lodash"),i=require("react"),r=require("@emotion/styled"),o=require("@emotion/react"),n=require("react-konva"),l=require("./helper-889c5e9a.cjs"),s=require("./index-4190bae6.cjs"),a=require("@dodoex/api");function u(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("recharts");var d=u(e),c=u(i),p=u(r),m={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},f=c.default.createContext&&c.default.createContext(m),g=["attr","size","title"];function x(e,t){if(null==e)return{};var i,r,o=function(e,t){if(null==e)return{};var i,r,o={},n=Object.keys(e);for(r=0;r<n.length;r++)i=n[r],t.indexOf(i)>=0||(o[i]=e[i]);return o}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(r=0;r<n.length;r++)i=n[r],t.indexOf(i)>=0||Object.prototype.propertyIsEnumerable.call(e,i)&&(o[i]=e[i])}return o}function h(){return h=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r])}return e},h.apply(this,arguments)}function b(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,r)}return i}function M(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?b(Object(i),!0).forEach((function(t){v(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):b(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function v(e,t,i){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var r=i.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function j(e){return e&&e.map(((e,t)=>c.default.createElement(e.tag,M({key:t},e.attr),j(e.child))))}function y(e){return t=>c.default.createElement(P,h({attr:M({},e.attr)},t),j(e.child))}function P(e){var t=t=>{var i,{attr:r,size:o,title:n}=e,l=x(e,g),s=o||t.size||"1em";return t.className&&(i=t.className),e.className&&(i=(i?i+" ":"")+e.className),c.default.createElement("svg",h({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},t.attr,r,l,{className:i,style:M(M({color:e.color||t.color},t.style),e.style),height:s,width:s,xmlns:"http://www.w3.org/2000/svg"}),n&&c.default.createElement("title",null,n),e.children)};return void 0!==f?c.default.createElement(f.Consumer,null,(e=>t(e))):t(m)}function L(e){return y({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{d:"M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"},child:[]}]})(e)}function w(e){return y({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{d:"M10.707 17.707 16.414 12l-5.707-5.707-1.414 1.414L13.586 12l-4.293 4.293z"},child:[]}]})(e)}function z(e){return y({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{d:"M5 11h14v2H5z"},child:[]}]})(e)}function B(e){return y({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{d:"M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"},child:[]}]})(e)}const T=p.default.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&&o.css`
+        border-color: red;
+      `}
+  }
+`;function k({width:e,height:r,midPrice:o,pmmModel:a,params:u,baseTokenSymbol:c,quoteTokenSymbol:p,baseMinAndZoomMultiples:m,colorMap:f,setBaseMinAndZoomMultiples:g}){const x=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},f),h=e,b=r-18,M=h/7,{buyBaseVert:v,sellBaseVert:j}=l.computeBaseVert({midPrice:o,q:u.q,q0:u.q0,pmmModel:a}),y=v.div(b),P=j.div(b),L=i.useRef(null),w=i.useRef(null),{current:z}=L,B=i.useRef(0),T=i.useRef(),{horizontalGridLines:k,verticalGridLines:q}=function({chartHeight:e,chartWidth:t,horizontalLineCount:r,verticalLineCount:o}){return i.useMemo((()=>{const i=[],n=e/(r+1),l=[],s=t/o;for(let e=0;e<r;e++){const r=n*(e+1);i.push([0,r,t,r])}for(let t=0;t<o;t++){const i=s*t+s/2;l.push([i,0,i,e])}return{horizontalGridLines:i,verticalGridLines:l}}),[e,t,r,o])}({chartHeight:b,chartWidth:h,horizontalLineCount:9,verticalLineCount:7}),{horizontalLabelTickPoints:R,horizontalLabelTextPoints:C}=function({chartHeight:e,chartWidth:t,xAxisPoints:r,oneXPx:o,baseMinAndZoomMultiples:n}){return i.useMemo((()=>{const i=l.computeXPortion(t,n.zoomMultiples),a=[],u=[];for(let t=0;t<r;t++){a.push([t*o+o/2,e,t*o+o/2,e+4]);const r=i.multipliedBy(t).multipliedBy(o).plus(i.multipliedBy(o/2)).toNumber(),l=n.baseMin.multipliedBy(10**r),d=t*o,c=e+2+4,p=s.formatShortNumber(l);u.push({x:d,y:c,text:p})}return{horizontalLabelTickPoints:a,horizontalLabelTextPoints:u}}),[n.baseMin,n.zoomMultiples,e,t,o,r])}({chartHeight:b,chartWidth:h,xAxisPoints:7,oneXPx:M,baseMinAndZoomMultiples:m}),{quoteLinePoints:S,quoteLineAreaPoints:N,quoteLineAreaLinearGradientEndPointY:O,baseLinePoints:A,baseLineAreaPoints:X,baseLineAreaLinearGradientEndPointY:E,midPriceLinePoints:Z}=function({chartHeight:e,chartWidth:t,midPrice:r,xPoints:o,pmmModel:n,baseMinAndZoomMultiples:s,buyYPortion:a,sellYPortion:u}){return i.useMemo((()=>{const i=[],c=[],p=[],{baseMin:m,zoomMultiples:f}=s,g=l.computeXPortion(t,f),x=2*f,h=new d.default(x).div(o);let b=new d.default(Math.log(r.div(m).toNumber())/Math.log(10));b=d.default.minimum(x,b),b=d.default.maximum(0,b);for(let t=new d.default(0);t.lte(b);){const o=m.multipliedBy(10**t.toNumber()),s=l.evalPoint({val:o,model:n,midPrice:r});if(!s.vert.isNaN()){const r=t.div(g).toNumber(),o=e-s.vert.div(a).toNumber();i.push(r,o)}t=t.plus(h)}for(let t=b;t.lte(x);){const i=m.multipliedBy(10**t.toNumber()),o=l.evalPoint({val:i,model:n,midPrice:r});if(!o.vert.isNaN()){const i=t.div(g).toNumber(),r=e-o.vert.div(u).toNumber();c.push(i,r)}t=t.plus(h)}const M=b.div(g).toNumber(),[,v]=i,j=n.k.eq(0);j&&i.push(M,v||e),i.push(M,e),p.push(M,e,M,0);const y=l.evalPoint({val:m.multipliedBy(10**x),model:n,midPrice:r});let P=e;const L=new d.default(x).div(g).toNumber();return y.vert.isNaN()||(P=e-y.vert.div(u).toNumber()),j&&c.length>=2&&(c.unshift(M,P),c.unshift(M,e)),c.push(L,P),b.lte(0)&&c.unshift(0,e),{quoteLinePoints:i,quoteLineAreaPoints:[0,e,0,v,...i],quoteLineAreaLinearGradientEndPointY:v,baseLinePoints:c,baseLineAreaPoints:[...c,L,e],baseLineAreaLinearGradientEndPointY:P,midPriceLinePoints:p}}),[s,t,o,r,n,e,a,u])}({chartHeight:b,chartWidth:h,midPrice:o,xPoints:50,pmmModel:a,baseMinAndZoomMultiples:m,buyYPortion:y,sellYPortion:P}),W=e=>{var t;const i=e.target;if(i&&z){const e=null===(t=i.getStage())||void 0===t?void 0:t.getPointerPosition();if(e){const{x:t}=e;if(t>h)return void z.hide();l.updateTooltip({x:t,tooltip:z,buyBaseVert:v,sellBaseVert:j,chartWidth:h,chartHeight:b,midPrice:o,pmmModel:a,baseTokenSymbol:c,quoteTokenSymbol:p,baseMinAndZoomMultiples:m,t:l.chartT,isHover:!0,color:x.tooltipColor,leftColor:x.leftLine,rightColor:x.rightLine})}}},F=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-B.current;B.current=e.x,T.current=e.x,g((e=>void 0===e.baseMin?e:{baseMin:l.computeBaseMinByDistance({dragDistance:t,prevBaseMin:e.baseMin,chartWidth:h,zoomMultiples:e.zoomMultiples}),zoomMultiples:e.zoomMultiples,targetMarginPriceX:0}))}}}),100)),[h,g]),H=i.useMemo((()=>t.throttle((e=>{e.cancelBubble=!0,e.evt.preventDefault();const t=e.evt.deltaY<0;g((e=>{const i=l.computeZoomMultiplesWhenZoom({zoomIn:t,prevZoomMultiples:e.zoomMultiples});return{baseMin:l.computeBaseAfterZoom({midPrice:o,zoomMultiples:i}),zoomMultiples:i,targetMarginPriceX:e.targetMarginPriceX}}))}),100)),[o,g]);return i.useEffect((()=>{m.targetMarginPriceX>0&&null!==z?l.updateTooltip({x:m.targetMarginPriceX,tooltip:z,buyBaseVert:v,sellBaseVert:j,chartWidth:h,chartHeight:b,midPrice:o,pmmModel:a,baseTokenSymbol:c,quoteTokenSymbol:p,baseMinAndZoomMultiples:m,t:l.chartT,color:x.tooltipColor,leftColor:x.leftLine,rightColor:x.rightLine}):void 0!==T.current&&null!==z&&l.updateTooltip({x:T.current,tooltip:z,buyBaseVert:v,sellBaseVert:j,chartWidth:h,chartHeight:b,midPrice:o,pmmModel:a,baseTokenSymbol:c,quoteTokenSymbol:p,baseMinAndZoomMultiples:m,t:l.chartT,isHover:!0,color:x.tooltipColor,leftColor:x.leftLine,rightColor:x.rightLine})}),[m,c,v,b,h,x.leftLine,x.rightLine,x.tooltipColor,o,a,p,j,z]),s.jsxRuntime.exports.jsxs(n.Stage,{ref:w,width:e,offsetY:-l.chartOffsetYBCToolTip,height:r+l.chartOffsetYBCToolTip,draggable:!0,dragBoundFunc:function(){return{x:this.absolutePosition().x,y:this.absolutePosition().y}},onMouseMove:W,onMouseOver:W,onMouseOut:()=>{z&&z.hide()},onDragStart:function(e){const{target:t}=e,i=t.getStage();if(i){const e=i.getPointerPosition();e&&(B.current=e.x)}},onDragMove:F,onDragEnd:e=>{const{target:t}=e,i=t.getStage();i&&(i.container().style.cursor="pointer")},onWheel:H,children:[s.jsxRuntime.exports.jsxs(n.Layer,{children:[s.jsxRuntime.exports.jsx(n.Rect,{x:0,y:0,width:e,height:b,stroke:x.grid,strokeWidth:1}),k.map(((e,t)=>s.jsxRuntime.exports.jsx(n.Line,{points:e,stroke:x.grid,strokeWidth:1,lineCap:"round",lineJoin:"round",listening:!1},t))),q.map(((e,t)=>s.jsxRuntime.exports.jsx(n.Line,{points:e,stroke:x.grid,strokeWidth:1,lineCap:"round",lineJoin:"round",listening:!1},t))),R.map(((e,t)=>s.jsxRuntime.exports.jsx(n.Line,{points:e,stroke:"#9d9d9d",strokeWidth:1,lineCap:"round",lineJoin:"round",listening:!1},t))),C.map(((e,t)=>s.jsxRuntime.exports.jsx(n.Text,{x:e.x,y:e.y,text:e.text,fontFamily:"Manrope",fontSize:12,fill:"#9d9d9d",width:M,padding:0,align:"center",verticalAlign:"bottom",listening:!1},t))),s.jsxRuntime.exports.jsx(n.Line,{points:N,closed:!0,listening:!1,lineCap:"round",lineJoin:"round",fillLinearGradientStartPoint:{x:0,y:b},fillLinearGradientEndPoint:{x:0,y:O},fillLinearGradientColorStops:x.leftBg}),s.jsxRuntime.exports.jsx(n.Line,{points:S,stroke:x.leftLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1}),s.jsxRuntime.exports.jsx(n.Line,{points:X,closed:!0,listening:!1,lineCap:"round",lineJoin:"round",fillLinearGradientStartPoint:{x:h,y:b},fillLinearGradientEndPoint:{x:h,y:E},fillLinearGradientColorStops:x.rightBg}),s.jsxRuntime.exports.jsx(n.Line,{points:A,stroke:x.rightLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1}),s.jsxRuntime.exports.jsx(n.Line,{points:Z,stroke:x.midPriceLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1})]}),s.jsxRuntime.exports.jsxs(n.Layer,{ref:L,visible:!1,listening:!1,children:[s.jsxRuntime.exports.jsx(n.Line,{points:[],stroke:"#ff4f73",strokeWidth:1,lineCap:"round",lineJoin:"round",dash:[4,6],id:"toolTipVertLine"}),s.jsxRuntime.exports.jsx(n.Line,{points:[],stroke:"ff4f73",strokeWidth:1,lineCap:"round",lineJoin:"round",dash:[4,6],id:"toolTipHoriLine"}),s.jsxRuntime.exports.jsx(n.Circle,{x:0,y:0,radius:5,fill:"#FF5072",stroke:"rgba(255, 80, 114, 0.3)",strokeWidth:12,id:"joinCircle"}),s.jsxRuntime.exports.jsxs(n.Label,{x:0,y:0,id:"priceTextLabel",children:[s.jsxRuntime.exports.jsx(n.Tag,{fill:x.tooltipBg,id:"priceTextLabel-tag"}),s.jsxRuntime.exports.jsx(n.Text,{text:"",fontSize:12,fontFamily:"Manrope",padding:4,fill:"#FF5072",id:"priceTextLabel-text"})]}),s.jsxRuntime.exports.jsxs(n.Label,{x:0,y:0,id:"slippageTextLabel",children:[s.jsxRuntime.exports.jsx(n.Tag,{fill:x.tooltipBg,id:"slippageTextLabel-tag"}),s.jsxRuntime.exports.jsx(n.Text,{text:"",fontSize:12,fontFamily:"Manrope",padding:4,fill:"#FF5072",id:"slippageTextLabel-text"})]}),s.jsxRuntime.exports.jsxs(n.Label,{x:0,y:0,id:"toolTip",children:[s.jsxRuntime.exports.jsx(n.Tag,{fill:x.tooltipBg,pointerDirection:"down",pointerWidth:15,pointerHeight:8,cornerRadius:8,lineJoin:"round",id:"toolTip-tag"}),s.jsxRuntime.exports.jsx(n.Text,{text:"-",fontSize:12,lineHeight:17/12,padding:l.labelPadding,fontFamily:"Manrope",fill:"#FFFFFF",id:"toolTip-text"})]})]})]})}const q=p.default.button`
+  margin: 0;
+  border: none;
+  padding: 0;
+  background: none;
+
+  &:focus {
+    outline: none;
+  }
+  &:active {
+    outline: none;
+  }
+`,R=p.default.div`
+  height: 100%;
+`,C=p.default.div`
+  display: flex;
+  align-items: center;
+`,S=p.default.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;
+  }
+`,N=p.default.span`
+  color: #85858d;
+`,O=p.default.div`
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 9px;
+`,A=p.default(q)`
+  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 X({params:e,target:t,isBuy:i=!0}){const r=new d.default(e.b),o=new d.default(e.q);let n=new d.default(e.b0);const l=new d.default(e.q0),s=new d.default(e.i),u=new d.default(e.k),{R:c}=e;1===c&&n.eq(r)&&(n=a.solveQuadraticFunctionForTarget(r,o.minus(l),new d.default(1).div(s),u));const p=i?r.plus(t):r.minus(t);if(p.lt(n)||r.eq(n)){let e=n.multipliedBy(n).div(p).div(p);return e=new d.default(1).minus(u).plus(u.multipliedBy(e)),s.multipliedBy(e)}const m=new a.PMMModel;m.RStatus=c,m.B=r,m.B0=n,m.Q=o,m.Q0=l,m.i=s,m.k=u,m.mtFeeRate=new d.default(0),m.lpFeeRate=new d.default(0);let f=new d.default(0);f=i?m.querySellBase(t):m.queryBuyBase(t);const g=i?o.minus(f):o.plus(f);let x=l.multipliedBy(l).div(g).div(g);return x=new d.default(1).minus(u).plus(u.multipliedBy(x)),s.div(x)}exports.default=({chartId:e,width:r=834,height:o=460,baseTokenSymbol:n,quoteTokenSymbol:a,pmmModel:u,pmmParams:c,midPrice:p=new d.default(0),colorMap:m,notShowAmountInput:f})=>{(({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 r=document.getElementById(e),o=!!i&&{passive:!1};return null==r||r.addEventListener("wheel",t,o),()=>{null==r||r.removeEventListener("wheel",t)}}),[e])})({id:e});const[g,x]=i.useState(""),[h,b]=i.useState(""),[M,v]=i.useState("-"),[j,y]=i.useState("-"),[P,q]=i.useState({baseMin:new d.default(0),zoomMultiples:l.baseZoomMultiples,targetMarginPriceX:0});i.useEffect((()=>{void 0!==p&&q((e=>({baseMin:l.computeBaseAfterZoom({midPrice:p,zoomMultiples:e.zoomMultiples}),zoomMultiples:e.zoomMultiples,targetMarginPriceX:e.targetMarginPriceX})))}),[p]);const E=i.useMemo((()=>t.debounce((({type:e,amount:t})=>{""===t&&p&&(q({baseMin:l.computeBaseAfterZoom({midPrice:p,zoomMultiples:l.baseZoomMultiples}),zoomMultiples:l.baseZoomMultiples,targetMarginPriceX:0}),"buy"===e?v("-"):y("-"));const i=new d.default(t);if(!i.lte(0)&&!i.isNaN()&&(null==c?void 0:c.b)&&!i.gte(c.b)&&p)if("buy"===e){const t=X({params:c,target:i});q((i=>{const o=l.beforePriceImpactEffect({currentBaseMinAndZoomMultiples:i,targetPrice:t,midPrice:p,width:r});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 n=l.computeTargetXByTargetPrice({midPrice:p,width:r,type:e,targetPrice:t}),s=n.zoomMultiples.dp(6).toNumber();return{baseMin:l.computeBaseAfterZoom({midPrice:p,zoomMultiples:s}),zoomMultiples:s,targetMarginPriceX:n.targetX}})),v(`${s.formatPercentageNumber({input:t.minus(p).div(p)})}`)}else{const t=function({params:e,target:t}){return X({params:e,target:t,isBuy:!1})}({params:c,target:i});q((i=>{const o=l.beforePriceImpactEffect({currentBaseMinAndZoomMultiples:i,targetPrice:t,midPrice:p,width:r});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 n=l.computeTargetXByTargetPrice({midPrice:p,width:r,type:e,targetPrice:t}),s=n.zoomMultiples.dp(6).toNumber();return{baseMin:l.computeBaseAfterZoom({midPrice:p,zoomMultiples:s}),zoomMultiples:s,targetMarginPriceX:n.targetX}})),y(`+${s.formatPercentageNumber({input:t.minus(p).div(p)})}`)}}),300)),[c,p,r]);i.useEffect((()=>{void 0!==g&&E({type:"buy",amount:g})}),[E,g]),i.useEffect((()=>{void 0!==h&&E({type:"sell",amount:h})}),[E,h]);const Z=e=>{let t=0;t=e?-.1*r:.1*r,q((e=>void 0===e.baseMin?e:{baseMin:l.computeBaseMinByDistance({dragDistance:t,prevBaseMin:e.baseMin,chartWidth:r,zoomMultiples:e.zoomMultiples}),zoomMultiples:e.zoomMultiples,targetMarginPriceX:e.targetMarginPriceX}))},W=e=>{q((t=>{const i=l.computeZoomMultiplesWhenZoom({zoomIn:null!=e&&e,prevZoomMultiples:t.zoomMultiples});return{baseMin:l.computeBaseAfterZoom({midPrice:p,zoomMultiples:i}),zoomMultiples:i,targetMarginPriceX:t.targetMarginPriceX}}))},F=i.useMemo((()=>{if(""===g)return!1;const e=new d.default(g);return!(!e.lte(0)&&!e.isNaN()&&(null==c?void 0:c.b)&&!e.gte(c.b))}),[g,c]),H=i.useMemo((()=>{if(""===h)return!1;const e=new d.default(h);return!(!e.lte(0)&&!e.isNaN()&&(null==c?void 0:c.b)&&!e.gte(c.b))}),[h,c]);return s.jsxRuntime.exports.jsxs(R,{id:e,children:[f?"":s.jsxRuntime.exports.jsxs(C,{children:[s.jsxRuntime.exports.jsxs(S,{borderColor:m&&m.grid,children:[l.chartT("pool.chart.buy-amount",{symbol:n}),s.jsxRuntime.exports.jsx(T,{value:g,error:F,onChange:e=>{const t=s.fixedInputStringToFormattedNumber(e.target.value,2);null!==t&&x(t)}}),s.jsxRuntime.exports.jsx(N,{children:l.chartT("pool.chart.price-impact",{amount:M})})]}),s.jsxRuntime.exports.jsxs(S,{borderColor:m&&m.grid,children:[l.chartT("pool.chart.sell-amount",{symbol:n}),s.jsxRuntime.exports.jsx(T,{value:h,error:H,onChange:e=>{const t=s.fixedInputStringToFormattedNumber(e.target.value,2);null!==t&&b(t)}}),s.jsxRuntime.exports.jsx(N,{children:l.chartT("pool.chart.price-impact",{amount:j})})]})]}),void 0!==c&&void 0!==p&&void 0!==u&&void 0!==P.baseMin&&void 0!==p&&s.jsxRuntime.exports.jsx(k,{width:r,height:o,params:c,midPrice:p,pmmModel:u,baseTokenSymbol:n,quoteTokenSymbol:a,baseMinAndZoomMultiples:P,colorMap:m,setBaseMinAndZoomMultiples:q}),s.jsxRuntime.exports.jsxs(O,{className:"operate-btn-wrapper",children:[s.jsxRuntime.exports.jsx(A,{onClick:()=>Z(!0),children:s.jsxRuntime.exports.jsx(L,{})}),s.jsxRuntime.exports.jsx(A,{onClick:()=>W(!1),children:s.jsxRuntime.exports.jsx(z,{})}),s.jsxRuntime.exports.jsx(A,{onClick:()=>W(!0),children:s.jsxRuntime.exports.jsx(B,{})}),s.jsxRuntime.exports.jsx(A,{onClick:()=>Z(!1),children:s.jsxRuntime.exports.jsx(w,{})})]})]})};