Add collateral you redeem

packages/frontend/src/components/Trade/Short/index.tsx

@@ -12,7 +12,7 @@ import {
 import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt'
 import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'
 import BigNumber from 'bignumber.js'
-import React, { memo, useState } from 'react'
+import React, { memo, useEffect, useState } from 'react'
 
 import { CloseType, Tooltips, Links } from '@constants/enums'
 import useShortHelper from '@hooks/contracts/useShortHelper'
@@ -34,8 +34,13 @@ import { useETHPrice } from '@hooks/useETHPrice'
 import { collatRatioAtom } from 'src/state/ethPriceCharts/atoms'
 import { useResetAtom, useUpdateAtom } from 'jotai/utils'
 import { useGetBuyQuote, useGetSellQuote, useGetWSqueethPositionValue } from 'src/state/squeethPool/hooks'
-import { useGetDebtAmount, useGetShortAmountFromDebt, useUpdateOperator } from 'src/state/controller/hooks'
-import { useComputeSwaps, useFirstValidVault, useLPPositionsQuery, useVaultQuery } from 'src/state/positions/hooks'
+import {
+  useGetCollatRatioAndLiqPrice,
+  useGetDebtAmount,
+  useGetShortAmountFromDebt,
+  useUpdateOperator,
+} from 'src/state/controller/hooks'
+import { useComputeSwaps, useFirstValidVault, useLPPositionsQuery } from 'src/state/positions/hooks'
 import {
   ethTradeAmountAtom,
   quoteAtom,
@@ -658,8 +663,10 @@ const CloseShort: React.FC<SellType> = ({ open }) => {
   const [buyLoading, setBuyLoading] = useState(false)
   const [withdrawCollat, setWithdrawCollat] = useState(new BigNumber(0))
   const [neededCollat, setNeededCollat] = useState(new BigNumber(0))
+  const [debtAmount, setDebtAmount] = useState(BIG_ZERO)
   const [closeType, setCloseType] = useState(CloseType.FULL)
   const [isTxFirstStep, setIsTxFirstStep] = useAtom(isTransactionFirstStepAtom)
+  const getCollatRatioAndLiqPrice = useGetCollatRatioAndLiqPrice()
 
   const classes = useStyles()
   const {
@@ -671,6 +678,8 @@ const CloseShort: React.FC<SellType> = ({ open }) => {
     resetTxCancelled,
   } = useTransactionStatus()
 
+  const [liqPrice, setLiqPrice] = useState(BIG_ZERO)
+
   const { closeShort } = useShortHelper()
   const getWSqueethPositionValue = useGetWSqueethPositionValue()
   const { shortHelper } = useAtomValue(addressesAtom)
@@ -712,6 +721,16 @@ const CloseShort: React.FC<SellType> = ({ open }) => {
     }
   }, [vault, vault?.shortAmount])
 
+  useAppEffect(() => {
+    getCollatRatioAndLiqPrice(
+      neededCollat,
+      finalShortAmount.minus(amount),
+      vault?.NFTCollateralId ? Number(vault.NFTCollateralId) : undefined,
+    ).then(({ liquidationPrice }) => {
+      setLiqPrice(liquidationPrice)
+    })
+  }, [amount, neededCollat, finalShortAmount, vault?.NFTCollateralId, getCollatRatioAndLiqPrice])
+
   // useAppEffect(() => {
   //   if (shortVaults[firstValidVault]?.shortAmount && shortVaults[firstValidVault]?.shortAmount.lt(amount)) {
   //     console.log('looking for something weird')
@@ -723,29 +742,85 @@ const CloseShort: React.FC<SellType> = ({ open }) => {
     if (!vault) return
 
     setIsVaultApproved(vault?.operator?.toLowerCase() === shortHelper?.toLowerCase())
-  }, [vaultId, shortHelper, vault])
+  }, [shortHelper, vault])
 
   useAppEffect(() => {
     if (amount.isEqualTo(0)) {
-      setExistingCollat(new BigNumber(0))
       setNeededCollat(new BigNumber(0))
       setWithdrawCollat(new BigNumber(0))
     }
   }, [amount])
 
   useAppEffect(() => {
-    if (vault && !amount.isEqualTo(0)) {
-      const _collat: BigNumber = vault?.collateralAmount ?? new BigNumber(0)
-      setExistingCollat(_collat)
-      const restOfShort = new BigNumber(vault?.shortAmount ?? new BigNumber(0)).minus(amount)
+    if (amount.isEqualTo(0)) {
+      setExistingCollat(BIG_ZERO)
+    } else {
+      setExistingCollat(vault?.collateralAmount ?? BIG_ZERO)
+    }
+  }, [amount, vault?.collateralAmount])
 
-      getDebtAmount(new BigNumber(restOfShort)).then((debt) => {
-        const _neededCollat = debt.times(collatPercent / 100)
-        setNeededCollat(_neededCollat)
-        setWithdrawCollat(_neededCollat.gt(0) ? _collat.minus(neededCollat) : _collat)
-      })
+  useAppEffect(() => {
+    const restOfShort = new BigNumber(vault?.shortAmount ?? new BigNumber(0)).minus(amount)
+
+    getDebtAmount(restOfShort).then((debt) => {
+      setDebtAmount(debt)
+    })
+  }, [vault?.shortAmount, amount, getDebtAmount])
+
+  const handleWithdrawCollatChange = (newWithdrawCollat: BigNumber) => {
+    setWithdrawCollat(newWithdrawCollat)
+
+    if (amount.isZero()) {
+      return
     }
-  }, [amount, collatPercent, getDebtAmount, neededCollat, vault])
+
+    const newNeededCollat = existingCollat.minus(newWithdrawCollat)
+    setNeededCollat(newNeededCollat)
+
+    setCollatPercent(Math.max(0, newNeededCollat.div(debtAmount).toNumber() * 100))
+  }
+
+  const handleCollatPercentChange = useAppCallback(
+    (newCollatPercent: number) => {
+      setCollatPercent(newCollatPercent)
+
+      if (amount.isZero()) {
+        return
+      }
+
+      const newNeededCollat = debtAmount.times(newCollatPercent / 100)
+      setNeededCollat(newNeededCollat)
+
+      setWithdrawCollat(newNeededCollat.gt(0) ? existingCollat.minus(newNeededCollat) : existingCollat)
+    },
+    [amount, debtAmount, existingCollat],
+  )
+
+  useAppEffect(() => {
+    handleCollatPercentChange(collatPercent)
+  }, [debtAmount, collatPercent, handleCollatPercentChange])
+
+  // useAppEffect(() => {
+  //   if (shortVaults.length && !amount.isEqualTo(0)) {
+  //     const _collat: BigNumber = vault?.collateralAmount ?? new BigNumber(0)
+  //     setExistingCollat(_collat)
+  //     const restOfShort = new BigNumber(vault?.shortAmount ?? new BigNumber(0)).minus(amount)
+
+  //     getDebtAmount(new BigNumber(restOfShort)).then((debt) => {
+  //       const _neededCollat = debt.times(collatPercent / 100)
+  //       setNeededCollat(_neededCollat)
+  //       setWithdrawCollat(_neededCollat.gt(0) ? _collat.minus(neededCollat) : _collat)
+  //     })
+  //   }
+  // }, [
+  //   amount,
+  //   shortVaults?.length,
+  //   collatPercent,
+  //   vault?.collateralAmount,
+  //   vault?.shortAmount,
+  //   getDebtAmount,
+  //   neededCollat,
+  // ])
 
   useAppEffect(() => {
     if (transactionInProgress) {
@@ -812,6 +887,10 @@ const CloseShort: React.FC<SellType> = ({ open }) => {
     }
   }, [finalShortAmount, setSqthTradeAmount])
 
+  useEffect(() => {
+    setShortCloseMax()
+  }, [setShortCloseMax])
+
   // let openError: string | undefined
   let closeError: string | undefined
   let existingLongError: string | undefined
@@ -984,7 +1063,7 @@ const CloseShort: React.FC<SellType> = ({ open }) => {
                 } else {
                   setSqthTradeAmount('0')
                 }
-                setCollatPercent(200)
+                handleCollatPercentChange(200)
                 return setCloseType(event.target.value as CloseType)
               }}
               displayEmpty
