From 7ff7f994a9c699be3ce70af89c50f46bcef25b11 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7enur=20Co=C5=9Fkun?= Date: Fri, 27 Dec 2024 13:45:37 +0300 Subject: [PATCH 1/2] liquidity threshould changed to pool price --- .../Chart/Axes/yAxis/YaxisCanvas.tsx | 17 ++++--- src/pages/platformAmbient/Chart/Chart.tsx | 36 +++++++------ .../Chart/Liquidity/LiquidityChart.tsx | 50 +++++++++++-------- 3 files changed, 59 insertions(+), 44 deletions(-) diff --git a/src/pages/platformAmbient/Chart/Axes/yAxis/YaxisCanvas.tsx b/src/pages/platformAmbient/Chart/Axes/yAxis/YaxisCanvas.tsx index 8c28fd702b..8f6a10d957 100644 --- a/src/pages/platformAmbient/Chart/Axes/yAxis/YaxisCanvas.tsx +++ b/src/pages/platformAmbient/Chart/Axes/yAxis/YaxisCanvas.tsx @@ -36,7 +36,7 @@ import { createRectLabel } from './YaxisUtils'; interface yAxisIF { scaleData: scaleData | undefined; - market: number; + chartPoolPrice: number; liqMode: string; liqTransitionPointforCurve: number; liqTransitionPointforDepth: number; @@ -84,7 +84,7 @@ function YAxisCanvas(props: yAxisIF) { liqMode, lineSellColor, lineBuyColor, - market, + chartPoolPrice, liqTransitionPointforCurve, liqTransitionPointforDepth, isAmbientOrAdvanced, @@ -240,11 +240,11 @@ function YAxisCanvas(props: yAxisIF) { const sameLocationLimit = () => { if (scaleData) { const resultData = - scaleData?.yScale(limit) - scaleData?.yScale(market); + scaleData?.yScale(limit) - scaleData?.yScale(chartPoolPrice); const resultLocationData = resultData < 0 ? -20 : 20; const isSameLocation = Math.abs(resultData) < 20; const sameLocationData = - scaleData?.yScale(market) + resultLocationData; + scaleData?.yScale(chartPoolPrice) + resultLocationData; return { isSameLocation: isSameLocation, sameLocationData: sameLocationData, @@ -397,12 +397,13 @@ function YAxisCanvas(props: yAxisIF) { } }); - if (market) { - const { tick, tickSubString } = prepareTickLabel(market); + if (chartPoolPrice) { + const { tick, tickSubString } = + prepareTickLabel(chartPoolPrice); createRectLabel( context, - yScale(market), + yScale(chartPoolPrice), X, 'white', 'black', @@ -872,7 +873,7 @@ function YAxisCanvas(props: yAxisIF) { renderSubchartCrCanvas(); } }, [ - market, + chartPoolPrice, diffHashSig(crosshairData), limit, isLineDrag, diff --git a/src/pages/platformAmbient/Chart/Chart.tsx b/src/pages/platformAmbient/Chart/Chart.tsx index fdc5e1bb3e..d3ca80b7ac 100644 --- a/src/pages/platformAmbient/Chart/Chart.tsx +++ b/src/pages/platformAmbient/Chart/Chart.tsx @@ -390,8 +390,6 @@ export default function Chart(props: propsIF) { const [limit, setLimit] = useState(0); - const [market, setMarket] = useState(0); - const [boundaries, setBoundaries] = useState(); const [isShapeEdited, setIsShapeEdited] = useState(); @@ -720,7 +718,6 @@ export default function Chart(props: propsIF) { : lastCandleData.priceCloseDecimalCorrected; } - setMarket(poolPrice); return poolPrice; }, [ lastCandleData, @@ -4110,7 +4107,7 @@ export default function Chart(props: propsIF) { .on('draw', () => { setCanvasResolution(canvas); ctx.setLineDash([5, 3]); - marketLine([market]); + marketLine([chartPoolPrice]); }) .on('measure', (event: CustomEvent) => { scaleData?.xScale.range([0, event.detail.width]); @@ -4120,7 +4117,7 @@ export default function Chart(props: propsIF) { }); } renderCanvasArray([d3CanvasMarketLine]); - }, [market, marketLine]); + }, [chartPoolPrice, marketLine]); useEffect(() => { const noGoZoneBoundaries = noGoZone( @@ -4257,7 +4254,7 @@ export default function Chart(props: propsIF) { } function changeScaleLimit(isTriggeredByZoom: boolean) { - if (scaleData && market && rescale) { + if (scaleData && chartPoolPrice && rescale) { const { minYBoundary, maxYBoundary } = getYAxisBoundary(isTriggeredByZoom); @@ -4267,14 +4264,14 @@ export default function Chart(props: propsIF) { minYBoundary, value, minTickForLimit, - market, + chartPoolPrice, ); const high = Math.max( maxYBoundary, value, maxTickForLimit, - market, + chartPoolPrice, ); const bufferForLimit = Math.abs((low - high) / 6); @@ -4297,7 +4294,7 @@ export default function Chart(props: propsIF) { const min = minPrice; const max = maxPrice; - if (!market) { + if (!chartPoolPrice) { scaleData.yScale.domain( scaleData.priceRange(visibleCandleData), ); @@ -4308,7 +4305,7 @@ export default function Chart(props: propsIF) { if ( maxYBoundary !== undefined && - market && + chartPoolPrice && minYBoundary !== undefined ) { if (simpleRangeWidth !== 100 || advancedMode) { @@ -4316,9 +4313,19 @@ export default function Chart(props: propsIF) { ranges[0] = { name: 'Min', value: minPrice }; ranges[1] = { name: 'Max', value: maxPrice }; - const low = Math.min(min, max, minYBoundary, market); + const low = Math.min( + min, + max, + minYBoundary, + chartPoolPrice, + ); - const high = Math.max(min, max, maxYBoundary, market); + const high = Math.max( + min, + max, + maxYBoundary, + chartPoolPrice, + ); const bufferForRange = Math.abs((low - high) / 6); @@ -4415,7 +4422,7 @@ export default function Chart(props: propsIF) { }, [ location.pathname.includes('pool') || location.pathname.includes('reposition'), - market, + chartPoolPrice, isLineDrag, minPrice, maxPrice, @@ -5704,7 +5711,7 @@ export default function Chart(props: propsIF) { const yAxisCanvasProps = { scaleData, - market, + chartPoolPrice, liqMode, liqTransitionPointforCurve: liquidityData ? liquidityData?.liqTransitionPointforCurve @@ -5936,7 +5943,6 @@ export default function Chart(props: propsIF) { mainCanvasBoundingClientRect={ mainCanvasBoundingClientRect } - chartPoolPrice={chartPoolPrice} chartThemeColors={chartThemeColors} render={render} colorChangeTrigger={colorChangeTrigger} diff --git a/src/pages/platformAmbient/Chart/Liquidity/LiquidityChart.tsx b/src/pages/platformAmbient/Chart/Liquidity/LiquidityChart.tsx index 3bb24a777e..5b8a1f794b 100644 --- a/src/pages/platformAmbient/Chart/Liquidity/LiquidityChart.tsx +++ b/src/pages/platformAmbient/Chart/Liquidity/LiquidityChart.tsx @@ -56,7 +56,6 @@ interface liquidityPropsIF { render: any; colorChangeTrigger: boolean; setColorChangeTrigger: React.Dispatch>; - chartPoolPrice: number; } type nearestLiquidity = { @@ -67,10 +66,20 @@ type nearestLiquidity = { export default function LiquidityChart(props: liquidityPropsIF) { const d3CanvasLiq = useRef(null); const d3CanvasLiqHover = useRef(null); - const { pool: pool, isTradeDollarizationEnabled } = useContext(PoolContext); + const { + pool: pool, + poolPriceDisplay: poolPriceWithoutDenom, + isTradeDollarizationEnabled, + } = useContext(PoolContext); const { advancedMode, simpleRangeWidth } = useContext(RangeContext); const { isDenomBase, poolPriceNonDisplay } = useContext(TradeDataContext); + const poolPriceDisplay = poolPriceWithoutDenom + ? isDenomBase && poolPriceWithoutDenom + ? 1 / poolPriceWithoutDenom + : (poolPriceWithoutDenom ?? 0) + : 0; + // eslint-disable-next-line @typescript-eslint/no-explicit-any const [liqAskSeries, setLiqAskSeries] = useState(); // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -127,7 +136,6 @@ export default function LiquidityChart(props: liquidityPropsIF) { render, colorChangeTrigger, setColorChangeTrigger, - chartPoolPrice, } = props; const mobileView = useMediaQuery('(max-width: 800px)'); @@ -457,13 +465,13 @@ export default function LiquidityChart(props: liquidityPropsIF) { const low = _low > _high ? _high : _low; const high = _low > _high ? _low : _high; - const advancedLow = low > chartPoolPrice ? low : chartPoolPrice; - const advancedHigh = high < chartPoolPrice ? high : chartPoolPrice; + const advancedLow = low > poolPriceDisplay ? low : poolPriceDisplay; + const advancedHigh = high < poolPriceDisplay ? high : poolPriceDisplay; let lastLow = liqType === 'bid' ? advancedMode ? advancedLow - : chartPoolPrice + : poolPriceDisplay : low; let lastHigh = @@ -471,7 +479,7 @@ export default function LiquidityChart(props: liquidityPropsIF) { ? high : advancedMode ? advancedHigh - : chartPoolPrice; + : poolPriceDisplay; if (scaleData) { if (isAmbientPosition) { @@ -550,13 +558,13 @@ export default function LiquidityChart(props: liquidityPropsIF) { drawingData.sort((a, b) => a.liqPrices - b.liqPrices); - if (!advancedMode || (advancedMode && high > chartPoolPrice)) { + if (!advancedMode || (advancedMode && high > poolPriceDisplay)) { clipHighlightedLines(canvas, 'bid'); lineLiqBidSeries(drawingData.slice().reverse()); ctx?.restore(); } - if (!advancedMode || (advancedMode && low < chartPoolPrice)) { + if (!advancedMode || (advancedMode && low < poolPriceDisplay)) { clipHighlightedLines(canvas, 'ask'); lineLiqAskSeries(drawingData); ctx?.restore(); @@ -587,13 +595,13 @@ export default function LiquidityChart(props: liquidityPropsIF) { const high = _low > _high ? _low : _high; if (isRange) { - if (!advancedMode || (advancedMode && high > chartPoolPrice)) { + if (!advancedMode || (advancedMode && high > poolPriceDisplay)) { clipHighlightedLines(canvas, 'bid'); lineLiqDepthBidSeries(allData.slice().reverse()); ctx?.restore(); } - if (!advancedMode || (advancedMode && low < chartPoolPrice)) { + if (!advancedMode || (advancedMode && low < poolPriceDisplay)) { clipHighlightedLines(canvas, 'ask'); lineLiqDepthAskSeries(allData); ctx?.restore(); @@ -632,7 +640,7 @@ export default function LiquidityChart(props: liquidityPropsIF) { ? liquidityDepthScale.invert(offsetX) : liquidityScale.invert(offsetX); - const bidMinBoudnary = chartPoolPrice; + const bidMinBoudnary = poolPriceDisplay; const bidMaxBoudnary = (isAmbientPosition || advancedMode) && isRange @@ -651,7 +659,7 @@ export default function LiquidityChart(props: liquidityPropsIF) { liqDataAsk, (d: LiquidityDataLocal) => d.liqPrices, ); - const askMaxBoudnary = chartPoolPrice; + const askMaxBoudnary = poolPriceDisplay; if (liqMaxActiveLiq && currentDataX <= liqMaxActiveLiq) { if ( @@ -750,7 +758,7 @@ export default function LiquidityChart(props: liquidityPropsIF) { setCanvasResolution(canvas); if (liqMode === 'curve') { clipCanvas( - scaleData?.yScale(chartPoolPrice), + scaleData?.yScale(poolPriceDisplay), 0, canvas, ); @@ -761,7 +769,7 @@ export default function LiquidityChart(props: liquidityPropsIF) { clipCanvas( scaleData?.yScale(0), - scaleData?.yScale(chartPoolPrice), + scaleData?.yScale(poolPriceDisplay), canvas, ); @@ -772,7 +780,7 @@ export default function LiquidityChart(props: liquidityPropsIF) { } if (liqMode === 'depth') { clipCanvas( - scaleData?.yScale(chartPoolPrice), + scaleData?.yScale(poolPriceDisplay), 0, canvas, ); @@ -783,7 +791,7 @@ export default function LiquidityChart(props: liquidityPropsIF) { clipCanvas( scaleData?.yScale(0), - scaleData?.yScale(chartPoolPrice), + scaleData?.yScale(poolPriceDisplay), canvas, ); @@ -834,7 +842,7 @@ export default function LiquidityChart(props: liquidityPropsIF) { ]); useEffect(() => { - const threshold = chartPoolPrice; + const threshold = poolPriceDisplay; const allData = liqMode === 'curve' @@ -955,7 +963,7 @@ export default function LiquidityChart(props: liquidityPropsIF) { liqMode, liquidityData?.liqTransitionPointforCurve, liquidityData?.liqTransitionPointforDepth, - chartPoolPrice, + poolPriceDisplay, ]); useEffect(() => { @@ -1037,7 +1045,7 @@ export default function LiquidityChart(props: liquidityPropsIF) { ); const { offsetY } = getXandYLocationForChart(event, rect); currentPriceData[0] = { - value: chartPoolPrice !== undefined ? chartPoolPrice : 0, + value: poolPriceDisplay !== undefined ? poolPriceDisplay : 0, }; const filtered = @@ -1106,7 +1114,7 @@ export default function LiquidityChart(props: liquidityPropsIF) { const { offsetY } = getXandYLocationForChart(event, rect); currentPriceData[0] = { - value: chartPoolPrice !== undefined ? chartPoolPrice : 0, + value: poolPriceDisplay !== undefined ? poolPriceDisplay : 0, }; const filtered = From 47560690cd9eab30e3e99f4c7f6a32769079001c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7enur=20Co=C5=9Fkun?= Date: Fri, 27 Dec 2024 14:57:56 +0300 Subject: [PATCH 2/2] fixed: liquidity chart and highlighted lines not match on depth mode --- .../Chart/Liquidity/LiquidityChart.tsx | 74 ++++++++----------- 1 file changed, 30 insertions(+), 44 deletions(-) diff --git a/src/pages/platformAmbient/Chart/Liquidity/LiquidityChart.tsx b/src/pages/platformAmbient/Chart/Liquidity/LiquidityChart.tsx index 5b8a1f794b..0735351fbc 100644 --- a/src/pages/platformAmbient/Chart/Liquidity/LiquidityChart.tsx +++ b/src/pages/platformAmbient/Chart/Liquidity/LiquidityChart.tsx @@ -505,18 +505,16 @@ export default function LiquidityChart(props: liquidityPropsIF) { setHighlightedAreaAskSeries(() => liqDepthAskSeries); }, [liqBidSeries, liqAskSeries, liqDepthBidSeries, liqDepthAskSeries]); - const drawCurveLines = (canvas: HTMLCanvasElement) => { + const drawCurveLines = ( + canvas: HTMLCanvasElement, + data: LiquidityDataLocal[], + ) => { const ctx = canvas.getContext('2d'); const isRange = location.pathname.includes('pool') || location.pathname.includes('reposition'); - const allData = - liqMode === 'curve' - ? liqDataBid.concat(liqDataAsk) - : liqDataDepthBid.concat(liqDataDepthAsk); - const _low = ranges.filter( (target: lineValue) => target.name === 'Min', )[0].value; @@ -528,30 +526,28 @@ export default function LiquidityChart(props: liquidityPropsIF) { const high = _low > _high ? _low : _high; if (isRange) { - let drawingData = allData; + let drawingData = data; if (isAmbientPosition && scaleData) { drawingData = drawingData.concat([ { - activeLiq: allData[allData.length - 1].activeLiq, + activeLiq: data[data.length - 1].activeLiq, liqPrices: scaleData.yScale.domain()[1], - deltaAverageUSD: - allData[allData.length - 1].deltaAverageUSD, - cumAverageUSD: - allData[allData.length - 1].cumAverageUSD, - upperBound: allData[allData.length - 1].upperBound, - lowerBound: allData[allData.length - 1].lowerBound, + deltaAverageUSD: data[data.length - 1].deltaAverageUSD, + cumAverageUSD: data[data.length - 1].cumAverageUSD, + upperBound: data[data.length - 1].upperBound, + lowerBound: data[data.length - 1].lowerBound, }, { - activeLiq: allData[0].activeLiq, + activeLiq: data[0].activeLiq, liqPrices: scaleData.yScale.domain()[0] < 0 ? 0 : scaleData.yScale.domain()[0], - deltaAverageUSD: allData[0].deltaAverageUSD, - cumAverageUSD: allData[0].cumAverageUSD, - upperBound: allData[0].upperBound, - lowerBound: allData[0].lowerBound, + deltaAverageUSD: data[0].deltaAverageUSD, + cumAverageUSD: data[0].cumAverageUSD, + upperBound: data[0].upperBound, + lowerBound: data[0].lowerBound, }, ]); } @@ -572,14 +568,12 @@ export default function LiquidityChart(props: liquidityPropsIF) { } }; - const drawDepthLines = (canvas: HTMLCanvasElement) => { + const drawDepthLines = ( + canvas: HTMLCanvasElement, + data: LiquidityDataLocal[], + ) => { const ctx = canvas.getContext('2d'); - const allData = - liqMode === 'curve' - ? liqDataBid.concat(liqDataAsk) - : liqDataDepthBid.concat(liqDataDepthAsk); - const isRange = location.pathname.includes('pool') || location.pathname.includes('reposition'); @@ -597,20 +591,23 @@ export default function LiquidityChart(props: liquidityPropsIF) { if (isRange) { if (!advancedMode || (advancedMode && high > poolPriceDisplay)) { clipHighlightedLines(canvas, 'bid'); - lineLiqDepthBidSeries(allData.slice().reverse()); + lineLiqDepthBidSeries(data.slice().reverse()); ctx?.restore(); } if (!advancedMode || (advancedMode && low < poolPriceDisplay)) { clipHighlightedLines(canvas, 'ask'); - lineLiqDepthAskSeries(allData); + lineLiqDepthAskSeries(data); ctx?.restore(); } + + console.log({ data }); + clipHighlightedLines(canvas, 'ask'); - lineLiqDepthAskSeries(allData); + lineLiqDepthAskSeries(data); ctx?.restore(); clipHighlightedLines(canvas, 'bid'); - lineLiqDepthBidSeries(allData.slice().reverse()); + lineLiqDepthBidSeries(data.slice().reverse()); ctx?.restore(); } }; @@ -739,17 +736,6 @@ export default function LiquidityChart(props: liquidityPropsIF) { lowerBound: allData[allData.length - 1].lowerBound, }, - { - activeLiq: allData[0].activeLiq, - liqPrices: - scaleData.yScale.domain()[0] < 0 - ? 0 - : scaleData.yScale.domain()[0], - deltaAverageUSD: allData[0].deltaAverageUSD, - cumAverageUSD: allData[0].cumAverageUSD, - upperBound: allData[0].upperBound, - lowerBound: allData[0].lowerBound, - }, ]); } @@ -776,7 +762,7 @@ export default function LiquidityChart(props: liquidityPropsIF) { liqAskSeries(drawingData); ctx?.restore(); - drawCurveLines(canvas); + drawCurveLines(canvas, drawingData.slice().reverse()); } if (liqMode === 'depth') { clipCanvas( @@ -785,7 +771,7 @@ export default function LiquidityChart(props: liquidityPropsIF) { canvas, ); - liqDepthBidSeries(allData.slice().reverse()); + liqDepthBidSeries(drawingData.slice().reverse()); ctx?.restore(); @@ -795,11 +781,11 @@ export default function LiquidityChart(props: liquidityPropsIF) { canvas, ); - liqDepthAskSeries(liqDataDepthAsk); + liqDepthAskSeries(drawingData); ctx?.restore(); - drawDepthLines(canvas); + drawDepthLines(canvas, drawingData); } }) .on('measure', (event: CustomEvent) => {