refactor: move most of the logic into hooks

Author: nikkaroraa

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

@@ -3,7 +3,7 @@ import { Box, Typography, Divider, InputAdornment } from '@material-ui/core'
 import { ToggleButtonGroup, ToggleButton } from '@material-ui/lab'
 import { makeStyles, createStyles } from '@material-ui/core/styles'
 import { useAtomValue } from 'jotai'
-import bn from 'bignumber.js'
+import BigNumber from 'bignumber.js'
 import { TickMath } from '@uniswap/v3-sdk'
 
 import { AltPrimaryButton } from '@components/Button'
@@ -144,8 +144,8 @@ const LpSettings: React.FC<{ onComplete: () => void; squeethToMint: string }> =
   const textClasses = useTextStyles()
 
   const squeethPrice = getWSqueethPositionValue(1)
-  const collatRatioVal = new bn(collatRatio).div(100).toNumber()
-  const slippageAmountVal = new bn(slippageAmount).div(100).toNumber()
+  const collatRatioVal = new BigNumber(collatRatio).div(100).toNumber()
+  const slippageAmountVal = new BigNumber(slippageAmount).div(100).toNumber()
 
   useAppEffect(() => {
     if (usingDefaultPriceRange) {
@@ -154,42 +154,42 @@ 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 BigNumber(squeethToMint), lowerTick, upperTick, 0, collatRatioVal, 0)
       if (deposits) {
         setDepositAmounts(deposits)
       }
-    })
+    }
+
+    calcDepositAmounts()
   }, [squeethToMint, lowerTick, upperTick, collatRatioVal, getDepositAmounts])
 
   const openPosition = useAppCallback(async () => {
     try {
-      await openLpPosition(new bn(squeethToMint), lowerTick, upperTick, 0, collatRatioVal, slippageAmountVal, 0, () => {
-        console.log('successfully deposited')
-        onComplete()
-      })
+      await openLpPosition(
+        new BigNumber(squeethToMint),
+        lowerTick,
+        upperTick,
+        0,
+        collatRatioVal,
+        slippageAmountVal,
+        0,
+        () => {
+          console.log('successfully deposited')
+          onComplete()
+        },
+      )
     } catch (e) {
       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,38 @@ 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() && !lowerPriceRangeInt.isZero()
+          ? TickMath.getTickAtSqrtRatio(encodeSqrtRatioX96(lowerPriceRangeInt.toNumber(), 1))
+          : TickMath.MIN_TICK
+
+      const upperTick =
+        upperPriceRangeInt.isFinite() && !upperPriceRangeInt.isZero()
+          ? TickMath.getTickAtSqrtRatio(encodeSqrtRatioX96(upperPriceRangeInt.toNumber(), 1))
+          : TickMath.MAX_TICK
+
+      return { lowerTick, upperTick }
+    },
+    [isWethToken0, ethPrice],
+  )
 
   return getTicksFromPriceRange
 }