fix: price chart when pool price very small

Author: neikop

packages/liquidity-chart/src/constants/index.ts

@@ -2,8 +2,8 @@ import { POOL_CATEGORY } from '@kyber/schema';
 
 export const PRICE_FIXED_DIGITS = 8;
 
-// Minimum allowed price value to prevent negative/zero prices in the chart and brush
-export const MIN_PRICE = 1 / 10 ** 6;
+// Keep the brush strictly positive without collapsing very small-price pools into the visible range.
+export const MIN_PRICE = 1 / 10 ** 30;
 
 export const DEFAULT_DIMENSIONS = { width: 400, height: 200 };
 

packages/liquidity-widgets/src/components/LiquidityChart/index.tsx

@@ -11,6 +11,11 @@ import { useZapState } from '@/hooks/useZapState';
 import { usePoolStore } from '@/stores/usePoolStore';
 import { useWidgetStore } from '@/stores/useWidgetStore';
 
+const parseChartPrice = (value: string | null) => {
+  if (!value) return NaN;
+  return parseFloat(value.toString().replace(/,/g, ''));
+};
+
 export default function LiquidityChart() {
   const { positionId } = useWidgetStore(['positionId']);
   const { pool: rawPool, poolPrice, revertPrice } = usePoolStore(['pool', 'poolPrice', 'revertPrice']);
@@ -49,10 +54,10 @@ export default function LiquidityChart() {
       const tickLower = nearestUsableTick(Number(tickLowerFromPrice), tickSpacing);
       const tickUpper = nearestUsableTick(Number(tickUpperFromPrice), tickSpacing);
 
-      if (tickUpper) {
+      if (tickUpper !== undefined) {
         revertPrice ? setTickLower(tickUpper) : setTickUpper(tickUpper);
       }
-      if (tickLower) {
+      if (tickLower !== undefined) {
         revertPrice ? setTickUpper(tickLower) : setTickLower(tickLower);
       }
     },
@@ -66,7 +71,7 @@ export default function LiquidityChart() {
 
       if (tickFromPrice === undefined) return;
       const tick = nearestUsableTick(Number(tickFromPrice), tickSpacing);
-      if (tick) revertPrice ? setTickUpper(tick) : setTickLower(tick);
+      if (tick !== undefined) revertPrice ? setTickUpper(tick) : setTickLower(tick);
     },
     [positionId, revertPrice, setTickLower, setTickUpper, tickSpacing, token0, token1],
   );
@@ -78,16 +83,16 @@ export default function LiquidityChart() {
 
       if (tickFromPrice === undefined) return;
       const tick = nearestUsableTick(Number(tickFromPrice), tickSpacing);
-      if (tick) revertPrice ? setTickLower(tick) : setTickUpper(tick);
+      if (tick !== undefined) revertPrice ? setTickLower(tick) : setTickUpper(tick);
     },
     [positionId, revertPrice, setTickLower, setTickUpper, tickSpacing, token0, token1],
   );
 
   const onBrushDomainChange = useCallback(
     (domain: [number, number], mode: string | undefined) => {
       if (!minPrice || !maxPrice) return;
-      const leftPrice = parseFloat(!revertPrice ? minPrice : maxPrice.toString().replace(/,/g, ''));
-      const rightPrice = parseFloat(!revertPrice ? maxPrice : minPrice.toString().replace(/,/g, ''));
+      const leftPrice = parseChartPrice(!revertPrice ? minPrice : maxPrice);
+      const rightPrice = parseChartPrice(!revertPrice ? maxPrice : minPrice);
 
       let leftRangeValue = Number(domain[0]);
       let rightRangeValue = Number(domain[1]);
@@ -100,7 +105,7 @@ export default function LiquidityChart() {
       }
 
       const updateLeft =
-        (!ticksAtLimit[!revertPrice ? Bound.LOWER : Bound.UPPER] || mode === 'handle' || mode === 'reset') &&
+        (!ticksAtLimit[!revertPrice ? Bound.LOWER : Bound.UPPER] || mode === 'reset') &&
         leftRangeValue > 0 &&
         leftRangeValue !== leftPrice;
 

packages/zap-migration-widgets/src/components/RangeInput/LiquidityChart.tsx

@@ -12,6 +12,11 @@ import { usePoolStore } from '@/stores/usePoolStore';
 import { useWidgetStore } from '@/stores/useWidgetStore';
 import { useZapStore } from '@/stores/useZapStore';
 
+const parseChartPrice = (value: string | null) => {
+  if (!value) return NaN;
+  return parseFloat(value.toString().replace(/,/g, ''));
+};
+
 export default function LiquidityChart() {
   const { targetPoolType } = useWidgetStore(['targetPoolType']);
   const { targetPool, targetPoolPrice, revertPrice } = usePoolStore(['targetPool', 'targetPoolPrice', 'revertPrice']);
@@ -52,10 +57,10 @@ export default function LiquidityChart() {
       const tickLower = nearestUsableTick(Number(tickLowerFromPrice), tickSpacing);
       const tickUpper = nearestUsableTick(Number(tickUpperFromPrice), tickSpacing);
 
-      if (tickUpper) {
+      if (tickUpper !== undefined) {
         revertPrice ? setTickLower(tickUpper) : setTickUpper(tickUpper);
       }
-      if (tickLower) {
+      if (tickLower !== undefined) {
         revertPrice ? setTickUpper(tickLower) : setTickLower(tickLower);
       }
     },
@@ -69,7 +74,7 @@ export default function LiquidityChart() {
 
       if (tickFromPrice === undefined) return;
       const tick = nearestUsableTick(Number(tickFromPrice), tickSpacing);
-      if (tick) revertPrice ? setTickUpper(tick) : setTickLower(tick);
+      if (tick !== undefined) revertPrice ? setTickUpper(tick) : setTickLower(tick);
     },
     [revertPrice, setTickLower, setTickUpper, tickSpacing, token0, token1],
   );
@@ -81,16 +86,16 @@ export default function LiquidityChart() {
 
       if (tickFromPrice === undefined) return;
       const tick = nearestUsableTick(Number(tickFromPrice), tickSpacing);
-      if (tick) revertPrice ? setTickLower(tick) : setTickUpper(tick);
+      if (tick !== undefined) revertPrice ? setTickLower(tick) : setTickUpper(tick);
     },
     [revertPrice, setTickLower, setTickUpper, tickSpacing, token0, token1],
   );
 
   const onBrushDomainChange = useCallback(
     (domain: [number, number], mode: string | undefined) => {
       if (!minPrice || !maxPrice) return;
-      const leftPrice = parseFloat(!revertPrice ? minPrice : maxPrice.toString().replace(/,/g, ''));
-      const rightPrice = parseFloat(!revertPrice ? maxPrice : minPrice.toString().replace(/,/g, ''));
+      const leftPrice = parseChartPrice(!revertPrice ? minPrice : maxPrice);
+      const rightPrice = parseChartPrice(!revertPrice ? maxPrice : minPrice);
 
       let leftRangeValue = Number(domain[0]);
       let rightRangeValue = Number(domain[1]);
@@ -103,7 +108,7 @@ export default function LiquidityChart() {
       }
 
       const updateLeft =
-        (!ticksAtLimit[!revertPrice ? Bound.LOWER : Bound.UPPER] || mode === 'handle' || mode === 'reset') &&
+        (!ticksAtLimit[!revertPrice ? Bound.LOWER : Bound.UPPER] || mode === 'reset') &&
         leftRangeValue > 0 &&
         leftRangeValue !== leftPrice;