From 56e762025028f5157a7b65b2eb5c10aa1d5fd28c Mon Sep 17 00:00:00 2001
From: jinoosss <jwchoi@onbloc.xyz>
Date: Tue, 5 Dec 2023 10:56:00 +0900
Subject: [PATCH] fix: Initialize Pool Graph range

---
 .../SelectPriceRangeCustom.tsx                     | 13 +++++--------
 packages/web/src/hooks/pool/use-select-pool.tsx    |  5 ++++-
 packages/web/src/utils/swap-utils.ts               | 14 ++++++++++++--
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx
index 26d0bc295..733d710cb 100644
--- a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx
+++ b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx
@@ -34,16 +34,13 @@ const SelectPriceRangeCustom: React.FC<SelectPriceRangeCustomProps> = ({
 
   function getPriceRange() {
     const currentPrice = selectPool.currentPrice || 1;
-    if (selectPool.liquidityOfTickPoints.length === 0) {
-      const priceGap = currentPrice * 0.5;
-      return [currentPrice - priceGap, currentPrice + priceGap];
+    if (!selectPool.feeTier || !priceRangeType) {
+      return [0, currentPrice * 2];
     }
-    const [minX, maxX] = d3.extent(selectPool.liquidityOfTickPoints.map(point => point[0]));
 
-    const minPriceGap = (typeof selectPool.currentPrice === "number" && typeof minX === "number") ? Math.abs(selectPool.currentPrice - minX) : 0;
-    const maxPriceGap = (typeof selectPool.currentPrice === "number" && typeof maxX === "number") ? Math.abs(selectPool.currentPrice - maxX) : 0;
-    const priceGap = Math.min(maxPriceGap, minPriceGap);
-    return [currentPrice - priceGap, currentPrice + priceGap];
+    const visibleRate = SwapFeeTierPriceRange[selectPool.feeTier][priceRangeType].max / 100;
+    const range = currentPrice * visibleRate;
+    return [currentPrice - range, currentPrice + range];
   }
 
   function getHeightRange() {
diff --git a/packages/web/src/hooks/pool/use-select-pool.tsx b/packages/web/src/hooks/pool/use-select-pool.tsx
index 0ff1cf6a6..925ed544c 100644
--- a/packages/web/src/hooks/pool/use-select-pool.tsx
+++ b/packages/web/src/hooks/pool/use-select-pool.tsx
@@ -136,7 +136,7 @@ export const useSelectPool = ({
     }
 
     const logMin = minPrice <= 0 ?
-      Math.log(currentPrice / Number(MIN_PRICE_X96)) :
+      Math.log(currentPrice / Number(0.0000000001)) :
       Math.log(currentPrice / minPrice);
     const logMax = Math.log(maxPrice / currentPrice);
     return logMin * 100 / (logMin + logMax);
@@ -201,6 +201,9 @@ export const useSelectPool = ({
       if (!poolInfo || !minPosition) {
         return;
       }
+      if (minPosition === 0) {
+        return;
+      }
       setInteractionType("INTERACTION");
       const tickSpacing = poolInfo.tickSpacing;
       const nearTick = priceToNearTick(minPosition, tickSpacing);
diff --git a/packages/web/src/utils/swap-utils.ts b/packages/web/src/utils/swap-utils.ts
index 0f653f74f..3bfc8cba9 100644
--- a/packages/web/src/utils/swap-utils.ts
+++ b/packages/web/src/utils/swap-utils.ts
@@ -2,7 +2,12 @@ import {
   SwapFeeTierInfoMap,
   SwapFeeTierType,
 } from "@constants/option.constant";
-import { MAX_TICK, MIN_TICK, Q96 } from "@constants/swap.constant";
+import {
+  MAX_TICK,
+  MIN_PRICE_X96,
+  MIN_TICK,
+  Q96,
+} from "@constants/swap.constant";
 import BigNumber from "bignumber.js";
 import { tickToSqrtPriceX96 } from "./math.utils";
 
@@ -18,7 +23,12 @@ export function makeSwapFeeTier(value: string | number): SwapFeeTierType {
 }
 
 export function priceToTick(price: number | bigint) {
-  if (price === 0) {
+  const priceX96 = BigInt(
+    BigNumber(Math.sqrt(Number(price)).toString())
+      .multipliedBy(Q96.toString())
+      .toFixed(0),
+  );
+  if (priceX96 <= MIN_PRICE_X96) {
     return MIN_TICK;
   }
   const logPrice = Math.log(Number(price));