@dodoex/widgets 3.14.1-react.6 → 3.14.1-react.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/{helper-CR3d8R3E.js → helper-11UQcCio.js} +1 -1
  2. package/dist/{helper-J2-Ga54j.cjs → helper-DvQmJ4S9.cjs} +2 -1
  3. package/dist/helper-DvQmJ4S9.cjs.map +1 -0
  4. package/dist/{index-ByglKzOD.cjs → index-C4eoTHGK.cjs} +2 -1
  5. package/dist/index-C4eoTHGK.cjs.map +1 -0
  6. package/dist/{index-CdURUgpB.cjs → index-Cn5_crYW.cjs} +2 -1
  7. package/dist/index-Cn5_crYW.cjs.map +1 -0
  8. package/dist/{index-NvXIILf2.js → index-CzWyt6aR.js} +1 -1
  9. package/dist/{index-nEcfv_c2.js → index-DR9KPH2W.js} +1 -1
  10. package/dist/index-DtHWT4uW.js +14 -0
  11. package/dist/index-ofxslEBg.cjs +15 -0
  12. package/dist/index-ofxslEBg.cjs.map +1 -0
  13. package/dist/index.cjs +2 -1
  14. package/dist/index.cjs.map +1 -0
  15. package/dist/index.js +1 -1
  16. package/package.json +1 -1
  17. package/dist/index-DITTntm-.cjs +0 -14
  18. package/dist/index-fvIq-P8n.js +0 -14
