82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
import { useCallback, useMemo } from 'react'
|
|
|
|
import Button from 'components/common/Button'
|
|
import TokenInputWithSlider from 'components/common/TokenInput/TokenInputWithSlider'
|
|
import { BN_ZERO } from 'constants/math'
|
|
import useAllAssets from 'hooks/assets/useAllAssets'
|
|
import useHealthComputer from 'hooks/useHealthComputer'
|
|
import { useUpdatedAccount } from 'hooks/useUpdatedAccount'
|
|
import useStore from 'store'
|
|
import { BNCoin } from 'types/classes/BNCoin'
|
|
import { byDenom } from 'utils/array'
|
|
import { getHealthFactorMessage } from 'utils/messages'
|
|
|
|
interface Props {
|
|
account: Account
|
|
action: HlsStakingManageAction
|
|
collateralAsset: Asset
|
|
}
|
|
|
|
export default function Withdraw(props: Props) {
|
|
const { removedDeposits, removeDeposits, updatedAccount } = useUpdatedAccount(props.account)
|
|
const { computeMaxWithdrawAmount } = useHealthComputer(updatedAccount)
|
|
const assets = useAllAssets()
|
|
const withdraw = useStore((s) => s.withdraw)
|
|
const handleChange = useCallback(
|
|
(amount: BigNumber) =>
|
|
removeDeposits([BNCoin.fromDenomAndBigNumber(props.collateralAsset.denom, amount)]),
|
|
[removeDeposits, props.collateralAsset.denom],
|
|
)
|
|
|
|
const removedDeposit = useMemo(
|
|
() => removedDeposits.find(byDenom(props.collateralAsset.denom)),
|
|
[props.collateralAsset.denom, removedDeposits],
|
|
)
|
|
|
|
const maxWithdrawAmount = useMemo(() => {
|
|
const currentWithdrawAmount = removedDeposit?.amount || BN_ZERO
|
|
const extraWithdrawAmount = computeMaxWithdrawAmount(props.collateralAsset.denom)
|
|
return currentWithdrawAmount.plus(extraWithdrawAmount)
|
|
}, [computeMaxWithdrawAmount, props.collateralAsset.denom, removedDeposit?.amount])
|
|
|
|
const onClick = useCallback(() => {
|
|
useStore.setState({ hlsManageModal: null })
|
|
if (!removedDeposit) return
|
|
withdraw({
|
|
accountId: props.account.id,
|
|
coins: [{ coin: removedDeposit }],
|
|
borrow: [],
|
|
reclaims: [],
|
|
})
|
|
}, [props.account.id, removedDeposit, withdraw])
|
|
|
|
const withdrawAmount = useMemo(() => removedDeposit?.amount || BN_ZERO, [removedDeposit?.amount])
|
|
|
|
const warningMessages = useMemo(() => {
|
|
if (maxWithdrawAmount.isLessThan(withdrawAmount) || maxWithdrawAmount.isZero()) {
|
|
return [
|
|
getHealthFactorMessage(props.collateralAsset.denom, maxWithdrawAmount, 'withdraw', assets),
|
|
]
|
|
}
|
|
return []
|
|
}, [assets, maxWithdrawAmount, props.collateralAsset.denom, withdrawAmount])
|
|
|
|
return (
|
|
<>
|
|
<TokenInputWithSlider
|
|
amount={withdrawAmount}
|
|
asset={props.collateralAsset}
|
|
max={maxWithdrawAmount}
|
|
onChange={handleChange}
|
|
maxText='Available'
|
|
warningMessages={warningMessages}
|
|
/>
|
|
<Button
|
|
onClick={onClick}
|
|
text='Withdraw'
|
|
disabled={withdrawAmount.isZero() || warningMessages.length !== 0}
|
|
/>
|
|
</>
|
|
)
|
|
}
|