Merge pull request #4205 from zcelbirPlabs/mobile-liq-buffer

Liq buffer is recalculated for mobile
CrocSwap · Oct 11, 2024 · ba9b9e2 · ba9b9e2
2 parents b822f49 + e777c97
commit ba9b9e2
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 2 deletions.
diff --git a/src/pages/platformAmbient/Chart/Chart.tsx b/src/pages/platformAmbient/Chart/Chart.tsx
@@ -111,6 +111,7 @@ import {
     mainCanvasElementId,
     xAxisBuffer,
     xAxisHeightPixel,
+    xAxisMobileBuffer,
 } from './ChartUtils/chartConstants';
 import OrderHistoryCanvas from './OrderHistoryCh/OrderHistoryCanvas';
 import OrderHistoryTooltip from './OrderHistoryCh/OrderHistoryTooltip';
@@ -2614,7 +2615,9 @@ export default function Chart(props: propsIF) {
             const liqBuffer =
                 liqMode === 'none' || ['futa'].includes(platformName)
                     ? 0.95
-                    : xAxisBuffer;
+                    : mobileView
+                      ? xAxisMobileBuffer
+                      : xAxisBuffer;
 
             const centerX = snappedTime;
             const diff =

diff --git a/src/pages/platformAmbient/Chart/ChartUtils/chartConstants.ts b/src/pages/platformAmbient/Chart/ChartUtils/chartConstants.ts
@@ -2,6 +2,7 @@ export const LS_KEY_CHART_ANNOTATIONS = 'chart_annotations';
 export const LS_KEY_CHART_CONTEXT_SETTINGS = 'chart_context_settings';
 export const defaultCandleBandwith = 5;
 export const xAxisBuffer = 0.8;
+export const xAxisMobileBuffer = 0.7;
 export const initialDisplayCandleCount = 100;
 export const initialDisplayCandleCountForMobile = 30;
 export const xAxisHeightPixel = 32;

diff --git a/src/pages/platformAmbient/Chart/Liquidity/LiquidityChart.tsx b/src/pages/platformAmbient/Chart/Liquidity/LiquidityChart.tsx
@@ -34,6 +34,7 @@ import {
 import { TradeDataContext } from '../../../../contexts/TradeDataContext';
 import { RangeContext } from '../../../../contexts/RangeContext';
 import { ChartThemeIF } from '../../../../contexts/ChartContext';
+import useMediaQuery from '../../../../utils/hooks/useMediaQuery';
 
 interface liquidityPropsIF {
     liqMode: string;
@@ -134,6 +135,8 @@ export default function LiquidityChart(props: liquidityPropsIF) {
         setColorChangeTrigger,
     } = props;
 
+    const mobileView = useMediaQuery('(max-width: 1200px)');
+
     const currentPoolPriceTick =
         poolPriceNonDisplay === undefined
             ? 0
@@ -263,6 +266,45 @@ export default function LiquidityChart(props: liquidityPropsIF) {
         diffHashSig(chartThemeColors),
     ]);
 
+    // Auto scale fo liq Curve
+    useEffect(() => {
+        // if (mobileView) {
+            const mergedLiqData = liqDataBid.concat(liqDataAsk);
+
+            try {
+                if (mergedLiqData && mergedLiqData.length === 0) return;
+
+                const { min, max }: nearestLiquidity =
+                    findLiqNearest(mergedLiqData);
+
+                if (min !== undefined && max !== undefined) {
+                    const visibleDomain = mergedLiqData.filter(
+                        (liqData: LiquidityDataLocal) =>
+                            liqData?.liqPrices >= min &&
+                            liqData?.liqPrices <= max,
+                    );
+                    const maxLiq = d3.max(
+                        visibleDomain,
+                        (d: LiquidityDataLocal) => d.activeLiq,
+                    );
+                    if (maxLiq && parseFloat(maxLiq) !== 1 && liquidityScale) {
+                        liquidityScale.domain([0, maxLiq]);
+                    }
+
+                    render();
+                    renderCanvasArray([d3CanvasLiq]);
+                }
+            } catch (error) {
+                console.error({ error });
+            }
+        // }
+    }, [
+        diffHashSigScaleData(scaleData, 'y'),
+        liquidityData?.depthLiqAskData,
+        liquidityData?.depthLiqBidData,
+        mobileView,
+    ]);
+
     useEffect(() => {
         if (
             scaleData !== undefined &&
@@ -550,7 +592,7 @@ export default function LiquidityChart(props: liquidityPropsIF) {
                 .on('measure', (event: CustomEvent) => {
                     liquidityScale.range([
                         event.detail.width,
-                        (event.detail.width / 10) * 6,
+                        mobileView ? 0 : (event.detail.width / 10) * 6,
                     ]);
 
                     liquidityDepthScale.range([