package/dist/{helper-CR3d8R3E.js → helper-11UQcCio.js} RENAMED
@@ -1 +1 @@
1
- import{i18n as e}from"@lingui/core";import t from"bignumber.js";import{f as i}from"./index-fvIq-P8n.js";function o(t,i){switch(t){case"depth-chart.tips.buy":return e._({id:"Es4ccw",message:"Users pay {0} {1} and receive {2} {3}\nPrice {4} ({5}%)",values:{0:i.amountText,1:i.baseTokenSymbol,2:i.oppositeAmountText,3:i.quoteTokenSymbol,4:i.priceText,5:i.slippageText}});case"depth-chart.tips.mid-price":return e._({id:"cnbRVW",message:"Initial Price {0} {1} = {2} {3}",values:{0:i.amountText,1:i.baseTokenSymbol,2:i.oppositeAmountText,3:i.quoteTokenSymbol}});case"depth-chart.tips.sell":return e._({id:"Es4ccw",message:"Users pay {0} {1} and receive {2} {3}\nPrice {4} ({5}%)",values:{0:i.oppositeAmountText,1:i.quoteTokenSymbol,2:i.amountText,3:i.baseTokenSymbol,4:i.priceText,5:i.slippageText}});case"pool.chart.buy-amount":return e._({id:"NjQ1e3",message:"Users sell {0} amount: ",values:{0:i.symbol}});case"pool.chart.price-impact":return e._({id:"I0LXan",message:"Price Impact: {0}",values:{0:i.amount}});case"pool.chart.sell-amount":return e._({id:"WJ94b8",message:"Users buy {0} amount: ",values:{0:i.symbol}});case"pool.create.disabled-token-amount":return e._({id:"5QDjef",message:"The token amount is calculated by initial price."});case"pool.create.set-pool.emulator.title":return e._({id:"FQfStS",message:"Emulator"});case"pool.create.set-pool.emulator.title.question":return e._({id:"9D2g7k",message:"The liquidity of DODO is continuous, which is different from the discrete liquidity of UniV3. The ticks shown in the illustration are for demonstration purposes only."});case"pool.chart.liquidity-chart-tip":return e._({id:"GhrVog",message:"The area of the chart indicates the buy/sell volume of {0} that can be carried by the market when the current price changes to the hover price. ",values:{0:i.baseTokenSymbol}});case"pool.chart.liquidity-chart-buy":return e._({id:"TvH4Ym",message:"Bought {0} {1}, price in the pool decreased to {2}",values:{0:i.amount,1:i.symbol,2:i.price}});case"pool.chart.liquidity-chart-sell":return e._({id:"0O1wzf",message:"Traders sold ‪{0}‬ {1}, price in the pool increased to {2}",values:{0:i.amount,1:i.symbol,2:i.price}});default:throw new Error(`Unknown key ${t}`)}}const l=12,n=18;function s(e){let t=e.toLowerCase();if(t&&/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/.test(t)){if(4===t.length){let e="#";for(let i=1;i<4;i+=1)e+=t.slice(i,i+1).concat(t.slice(i,i+1));t=e}const e=[];for(let i=1;i<7;i+=2)e.push(parseInt(`0x${t.slice(i,i+2)}`));return e.join(",")}return t}function r({val:e,model:i}){let o=e;if(e.isNaN())return{side:"no-one",vert:new t(0),base:new t(0),quote:new t(0)};i.Q0.eq(0)&&e.lt(i.i)&&(o=i.i),i.B0.eq(0)&&e.gt(i.i)&&(o=i.i);const l=i.getPriceDepth(o),n=l.baseAmount,s=l.quoteAmount,{isBuy:r}=l;return{side:r?"ask":"bid",vert:r?n:s,base:n,quote:s}}function a({midPrice:e,q:i,q0:o,pmmModel:l}){let n=t.maximum(i,o,l.B.multipliedBy(e));return n.isNaN()&&(n=new t(10)),n.eq(0)&&(n=new t(1)),{buyBaseVert:n.multipliedBy(1.2),sellBaseVert:n.div(e).multipliedBy(1.2)}}function u(e,i=1){return new t(i).div(e/2)}function m({tooltip:e,x:o,chartWidth:l,chartHeight:n,buyBaseVert:a,sellBaseVert:m,pmmModel:p,midPrice:c,baseTokenSymbol:d,quoteTokenSymbol:h,t:b,baseMinAndZoomMultiples:f,isHover:g,color:y,leftColor:T,rightColor:x}){const{zoomMultiples:w,baseMin:v}=f,k=u(l,w),M=a.div(n),B=m.div(n),q=2*w,N=v.multipliedBy(10**k.multipliedBy(o).toNumber());let S=new t(Math.log(c.div(v).toNumber())/Math.log(10));S=t.minimum(q,S),S=t.maximum(0,S);const A=S.div(k),P=r({val:N,model:p});if(P.vert.isNaN())return;const _=N.lt(c);let z=n-P.vert.div(M).toNumber();_||(z=n-P.vert.div(B).toNumber());const O=i(N),X=i(P.vert),$=N.minus(c).abs().div(c).multipliedBy(100).toFixed(2),D=A.toNumber(),L=e.findOne("#toolTipVertLine"),V=e.findOne("#toolTipHoriLine"),j=e.findOne("#joinCircle"),H=e.findOne("#toolTip"),W=e.findOne("#priceTextLabel"),U=e.findOne("#slippageTextLabel");if(!H)return;H.x(o),H.y(z-5-6);const I=H.getText(),Y=H.getTag();let C="ask"===P.side?i(P.quote):i(P.base);const E=p.k.lte(0);E&&(C=X);const F=i(c),Q={amountText:X,baseTokenSymbol:d,oppositeAmountText:C,quoteTokenSymbol:h,priceText:E?F:O,slippageText:`${_?"-":"+"}${$}`};if(A.minus(4).lte(o)&&A.plus(2).gte(o)&&g)I.text(b("depth-chart.tips.mid-price",{amountText:1,baseTokenSymbol:d,oppositeAmountText:F,quoteTokenSymbol:h})),H.x(D),H.y(n/2),null==L||L.hide(),null==V||V.hide(),null==j||j.hide(),null==W||W.hide(),null==U||U.hide();else{I.text(_?b("depth-chart.tips.buy",{amountText:C,baseTokenSymbol:d,oppositeAmountText:X,quoteTokenSymbol:h,priceText:E?F:O,slippageText:`${_?"-":"+"}${$}`}):b("depth-chart.tips.sell",Q));const e=y||(_?"#55f6db":"#ff4f73"),t=_?T||"#55f6db":x||"#ff4f73";I.fill(e),H.width()/2>o?(Y.pointerDirection("left"),Y.pointerHeight(15),Y.pointerWidth(8),H.offsetX(-11),H.offsetY(-11)):H.width()/2+o>l?(Y.pointerDirection("right"),Y.pointerHeight(15),Y.pointerWidth(8),H.offsetX(11),H.offsetY(-11)):(Y.pointerDirection("down"),Y.pointerHeight(8),Y.pointerWidth(15),H.offsetX(0),H.offsetY(0)),null==L||L.points([o,n,o,z]),null==L||L.stroke(t),null==V||V.points(_?[o,z,D,z]:[D,z,o,z]),null==V||V.stroke(t),null==j||j.x(o),null==j||j.y(z),null==j||j.fill(_?T||"rgb(86, 246, 218)":x||"#FF5072"),null==j||j.stroke(_?T?`rgba(${s(T)}, 0.4)`:"rgba(86, 246, 218, 0.3)":x?`rgba(${s(x)}, 0.4)`:"rgba(255, 80, 114, 0.3)"),W&&(W.x(o),W.y(n),W.offsetX(W.width()/2),W.x()-W.width()/2<0?W.x(W.width()/2):W.x()+W.width()/2>l?W.x(l-W.width()/2):W.x(o));const i=null==W?void 0:W.findOne("#priceTextLabel-text");i&&(i.fill(e),i.text(O)),U&&(U.x(_?o+(D-o)/2:o-(o-D)/2),U.y(z),U.offsetY(U.height()/2),U.offsetX(U.width()/2));const r=null==U?void 0:U.findOne("#slippageTextLabel-text");r&&(r.fill(e),r.text(`${_?"-":"+"}${$}%`)),null==L||L.show(),null==V||V.show(),null==j||j.show(),null==W||W.show(),null==U||U.show()}e.show()}function p({dragDistance:e,prevBaseMin:i,chartWidth:o,zoomMultiples:l}){const n=u(o,l);return e>0?i.multipliedBy(1-n.multipliedBy(e).toNumber()):i.multipliedBy(10**n.multipliedBy(new t(e).abs()).plus(0).toNumber())}const c=1;function d({prevZoomMultiples:e,zoomIn:t}){return!t&&e<=.1?e:t?e+.1:e-.1}function h({type:e,targetPrice:i,midPrice:o,width:l}){if("sell"===e){return{zoomMultiples:new t(Math.log10(i.div(o).toNumber())).minus(0).div(3/4).abs(),targetX:l/2*(3/4)+l/2}}const n=new t(Math.log10(i.div(o).toNumber()));return{zoomMultiples:new t(0).minus(n).div(3/4).abs(),targetX:l/2*(1/4)}}function b({currentBaseMinAndZoomMultiples:e,targetPrice:i,midPrice:o,width:l}){const{baseMin:n,zoomMultiples:s}=e,r=new t(Math.log10(n.div(o).toNumber())),a=r.plus(2*s),u=new t(o.multipliedBy(10**a.toNumber()));if(i.gte(n)&&i.lte(u)){return{isSkip:!0,targetX:new t(Math.log10(i.div(o).toNumber())).minus(r).div(2*s).multipliedBy(l).toNumber(),baseMin:new t(0),zoomMultiples:1}}const m=new t(o.multipliedBy(.1)),p=new t(o.multipliedBy(10));if(i.gte(m)&&i.lte(p)){return{isSkip:!1,targetX:new t(Math.log10(i.div(o).toNumber())).minus(-1).div(2).multipliedBy(l).toNumber(),baseMin:m,zoomMultiples:1}}return{isSkip:!1,targetX:-1,baseMin:new t(0),zoomMultiples:1}}function f({midPrice:e,zoomMultiples:t}){return e.multipliedBy(10**-t)}export{a,p as b,u as c,d,r as e,f,n as g,o as h,c as i,b as j,h as k,l,s as m,m as u};
1
+ import{i18n as e}from"@lingui/core";import t from"bignumber.js";import{f as i}from"./index-DtHWT4uW.js";function o(t,i){switch(t){case"depth-chart.tips.buy":return e._({id:"Es4ccw",message:"Users pay {0} {1} and receive {2} {3}\nPrice {4} ({5}%)",values:{0:i.amountText,1:i.baseTokenSymbol,2:i.oppositeAmountText,3:i.quoteTokenSymbol,4:i.priceText,5:i.slippageText}});case"depth-chart.tips.mid-price":return e._({id:"cnbRVW",message:"Initial Price {0} {1} = {2} {3}",values:{0:i.amountText,1:i.baseTokenSymbol,2:i.oppositeAmountText,3:i.quoteTokenSymbol}});case"depth-chart.tips.sell":return e._({id:"Es4ccw",message:"Users pay {0} {1} and receive {2} {3}\nPrice {4} ({5}%)",values:{0:i.oppositeAmountText,1:i.quoteTokenSymbol,2:i.amountText,3:i.baseTokenSymbol,4:i.priceText,5:i.slippageText}});case"pool.chart.buy-amount":return e._({id:"NjQ1e3",message:"Users sell {0} amount: ",values:{0:i.symbol}});case"pool.chart.price-impact":return e._({id:"I0LXan",message:"Price Impact: {0}",values:{0:i.amount}});case"pool.chart.sell-amount":return e._({id:"WJ94b8",message:"Users buy {0} amount: ",values:{0:i.symbol}});case"pool.create.disabled-token-amount":return e._({id:"5QDjef",message:"The token amount is calculated by initial price."});case"pool.create.set-pool.emulator.title":return e._({id:"FQfStS",message:"Emulator"});case"pool.create.set-pool.emulator.title.question":return e._({id:"9D2g7k",message:"The liquidity of DODO is continuous, which is different from the discrete liquidity of UniV3. The ticks shown in the illustration are for demonstration purposes only."});case"pool.chart.liquidity-chart-tip":return e._({id:"GhrVog",message:"The area of the chart indicates the buy/sell volume of {0} that can be carried by the market when the current price changes to the hover price. ",values:{0:i.baseTokenSymbol}});case"pool.chart.liquidity-chart-buy":return e._({id:"TvH4Ym",message:"Bought {0} {1}, price in the pool decreased to {2}",values:{0:i.amount,1:i.symbol,2:i.price}});case"pool.chart.liquidity-chart-sell":return e._({id:"0O1wzf",message:"Traders sold ‪{0}‬ {1}, price in the pool increased to {2}",values:{0:i.amount,1:i.symbol,2:i.price}});default:throw new Error(`Unknown key ${t}`)}}const l=12,n=18;function s(e){let t=e.toLowerCase();if(t&&/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/.test(t)){if(4===t.length){let e="#";for(let i=1;i<4;i+=1)e+=t.slice(i,i+1).concat(t.slice(i,i+1));t=e}const e=[];for(let i=1;i<7;i+=2)e.push(parseInt(`0x${t.slice(i,i+2)}`));return e.join(",")}return t}function r({val:e,model:i}){let o=e;if(e.isNaN())return{side:"no-one",vert:new t(0),base:new t(0),quote:new t(0)};i.Q0.eq(0)&&e.lt(i.i)&&(o=i.i),i.B0.eq(0)&&e.gt(i.i)&&(o=i.i);const l=i.getPriceDepth(o),n=l.baseAmount,s=l.quoteAmount,{isBuy:r}=l;return{side:r?"ask":"bid",vert:r?n:s,base:n,quote:s}}function a({midPrice:e,q:i,q0:o,pmmModel:l}){let n=t.maximum(i,o,l.B.multipliedBy(e));return n.isNaN()&&(n=new t(10)),n.eq(0)&&(n=new t(1)),{buyBaseVert:n.multipliedBy(1.2),sellBaseVert:n.div(e).multipliedBy(1.2)}}function u(e,i=1){return new t(i).div(e/2)}function m({tooltip:e,x:o,chartWidth:l,chartHeight:n,buyBaseVert:a,sellBaseVert:m,pmmModel:p,midPrice:c,baseTokenSymbol:d,quoteTokenSymbol:h,t:b,baseMinAndZoomMultiples:f,isHover:g,color:y,leftColor:T,rightColor:x}){const{zoomMultiples:w,baseMin:v}=f,k=u(l,w),M=a.div(n),B=m.div(n),q=2*w,N=v.multipliedBy(10**k.multipliedBy(o).toNumber());let S=new t(Math.log(c.div(v).toNumber())/Math.log(10));S=t.minimum(q,S),S=t.maximum(0,S);const A=S.div(k),P=r({val:N,model:p});if(P.vert.isNaN())return;const _=N.lt(c);let z=n-P.vert.div(M).toNumber();_||(z=n-P.vert.div(B).toNumber());const O=i(N),X=i(P.vert),$=N.minus(c).abs().div(c).multipliedBy(100).toFixed(2),D=A.toNumber(),L=e.findOne("#toolTipVertLine"),V=e.findOne("#toolTipHoriLine"),j=e.findOne("#joinCircle"),H=e.findOne("#toolTip"),W=e.findOne("#priceTextLabel"),U=e.findOne("#slippageTextLabel");if(!H)return;H.x(o),H.y(z-5-6);const I=H.getText(),Y=H.getTag();let C="ask"===P.side?i(P.quote):i(P.base);const E=p.k.lte(0);E&&(C=X);const F=i(c),Q={amountText:X,baseTokenSymbol:d,oppositeAmountText:C,quoteTokenSymbol:h,priceText:E?F:O,slippageText:`${_?"-":"+"}${$}`};if(A.minus(4).lte(o)&&A.plus(2).gte(o)&&g)I.text(b("depth-chart.tips.mid-price",{amountText:1,baseTokenSymbol:d,oppositeAmountText:F,quoteTokenSymbol:h})),H.x(D),H.y(n/2),null==L||L.hide(),null==V||V.hide(),null==j||j.hide(),null==W||W.hide(),null==U||U.hide();else{I.text(_?b("depth-chart.tips.buy",{amountText:C,baseTokenSymbol:d,oppositeAmountText:X,quoteTokenSymbol:h,priceText:E?F:O,slippageText:`${_?"-":"+"}${$}`}):b("depth-chart.tips.sell",Q));const e=y||(_?"#55f6db":"#ff4f73"),t=_?T||"#55f6db":x||"#ff4f73";I.fill(e),H.width()/2>o?(Y.pointerDirection("left"),Y.pointerHeight(15),Y.pointerWidth(8),H.offsetX(-11),H.offsetY(-11)):H.width()/2+o>l?(Y.pointerDirection("right"),Y.pointerHeight(15),Y.pointerWidth(8),H.offsetX(11),H.offsetY(-11)):(Y.pointerDirection("down"),Y.pointerHeight(8),Y.pointerWidth(15),H.offsetX(0),H.offsetY(0)),null==L||L.points([o,n,o,z]),null==L||L.stroke(t),null==V||V.points(_?[o,z,D,z]:[D,z,o,z]),null==V||V.stroke(t),null==j||j.x(o),null==j||j.y(z),null==j||j.fill(_?T||"rgb(86, 246, 218)":x||"#FF5072"),null==j||j.stroke(_?T?`rgba(${s(T)}, 0.4)`:"rgba(86, 246, 218, 0.3)":x?`rgba(${s(x)}, 0.4)`:"rgba(255, 80, 114, 0.3)"),W&&(W.x(o),W.y(n),W.offsetX(W.width()/2),W.x()-W.width()/2<0?W.x(W.width()/2):W.x()+W.width()/2>l?W.x(l-W.width()/2):W.x(o));const i=null==W?void 0:W.findOne("#priceTextLabel-text");i&&(i.fill(e),i.text(O)),U&&(U.x(_?o+(D-o)/2:o-(o-D)/2),U.y(z),U.offsetY(U.height()/2),U.offsetX(U.width()/2));const r=null==U?void 0:U.findOne("#slippageTextLabel-text");r&&(r.fill(e),r.text(`${_?"-":"+"}${$}%`)),null==L||L.show(),null==V||V.show(),null==j||j.show(),null==W||W.show(),null==U||U.show()}e.show()}function p({dragDistance:e,prevBaseMin:i,chartWidth:o,zoomMultiples:l}){const n=u(o,l);return e>0?i.multipliedBy(1-n.multipliedBy(e).toNumber()):i.multipliedBy(10**n.multipliedBy(new t(e).abs()).plus(0).toNumber())}const c=1;function d({prevZoomMultiples:e,zoomIn:t}){return!t&&e<=.1?e:t?e+.1:e-.1}function h({type:e,targetPrice:i,midPrice:o,width:l}){if("sell"===e){return{zoomMultiples:new t(Math.log10(i.div(o).toNumber())).minus(0).div(3/4).abs(),targetX:l/2*(3/4)+l/2}}const n=new t(Math.log10(i.div(o).toNumber()));return{zoomMultiples:new t(0).minus(n).div(3/4).abs(),targetX:l/2*(1/4)}}function b({currentBaseMinAndZoomMultiples:e,targetPrice:i,midPrice:o,width:l}){const{baseMin:n,zoomMultiples:s}=e,r=new t(Math.log10(n.div(o).toNumber())),a=r.plus(2*s),u=new t(o.multipliedBy(10**a.toNumber()));if(i.gte(n)&&i.lte(u)){return{isSkip:!0,targetX:new t(Math.log10(i.div(o).toNumber())).minus(r).div(2*s).multipliedBy(l).toNumber(),baseMin:new t(0),zoomMultiples:1}}const m=new t(o.multipliedBy(.1)),p=new t(o.multipliedBy(10));if(i.gte(m)&&i.lte(p)){return{isSkip:!1,targetX:new t(Math.log10(i.div(o).toNumber())).minus(-1).div(2).multipliedBy(l).toNumber(),baseMin:m,zoomMultiples:1}}return{isSkip:!1,targetX:-1,baseMin:new t(0),zoomMultiples:1}}function f({midPrice:e,zoomMultiples:t}){return e.multipliedBy(10**-t)}export{a,p as b,u as c,d,r as e,f,n as g,o as h,c as i,b as j,h as k,l,s as m,m as u};
package/dist/{helper-J2-Ga54j.cjs → helper-DvQmJ4S9.cjs} RENAMED
@@ -1 +1,2 @@
1
- "use strict";var e=require("@lingui/core"),t=require("bignumber.js"),i=require("./index-DITTntm-.cjs");function o(e){let t=e.toLowerCase();if(t&&/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/.test(t)){if(4===t.length){let e="#";for(let i=1;i<4;i+=1)e+=t.slice(i,i+1).concat(t.slice(i,i+1));t=e}const e=[];for(let i=1;i<7;i+=2)e.push(parseInt(`0x${t.slice(i,i+2)}`));return e.join(",")}return t}function r({val:e,model:i}){let o=e;if(e.isNaN())return{side:"no-one",vert:new t(0),base:new t(0),quote:new t(0)};i.Q0.eq(0)&&e.lt(i.i)&&(o=i.i),i.B0.eq(0)&&e.gt(i.i)&&(o=i.i);const r=i.getPriceDepth(o),n=r.baseAmount,l=r.quoteAmount,{isBuy:s}=r;return{side:s?"ask":"bid",vert:s?n:l,base:n,quote:l}}function n(e,i=1){return new t(i).div(e/2)}exports.baseZoomMultiples=1,exports.beforePriceImpactEffect=function({currentBaseMinAndZoomMultiples:e,targetPrice:i,midPrice:o,width:r}){const{baseMin:n,zoomMultiples:l}=e,s=new t(Math.log10(n.div(o).toNumber())),u=s.plus(2*l),a=new t(o.multipliedBy(10**u.toNumber()));if(i.gte(n)&&i.lte(a)){return{isSkip:!0,targetX:new t(Math.log10(i.div(o).toNumber())).minus(s).div(2*l).multipliedBy(r).toNumber(),baseMin:new t(0),zoomMultiples:1}}const m=new t(o.multipliedBy(.1)),p=new t(o.multipliedBy(10));if(i.gte(m)&&i.lte(p)){return{isSkip:!1,targetX:new t(Math.log10(i.div(o).toNumber())).minus(-1).div(2).multipliedBy(r).toNumber(),baseMin:m,zoomMultiples:1}}return{isSkip:!1,targetX:-1,baseMin:new t(0),zoomMultiples:1}},exports.chartOffsetYBCToolTip=18,exports.chartT=function(t,i){switch(t){case"depth-chart.tips.buy":return e.i18n._({id:"Es4ccw",message:"Users pay {0} {1} and receive {2} {3}\nPrice {4} ({5}%)",values:{0:i.amountText,1:i.baseTokenSymbol,2:i.oppositeAmountText,3:i.quoteTokenSymbol,4:i.priceText,5:i.slippageText}});case"depth-chart.tips.mid-price":return e.i18n._({id:"cnbRVW",message:"Initial Price {0} {1} = {2} {3}",values:{0:i.amountText,1:i.baseTokenSymbol,2:i.oppositeAmountText,3:i.quoteTokenSymbol}});case"depth-chart.tips.sell":return e.i18n._({id:"Es4ccw",message:"Users pay {0} {1} and receive {2} {3}\nPrice {4} ({5}%)",values:{0:i.oppositeAmountText,1:i.quoteTokenSymbol,2:i.amountText,3:i.baseTokenSymbol,4:i.priceText,5:i.slippageText}});case"pool.chart.buy-amount":return e.i18n._({id:"NjQ1e3",message:"Users sell {0} amount: ",values:{0:i.symbol}});case"pool.chart.price-impact":return e.i18n._({id:"I0LXan",message:"Price Impact: {0}",values:{0:i.amount}});case"pool.chart.sell-amount":return e.i18n._({id:"WJ94b8",message:"Users buy {0} amount: ",values:{0:i.symbol}});case"pool.create.disabled-token-amount":return e.i18n._({id:"5QDjef",message:"The token amount is calculated by initial price."});case"pool.create.set-pool.emulator.title":return e.i18n._({id:"FQfStS",message:"Emulator"});case"pool.create.set-pool.emulator.title.question":return e.i18n._({id:"9D2g7k",message:"The liquidity of DODO is continuous, which is different from the discrete liquidity of UniV3. The ticks shown in the illustration are for demonstration purposes only."});case"pool.chart.liquidity-chart-tip":return e.i18n._({id:"GhrVog",message:"The area of the chart indicates the buy/sell volume of {0} that can be carried by the market when the current price changes to the hover price. ",values:{0:i.baseTokenSymbol}});case"pool.chart.liquidity-chart-buy":return e.i18n._({id:"TvH4Ym",message:"Bought {0} {1}, price in the pool decreased to {2}",values:{0:i.amount,1:i.symbol,2:i.price}});case"pool.chart.liquidity-chart-sell":return e.i18n._({id:"0O1wzf",message:"Traders sold ‪{0}‬ {1}, price in the pool increased to {2}",values:{0:i.amount,1:i.symbol,2:i.price}});default:throw new Error(`Unknown key ${t}`)}},exports.colorRgb=o,exports.computeBaseAfterZoom=function({midPrice:e,zoomMultiples:t}){return e.multipliedBy(10**-t)},exports.computeBaseMinByDistance=function({dragDistance:e,prevBaseMin:i,chartWidth:o,zoomMultiples:r}){const l=n(o,r);return e>0?i.multipliedBy(1-l.multipliedBy(e).toNumber()):i.multipliedBy(10**l.multipliedBy(new t(e).abs()).plus(0).toNumber())},exports.computeBaseVert=function({midPrice:e,q:i,q0:o,pmmModel:r}){let n=t.maximum(i,o,r.B.multipliedBy(e));return n.isNaN()&&(n=new t(10)),n.eq(0)&&(n=new t(1)),{buyBaseVert:n.multipliedBy(1.2),sellBaseVert:n.div(e).multipliedBy(1.2)}},exports.computeTargetXByTargetPrice=function({type:e,targetPrice:i,midPrice:o,width:r}){if("sell"===e){return{zoomMultiples:new t(Math.log10(i.div(o).toNumber())).minus(0).div(3/4).abs(),targetX:r/2*(3/4)+r/2}}const n=new t(Math.log10(i.div(o).toNumber()));return{zoomMultiples:new t(0).minus(n).div(3/4).abs(),targetX:r/2*(1/4)}},exports.computeXPortion=n,exports.computeZoomMultiplesWhenZoom=function({prevZoomMultiples:e,zoomIn:t}){return!t&&e<=.1?e:t?e+.1:e-.1},exports.evalPoint=r,exports.labelPadding=12,exports.updateTooltip=function({tooltip:e,x:l,chartWidth:s,chartHeight:u,buyBaseVert:a,sellBaseVert:m,pmmModel:p,midPrice:c,baseTokenSymbol:d,quoteTokenSymbol:h,t:b,baseMinAndZoomMultiples:f,isHover:g,color:y,leftColor:x,rightColor:T}){const{zoomMultiples:v,baseMin:w}=f,B=n(s,v),M=a.div(u),k=m.div(u),N=2*v,q=w.multipliedBy(10**B.multipliedBy(l).toNumber());let S=new t(Math.log(c.div(w).toNumber())/Math.log(10));S=t.minimum(N,S),S=t.maximum(0,S);const P=S.div(B),A=r({val:q,model:p});if(A.vert.isNaN())return;const X=q.lt(c);let O=u-A.vert.div(M).toNumber();X||(O=u-A.vert.div(k).toNumber());const _=i.formatShortNumber(q),z=i.formatShortNumber(A.vert),$=q.minus(c).abs().div(c).multipliedBy(100).toFixed(2),D=P.toNumber(),V=e.findOne("#toolTipVertLine"),L=e.findOne("#toolTipHoriLine"),W=e.findOne("#joinCircle"),H=e.findOne("#toolTip"),Z=e.findOne("#priceTextLabel"),j=e.findOne("#slippageTextLabel");if(!H)return;H.x(l),H.y(O-5-6);const I=H.getText(),U=H.getTag();let Y="ask"===A.side?i.formatShortNumber(A.quote):i.formatShortNumber(A.base);const C=p.k.lte(0);C&&(Y=z);const E=i.formatShortNumber(c),F={amountText:z,baseTokenSymbol:d,oppositeAmountText:Y,quoteTokenSymbol:h,priceText:C?E:_,slippageText:`${X?"-":"+"}${$}`};if(P.minus(4).lte(l)&&P.plus(2).gte(l)&&g)I.text(b("depth-chart.tips.mid-price",{amountText:1,baseTokenSymbol:d,oppositeAmountText:E,quoteTokenSymbol:h})),H.x(D),H.y(u/2),null==V||V.hide(),null==L||L.hide(),null==W||W.hide(),null==Z||Z.hide(),null==j||j.hide();else{I.text(X?b("depth-chart.tips.buy",{amountText:Y,baseTokenSymbol:d,oppositeAmountText:z,quoteTokenSymbol:h,priceText:C?E:_,slippageText:`${X?"-":"+"}${$}`}):b("depth-chart.tips.sell",F));const e=y||(X?"#55f6db":"#ff4f73"),t=X?x||"#55f6db":T||"#ff4f73";I.fill(e),H.width()/2>l?(U.pointerDirection("left"),U.pointerHeight(15),U.pointerWidth(8),H.offsetX(-11),H.offsetY(-11)):H.width()/2+l>s?(U.pointerDirection("right"),U.pointerHeight(15),U.pointerWidth(8),H.offsetX(11),H.offsetY(-11)):(U.pointerDirection("down"),U.pointerHeight(8),U.pointerWidth(15),H.offsetX(0),H.offsetY(0)),null==V||V.points([l,u,l,O]),null==V||V.stroke(t),null==L||L.points(X?[l,O,D,O]:[D,O,l,O]),null==L||L.stroke(t),null==W||W.x(l),null==W||W.y(O),null==W||W.fill(X?x||"rgb(86, 246, 218)":T||"#FF5072"),null==W||W.stroke(X?x?`rgba(${o(x)}, 0.4)`:"rgba(86, 246, 218, 0.3)":T?`rgba(${o(T)}, 0.4)`:"rgba(255, 80, 114, 0.3)"),Z&&(Z.x(l),Z.y(u),Z.offsetX(Z.width()/2),Z.x()-Z.width()/2<0?Z.x(Z.width()/2):Z.x()+Z.width()/2>s?Z.x(s-Z.width()/2):Z.x(l));const i=null==Z?void 0:Z.findOne("#priceTextLabel-text");i&&(i.fill(e),i.text(_)),j&&(j.x(X?l+(D-l)/2:l-(l-D)/2),j.y(O),j.offsetY(j.height()/2),j.offsetX(j.width()/2));const r=null==j?void 0:j.findOne("#slippageTextLabel-text");r&&(r.fill(e),r.text(`${X?"-":"+"}${$}%`)),null==V||V.show(),null==L||L.show(),null==W||W.show(),null==Z||Z.show(),null==j||j.show()}e.show()};
1
+ "use strict";var e=require("@lingui/core"),t=require("bignumber.js"),i=require("./index-ofxslEBg.cjs");function o(e){let t=e.toLowerCase();if(t&&/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/.test(t)){if(4===t.length){let e="#";for(let i=1;i<4;i+=1)e+=t.slice(i,i+1).concat(t.slice(i,i+1));t=e}const e=[];for(let i=1;i<7;i+=2)e.push(parseInt(`0x${t.slice(i,i+2)}`));return e.join(",")}return t}function r({val:e,model:i}){let o=e;if(e.isNaN())return{side:"no-one",vert:new t(0),base:new t(0),quote:new t(0)};i.Q0.eq(0)&&e.lt(i.i)&&(o=i.i),i.B0.eq(0)&&e.gt(i.i)&&(o=i.i);const r=i.getPriceDepth(o),n=r.baseAmount,l=r.quoteAmount,{isBuy:s}=r;return{side:s?"ask":"bid",vert:s?n:l,base:n,quote:l}}function n(e,i=1){return new t(i).div(e/2)}exports.baseZoomMultiples=1,exports.beforePriceImpactEffect=function({currentBaseMinAndZoomMultiples:e,targetPrice:i,midPrice:o,width:r}){const{baseMin:n,zoomMultiples:l}=e,s=new t(Math.log10(n.div(o).toNumber())),u=s.plus(2*l),a=new t(o.multipliedBy(10**u.toNumber()));if(i.gte(n)&&i.lte(a)){return{isSkip:!0,targetX:new t(Math.log10(i.div(o).toNumber())).minus(s).div(2*l).multipliedBy(r).toNumber(),baseMin:new t(0),zoomMultiples:1}}const m=new t(o.multipliedBy(.1)),p=new t(o.multipliedBy(10));if(i.gte(m)&&i.lte(p)){return{isSkip:!1,targetX:new t(Math.log10(i.div(o).toNumber())).minus(-1).div(2).multipliedBy(r).toNumber(),baseMin:m,zoomMultiples:1}}return{isSkip:!1,targetX:-1,baseMin:new t(0),zoomMultiples:1}},exports.chartOffsetYBCToolTip=18,exports.chartT=function(t,i){switch(t){case"depth-chart.tips.buy":return e.i18n._({id:"Es4ccw",message:"Users pay {0} {1} and receive {2} {3}\nPrice {4} ({5}%)",values:{0:i.amountText,1:i.baseTokenSymbol,2:i.oppositeAmountText,3:i.quoteTokenSymbol,4:i.priceText,5:i.slippageText}});case"depth-chart.tips.mid-price":return e.i18n._({id:"cnbRVW",message:"Initial Price {0} {1} = {2} {3}",values:{0:i.amountText,1:i.baseTokenSymbol,2:i.oppositeAmountText,3:i.quoteTokenSymbol}});case"depth-chart.tips.sell":return e.i18n._({id:"Es4ccw",message:"Users pay {0} {1} and receive {2} {3}\nPrice {4} ({5}%)",values:{0:i.oppositeAmountText,1:i.quoteTokenSymbol,2:i.amountText,3:i.baseTokenSymbol,4:i.priceText,5:i.slippageText}});case"pool.chart.buy-amount":return e.i18n._({id:"NjQ1e3",message:"Users sell {0} amount: ",values:{0:i.symbol}});case"pool.chart.price-impact":return e.i18n._({id:"I0LXan",message:"Price Impact: {0}",values:{0:i.amount}});case"pool.chart.sell-amount":return e.i18n._({id:"WJ94b8",message:"Users buy {0} amount: ",values:{0:i.symbol}});case"pool.create.disabled-token-amount":return e.i18n._({id:"5QDjef",message:"The token amount is calculated by initial price."});case"pool.create.set-pool.emulator.title":return e.i18n._({id:"FQfStS",message:"Emulator"});case"pool.create.set-pool.emulator.title.question":return e.i18n._({id:"9D2g7k",message:"The liquidity of DODO is continuous, which is different from the discrete liquidity of UniV3. The ticks shown in the illustration are for demonstration purposes only."});case"pool.chart.liquidity-chart-tip":return e.i18n._({id:"GhrVog",message:"The area of the chart indicates the buy/sell volume of {0} that can be carried by the market when the current price changes to the hover price. ",values:{0:i.baseTokenSymbol}});case"pool.chart.liquidity-chart-buy":return e.i18n._({id:"TvH4Ym",message:"Bought {0} {1}, price in the pool decreased to {2}",values:{0:i.amount,1:i.symbol,2:i.price}});case"pool.chart.liquidity-chart-sell":return e.i18n._({id:"0O1wzf",message:"Traders sold ‪{0}‬ {1}, price in the pool increased to {2}",values:{0:i.amount,1:i.symbol,2:i.price}});default:throw new Error(`Unknown key ${t}`)}},exports.colorRgb=o,exports.computeBaseAfterZoom=function({midPrice:e,zoomMultiples:t}){return e.multipliedBy(10**-t)},exports.computeBaseMinByDistance=function({dragDistance:e,prevBaseMin:i,chartWidth:o,zoomMultiples:r}){const l=n(o,r);return e>0?i.multipliedBy(1-l.multipliedBy(e).toNumber()):i.multipliedBy(10**l.multipliedBy(new t(e).abs()).plus(0).toNumber())},exports.computeBaseVert=function({midPrice:e,q:i,q0:o,pmmModel:r}){let n=t.maximum(i,o,r.B.multipliedBy(e));return n.isNaN()&&(n=new t(10)),n.eq(0)&&(n=new t(1)),{buyBaseVert:n.multipliedBy(1.2),sellBaseVert:n.div(e).multipliedBy(1.2)}},exports.computeTargetXByTargetPrice=function({type:e,targetPrice:i,midPrice:o,width:r}){if("sell"===e){return{zoomMultiples:new t(Math.log10(i.div(o).toNumber())).minus(0).div(3/4).abs(),targetX:r/2*(3/4)+r/2}}const n=new t(Math.log10(i.div(o).toNumber()));return{zoomMultiples:new t(0).minus(n).div(3/4).abs(),targetX:r/2*(1/4)}},exports.computeXPortion=n,exports.computeZoomMultiplesWhenZoom=function({prevZoomMultiples:e,zoomIn:t}){return!t&&e<=.1?e:t?e+.1:e-.1},exports.evalPoint=r,exports.labelPadding=12,exports.updateTooltip=function({tooltip:e,x:l,chartWidth:s,chartHeight:u,buyBaseVert:a,sellBaseVert:m,pmmModel:p,midPrice:c,baseTokenSymbol:d,quoteTokenSymbol:h,t:b,baseMinAndZoomMultiples:f,isHover:g,color:y,leftColor:x,rightColor:T}){const{zoomMultiples:v,baseMin:w}=f,B=n(s,v),M=a.div(u),k=m.div(u),N=2*v,q=w.multipliedBy(10**B.multipliedBy(l).toNumber());let S=new t(Math.log(c.div(w).toNumber())/Math.log(10));S=t.minimum(N,S),S=t.maximum(0,S);const P=S.div(B),A=r({val:q,model:p});if(A.vert.isNaN())return;const X=q.lt(c);let O=u-A.vert.div(M).toNumber();X||(O=u-A.vert.div(k).toNumber());const _=i.formatShortNumber(q),z=i.formatShortNumber(A.vert),$=q.minus(c).abs().div(c).multipliedBy(100).toFixed(2),D=P.toNumber(),V=e.findOne("#toolTipVertLine"),L=e.findOne("#toolTipHoriLine"),W=e.findOne("#joinCircle"),H=e.findOne("#toolTip"),Z=e.findOne("#priceTextLabel"),j=e.findOne("#slippageTextLabel");if(!H)return;H.x(l),H.y(O-5-6);const I=H.getText(),U=H.getTag();let Y="ask"===A.side?i.formatShortNumber(A.quote):i.formatShortNumber(A.base);const C=p.k.lte(0);C&&(Y=z);const E=i.formatShortNumber(c),F={amountText:z,baseTokenSymbol:d,oppositeAmountText:Y,quoteTokenSymbol:h,priceText:C?E:_,slippageText:`${X?"-":"+"}${$}`};if(P.minus(4).lte(l)&&P.plus(2).gte(l)&&g)I.text(b("depth-chart.tips.mid-price",{amountText:1,baseTokenSymbol:d,oppositeAmountText:E,quoteTokenSymbol:h})),H.x(D),H.y(u/2),null==V||V.hide(),null==L||L.hide(),null==W||W.hide(),null==Z||Z.hide(),null==j||j.hide();else{I.text(X?b("depth-chart.tips.buy",{amountText:Y,baseTokenSymbol:d,oppositeAmountText:z,quoteTokenSymbol:h,priceText:C?E:_,slippageText:`${X?"-":"+"}${$}`}):b("depth-chart.tips.sell",F));const e=y||(X?"#55f6db":"#ff4f73"),t=X?x||"#55f6db":T||"#ff4f73";I.fill(e),H.width()/2>l?(U.pointerDirection("left"),U.pointerHeight(15),U.pointerWidth(8),H.offsetX(-11),H.offsetY(-11)):H.width()/2+l>s?(U.pointerDirection("right"),U.pointerHeight(15),U.pointerWidth(8),H.offsetX(11),H.offsetY(-11)):(U.pointerDirection("down"),U.pointerHeight(8),U.pointerWidth(15),H.offsetX(0),H.offsetY(0)),null==V||V.points([l,u,l,O]),null==V||V.stroke(t),null==L||L.points(X?[l,O,D,O]:[D,O,l,O]),null==L||L.stroke(t),null==W||W.x(l),null==W||W.y(O),null==W||W.fill(X?x||"rgb(86, 246, 218)":T||"#FF5072"),null==W||W.stroke(X?x?`rgba(${o(x)}, 0.4)`:"rgba(86, 246, 218, 0.3)":T?`rgba(${o(T)}, 0.4)`:"rgba(255, 80, 114, 0.3)"),Z&&(Z.x(l),Z.y(u),Z.offsetX(Z.width()/2),Z.x()-Z.width()/2<0?Z.x(Z.width()/2):Z.x()+Z.width()/2>s?Z.x(s-Z.width()/2):Z.x(l));const i=null==Z?void 0:Z.findOne("#priceTextLabel-text");i&&(i.fill(e),i.text(_)),j&&(j.x(X?l+(D-l)/2:l-(l-D)/2),j.y(O),j.offsetY(j.height()/2),j.offsetX(j.width()/2));const r=null==j?void 0:j.findOne("#slippageTextLabel-text");r&&(r.fill(e),r.text(`${X?"-":"+"}${$}%`)),null==V||V.show(),null==L||L.show(),null==W||W.show(),null==Z||Z.show(),null==j||j.show()}e.show()};
2
+ //# sourceMappingURL=helper-DvQmJ4S9.cjs.map
package/dist/helper-DvQmJ4S9.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"helper-DvQmJ4S9.cjs","sources":["../src/components/chart/depth-chart/helper.ts","../src/components/chart/utils.ts","../src/components/chart/i18n.ts"],"sourcesContent":["import BigNumber from 'bignumber.js';\r\nimport Konva from 'konva';\r\nimport { formatShortNumber } from '../../../utils/formatter';\r\nimport { PMMModel } from '@dodoex/api';\r\n\r\nexport function colorRgb(str: string) {\r\n let sColor = str.toLowerCase();\r\n // Regular expression for hexadecimal color values\r\n const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;\r\n // If it is a hexadecimal color\r\n if (sColor && reg.test(sColor)) {\r\n if (sColor.length === 4) {\r\n let sColorNew = '#';\r\n for (let i = 1; i < 4; i += 1) {\r\n sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));\r\n }\r\n sColor = sColorNew;\r\n }\r\n // Handle six-bit color values\r\n const sColorChange = [];\r\n for (let i = 1; i < 7; i += 2) {\r\n sColorChange.push(parseInt(`0x${sColor.slice(i, i + 2)}`));\r\n }\r\n return sColorChange.join(',');\r\n }\r\n return sColor;\r\n}\r\n\r\nexport type EvaluatedPoint = {\r\n side: 'bid' | 'ask' | 'no-one';\r\n vert: BigNumber;\r\n base: BigNumber;\r\n quote: BigNumber;\r\n};\r\n\r\nexport type BaseMinAndZoomMultiples = {\r\n baseMin: BigNumber;\r\n zoomMultiples: number;\r\n /** Price impact point active display hover */\r\n targetMarginPriceX: number;\r\n};\r\n\r\nexport function evalPoint({\r\n val,\r\n model,\r\n}: // midPrice,\r\n{\r\n val: BigNumber;\r\n model: PMMModel;\r\n midPrice: BigNumber;\r\n}): EvaluatedPoint {\r\n let v = val;\r\n if (val.isNaN()) {\r\n return {\r\n side: 'no-one',\r\n vert: new BigNumber(0),\r\n base: new BigNumber(0),\r\n quote: new BigNumber(0),\r\n };\r\n }\r\n // If Q0=0, the minimum value of the abscissa must be greater than or equal to i. If the abscissa input is less than i, the vertical axis value when the abscissa is i is returned.\r\n // If B0=0, the maximum value of the abscissa must be less than or equal to i. If the abscissa input is greater than i, the vertical axis value when the abscissa is i is returned.\r\n if (model.Q0.eq(0) && val.lt(model.i)) {\r\n v = model.i;\r\n }\r\n if (model.B0.eq(0) && val.gt(model.i)) {\r\n v = model.i;\r\n }\r\n\r\n const resp = model.getPriceDepth(v);\r\n const base = resp.baseAmount;\r\n const quote = resp.quoteAmount;\r\n const { isBuy } = resp;\r\n\r\n return {\r\n side: isBuy ? 'ask' : 'bid',\r\n // vert: isBuy ? base.multipliedBy(midPrice) : quote,\r\n vert: isBuy ? base : quote,\r\n base,\r\n quote,\r\n };\r\n}\r\n\r\n/**\r\n * Returns two vertical coordinates, buyBaseVert on the left and sellBaseVert on the right.\r\n * @param param0\r\n */\r\nexport function computeBaseVert({\r\n midPrice,\r\n q,\r\n q0,\r\n pmmModel,\r\n}: {\r\n midPrice: BigNumber;\r\n q: number;\r\n q0: number;\r\n pmmModel: PMMModel;\r\n}) {\r\n let baseVert = BigNumber.maximum(q, q0, pmmModel.B.multipliedBy(midPrice));\r\n // Special handling to avoid exceptions\r\n if (baseVert.isNaN()) {\r\n baseVert = new BigNumber(10);\r\n }\r\n if (baseVert.eq(0)) {\r\n baseVert = new BigNumber(1);\r\n }\r\n return {\r\n buyBaseVert: baseVert.multipliedBy(1.2),\r\n sellBaseVert: baseVert.div(midPrice).multipliedBy(1.2),\r\n };\r\n}\r\n\r\n/**\r\n * // 1000/800 The price represented by one pixel\r\n // Maximum value on the right side of the middle price = middle price * 10 = middle price * 10^1\r\n // Calculate the x-axis coordinate (price): middle price*10^(xPortion*x)+middle price; x is the number of equal parts that divide the right half into 50 parts\r\n * @param chartWidth icon width\r\n * @param zoomMultiples magnification factors\r\n * @returns\r\n */\r\nexport function computeXPortion(chartWidth: number, zoomMultiples = 1) {\r\n return new BigNumber(zoomMultiples).div(chartWidth / 2);\r\n}\r\n\r\nexport function updateTooltip({\r\n tooltip,\r\n x,\r\n chartWidth,\r\n chartHeight,\r\n buyBaseVert,\r\n sellBaseVert,\r\n pmmModel,\r\n midPrice,\r\n baseTokenSymbol,\r\n quoteTokenSymbol,\r\n t,\r\n baseMinAndZoomMultiples,\r\n isHover,\r\n color,\r\n leftColor,\r\n rightColor,\r\n}: {\r\n x: number;\r\n tooltip: Konva.Layer;\r\n chartWidth: number;\r\n chartHeight: number;\r\n buyBaseVert: BigNumber;\r\n sellBaseVert: BigNumber;\r\n pmmModel: PMMModel;\r\n midPrice: BigNumber;\r\n baseTokenSymbol: string;\r\n quoteTokenSymbol: string;\r\n t: any;\r\n baseMinAndZoomMultiples: BaseMinAndZoomMultiples;\r\n // The middle price is only displayed when hovering\r\n isHover?: boolean;\r\n // text color\r\n color?: string;\r\n // main color of base\r\n leftColor?: string;\r\n // main color of quote\r\n rightColor?: string;\r\n}) {\r\n const { zoomMultiples, baseMin } = baseMinAndZoomMultiples;\r\n const xPortion = computeXPortion(chartWidth, zoomMultiples);\r\n const buyYPortion = buyBaseVert.div(chartHeight);\r\n const sellYPortion = sellBaseVert.div(chartHeight);\r\n\r\n const multiplesNum = zoomMultiples * 2;\r\n\r\n const price = baseMin.multipliedBy(10 ** xPortion.multipliedBy(x).toNumber());\r\n let midPriceN = new BigNumber(\r\n Math.log(midPrice.div(baseMin).toNumber()) / Math.log(10),\r\n );\r\n midPriceN = BigNumber.minimum(multiplesNum, midPriceN);\r\n midPriceN = BigNumber.maximum(0, midPriceN);\r\n const xMidPrice = midPriceN.div(xPortion);\r\n const result = evalPoint({ val: price, model: pmmModel, midPrice });\r\n if (result.vert.isNaN()) {\r\n return;\r\n }\r\n\r\n const isQuote = price.lt(midPrice);\r\n\r\n let yy = chartHeight - result.vert.div(buyYPortion).toNumber();\r\n if (!isQuote) {\r\n yy = chartHeight - result.vert.div(sellYPortion).toNumber();\r\n }\r\n\r\n const priceText = formatShortNumber(price);\r\n const amountText = formatShortNumber(result.vert);\r\n const slippageText = price\r\n .minus(midPrice)\r\n .abs()\r\n .div(midPrice)\r\n .multipliedBy(100)\r\n .toFixed(2);\r\n const xMidPriceText = xMidPrice.toNumber();\r\n\r\n const toolTipVertLine = tooltip.findOne<Konva.Line>('#toolTipVertLine');\r\n const toolTipHoriLine = tooltip.findOne<Konva.Line>('#toolTipHoriLine');\r\n const joinCircle = tooltip.findOne<Konva.Line>('#joinCircle');\r\n const tooltipLabel = tooltip.findOne<Konva.Label>('#toolTip');\r\n const priceTextLabel = tooltip.findOne<Konva.Label>('#priceTextLabel');\r\n const slippageTextLabel = tooltip.findOne<Konva.Label>('#slippageTextLabel');\r\n\r\n if (!tooltipLabel) {\r\n return;\r\n }\r\n\r\n tooltipLabel.x(x);\r\n // yy + radius of intersection circle + border of intersection circle\r\n tooltipLabel.y(yy - 5 - 6);\r\n const toolTipText = tooltipLabel.getText();\r\n const toolTipTag = tooltipLabel.getTag();\r\n let oppositeAmountText =\r\n result.side === 'ask'\r\n ? formatShortNumber(result.quote)\r\n : formatShortNumber(result.base);\r\n const isZeroK = pmmModel.k.lte(0);\r\n if (isZeroK) {\r\n oppositeAmountText = amountText;\r\n }\r\n const midPriceText = formatShortNumber(midPrice);\r\n const tipTextParams = {\r\n amountText,\r\n baseTokenSymbol,\r\n oppositeAmountText,\r\n quoteTokenSymbol,\r\n priceText: isZeroK ? midPriceText : priceText,\r\n slippageText: `${isQuote ? '-' : '+'}${slippageText}`,\r\n };\r\n if (xMidPrice.minus(4).lte(x) && xMidPrice.plus(2).gte(x) && isHover) {\r\n // midPrice hover\r\n toolTipText.text(\r\n t('depth-chart.tips.mid-price', {\r\n amountText: 1,\r\n baseTokenSymbol,\r\n oppositeAmountText: midPriceText,\r\n quoteTokenSymbol,\r\n }),\r\n );\r\n tooltipLabel.x(xMidPriceText);\r\n tooltipLabel.y(chartHeight / 2);\r\n\r\n toolTipVertLine?.hide();\r\n toolTipHoriLine?.hide();\r\n joinCircle?.hide();\r\n priceTextLabel?.hide();\r\n slippageTextLabel?.hide();\r\n } else {\r\n toolTipText.text(\r\n isQuote\r\n ? t('depth-chart.tips.buy', {\r\n amountText: oppositeAmountText,\r\n baseTokenSymbol,\r\n oppositeAmountText: amountText,\r\n quoteTokenSymbol,\r\n priceText: isZeroK ? midPriceText : priceText,\r\n slippageText: `${isQuote ? '-' : '+'}${slippageText}`,\r\n })\r\n : t('depth-chart.tips.sell', tipTextParams),\r\n );\r\n const textColor = color || (isQuote ? '#55f6db' : '#ff4f73');\r\n const lineColor = isQuote\r\n ? leftColor || '#55f6db'\r\n : rightColor || '#ff4f73';\r\n toolTipText.fill(textColor);\r\n\r\n if (tooltipLabel.width() / 2 > x) {\r\n toolTipTag.pointerDirection('left');\r\n toolTipTag.pointerHeight(15);\r\n toolTipTag.pointerWidth(8);\r\n tooltipLabel.offsetX(-(5 + 6));\r\n tooltipLabel.offsetY(-(5 + 6));\r\n } else if (tooltipLabel.width() / 2 + x > chartWidth) {\r\n toolTipTag.pointerDirection('right');\r\n toolTipTag.pointerHeight(15);\r\n toolTipTag.pointerWidth(8);\r\n tooltipLabel.offsetX(5 + 6);\r\n tooltipLabel.offsetY(-(5 + 6));\r\n } else {\r\n // @ts-ignore\r\n toolTipTag.pointerDirection('down');\r\n toolTipTag.pointerHeight(8);\r\n toolTipTag.pointerWidth(15);\r\n tooltipLabel.offsetX(0);\r\n tooltipLabel.offsetY(0);\r\n }\r\n\r\n toolTipVertLine?.points([x, chartHeight, x, yy]);\r\n toolTipVertLine?.stroke(lineColor);\r\n\r\n toolTipHoriLine?.points(\r\n isQuote ? [x, yy, xMidPriceText, yy] : [xMidPriceText, yy, x, yy],\r\n );\r\n toolTipHoriLine?.stroke(lineColor);\r\n\r\n joinCircle?.x(x);\r\n joinCircle?.y(yy);\r\n joinCircle?.fill(\r\n isQuote ? leftColor || 'rgb(86, 246, 218)' : rightColor || '#FF5072',\r\n );\r\n joinCircle?.stroke(\r\n // eslint-disable-next-line no-nested-ternary\r\n isQuote\r\n ? leftColor\r\n ? `rgba(${colorRgb(leftColor)}, 0.4)`\r\n : 'rgba(86, 246, 218, 0.3)'\r\n : rightColor\r\n ? `rgba(${colorRgb(rightColor)}, 0.4)`\r\n : 'rgba(255, 80, 114, 0.3)',\r\n );\r\n\r\n if (priceTextLabel) {\r\n priceTextLabel.x(x);\r\n priceTextLabel.y(chartHeight);\r\n priceTextLabel.offsetX(priceTextLabel.width() / 2);\r\n if (priceTextLabel.x() - priceTextLabel.width() / 2 < 0) {\r\n priceTextLabel.x(priceTextLabel.width() / 2);\r\n } else if (priceTextLabel.x() + priceTextLabel.width() / 2 > chartWidth) {\r\n priceTextLabel.x(chartWidth - priceTextLabel.width() / 2);\r\n } else {\r\n priceTextLabel.x(x);\r\n }\r\n }\r\n\r\n const priceTextLabelText = priceTextLabel?.findOne<Konva.Text>(\r\n '#priceTextLabel-text',\r\n );\r\n if (priceTextLabelText) {\r\n priceTextLabelText.fill(textColor);\r\n priceTextLabelText.text(priceText);\r\n }\r\n\r\n if (slippageTextLabel) {\r\n slippageTextLabel.x(\r\n isQuote ? x + (xMidPriceText - x) / 2 : x - (x - xMidPriceText) / 2,\r\n );\r\n slippageTextLabel.y(yy);\r\n slippageTextLabel.offsetY(slippageTextLabel.height() / 2);\r\n slippageTextLabel.offsetX(slippageTextLabel.width() / 2);\r\n }\r\n const slippageTextLabelText = slippageTextLabel?.findOne<Konva.Text>(\r\n '#slippageTextLabel-text',\r\n );\r\n if (slippageTextLabelText) {\r\n slippageTextLabelText.fill(textColor);\r\n slippageTextLabelText.text(`${isQuote ? '-' : '+'}${slippageText}%`);\r\n }\r\n\r\n toolTipVertLine?.show();\r\n toolTipHoriLine?.show();\r\n joinCircle?.show();\r\n priceTextLabel?.show();\r\n slippageTextLabel?.show();\r\n }\r\n\r\n tooltip.show();\r\n}\r\n\r\n/**\r\n * Calculate the minimum value on the left by pulling distance or button click\r\n */\r\nexport function computeBaseMinByDistance({\r\n dragDistance,\r\n prevBaseMin,\r\n chartWidth,\r\n zoomMultiples,\r\n}: {\r\n dragDistance: number;\r\n prevBaseMin: BigNumber;\r\n chartWidth: number;\r\n zoomMultiples: number;\r\n}) {\r\n const xPortion = computeXPortion(chartWidth, zoomMultiples);\r\n if (dragDistance > 0) {\r\n return prevBaseMin.multipliedBy(\r\n 10 ** 0 - xPortion.multipliedBy(dragDistance).toNumber(),\r\n );\r\n }\r\n return prevBaseMin.multipliedBy(\r\n 10 **\r\n xPortion\r\n .multipliedBy(new BigNumber(dragDistance).abs())\r\n .plus(0)\r\n .toNumber(),\r\n );\r\n}\r\n\r\nexport const baseZoomMultiples = 1;\r\nexport function computeZoomMultiplesWhenZoom({\r\n prevZoomMultiples,\r\n zoomIn,\r\n}: {\r\n prevZoomMultiples: number;\r\n zoomIn: boolean;\r\n}) {\r\n if (!zoomIn) {\r\n if (prevZoomMultiples <= baseZoomMultiples * 0.1) {\r\n return prevZoomMultiples;\r\n }\r\n // The reduction ratio cannot exceed 0.001\r\n // if (prevZoomMultiples <= baseZoomMultiples * 0.1) {\r\n // if (prevZoomMultiples <= baseZoomMultiples * 0.01) {\r\n // if (prevZoomMultiples === baseZoomMultiples * 0.001) {\r\n // return prevZoomMultiples;\r\n // }\r\n // return prevZoomMultiples - baseZoomMultiples * 0.001;\r\n // }\r\n // return prevZoomMultiples - baseZoomMultiples * 0.01;\r\n // }\r\n }\r\n return zoomIn\r\n ? prevZoomMultiples + baseZoomMultiples * 0.1\r\n : prevZoomMultiples - baseZoomMultiples * 0.1;\r\n}\r\n\r\n/**\r\n * Given a price target corresponding to the abscissa, calculate the abscissa of the point\r\n * The buying impact point is at the left 1/4 position\r\n * The selling impact point is 3/4 on the right\r\n *\r\n * Returns a coordinate point, baseMin and zoomMultiples\r\n *\r\n * Take the initial state as the starting point, that is, midPrice * 10 ^ -1 as the starting point of the horizontal axis, and it is a left-right symmetrical state, that is, the logarithm of the horizontal axis is from -1 -> 0 -> 1\r\n *\r\n * type === 'sell'\r\n * targetPrice = midPrice * 10 ^ n\r\n * n = Math.log10(targetPrice / midPrice)\r\n * n = maxN * (3 / 4)\r\n *\r\n * If the new price is within the existing range, the zoom factor will not be adjusted (the price impact will not change the shape of the graph after graph scaling or translation)\r\n * If it is not within the current interval, check whether it is midPrice * 10 ^-1 and midPrice * 10^1. If you still do not adjust the zoom factor, hit the specified point directly, otherwise you need to adjust the zoom factor (avoid inputting extremely small values) The value cannot be scaled to the specified range, resulting in stuck)\r\n */\r\nexport function computeTargetXByTargetPrice({\r\n type,\r\n targetPrice,\r\n midPrice,\r\n width,\r\n}: {\r\n type: 'buy' | 'sell';\r\n targetPrice: BigNumber;\r\n midPrice: BigNumber;\r\n width: number;\r\n}) {\r\n if (type === 'sell') {\r\n const n = new BigNumber(Math.log10(targetPrice.div(midPrice).toNumber()));\r\n const maxN = n\r\n .minus(0)\r\n .div(3 / 4)\r\n .abs();\r\n const zoomMultiples = maxN;\r\n\r\n return {\r\n zoomMultiples,\r\n targetX: (width / 2) * (3 / 4) + width / 2,\r\n };\r\n }\r\n\r\n const n = new BigNumber(Math.log10(targetPrice.div(midPrice).toNumber()));\r\n const maxN = new BigNumber(0)\r\n .minus(n)\r\n .div(3 / 4)\r\n .abs();\r\n const zoomMultiples = maxN;\r\n\r\n return {\r\n zoomMultiples,\r\n targetX: (width / 2) * (1 / 4),\r\n };\r\n}\r\n\r\n/**\r\n * If the new price is within the existing range, the zoom factor will not be adjusted (the price impact will not change the shape of the graph after graph scaling or translation)\r\n * If it is not within the current interval, check whether it is midPrice * 10 ^-1 and midPrice * 10^1. If it is within the range, adjust the zoom factor to 1, and then impact to the specified point, otherwise you need to adjust the zoom factor ( Avoid entering extremely small values ​​that may result in inability to scale to the specified range and cause stucks)\r\n *\r\n * Returns an abscissa and a flag indicating whether to skip\r\n */\r\nexport function beforePriceImpactEffect({\r\n currentBaseMinAndZoomMultiples,\r\n targetPrice,\r\n midPrice,\r\n width,\r\n}: {\r\n currentBaseMinAndZoomMultiples: BaseMinAndZoomMultiples;\r\n targetPrice: BigNumber;\r\n midPrice: BigNumber;\r\n width: number;\r\n}) {\r\n const { baseMin, zoomMultiples } = currentBaseMinAndZoomMultiples;\r\n const minN = new BigNumber(Math.log10(baseMin.div(midPrice).toNumber()));\r\n const maxN = minN.plus(zoomMultiples * 2);\r\n // price maximum\r\n const baseMax = new BigNumber(midPrice.multipliedBy(10 ** maxN.toNumber()));\r\n\r\n if (targetPrice.gte(baseMin) && targetPrice.lte(baseMax)) {\r\n const n = new BigNumber(Math.log10(targetPrice.div(midPrice).toNumber()));\r\n const targetX = n\r\n .minus(minN)\r\n .div(zoomMultiples * 2)\r\n .multipliedBy(width)\r\n .toNumber();\r\n return {\r\n isSkip: true,\r\n targetX,\r\n baseMin: new BigNumber(0),\r\n zoomMultiples: baseZoomMultiples,\r\n };\r\n }\r\n\r\n // 是否在 midPrice 范围内\r\n const defaultBaseMin = new BigNumber(\r\n midPrice.multipliedBy(10 ** -baseZoomMultiples),\r\n );\r\n const defaultBaseMax = new BigNumber(\r\n midPrice.multipliedBy(10 ** baseZoomMultiples),\r\n );\r\n if (targetPrice.gte(defaultBaseMin) && targetPrice.lte(defaultBaseMax)) {\r\n const n = new BigNumber(Math.log10(targetPrice.div(midPrice).toNumber()));\r\n const targetX = n\r\n .minus(-baseZoomMultiples)\r\n .div(baseZoomMultiples * 2)\r\n .multipliedBy(width)\r\n .toNumber();\r\n return {\r\n isSkip: false,\r\n targetX,\r\n baseMin: defaultBaseMin,\r\n zoomMultiples: baseZoomMultiples,\r\n };\r\n }\r\n\r\n return {\r\n isSkip: false,\r\n targetX: -1,\r\n baseMin: new BigNumber(0),\r\n zoomMultiples: baseZoomMultiples,\r\n };\r\n}\r\n\r\n/**\r\n * Recalculate baseMin after the zoom factor changes\r\n */\r\nexport function computeBaseAfterZoom({\r\n midPrice,\r\n zoomMultiples,\r\n}: {\r\n midPrice: BigNumber;\r\n zoomMultiples: number;\r\n}) {\r\n return midPrice.multipliedBy(10 ** -zoomMultiples);\r\n}\r\n","export const labelPadding = 12;\n// The distance between toolTip and the top of the column\nexport const toolTipMarginBottom = 6;\n\n// Since toolTip exceeds part of the drawing area, additional padding is required\nexport const chartOffsetYBCToolTip = labelPadding + toolTipMarginBottom;\n","import { t } from '@lingui/macro';\n\n// \\{\\{([A-Za-z]+)\\}\\} to ${params.$1}\nexport function chartT(key: string, params: any) {\n switch (key) {\n case 'depth-chart.tips.buy':\n return t`Users pay ${params.amountText} ${params.baseTokenSymbol} and receive ${params.oppositeAmountText} ${params.quoteTokenSymbol}\\nPrice ${params.priceText} (${params.slippageText}%)`;\n case 'depth-chart.tips.mid-price':\n return t`Initial Price ${params.amountText} ${params.baseTokenSymbol} = ${params.oppositeAmountText} ${params.quoteTokenSymbol}`;\n case 'depth-chart.tips.sell':\n return t`Users pay ${params.oppositeAmountText} ${params.quoteTokenSymbol} and receive ${params.amountText} ${params.baseTokenSymbol}\\nPrice ${params.priceText} (${params.slippageText}%)`;\n case 'pool.chart.buy-amount':\n return t`Users sell ${params.symbol} amount: `;\n case 'pool.chart.price-impact':\n return t`Price Impact: ${params.amount}`;\n case 'pool.chart.sell-amount':\n return t`Users buy ${params.symbol} amount: `;\n case 'pool.create.disabled-token-amount':\n return t`The token amount is calculated by initial price.`;\n case 'pool.create.set-pool.emulator.title':\n return t`Emulator`;\n case 'pool.create.set-pool.emulator.title.question':\n return t`The liquidity of DODO is continuous, which is different from the discrete liquidity of UniV3. The ticks shown in the illustration are for demonstration purposes only.`;\n\n // liquidity-chart\n case 'pool.chart.liquidity-chart-tip':\n return t`The area of the chart indicates the buy/sell volume of ${params.baseTokenSymbol} that can be carried by the market when the current price changes to the hover price. `;\n case 'pool.chart.liquidity-chart-buy':\n return t`Bought ${params.amount} ${params.symbol}, price in the pool decreased to ${params.price}`;\n case 'pool.chart.liquidity-chart-sell':\n return t`Traders sold ‪${params.amount}‬ ${params.symbol}, price in the pool increased to ${params.price}`;\n default:\n throw new Error(`Unknown key ${key}`);\n }\n}\n"],"names":["colorRgb","str","sColor","toLowerCase","test","length","sColorNew","i","slice","concat","sColorChange","push","parseInt","join","evalPoint","val","model","v","isNaN","side","vert","BigNumber","base","quote","Q0","eq","lt","B0","gt","resp","getPriceDepth","baseAmount","quoteAmount","isBuy","computeXPortion","chartWidth","zoomMultiples","div","currentBaseMinAndZoomMultiples","targetPrice","midPrice","width","baseMin","minN","Math","log10","toNumber","maxN","plus","baseMax","multipliedBy","gte","lte","isSkip","targetX","minus","defaultBaseMin","defaultBaseMax","baseZoomMultiples","labelPadding","key","params","_i18n","_","id","message","values","0","amountText","1","baseTokenSymbol","2","oppositeAmountText","3","quoteTokenSymbol","4","priceText","5","slippageText","symbol","amount","price","Error","dragDistance","prevBaseMin","xPortion","abs","q","q0","pmmModel","baseVert","maximum","B","buyBaseVert","sellBaseVert","type","n","prevZoomMultiples","zoomIn","tooltip","x","chartHeight","t","baseMinAndZoomMultiples","isHover","color","leftColor","rightColor","buyYPortion","sellYPortion","multiplesNum","midPriceN","log","minimum","xMidPrice","result","isQuote","yy","formatShortNumber","toFixed","xMidPriceText","toolTipVertLine","findOne","toolTipHoriLine","joinCircle","tooltipLabel","priceTextLabel","slippageTextLabel","y","toolTipText","getText","toolTipTag","getTag","isZeroK","k","midPriceText","tipTextParams","text","hide","textColor","lineColor","fill","pointerDirection","pointerHeight","pointerWidth","offsetX","offsetY","points","stroke","priceTextLabelText","height","slippageTextLabelText","show"],"mappings":"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"}
package/dist/{index-ByglKzOD.cjs → index-C4eoTHGK.cjs} RENAMED
@@ -1,4 +1,4 @@
1
- "use strict";var e=require("@emotion/styled"),t=require("lodash"),i=require("react"),r=require("./helper-J2-Ga54j.cjs"),n=require("react-konva"),o=require("./index-DITTntm-.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/utc"),require("dayjs/plugin/duration"),require("dayjs/plugin/localizedFormat"),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`
1
+ "use strict";var e=require("@emotion/styled"),t=require("lodash"),i=require("react"),r=require("./helper-DvQmJ4S9.cjs"),n=require("react-konva"),o=require("./index-ofxslEBg.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/utc"),require("dayjs/plugin/duration"),require("dayjs/plugin/localizedFormat"),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`
2
2
  height: 100%;
