@dodoex/widgets 3.0.2-pool.2 → 3.0.2-pool.3
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.
- package/dist/{helper-DcuLdMyb.js → helper-B1Y_P3Jr.js} +1 -1
- package/dist/{helper-DvSiQkhW.cjs → helper-DLVXIS3T.cjs} +1 -1
- package/dist/index-BBOZ3Sm7.js +12 -0
- package/dist/index-BrFDjPHC.js +78 -0
- package/dist/index-CGrjMjvg.js +31 -0
- package/dist/index-COUbREiS.cjs +31 -0
- package/dist/index-Cxs3PYeF.cjs +78 -0
- package/dist/index-cXt7URt6.cjs +12 -0
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/dist/index-BP2DYpAg.cjs +0 -12
- package/dist/index-C4va4xhF.js +0 -31
- package/dist/index-CF9YiraU.js +0 -12
- package/dist/index-DN9ScsjC.cjs +0 -78
- package/dist/index-KJla8RT0.cjs +0 -31
- package/dist/index-uT09OtDO.js +0 -78
|
@@ -1 +1 @@
|
|
|
1
|
-
import{i18n as e}from"@lingui/core";import t from"bignumber.js";import{f as i}from"./index-
|
|
1
|
+
import{i18n as e}from"@lingui/core";import t from"bignumber.js";import{f as i}from"./index-CGrjMjvg.js";function o(t,i){switch(t){case"depth-chart.tips.buy":return e._({id:"q+Q952",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:"q+Q952",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:"TaScUS",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:"F2vX4t",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:"YvXHDU",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:d,baseTokenSymbol:c,quoteTokenSymbol:h,t:b,baseMinAndZoomMultiples:f,isHover:y,color:g,leftColor:T,rightColor:x}){const{zoomMultiples:v,baseMin:w}=f,k=u(l,v),M=a.div(n),B=m.div(n),q=2*v,S=w.multipliedBy(10**k.multipliedBy(o).toNumber());let N=new t(Math.log(d.div(w).toNumber())/Math.log(10));N=t.minimum(q,N),N=t.maximum(0,N);const P=N.div(k),X=r({val:S,model:p,midPrice:d});if(X.vert.isNaN())return;const A=S.lt(d);let _=n-X.vert.div(M).toNumber();A||(_=n-X.vert.div(B).toNumber());const z=i(S),O=i(X.vert),$=S.minus(d).abs().div(d).multipliedBy(100).toFixed(2),D=P.toNumber(),H=e.findOne("#toolTipVertLine"),L=e.findOne("#toolTipHoriLine"),U=e.findOne("#joinCircle"),V=e.findOne("#toolTip"),j=e.findOne("#priceTextLabel"),W=e.findOne("#slippageTextLabel");if(!V)return;V.x(o),V.y(_-5-6);const Y=V.getText(),F=V.getTag();let I="ask"===X.side?i(X.quote):i(X.base);const Q=p.k.lte(0);Q&&(I=O);const C=i(d),Z={amountText:O,baseTokenSymbol:c,oppositeAmountText:I,quoteTokenSymbol:h,priceText:Q?C:z,slippageText:`${A?"-":"+"}${$}`};if(P.minus(4).lte(o)&&P.plus(2).gte(o)&&y)Y.text(b("depth-chart.tips.mid-price",{amountText:1,baseTokenSymbol:c,oppositeAmountText:C,quoteTokenSymbol:h})),V.x(D),V.y(n/2),null==H||H.hide(),null==L||L.hide(),null==U||U.hide(),null==j||j.hide(),null==W||W.hide();else{Y.text(A?b("depth-chart.tips.buy",{amountText:I,baseTokenSymbol:c,oppositeAmountText:O,quoteTokenSymbol:h,priceText:Q?C:z,slippageText:`${A?"-":"+"}${$}`}):b("depth-chart.tips.sell",Z));const e=g||(A?"#55f6db":"#ff4f73"),t=A?T||"#55f6db":x||"#ff4f73";Y.fill(e),V.width()/2>o?(F.pointerDirection("left"),F.pointerHeight(15),F.pointerWidth(8),V.offsetX(-11),V.offsetY(-11)):V.width()/2+o>l?(F.pointerDirection("right"),F.pointerHeight(15),F.pointerWidth(8),V.offsetX(11),V.offsetY(-11)):(F.pointerDirection("down"),F.pointerHeight(8),F.pointerWidth(15),V.offsetX(0),V.offsetY(0)),null==H||H.points([o,n,o,_]),null==H||H.stroke(t),null==L||L.points(A?[o,_,D,_]:[D,_,o,_]),null==L||L.stroke(t),null==U||U.x(o),null==U||U.y(_),null==U||U.fill(A?T||"rgb(86, 246, 218)":x||"#FF5072"),null==U||U.stroke(A?T?`rgba(${s(T)}, 0.4)`:"rgba(86, 246, 218, 0.3)":x?`rgba(${s(x)}, 0.4)`:"rgba(255, 80, 114, 0.3)"),j&&(j.x(o),j.y(n),j.offsetX(j.width()/2),j.x()-j.width()/2<0?j.x(j.width()/2):j.x()+j.width()/2>l?j.x(l-j.width()/2):j.x(o));const i=null==j?void 0:j.findOne("#priceTextLabel-text");i&&(i.fill(e),i.text(z)),W&&(W.x(A?o+(D-o)/2:o-(o-D)/2),W.y(_),W.offsetY(W.height()/2),W.offsetX(W.width()/2));const r=null==W?void 0:W.findOne("#slippageTextLabel-text");r&&(r.fill(e),r.text(`${A?"-":"+"}${$}%`)),null==H||H.show(),null==L||L.show(),null==U||U.show(),null==j||j.show(),null==W||W.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 d=1;function c({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,c as d,r as e,f,o as g,n as h,d as i,b as j,h as k,l,s as m,m as u};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("@lingui/core"),t=require("bignumber.js"),i=require("./index-
|
|
1
|
+
"use strict";var e=require("@lingui/core"),t=require("bignumber.js"),i=require("./index-COUbREiS.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:"q+Q952",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:"q+Q952",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:"TaScUS",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:"F2vX4t",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:"YvXHDU",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),q=2*v,S=w.multipliedBy(10**B.multipliedBy(l).toNumber());let N=new t(Math.log(c.div(w).toNumber())/Math.log(10));N=t.minimum(q,N),N=t.maximum(0,N);const P=N.div(B),X=r({val:S,model:p,midPrice:c});if(X.vert.isNaN())return;const A=S.lt(c);let O=u-X.vert.div(M).toNumber();A||(O=u-X.vert.div(k).toNumber());const _=i.formatShortNumber(S),z=i.formatShortNumber(X.vert),D=S.minus(c).abs().div(c).multipliedBy(100).toFixed(2),$=P.toNumber(),H=e.findOne("#toolTipVertLine"),L=e.findOne("#toolTipHoriLine"),U=e.findOne("#joinCircle"),V=e.findOne("#toolTip"),W=e.findOne("#priceTextLabel"),Y=e.findOne("#slippageTextLabel");if(!V)return;V.x(l),V.y(O-5-6);const Z=V.getText(),I=V.getTag();let j="ask"===X.side?i.formatShortNumber(X.quote):i.formatShortNumber(X.base);const C=p.k.lte(0);C&&(j=z);const F=i.formatShortNumber(c),Q={amountText:z,baseTokenSymbol:d,oppositeAmountText:j,quoteTokenSymbol:h,priceText:C?F:_,slippageText:`${A?"-":"+"}${D}`};if(P.minus(4).lte(l)&&P.plus(2).gte(l)&&g)Z.text(b("depth-chart.tips.mid-price",{amountText:1,baseTokenSymbol:d,oppositeAmountText:F,quoteTokenSymbol:h})),V.x($),V.y(u/2),null==H||H.hide(),null==L||L.hide(),null==U||U.hide(),null==W||W.hide(),null==Y||Y.hide();else{Z.text(A?b("depth-chart.tips.buy",{amountText:j,baseTokenSymbol:d,oppositeAmountText:z,quoteTokenSymbol:h,priceText:C?F:_,slippageText:`${A?"-":"+"}${D}`}):b("depth-chart.tips.sell",Q));const e=y||(A?"#55f6db":"#ff4f73"),t=A?x||"#55f6db":T||"#ff4f73";Z.fill(e),V.width()/2>l?(I.pointerDirection("left"),I.pointerHeight(15),I.pointerWidth(8),V.offsetX(-11),V.offsetY(-11)):V.width()/2+l>s?(I.pointerDirection("right"),I.pointerHeight(15),I.pointerWidth(8),V.offsetX(11),V.offsetY(-11)):(I.pointerDirection("down"),I.pointerHeight(8),I.pointerWidth(15),V.offsetX(0),V.offsetY(0)),null==H||H.points([l,u,l,O]),null==H||H.stroke(t),null==L||L.points(A?[l,O,$,O]:[$,O,l,O]),null==L||L.stroke(t),null==U||U.x(l),null==U||U.y(O),null==U||U.fill(A?x||"rgb(86, 246, 218)":T||"#FF5072"),null==U||U.stroke(A?x?`rgba(${o(x)}, 0.4)`:"rgba(86, 246, 218, 0.3)":T?`rgba(${o(T)}, 0.4)`:"rgba(255, 80, 114, 0.3)"),W&&(W.x(l),W.y(u),W.offsetX(W.width()/2),W.x()-W.width()/2<0?W.x(W.width()/2):W.x()+W.width()/2>s?W.x(s-W.width()/2):W.x(l));const i=null==W?void 0:W.findOne("#priceTextLabel-text");i&&(i.fill(e),i.text(_)),Y&&(Y.x(A?l+($-l)/2:l-(l-$)/2),Y.y(O),Y.offsetY(Y.height()/2),Y.offsetX(Y.width()/2));const r=null==Y?void 0:Y.findOne("#slippageTextLabel-text");r&&(r.fill(e),r.text(`${A?"-":"+"}${D}%`)),null==H||H.show(),null==L||L.show(),null==U||U.show(),null==W||W.show(),null==Y||Y.show()}e.show()};
|
|
@@ -0,0 +1,12 @@
|
|
|
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,g as o,m as a}from"./helper-B1Y_P3Jr.js";import{Line as l,Text as s,Stage as c,Layer as m,Rect as d,Circle as g,Label as u,Tag as p}from"react-konva";import{f as h}from"./index-CGrjMjvg.js";import f from"bignumber.js";import{solveQuadraticFunctionForTarget as x,PMMState as L,PMMHelper as w}from"@dodoex/api";import"@lingui/core";import"@lingui/react";import"@dodoex/components";import"@dodoex/dodo-contract-request";import"react-redux";import"identicon.js";import"@web3-react/core";import"@web3-react/eip1193";import"@web3-react/walletconnect-v2";import"@web3-react/metamask";import"@web3-react/types";import"@reduxjs/toolkit";import"redux";import"@tanstack/react-query";import"react-dom";import"react-window";import"@ethersproject/bignumber";import"dayjs";import"react-transition-group";import"zustand";import"@dodoex/contract-request";import"axios";import"recharts";import"jsbi";import"tiny-invariant";import"@uniswap/sdk-core";import"@uniswap/v2-sdk";import"react-infinite-scroller";import"d3";import"rmc-date-picker";const b=t.div`
|
|
2
|
+
height: 100%;
|
|
3
|
+
position: relative;
|
|
4
|
+
`,A=t.div`
|
|
5
|
+
text-align: center;
|
|
6
|
+
margin-top: 17.1px;
|
|
7
|
+
margin-bottom: 88.41px;
|
|
8
|
+
color: #606066;
|
|
9
|
+
font-size: 12px;
|
|
10
|
+
line-height: 17px;
|
|
11
|
+
font-weight: 400;
|
|
12
|
+
`,y=36;function N({maxHeight:t,gridAreaHeight:e,value:i}){const n=new f(e).minus(y),r=n.div(t);return n.minus(i.multipliedBy(r)).plus(y).toNumber()}function P({targetPrice:t,areaPoints:e,isLeft:i}){for(let n=0;n<e.length;n++){const r=e[n],o=n<e.length-1?e[n+1]:null;if(!o)return{targetAreaStatPoint:r,targetAreaStatPoints:e};if(i){if(t.lte(r.middlePrice)&&t.gte(o.middlePrice))return{targetAreaStatPoint:r,targetAreaStatPoints:e.slice(0,n+1)}}else if(t.gte(r.middlePrice)&&t.lte(o.middlePrice))return{targetAreaStatPoint:r,targetAreaStatPoints:e.slice(0,n+1)}}return{targetAreaStatPoint:null,targetAreaStatPoints:[]}}function v({x:t,width:e,minXLN10:i,maxXLN10:n}){const r=new f(t).div(e).multipliedBy(n.minus(i)).plus(i);return new f(10**r.toNumber())}function R({width:t,targetLN10:e,minXLN10:i,maxXLN10:n}){return e.minus(i).div(n.minus(i)).multipliedBy(t).toNumber()}function H({target:t}){return new f(Math.log10(t.toNumber()))}const S="rgba(38, 39, 41, 0.3)";function k({width:t,height:b,params:A,baseTokenSymbol:y,quoteTokenSymbol:k,colorMap:E}){const{maxLeftHeight:X,maxRightHeight:B,leftStatAreaPoints:C,rightStatAreaPoints:F,minXLN10:M,maxXLN10:W}=function({params:t}){return i((()=>{const e=new f(t.b),i=new f(t.q);let n=new f(t.b0);const r=new f(t.q0),o=new f(t.i),a=new f(t.k),{R:l}=t;1===l&&n.eq(e)&&(n=x(e,i.minus(r),new f(1).div(o),a));const s=new L({i:o,K:a,B:e,Q:i,B0:n,Q0:r,R:l,mtFeeRate:new f(0),lpFeeRate:new f(0)}),c=new w,m=new f(s.B),d=[],g=[];let u=new f(0),p=new f(0);const h=c.GetMidPrice(s),b=i.gt(0)?e.div(i):new f(1);for(let t=0;t<=250;t++){let e=m.multipliedBy(t/100).multipliedBy(h.multipliedBy(b).multipliedBy(4));0===t&&(e=m.multipliedBy(1e-11));const i=null==c?void 0:c.QuerySellBase(e,s);if(i.isNaN()||!i.gt(0))d.push({giveAmount:e,getAmount:new f(0),price:new f(0)});else{const t=i.div(e);d.push({giveAmount:e,getAmount:i,price:t})}}for(let t=0;t<=250;t++){let e=m.multipliedBy(t/100).multipliedBy(h.multipliedBy(4));0===t&&(e=m.multipliedBy(1e-11));const i=null==c?void 0:c.QuerySellQuote(e,s);if(i.isNaN()||!i.gt(0))g.push({giveAmount:e,getAmount:new f(0),price:new f(0)});else{const t=e.dividedBy(i);g.push({giveAmount:e,getAmount:i,price:t})}}if(d.length<2&&g.length<2)return{leftStatAreaPoints:[],rightStatAreaPoints:[],maxLeftHeight:new f(10).multipliedBy(1.2),maxRightHeight:new f(10).multipliedBy(1.2),middlePriceLN10:new f(0),minXLN10:new f(-1),maxXLN10:new f(1)};const A=[];for(let t=1;t<d.length;t++){const e=d[t],{giveAmount:i,getAmount:n,price:r}=e,o=d[t-1];if(!r.isNaN()&&r.gt(0)&&o){const e=r.minus(o.price).abs(),a=i.minus(o.giveAmount).abs(),l=n.minus(o.getAmount).abs().multipliedBy(a);1===t&&A.push({area:n,price:r,middlePrice:r.plus(e.div(1.1)),rectangleHeight:l.plus(l.multipliedBy(.03))}),A.push({area:n,price:r,middlePrice:r.plus(e.div(2)),rectangleHeight:l}),u=f.max(l,u)}}const y=[];for(let t=1;t<g.length;t++){const e=g[t],{giveAmount:i,getAmount:n,price:r}=e,o=g[t-1],a=o.price,l=o.giveAmount,s=o.getAmount;if(!r.isNaN()&&r.gt(0)&&o){const e=r.minus(a).abs(),o=i.minus(l).abs(),c=n.minus(s).abs().multipliedBy(o);1===t&&y.push({area:n,price:r,middlePrice:r.minus(e.div(1.1)),rectangleHeight:c.plus(c.multipliedBy(.03))}),y.push({area:n,price:r,middlePrice:r.minus(e.div(2)),rectangleHeight:c}),p=f.max(c,p)}}const N=d.length>0?d[d.length-1]:g[0],P=g.length>0?g[0]:d[0],v=g.length>0?g[g.length-1]:d[0],R=N.price,H=v.price,S=P.price,k=new f(Math.log10(S.toNumber()));let E=R.gt(0)?new f(Math.log10(R.toNumber())):new f(-Math.log10(H.toNumber())),X=H.gt(0)?new f(Math.log10(H.toNumber())):new f(-Math.log10(R.toNumber()));const B=f.max(k.minus(E).abs(),X.minus(k).abs());return E=k.minus(B),X=k.plus(B),{leftStatAreaPoints:A,rightStatAreaPoints:y,maxLeftHeight:u.multipliedBy(1.2),maxRightHeight:p.multipliedBy(1.2),minXLN10:E,maxXLN10:X,middlePriceLN10:k}}),[t])}({params:A}),T=b-30.13,q=n(null),J=e({grid:"#2A2A2D",midPriceLine:"#313335",leftBg:[0,S,1,"#31645d"],leftLine:"#55f6db",leftColor:"",rightBg:[0,S,1,"#67303d"],rightLine:"#ff4f73",rightColor:"",tooltipBg:"#121212",tooltipColor:void 0,textColor:"#606066"},E),j=e=>{var i;const{current:n}=q,r=e.target;if(r&&n){const e=null===(i=r.getStage())||void 0===i?void 0:i.getPointerPosition();if(e){const{x:i}=e,r=t/2;if(Math.abs(i-r)<=2)return;if(i<=2||t-i<=2)return;const l=v({x:i,width:t,minXLN10:M,maxXLN10:W});let s=null,c=[];const m=i<r;if(m){const t=P({areaPoints:C,targetPrice:l,isLeft:m});s=t.targetAreaStatPoint,c=t.targetAreaStatPoints}else{const t=P({areaPoints:F,targetPrice:l,isLeft:m});s=t.targetAreaStatPoint,c=t.targetAreaStatPoints}if(s){const e=H({target:s.middlePrice}),r=R({minXLN10:M,maxXLN10:W,width:t,targetLN10:e}),l=N({maxHeight:m?X:B,gridAreaHeight:T,value:s.rectangleHeight}),d=n.findOne("#tooltip"),g=n.findOne("#toolTipVertLine"),u=n.findOne("#joinCircle"),p=n.findOne("#tooltip-Text"),f=n.findOne("#tooltip-tag"),x=n.findOne("#priceTextLabel"),L=null==x?void 0:x.findOne("#priceTextLabel-text"),w=n.findOne("#area");null==d||d.position({x:r,y:l-5-6}),null==p||p.fill(J.tooltipColor||(m?"#00FAD9":"#FF5072")),null==p||p.text(m?o("pool.chart.liquidity-chart-buy",{amount:h(s.area),symbol:y,price:h(s.price)}):o("pool.chart.liquidity-chart-sell",{amount:h(s.area),symbol:k,price:h(s.price)})),d&&f&&(d.width()/2>i?(f.pointerDirection("left"),f.pointerHeight(15),f.pointerWidth(8),d.offsetX(-11),d.offsetY(-11)):d.width()/2+i>t?(f.pointerDirection("right"),f.pointerHeight(15),f.pointerWidth(8),d.offsetX(11),d.offsetY(-11)):(f.pointerDirection("down"),f.pointerHeight(8),f.pointerWidth(15),d.offsetX(0),d.offsetY(0))),null==g||g.points([r,T,r,l]),null==g||g.stroke(m?"#55f6db":"#ff4f73");let b=m?"rgb(86, 246, 218)":"#FF5072",A=m?"rgba(86, 246, 218, 0.3)":"rgba(255, 80, 114, 0.3)";J.leftLine&&J.rightLine&&(b=m?J.leftLine:J.rightLine,A=m?`rgba(${a(J.leftLine)}, 0.4)`:`rgba(${a(J.rightLine)}, 0.4)`),u&&(u.x(r),u.y(l),u.fill(b),u.stroke(A)),x&&(x.x(r),x.y(T+8.08+1),x.offsetX(x.width()/2),x.x()-x.width()/2<0?x.x(x.width()/2):x.x()+x.width()/2>t?x.x(t-x.width()/2):x.x(i)),L&&(L.fill(J.tooltipColor||(m?"#00FAD9":"#FF5072")),L.text(h(s.price)));const P=[];for(const e of c){const{middlePrice:i,rectangleHeight:n}=e,r=H({target:i}),o=R({minXLN10:M,maxXLN10:W,width:t,targetLN10:r}),a=N({maxHeight:m?X:B,gridAreaHeight:T,value:n});P.push(o,a+1)}const v=P.slice(),[S,E]=v;m?(v.push(r,l),v.push(r,T),v.push(S,T),v.push(S,E)):(v.unshift(S,T),v.unshift(r,T),v.unshift(r,l)),w&&(w.points(v),w.fill(m?J.leftLine||"#2c5b56":J.rightLine||"#7b3a48")),n.show()}}}},O=function({gridAreaHeight:t,gridAreaWidth:e,horizontalLineCount:n,verticalLineCount:r,color:o="#2A2A2D"}){return i((()=>{const i=[],a=t/(n+1),s=[],c=e/(r+1);for(let t=0;t<n;t++){const n=a*(t+1);i.push([0,n,e,n])}for(let e=0;e<r;e++){const i=c*(e+1);s.push([i,0,i,t])}return React.createElement(React.Fragment,null,i.map(((t,e)=>React.createElement(l,{key:e,points:t,stroke:o,strokeWidth:1,lineCap:"round",lineJoin:"round",tension:1,listening:!1}))),s.map(((t,e)=>React.createElement(l,{key:e,points:t,stroke:o,strokeWidth:1,lineCap:"round",lineJoin:"round",tension:1,listening:!1}))))}),[t,e,n,r,o])}({gridAreaHeight:T,gridAreaWidth:t,horizontalLineCount:9,verticalLineCount:7,color:J.grid}),D=function({minXLN10:t,maxXLN10:e,labelCount:n,gridAreaHeight:r,gridAreaWidth:o,color:a="#606066"}){return i((()=>{const i=o/(n+1),c=[],m=[];for(let a=0;a<n;a++){const n=i/2+i*a;c.push({x:n,y:r+10.08+1,text:h(v({x:i*(a+1),width:o,minXLN10:t,maxXLN10:e}))});const l=i*(a+1);m.push([l,r+1,l,r+4+1])}return React.createElement(React.Fragment,null,c.map(((t,e)=>React.createElement(s,{key:e,x:t.x,y:t.y,text:t.text,fontSize:14,fontFamily:"Manrope",fill:a,width:i,padding:0,align:"center",verticalAlign:"bottom",listening:!1}))),m.map(((t,e)=>React.createElement(l,{key:e,points:t,stroke:a,strokeWidth:1,lineCap:"butt",lineJoin:"miter",tension:1,listening:!1}))))}),[t,e,r,o,n])}({gridAreaHeight:T,gridAreaWidth:t,labelCount:7,minXLN10:M,maxXLN10:W,color:J.textColor}),z=function({gridAreaHeight:t,gridAreaWidth:e,color:n="#606066"}){return i((()=>{const i=e/2;return React.createElement(l,{points:[i,0,i,t-1],stroke:n,strokeWidth:1,lineCap:"round",lineJoin:"round",tension:1,listening:!1})}),[t,e,n])}({gridAreaHeight:T,gridAreaWidth:t,color:J.midPriceLine}),{leftLine:G,rightLine:Q}=function({leftStatAreaPoints:t,rightStatAreaPoints:e,minXLN10:n,maxXLN10:r,maxLeftHeight:o,maxRightHeight:a,gridAreaWidth:s,gridAreaHeight:c,colorMap:m}){return{leftLine:i((()=>{if(t.length<1)return React.createElement(React.Fragment,null);const e=[];let i=c;for(const a of t){const{middlePrice:t,rectangleHeight:l}=a,m=H({target:t}),d=R({minXLN10:n,maxXLN10:r,width:s,targetLN10:m}),g=N({maxHeight:o,gridAreaHeight:c,value:l});e.push(d,g),g<i&&(i=g)}const a=e.slice(),[d,g]=a,u=a[a.length-1],p=a[a.length-2];return a.push(p,u),a.push(p,c),a.push(d,c),a.push(d,g),React.createElement(React.Fragment,null,React.createElement(l,{points:a,closed:!0,listening:!1,lineCap:"round",lineJoin:"round",fillLinearGradientStartPoint:{x:0,y:c},fillLinearGradientEndPoint:{x:0,y:i},fillLinearGradientColorStops:m.leftBg}),React.createElement(l,{points:e,stroke:m.leftLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1}))}),[t,s,n,r,c,o]),rightLine:i((()=>{if(e.length<1)return React.createElement(React.Fragment,null);const t=[];let i=c;for(const o of e){const{middlePrice:e,rectangleHeight:l}=o,m=H({target:e}),d=R({minXLN10:n,maxXLN10:r,width:s,targetLN10:m}),g=N({maxHeight:a,gridAreaHeight:c,value:l});t.push(d,g),g<i&&(i=g)}const o=t.slice(),[d]=o;return o.unshift(d,c),o.unshift(s,c),React.createElement(React.Fragment,null,React.createElement(l,{points:o,closed:!0,listening:!1,lineCap:"round",lineJoin:"round",fillLinearGradientStartPoint:{x:0,y:c},fillLinearGradientEndPoint:{x:0,y:i},fillLinearGradientColorStops:m.rightBg}),React.createElement(l,{points:t,stroke:m.rightLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1}))}),[e,s,n,r,c,a])}}({leftStatAreaPoints:C,rightStatAreaPoints:F,minXLN10:M,maxXLN10:W,maxLeftHeight:X,maxRightHeight:B,gridAreaWidth:t,gridAreaHeight:T,colorMap:J});return React.createElement(c,{width:t,height:b,onMouseMove:j,onMouseOver:j,onMouseEnter:j,onMouseOut:()=>{const{current:t}=q;t&&t.hide()}},React.createElement(m,null,React.createElement(d,{x:0,y:0,width:t,height:T,stroke:J.grid,strokeWidth:1}),O,D,G,Q,z),React.createElement(m,{ref:q,visible:!1},React.createElement(l,{points:[],closed:!0,listening:!1,lineCap:"round",lineJoin:"round",id:"area"}),React.createElement(l,{points:[],strokeWidth:1,stroke:"#ff4f73",lineJoin:"round",lineCap:"round",dash:[4,6],id:"toolTipVertLine"}),React.createElement(g,{x:0,y:0,radius:5,fill:"#FF5072",stroke:"rgba(255, 80, 114, 0.3)",strokeWidth:12,id:"joinCircle"}),React.createElement(u,{listening:!1,x:0,y:0,id:"priceTextLabel"},React.createElement(p,{fill:J.tooltipBg,id:"priceTextLabel-tag"}),React.createElement(s,{text:"-",fontSize:14,fontFamily:"Manrope",padding:2,fill:"#FF5072",id:"priceTextLabel-text"})),React.createElement(u,{listening:!1,id:"tooltip"},React.createElement(p,{fill:J.tooltipBg,pointerDirection:"down",pointerWidth:15,pointerHeight:8,cornerRadius:8,lineJoin:"round",id:"tooltip-tag"}),React.createElement(s,{text:"",fontFamily:"Manrope",fontSize:12,lineHeight:17/12,padding:r,fill:"#FF5072",id:"tooltip-Text"}))))}const E=({width:t=834,height:e=462,baseTokenSymbol:i,quoteTokenSymbol:n,pmmModel:r,pmmParams:a,midPrice:l,notShowTipText:s,colorMap:c})=>React.createElement(b,null,void 0!==a&&void 0!==l&&void 0!==r&&void 0!==l&&React.createElement(k,{width:t,height:e,params:a,midPrice:l,pmmModel:r,baseTokenSymbol:i,quoteTokenSymbol:n,colorMap:c}),s?"":React.createElement(A,null,"* ",o("pool.chart.liquidity-chart-tip",{baseTokenSymbol:i})));export{E as default};
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import e from"bignumber.js";import{merge as t,throttle as i,debounce as r}from"lodash";import o,{useEffect as n,useMemo as l,useRef as a,useState as s}from"react";import c from"@emotion/styled";import{css as u}from"@emotion/react";import{Stage as d,Layer as m,Rect as p,Line as g,Text as h,Circle as b,Label as f,Tag as M}from"react-konva";import{c as v,e as y,a as P,b as x,d as w,f as z,u as E,g as L,h as k,l as B,i as R,j as C,k as S}from"./helper-B1Y_P3Jr.js";import{f as j,a as N,b as O}from"./index-CGrjMjvg.js";import{solveQuadraticFunctionForTarget as X,PMMModel as T}from"@dodoex/api";import"@lingui/core";import"@lingui/react";import"@dodoex/components";import"@dodoex/dodo-contract-request";import"react-redux";import"identicon.js";import"@web3-react/core";import"@web3-react/eip1193";import"@web3-react/walletconnect-v2";import"@web3-react/metamask";import"@web3-react/types";import"@reduxjs/toolkit";import"redux";import"@tanstack/react-query";import"react-dom";import"react-window";import"@ethersproject/bignumber";import"dayjs";import"react-transition-group";import"zustand";import"@dodoex/contract-request";import"axios";import"recharts";import"jsbi";import"tiny-invariant";import"@uniswap/sdk-core";import"@uniswap/v2-sdk";import"react-infinite-scroller";import"d3";import"rmc-date-picker";var A={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},q=o.createContext&&o.createContext(A),W=["attr","size","title"];function F(e,t){if(null==e)return{};var i,r,o=function(e,t){if(null==e)return{};var i,r,o={},n=Object.keys(e);for(r=0;r<n.length;r++)i=n[r],t.indexOf(i)>=0||(o[i]=e[i]);return o}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(r=0;r<n.length;r++)i=n[r],t.indexOf(i)>=0||Object.prototype.propertyIsEnumerable.call(e,i)&&(o[i]=e[i])}return o}function H(){return H=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r])}return e},H.apply(this,arguments)}function Z(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,r)}return i}function G(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?Z(Object(i),!0).forEach((function(t){D(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):Z(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function D(e,t,i){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var r=i.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function J(e){return e&&e.map(((e,t)=>o.createElement(e.tag,G({key:t},e.attr),J(e.child))))}function V(e){return t=>o.createElement(Y,H({attr:G({},e.attr)},t),J(e.child))}function Y(e){var t=t=>{var i,{attr:r,size:n,title:l}=e,a=F(e,W),s=n||t.size||"1em";return t.className&&(i=t.className),e.className&&(i=(i?i+" ":"")+e.className),o.createElement("svg",H({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},t.attr,r,a,{className:i,style:G(G({color:e.color||t.color},t.style),e.style),height:s,width:s,xmlns:"http://www.w3.org/2000/svg"}),l&&o.createElement("title",null,l),e.children)};return void 0!==q?o.createElement(q.Consumer,null,(e=>t(e))):t(A)}function I(e){return V({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{d:"M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"},child:[]}]})(e)}function $(e){return V({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{d:"M10.707 17.707 16.414 12l-5.707-5.707-1.414 1.414L13.586 12l-4.293 4.293z"},child:[]}]})(e)}function Q(e){return V({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{d:"M5 11h14v2H5z"},child:[]}]})(e)}function K(e){return V({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{d:"M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"},child:[]}]})(e)}const U=c.input`
|
|
2
|
+
margin: 4px 10px 4px 6px;
|
|
3
|
+
border-radius: 10px;
|
|
4
|
+
border: 1px solid #373739;
|
|
5
|
+
padding: 4px 9px;
|
|
6
|
+
background-color: #1a1a1b;
|
|
7
|
+
color: #ffffff;
|
|
8
|
+
font-size: 14px;
|
|
9
|
+
font-weight: 400;
|
|
10
|
+
line-height: 20px;
|
|
11
|
+
outline: none;
|
|
12
|
+
width: 96px;
|
|
13
|
+
&:focus {
|
|
14
|
+
border-color: #fff;
|
|
15
|
+
|
|
16
|
+
${({error:e})=>e&&u`
|
|
17
|
+
border-color: red;
|
|
18
|
+
`}
|
|
19
|
+
}
|
|
20
|
+
`;const _="rgba(38, 39, 41, 0.3)";function ee({width:r,height:o,midPrice:s,pmmModel:c,params:u,baseTokenSymbol:R,quoteTokenSymbol:C,baseMinAndZoomMultiples:S,colorMap:N,setBaseMinAndZoomMultiples:O}){const X=t({grid:"#2A2A2D",midPriceLine:"#313335",leftBg:[0,_,1,"#31645d"],leftLine:"#55f6db",leftColor:"",rightBg:[0,_,1,"#67303d"],rightLine:"#ff4f73",rightColor:"",tooltipBg:"#121212",tooltipColor:void 0},N),T=r,A=o-18,q=T/7,{buyBaseVert:W,sellBaseVert:F}=P({midPrice:s,q:u.q,q0:u.q0,pmmModel:c}),H=W.div(A),Z=F.div(A),G=a(null),D=a(null),{current:J}=G,V=a(0),Y=a(),{horizontalGridLines:I,verticalGridLines:$}=function({chartHeight:e,chartWidth:t,horizontalLineCount:i,verticalLineCount:r}){return l((()=>{const o=[],n=e/(i+1),l=[],a=t/r;for(let e=0;e<i;e++){const i=n*(e+1);o.push([0,i,t,i])}for(let t=0;t<r;t++){const i=a*t+a/2;l.push([i,0,i,e])}return{horizontalGridLines:o,verticalGridLines:l}}),[e,t,i,r])}({chartHeight:A,chartWidth:T,horizontalLineCount:9,verticalLineCount:7}),{horizontalLabelTickPoints:Q,horizontalLabelTextPoints:K}=function({chartHeight:e,chartWidth:t,xAxisPoints:i,oneXPx:r,baseMinAndZoomMultiples:o}){return l((()=>{const n=v(t,o.zoomMultiples),l=[],a=[];for(let t=0;t<i;t++){l.push([t*r+r/2,e,t*r+r/2,e+4]);const i=n.multipliedBy(t).multipliedBy(r).plus(n.multipliedBy(r/2)).toNumber(),s=o.baseMin.multipliedBy(10**i),c=t*r,u=e+2+4,d=j(s);a.push({x:c,y:u,text:d})}return{horizontalLabelTickPoints:l,horizontalLabelTextPoints:a}}),[o.baseMin,o.zoomMultiples,e,t,r,i])}({chartHeight:A,chartWidth:T,xAxisPoints:7,oneXPx:q,baseMinAndZoomMultiples:S}),{quoteLinePoints:U,quoteLineAreaPoints:ee,quoteLineAreaLinearGradientEndPointY:te,baseLinePoints:ie,baseLineAreaPoints:re,baseLineAreaLinearGradientEndPointY:oe,midPriceLinePoints:ne}=function({chartHeight:t,chartWidth:i,midPrice:r,xPoints:o,pmmModel:n,baseMinAndZoomMultiples:a,buyYPortion:s,sellYPortion:c}){return l((()=>{const l=[],u=[],d=[],{baseMin:m,zoomMultiples:p}=a,g=v(i,p),h=2*p,b=new e(h).div(o);let f=new e(Math.log(r.div(m).toNumber())/Math.log(10));f=e.minimum(h,f),f=e.maximum(0,f);for(let i=new e(0);i.lte(f);){const e=m.multipliedBy(10**i.toNumber()),o=y({val:e,model:n,midPrice:r});if(!o.vert.isNaN()){const e=i.div(g).toNumber(),r=t-o.vert.div(s).toNumber();l.push(e,r)}i=i.plus(b)}for(let e=f;e.lte(h);){const i=m.multipliedBy(10**e.toNumber()),o=y({val:i,model:n,midPrice:r});if(!o.vert.isNaN()){const i=e.div(g).toNumber(),r=t-o.vert.div(c).toNumber();u.push(i,r)}e=e.plus(b)}const M=f.div(g).toNumber(),[,P]=l,x=n.k.eq(0);x&&l.push(M,P||t),l.push(M,t),d.push(M,t,M,0);const w=y({val:m.multipliedBy(10**h),model:n,midPrice:r});let z=t;const E=new e(h).div(g).toNumber();return w.vert.isNaN()||(z=t-w.vert.div(c).toNumber()),x&&u.length>=2&&(u.unshift(M,z),u.unshift(M,t)),u.push(E,z),f.lte(0)&&u.unshift(0,t),{quoteLinePoints:l,quoteLineAreaPoints:[0,t,0,P,...l],quoteLineAreaLinearGradientEndPointY:P,baseLinePoints:u,baseLineAreaPoints:[...u,E,t],baseLineAreaLinearGradientEndPointY:z,midPriceLinePoints:d}}),[a,i,o,r,n,t,s,c])}({chartHeight:A,chartWidth:T,midPrice:s,xPoints:50,pmmModel:c,baseMinAndZoomMultiples:S,buyYPortion:H,sellYPortion:Z}),le=e=>{var t;const i=e.target;if(i&&J){const e=null===(t=i.getStage())||void 0===t?void 0:t.getPointerPosition();if(e){const{x:t}=e;if(t>T)return void J.hide();E({x:t,tooltip:J,buyBaseVert:W,sellBaseVert:F,chartWidth:T,chartHeight:A,midPrice:s,pmmModel:c,baseTokenSymbol:R,quoteTokenSymbol:C,baseMinAndZoomMultiples:S,t:L,isHover:!0,color:X.tooltipColor,leftColor:X.leftLine,rightColor:X.rightLine})}}},ae=l((()=>i((e=>{const{target:t}=e,i=t.getStage();if(i){i.container().style.cursor="grabbing";const e=null==i?void 0:i.getPointerPosition();if(e){const t=e.x-V.current;V.current=e.x,Y.current=e.x,O((e=>void 0===e.baseMin?e:{baseMin:x({dragDistance:t,prevBaseMin:e.baseMin,chartWidth:T,zoomMultiples:e.zoomMultiples}),zoomMultiples:e.zoomMultiples,targetMarginPriceX:0}))}}}),100)),[T,O]),se=l((()=>i((e=>{e.cancelBubble=!0,e.evt.preventDefault();const t=e.evt.deltaY<0;O((e=>{const i=w({zoomIn:t,prevZoomMultiples:e.zoomMultiples});return{baseMin:z({midPrice:s,zoomMultiples:i}),zoomMultiples:i,targetMarginPriceX:e.targetMarginPriceX}}))}),100)),[s,O]);return n((()=>{S.targetMarginPriceX>0&&null!==J?E({x:S.targetMarginPriceX,tooltip:J,buyBaseVert:W,sellBaseVert:F,chartWidth:T,chartHeight:A,midPrice:s,pmmModel:c,baseTokenSymbol:R,quoteTokenSymbol:C,baseMinAndZoomMultiples:S,t:L,color:X.tooltipColor,leftColor:X.leftLine,rightColor:X.rightLine}):void 0!==Y.current&&null!==J&&E({x:Y.current,tooltip:J,buyBaseVert:W,sellBaseVert:F,chartWidth:T,chartHeight:A,midPrice:s,pmmModel:c,baseTokenSymbol:R,quoteTokenSymbol:C,baseMinAndZoomMultiples:S,t:L,isHover:!0,color:X.tooltipColor,leftColor:X.leftLine,rightColor:X.rightLine})}),[S,R,W,A,T,X.leftLine,X.rightLine,X.tooltipColor,s,c,C,F,J]),React.createElement(d,{ref:D,width:r,offsetY:-k,height:o+k,draggable:!0,dragBoundFunc:function(){return{x:this.absolutePosition().x,y:this.absolutePosition().y}},onMouseMove:le,onMouseOver:le,onMouseOut:()=>{J&&J.hide()},onDragStart:function(e){const{target:t}=e,i=t.getStage();if(i){const e=i.getPointerPosition();e&&(V.current=e.x)}},onDragMove:ae,onDragEnd:e=>{const{target:t}=e,i=t.getStage();i&&(i.container().style.cursor="pointer")},onWheel:se},React.createElement(m,null,React.createElement(p,{x:0,y:0,width:r,height:A,stroke:X.grid,strokeWidth:1}),I.map(((e,t)=>React.createElement(g,{key:t,points:e,stroke:X.grid,strokeWidth:1,lineCap:"round",lineJoin:"round",listening:!1}))),$.map(((e,t)=>React.createElement(g,{key:t,points:e,stroke:X.grid,strokeWidth:1,lineCap:"round",lineJoin:"round",listening:!1}))),Q.map(((e,t)=>React.createElement(g,{key:t,points:e,stroke:"#9d9d9d",strokeWidth:1,lineCap:"round",lineJoin:"round",listening:!1}))),K.map(((e,t)=>React.createElement(h,{key:t,x:e.x,y:e.y,text:e.text,fontFamily:"Manrope",fontSize:12,fill:"#9d9d9d",width:q,padding:0,align:"center",verticalAlign:"bottom",listening:!1}))),React.createElement(g,{points:ee,closed:!0,listening:!1,lineCap:"round",lineJoin:"round",fillLinearGradientStartPoint:{x:0,y:A},fillLinearGradientEndPoint:{x:0,y:te},fillLinearGradientColorStops:X.leftBg}),React.createElement(g,{points:U,stroke:X.leftLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1}),React.createElement(g,{points:re,closed:!0,listening:!1,lineCap:"round",lineJoin:"round",fillLinearGradientStartPoint:{x:T,y:A},fillLinearGradientEndPoint:{x:T,y:oe},fillLinearGradientColorStops:X.rightBg}),React.createElement(g,{points:ie,stroke:X.rightLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1}),React.createElement(g,{points:ne,stroke:X.midPriceLine,strokeWidth:2,lineCap:"round",lineJoin:"round",listening:!1})),React.createElement(m,{ref:G,visible:!1,listening:!1},React.createElement(g,{points:[],stroke:"#ff4f73",strokeWidth:1,lineCap:"round",lineJoin:"round",dash:[4,6],id:"toolTipVertLine"}),React.createElement(g,{points:[],stroke:"ff4f73",strokeWidth:1,lineCap:"round",lineJoin:"round",dash:[4,6],id:"toolTipHoriLine"}),React.createElement(b,{x:0,y:0,radius:5,fill:"#FF5072",stroke:"rgba(255, 80, 114, 0.3)",strokeWidth:12,id:"joinCircle"}),React.createElement(f,{x:0,y:0,id:"priceTextLabel"},React.createElement(M,{fill:X.tooltipBg,id:"priceTextLabel-tag"}),React.createElement(h,{text:"",fontSize:12,fontFamily:"Manrope",padding:4,fill:"#FF5072",id:"priceTextLabel-text"})),React.createElement(f,{x:0,y:0,id:"slippageTextLabel"},React.createElement(M,{fill:X.tooltipBg,id:"slippageTextLabel-tag"}),React.createElement(h,{text:"",fontSize:12,fontFamily:"Manrope",padding:4,fill:"#FF5072",id:"slippageTextLabel-text"})),React.createElement(f,{x:0,y:0,id:"toolTip"},React.createElement(M,{fill:X.tooltipBg,pointerDirection:"down",pointerWidth:15,pointerHeight:8,cornerRadius:8,lineJoin:"round",id:"toolTip-tag"}),React.createElement(h,{text:"-",fontSize:12,lineHeight:17/12,padding:B,fontFamily:"Manrope",fill:"#FFFFFF",id:"toolTip-text"}))))}const te=c.button`
|
|
21
|
+
margin: 0;
|
|
22
|
+
border: none;
|
|
23
|
+
padding: 0;
|
|
24
|
+
background: none;
|
|
25
|
+
|
|
26
|
+
&:focus {
|
|
27
|
+
outline: none;
|
|
28
|
+
}
|
|
29
|
+
&:active {
|
|
30
|
+
outline: none;
|
|
31
|
+
}
|
|
32
|
+
`,ie=c.div`
|
|
33
|
+
height: 100%;
|
|
34
|
+
`,re=c.div`
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
`,oe=c.div`
|
|
38
|
+
border: 1px solid ${({borderColor:e})=>e||"#2a2a2d"};
|
|
39
|
+
flex: 1 0 50%;
|
|
40
|
+
|
|
41
|
+
display: flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
justify-content: center;
|
|
44
|
+
font-size: 12px;
|
|
45
|
+
font-weight: 400;
|
|
46
|
+
line-height: 17px;
|
|
47
|
+
color: #606066;
|
|
48
|
+
|
|
49
|
+
& + & {
|
|
50
|
+
border-left: none;
|
|
51
|
+
}
|
|
52
|
+
`,ne=c.span`
|
|
53
|
+
color: #85858d;
|
|
54
|
+
`,le=c.div`
|
|
55
|
+
margin-top: 20px;
|
|
56
|
+
display: flex;
|
|
57
|
+
justify-content: center;
|
|
58
|
+
margin-bottom: 9px;
|
|
59
|
+
`,ae=c(te)`
|
|
60
|
+
border-radius: 13px;
|
|
61
|
+
background-color: #373739;
|
|
62
|
+
width: 24px;
|
|
63
|
+
height: 24px;
|
|
64
|
+
font-size: 18px;
|
|
65
|
+
color: #85858d;
|
|
66
|
+
line-height: 0;
|
|
67
|
+
& + & {
|
|
68
|
+
margin-left: 10px;
|
|
69
|
+
}
|
|
70
|
+
&:first-child,
|
|
71
|
+
&:last-child {
|
|
72
|
+
font-size: 20px;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&:hover {
|
|
76
|
+
color: #fff;
|
|
77
|
+
}
|
|
78
|
+
`;function se({params:t,target:i,isBuy:r=!0}){const o=new e(t.b),n=new e(t.q);let l=new e(t.b0);const a=new e(t.q0),s=new e(t.i),c=new e(t.k),{R:u}=t;1===u&&l.eq(o)&&(l=X(o,n.minus(a),new e(1).div(s),c));const d=r?o.plus(i):o.minus(i);if(d.lt(l)||o.eq(l)){let t=l.multipliedBy(l).div(d).div(d);return t=new e(1).minus(c).plus(c.multipliedBy(t)),s.multipliedBy(t)}const m=new T;m.RStatus=u,m.B=o,m.B0=l,m.Q=n,m.Q0=a,m.i=s,m.k=c,m.mtFeeRate=new e(0),m.lpFeeRate=new e(0);let p=new e(0);p=r?m.querySellBase(i):m.queryBuyBase(i);const g=r?n.minus(p):n.plus(p);let h=a.multipliedBy(a).div(g).div(g);return h=new e(1).minus(c).plus(c.multipliedBy(h)),s.div(h)}const ce=({chartId:t,width:i=834,height:o=460,baseTokenSymbol:a,quoteTokenSymbol:c,pmmModel:u,pmmParams:d,midPrice:m=new e(0),colorMap:p,notShowAmountInput:g})=>{(({id:e})=>{n((()=>{function t(e){e.preventDefault()}let i=!1;try{const e={get passive(){return i=!0,!1}};window.addEventListener("test",(()=>{}),e),window.removeEventListener("test",(()=>{}))}catch(e){i=!1}const r=document.getElementById(e),o=!!i&&{passive:!1};return null==r||r.addEventListener("wheel",t,o),()=>{null==r||r.removeEventListener("wheel",t)}}),[e])})({id:t});const[h,b]=s(""),[f,M]=s(""),[v,y]=s("-"),[P,E]=s("-"),[k,B]=s({baseMin:new e(0),zoomMultiples:R,targetMarginPriceX:0});n((()=>{void 0!==m&&B((e=>({baseMin:z({midPrice:m,zoomMultiples:e.zoomMultiples}),zoomMultiples:e.zoomMultiples,targetMarginPriceX:e.targetMarginPriceX})))}),[m]);const j=l((()=>r((({type:t,amount:r})=>{""===r&&m&&(B({baseMin:z({midPrice:m,zoomMultiples:R}),zoomMultiples:R,targetMarginPriceX:0}),"buy"===t?y("-"):E("-"));const o=new e(r);if(!o.lte(0)&&!o.isNaN()&&(null==d?void 0:d.b)&&!o.gte(d.b)&&m)if("buy"===t){const e=se({params:d,target:o});B((r=>{const o=C({currentBaseMinAndZoomMultiples:r,targetPrice:e,midPrice:m,width:i});if(o.isSkip)return{baseMin:r.baseMin,zoomMultiples:r.zoomMultiples,targetMarginPriceX:o.targetX};if(o.targetX>0)return{baseMin:o.baseMin,zoomMultiples:o.zoomMultiples,targetMarginPriceX:o.targetX};const n=S({midPrice:m,width:i,type:t,targetPrice:e}),l=n.zoomMultiples.dp(6).toNumber();return{baseMin:z({midPrice:m,zoomMultiples:l}),zoomMultiples:l,targetMarginPriceX:n.targetX}})),y(`${N({input:e.minus(m).div(m)})}`)}else{const e=function({params:e,target:t}){return se({params:e,target:t,isBuy:!1})}({params:d,target:o});B((r=>{const o=C({currentBaseMinAndZoomMultiples:r,targetPrice:e,midPrice:m,width:i});if(o.isSkip)return{baseMin:r.baseMin,zoomMultiples:r.zoomMultiples,targetMarginPriceX:o.targetX};if(o.targetX>0)return{baseMin:o.baseMin,zoomMultiples:o.zoomMultiples,targetMarginPriceX:o.targetX};const n=S({midPrice:m,width:i,type:t,targetPrice:e}),l=n.zoomMultiples.dp(6).toNumber();return{baseMin:z({midPrice:m,zoomMultiples:l}),zoomMultiples:l,targetMarginPriceX:n.targetX}})),E(`+${N({input:e.minus(m).div(m)})}`)}}),300)),[d,m,i]);n((()=>{void 0!==h&&j({type:"buy",amount:h})}),[j,h]),n((()=>{void 0!==f&&j({type:"sell",amount:f})}),[j,f]);const X=e=>{let t=0;t=e?-.1*i:.1*i,B((e=>void 0===e.baseMin?e:{baseMin:x({dragDistance:t,prevBaseMin:e.baseMin,chartWidth:i,zoomMultiples:e.zoomMultiples}),zoomMultiples:e.zoomMultiples,targetMarginPriceX:e.targetMarginPriceX}))},T=e=>{B((t=>{const i=w({zoomIn:null!=e&&e,prevZoomMultiples:t.zoomMultiples});return{baseMin:z({midPrice:m,zoomMultiples:i}),zoomMultiples:i,targetMarginPriceX:t.targetMarginPriceX}}))},A=l((()=>{if(""===h)return!1;const t=new e(h);return!(!t.lte(0)&&!t.isNaN()&&(null==d?void 0:d.b)&&!t.gte(d.b))}),[h,d]),q=l((()=>{if(""===f)return!1;const t=new e(f);return!(!t.lte(0)&&!t.isNaN()&&(null==d?void 0:d.b)&&!t.gte(d.b))}),[f,d]);return React.createElement(ie,{id:t},g?"":React.createElement(re,null,React.createElement(oe,{borderColor:p&&p.grid},L("pool.chart.buy-amount",{symbol:a}),React.createElement(U,{value:h,error:A,onChange:e=>{const t=O(e.target.value,2);null!==t&&b(t)}}),React.createElement(ne,null,L("pool.chart.price-impact",{amount:v}))),React.createElement(oe,{borderColor:p&&p.grid},L("pool.chart.sell-amount",{symbol:a}),React.createElement(U,{value:f,error:q,onChange:e=>{const t=O(e.target.value,2);null!==t&&M(t)}}),React.createElement(ne,null,L("pool.chart.price-impact",{amount:P})))),void 0!==d&&void 0!==m&&void 0!==u&&void 0!==k.baseMin&&void 0!==m&&React.createElement(ee,{width:i,height:o,params:d,midPrice:m,pmmModel:u,baseTokenSymbol:a,quoteTokenSymbol:c,baseMinAndZoomMultiples:k,colorMap:p,setBaseMinAndZoomMultiples:B}),React.createElement(le,{className:"operate-btn-wrapper"},React.createElement(ae,{onClick:()=>X(!0)},React.createElement(I,null)),React.createElement(ae,{onClick:()=>T(!1)},React.createElement(Q,null)),React.createElement(ae,{onClick:()=>T(!0)},React.createElement(K,null)),React.createElement(ae,{onClick:()=>X(!1)},React.createElement($,null))))};export{ce as default};
|