@@ -1004,10 +1083,10 @@ const CloseShort: React.FC<SellType> = ({ open }) => {
             <div className={classes.thirdHeading}>
               <TextField
                 size="small"
-                value={collatPercent}
+                value={Number(collatPercent.toFixed(2))}
                 type="number"
                 style={{ width: 300 }}
-                onChange={(event) => setCollatPercent(Number(event.target.value))}
+                onChange={(event) => handleCollatPercentChange(Number(event.target.value))}
                 id="filled-basic"
                 label="Collateral Ratio"
                 variant="outlined"
@@ -1028,12 +1107,38 @@ const CloseShort: React.FC<SellType> = ({ open }) => {
               />
               <CollatRange
                 className={classes.thirdHeading}
-                onCollatValueChange={(val) => setCollatPercent(val)}
+                onCollatValueChange={(val) => handleCollatPercentChange(val)}
                 collatValue={collatPercent}
                 id="close-short-collat-ratio"
               />
             </div>
           )}
+
+          <div className={classes.thirdHeading}>
+            <TextField
+              size="small"
+              disabled={closeType === CloseType.FULL}
+              value={Number(withdrawCollat.toFixed(4))}
+              type="number"
+              style={{ width: 300 }}
+              onChange={(event) => handleWithdrawCollatChange(new BigNumber(event.target.value))}
+              id="filled-basic"
+              label="Collateral you redeem"
+              variant="outlined"
+              FormHelperTextProps={{ classes: { root: classes.formHelperText } }}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <Typography variant="caption">ETH</Typography>
+                  </InputAdornment>
+                ),
+              }}
+              inputProps={{
+                min: '0',
+              }}
+            />
+          </div>
+
           <TradeDetails
             actionTitle="Spend"
             amount={sellCloseQuote.amountIn.toFixed(6)}
@@ -1069,10 +1174,12 @@ const CloseShort: React.FC<SellType> = ({ open }) => {
           />
           <div className={classes.divider}>
             <TradeInfoItem
-              label="Collateral you redeem"
-              value={withdrawCollat.isPositive() ? withdrawCollat.toFixed(4) : 0}
-              unit="ETH"
-              id="close-short-collateral-to-redeem"
+              label="New Liquidation Price"
+              value={liqPrice.toFixed(2)}
+              unit="USDC"
+              tooltip={`${Tooltips.LiquidationPrice}. ${Tooltips.Twap}`}
+              priceType="twap"
+              id="close-short-liquidation-price"
             />
             <TradeInfoItem
               label="Current Collateral ratio"