3
3
  position: relative;
4
4
  `,d=e.div`
@@ -10,3 +10,4 @@
10
10
  line-height: 17px;
11
11
  font-weight: 400;
12
12
  `;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})]})]});
13
+ //# sourceMappingURL=index-C4eoTHGK.cjs.map
package/dist/index-C4eoTHGK.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index-C4eoTHGK.cjs","sources":["../src/components/chart/liquidity-chart/index.styled.tsx","../src/components/chart/liquidity-chart/helper.ts","../src/components/chart/liquidity-chart/LiquidityChartKonva.tsx","../src/components/chart/liquidity-chart/usePoints.ts","../src/components/chart/liquidity-chart/useGridLine.tsx","../src/components/chart/liquidity-chart/useHorizontalLabel.tsx","../src/components/chart/liquidity-chart/useMiddleLine.tsx","../src/components/chart/liquidity-chart/useLiquidityLine.tsx","../src/components/chart/liquidity-chart/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\r\n\r\nexport const Container = styled.div`\r\n height: 100%;\r\n position: relative;\r\n`;\r\nexport const TipWrapper = styled.div`\r\n text-align: center;\r\n margin-top: 17.1px;\r\n margin-bottom: 88.41px;\r\n color: #606066;\r\n font-size: 12px;\r\n line-height: 17px;\r\n font-weight: 400;\r\n`;\r\n","import BigNumber from 'bignumber.js';\r\nimport { StatAreaPoint } from './usePoints';\r\n\r\n// The space reserved at the top\r\nconst topEmptyHeight = 36;\r\n\r\nexport function computePointYByHeight({\r\n maxHeight,\r\n gridAreaHeight,\r\n value,\r\n}: {\r\n maxHeight: BigNumber;\r\n gridAreaHeight: number;\r\n value: BigNumber;\r\n}) {\r\n const height = new BigNumber(gridAreaHeight).minus(topEmptyHeight);\r\n const onePXY = height.div(maxHeight);\r\n const y = height.minus(value.multipliedBy(onePXY)).plus(topEmptyHeight);\r\n return y.toNumber();\r\n}\r\n\r\nexport function computeHeightByPointY({\r\n maxY,\r\n gridAreaHeight,\r\n y,\r\n}: {\r\n maxY: BigNumber;\r\n gridAreaHeight: number;\r\n y: number;\r\n}) {\r\n const height = new BigNumber(gridAreaHeight).minus(topEmptyHeight);\r\n const onePXY = height.div(maxY);\r\n const h = height.minus(new BigNumber(y).minus(topEmptyHeight)).div(onePXY);\r\n return h;\r\n}\r\n\r\n/**\r\n * Obtain the closest data point from the data point collection through the coordinate point x and a series of point data subsets from the point to the center line.\r\n */\r\nexport function getStatAreaPointByX({\r\n targetPrice,\r\n areaPoints,\r\n isLeft,\r\n}: {\r\n targetPrice: BigNumber;\r\n areaPoints: StatAreaPoint[];\r\n isLeft: boolean;\r\n}): {\r\n targetAreaStatPoint: StatAreaPoint | null;\r\n targetAreaStatPoints: StatAreaPoint[];\r\n} {\r\n for (let index = 0; index < areaPoints.length; index++) {\r\n const point = areaPoints[index];\r\n\r\n const nextPoint =\r\n index < areaPoints.length - 1 ? areaPoints[index + 1] : null;\r\n\r\n if (!nextPoint) {\r\n return { targetAreaStatPoint: point, targetAreaStatPoints: areaPoints };\r\n }\r\n\r\n if (isLeft) {\r\n if (\r\n targetPrice.lte(point.middlePrice) &&\r\n targetPrice.gte(nextPoint.middlePrice)\r\n ) {\r\n return {\r\n targetAreaStatPoint: point,\r\n targetAreaStatPoints: areaPoints.slice(0, index + 1),\r\n };\r\n }\r\n } else if (\r\n targetPrice.gte(point.middlePrice) &&\r\n targetPrice.lte(nextPoint.middlePrice)\r\n ) {\r\n return {\r\n targetAreaStatPoint: point,\r\n targetAreaStatPoints: areaPoints.slice(0, index + 1),\r\n };\r\n }\r\n }\r\n\r\n return { targetAreaStatPoint: null, targetAreaStatPoints: [] };\r\n}\r\n\r\n/**\r\n * Given a pixel's x-coordinate, width, logarithm of the minimum value of the abscissa, and logarithm of the maximum value of the abscissa, calculate the logarithmic coordinate corresponding to the point\r\n */\r\nexport function computeTargetPrice({\r\n x,\r\n width,\r\n minXLN10,\r\n maxXLN10,\r\n}: {\r\n x: number;\r\n width: number;\r\n minXLN10: BigNumber;\r\n maxXLN10: BigNumber;\r\n}) {\r\n const xLN10 = new BigNumber(x)\r\n .div(width)\r\n .multipliedBy(maxXLN10.minus(minXLN10));\r\n const power = xLN10.plus(minXLN10);\r\n return new BigNumber(10 ** power.toNumber());\r\n}\r\n\r\n/**\r\n * Given the logarithm of a coordinate, the width, the logarithm of the minimum value of the abscissa, and the logarithm of the maximum value of the abscissa, calculate the x coordinate corresponding to the point\r\n */\r\nexport function computeTargetX({\r\n width,\r\n targetLN10,\r\n minXLN10,\r\n maxXLN10,\r\n}: {\r\n width: number;\r\n targetLN10: BigNumber;\r\n minXLN10: BigNumber;\r\n maxXLN10: BigNumber;\r\n}) {\r\n return targetLN10\r\n .minus(minXLN10)\r\n .div(maxXLN10.minus(minXLN10))\r\n .multipliedBy(width)\r\n .toNumber();\r\n}\r\n\r\n/**\r\n * Calculate logarithm\r\n */\r\nexport function computeTargetLN({ target }: { target: BigNumber }) {\r\n return new BigNumber(Math.log10(target.toNumber()));\r\n}\r\n","import { PMMModel, PmmModelParams } from '@dodoex/api';\r\nimport BigNumber from 'bignumber.js';\r\nimport Konva from 'konva';\r\nimport { KonvaEventObject } from 'konva/lib/Node';\r\nimport { merge } from 'lodash';\r\nimport { useRef } from 'react';\r\nimport { chartT as t } from '../i18n';\r\nimport {\r\n Circle,\r\n Label,\r\n Layer,\r\n Line,\r\n Rect,\r\n Stage,\r\n Tag,\r\n Text,\r\n} from 'react-konva';\r\nimport { formatShortNumber } from '../../../utils/formatter';\r\nimport { colorRgb } from '../depth-chart/helper';\r\nimport { labelPadding } from '../utils';\r\nimport {\r\n computePointYByHeight,\r\n computeTargetLN,\r\n computeTargetPrice,\r\n computeTargetX,\r\n getStatAreaPointByX,\r\n} from './helper';\r\nimport { useGridLine } from './useGridLine';\r\nimport { useHorizontalLabel } from './useHorizontalLabel';\r\nimport { useLiquidityLine } from './useLiquidityLine';\r\nimport { useMiddleLine } from './useMiddleLine';\r\nimport { StatAreaPoint, usePoints } from './usePoints';\r\n\r\nexport const bgColor = 'rgba(38, 39, 41, 0.3)';\r\n\r\nexport interface ColorMap {\r\n grid?: string;\r\n midPriceLine?: string;\r\n leftBg?: (string | number)[];\r\n leftLine?: string;\r\n leftColor?: string;\r\n rightBg?: (string | number)[];\r\n rightLine?: string;\r\n rightColor?: string;\r\n tooltipBg?: string;\r\n tooltipColor?: string;\r\n textColor?: string;\r\n}\r\n\r\nexport type Props = {\r\n width: number;\r\n height: number;\r\n params: PmmModelParams;\r\n midPrice: BigNumber;\r\n pmmModel: PMMModel;\r\n baseTokenSymbol: string;\r\n quoteTokenSymbol: string;\r\n colorMap?: ColorMap;\r\n};\r\n\r\nexport function LiquidityChartKonva({\r\n width,\r\n height,\r\n params,\r\n baseTokenSymbol,\r\n quoteTokenSymbol,\r\n colorMap,\r\n}: Props) {\r\n const {\r\n maxLeftHeight,\r\n maxRightHeight,\r\n leftStatAreaPoints,\r\n rightStatAreaPoints,\r\n minXLN10,\r\n maxXLN10,\r\n } = usePoints({\r\n params,\r\n });\r\n\r\n const xAxisLabelHeight = 30.13;\r\n const gridAreaHeight = height - xAxisLabelHeight;\r\n const horizontalLineCount = 9;\r\n // The number of vertical grid lines or the number of horizontal axis scales\r\n const verticalLineCount = 7;\r\n\r\n const tooltipRef = useRef<Konva.Layer>(null);\r\n\r\n const colorMapRes = merge(\r\n {\r\n grid: '#2A2A2D',\r\n midPriceLine: '#313335',\r\n leftBg: [0, bgColor, 1, '#31645d'],\r\n leftLine: '#55f6db',\r\n leftColor: '',\r\n rightBg: [0, bgColor, 1, '#67303d'],\r\n rightLine: '#ff4f73',\r\n rightColor: '',\r\n tooltipBg: '#121212',\r\n tooltipColor: undefined,\r\n textColor: '#606066',\r\n },\r\n colorMap,\r\n );\r\n\r\n const handleMouseover = (evt: KonvaEventObject<MouseEvent>) => {\r\n const { current: tooltip } = tooltipRef;\r\n const node = evt.target;\r\n if (node && tooltip) {\r\n // update tooltip\r\n const mousePos = node.getStage()?.getPointerPosition();\r\n if (mousePos) {\r\n const { x } = mousePos;\r\n const middleX = width / 2;\r\n if (Math.abs(x - middleX) <= 2) {\r\n return;\r\n }\r\n if (x <= 2 || width - x <= 2) {\r\n return;\r\n }\r\n const targetPrice = computeTargetPrice({\r\n x,\r\n width,\r\n minXLN10,\r\n maxXLN10,\r\n });\r\n\r\n let targetAreaStatPoint: StatAreaPoint | null = null;\r\n let targetAreaStatPoints: Array<StatAreaPoint> = [];\r\n const isLeft = x < middleX;\r\n if (isLeft) {\r\n const result = getStatAreaPointByX({\r\n areaPoints: leftStatAreaPoints,\r\n targetPrice,\r\n isLeft,\r\n });\r\n targetAreaStatPoint = result.targetAreaStatPoint;\r\n targetAreaStatPoints = result.targetAreaStatPoints;\r\n } else {\r\n const result = getStatAreaPointByX({\r\n areaPoints: rightStatAreaPoints,\r\n targetPrice,\r\n isLeft,\r\n });\r\n targetAreaStatPoint = result.targetAreaStatPoint;\r\n targetAreaStatPoints = result.targetAreaStatPoints;\r\n }\r\n if (targetAreaStatPoint) {\r\n const targetLN10 = computeTargetLN({\r\n target: targetAreaStatPoint.middlePrice,\r\n });\r\n const targetAreaPointX = computeTargetX({\r\n minXLN10,\r\n maxXLN10,\r\n width,\r\n targetLN10,\r\n });\r\n const targetAreaPointY = computePointYByHeight({\r\n maxHeight: isLeft ? maxLeftHeight : maxRightHeight,\r\n gridAreaHeight,\r\n value: targetAreaStatPoint.rectangleHeight,\r\n });\r\n const tooltipLabel = tooltip.findOne<Konva.Label>('#tooltip');\r\n const toolTipVertLine =\r\n tooltip.findOne<Konva.Line>('#toolTipVertLine');\r\n const joinCircle = tooltip.findOne<Konva.Line>('#joinCircle');\r\n const tooltipText = tooltip.findOne<Konva.Text>('#tooltip-Text');\r\n const tooltipTag = tooltip.findOne<Konva.Tag>('#tooltip-tag');\r\n const priceTextLabel =\r\n tooltip.findOne<Konva.Label>('#priceTextLabel');\r\n const priceTextLabelText = priceTextLabel?.findOne<Konva.Text>(\r\n '#priceTextLabel-text',\r\n );\r\n const area = tooltip.findOne<Konva.Line>('#area');\r\n\r\n tooltipLabel?.position({\r\n x: targetAreaPointX,\r\n y: targetAreaPointY - 5 - 6,\r\n });\r\n\r\n tooltipText?.fill(\r\n colorMapRes.tooltipColor || (isLeft ? '#00FAD9' : '#FF5072'),\r\n );\r\n tooltipText?.text(\r\n isLeft\r\n ? t('pool.chart.liquidity-chart-buy', {\r\n amount: formatShortNumber(targetAreaStatPoint.area),\r\n symbol: baseTokenSymbol,\r\n price: formatShortNumber(targetAreaStatPoint.price),\r\n })\r\n : t('pool.chart.liquidity-chart-sell', {\r\n amount: formatShortNumber(targetAreaStatPoint.area),\r\n symbol: quoteTokenSymbol,\r\n price: formatShortNumber(targetAreaStatPoint.price),\r\n }),\r\n );\r\n\r\n if (tooltipLabel && tooltipTag) {\r\n if (tooltipLabel.width() / 2 > x) {\r\n tooltipTag.pointerDirection('left');\r\n tooltipTag.pointerHeight(15);\r\n tooltipTag.pointerWidth(8);\r\n tooltipLabel.offsetX(-(5 + 6));\r\n tooltipLabel.offsetY(-(5 + 6));\r\n } else if (tooltipLabel.width() / 2 + x > width) {\r\n tooltipTag.pointerDirection('right');\r\n tooltipTag.pointerHeight(15);\r\n tooltipTag.pointerWidth(8);\r\n tooltipLabel.offsetX(5 + 6);\r\n tooltipLabel.offsetY(-(5 + 6));\r\n } else {\r\n // @ts-ignore\r\n tooltipTag.pointerDirection('down');\r\n tooltipTag.pointerHeight(8);\r\n tooltipTag.pointerWidth(15);\r\n tooltipLabel.offsetX(0);\r\n tooltipLabel.offsetY(0);\r\n }\r\n }\r\n\r\n toolTipVertLine?.points([\r\n targetAreaPointX,\r\n gridAreaHeight,\r\n targetAreaPointX,\r\n targetAreaPointY,\r\n ]);\r\n toolTipVertLine?.stroke(isLeft ? '#55f6db' : '#ff4f73');\r\n\r\n let joinFill = isLeft ? 'rgb(86, 246, 218)' : '#FF5072';\r\n let joinStroke = isLeft\r\n ? 'rgba(86, 246, 218, 0.3)'\r\n : 'rgba(255, 80, 114, 0.3)';\r\n if (colorMapRes.leftLine && colorMapRes.rightLine) {\r\n joinFill = isLeft ? colorMapRes.leftLine : colorMapRes.rightLine;\r\n joinStroke = isLeft\r\n ? `rgba(${colorRgb(colorMapRes.leftLine)}, 0.4)`\r\n : `rgba(${colorRgb(colorMapRes.rightLine)}, 0.4)`;\r\n }\r\n if (joinCircle) {\r\n joinCircle.x(targetAreaPointX);\r\n joinCircle.y(targetAreaPointY);\r\n joinCircle.fill(joinFill);\r\n joinCircle.stroke(joinStroke);\r\n }\r\n\r\n if (priceTextLabel) {\r\n priceTextLabel.x(targetAreaPointX);\r\n priceTextLabel.y(gridAreaHeight + 8.08 + 1);\r\n priceTextLabel.offsetX(priceTextLabel.width() / 2);\r\n if (priceTextLabel.x() - priceTextLabel.width() / 2 < 0) {\r\n priceTextLabel.x(priceTextLabel.width() / 2);\r\n } else if (\r\n priceTextLabel.x() + priceTextLabel.width() / 2 >\r\n width\r\n ) {\r\n priceTextLabel.x(width - priceTextLabel.width() / 2);\r\n } else {\r\n priceTextLabel.x(x);\r\n }\r\n }\r\n\r\n if (priceTextLabelText) {\r\n priceTextLabelText.fill(\r\n colorMapRes.tooltipColor || (isLeft ? '#00FAD9' : '#FF5072'),\r\n );\r\n priceTextLabelText.text(\r\n formatShortNumber(targetAreaStatPoint.price),\r\n );\r\n }\r\n\r\n // Gradient colored dots\r\n const points: Array<number> = [];\r\n for (const statPoint of targetAreaStatPoints) {\r\n const { middlePrice, rectangleHeight } = statPoint;\r\n const targetLN10Gradient = computeTargetLN({ target: middlePrice });\r\n const xGradient = computeTargetX({\r\n minXLN10,\r\n maxXLN10,\r\n width,\r\n targetLN10: targetLN10Gradient,\r\n });\r\n const y = computePointYByHeight({\r\n maxHeight: isLeft ? maxLeftHeight : maxRightHeight,\r\n gridAreaHeight,\r\n value: rectangleHeight,\r\n });\r\n points.push(xGradient, y + 1);\r\n }\r\n const linearGradientPoints = points.slice();\r\n const [firstPointX, firstPointY] = linearGradientPoints;\r\n if (isLeft) {\r\n linearGradientPoints.push(targetAreaPointX, targetAreaPointY);\r\n linearGradientPoints.push(targetAreaPointX, gridAreaHeight);\r\n linearGradientPoints.push(firstPointX, gridAreaHeight);\r\n linearGradientPoints.push(firstPointX, firstPointY);\r\n } else {\r\n linearGradientPoints.unshift(firstPointX, gridAreaHeight);\r\n linearGradientPoints.unshift(targetAreaPointX, gridAreaHeight);\r\n linearGradientPoints.unshift(targetAreaPointX, targetAreaPointY);\r\n }\r\n if (area) {\r\n area.points(linearGradientPoints);\r\n area.fill(\r\n isLeft\r\n ? colorMapRes.leftLine || '#2c5b56'\r\n : colorMapRes.rightLine || '#7b3a48',\r\n );\r\n }\r\n\r\n tooltip.show();\r\n }\r\n }\r\n }\r\n };\r\n\r\n const handleMouseOut = () => {\r\n const { current: tooltip } = tooltipRef;\r\n if (tooltip) {\r\n tooltip.hide();\r\n }\r\n };\r\n\r\n const gridLine = useGridLine({\r\n gridAreaHeight,\r\n gridAreaWidth: width,\r\n horizontalLineCount,\r\n verticalLineCount,\r\n color: colorMapRes.grid,\r\n });\r\n const horizontalLabel = useHorizontalLabel({\r\n gridAreaHeight,\r\n gridAreaWidth: width,\r\n labelCount: verticalLineCount,\r\n minXLN10,\r\n maxXLN10,\r\n color: colorMapRes.textColor,\r\n });\r\n const middleLine = useMiddleLine({\r\n gridAreaHeight,\r\n gridAreaWidth: width,\r\n color: colorMapRes.midPriceLine,\r\n });\r\n const { leftLine, rightLine } = useLiquidityLine({\r\n leftStatAreaPoints,\r\n rightStatAreaPoints,\r\n minXLN10,\r\n maxXLN10,\r\n maxLeftHeight,\r\n maxRightHeight,\r\n gridAreaWidth: width,\r\n gridAreaHeight,\r\n colorMap: colorMapRes,\r\n });\r\n\r\n return (\r\n <Stage\r\n width={width}\r\n height={height}\r\n onMouseMove={handleMouseover}\r\n onMouseOver={handleMouseover}\r\n onMouseEnter={handleMouseover}\r\n onMouseOut={handleMouseOut}\r\n >\r\n <Layer>\r\n <Rect\r\n x={0}\r\n y={0}\r\n width={width}\r\n height={gridAreaHeight}\r\n stroke={colorMapRes.grid}\r\n strokeWidth={1}\r\n />\r\n\r\n {gridLine}\r\n\r\n {horizontalLabel}\r\n\r\n {leftLine}\r\n\r\n {rightLine}\r\n\r\n {middleLine}\r\n </Layer>\r\n\r\n <Layer ref={tooltipRef} visible={false}>\r\n <Line\r\n points={[]}\r\n closed\r\n listening={false}\r\n lineCap=\"round\"\r\n lineJoin=\"round\"\r\n id=\"area\"\r\n />\r\n\r\n <Line\r\n points={[]}\r\n strokeWidth={1}\r\n stroke=\"#ff4f73\"\r\n lineJoin=\"round\"\r\n lineCap=\"round\"\r\n dash={[4, 6]}\r\n id=\"toolTipVertLine\"\r\n />\r\n <Circle\r\n x={0}\r\n y={0}\r\n radius={5}\r\n fill=\"#FF5072\"\r\n stroke=\"rgba(255, 80, 114, 0.3)\"\r\n strokeWidth={12}\r\n id=\"joinCircle\"\r\n />\r\n <Label listening={false} x={0} y={0} id=\"priceTextLabel\">\r\n <Tag fill={colorMapRes.tooltipBg} id=\"priceTextLabel-tag\" />\r\n <Text\r\n text=\"-\"\r\n fontSize={14}\r\n fontFamily=\"Manrope\"\r\n padding={2}\r\n fill=\"#FF5072\"\r\n id=\"priceTextLabel-text\"\r\n />\r\n </Label>\r\n\r\n <Label listening={false} id=\"tooltip\">\r\n <Tag\r\n fill={colorMapRes.tooltipBg}\r\n pointerDirection=\"down\"\r\n pointerWidth={15}\r\n pointerHeight={8}\r\n cornerRadius={8}\r\n lineJoin=\"round\"\r\n id=\"tooltip-tag\"\r\n />\r\n <Text\r\n text=\"\"\r\n fontFamily=\"Manrope\"\r\n fontSize={12}\r\n lineHeight={17 / 12}\r\n // width={210}\r\n padding={labelPadding}\r\n fill=\"#FF5072\"\r\n id=\"tooltip-Text\"\r\n />\r\n </Label>\r\n </Layer>\r\n </Stage>\r\n );\r\n}\r\n","import {\r\n PMMHelper,\r\n PmmModelParams,\r\n PMMState as PMMStateFromSDK,\r\n solveQuadraticFunctionForTarget,\r\n} from '@dodoex/api';\r\n\r\nimport BigNumber from 'bignumber.js';\r\nimport { useMemo } from 'react';\r\n\r\n/**\r\n * data point\r\n */\r\n\r\nexport type StatPoint = {\r\n giveAmount: BigNumber;\r\n getAmount: BigNumber;\r\n price: BigNumber;\r\n};\r\n\r\n/**\r\n * Drawing method:\r\n Substitute the minimum value to get the height of the center point, which is the bottom edge of the area chart. Substitute the maximum value to get the vertex of the area chart. The length of the bottom edge from the vertex is the price range.\r\n\r\n Divide the total area into one hundred equal parts. Calculate each part on the basis of the previous part. Substitute the new area into the formula to get a new price. The difference from the previous price is the width of the rectangle. The area is divided by The width is the height of the rectangle, which is the ordinate.\r\n\r\n First, calculate a series of points as a point set based on the rectangular accumulation method.\r\n\r\n When the mouse hovers, the abscissa is the price. Find the closest price in the point set. Use this price as the end point and the center line as the starting point to get a subset of the point set. You can draw a line by combining the center line and the abscissa. The area of ​​the trapezoid can be drawn.\r\n\r\n Update: Taking Δl as the ordinate, Δl = (the difference between the quantity passed in from the previous point and the next point) * (the difference between the quantity obtained from the previous point and the next point)\r\n */\r\nexport type StatAreaPoint = {\r\n area: BigNumber;\r\n price: BigNumber;\r\n // The midpoint between the current price and the previous price is used as the abscissa\r\n middlePrice: BigNumber;\r\n rectangleHeight: BigNumber;\r\n};\r\n\r\nexport function usePoints({ params }: { params: PmmModelParams }) {\r\n return useMemo(() => {\r\n const b = new BigNumber(params.b);\r\n const q = new BigNumber(params.q);\r\n let b0 = new BigNumber(params.b0);\r\n const q0 = new BigNumber(params.q0);\r\n const i = new BigNumber(params.i);\r\n const K = new BigNumber(params.k);\r\n const { R } = params;\r\n\r\n // When created, b0 is equal to b, and a b0 needs to be calculated.\r\n if (R === 1 && b0.eq(b)) {\r\n b0 = solveQuadraticFunctionForTarget(\r\n b,\r\n q.minus(q0),\r\n new BigNumber(1).div(i),\r\n K,\r\n );\r\n }\r\n\r\n const pmmState = new PMMStateFromSDK({\r\n i,\r\n K,\r\n B: b,\r\n Q: q,\r\n B0: b0,\r\n Q0: q0,\r\n R,\r\n mtFeeRate: new BigNumber(0),\r\n lpFeeRate: new BigNumber(0),\r\n });\r\n\r\n const pmm = new PMMHelper();\r\n const B = new BigNumber(pmmState.B);\r\n // const Q = new BigNumber(pmmState.Q);\r\n\r\n // A collection of data points, mapped into points on the graph through equal width and height proportions\r\n const leftStatPoints: StatPoint[] = [];\r\n const rightStatPoints: StatPoint[] = [];\r\n let maxLeftHeight = new BigNumber(0);\r\n let maxRightHeight = new BigNumber(0);\r\n\r\n const midPrice = pmm.GetMidPrice(pmmState);\r\n const portion = q.gt(0) ? b.div(q) : new BigNumber(1);\r\n // console.log('v2 midPrice', midPrice.toString(), portion.toString());\r\n\r\n for (let index = 0; index <= 250; index++) {\r\n let giveAmount = B.multipliedBy(index / 100).multipliedBy(\r\n midPrice.multipliedBy(portion).multipliedBy(4),\r\n );\r\n // let giveAmount = B.multipliedBy(index / 100).multipliedBy(4);\r\n // let giveAmount = B.multipliedBy(index / 100);\r\n if (index === 0) {\r\n giveAmount = B.multipliedBy(1 / 100000000000);\r\n }\r\n // sellBase needs to pass in the number of quotes and gets the number of bases\r\n const getAmount = pmm?.QuerySellBase(giveAmount, pmmState);\r\n // console.log('v2 QuerySellBase', giveAmount.toString(), getAmount.toString());\r\n\r\n if (!getAmount.isNaN() && getAmount.gt(0)) {\r\n // Price on the left\r\n const price = getAmount.div(giveAmount);\r\n leftStatPoints.push({\r\n giveAmount,\r\n getAmount,\r\n price,\r\n });\r\n continue;\r\n }\r\n leftStatPoints.push({\r\n giveAmount,\r\n getAmount: new BigNumber(0),\r\n price: new BigNumber(0),\r\n });\r\n }\r\n\r\n for (let index = 0; index <= 250; index++) {\r\n let giveAmount = B.multipliedBy(index / 100).multipliedBy(\r\n midPrice.multipliedBy(4),\r\n );\r\n // let giveAmount = B.multipliedBy(index / 100);\r\n if (index === 0) {\r\n giveAmount = B.multipliedBy(1 / 100000000000);\r\n }\r\n // sellQuote needs to pass in the number of bases and get the number of quotes\r\n const getAmount = pmm?.QuerySellQuote(giveAmount, pmmState);\r\n // console.log('v2 QuerySellQuote', giveAmount.toString(), getAmount.toString());\r\n\r\n if (!getAmount.isNaN() && getAmount.gt(0)) {\r\n // Price on the right\r\n const price = giveAmount.dividedBy(getAmount);\r\n rightStatPoints.push({\r\n giveAmount,\r\n getAmount,\r\n price,\r\n });\r\n continue;\r\n }\r\n rightStatPoints.push({\r\n giveAmount,\r\n getAmount: new BigNumber(0),\r\n price: new BigNumber(0),\r\n });\r\n }\r\n\r\n if (leftStatPoints.length < 2 && rightStatPoints.length < 2) {\r\n return {\r\n leftStatAreaPoints: [],\r\n rightStatAreaPoints: [],\r\n maxLeftHeight: new BigNumber(10).multipliedBy(1.2),\r\n maxRightHeight: new BigNumber(10).multipliedBy(1.2),\r\n middlePriceLN10: new BigNumber(0),\r\n minXLN10: new BigNumber(-1),\r\n maxXLN10: new BigNumber(1),\r\n };\r\n }\r\n\r\n // The data points are divided into two groups on the left and right, and the width and height corresponding to the area are calculated.\r\n const leftStatAreaPoints: StatAreaPoint[] = [];\r\n for (let index = 1; index < leftStatPoints.length; index++) {\r\n const statPoint = leftStatPoints[index];\r\n const { giveAmount, getAmount, price } = statPoint;\r\n\r\n const lastStatPoint = leftStatPoints[index - 1];\r\n\r\n if (!price.isNaN() && price.gt(0) && lastStatPoint) {\r\n const priceChange = price.minus(lastStatPoint.price).abs();\r\n const giveAmountChange = giveAmount\r\n .minus(lastStatPoint.giveAmount)\r\n .abs();\r\n const getAmountChange = getAmount.minus(lastStatPoint.getAmount).abs();\r\n const leftRectangleHeight =\r\n getAmountChange.multipliedBy(giveAmountChange);\r\n\r\n if (index === 1) {\r\n leftStatAreaPoints.push({\r\n area: getAmount,\r\n price,\r\n middlePrice: price.plus(priceChange.div(1.1)),\r\n rectangleHeight: leftRectangleHeight.plus(\r\n leftRectangleHeight.multipliedBy(0.03),\r\n ),\r\n });\r\n }\r\n leftStatAreaPoints.push({\r\n area: getAmount,\r\n price,\r\n middlePrice: price.plus(priceChange.div(2)),\r\n rectangleHeight: leftRectangleHeight,\r\n });\r\n\r\n maxLeftHeight = BigNumber.max(leftRectangleHeight, maxLeftHeight);\r\n }\r\n }\r\n\r\n const rightStatAreaPoints: StatAreaPoint[] = [];\r\n for (let index = 1; index < rightStatPoints.length; index++) {\r\n const statPoint = rightStatPoints[index];\r\n const { giveAmount, getAmount, price } = statPoint;\r\n\r\n const lastStatPoint = rightStatPoints[index - 1];\r\n const lastPrice = lastStatPoint.price;\r\n const lastGiveAmount = lastStatPoint.giveAmount;\r\n const lastGetAmount = lastStatPoint.getAmount;\r\n\r\n if (!price.isNaN() && price.gt(0) && lastStatPoint) {\r\n const priceChange = price.minus(lastPrice).abs();\r\n const giveAmountChange = giveAmount.minus(lastGiveAmount).abs();\r\n const getAmountChange = getAmount.minus(lastGetAmount).abs();\r\n const rightRectangleHeight =\r\n getAmountChange.multipliedBy(giveAmountChange);\r\n\r\n if (index === 1) {\r\n rightStatAreaPoints.push({\r\n area: getAmount,\r\n price,\r\n middlePrice: price.minus(priceChange.div(1.1)),\r\n rectangleHeight: rightRectangleHeight.plus(\r\n rightRectangleHeight.multipliedBy(0.03),\r\n ),\r\n });\r\n }\r\n\r\n rightStatAreaPoints.push({\r\n area: getAmount,\r\n price,\r\n middlePrice: price.minus(priceChange.div(2)),\r\n rectangleHeight: rightRectangleHeight,\r\n });\r\n\r\n maxRightHeight = BigNumber.max(rightRectangleHeight, maxRightHeight);\r\n }\r\n }\r\n\r\n // Intuitively, the data points on the left are distributed from the middle to the left, and the data points on the right are distributed from the middle to the right.\r\n // Left starting point\r\n const leftStartStatPoint =\r\n leftStatPoints.length > 0\r\n ? leftStatPoints[leftStatPoints.length - 1]\r\n : rightStatPoints[0];\r\n // midpoint\r\n const middleStatPoint =\r\n rightStatPoints.length > 0 ? rightStatPoints[0] : leftStatPoints[0];\r\n // Right end point\r\n const rightEndStatPoint =\r\n rightStatPoints.length > 0\r\n ? rightStatPoints[rightStatPoints.length - 1]\r\n : leftStatPoints[0];\r\n\r\n const minX = leftStartStatPoint.price;\r\n const maxX = rightEndStatPoint.price;\r\n const middlePrice = middleStatPoint.price;\r\n const middlePriceLN10 = new BigNumber(Math.log10(middlePrice.toNumber()));\r\n // Center the graphic\r\n let minXLN10 = minX.gt(0)\r\n ? new BigNumber(Math.log10(minX.toNumber()))\r\n : new BigNumber(-Math.log10(maxX.toNumber()));\r\n let maxXLN10 = maxX.gt(0)\r\n ? new BigNumber(Math.log10(maxX.toNumber()))\r\n : new BigNumber(-Math.log10(minX.toNumber()));\r\n const rangeLN10 = BigNumber.max(\r\n middlePriceLN10.minus(minXLN10).abs(),\r\n maxXLN10.minus(middlePriceLN10).abs(),\r\n );\r\n minXLN10 = middlePriceLN10.minus(rangeLN10);\r\n maxXLN10 = middlePriceLN10.plus(rangeLN10);\r\n // console.log('v2 price', {\r\n // // middlePrice: middlePrice.toString(),\r\n // minX: minX.toString(),\r\n // // maxX: maxX.toString(),\r\n // middlePriceLN10: middlePriceLN10.toString(),\r\n // minXLN10: minXLN10.toString(),\r\n // maxXLN10: maxXLN10.toString(),\r\n // });\r\n\r\n return {\r\n leftStatAreaPoints,\r\n rightStatAreaPoints,\r\n maxLeftHeight: maxLeftHeight.multipliedBy(1.2),\r\n maxRightHeight: maxRightHeight.multipliedBy(1.2),\r\n minXLN10,\r\n maxXLN10,\r\n middlePriceLN10,\r\n };\r\n }, [params]);\r\n}\r\n","import { useMemo } from 'react';\r\nimport { Line } from 'react-konva';\r\n\r\nexport function useGridLine({\r\n gridAreaHeight,\r\n gridAreaWidth,\r\n horizontalLineCount,\r\n verticalLineCount,\r\n color = '#2A2A2D',\r\n}: {\r\n gridAreaHeight: number;\r\n gridAreaWidth: number;\r\n horizontalLineCount: number;\r\n verticalLineCount: number;\r\n color?: string;\r\n}) {\r\n return useMemo(() => {\r\n const horizontalGridLines: Array<Array<number>> = [];\r\n const horizontalGridPerBlockHeight =\r\n gridAreaHeight / (horizontalLineCount + 1);\r\n const verticalGridLines: Array<Array<number>> = [];\r\n const verticalGridPerBlockHeight = gridAreaWidth / (verticalLineCount + 1);\r\n for (let index = 0; index < horizontalLineCount; index++) {\r\n const y = horizontalGridPerBlockHeight * (index + 1);\r\n horizontalGridLines.push([0, y, gridAreaWidth, y]);\r\n }\r\n for (let index = 0; index < verticalLineCount; index++) {\r\n const x = verticalGridPerBlockHeight * (index + 1);\r\n verticalGridLines.push([x, 0, x, gridAreaHeight]);\r\n }\r\n return (\r\n <>\r\n {horizontalGridLines.map((points, index) => (\r\n <Line\r\n key={index}\r\n points={points}\r\n stroke={color}\r\n strokeWidth={1}\r\n lineCap=\"round\"\r\n lineJoin=\"round\"\r\n tension={1}\r\n listening={false}\r\n />\r\n ))}\r\n {verticalGridLines.map((points, index) => (\r\n <Line\r\n key={index}\r\n points={points}\r\n stroke={color}\r\n strokeWidth={1}\r\n lineCap=\"round\"\r\n lineJoin=\"round\"\r\n tension={1}\r\n listening={false}\r\n />\r\n ))}\r\n </>\r\n );\r\n }, [\r\n gridAreaHeight,\r\n gridAreaWidth,\r\n horizontalLineCount,\r\n verticalLineCount,\r\n color,\r\n ]);\r\n}\r\n","import BigNumber from 'bignumber.js';\r\nimport { useMemo } from 'react';\r\nimport { Line, Text } from 'react-konva';\r\nimport { formatShortNumber } from '../../../utils/formatter';\r\nimport { computeTargetPrice } from './helper';\r\n\r\nexport function useHorizontalLabel({\r\n minXLN10,\r\n maxXLN10,\r\n labelCount,\r\n gridAreaHeight,\r\n gridAreaWidth,\r\n color = '#606066',\r\n}: {\r\n minXLN10: BigNumber;\r\n maxXLN10: BigNumber;\r\n labelCount: number;\r\n gridAreaHeight: number;\r\n gridAreaWidth: number;\r\n color?: string;\r\n}) {\r\n return useMemo(() => {\r\n const labelWidth = gridAreaWidth / (labelCount + 1);\r\n const labelTextList: Array<{\r\n x: number;\r\n y: number;\r\n text: string;\r\n }> = [];\r\n const labelLines: Array<Array<number>> = [];\r\n for (let index = 0; index < labelCount; index++) {\r\n const x = labelWidth / 2 + labelWidth * index;\r\n labelTextList.push({\r\n x,\r\n y: gridAreaHeight + 10.08 + 1,\r\n text: formatShortNumber(\r\n computeTargetPrice({\r\n x: labelWidth * (index + 1),\r\n width: gridAreaWidth,\r\n minXLN10,\r\n maxXLN10,\r\n }),\r\n ),\r\n });\r\n\r\n const lineX = labelWidth * (index + 1);\r\n labelLines.push([\r\n lineX,\r\n gridAreaHeight + 1,\r\n lineX,\r\n gridAreaHeight + 4 + 1,\r\n ]);\r\n }\r\n return (\r\n <>\r\n {labelTextList.map((labelText, index) => (\r\n <Text\r\n key={index}\r\n x={labelText.x}\r\n y={labelText.y}\r\n text={labelText.text}\r\n fontSize={14}\r\n fontFamily=\"Manrope\"\r\n fill={color}\r\n width={labelWidth}\r\n padding={0}\r\n align=\"center\"\r\n verticalAlign=\"bottom\"\r\n listening={false}\r\n />\r\n ))}\r\n\r\n {labelLines.map((points, index) => (\r\n <Line\r\n key={index}\r\n points={points}\r\n stroke={color}\r\n strokeWidth={1}\r\n lineCap=\"butt\"\r\n lineJoin=\"miter\"\r\n tension={1}\r\n listening={false}\r\n />\r\n ))}\r\n </>\r\n );\r\n }, [minXLN10, maxXLN10, gridAreaHeight, gridAreaWidth, labelCount]);\r\n}\r\n","import { useMemo } from 'react';\r\nimport { Line } from 'react-konva';\r\n\r\nexport function useMiddleLine({\r\n gridAreaHeight,\r\n gridAreaWidth,\r\n color = '#606066',\r\n}: {\r\n gridAreaHeight: number;\r\n gridAreaWidth: number;\r\n color?: string;\r\n}) {\r\n return useMemo(() => {\r\n const topPointX = gridAreaWidth / 2;\r\n return (\r\n <Line\r\n points={[topPointX, 0, topPointX, gridAreaHeight - 1]}\r\n stroke={color}\r\n strokeWidth={1}\r\n lineCap=\"round\"\r\n lineJoin=\"round\"\r\n tension={1}\r\n listening={false}\r\n />\r\n );\r\n }, [gridAreaHeight, gridAreaWidth, color]);\r\n}\r\n","import BigNumber from 'bignumber.js';\r\nimport { useMemo } from 'react';\r\nimport { Line } from 'react-konva';\r\nimport {\r\n computePointYByHeight,\r\n computeTargetLN,\r\n computeTargetX,\r\n} from './helper';\r\nimport { ColorMap } from './LiquidityChartKonva';\r\nimport { StatAreaPoint } from './usePoints';\r\n\r\nexport function useLiquidityLine({\r\n leftStatAreaPoints,\r\n rightStatAreaPoints,\r\n minXLN10,\r\n maxXLN10,\r\n maxLeftHeight,\r\n maxRightHeight,\r\n gridAreaWidth,\r\n gridAreaHeight,\r\n colorMap,\r\n}: {\r\n leftStatAreaPoints: Array<StatAreaPoint>;\r\n rightStatAreaPoints: Array<StatAreaPoint>;\r\n minXLN10: BigNumber;\r\n maxXLN10: BigNumber;\r\n maxLeftHeight: BigNumber;\r\n maxRightHeight: BigNumber;\r\n gridAreaWidth: number;\r\n gridAreaHeight: number;\r\n colorMap: ColorMap;\r\n}) {\r\n const leftLine = useMemo(() => {\r\n if (leftStatAreaPoints.length < 1) {\r\n return <></>;\r\n }\r\n const points: Array<number> = [];\r\n let minPointY = gridAreaHeight;\r\n for (const statPoint of leftStatAreaPoints) {\r\n const { middlePrice, rectangleHeight } = statPoint;\r\n const targetLN10 = computeTargetLN({ target: middlePrice });\r\n const x = computeTargetX({\r\n minXLN10,\r\n maxXLN10,\r\n width: gridAreaWidth,\r\n targetLN10,\r\n });\r\n const y = computePointYByHeight({\r\n maxHeight: maxLeftHeight,\r\n gridAreaHeight,\r\n value: rectangleHeight,\r\n });\r\n points.push(x, y);\r\n if (y < minPointY) {\r\n minPointY = y;\r\n }\r\n }\r\n\r\n // Gradient color points: from center to left\r\n const linearGradientPoints = points.slice();\r\n const [rightEndPointX, rightEndPointY] = linearGradientPoints;\r\n const leftStartPointY =\r\n linearGradientPoints[linearGradientPoints.length - 1];\r\n const leftStartPointX =\r\n linearGradientPoints[linearGradientPoints.length - 2];\r\n linearGradientPoints.push(leftStartPointX, leftStartPointY);\r\n linearGradientPoints.push(leftStartPointX, gridAreaHeight);\r\n linearGradientPoints.push(rightEndPointX, gridAreaHeight);\r\n linearGradientPoints.push(rightEndPointX, rightEndPointY);\r\n return (\r\n <>\r\n <Line\r\n points={linearGradientPoints}\r\n closed\r\n listening={false}\r\n lineCap=\"round\"\r\n lineJoin=\"round\"\r\n fillLinearGradientStartPoint={{ x: 0, y: gridAreaHeight }}\r\n fillLinearGradientEndPoint={{ x: 0, y: minPointY }}\r\n fillLinearGradientColorStops={colorMap.leftBg}\r\n />\r\n <Line\r\n points={points}\r\n stroke={colorMap.leftLine}\r\n strokeWidth={2}\r\n lineCap=\"round\"\r\n lineJoin=\"round\"\r\n listening={false}\r\n />\r\n </>\r\n );\r\n }, [\r\n leftStatAreaPoints,\r\n gridAreaWidth,\r\n minXLN10,\r\n maxXLN10,\r\n gridAreaHeight,\r\n maxLeftHeight,\r\n ]);\r\n\r\n const rightLine = useMemo(() => {\r\n if (rightStatAreaPoints.length < 1) {\r\n return <></>;\r\n }\r\n const points: Array<number> = [];\r\n let minPointY = gridAreaHeight;\r\n for (const statPoint of rightStatAreaPoints) {\r\n const { middlePrice, rectangleHeight } = statPoint;\r\n const targetLN10 = computeTargetLN({ target: middlePrice });\r\n const x = computeTargetX({\r\n minXLN10,\r\n maxXLN10,\r\n width: gridAreaWidth,\r\n targetLN10,\r\n });\r\n const y = computePointYByHeight({\r\n maxHeight: maxRightHeight,\r\n gridAreaHeight,\r\n value: rectangleHeight,\r\n });\r\n points.push(x, y);\r\n if (y < minPointY) {\r\n minPointY = y;\r\n }\r\n }\r\n // Gradient colored dots\r\n const linearGradientPoints = points.slice();\r\n const [firstPointX] = linearGradientPoints;\r\n linearGradientPoints.unshift(firstPointX, gridAreaHeight);\r\n linearGradientPoints.unshift(gridAreaWidth, gridAreaHeight);\r\n return (\r\n <>\r\n <Line\r\n points={linearGradientPoints}\r\n closed\r\n listening={false}\r\n lineCap=\"round\"\r\n lineJoin=\"round\"\r\n fillLinearGradientStartPoint={{ x: 0, y: gridAreaHeight }}\r\n fillLinearGradientEndPoint={{ x: 0, y: minPointY }}\r\n fillLinearGradientColorStops={colorMap.rightBg}\r\n />\r\n <Line\r\n points={points}\r\n stroke={colorMap.rightLine}\r\n strokeWidth={2}\r\n lineCap=\"round\"\r\n lineJoin=\"round\"\r\n listening={false}\r\n />\r\n </>\r\n );\r\n }, [\r\n rightStatAreaPoints,\r\n gridAreaWidth,\r\n minXLN10,\r\n maxXLN10,\r\n gridAreaHeight,\r\n maxRightHeight,\r\n ]);\r\n\r\n return {\r\n leftLine,\r\n rightLine,\r\n };\r\n}\r\n","import { PMMModel, PmmModelParams } from '@dodoex/api';\r\nimport BigNumber from 'bignumber.js';\r\nimport { Container, TipWrapper } from './index.styled';\r\nimport { ColorMap, LiquidityChartKonva } from './LiquidityChartKonva';\r\nimport { chartT as t } from '../i18n';\r\n\r\ntype Props = {\r\n width?: number;\r\n height?: number;\r\n baseTokenSymbol: string;\r\n quoteTokenSymbol: string;\r\n pmmModel?: PMMModel;\r\n pmmParams?: PmmModelParams;\r\n midPrice?: BigNumber;\r\n notShowTipText?: boolean;\r\n colorMap?: ColorMap;\r\n};\r\n\r\nconst LiquidityChart: React.FC<Props> = ({\r\n width = 834,\r\n height = 462,\r\n baseTokenSymbol,\r\n quoteTokenSymbol,\r\n pmmModel,\r\n pmmParams,\r\n midPrice,\r\n notShowTipText,\r\n colorMap,\r\n}: Props) => {\r\n return (\r\n <Container>\r\n {pmmParams !== undefined &&\r\n midPrice !== undefined &&\r\n pmmModel !== undefined &&\r\n midPrice !== undefined && (\r\n <LiquidityChartKonva\r\n width={width}\r\n height={height}\r\n params={pmmParams}\r\n midPrice={midPrice}\r\n pmmModel={pmmModel}\r\n baseTokenSymbol={baseTokenSymbol}\r\n quoteTokenSymbol={quoteTokenSymbol}\r\n colorMap={colorMap}\r\n />\r\n )}\r\n\r\n {!notShowTipText ? (\r\n <TipWrapper>\r\n *&nbsp;\r\n {t('pool.chart.liquidity-chart-tip', {\r\n baseTokenSymbol,\r\n })}\r\n </TipWrapper>\r\n ) : (\r\n ''\r\n )}\r\n </Container>\r\n );\r\n};\r\n\r\nexport default LiquidityChart;\r\n"],"names":["Container","styled","div","TipWrapper","computePointYByHeight","maxHeight","gridAreaHeight","value","height","BigNumber","minus","onePXY","multipliedBy","plus","toNumber","getStatAreaPointByX","targetPrice","areaPoints","isLeft","index","length","point","nextPoint","targetAreaStatPoint","targetAreaStatPoints","lte","middlePrice","gte","slice","computeTargetPrice","x","width","minXLN10","maxXLN10","power","computeTargetX","targetLN10","computeTargetLN","target","Math","log10","bgColor","LiquidityChartKonva","params","baseTokenSymbol","quoteTokenSymbol","colorMap","maxLeftHeight","maxRightHeight","leftStatAreaPoints","rightStatAreaPoints","useMemo","b","q","b0","q0","i","K","k","R","eq","solveQuadraticFunctionForTarget","pmmState","PMMStateFromSDK","B","Q","B0","Q0","mtFeeRate","lpFeeRate","pmm","PMMHelper","leftStatPoints","rightStatPoints","midPrice","GetMidPrice","portion","gt","giveAmount","getAmount","QuerySellBase","isNaN","price","push","QuerySellQuote","dividedBy","middlePriceLN10","statPoint","lastStatPoint","priceChange","abs","giveAmountChange","leftRectangleHeight","area","rectangleHeight","max","lastPrice","lastGiveAmount","lastGetAmount","rightRectangleHeight","leftStartStatPoint","middleStatPoint","rightEndStatPoint","minX","maxX","rangeLN10","usePoints","tooltipRef","useRef","colorMapRes","merge","grid","midPriceLine","leftBg","leftLine","leftColor","rightBg","rightLine","rightColor","tooltipBg","tooltipColor","undefined","textColor","handleMouseover","evt","current","tooltip","node","mousePos","_a","getStage","getPointerPosition","middleX","result","targetAreaPointX","targetAreaPointY","tooltipLabel","findOne","toolTipVertLine","joinCircle","tooltipText","tooltipTag","priceTextLabel","priceTextLabelText","position","y","fill","text","t","amount","formatShortNumber","symbol","pointerDirection","pointerHeight","pointerWidth","offsetX","offsetY","points","stroke","joinFill","joinStroke","colorRgb","targetLN10Gradient","xGradient","linearGradientPoints","firstPointX","firstPointY","unshift","show","gridLine","gridAreaWidth","horizontalLineCount","verticalLineCount","color","horizontalGridLines","horizontalGridPerBlockHeight","verticalGridLines","verticalGridPerBlockHeight","_jsxs","_Fragment","children","map","_jsx","Line","strokeWidth","lineCap","lineJoin","tension","listening","useGridLine","horizontalLabel","labelCount","labelWidth","labelTextList","labelLines","lineX","labelText","Text","fontSize","fontFamily","padding","align","verticalAlign","useHorizontalLabel","middleLine","topPointX","useMiddleLine","minPointY","rightEndPointX","rightEndPointY","leftStartPointY","leftStartPointX","closed","fillLinearGradientStartPoint","fillLinearGradientEndPoint","fillLinearGradientColorStops","useLiquidityLine","Stage","onMouseMove","onMouseOver","onMouseEnter","onMouseOut","handleMouseOut","hide","Layer","Rect","ref","visible","id","dash","Circle","radius","Label","Tag","cornerRadius","lineHeight","labelPadding","LiquidityChart","pmmModel","pmmParams","notShowTipText"],"mappings":"61CAEO,MAAMA,EAAYC,EAAOC,GAAG;;;EAItBC,EAAaF,EAAOC,GAAG;;;;;;;;ECA9B,SAAUE,GAAsBC,UACpCA,EAASC,eACTA,EAAcC,MACdA,IAMA,MAAMC,EAAS,IAAIC,EAAUH,GAAgBI,MAXxB,IAYfC,EAASH,EAAON,IAAIG,GAE1B,OADUG,EAAOE,MAAMH,EAAMK,aAAaD,IAASE,KAb9B,IAcZC,UACX,CAoBM,SAAUC,GAAoBC,YAClCA,EAAWC,WACXA,EAAUC,OACVA,IASA,IAAK,IAAIC,EAAQ,EAAGA,EAAQF,EAAWG,OAAQD,IAAS,CACtD,MAAME,EAAQJ,EAAWE,GAEnBG,EACJH,EAAQF,EAAWG,OAAS,EAAIH,EAAWE,EAAQ,GAAK,KAE1D,IAAKG,EACH,MAAO,CAAEC,oBAAqBF,EAAOG,qBAAsBP,GAG7D,GAAIC,GACF,GACEF,EAAYS,IAAIJ,EAAMK,cACtBV,EAAYW,IAAIL,EAAUI,aAE1B,MAAO,CACLH,oBAAqBF,EACrBG,qBAAsBP,EAAWW,MAAM,EAAGT,EAAQ,SAGjD,GACLH,EAAYW,IAAIN,EAAMK,cACtBV,EAAYS,IAAIH,EAAUI,aAE1B,MAAO,CACLH,oBAAqBF,EACrBG,qBAAsBP,EAAWW,MAAM,EAAGT,EAAQ,GAGxD,CAEA,MAAO,CAAEI,oBAAqB,KAAMC,qBAAsB,GAC5D,CAKM,SAAUK,GAAmBC,EACjCA,EAACC,MACDA,EAAKC,SACLA,EAAQC,SACRA,IAOA,MAGMC,EAHQ,IAAIzB,EAAUqB,GACzB5B,IAAI6B,GACJnB,aAAaqB,EAASvB,MAAMsB,IACXnB,KAAKmB,GACzB,OAAO,IAAIvB,EAAU,IAAMyB,EAAMpB,WACnC,CAKM,SAAUqB,GAAeJ,MAC7BA,EAAKK,WACLA,EAAUJ,SACVA,EAAQC,SACRA,IAOA,OAAOG,EACJ1B,MAAMsB,GACN9B,IAAI+B,EAASvB,MAAMsB,IACnBpB,aAAamB,GACbjB,UACL,CAKM,SAAUuB,GAAgBC,OAAEA,IAChC,OAAO,IAAI7B,EAAU8B,KAAKC,MAAMF,EAAOxB,YACzC,CCnGO,MAAM2B,EAAU,wBA2BjB,SAAUC,GAAoBX,MAClCA,EAAKvB,OACLA,EAAMmC,OACNA,EAAMC,gBACNA,EAAeC,iBACfA,EAAgBC,SAChBA,IAEA,MAAMC,cACJA,EAAaC,eACbA,EAAcC,mBACdA,EAAkBC,oBAClBA,EAAmBlB,SACnBA,EAAQC,SACRA,GClCE,UAAoBU,OAAEA,IAC1B,OAAOQ,EAAAA,QAAQ,KACb,MAAMC,EAAI,IAAI3C,EAAUkC,EAAOS,GACzBC,EAAI,IAAI5C,EAAUkC,EAAOU,GAC/B,IAAIC,EAAK,IAAI7C,EAAUkC,EAAOW,IAC9B,MAAMC,EAAK,IAAI9C,EAAUkC,EAAOY,IAC1BC,EAAI,IAAI/C,EAAUkC,EAAOa,GACzBC,EAAI,IAAIhD,EAAUkC,EAAOe,IACzBC,EAAEA,GAAMhB,EAGJ,IAANgB,GAAWL,EAAGM,GAAGR,KACnBE,EAAKO,EAAAA,gCACHT,EACAC,EAAE3C,MAAM6C,GACR,IAAI9C,EAAU,GAAGP,IAAIsD,GACrBC,IAIJ,MAAMK,EAAW,IAAIC,WAAgB,CACnCP,IACAC,IACAO,EAAGZ,EACHa,EAAGZ,EACHa,GAAIZ,EACJa,GAAIZ,EACJI,IACAS,UAAW,IAAI3D,EAAU,GACzB4D,UAAW,IAAI5D,EAAU,KAGrB6D,EAAM,IAAIC,YACVP,EAAI,IAAIvD,EAAUqD,EAASE,GAI3BQ,EAA8B,GAC9BC,EAA+B,GACrC,IAAI1B,EAAgB,IAAItC,EAAU,GAC9BuC,EAAiB,IAAIvC,EAAU,GAEnC,MAAMiE,EAAWJ,EAAIK,YAAYb,GAC3Bc,EAAUvB,EAAEwB,GAAG,GAAKzB,EAAElD,IAAImD,GAAK,IAAI5C,EAAU,GAGnD,IAAK,IAAIU,EAAQ,EAAGA,GAAS,IAAKA,IAAS,CACzC,IAAI2D,EAAad,EAAEpD,aAAaO,EAAQ,KAAKP,aAC3C8D,EAAS9D,aAAagE,GAAShE,aAAa,IAIhC,IAAVO,IACF2D,EAAad,EAAEpD,aAAa,QAG9B,MAAMmE,EAAYT,aAAG,EAAHA,EAAKU,cAAcF,EAAYhB,GAGjD,IAAKiB,EAAUE,SAAWF,EAAUF,GAAG,GAAI,CAEzC,MAAMK,EAAQH,EAAU7E,IAAI4E,GAC5BN,EAAeW,KAAK,CAClBL,aACAC,YACAG,UAEF,QACF,CACAV,EAAeW,KAAK,CAClBL,aACAC,UAAW,IAAItE,EAAU,GACzByE,MAAO,IAAIzE,EAAU,IAEzB,CAEA,IAAK,IAAIU,EAAQ,EAAGA,GAAS,IAAKA,IAAS,CACzC,IAAI2D,EAAad,EAAEpD,aAAaO,EAAQ,KAAKP,aAC3C8D,EAAS9D,aAAa,IAGV,IAAVO,IACF2D,EAAad,EAAEpD,aAAa,QAG9B,MAAMmE,EAAYT,aAAG,EAAHA,EAAKc,eAAeN,EAAYhB,GAGlD,IAAKiB,EAAUE,SAAWF,EAAUF,GAAG,GAAI,CAEzC,MAAMK,EAAQJ,EAAWO,UAAUN,GACnCN,EAAgBU,KAAK,CACnBL,aACAC,YACAG,UAEF,QACF,CACAT,EAAgBU,KAAK,CACnBL,aACAC,UAAW,IAAItE,EAAU,GACzByE,MAAO,IAAIzE,EAAU,IAEzB,CAEA,GAAI+D,EAAepD,OAAS,GAAKqD,EAAgBrD,OAAS,EACxD,MAAO,CACL6B,mBAAoB,GACpBC,oBAAqB,GACrBH,cAAe,IAAItC,EAAU,IAAIG,aAAa,KAC9CoC,eAAgB,IAAIvC,EAAU,IAAIG,aAAa,KAC/C0E,gBAAiB,IAAI7E,EAAU,GAC/BuB,SAAU,IAAIvB,MACdwB,SAAU,IAAIxB,EAAU,IAK5B,MAAMwC,EAAsC,GAC5C,IAAK,IAAI9B,EAAQ,EAAGA,EAAQqD,EAAepD,OAAQD,IAAS,CAC1D,MAAMoE,EAAYf,EAAerD,IAC3B2D,WAAEA,EAAUC,UAAEA,EAASG,MAAEA,GAAUK,EAEnCC,EAAgBhB,EAAerD,EAAQ,GAE7C,IAAK+D,EAAMD,SAAWC,EAAML,GAAG,IAAMW,EAAe,CAClD,MAAMC,EAAcP,EAAMxE,MAAM8E,EAAcN,OAAOQ,MAC/CC,EAAmBb,EACtBpE,MAAM8E,EAAcV,YACpBY,MAEGE,EADkBb,EAAUrE,MAAM8E,EAAcT,WAAWW,MAE/C9E,aAAa+E,GAEjB,IAAVxE,GACF8B,EAAmBkC,KAAK,CACtBU,KAAMd,EACNG,QACAxD,YAAawD,EAAMrE,KAAK4E,EAAYvF,IAAI,MACxC4F,gBAAiBF,EAAoB/E,KACnC+E,EAAoBhF,aAAa,QAIvCqC,EAAmBkC,KAAK,CACtBU,KAAMd,EACNG,QACAxD,YAAawD,EAAMrE,KAAK4E,EAAYvF,IAAI,IACxC4F,gBAAiBF,IAGnB7C,EAAgBtC,EAAUsF,IAAIH,EAAqB7C,EACrD,CACF,CAEA,MAAMG,EAAuC,GAC7C,IAAK,IAAI/B,EAAQ,EAAGA,EAAQsD,EAAgBrD,OAAQD,IAAS,CAC3D,MAAMoE,EAAYd,EAAgBtD,IAC5B2D,WAAEA,EAAUC,UAAEA,EAASG,MAAEA,GAAUK,EAEnCC,EAAgBf,EAAgBtD,EAAQ,GACxC6E,EAAYR,EAAcN,MAC1Be,EAAiBT,EAAcV,WAC/BoB,EAAgBV,EAAcT,UAEpC,IAAKG,EAAMD,SAAWC,EAAML,GAAG,IAAMW,EAAe,CAClD,MAAMC,EAAcP,EAAMxE,MAAMsF,GAAWN,MACrCC,EAAmBb,EAAWpE,MAAMuF,GAAgBP,MAEpDS,EADkBpB,EAAUrE,MAAMwF,GAAeR,MAErC9E,aAAa+E,GAEjB,IAAVxE,GACF+B,EAAoBiC,KAAK,CACvBU,KAAMd,EACNG,QACAxD,YAAawD,EAAMxE,MAAM+E,EAAYvF,IAAI,MACzC4F,gBAAiBK,EAAqBtF,KACpCsF,EAAqBvF,aAAa,QAKxCsC,EAAoBiC,KAAK,CACvBU,KAAMd,EACNG,QACAxD,YAAawD,EAAMxE,MAAM+E,EAAYvF,IAAI,IACzC4F,gBAAiBK,IAGnBnD,EAAiBvC,EAAUsF,IAAII,EAAsBnD,EACvD,CACF,CAIA,MAAMoD,EACJ5B,EAAepD,OAAS,EACpBoD,EAAeA,EAAepD,OAAS,GACvCqD,EAAgB,GAEhB4B,EACJ5B,EAAgBrD,OAAS,EAAIqD,EAAgB,GAAKD,EAAe,GAE7D8B,EACJ7B,EAAgBrD,OAAS,EACrBqD,EAAgBA,EAAgBrD,OAAS,GACzCoD,EAAe,GAEf+B,EAAOH,EAAmBlB,MAC1BsB,EAAOF,EAAkBpB,MACzBxD,EAAc2E,EAAgBnB,MAC9BI,EAAkB,IAAI7E,EAAU8B,KAAKC,MAAMd,EAAYZ,aAE7D,IAAIkB,EAAWuE,EAAK1B,GAAG,GACnB,IAAIpE,EAAU8B,KAAKC,MAAM+D,EAAKzF,aAC9B,IAAIL,GAAW8B,KAAKC,MAAMgE,EAAK1F,aAC/BmB,EAAWuE,EAAK3B,GAAG,GACnB,IAAIpE,EAAU8B,KAAKC,MAAMgE,EAAK1F,aAC9B,IAAIL,GAAW8B,KAAKC,MAAM+D,EAAKzF,aACnC,MAAM2F,EAAYhG,EAAUsF,IAC1BT,EAAgB5E,MAAMsB,GAAU0D,MAChCzD,EAASvB,MAAM4E,GAAiBI,OAalC,OAXA1D,EAAWsD,EAAgB5E,MAAM+F,GACjCxE,EAAWqD,EAAgBzE,KAAK4F,GAUzB,CACLxD,qBACAC,sBACAH,cAAeA,EAAcnC,aAAa,KAC1CoC,eAAgBA,EAAepC,aAAa,KAC5CoB,WACAC,WACAqD,oBAED,CAAC3C,GACN,CDlNM+D,CAAU,CACZ/D,WAIIrC,EAAiBE,EADE,MAMnBmG,EAAaC,EAAAA,OAAoB,MAEjCC,EAAcC,EAAAA,MAClB,CACEC,KAAM,UACNC,aAAc,UACdC,OAAQ,CAAC,EAAGxE,EAAS,EAAG,WACxByE,SAAU,UACVC,UAAW,GACXC,QAAS,CAAC,EAAG3E,EAAS,EAAG,WACzB4E,UAAW,UACXC,WAAY,GACZC,UAAW,UACXC,kBAAcC,EACdC,UAAW,WAEb5E,GAGI6E,EAAmBC,UACvB,MAAQC,QAASC,GAAYnB,EACvBoB,EAAOH,EAAItF,OACjB,GAAIyF,GAAQD,EAAS,CAEnB,MAAME,EAA0B,QAAfC,EAAAF,EAAKG,kBAAU,IAAAD,OAAA,EAAAA,EAAEE,qBAClC,GAAIH,EAAU,CACZ,MAAMlG,EAAEA,GAAMkG,EACRI,EAAUrG,EAAQ,EACxB,GAAIQ,KAAKmD,IAAI5D,EAAIsG,IAAY,EAC3B,OAEF,GAAItG,GAAK,GAAKC,EAAQD,GAAK,EACzB,OAEF,MAAMd,EAAca,EAAmB,CACrCC,IACAC,QACAC,WACAC,aAGF,IAAIV,EAA4C,KAC5CC,EAA6C,GACjD,MAAMN,EAASY,EAAIsG,EACnB,GAAIlH,EAAQ,CACV,MAAMmH,EAAStH,EAAoB,CACjCE,WAAYgC,EACZjC,cACAE,WAEFK,EAAsB8G,EAAO9G,oBAC7BC,EAAuB6G,EAAO7G,oBAChC,KAAO,CACL,MAAM6G,EAAStH,EAAoB,CACjCE,WAAYiC,EACZlC,cACAE,WAEFK,EAAsB8G,EAAO9G,oBAC7BC,EAAuB6G,EAAO7G,oBAChC,CACA,GAAID,EAAqB,CACvB,MAAMa,EAAaC,EAAgB,CACjCC,OAAQf,EAAoBG,cAExB4G,EAAmBnG,EAAe,CACtCH,WACAC,WACAF,QACAK,eAEImG,EAAmBnI,EAAsB,CAC7CC,UAAWa,EAAS6B,EAAgBC,EACpC1C,iBACAC,MAAOgB,EAAoBuE,kBAEvB0C,EAAeV,EAAQW,QAAqB,YAC5CC,EACJZ,EAAQW,QAAoB,oBACxBE,EAAab,EAAQW,QAAoB,eACzCG,EAAcd,EAAQW,QAAoB,iBAC1CI,EAAaf,EAAQW,QAAmB,gBACxCK,EACJhB,EAAQW,QAAqB,mBACzBM,EAAqBD,aAAc,EAAdA,EAAgBL,QACzC,wBAEI5C,EAAOiC,EAAQW,QAAoB,SAEzCD,SAAAA,EAAcQ,SAAS,CACrBlH,EAAGwG,EACHW,EAAGV,EAAmB,EAAI,IAG5BK,SAAAA,EAAaM,KACXrC,EAAYW,eAAiBtG,EAAS,UAAY,YAEpD0H,SAAAA,EAAaO,KACXjI,EACIkI,EAAAA,OAAE,iCAAkC,CAClCC,OAAQC,EAAAA,kBAAkB/H,EAAoBsE,MAC9C0D,OAAQ3G,EACRsC,MAAOoE,EAAAA,kBAAkB/H,EAAoB2D,SAE/CkE,EAAAA,OAAE,kCAAmC,CACnCC,OAAQC,EAAAA,kBAAkB/H,EAAoBsE,MAC9C0D,OAAQ1G,EACRqC,MAAOoE,EAAAA,kBAAkB/H,EAAoB2D,UAIjDsD,GAAgBK,IACdL,EAAazG,QAAU,EAAID,GAC7B+G,EAAWW,iBAAiB,QAC5BX,EAAWY,cAAc,IACzBZ,EAAWa,aAAa,GACxBlB,EAAamB,aACbnB,EAAaoB,cACJpB,EAAazG,QAAU,EAAID,EAAIC,GACxC8G,EAAWW,iBAAiB,SAC5BX,EAAWY,cAAc,IACzBZ,EAAWa,aAAa,GACxBlB,EAAamB,QAAQ,IACrBnB,EAAaoB,eAGbf,EAAWW,iBAAiB,QAC5BX,EAAWY,cAAc,GACzBZ,EAAWa,aAAa,IACxBlB,EAAamB,QAAQ,GACrBnB,EAAaoB,QAAQ,KAIzBlB,SAAAA,EAAiBmB,OAAO,CACtBvB,EACAhI,EACAgI,EACAC,IAEFG,SAAAA,EAAiBoB,OAAO5I,EAAS,UAAY,WAE7C,IAAI6I,EAAW7I,EAAS,oBAAsB,UAC1C8I,EAAa9I,EACb,0BACA,0BACA2F,EAAYK,UAAYL,EAAYQ,YACtC0C,EAAW7I,EAAS2F,EAAYK,SAAWL,EAAYQ,UACvD2C,EAAa9I,EACT,QAAQ+I,EAAAA,SAASpD,EAAYK,kBAC7B,QAAQ+C,EAAAA,SAASpD,EAAYQ,oBAE/BsB,IACFA,EAAW7G,EAAEwG,GACbK,EAAWM,EAAEV,GACbI,EAAWO,KAAKa,GAChBpB,EAAWmB,OAAOE,IAGhBlB,IACFA,EAAehH,EAAEwG,GACjBQ,EAAeG,EAAE3I,EAAiB,KAAO,GACzCwI,EAAea,QAAQb,EAAe/G,QAAU,GAC5C+G,EAAehH,IAAMgH,EAAe/G,QAAU,EAAI,EACpD+G,EAAehH,EAAEgH,EAAe/G,QAAU,GAE1C+G,EAAehH,IAAMgH,EAAe/G,QAAU,EAC9CA,EAEA+G,EAAehH,EAAEC,EAAQ+G,EAAe/G,QAAU,GAElD+G,EAAehH,EAAEA,IAIjBiH,IACFA,EAAmBG,KACjBrC,EAAYW,eAAiBtG,EAAS,UAAY,YAEpD6H,EAAmBI,KACjBG,EAAAA,kBAAkB/H,EAAoB2D,SAK1C,MAAM2E,EAAwB,GAC9B,IAAK,MAAMtE,KAAa/D,EAAsB,CAC5C,MAAME,YAAEA,EAAWoE,gBAAEA,GAAoBP,EACnC2E,EAAqB7H,EAAgB,CAAEC,OAAQZ,IAC/CyI,EAAYhI,EAAe,CAC/BH,WACAC,WACAF,QACAK,WAAY8H,IAERjB,EAAI7I,EAAsB,CAC9BC,UAAWa,EAAS6B,EAAgBC,EACpC1C,iBACAC,MAAOuF,IAET+D,EAAO1E,KAAKgF,EAAWlB,EAAI,EAC7B,CACA,MAAMmB,EAAuBP,EAAOjI,SAC7ByI,EAAaC,GAAeF,EAC/BlJ,GACFkJ,EAAqBjF,KAAKmD,EAAkBC,GAC5C6B,EAAqBjF,KAAKmD,EAAkBhI,GAC5C8J,EAAqBjF,KAAKkF,EAAa/J,GACvC8J,EAAqBjF,KAAKkF,EAAaC,KAEvCF,EAAqBG,QAAQF,EAAa/J,GAC1C8J,EAAqBG,QAAQjC,EAAkBhI,GAC/C8J,EAAqBG,QAAQjC,EAAkBC,IAE7C1C,IACFA,EAAKgE,OAAOO,GACZvE,EAAKqD,KACHhI,EACI2F,EAAYK,UAAY,UACxBL,EAAYQ,WAAa,YAIjCS,EAAQ0C,MACV,CACF,CACF,GAUIC,EE9TF,UAAsBnK,eAC1BA,EAAcoK,cACdA,EAAaC,oBACbA,EAAmBC,kBACnBA,EAAiBC,MACjBA,EAAQ,YAQR,OAAO1H,EAAAA,QAAQ,KACb,MAAM2H,EAA4C,GAC5CC,EACJzK,GAAkBqK,EAAsB,GACpCK,EAA0C,GAC1CC,EAA6BP,GAAiBE,EAAoB,GACxE,IAAK,IAAIzJ,EAAQ,EAAGA,EAAQwJ,EAAqBxJ,IAAS,CACxD,MAAM8H,EAAI8B,GAAgC5J,EAAQ,GAClD2J,EAAoB3F,KAAK,CAAC,EAAG8D,EAAGyB,EAAezB,GACjD,CACA,IAAK,IAAI9H,EAAQ,EAAGA,EAAQyJ,EAAmBzJ,IAAS,CACtD,MAAMW,EAAImJ,GAA8B9J,EAAQ,GAChD6J,EAAkB7F,KAAK,CAACrD,EAAG,EAAGA,EAAGxB,GACnC,CACA,OACE4K,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACGN,EAAoBO,IAAI,CAACxB,EAAQ1I,IAChCmK,EAAAA,IAACC,OAAI,CAEH1B,OAAQA,EACRC,OAAQe,EACRW,YAAa,EACbC,QAAQ,QACRC,SAAS,QACTC,QAAS,EACTC,WAAW,GAPNzK,IAUR6J,EAAkBK,IAAI,CAACxB,EAAQ1I,IAC9BmK,EAAAA,IAACC,OAAI,CAEH1B,OAAQA,EACRC,OAAQe,EACRW,YAAa,EACbC,QAAQ,QACRC,SAAS,QACTC,QAAS,EACTC,WAAW,GAPNzK,QAYZ,CACDb,EACAoK,EACAC,EACAC,EACAC,GAEJ,CFgQmBgB,CAAY,CAC3BvL,iBACAoK,cAAe3I,EACf4I,oBAnP0B,EAoP1BC,kBAlPwB,EAmPxBC,MAAOhE,EAAYE,OAEf+E,YGlU2B9J,SACjCA,EAAQC,SACRA,EAAQ8J,WACRA,EAAUzL,eACVA,EAAcoK,cACdA,EAAaG,MACbA,EAAQ,YASR,OAAO1H,EAAAA,QAAQ,KACb,MAAM6I,EAAatB,GAAiBqB,EAAa,GAC3CE,EAID,GACCC,EAAmC,GACzC,IAAK,IAAI/K,EAAQ,EAAGA,EAAQ4K,EAAY5K,IAAS,CAC/C,MAAMW,EAAIkK,EAAa,EAAIA,EAAa7K,EACxC8K,EAAc9G,KAAK,CACjBrD,IACAmH,EAAG3I,EAAiB,MAAQ,EAC5B6I,KAAMG,EAAAA,kBACJzH,EAAmB,CACjBC,EAAGkK,GAAc7K,EAAQ,GACzBY,MAAO2I,EACP1I,WACAC,gBAKN,MAAMkK,EAAQH,GAAc7K,EAAQ,GACpC+K,EAAW/G,KAAK,CACdgH,EACA7L,EAAiB,EACjB6L,EACA7L,EAAiB,EAAI,GAEzB,CACA,OACE4K,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACGa,EAAcZ,IAAI,CAACe,EAAWjL,IAC7BmK,EAAAA,IAACe,OAAI,CAEHvK,EAAGsK,EAAUtK,EACbmH,EAAGmD,EAAUnD,EACbE,KAAMiD,EAAUjD,KAChBmD,SAAU,GACVC,WAAW,UACXrD,KAAM2B,EACN9I,MAAOiK,EACPQ,QAAS,EACTC,MAAM,SACNC,cAAc,SACdd,WAAW,GAXNzK,IAeR+K,EAAWb,IAAI,CAACxB,EAAQ1I,IACvBmK,EAAAA,IAACC,OAAI,CAEH1B,OAAQA,EACRC,OAAQe,EACRW,YAAa,EACbC,QAAQ,OACRC,SAAS,QACTC,QAAS,EACTC,WAAW,GAPNzK,QAYZ,CAACa,EAAUC,EAAU3B,EAAgBoK,EAAeqB,GACzD,CHkP0BY,CAAmB,CACzCrM,iBACAoK,cAAe3I,EACfgK,WAxPwB,EAyPxB/J,WACAC,WACA4I,MAAOhE,EAAYa,YAEfkF,EI7UF,UAAwBtM,eAC5BA,EAAcoK,cACdA,EAAaG,MACbA,EAAQ,YAMR,OAAO1H,EAAAA,QAAQ,KACb,MAAM0J,EAAYnC,EAAgB,EAClC,OACEY,EAAAA,IAACC,EAAAA,KAAI,CACH1B,OAAQ,CAACgD,EAAW,EAAGA,EAAWvM,EAAiB,GACnDwJ,OAAQe,EACRW,YAAa,EACbC,QAAQ,QACRC,SAAS,QACTC,QAAS,EACTC,WAAW,KAGd,CAACtL,EAAgBoK,EAAeG,GACrC,CJsTqBiC,CAAc,CAC/BxM,iBACAoK,cAAe3I,EACf8I,MAAOhE,EAAYG,gBAEfE,SAAEA,EAAQG,UAAEA,GK1Ud,UAA2BpE,mBAC/BA,EAAkBC,oBAClBA,EAAmBlB,SACnBA,EAAQC,SACRA,EAAQc,cACRA,EAAaC,eACbA,EAAc0H,cACdA,EAAapK,eACbA,EAAcwC,SACdA,IA6IA,MAAO,CACLoE,SAlIe/D,EAAAA,QAAQ,KACvB,GAAIF,EAAmB7B,OAAS,EAC9B,OAAOkK,EAAAA,IAAAH,EAAAA,SAAA,IAET,MAAMtB,EAAwB,GAC9B,IAAIkD,EAAYzM,EAChB,IAAK,MAAMiF,KAAatC,EAAoB,CAC1C,MAAMvB,YAAEA,EAAWoE,gBAAEA,GAAoBP,EACnCnD,EAAaC,EAAgB,CAAEC,OAAQZ,IACvCI,EAAIK,EAAe,CACvBH,WACAC,WACAF,MAAO2I,EACPtI,eAEI6G,EAAI7I,EAAsB,CAC9BC,UAAW0C,EACXzC,iBACAC,MAAOuF,IAET+D,EAAO1E,KAAKrD,EAAGmH,GACXA,EAAI8D,IACNA,EAAY9D,EAEhB,CAGA,MAAMmB,EAAuBP,EAAOjI,SAC7BoL,EAAgBC,GAAkB7C,EACnC8C,EACJ9C,EAAqBA,EAAqBhJ,OAAS,GAC/C+L,EACJ/C,EAAqBA,EAAqBhJ,OAAS,GAKrD,OAJAgJ,EAAqBjF,KAAKgI,EAAiBD,GAC3C9C,EAAqBjF,KAAKgI,EAAiB7M,GAC3C8J,EAAqBjF,KAAK6H,EAAgB1M,GAC1C8J,EAAqBjF,KAAK6H,EAAgBC,GAExC/B,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACEE,EAAAA,IAACC,OAAI,CACH1B,OAAQO,EACRgD,QAAM,EACNxB,WAAW,EACXH,QAAQ,QACRC,SAAS,QACT2B,6BAA8B,CAAEvL,EAAG,EAAGmH,EAAG3I,GACzCgN,2BAA4B,CAAExL,EAAG,EAAGmH,EAAG8D,GACvCQ,6BAA8BzK,EAASmE,SAEzCqE,EAAAA,IAACC,OAAI,CACH1B,OAAQA,EACRC,OAAQhH,EAASoE,SACjBsE,YAAa,EACbC,QAAQ,QACRC,SAAS,QACTE,WAAW,QAIhB,CACD3I,EACAyH,EACA1I,EACAC,EACA3B,EACAyC,IAkEAsE,UA/DgBlE,EAAAA,QAAQ,KACxB,GAAID,EAAoB9B,OAAS,EAC/B,OAAOkK,EAAAA,IAAAH,EAAAA,SAAA,IAET,MAAMtB,EAAwB,GAC9B,IAAIkD,EAAYzM,EAChB,IAAK,MAAMiF,KAAarC,EAAqB,CAC3C,MAAMxB,YAAEA,EAAWoE,gBAAEA,GAAoBP,EACnCnD,EAAaC,EAAgB,CAAEC,OAAQZ,IACvCI,EAAIK,EAAe,CACvBH,WACAC,WACAF,MAAO2I,EACPtI,eAEI6G,EAAI7I,EAAsB,CAC9BC,UAAW2C,EACX1C,iBACAC,MAAOuF,IAET+D,EAAO1E,KAAKrD,EAAGmH,GACXA,EAAI8D,IACNA,EAAY9D,EAEhB,CAEA,MAAMmB,EAAuBP,EAAOjI,SAC7ByI,GAAeD,EAGtB,OAFAA,EAAqBG,QAAQF,EAAa/J,GAC1C8J,EAAqBG,QAAQG,EAAepK,GAE1C4K,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACEE,EAAAA,IAACC,OAAI,CACH1B,OAAQO,EACRgD,QAAM,EACNxB,WAAW,EACXH,QAAQ,QACRC,SAAS,QACT2B,6BAA8B,CAAEvL,EAAG,EAAGmH,EAAG3I,GACzCgN,2BAA4B,CAAExL,EAAG,EAAGmH,EAAG8D,GACvCQ,6BAA8BzK,EAASsE,UAEzCkE,EAAAA,IAACC,OAAI,CACH1B,OAAQA,EACRC,OAAQhH,EAASuE,UACjBmE,YAAa,EACbC,QAAQ,QACRC,SAAS,QACTE,WAAW,QAIhB,CACD1I,EACAwH,EACA1I,EACAC,EACA3B,EACA0C,IAOJ,CLgLkCwK,CAAiB,CAC/CvK,qBACAC,sBACAlB,WACAC,WACAc,gBACAC,iBACA0H,cAAe3I,EACfzB,iBACAwC,SAAU+D,IAGZ,OACEqE,EAAAA,KAACuC,EAAAA,MAAK,CACJ1L,MAAOA,EACPvB,OAAQA,EACRkN,YAAa/F,EACbgG,YAAahG,EACbiG,aAAcjG,EACdkG,WA9CmBC,KACrB,MAAQjG,QAASC,GAAYnB,EACzBmB,GACFA,EAAQiG,QA2CmB3C,SAAA,CAE3BF,EAAAA,KAAC8C,QAAK,CAAA5C,SAAA,CACJE,EAAAA,IAAC2C,OAAI,CACHnM,EAAG,EACHmH,EAAG,EACHlH,MAAOA,EACPvB,OAAQF,EACRwJ,OAAQjD,EAAYE,KACpByE,YAAa,IAGdf,EAEAqB,EAEA5E,EAEAG,EAEAuF,KAGH1B,EAAAA,KAAC8C,QAAK,CAACE,IAAKvH,EAAYwH,SAAS,EAAM/C,SAAA,CACrCE,EAAAA,IAACC,OAAI,CACH1B,OAAQ,GACRuD,QAAM,EACNxB,WAAW,EACXH,QAAQ,QACRC,SAAS,QACT0C,GAAG,SAGL9C,EAAAA,IAACC,OAAI,CACH1B,OAAQ,GACR2B,YAAa,EACb1B,OAAO,UACP4B,SAAS,QACTD,QAAQ,QACR4C,KAAM,CAAC,EAAG,GACVD,GAAG,oBAEL9C,EAAAA,IAACgD,SAAM,CACLxM,EAAG,EACHmH,EAAG,EACHsF,OAAQ,EACRrF,KAAK,UACLY,OAAO,0BACP0B,YAAa,GACb4C,GAAG,eAELlD,EAAAA,KAACsD,QAAK,CAAC5C,WAAW,EAAO9J,EAAG,EAAGmH,EAAG,EAAGmF,GAAG,iBAAgBhD,SAAA,CACtDE,EAAAA,IAACmD,MAAG,CAACvF,KAAMrC,EAAYU,UAAW6G,GAAG,uBACrC9C,EAAAA,IAACe,OAAI,CACHlD,KAAK,IACLmD,SAAU,GACVC,WAAW,UACXC,QAAS,EACTtD,KAAK,UACLkF,GAAG,2BAIPlD,EAAAA,KAACsD,QAAK,CAAC5C,WAAW,EAAOwC,GAAG,UAAShD,SAAA,CACnCE,EAAAA,IAACmD,MAAG,CACFvF,KAAMrC,EAAYU,UAClBiC,iBAAiB,OACjBE,aAAc,GACdD,cAAe,EACfiF,aAAc,EACdhD,SAAS,QACT0C,GAAG,gBAEL9C,EAAAA,IAACe,OAAI,CACHlD,KAAK,GACLoD,WAAW,UACXD,SAAU,GACVqC,WAAY,GAAK,GAEjBnC,QAASoC,EAAAA,aACT1F,KAAK,UACLkF,GAAG,yBAMf,iBM7awCS,EACtC9M,QAAQ,IACRvB,SAAS,IACToC,kBACAC,mBACAiM,WACAC,YACArK,WACAsK,iBACAlM,cAGEoI,EAAAA,KAAClL,EAAS,CAAAoL,eACO3D,IAAdsH,QACctH,IAAb/C,QACa+C,IAAbqH,QACarH,IAAb/C,GACE4G,EAAAA,IAAC5I,EAAmB,CAClBX,MAAOA,EACPvB,OAAQA,EACRmC,OAAQoM,EACRrK,SAAUA,EACVoK,SAAUA,EACVlM,gBAAiBA,EACjBC,iBAAkBA,EAClBC,SAAUA,IAIdkM,EAQA,GAPA9D,EAAAA,KAAC/K,EAAU,CAAAiL,UACT,KACChC,EAAAA,OAAE,iCAAkC,CACnCxG"}
package/dist/{index-CdURUgpB.cjs → index-Cn5_crYW.cjs} RENAMED
@@ -1,4 +1,4 @@
1
- "use strict";var e=require("bignumber.js"),t=require("lodash"),i=require("react"),o=require("react-icons/bi"),r=require("@emotion/styled"),n=require("@emotion/react"),l=require("react-konva"),s=require("./helper-J2-Ga54j.cjs"),a=require("./index-DITTntm-.cjs"),u=require("react/jsx-runtime"),d=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/utc"),require("dayjs/plugin/duration"),require("dayjs/plugin/localizedFormat"),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 c=r.input`
1
+ "use strict";var e=require("bignumber.js"),t=require("lodash"),i=require("react"),o=require("react-icons/bi"),r=require("@emotion/styled"),n=require("@emotion/react"),l=require("react-konva"),s=require("./helper-DvQmJ4S9.cjs"),a=require("./index-ofxslEBg.cjs"),u=require("react/jsx-runtime"),d=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/utc"),require("dayjs/plugin/duration"),require("dayjs/plugin/localizedFormat"),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 c=r.input`
2
2
  margin: 4px 10px 4px 6px;
