refactor: move most of the logic into hooks

Author: nikkaroraa

packages/frontend/src/components/Lp/MintAndLp/LpSettings.tsx

@@ -154,29 +154,20 @@ const LpSettings: React.FC<{ onComplete: () => void; squeethToMint: string }> =
       return
     }
 
-    const minPriceBN = new bn(minPrice)
-    const maxPriceBN = new bn(maxPrice)
-    if (minPriceBN.isLessThanOrEqualTo(0) || maxPriceBN.isLessThanOrEqualTo(0)) {
-      return
-    }
-
-    // still not sure about this
-    // but basically the thought is that lowerPrice is derived from maxPrice since that's in denominator
-    const lowerPrice = ethPrice.div(maxPrice).integerValue(bn.ROUND_FLOOR).toNumber()
-    const upperPrice = ethPrice.div(minPrice).integerValue(bn.ROUND_FLOOR).toNumber()
-
-    const ticks = getTicksFromPriceRange(lowerPrice, upperPrice)
-
+    const ticks = getTicksFromPriceRange(minPrice, maxPrice)
     setLowerTick(ticks.lowerTick)
     setUpperTick(ticks.upperTick)
   }, [usingDefaultPriceRange, minPrice, maxPrice, ethPrice, getTicksFromPriceRange])
 
   useAppEffect(() => {
-    getDepositAmounts(new bn(squeethToMint), lowerTick, upperTick, 0, collatRatioVal, 0).then((deposits) => {
+    async function calcDepositAmounts() {
+      const deposits = await getDepositAmounts(new bn(squeethToMint), lowerTick, upperTick, 0, collatRatioVal, 0)
       if (deposits) {
         setDepositAmounts(deposits)
       }
-    })
+    }
+
+    calcDepositAmounts()
   }, [squeethToMint, lowerTick, upperTick, collatRatioVal, getDepositAmounts])
 
   const openPosition = useAppCallback(async () => {
@@ -189,7 +180,7 @@ const LpSettings: React.FC<{ onComplete: () => void; squeethToMint: string }> =
       console.log('transaction failed')
       console.log(e)
     }
-  }, [squeethToMint, lowerTick, upperTick, collatRatio, slippageAmount, openLpPosition])
+  }, [squeethToMint, lowerTick, upperTick, collatRatioVal, slippageAmountVal, openLpPosition, onComplete])
 
   return (
     <>

packages/frontend/src/state/lp/hooks.ts

@@ -12,6 +12,7 @@ import {
   squeethPoolContractAtom,
 } from '../contracts/atoms'
 import useAppCallback from '@hooks/useAppCallback'
+import { useETHPrice } from '@hooks/useETHPrice'
 import { addressAtom } from '../wallet/atoms'
 import { Contract } from 'web3-eth-contract'
 import { useHandleTransaction } from '../wallet/hooks'
@@ -306,11 +307,35 @@ export const useGetTickPrices = () => {
 }
 
 export const useGetTicksFromPriceRange = () => {
-  const getTicksFromPriceRange = useCallback((minPrice: number, maxPrice: number) => {
-    const lowerTick = TickMath.getTickAtSqrtRatio(encodeSqrtRatioX96(minPrice, 1))
-    const upperTick = TickMath.getTickAtSqrtRatio(encodeSqrtRatioX96(maxPrice, 1))
-    return { lowerTick, upperTick }
-  }, [])
+  const isWethToken0 = useAtomValue(isWethToken0Atom)
+  const ethPrice = useETHPrice()
+
+  const getTicksFromPriceRange = useAppCallback(
+    (minOSqthPriceInput: string, maxOSqthPriceInput: string) => {
+      const minOSqthPrice = new BigNumber(minOSqthPriceInput)
+      const maxOSqthPrice = new BigNumber(maxOSqthPriceInput)
+
+      // $60 - oSQTH
+      // $1500 - ETH
+      // for 1 ETH how many oSQTH - 1500 / 60
+      // "encodeSqrtRatioX96" asks for amount1, amount0
+      const lowerPriceRange = isWethToken0 ? ethPrice.div(maxOSqthPrice) : minOSqthPrice.div(ethPrice)
+      const upperPriceRange = isWethToken0 ? ethPrice.div(minOSqthPrice) : maxOSqthPrice.div(ethPrice)
+
+      const lowerPriceRangeInt = lowerPriceRange.integerValue()
+      const upperPriceRangeInt = upperPriceRange.integerValue()
+
+      const lowerTick = lowerPriceRangeInt.isFinite()
+        ? TickMath.getTickAtSqrtRatio(encodeSqrtRatioX96(lowerPriceRangeInt.toNumber(), 1))
+        : TickMath.MIN_TICK
+      const upperTick = upperPriceRangeInt.isFinite()
+        ? TickMath.getTickAtSqrtRatio(encodeSqrtRatioX96(upperPriceRangeInt.toNumber(), 1))
+        : TickMath.MAX_TICK
+
+      return { lowerTick, upperTick }
+    },
+    [isWethToken0, ethPrice],
+  )
 
   return getTicksFromPriceRange
 }