From 9f0413b8563ed86167211465f4f3f799e8bcb91c Mon Sep 17 00:00:00 2001 From: adam5909099 Date: Wed, 4 May 2022 22:20:04 -0400 Subject: [PATCH 01/10] Add collateral you redeem --- .../src/components/Trade/Short/index.tsx | 69 +++++++++++++++++-- 1 file changed, 63 insertions(+), 6 deletions(-) diff --git a/packages/frontend/src/components/Trade/Short/index.tsx b/packages/frontend/src/components/Trade/Short/index.tsx index 8bafc6d69..aa3274110 100644 --- a/packages/frontend/src/components/Trade/Short/index.tsx +++ b/packages/frontend/src/components/Trade/Short/index.tsx @@ -55,6 +55,7 @@ import useAppEffect from '@hooks/useAppEffect' import useAppCallback from '@hooks/useAppCallback' import { useVaultHistoryQuery } from '@hooks/useVaultHistory' import useAppMemo from '@hooks/useAppMemo' +import floatifyBigNums from '@utils/floatifyBigNums' const useStyles = makeStyles((theme) => createStyles({ @@ -731,7 +732,6 @@ const CloseShort: React.FC = ({ open }) => { }, [vaultId, shortHelper, firstValidVault, shortVaults]) useAppEffect(() => { - if (amount.isEqualTo(0)) { setExistingCollat(new BigNumber(0)) setNeededCollat(new BigNumber(0)) @@ -739,6 +739,15 @@ const CloseShort: React.FC = ({ open }) => { } }, [amount]) + console.log( + floatifyBigNums({ + collateralAmount: vault?.collateralAmount, + shortAmount: vault?.shortAmount, + collatPercent, + amount, + }), + ) + useAppEffect(() => { if (shortVaults.length && !amount.isEqualTo(0)) { const _collat: BigNumber = vault?.collateralAmount ?? new BigNumber(0) @@ -746,21 +755,43 @@ const CloseShort: React.FC = ({ open }) => { 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) + const _neededCollat = _collat.minus(withdrawCollat) + const collatPercent = _neededCollat.div(debt).toNumber() * 100 + setCollatPercent(Math.max(150, collatPercent)) }) } }, [ amount, shortVaults?.length, - collatPercent, vault?.collateralAmount, vault?.shortAmount, getDebtAmount, neededCollat, + withdrawCollat, ]) + // 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) { setBuyLoading(false) @@ -1018,7 +1049,7 @@ const CloseShort: React.FC = ({ open }) => {
setCollatPercent(Number(event.target.value))} @@ -1048,6 +1079,32 @@ const CloseShort: React.FC = ({ open }) => { />
)} + +
+ setWithdrawCollat(new BigNumber(event.target.value))} + id="filled-basic" + label="Collateral you redeem" + variant="outlined" + FormHelperTextProps={{ classes: { root: classes.formHelperText } }} + InputProps={{ + endAdornment: ( + + ETH + + ), + }} + inputProps={{ + min: '0', + }} + /> +
+ Date: Thu, 5 May 2022 22:29:46 -0400 Subject: [PATCH 02/10] Update dependency logic --- .../src/components/Trade/Short/index.tsx | 99 +++++++++++-------- 1 file changed, 60 insertions(+), 39 deletions(-) diff --git a/packages/frontend/src/components/Trade/Short/index.tsx b/packages/frontend/src/components/Trade/Short/index.tsx index aa3274110..1cd9566e4 100644 --- a/packages/frontend/src/components/Trade/Short/index.tsx +++ b/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, useCallback, useEffect, useState } from 'react' import { CloseType, Tooltips, Links } from '@constants/enums' import useShortHelper from '@hooks/contracts/useShortHelper' @@ -662,6 +662,7 @@ const CloseShort: React.FC = ({ 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) @@ -733,42 +734,68 @@ const CloseShort: React.FC = ({ open }) => { useAppEffect(() => { if (amount.isEqualTo(0)) { - setExistingCollat(new BigNumber(0)) setNeededCollat(new BigNumber(0)) setWithdrawCollat(new BigNumber(0)) } }, [amount]) - console.log( - floatifyBigNums({ - collateralAmount: vault?.collateralAmount, - shortAmount: vault?.shortAmount, - collatPercent, - amount, - }), - ) + // console.log( + // floatifyBigNums({ + // collateralAmount: vault?.collateralAmount, + // shortAmount: vault?.shortAmount, + // collatPercent, + // amount, + // }), + // ) 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) + if (amount.isEqualTo(0)) { + setExistingCollat(BIG_ZERO) + } else { + setExistingCollat(vault?.collateralAmount ?? BIG_ZERO) + } + }, [amount, vault?.collateralAmount]) - getDebtAmount(new BigNumber(restOfShort)).then((debt) => { - const _neededCollat = _collat.minus(withdrawCollat) - const collatPercent = _neededCollat.div(debt).toNumber() * 100 - setCollatPercent(Math.max(150, collatPercent)) - }) + 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, - shortVaults?.length, - vault?.collateralAmount, - vault?.shortAmount, - getDebtAmount, - neededCollat, - withdrawCollat, - ]) + + 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)) { @@ -1029,7 +1056,7 @@ const CloseShort: React.FC = ({ open }) => { } else { setSqthTradeAmount('0') } - setCollatPercent(200) + handleCollatPercentChange(200) return setCloseType(event.target.value as CloseType) }} displayEmpty @@ -1049,10 +1076,10 @@ const CloseShort: React.FC = ({ open }) => {
setCollatPercent(Number(event.target.value))} + onChange={(event) => handleCollatPercentChange(Number(event.target.value))} id="filled-basic" label="Collateral Ratio" variant="outlined" @@ -1073,7 +1100,7 @@ const CloseShort: React.FC = ({ open }) => { /> setCollatPercent(val)} + onCollatValueChange={(val) => handleCollatPercentChange(val)} collatValue={collatPercent} id="close-short-collat-ratio" /> @@ -1087,7 +1114,7 @@ const CloseShort: React.FC = ({ open }) => { value={Number(withdrawCollat.toFixed(4))} type="number" style={{ width: 300 }} - onChange={(event) => setWithdrawCollat(new BigNumber(event.target.value))} + onChange={(event) => handleWithdrawCollatChange(new BigNumber(event.target.value))} id="filled-basic" label="Collateral you redeem" variant="outlined" @@ -1139,12 +1166,6 @@ const CloseShort: React.FC = ({ open }) => { id="close-short-trade-details" />
- Date: Thu, 5 May 2022 22:34:30 -0400 Subject: [PATCH 03/10] chore: remove console log --- packages/frontend/src/components/Trade/Short/index.tsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/packages/frontend/src/components/Trade/Short/index.tsx b/packages/frontend/src/components/Trade/Short/index.tsx index 1cd9566e4..7d5e8b2fa 100644 --- a/packages/frontend/src/components/Trade/Short/index.tsx +++ b/packages/frontend/src/components/Trade/Short/index.tsx @@ -55,7 +55,6 @@ import useAppEffect from '@hooks/useAppEffect' import useAppCallback from '@hooks/useAppCallback' import { useVaultHistoryQuery } from '@hooks/useVaultHistory' import useAppMemo from '@hooks/useAppMemo' -import floatifyBigNums from '@utils/floatifyBigNums' const useStyles = makeStyles((theme) => createStyles({ @@ -739,15 +738,6 @@ const CloseShort: React.FC = ({ open }) => { } }, [amount]) - // console.log( - // floatifyBigNums({ - // collateralAmount: vault?.collateralAmount, - // shortAmount: vault?.shortAmount, - // collatPercent, - // amount, - // }), - // ) - useAppEffect(() => { if (amount.isEqualTo(0)) { setExistingCollat(BIG_ZERO) From 755eb95092ad8eb0720d06b2188f8e955232935d Mon Sep 17 00:00:00 2001 From: adam5909099 Date: Sun, 8 May 2022 21:17:43 -0400 Subject: [PATCH 04/10] Remove unused hooks --- packages/frontend/src/components/Trade/Short/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/components/Trade/Short/index.tsx b/packages/frontend/src/components/Trade/Short/index.tsx index ccafbddae..a2562becf 100644 --- a/packages/frontend/src/components/Trade/Short/index.tsx +++ b/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, useCallback, useEffect, useState } from 'react' +import React, { memo, useState } from 'react' import { CloseType, Tooltips, Links } from '@constants/enums' import useShortHelper from '@hooks/contracts/useShortHelper' From 5bc3c1d02ece0c8750e6993126b7fa8e743e75fa Mon Sep 17 00:00:00 2001 From: adam5909099 Date: Mon, 9 May 2022 03:55:45 -0400 Subject: [PATCH 05/10] Add logic for liq price --- .../src/components/Trade/Short/index.tsx | 25 +++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/components/Trade/Short/index.tsx b/packages/frontend/src/components/Trade/Short/index.tsx index a2562becf..e44ec75ca 100644 --- a/packages/frontend/src/components/Trade/Short/index.tsx +++ b/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' @@ -35,7 +35,7 @@ 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 { useComputeSwaps, useFirstValidVault, useLPPositionsQuery } from 'src/state/positions/hooks' import { ethTradeAmountAtom, quoteAtom, @@ -672,6 +672,8 @@ const CloseShort: React.FC = ({ open }) => { resetTxCancelled, } = useTransactionStatus() + const [liqPrice, setLiqPrice] = useState(BIG_ZERO) + const { closeShort } = useShortHelper() const getWSqueethPositionValue = useGetWSqueethPositionValue() const { shortHelper } = useAtomValue(addressesAtom) @@ -696,6 +698,7 @@ const CloseShort: React.FC = ({ open }) => { const amount = useAppMemo(() => new BigNumber(sqthTradeAmount), [sqthTradeAmount]) const { data } = useWalletBalance() const balance = Number(toTokenAmount(data ?? BIG_ZERO, 18).toFixed(4)) + const normalizationFactor = useAtomValue(normFactorAtom) const { loading: isPositionFinishedCalc } = useLPPositionsQuery() const { updateVault } = useVaultManager() @@ -713,6 +716,12 @@ const CloseShort: React.FC = ({ open }) => { } }, [vault, vault?.shortAmount]) + useAppEffect(() => { + const rSqueeth = normalizationFactor.multipliedBy(amount || 1).dividedBy(10000) + const liqp = withdrawCollat.dividedBy(rSqueeth.multipliedBy(1.5)) + setLiqPrice(liqp) + }, [amount, collatPercent, withdrawCollat, normalizationFactor]) + // useAppEffect(() => { // if (shortVaults[firstValidVault]?.shortAmount && shortVaults[firstValidVault]?.shortAmount.lt(amount)) { // console.log('looking for something weird') @@ -869,6 +878,10 @@ const CloseShort: React.FC = ({ open }) => { } }, [finalShortAmount, setSqthTradeAmount]) + useEffect(() => { + setShortCloseMax() + }, [setShortCloseMax]) + // let openError: string | undefined let closeError: string | undefined let existingLongError: string | undefined @@ -1151,6 +1164,14 @@ const CloseShort: React.FC = ({ open }) => { id="close-short-trade-details" />
+ Date: Tue, 10 May 2022 04:55:45 -0400 Subject: [PATCH 06/10] Update new liquidation price calc --- .../src/components/Trade/Short/index.tsx | 28 +++++++++++++------ 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/packages/frontend/src/components/Trade/Short/index.tsx b/packages/frontend/src/components/Trade/Short/index.tsx index e44ec75ca..d5c98f910 100644 --- a/packages/frontend/src/components/Trade/Short/index.tsx +++ b/packages/frontend/src/components/Trade/Short/index.tsx @@ -34,7 +34,12 @@ 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 { + useGetCollatRatioAndLiqPrice, + useGetDebtAmount, + useGetShortAmountFromDebt, + useUpdateOperator, +} from 'src/state/controller/hooks' import { useComputeSwaps, useFirstValidVault, useLPPositionsQuery } from 'src/state/positions/hooks' import { ethTradeAmountAtom, @@ -55,6 +60,7 @@ import useAppEffect from '@hooks/useAppEffect' import useAppCallback from '@hooks/useAppCallback' import { useVaultHistoryQuery } from '@hooks/useVaultHistory' import useAppMemo from '@hooks/useAppMemo' +import floatifyBigNums from '@utils/floatifyBigNums' const useStyles = makeStyles((theme) => createStyles({ @@ -661,6 +667,7 @@ const CloseShort: React.FC = ({ open }) => { const [debtAmount, setDebtAmount] = useState(BIG_ZERO) const [closeType, setCloseType] = useState(CloseType.FULL) const [isTxFirstStep, setIsTxFirstStep] = useAtom(isTransactionFirstStepAtom) + const getCollatRatioAndLiqPrice = useGetCollatRatioAndLiqPrice() const classes = useStyles() const { @@ -698,7 +705,6 @@ const CloseShort: React.FC = ({ open }) => { const amount = useAppMemo(() => new BigNumber(sqthTradeAmount), [sqthTradeAmount]) const { data } = useWalletBalance() const balance = Number(toTokenAmount(data ?? BIG_ZERO, 18).toFixed(4)) - const normalizationFactor = useAtomValue(normFactorAtom) const { loading: isPositionFinishedCalc } = useLPPositionsQuery() const { updateVault } = useVaultManager() @@ -717,10 +723,16 @@ const CloseShort: React.FC = ({ open }) => { }, [vault, vault?.shortAmount]) useAppEffect(() => { - const rSqueeth = normalizationFactor.multipliedBy(amount || 1).dividedBy(10000) - const liqp = withdrawCollat.dividedBy(rSqueeth.multipliedBy(1.5)) - setLiqPrice(liqp) - }, [amount, collatPercent, withdrawCollat, normalizationFactor]) + getCollatRatioAndLiqPrice( + neededCollat, + finalShortAmount.minus(amount), + vault?.NFTCollateralId ? Number(vault.NFTCollateralId) : undefined, + ).then(({ liquidationPrice }) => { + console.log(vault?.NFTCollateralId) + console.log(floatifyBigNums({ liquidationPrice, amount: finalShortAmount.minus(amount) })) + setLiqPrice(liquidationPrice) + }) + }, [amount, neededCollat, finalShortAmount, vault?.NFTCollateralId, getCollatRatioAndLiqPrice]) // useAppEffect(() => { // if (shortVaults[firstValidVault]?.shortAmount && shortVaults[firstValidVault]?.shortAmount.lt(amount)) { @@ -733,7 +745,7 @@ const CloseShort: React.FC = ({ open }) => { if (!vault) return setIsVaultApproved(vault?.operator?.toLowerCase() === shortHelper?.toLowerCase()) - }, [vaultId, shortHelper, vault]) + }, [shortHelper, vault]) useAppEffect(() => { if (amount.isEqualTo(0)) { @@ -1165,7 +1177,7 @@ const CloseShort: React.FC = ({ open }) => { />
Date: Tue, 10 May 2022 04:55:55 -0400 Subject: [PATCH 07/10] Remvoe console log --- packages/frontend/src/components/Trade/Short/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/frontend/src/components/Trade/Short/index.tsx b/packages/frontend/src/components/Trade/Short/index.tsx index d5c98f910..2a15fa9fc 100644 --- a/packages/frontend/src/components/Trade/Short/index.tsx +++ b/packages/frontend/src/components/Trade/Short/index.tsx @@ -728,8 +728,6 @@ const CloseShort: React.FC = ({ open }) => { finalShortAmount.minus(amount), vault?.NFTCollateralId ? Number(vault.NFTCollateralId) : undefined, ).then(({ liquidationPrice }) => { - console.log(vault?.NFTCollateralId) - console.log(floatifyBigNums({ liquidationPrice, amount: finalShortAmount.minus(amount) })) setLiqPrice(liquidationPrice) }) }, [amount, neededCollat, finalShortAmount, vault?.NFTCollateralId, getCollatRatioAndLiqPrice]) From 5006b393f6c40af291167673831f908660235bc7 Mon Sep 17 00:00:00 2001 From: adam5909099 Date: Tue, 10 May 2022 04:56:21 -0400 Subject: [PATCH 08/10] Remove unused import --- packages/frontend/src/components/Trade/Short/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/frontend/src/components/Trade/Short/index.tsx b/packages/frontend/src/components/Trade/Short/index.tsx index 2a15fa9fc..a9bfa61e5 100644 --- a/packages/frontend/src/components/Trade/Short/index.tsx +++ b/packages/frontend/src/components/Trade/Short/index.tsx @@ -60,7 +60,6 @@ import useAppEffect from '@hooks/useAppEffect' import useAppCallback from '@hooks/useAppCallback' import { useVaultHistoryQuery } from '@hooks/useVaultHistory' import useAppMemo from '@hooks/useAppMemo' -import floatifyBigNums from '@utils/floatifyBigNums' const useStyles = makeStyles((theme) => createStyles({ From 205da1fb377f57c714ab9d746cf02e9cad396748 Mon Sep 17 00:00:00 2001 From: adam5909099 Date: Fri, 13 May 2022 10:11:16 -0400 Subject: [PATCH 09/10] Set max allowed to slider to ensure eth being greater than 0 --- packages/frontend/src/components/CollatRange.tsx | 16 ++++++++++++++-- .../src/components/Trade/Short/index.tsx | 15 ++++++++++++--- 2 files changed, 26 insertions(+), 5 deletions(-) diff --git a/packages/frontend/src/components/CollatRange.tsx b/packages/frontend/src/components/CollatRange.tsx index 2ada6031a..e7932a617 100644 --- a/packages/frontend/src/components/CollatRange.tsx +++ b/packages/frontend/src/components/CollatRange.tsx @@ -1,4 +1,4 @@ -import { createStyles, makeStyles, Tooltip, Snackbar, Collapse, styled } from '@material-ui/core' +import { createStyles, makeStyles, Tooltip, Collapse } from '@material-ui/core' import { yellow } from '@material-ui/core/colors' import Alert from '@material-ui/lab/Alert' import React from 'react' @@ -30,6 +30,7 @@ type CollatRangeType = { onCollatValueChange: (val: number) => void className?: string existingCollatPercent?: number + maxAllowedValue?: number } const marks = [ @@ -53,6 +54,7 @@ const CollatRange: React.FC = ({ onCollatValueChange, className, existingCollatPercent = 0, + maxAllowedValue, }) => { const classes = useStyles() @@ -90,7 +92,17 @@ const CollatRange: React.FC = ({ changeSlider(val as number[])} + onChange={(_, val) => { + if (!Array.isArray(val)) { + return + } + + if (maxAllowedValue && val[1] > maxAllowedValue) { + changeSlider([val[0], maxAllowedValue]) + } else { + changeSlider(val) + } + }} step={0.1} style={{ width: '100%' }} classes={{ diff --git a/packages/frontend/src/components/Trade/Short/index.tsx b/packages/frontend/src/components/Trade/Short/index.tsx index 2f1874311..2800e69ff 100644 --- a/packages/frontend/src/components/Trade/Short/index.tsx +++ b/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, useEffect, useState } from 'react' +import React, { memo, useEffect, useMemo, useState } from 'react' import { CloseType, Tooltips, Links } from '@constants/enums' import useShortHelper from '@hooks/contracts/useShortHelper' @@ -842,8 +842,16 @@ const CloseShort: React.FC = ({ open }) => { setCollatPercent(Math.max(0, newNeededCollat.div(debtAmount).toNumber() * 100)) } + const maxAllowedCollatPercent = useAppMemo(() => { + return Math.max(0, existingCollat.div(debtAmount).toNumber() * 100) + }, [debtAmount, existingCollat]) + const handleCollatPercentChange = useAppCallback( - (newCollatPercent: number) => { + (newCollatPercentParam: number) => { + const newCollatPercent = maxAllowedCollatPercent + ? Math.min(newCollatPercentParam, maxAllowedCollatPercent) + : newCollatPercentParam + setCollatPercent(newCollatPercent) if (amount.isZero()) { @@ -855,7 +863,7 @@ const CloseShort: React.FC = ({ open }) => { setWithdrawCollat(newNeededCollat.gt(0) ? existingCollat.minus(newNeededCollat) : existingCollat) }, - [amount, debtAmount, existingCollat], + [amount, debtAmount, existingCollat, maxAllowedCollatPercent], ) useAppEffect(() => { @@ -1172,6 +1180,7 @@ const CloseShort: React.FC = ({ open }) => { onCollatValueChange={(val) => handleCollatPercentChange(val)} collatValue={collatPercent} id="close-short-collat-ratio" + maxAllowedValue={maxAllowedCollatPercent} />
)} From f460556556574a5c5b49194a692aed47df5d8b99 Mon Sep 17 00:00:00 2001 From: adam5909099 Date: Mon, 23 May 2022 10:27:23 -0400 Subject: [PATCH 10/10] Update UI and logic for partial short close --- .../src/components/Input/PrimaryInput.tsx | 2 +- .../src/components/Trade/Short/index.tsx | 104 ++++++++++++++++-- 2 files changed, 96 insertions(+), 10 deletions(-) diff --git a/packages/frontend/src/components/Input/PrimaryInput.tsx b/packages/frontend/src/components/Input/PrimaryInput.tsx index 604e74d7b..f566b6a09 100644 --- a/packages/frontend/src/components/Input/PrimaryInput.tsx +++ b/packages/frontend/src/components/Input/PrimaryInput.tsx @@ -35,7 +35,7 @@ const useStyles = makeStyles((theme) => justifyContent: 'space-between', }, rightContainer: { - width: '50%', + width: '60%', }, unitsContainer: {}, label: { diff --git a/packages/frontend/src/components/Trade/Short/index.tsx b/packages/frontend/src/components/Trade/Short/index.tsx index c3d3754e5..c434f7765 100644 --- a/packages/frontend/src/components/Trade/Short/index.tsx +++ b/packages/frontend/src/components/Trade/Short/index.tsx @@ -1,4 +1,4 @@ -import { CircularProgress } from '@material-ui/core' +import { Box, CircularProgress } from '@material-ui/core' import { createStyles, InputAdornment, @@ -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, useEffect, useMemo, useState } from 'react' +import React, { memo, useEffect, useMemo, useRef, useState } from 'react' import { CloseType, Tooltips, Links } from '@constants/enums' import useShortHelper from '@hooks/contracts/useShortHelper' @@ -60,6 +60,7 @@ import useAppEffect from '@hooks/useAppEffect' import useAppCallback from '@hooks/useAppCallback' import { useVaultHistoryQuery } from '@hooks/useVaultHistory' import useAppMemo from '@hooks/useAppMemo' +import { squeethInitialPriceAtom } from 'src/state/squeethPool/atoms' const useStyles = makeStyles((theme) => createStyles({ @@ -720,6 +721,7 @@ const CloseShort: React.FC = ({ open }) => { const quote = useAtomValue(quoteAtom) const [sellCloseQuote, setSellCloseQuote] = useAtom(sellCloseQuoteAtom) const [sqthTradeAmount, setSqthTradeAmount] = useAtom(sqthTradeAmountAtom) + const [ethTradeAmount, setEthTradeAmount] = useState('') const resetSqthTradeAmount = useResetAtom(sqthTradeAmountAtom) const setTradeSuccess = useUpdateAtom(tradeSuccessAtom) @@ -732,11 +734,12 @@ const CloseShort: React.FC = ({ open }) => { const { loading: isPositionFinishedCalc } = useLPPositionsQuery() const { updateVault } = useVaultManager() const { validVault: vault, vaultId } = useFirstValidVault() - const { existingCollatPercent } = useVaultData(vault) + const { existingCollatPercent, existingLiqPrice } = useVaultData(vault) const setCollatRatio = useUpdateAtom(collatRatioAtom) const ethPrice = useETHPrice() const [isVaultHistoryUpdating, setVaultHistoryUpdating] = useAtom(vaultHistoryUpdatingAtom) const vaultHistoryQuery = useVaultHistoryQuery(Number(vaultId), isVaultHistoryUpdating) + const squeethInitialPrice = useAtomValue(squeethInitialPriceAtom) useAppEffect(() => { if (vault) { @@ -988,6 +991,28 @@ const CloseShort: React.FC = ({ open }) => { setSqthTradeAmount(v) } + const ignoreEffect = useRef(false) + const handleEthAmountInput = (v: string) => { + const newSqthTradeAmount = new BigNumber(v).dividedBy(squeethInitialPrice).toString() + ignoreEffect.current = true + setSqthTradeAmount(newSqthTradeAmount) + setEthTradeAmount(v) + setTimeout(() => { + ignoreEffect.current = false + }) + } + + useEffect(() => { + if (ignoreEffect.current) { + return + } + setEthTradeAmount(squeethInitialPrice.multipliedBy(sqthTradeAmount).toString()) + }, [sqthTradeAmount, squeethInitialPrice]) + + const finalShortEth = useMemo(() => { + return squeethInitialPrice.multipliedBy(finalShortAmount) + }, [finalShortAmount, squeethInitialPrice]) + return (
{confirmed && !isTxFirstStep ? ( @@ -1043,8 +1068,7 @@ const CloseShort: React.FC = ({ open }) => { isFullClose={closeType === CloseType.FULL} value={sqthTradeAmount} onChange={(v) => handleAmountInput(v)} - label="Amount" - tooltip={Tooltips.SellCloseAmount} + label="Debt to buy back and burn" actionTxt="Max" onActionClicked={setShortCloseMax} unit="oSQTH" @@ -1085,6 +1109,52 @@ const CloseShort: React.FC = ({ open }) => { id="close-short-osqth-input" />
+
+ handleEthAmountInput(v)} + label="Collateral to remove" + actionTxt="Max" + onActionClicked={setShortCloseMax} + unit="ETH" + error={!!existingLongError || !!priceImpactWarning || !!closeError || !!insufficientETHBalance} + isLoading={isPositionFinishedCalc} + convertedValue={ + !amount.isNaN() + ? getWSqueethPositionValue(amount).toFixed(2).toLocaleString() + : Number(0).toLocaleString() + } + hint={ + closeError ? ( + closeError + ) : existingLongError ? ( + existingLongError + ) : priceImpactWarning ? ( + priceImpactWarning + ) : insufficientETHBalance ? ( + insufficientETHBalance + ) : ( +
+ + Position{' '} + {finalShortEth.toFixed(6)}{' '} + + {amount.toNumber() ? ( + <> + + + {finalShortEth?.minus(ethTradeAmount).toFixed(6)} + + + ) : null}{' '} + ETH +
+ ) + } + id="close-short-osqth-input" + /> +