3
3
  border-radius: 10px;
4
4
  border: 1px solid #373739;
@@ -76,3 +76,4 @@
76
76
  color: #fff;
77
77
  }
78
78
  `;function v({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 s=new e(t.q0),a=new e(t.i),u=new e(t.k),{R:c}=t;1===c&&l.eq(r)&&(l=d.solveQuadraticFunctionForTarget(r,n.minus(s),new e(1).div(a),u));const p=o?r.plus(i):r.minus(i);if(p.lt(l)||r.eq(l)){let t=l.multipliedBy(l).div(p).div(p);return t=new e(1).minus(u).plus(u.multipliedBy(t)),a.multipliedBy(t)}const m=new d.PMMModel;m.RStatus=c,m.B=r,m.B0=l,m.Q=n,m.Q0=s,m.i=a,m.k=u,m.mtFeeRate=new e(0),m.lpFeeRate=new e(0);let g=new e(0);g=o?m.querySellBase(i):m.queryBuyBase(i);const h=o?n.minus(g):n.plus(g);let b=s.multipliedBy(s).div(h).div(h);return b=new e(1).minus(u).plus(u.multipliedBy(b)),a.div(b)}exports.default=({chartId:r,width:n=834,height:l=460,baseTokenSymbol:d,quoteTokenSymbol:p,pmmModel:g,pmmParams:y,midPrice:L=new e(0),colorMap:q,notShowAmountInput:B})=>{(({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 o=document.getElementById(e),r=!!i&&{passive:!1};return null==o||o.addEventListener("wheel",t,r),()=>{null==o||o.removeEventListener("wheel",t)}},[e])})({id:r});const[z,j]=i.useState(""),[w,T]=i.useState(""),[k,C]=i.useState("-"),[S,A]=i.useState("-"),[X,N]=i.useState({baseMin:new e(0),zoomMultiples:s.baseZoomMultiples,targetMarginPriceX:0});i.useEffect(()=>{void 0!==L&&N(e=>({baseMin:s.computeBaseAfterZoom({midPrice:L,zoomMultiples:e.zoomMultiples}),zoomMultiples:e.zoomMultiples,targetMarginPriceX:e.targetMarginPriceX}))},[L]);const Z=i.useMemo(()=>t.debounce(({type:t,amount:i})=>{""===i&&L&&(N({baseMin:s.computeBaseAfterZoom({midPrice:L,zoomMultiples:s.baseZoomMultiples}),zoomMultiples:s.baseZoomMultiples,targetMarginPriceX:0}),"buy"===t?C("-"):A("-"));const o=new e(i);if(!o.lte(0)&&!o.isNaN()&&(null==y?void 0:y.b)&&!o.gte(y.b)&&L)if("buy"===t){const e=v({params:y,target:o});N(i=>{const o=s.beforePriceImpactEffect({currentBaseMinAndZoomMultiples:i,targetPrice:e,midPrice:L,width:n});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 r=s.computeTargetXByTargetPrice({midPrice:L,width:n,type:t,targetPrice:e}),l=r.zoomMultiples.dp(6).toNumber();return{baseMin:s.computeBaseAfterZoom({midPrice:L,zoomMultiples:l}),zoomMultiples:l,targetMarginPriceX:r.targetX}}),C(`${a.formatPercentageNumber({input:e.minus(L).div(L)})}`)}else{const e=function({params:e,target:t}){return v({params:e,target:t,isBuy:!1})}({params:y,target:o});N(i=>{const o=s.beforePriceImpactEffect({currentBaseMinAndZoomMultiples:i,targetPrice:e,midPrice:L,width:n});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 r=s.computeTargetXByTargetPrice({midPrice:L,width:n,type:t,targetPrice:e}),l=r.zoomMultiples.dp(6).toNumber();return{baseMin:s.computeBaseAfterZoom({midPrice:L,zoomMultiples:l}),zoomMultiples:l,targetMarginPriceX:r.targetX}}),A(`+${a.formatPercentageNumber({input:e.minus(L).div(L)})}`)}},300),[y,L,n]);i.useEffect(()=>{void 0!==z&&Z({type:"buy",amount:z})},[Z,z]),i.useEffect(()=>{void 0!==w&&Z({type:"sell",amount:w})},[Z,w]);const W=e=>{let t=0;t=e?-.1*n:.1*n,N(e=>void 0===e.baseMin?e:{baseMin:s.computeBaseMinByDistance({dragDistance:t,prevBaseMin:e.baseMin,chartWidth:n,zoomMultiples:e.zoomMultiples}),zoomMultiples:e.zoomMultiples,targetMarginPriceX:e.targetMarginPriceX})},F=e=>{N(t=>{const i=s.computeZoomMultiplesWhenZoom({zoomIn:null!=e&&e,prevZoomMultiples:t.zoomMultiples});return{baseMin:s.computeBaseAfterZoom({midPrice:L,zoomMultiples:i}),zoomMultiples:i,targetMarginPriceX:t.targetMarginPriceX}})},E=i.useMemo(()=>{if(""===z)return!1;const t=new e(z);return!(!t.lte(0)&&!t.isNaN()&&(null==y?void 0:y.b)&&!t.gte(y.b))},[z,y]),G=i.useMemo(()=>{if(""===w)return!1;const t=new e(w);return!(!t.lte(0)&&!t.isNaN()&&(null==y?void 0:y.b)&&!t.gte(y.b))},[w,y]);return u.jsxs(h,{id:r,children:[B?"":u.jsxs(b,{children:[u.jsxs(M,{borderColor:q&&q.grid,children:[s.chartT("pool.chart.buy-amount",{symbol:d}),u.jsx(c,{value:z,error:E,onChange:e=>{const t=a.fixedInputStringToFormattedNumber(e.target.value,2);null!==t&&j(t)}}),u.jsx(f,{children:s.chartT("pool.chart.price-impact",{amount:k})})]}),u.jsxs(M,{borderColor:q&&q.grid,children:[s.chartT("pool.chart.sell-amount",{symbol:d}),u.jsx(c,{value:w,error:G,onChange:e=>{const t=a.fixedInputStringToFormattedNumber(e.target.value,2);null!==t&&T(t)}}),u.jsx(f,{children:s.chartT("pool.chart.price-impact",{amount:S})})]})]}),void 0!==y&&void 0!==L&&void 0!==g&&void 0!==X.baseMin&&void 0!==L&&u.jsx(m,{width:n,height:l,params:y,midPrice:L,pmmModel:g,baseTokenSymbol:d,quoteTokenSymbol:p,baseMinAndZoomMultiples:X,colorMap:q,setBaseMinAndZoomMultiples:N}),u.jsxs(x,{className:"operate-btn-wrapper",children:[u.jsx(P,{onClick:()=>W(!0),children:u.jsx(o.BiChevronLeft,{})}),u.jsx(P,{onClick:()=>F(!1),children:u.jsx(o.BiMinus,{})}),u.jsx(P,{onClick:()=>F(!0),children:u.jsx(o.BiPlus,{})}),u.jsx(P,{onClick:()=>W(!1),children:u.jsx(o.BiChevronRight,{})})]})]})};
79
+ //# sourceMappingURL=index-Cn5_crYW.cjs.map
package/dist/index-Cn5_crYW.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index-Cn5_crYW.cjs","sources":["../src/components/chart/components/Input.tsx","../src/components/chart/depth-chart/DepthChartKonva.tsx","../src/components/chart/depth-chart/useGridLinePoints.ts","../src/components/chart/depth-chart/useHorizontalLabelPoints.ts","../src/components/chart/depth-chart/useDepthLinePoints.ts","../src/components/chart/components/BaseButton.tsx","../src/components/chart/depth-chart/index.styled.tsx","../src/components/chart/depth-chart/utils.ts","../src/components/chart/depth-chart/index.tsx","../src/components/chart/hooks/usePreventWheel.ts"],"sourcesContent":["import styled from '@emotion/styled';\r\nimport { css } from '@emotion/react';\r\n\r\nexport const Input = styled.input<{ error?: boolean }>`\r\n margin: 4px 10px 4px 6px;\r\n border-radius: 10px;\r\n border: 1px solid #373739;\r\n padding: 4px 9px;\r\n background-color: #1a1a1b;\r\n color: #ffffff;\r\n font-size: 14px;\r\n font-weight: 400;\r\n line-height: 20px;\r\n outline: none;\r\n width: 96px;\r\n &:focus {\r\n border-color: #fff;\r\n\r\n ${({ error }) =>\r\n error &&\r\n css`\r\n border-color: red;\r\n `}\r\n }\r\n`;\r\n","import { PMMModel, PmmModelParams } from '@dodoex/api';\r\nimport BigNumber from 'bignumber.js';\r\nimport Konva from 'konva';\r\nimport { KonvaEventObject } from 'konva/lib/Node';\r\nimport { merge, throttle } from 'lodash';\r\nimport { useEffect, useMemo, useRef } from 'react';\r\nimport {\r\n Circle,\r\n Label,\r\n Layer,\r\n Line,\r\n Rect,\r\n Stage,\r\n Tag,\r\n Text,\r\n} from 'react-konva';\r\nimport { chartT as t } from '../i18n';\r\nimport { chartOffsetYBCToolTip, labelPadding } from '../utils';\r\nimport {\r\n BaseMinAndZoomMultiples,\r\n computeBaseAfterZoom,\r\n computeBaseMinByDistance,\r\n computeBaseVert,\r\n computeZoomMultiplesWhenZoom,\r\n updateTooltip,\r\n} from './helper';\r\nimport { useDepthLinePoints } from './useDepthLinePoints';\r\nimport { useGridLinePoints } from './useGridLinePoints';\r\nimport { useHorizontalLabelPoints } from './useHorizontalLabelPoints';\r\n\r\nexport const bgColor = 'rgba(38, 39, 41, 0.3)';\r\n\r\n// toolTip the height of the arrow\r\nconst toolTipPointerHeight = 8;\r\nconst toolTipPointerWidth = 15;\r\nconst xAxisHight = 18;\r\nconst xPoints = 50;\r\n/** The number of horizontal axis scales or the number of vertical grid lines */\r\nconst xAxisPoints = 7;\r\n// Number of horizontal grid lines\r\nconst horizontalLineCount = 9;\r\n// padding of toolTip\r\nexport interface ColorMap {\r\n grid?: string;\r\n midPriceLine?: string;\r\n leftBg?: (string | number)[];\r\n leftLine?: string;\r\n leftColor?: string;\r\n rightBg?: (string | number)[];\r\n rightLine?: string;\r\n rightColor?: string;\r\n tooltipBg?: string;\r\n tooltipColor?: string;\r\n}\r\n\r\nexport type Props = {\r\n width: number;\r\n height: number;\r\n params: PmmModelParams;\r\n midPrice: BigNumber;\r\n pmmModel: PMMModel;\r\n baseTokenSymbol: string;\r\n quoteTokenSymbol: string;\r\n baseMinAndZoomMultiples: BaseMinAndZoomMultiples;\r\n colorMap?: ColorMap;\r\n setBaseMinAndZoomMultiples: React.Dispatch<\r\n React.SetStateAction<BaseMinAndZoomMultiples>\r\n >;\r\n};\r\n\r\nexport function DepthChartKonva({\r\n width,\r\n height,\r\n midPrice,\r\n pmmModel,\r\n params,\r\n baseTokenSymbol,\r\n quoteTokenSymbol,\r\n baseMinAndZoomMultiples,\r\n colorMap,\r\n setBaseMinAndZoomMultiples,\r\n}: Props) {\r\n const colorMapRes = merge(\r\n {\r\n grid: '#2A2A2D',\r\n midPriceLine: '#313335',\r\n leftBg: [0, bgColor, 1, '#31645d'],\r\n leftLine: '#55f6db',\r\n leftColor: '',\r\n rightBg: [0, bgColor, 1, '#67303d'],\r\n rightLine: '#ff4f73',\r\n rightColor: '',\r\n tooltipBg: '#121212',\r\n tooltipColor: undefined,\r\n },\r\n colorMap,\r\n );\r\n\r\n const chartWidth = width;\r\n const chartHeight = height - xAxisHight;\r\n const oneXPx = chartWidth / xAxisPoints;\r\n\r\n const { buyBaseVert, sellBaseVert } = computeBaseVert({\r\n midPrice,\r\n q: params.q,\r\n q0: params.q0,\r\n pmmModel,\r\n });\r\n const buyYPortion = buyBaseVert.div(chartHeight);\r\n const sellYPortion = sellBaseVert.div(chartHeight);\r\n\r\n const tooltipRef = useRef<Konva.Layer>(null);\r\n const stageRef = useRef<Konva.Stage>(null);\r\n const { current: tooltip } = tooltipRef;\r\n const dragStartXRef = useRef<number>(0);\r\n const pointerXRef = useRef<number>();\r\n\r\n const { horizontalGridLines, verticalGridLines } = useGridLinePoints({\r\n chartHeight,\r\n chartWidth,\r\n horizontalLineCount,\r\n verticalLineCount: xAxisPoints,\r\n });\r\n const { horizontalLabelTickPoints, horizontalLabelTextPoints } =\r\n useHorizontalLabelPoints({\r\n chartHeight,\r\n chartWidth,\r\n xAxisPoints,\r\n oneXPx,\r\n baseMinAndZoomMultiples,\r\n });\r\n const {\r\n quoteLinePoints,\r\n quoteLineAreaPoints,\r\n quoteLineAreaLinearGradientEndPointY,\r\n baseLinePoints,\r\n baseLineAreaPoints,\r\n baseLineAreaLinearGradientEndPointY,\r\n midPriceLinePoints,\r\n } = useDepthLinePoints({\r\n chartHeight,\r\n chartWidth,\r\n midPrice,\r\n xPoints,\r\n pmmModel,\r\n baseMinAndZoomMultiples,\r\n buyYPortion,\r\n sellYPortion,\r\n });\r\n\r\n const handleMouseover = (evt: KonvaEventObject<MouseEvent>) => {\r\n const node = evt.target;\r\n if (node && tooltip) {\r\n // update tooltip\r\n const mousePos = node.getStage()?.getPointerPosition();\r\n if (mousePos) {\r\n const { x } = mousePos;\r\n if (x > chartWidth) {\r\n tooltip.hide();\r\n return;\r\n }\r\n updateTooltip({\r\n x,\r\n tooltip,\r\n buyBaseVert,\r\n sellBaseVert,\r\n chartWidth,\r\n chartHeight,\r\n midPrice,\r\n pmmModel,\r\n baseTokenSymbol,\r\n quoteTokenSymbol,\r\n baseMinAndZoomMultiples,\r\n t,\r\n isHover: true,\r\n color: colorMapRes.tooltipColor,\r\n leftColor: colorMapRes.leftLine,\r\n rightColor: colorMapRes.rightLine,\r\n });\r\n }\r\n }\r\n };\r\n const handleMouseOut = () => {\r\n if (tooltip) {\r\n tooltip.hide();\r\n }\r\n };\r\n\r\n const updateWhenDrag = useMemo(\r\n () =>\r\n throttle((evt: KonvaEventObject<DragEvent>) => {\r\n const { target } = evt;\r\n const stage = target.getStage();\r\n if (stage) {\r\n stage.container().style.cursor = 'grabbing';\r\n const mousePos = stage?.getPointerPosition();\r\n if (mousePos) {\r\n const dragDistance = mousePos.x - dragStartXRef.current;\r\n dragStartXRef.current = mousePos.x;\r\n pointerXRef.current = mousePos.x;\r\n setBaseMinAndZoomMultiples((prev) => {\r\n if (prev.baseMin === undefined) {\r\n return prev;\r\n }\r\n return {\r\n baseMin: computeBaseMinByDistance({\r\n dragDistance,\r\n prevBaseMin: prev.baseMin,\r\n chartWidth,\r\n zoomMultiples: prev.zoomMultiples,\r\n }),\r\n zoomMultiples: prev.zoomMultiples,\r\n targetMarginPriceX: 0,\r\n };\r\n });\r\n }\r\n }\r\n }, 100),\r\n [chartWidth, setBaseMinAndZoomMultiples],\r\n );\r\n\r\n const updateWhenWheel = useMemo(\r\n () =>\r\n throttle((event: KonvaEventObject<WheelEvent>) => {\r\n // eslint-disable-next-line no-param-reassign\r\n event.cancelBubble = true;\r\n event.evt.preventDefault();\r\n // scroll up\r\n const isScrollUp = event.evt.deltaY < 0;\r\n\r\n setBaseMinAndZoomMultiples((prev) => {\r\n const newZoomMultiples = computeZoomMultiplesWhenZoom({\r\n zoomIn: isScrollUp,\r\n prevZoomMultiples: prev.zoomMultiples,\r\n });\r\n return {\r\n baseMin: computeBaseAfterZoom({\r\n midPrice,\r\n zoomMultiples: newZoomMultiples,\r\n }),\r\n zoomMultiples: newZoomMultiples,\r\n targetMarginPriceX: prev.targetMarginPriceX,\r\n };\r\n });\r\n }, 100),\r\n [midPrice, setBaseMinAndZoomMultiples],\r\n );\r\n\r\n useEffect(() => {\r\n if (baseMinAndZoomMultiples.targetMarginPriceX > 0 && tooltip !== null) {\r\n updateTooltip({\r\n x: baseMinAndZoomMultiples.targetMarginPriceX,\r\n tooltip,\r\n buyBaseVert,\r\n sellBaseVert,\r\n chartWidth,\r\n chartHeight,\r\n midPrice,\r\n pmmModel,\r\n baseTokenSymbol,\r\n quoteTokenSymbol,\r\n baseMinAndZoomMultiples,\r\n t,\r\n color: colorMapRes.tooltipColor,\r\n leftColor: colorMapRes.leftLine,\r\n rightColor: colorMapRes.rightLine,\r\n });\r\n return;\r\n }\r\n if (pointerXRef.current !== undefined && tooltip !== null) {\r\n updateTooltip({\r\n x: pointerXRef.current,\r\n tooltip,\r\n buyBaseVert,\r\n sellBaseVert,\r\n chartWidth,\r\n chartHeight,\r\n midPrice,\r\n pmmModel,\r\n baseTokenSymbol,\r\n quoteTokenSymbol,\r\n baseMinAndZoomMultiples,\r\n t,\r\n isHover: true,\r\n color: colorMapRes.tooltipColor,\r\n leftColor: colorMapRes.leftLine,\r\n rightColor: colorMapRes.rightLine,\r\n });\r\n }\r\n }, [\r\n baseMinAndZoomMultiples,\r\n baseTokenSymbol,\r\n buyBaseVert,\r\n chartHeight,\r\n chartWidth,\r\n colorMapRes.leftLine,\r\n colorMapRes.rightLine,\r\n colorMapRes.tooltipColor,\r\n midPrice,\r\n pmmModel,\r\n quoteTokenSymbol,\r\n sellBaseVert,\r\n tooltip,\r\n ]);\r\n\r\n return (\r\n <Stage\r\n ref={stageRef}\r\n width={width}\r\n offsetY={-chartOffsetYBCToolTip}\r\n height={height + chartOffsetYBCToolTip}\r\n draggable\r\n dragBoundFunc={function () {\r\n return {\r\n x: this.absolutePosition().x,\r\n y: this.absolutePosition().y,\r\n };\r\n }}\r\n onMouseMove={handleMouseover}\r\n onMouseOver={handleMouseover}\r\n onMouseOut={handleMouseOut}\r\n onDragStart={function (evt) {\r\n const { target } = evt;\r\n const stage = target.getStage();\r\n if (stage) {\r\n const mousePos = stage.getPointerPosition();\r\n if (mousePos) {\r\n dragStartXRef.current = mousePos.x;\r\n }\r\n }\r\n }}\r\n onDragMove={updateWhenDrag}\r\n onDragEnd={(evt) => {\r\n const { target } = evt;\r\n const stage = target.getStage();\r\n if (stage) {\r\n stage.container().style.cursor = 'pointer';\r\n }\r\n }}\r\n onWheel={updateWhenWheel}\r\n >\r\n <Layer>\r\n {/* border */}\r\n <Rect\r\n x={0}\r\n y={0}\r\n width={width}\r\n height={chartHeight}\r\n stroke={colorMapRes.grid}\r\n strokeWidth={1}\r\n />\r\n\r\n {/* grid lines */}\r\n {horizontalGridLines.map((points, index) => (\r\n <Line\r\n key={index}\r\n points={points}\r\n stroke={colorMapRes.grid}\r\n strokeWidth={1}\r\n lineCap=\"round\"\r\n lineJoin=\"round\"\r\n listening={false}\r\n />\r\n ))}\r\n {verticalGridLines.map((points, index) => (\r\n <Line\r\n key={index}\r\n points={points}\r\n stroke={colorMapRes.grid}\r\n strokeWidth={1}\r\n lineCap=\"round\"\r\n lineJoin=\"round\"\r\n listening={false}\r\n />\r\n ))}\r\n\r\n {/* abscissa tick mark */}\r\n {horizontalLabelTickPoints.map((tickPoints, index) => (\r\n <Line\r\n key={index}\r\n points={tickPoints}\r\n stroke=\"#9d9d9d\"\r\n strokeWidth={1}\r\n lineCap=\"round\"\r\n lineJoin=\"round\"\r\n listening={false}\r\n />\r\n ))}\r\n {horizontalLabelTextPoints.map((textPoint, index) => (\r\n <Text\r\n key={index}\r\n x={textPoint.x}\r\n y={textPoint.y}\r\n text={textPoint.text}\r\n fontFamily=\"Manrope\"\r\n fontSize={12}\r\n fill=\"#9d9d9d\"\r\n width={oneXPx}\r\n padding={0}\r\n align=\"center\"\r\n verticalAlign=\"bottom\"\r\n listening={false}\r\n />\r\n ))}\r\n\r\n {/* Depth map lines */}\r\n <Line\r\n points={quoteLineAreaPoints}\r\n closed\r\n listening={false}\r\n lineCap=\"round\"\r\n lineJoin=\"round\"\r\n fillLinearGradientStartPoint={{ x: 0, y: chartHeight }}\r\n fillLinearGradientEndPoint={{\r\n x: 0,\r\n y: quoteLineAreaLinearGradientEndPointY,\r\n }}\r\n fillLinearGradientColorStops={colorMapRes.leftBg}\r\n />\r\n <Line\r\n points={quoteLinePoints}\r\n stroke={colorMapRes.leftLine}\r\n strokeWidth={2}\r\n lineCap=\"round\"\r\n lineJoin=\"round\"\r\n listening={false}\r\n />\r\n <Line\r\n points={baseLineAreaPoints}\r\n closed\r\n listening={false}\r\n lineCap=\"round\"\r\n lineJoin=\"round\"\r\n fillLinearGradientStartPoint={{ x: chartWidth, y: chartHeight }}\r\n fillLinearGradientEndPoint={{\r\n x: chartWidth,\r\n y: baseLineAreaLinearGradientEndPointY,\r\n }}\r\n fillLinearGradientColorStops={colorMapRes.rightBg}\r\n />\r\n <Line\r\n points={baseLinePoints}\r\n stroke={colorMapRes.rightLine}\r\n strokeWidth={2}\r\n lineCap=\"round\"\r\n lineJoin=\"round\"\r\n listening={false}\r\n />\r\n <Line\r\n points={midPriceLinePoints}\r\n stroke={colorMapRes.midPriceLine}\r\n strokeWidth={2}\r\n lineCap=\"round\"\r\n lineJoin=\"round\"\r\n listening={false}\r\n />\r\n </Layer>\r\n\r\n <Layer ref={tooltipRef} visible={false} listening={false}>\r\n <Line\r\n points={[]}\r\n stroke=\"#ff4f73\"\r\n strokeWidth={1}\r\n lineCap=\"round\"\r\n lineJoin=\"round\"\r\n dash={[4, 6]}\r\n id=\"toolTipVertLine\"\r\n />\r\n <Line\r\n points={[]}\r\n stroke=\"ff4f73\"\r\n strokeWidth={1}\r\n lineCap=\"round\"\r\n lineJoin=\"round\"\r\n dash={[4, 6]}\r\n id=\"toolTipHoriLine\"\r\n />\r\n <Circle\r\n x={0}\r\n y={0}\r\n radius={5}\r\n fill=\"#FF5072\"\r\n stroke=\"rgba(255, 80, 114, 0.3)\"\r\n strokeWidth={12}\r\n id=\"joinCircle\"\r\n />\r\n <Label x={0} y={0} id=\"priceTextLabel\">\r\n <Tag fill={colorMapRes.tooltipBg} id=\"priceTextLabel-tag\" />\r\n <Text\r\n text=\"\"\r\n fontSize={12}\r\n fontFamily=\"Manrope\"\r\n padding={4}\r\n fill=\"#FF5072\"\r\n id=\"priceTextLabel-text\"\r\n />\r\n </Label>\r\n <Label x={0} y={0} id=\"slippageTextLabel\">\r\n <Tag fill={colorMapRes.tooltipBg} id=\"slippageTextLabel-tag\" />\r\n <Text\r\n text=\"\"\r\n fontSize={12}\r\n fontFamily=\"Manrope\"\r\n padding={4}\r\n fill=\"#FF5072\"\r\n id=\"slippageTextLabel-text\"\r\n />\r\n </Label>\r\n <Label x={0} y={0} id=\"toolTip\">\r\n <Tag\r\n fill={colorMapRes.tooltipBg}\r\n pointerDirection=\"down\"\r\n pointerWidth={toolTipPointerWidth}\r\n pointerHeight={toolTipPointerHeight}\r\n cornerRadius={toolTipPointerHeight}\r\n lineJoin=\"round\"\r\n id=\"toolTip-tag\"\r\n />\r\n <Text\r\n text=\"-\"\r\n fontSize={12}\r\n lineHeight={17 / 12}\r\n padding={labelPadding}\r\n fontFamily=\"Manrope\"\r\n fill=\"#FFFFFF\"\r\n id=\"toolTip-text\"\r\n />\r\n </Label>\r\n </Layer>\r\n </Stage>\r\n );\r\n}\r\n","import { useMemo } from 'react';\r\n\r\nexport function useGridLinePoints({\r\n chartHeight,\r\n chartWidth,\r\n horizontalLineCount,\r\n verticalLineCount,\r\n}: {\r\n chartHeight: number;\r\n chartWidth: number;\r\n horizontalLineCount: number;\r\n verticalLineCount: number;\r\n}) {\r\n return useMemo(() => {\r\n const horizontalGridLines: Array<Array<number>> = [];\r\n const horizontalGridPerBlockHeight =\r\n chartHeight / (horizontalLineCount + 1);\r\n const verticalGridLines: Array<Array<number>> = [];\r\n const verticalGridPerBlockWidth = chartWidth / verticalLineCount;\r\n for (let index = 0; index < horizontalLineCount; index++) {\r\n const y = horizontalGridPerBlockHeight * (index + 1);\r\n horizontalGridLines.push([0, y, chartWidth, y]);\r\n }\r\n for (let index = 0; index < verticalLineCount; index++) {\r\n const x =\r\n verticalGridPerBlockWidth * index + verticalGridPerBlockWidth / 2;\r\n verticalGridLines.push([x, 0, x, chartHeight]);\r\n }\r\n return {\r\n horizontalGridLines,\r\n verticalGridLines,\r\n };\r\n }, [chartHeight, chartWidth, horizontalLineCount, verticalLineCount]);\r\n}\r\n","import { useMemo } from 'react';\r\nimport { formatShortNumber } from '../../../utils/formatter';\r\nimport { BaseMinAndZoomMultiples, computeXPortion } from './helper';\r\n\r\nexport function useHorizontalLabelPoints({\r\n chartHeight,\r\n chartWidth,\r\n xAxisPoints,\r\n oneXPx,\r\n baseMinAndZoomMultiples,\r\n}: {\r\n chartHeight: number;\r\n chartWidth: number;\r\n xAxisPoints: number;\r\n oneXPx: number;\r\n baseMinAndZoomMultiples: BaseMinAndZoomMultiples;\r\n}) {\r\n return useMemo(() => {\r\n const xPortion = computeXPortion(\r\n chartWidth,\r\n baseMinAndZoomMultiples.zoomMultiples,\r\n );\r\n const horizontalLabelTickPoints: Array<Array<number>> = [];\r\n const horizontalLabelTextPoints: Array<{\r\n x: number;\r\n y: number;\r\n text: string;\r\n }> = [];\r\n for (let i = 0; i < xAxisPoints; i++) {\r\n horizontalLabelTickPoints.push([\r\n i * oneXPx + oneXPx / 2,\r\n chartHeight,\r\n i * oneXPx + oneXPx / 2,\r\n chartHeight + 4,\r\n ]);\r\n\r\n const power = xPortion\r\n .multipliedBy(i)\r\n .multipliedBy(oneXPx)\r\n .plus(xPortion.multipliedBy(oneXPx / 2))\r\n .toNumber();\r\n const axisNum = baseMinAndZoomMultiples.baseMin.multipliedBy(10 ** power);\r\n\r\n const x = i * oneXPx;\r\n const y = chartHeight + 2 + 4;\r\n const text = formatShortNumber(axisNum);\r\n horizontalLabelTextPoints.push({\r\n x,\r\n y,\r\n text,\r\n });\r\n }\r\n\r\n return {\r\n horizontalLabelTickPoints,\r\n horizontalLabelTextPoints,\r\n };\r\n }, [\r\n baseMinAndZoomMultiples.baseMin,\r\n baseMinAndZoomMultiples.zoomMultiples,\r\n chartHeight,\r\n chartWidth,\r\n oneXPx,\r\n xAxisPoints,\r\n ]);\r\n}\r\n","import { PMMModel } from '@dodoex/api';\r\nimport BigNumber from 'bignumber.js';\r\nimport { useMemo } from 'react';\r\nimport { BaseMinAndZoomMultiples, computeXPortion, evalPoint } from './helper';\r\n\r\nexport function useDepthLinePoints({\r\n chartHeight,\r\n chartWidth,\r\n midPrice,\r\n xPoints,\r\n pmmModel,\r\n baseMinAndZoomMultiples,\r\n buyYPortion,\r\n sellYPortion,\r\n}: {\r\n chartHeight: number;\r\n chartWidth: number;\r\n xPoints: number;\r\n midPrice: BigNumber;\r\n baseMinAndZoomMultiples: BaseMinAndZoomMultiples;\r\n buyYPortion: BigNumber;\r\n sellYPortion: BigNumber;\r\n pmmModel: PMMModel;\r\n}) {\r\n return useMemo(() => {\r\n const quoteLinePoints: Array<number> = [];\r\n const baseLinePoints: Array<number> = [];\r\n const midPriceLinePoints: Array<number> = [];\r\n\r\n const { baseMin, zoomMultiples } = baseMinAndZoomMultiples;\r\n\r\n const xPortion = computeXPortion(chartWidth, zoomMultiples);\r\n\r\n // 1 -> 10 -> 100 index increases from 0 to 2\r\n // If the minimum value on the left is not midPrice/10, the existing calculation method is to calculate the maximum value based on the minimum value and multiply by 10^2\r\n const multiplesNum = zoomMultiples * 2;\r\n const step = new BigNumber(multiplesNum).div(xPoints);\r\n // The position of the middle price\r\n let midPriceN = new BigNumber(\r\n Math.log(midPrice.div(baseMin).toNumber()) / Math.log(10),\r\n );\r\n midPriceN = BigNumber.minimum(multiplesNum, midPriceN);\r\n midPriceN = BigNumber.maximum(0, midPriceN);\r\n for (let i = new BigNumber(0); i.lte(midPriceN); ) {\r\n const price = baseMin.multipliedBy(10 ** i.toNumber());\r\n const result = evalPoint({ val: price, model: pmmModel, midPrice });\r\n if (!result.vert.isNaN()) {\r\n const x = i.div(xPortion).toNumber();\r\n const y = chartHeight - result.vert.div(buyYPortion).toNumber();\r\n\r\n quoteLinePoints.push(x, y);\r\n }\r\n i = i.plus(step);\r\n }\r\n\r\n for (let i = midPriceN; i.lte(multiplesNum); ) {\r\n const price = baseMin.multipliedBy(10 ** i.toNumber());\r\n const result = evalPoint({ val: price, model: pmmModel, midPrice });\r\n if (!result.vert.isNaN()) {\r\n const x = i.div(xPortion).toNumber();\r\n const y = chartHeight - result.vert.div(sellYPortion).toNumber();\r\n\r\n baseLinePoints.push(x, y);\r\n }\r\n i = i.plus(step);\r\n }\r\n\r\n const midPriceX = midPriceN.div(xPortion).toNumber();\r\n\r\n const [, firstY] = quoteLinePoints;\r\n // k === 0 means selling coins at a constant price. The curve is two horizontal lines and requires special processing.\r\n const isZeroK = pmmModel.k.eq(0);\r\n if (isZeroK) {\r\n quoteLinePoints.push(midPriceX, firstY || chartHeight);\r\n }\r\n quoteLinePoints.push(midPriceX, chartHeight);\r\n\r\n midPriceLinePoints.push(midPriceX, chartHeight, midPriceX, 0);\r\n\r\n const maxResult = evalPoint({\r\n val: baseMin.multipliedBy(10 ** multiplesNum),\r\n model: pmmModel,\r\n midPrice,\r\n });\r\n let maxHeightY = chartHeight;\r\n const maxHeightX = new BigNumber(multiplesNum).div(xPortion).toNumber();\r\n if (!maxResult.vert.isNaN()) {\r\n maxHeightY = chartHeight - maxResult.vert.div(sellYPortion).toNumber();\r\n }\r\n if (isZeroK && baseLinePoints.length >= 2) {\r\n baseLinePoints.unshift(midPriceX, maxHeightY);\r\n baseLinePoints.unshift(midPriceX, chartHeight);\r\n }\r\n\r\n baseLinePoints.push(maxHeightX, maxHeightY);\r\n // The left side has been dragged to the left side of baseMin\r\n if (midPriceN.lte(0)) {\r\n baseLinePoints.unshift(0, chartHeight);\r\n }\r\n\r\n return {\r\n quoteLinePoints,\r\n quoteLineAreaPoints: [0, chartHeight, 0, firstY, ...quoteLinePoints],\r\n quoteLineAreaLinearGradientEndPointY: firstY,\r\n baseLinePoints,\r\n baseLineAreaPoints: [...baseLinePoints, maxHeightX, chartHeight],\r\n baseLineAreaLinearGradientEndPointY: maxHeightY,\r\n midPriceLinePoints,\r\n };\r\n }, [\r\n baseMinAndZoomMultiples,\r\n chartWidth,\r\n xPoints,\r\n midPrice,\r\n pmmModel,\r\n chartHeight,\r\n buyYPortion,\r\n sellYPortion,\r\n ]);\r\n}\r\n","import styled from '@emotion/styled';\r\n\r\nexport const BaseButton = styled.button`\r\n margin: 0;\r\n border: none;\r\n padding: 0;\r\n background: none;\r\n\r\n &:focus {\r\n outline: none;\r\n }\r\n &:active {\r\n outline: none;\r\n }\r\n`;\r\n","import styled from '@emotion/styled';\nimport { BaseButton } from '../components/BaseButton';\n\nexport const Container = styled.div`\n height: 100%;\n`;\n\nexport const AmountInputContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const InputSectionWrapper = styled.div<{ borderColor?: string }>`\n border: 1px solid ${({ borderColor }) => borderColor || '#2a2a2d'};\n flex: 1 0 50%;\n\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: 400;\n line-height: 17px;\n color: #606066;\n\n & + & {\n border-left: none;\n }\n`;\n\nexport const PriceImpactWrapper = styled.span`\n color: #85858d;\n`;\n\nexport const OptButtonGroup = styled.div`\n margin-top: 20px;\n display: flex;\n justify-content: center;\n margin-bottom: 9px;\n`;\n\nexport const OptButton = styled(BaseButton)`\n border-radius: 13px;\n background-color: #373739;\n width: 24px;\n height: 24px;\n font-size: 18px;\n color: #85858d;\n line-height: 0;\n & + & {\n margin-left: 10px;\n }\n &:first-child,\n &:last-child {\n font-size: 20px;\n }\n\n &:hover {\n color: #fff;\n }\n`;\n","import {\r\n PMMModel,\r\n PmmModelParams,\r\n solveQuadraticFunctionForTarget,\r\n} from '@dodoex/api';\r\nimport BigNumber from 'bignumber.js';\r\n\r\n/**\r\n * Calculate marginPrice for buying or selling target baseToken\r\n * @param param0\r\n * @returns\r\n */\r\nexport function computeMarginPrice({\r\n params,\r\n target,\r\n isBuy = true,\r\n}: {\r\n params: PmmModelParams;\r\n target: BigNumber;\r\n isBuy?: boolean;\r\n}) {\r\n const b = new BigNumber(params.b);\r\n const q = new BigNumber(params.q);\r\n let b0 = new BigNumber(params.b0);\r\n const q0 = new BigNumber(params.q0);\r\n const i = new BigNumber(params.i);\r\n const k = new BigNumber(params.k);\r\n const { R } = params;\r\n\r\n // When created, b0 is equal to b, and a b0 needs to be calculated.\r\n if (R === 1 && b0.eq(b)) {\r\n b0 = solveQuadraticFunctionForTarget(\r\n b,\r\n q.minus(q0),\r\n new BigNumber(1).div(i),\r\n k,\r\n );\r\n }\r\n\r\n const newB = isBuy ? b.plus(target) : b.minus(target);\r\n\r\n if (newB.lt(b0) || b.eq(b0)) {\r\n // b < b0: The shortage of baseToken corresponds to the user buying baseToken. At this time, the quoteToken in the pool is higher than the regression target; the price curve is directly used to calculate the marginal price.\r\n let r = b0.multipliedBy(b0).div(newB).div(newB);\r\n r = new BigNumber(1).minus(k).plus(k.multipliedBy(r));\r\n return i.multipliedBy(r);\r\n }\r\n\r\n // There is a shortage of quoteToken, which corresponds to the user selling baseToken, causing the number of quoteTokens in the pool to be lower than the return target at this time; the parameter target is the number of baseTokens sold by the user, and it is necessary to calculate the number of quoteTokens obtained after selling based on this value, that is, the user How many quoteTokens are obtained; then put this value into the price curve equation to calculate the marginal price.\r\n const pmm = new PMMModel();\r\n pmm.RStatus = R;\r\n pmm.B = b;\r\n pmm.B0 = b0;\r\n pmm.Q = q;\r\n pmm.Q0 = q0;\r\n pmm.i = i;\r\n pmm.k = k;\r\n pmm.mtFeeRate = new BigNumber(0);\r\n pmm.lpFeeRate = new BigNumber(0);\r\n\r\n let getAmount: BigNumber = new BigNumber(0);\r\n if (isBuy) {\r\n getAmount = pmm.querySellBase(target);\r\n } else {\r\n getAmount = pmm.queryBuyBase(target);\r\n }\r\n\r\n const deltaQ = isBuy ? q.minus(getAmount) : q.plus(getAmount);\r\n let r = q0.multipliedBy(q0).div(deltaQ).div(deltaQ);\r\n r = new BigNumber(1).minus(k).plus(k.multipliedBy(r));\r\n return i.div(r);\r\n}\r\n\r\n/**\r\n * Calculate the margin price for selling target baseTokens\r\n */\r\nexport function computeSellMarginPrice({\r\n params,\r\n target,\r\n}: {\r\n params: PmmModelParams;\r\n target: BigNumber;\r\n}) {\r\n return computeMarginPrice({\r\n params,\r\n target,\r\n isBuy: false,\r\n });\r\n}\r\n","import BigNumber from 'bignumber.js';\r\nimport { debounce } from 'lodash';\r\nimport { useEffect, useMemo, useState } from 'react';\r\nimport { BiChevronLeft, BiChevronRight, BiMinus, BiPlus } from 'react-icons/bi';\r\nimport { Input } from '../components/Input';\r\nimport { usePreventWheel } from '../hooks/usePreventWheel';\r\nimport { ColorMap, DepthChartKonva } from './DepthChartKonva';\r\nimport { chartT as t } from '../i18n';\r\nimport {\r\n BaseMinAndZoomMultiples,\r\n baseZoomMultiples,\r\n beforePriceImpactEffect,\r\n computeBaseAfterZoom,\r\n computeBaseMinByDistance,\r\n computeTargetXByTargetPrice,\r\n computeZoomMultiplesWhenZoom,\r\n} from './helper';\r\nimport {\r\n AmountInputContainer,\r\n Container,\r\n InputSectionWrapper,\r\n OptButton,\r\n OptButtonGroup,\r\n PriceImpactWrapper,\r\n} from './index.styled';\r\nimport { computeMarginPrice, computeSellMarginPrice } from './utils';\r\nimport { PMMModel, PmmModelParams } from '@dodoex/api';\r\nimport {\r\n fixedInputStringToFormattedNumber,\r\n formatPercentageNumber,\r\n} from '../../../utils/formatter';\r\n\r\ntype Props = {\r\n chartId: string;\r\n width?: number;\r\n baseTokenSymbol: string;\r\n quoteTokenSymbol: string;\r\n pmmModel?: PMMModel;\r\n pmmParams?: PmmModelParams;\r\n midPrice?: BigNumber;\r\n height?: number;\r\n notShowAmountInput?: boolean;\r\n colorMap?: ColorMap;\r\n};\r\n\r\nconst DepthChart: React.FC<Props> = ({\r\n chartId,\r\n width = 834,\r\n height = 460,\r\n baseTokenSymbol,\r\n quoteTokenSymbol,\r\n pmmModel,\r\n pmmParams,\r\n midPrice = new BigNumber(0),\r\n colorMap,\r\n notShowAmountInput,\r\n}: Props) => {\r\n usePreventWheel({ id: chartId });\r\n\r\n const [buyAmount, setBuyAmount] = useState<string>('');\r\n const [sellAmount, setSellAmount] = useState<string>('');\r\n const [buyImpact, setBuyImpact] = useState('-');\r\n const [sellImpact, setSellImpact] = useState('-');\r\n\r\n // 横轴起点和缩放比例同时变化，变化也会引起价格冲击点变化\r\n const [baseMinAndZoomMultiples, setBaseMinAndZoomMultiples] =\r\n useState<BaseMinAndZoomMultiples>({\r\n baseMin: new BigNumber(0),\r\n zoomMultiples: baseZoomMultiples,\r\n targetMarginPriceX: 0,\r\n });\r\n\r\n useEffect(() => {\r\n if (midPrice !== undefined) {\r\n setBaseMinAndZoomMultiples((prev) => {\r\n return {\r\n baseMin: computeBaseAfterZoom({\r\n midPrice,\r\n zoomMultiples: prev.zoomMultiples,\r\n }),\r\n zoomMultiples: prev.zoomMultiples,\r\n targetMarginPriceX: prev.targetMarginPriceX,\r\n };\r\n });\r\n }\r\n }, [midPrice]);\r\n\r\n const amountOnChange = useMemo(\r\n () =>\r\n debounce(({ type, amount }: { type: 'buy' | 'sell'; amount: string }) => {\r\n if (amount === '' && midPrice) {\r\n setBaseMinAndZoomMultiples({\r\n baseMin: computeBaseAfterZoom({\r\n midPrice,\r\n zoomMultiples: baseZoomMultiples,\r\n }),\r\n zoomMultiples: baseZoomMultiples,\r\n targetMarginPriceX: 0,\r\n });\r\n if (type === 'buy') {\r\n setBuyImpact('-');\r\n } else {\r\n setSellImpact('-');\r\n }\r\n }\r\n const amountB = new BigNumber(amount);\r\n if (\r\n amountB.lte(0) ||\r\n amountB.isNaN() ||\r\n !pmmParams?.b ||\r\n amountB.gte(pmmParams.b) ||\r\n !midPrice\r\n ) {\r\n return;\r\n }\r\n if (type === 'buy') {\r\n const marginPrice = computeMarginPrice({\r\n params: pmmParams,\r\n target: amountB,\r\n });\r\n setBaseMinAndZoomMultiples((prev) => {\r\n const impactResult = beforePriceImpactEffect({\r\n currentBaseMinAndZoomMultiples: prev,\r\n targetPrice: marginPrice,\r\n midPrice,\r\n width,\r\n });\r\n if (impactResult.isSkip) {\r\n return {\r\n baseMin: prev.baseMin,\r\n zoomMultiples: prev.zoomMultiples,\r\n targetMarginPriceX: impactResult.targetX,\r\n };\r\n }\r\n\r\n if (impactResult.targetX > 0) {\r\n return {\r\n baseMin: impactResult.baseMin,\r\n zoomMultiples: impactResult.zoomMultiples,\r\n targetMarginPriceX: impactResult.targetX,\r\n };\r\n }\r\n\r\n const result = computeTargetXByTargetPrice({\r\n midPrice,\r\n width,\r\n type,\r\n targetPrice: marginPrice,\r\n });\r\n const newZoomMultiples = result.zoomMultiples.dp(6).toNumber();\r\n return {\r\n baseMin: computeBaseAfterZoom({\r\n midPrice,\r\n zoomMultiples: newZoomMultiples,\r\n }),\r\n zoomMultiples: newZoomMultiples,\r\n targetMarginPriceX: result.targetX,\r\n };\r\n });\r\n // console.log(\r\n // 'v2 marginPrice',\r\n // amountB.toFixed(6),\r\n // marginPrice.toFixed(6),\r\n // result.targetX,\r\n // result.zoomMultiples.toFixed(6),\r\n // );\r\n setBuyImpact(\r\n `${formatPercentageNumber({\r\n input: marginPrice.minus(midPrice).div(midPrice),\r\n })}`,\r\n );\r\n } else {\r\n const marginPrice = computeSellMarginPrice({\r\n params: pmmParams,\r\n target: amountB,\r\n });\r\n setBaseMinAndZoomMultiples((prev) => {\r\n const impactResult = beforePriceImpactEffect({\r\n currentBaseMinAndZoomMultiples: prev,\r\n targetPrice: marginPrice,\r\n midPrice,\r\n width,\r\n });\r\n if (impactResult.isSkip) {\r\n return {\r\n baseMin: prev.baseMin,\r\n zoomMultiples: prev.zoomMultiples,\r\n targetMarginPriceX: impactResult.targetX,\r\n };\r\n }\r\n\r\n if (impactResult.targetX > 0) {\r\n return {\r\n baseMin: impactResult.baseMin,\r\n zoomMultiples: impactResult.zoomMultiples,\r\n targetMarginPriceX: impactResult.targetX,\r\n };\r\n }\r\n const result = computeTargetXByTargetPrice({\r\n midPrice,\r\n width,\r\n type,\r\n targetPrice: marginPrice,\r\n });\r\n const newZoomMultiples = result.zoomMultiples.dp(6).toNumber();\r\n return {\r\n baseMin: computeBaseAfterZoom({\r\n midPrice,\r\n zoomMultiples: newZoomMultiples,\r\n }),\r\n zoomMultiples: newZoomMultiples,\r\n targetMarginPriceX: result.targetX,\r\n };\r\n });\r\n setSellImpact(\r\n `+${formatPercentageNumber({\r\n input: marginPrice.minus(midPrice).div(midPrice),\r\n })}`,\r\n );\r\n }\r\n }, 300),\r\n [pmmParams, midPrice, width],\r\n );\r\n useEffect(() => {\r\n if (buyAmount !== undefined) {\r\n amountOnChange({\r\n type: 'buy',\r\n amount: buyAmount,\r\n });\r\n }\r\n }, [amountOnChange, buyAmount]);\r\n useEffect(() => {\r\n if (sellAmount !== undefined) {\r\n amountOnChange({\r\n type: 'sell',\r\n amount: sellAmount,\r\n });\r\n }\r\n }, [amountOnChange, sellAmount]);\r\n\r\n const handleDragButtonMouseDown = (moveLeft?: boolean) => {\r\n let dragDistance = 0;\r\n if (moveLeft) {\r\n dragDistance = -(width * 0.1);\r\n } else {\r\n dragDistance = width * 0.1;\r\n }\r\n setBaseMinAndZoomMultiples((prev) => {\r\n if (prev.baseMin === undefined) {\r\n return prev;\r\n }\r\n return {\r\n baseMin: computeBaseMinByDistance({\r\n dragDistance,\r\n prevBaseMin: prev.baseMin,\r\n chartWidth: width,\r\n zoomMultiples: prev.zoomMultiples,\r\n }),\r\n zoomMultiples: prev.zoomMultiples,\r\n targetMarginPriceX: prev.targetMarginPriceX,\r\n };\r\n });\r\n };\r\n\r\n const handleZoomButtonMouseDown = (zoomIn?: boolean) => {\r\n setBaseMinAndZoomMultiples((prev) => {\r\n const newZoomMultiples = computeZoomMultiplesWhenZoom({\r\n zoomIn: zoomIn ?? false,\r\n prevZoomMultiples: prev.zoomMultiples,\r\n });\r\n return {\r\n baseMin: computeBaseAfterZoom({\r\n midPrice,\r\n zoomMultiples: newZoomMultiples,\r\n }),\r\n zoomMultiples: newZoomMultiples,\r\n targetMarginPriceX: prev.targetMarginPriceX,\r\n };\r\n });\r\n };\r\n\r\n const buyInputError = useMemo(() => {\r\n if (buyAmount === '') {\r\n return false;\r\n }\r\n const amountB = new BigNumber(buyAmount);\r\n if (\r\n amountB.lte(0) ||\r\n amountB.isNaN() ||\r\n !pmmParams?.b ||\r\n amountB.gte(pmmParams.b)\r\n ) {\r\n return true;\r\n }\r\n return false;\r\n }, [buyAmount, pmmParams]);\r\n const sellInputError = useMemo(() => {\r\n if (sellAmount === '') {\r\n return false;\r\n }\r\n const amountB = new BigNumber(sellAmount);\r\n if (\r\n amountB.lte(0) ||\r\n amountB.isNaN() ||\r\n !pmmParams?.b ||\r\n amountB.gte(pmmParams.b)\r\n ) {\r\n return true;\r\n }\r\n return false;\r\n }, [sellAmount, pmmParams]);\r\n\r\n return (\r\n <Container id={chartId}>\r\n {!notShowAmountInput ? (\r\n <AmountInputContainer>\r\n <InputSectionWrapper borderColor={colorMap && colorMap.grid}>\r\n {t('pool.chart.buy-amount', { symbol: baseTokenSymbol })}\r\n <Input\r\n value={buyAmount}\r\n error={buyInputError}\r\n onChange={(evt) => {\r\n const amount = fixedInputStringToFormattedNumber(\r\n evt.target.value,\r\n 2,\r\n );\r\n if (amount !== null) {\r\n setBuyAmount(amount);\r\n }\r\n }}\r\n />\r\n <PriceImpactWrapper>\r\n {t('pool.chart.price-impact', { amount: buyImpact })}\r\n </PriceImpactWrapper>\r\n </InputSectionWrapper>\r\n <InputSectionWrapper borderColor={colorMap && colorMap.grid}>\r\n {t('pool.chart.sell-amount', { symbol: baseTokenSymbol })}\r\n <Input\r\n value={sellAmount}\r\n error={sellInputError}\r\n onChange={(evt) => {\r\n const amount = fixedInputStringToFormattedNumber(\r\n evt.target.value,\r\n 2,\r\n );\r\n if (amount !== null) {\r\n setSellAmount(amount);\r\n }\r\n }}\r\n />\r\n <PriceImpactWrapper>\r\n {t('pool.chart.price-impact', { amount: sellImpact })}\r\n </PriceImpactWrapper>\r\n </InputSectionWrapper>\r\n </AmountInputContainer>\r\n ) : (\r\n ''\r\n )}\r\n\r\n {pmmParams !== undefined &&\r\n midPrice !== undefined &&\r\n pmmModel !== undefined &&\r\n baseMinAndZoomMultiples.baseMin !== undefined &&\r\n midPrice !== undefined && (\r\n <DepthChartKonva\r\n width={width}\r\n height={height}\r\n params={pmmParams}\r\n midPrice={midPrice}\r\n pmmModel={pmmModel}\r\n baseTokenSymbol={baseTokenSymbol}\r\n quoteTokenSymbol={quoteTokenSymbol}\r\n baseMinAndZoomMultiples={baseMinAndZoomMultiples}\r\n colorMap={colorMap}\r\n setBaseMinAndZoomMultiples={setBaseMinAndZoomMultiples}\r\n />\r\n )}\r\n\r\n <OptButtonGroup className=\"operate-btn-wrapper\">\r\n <OptButton onClick={() => handleDragButtonMouseDown(true)}>\r\n <BiChevronLeft />\r\n </OptButton>\r\n <OptButton onClick={() => handleZoomButtonMouseDown(false)}>\r\n <BiMinus />\r\n </OptButton>\r\n <OptButton onClick={() => handleZoomButtonMouseDown(true)}>\r\n <BiPlus />\r\n </OptButton>\r\n <OptButton onClick={() => handleDragButtonMouseDown(false)}>\r\n <BiChevronRight />\r\n </OptButton>\r\n </OptButtonGroup>\r\n </Container>\r\n );\r\n};\r\n\r\nexport default DepthChart;\r\n","import { useEffect } from 'react';\r\n\r\ntype Props = {\r\n id: string;\r\n};\r\n\r\n/**\r\n * 防止鼠标在图上滚动滚轮时页面上下滑动\r\n * @param param0\r\n */\r\nexport const usePreventWheel = ({ id }: Props) => {\r\n useEffect(() => {\r\n function handleWheelEvt(event: HTMLElementEventMap['wheel']) {\r\n event.preventDefault();\r\n }\r\n\r\n // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support\r\n let passiveSupported = false;\r\n\r\n try {\r\n const options = {\r\n get passive() {\r\n // This function will be called when the browser\r\n // attempts to access the passive property.\r\n passiveSupported = true;\r\n return false;\r\n },\r\n };\r\n\r\n // eslint-disable-next-line @typescript-eslint/no-empty-function\r\n window.addEventListener('test', () => {}, options);\r\n // eslint-disable-next-line @typescript-eslint/no-empty-function\r\n window.removeEventListener('test', () => {});\r\n } catch (err) {\r\n passiveSupported = false;\r\n }\r\n const container = document.getElementById(id);\r\n // https://github.com/inuyaksa/jquery.nicescroll/issues/799\r\n const options = passiveSupported ? { passive: false } : false;\r\n container?.addEventListener('wheel', handleWheelEvt, options);\r\n return () => {\r\n container?.removeEventListener('wheel', handleWheelEvt);\r\n };\r\n }, [id]);\r\n};\r\n"],"names":["Input","styled","input","error","css","bgColor","DepthChartKonva","width","height","midPrice","pmmModel","params","baseTokenSymbol","quoteTokenSymbol","baseMinAndZoomMultiples","colorMap","setBaseMinAndZoomMultiples","colorMapRes","merge","grid","midPriceLine","leftBg","leftLine","leftColor","rightBg","rightLine","rightColor","tooltipBg","tooltipColor","undefined","chartWidth","chartHeight","oneXPx","buyBaseVert","sellBaseVert","computeBaseVert","q","q0","buyYPortion","div","sellYPortion","tooltipRef","useRef","stageRef","current","tooltip","dragStartXRef","pointerXRef","horizontalGridLines","verticalGridLines","horizontalLineCount","verticalLineCount","useMemo","horizontalGridPerBlockHeight","verticalGridPerBlockWidth","index","y","push","x","useGridLinePoints","horizontalLabelTickPoints","horizontalLabelTextPoints","xAxisPoints","xPortion","computeXPortion","zoomMultiples","i","power","multipliedBy","plus","toNumber","axisNum","baseMin","text","formatShortNumber","useHorizontalLabelPoints","quoteLinePoints","quoteLineAreaPoints","quoteLineAreaLinearGradientEndPointY","baseLinePoints","baseLineAreaPoints","baseLineAreaLinearGradientEndPointY","midPriceLinePoints","xPoints","multiplesNum","step","BigNumber","midPriceN","Math","log","minimum","maximum","lte","price","result","evalPoint","val","model","vert","isNaN","midPriceX","firstY","isZeroK","k","eq","maxResult","maxHeightY","maxHeightX","length","unshift","useDepthLinePoints","handleMouseover","evt","node","target","mousePos","_a","getStage","getPointerPosition","hide","updateTooltip","t","isHover","color","updateWhenDrag","throttle","stage","container","style","cursor","dragDistance","prev","computeBaseMinByDistance","prevBaseMin","targetMarginPriceX","updateWhenWheel","event","cancelBubble","preventDefault","isScrollUp","deltaY","newZoomMultiples","computeZoomMultiplesWhenZoom","zoomIn","prevZoomMultiples","computeBaseAfterZoom","useEffect","_jsxs","Stage","ref","offsetY","chartOffsetYBCToolTip","draggable","dragBoundFunc","this","absolutePosition","onMouseMove","onMouseOver","onMouseOut","handleMouseOut","onDragStart","onDragMove","onDragEnd","onWheel","children","Layer","_jsx","Rect","stroke","strokeWidth","map","points","Line","lineCap","lineJoin","listening","tickPoints","textPoint","Text","fontFamily","fontSize","fill","padding","align","verticalAlign","closed","fillLinearGradientStartPoint","fillLinearGradientEndPoint","fillLinearGradientColorStops","visible","dash","id","Circle","radius","Label","Tag","pointerDirection","pointerWidth","pointerHeight","cornerRadius","lineHeight","labelPadding","BaseButton","button","Container","AmountInputContainer","InputSectionWrapper","borderColor","PriceImpactWrapper","span","OptButtonGroup","OptButton","computeMarginPrice","isBuy","b","b0","R","solveQuadraticFunctionForTarget","minus","newB","lt","r","pmm","PMMModel","RStatus","B","B0","Q","Q0","mtFeeRate","lpFeeRate","getAmount","querySellBase","queryBuyBase","deltaQ","DepthChart","chartId","pmmParams","notShowAmountInput","usePreventWheel","handleWheelEvt","passiveSupported","options","passive","window","addEventListener","removeEventListener","err","document","getElementById","buyAmount","setBuyAmount","useState","sellAmount","setSellAmount","buyImpact","setBuyImpact","sellImpact","setSellImpact","baseZoomMultiples","amountOnChange","debounce","type","amount","amountB","gte","marginPrice","impactResult","beforePriceImpactEffect","currentBaseMinAndZoomMultiples","targetPrice","isSkip","targetX","computeTargetXByTargetPrice","dp","formatPercentageNumber","computeSellMarginPrice","handleDragButtonMouseDown","moveLeft","handleZoomButtonMouseDown","buyInputError","sellInputError","symbol","value","onChange","fixedInputStringToFormattedNumber","className","onClick","BiChevronLeft","BiMinus","BiPlus","BiChevronRight"],"mappings":"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"}
package/dist/{index-NvXIILf2.js → index-CzWyt6aR.js} RENAMED
@@ -1,4 +1,4 @@
1
- import t from"@emotion/styled";import{merge as e}from"lodash";import{useMemo as i,useRef as n}from"react";import{l as r,h as o,m as l}from"./helper-CR3d8R3E.js";import{Line as a,Text as s,Stage as d,Layer as m,Rect as p,Circle as g,Label as u,Tag as c}from"react-konva";import{f as h}from"./index-fvIq-P8n.js";import f from"bignumber.js";import{jsxs as x,Fragment as L,jsx as b}from"react/jsx-runtime";import{solveQuadraticFunctionForTarget as w,PMMState as A,PMMHelper as y}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/utc";import"dayjs/plugin/duration";import"dayjs/plugin/localizedFormat";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 P=t.div`
1
+ import t from"@emotion/styled";import{merge as e}from"lodash";import{useMemo as i,useRef as n}from"react";import{l as r,h as o,m as l}from"./helper-11UQcCio.js";import{Line as a,Text as s,Stage as d,Layer as m,Rect as p,Circle as g,Label as u,Tag as c}from"react-konva";import{f as h}from"./index-DtHWT4uW.js";import f from"bignumber.js";import{jsxs as x,Fragment as L,jsx as b}from"react/jsx-runtime";import{solveQuadraticFunctionForTarget as w,PMMState as A,PMMHelper as y}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/utc";import"dayjs/plugin/duration";import"dayjs/plugin/localizedFormat";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 P=t.div`
2
2
  height: 100%;
3
3
  position: relative;
4
4
  `,N=t.div`