56bfea8ed0
* feat: update account stats on pending action * lift repay amount with buffer calculation to repay modal * refactor navigation component to properly format account stats * update repay funds hook using credit manager client * consider market liquidity when calculating max withdraw amount * refactor useMaxBorrowAmount hook to be consistent with withdraw * format * remove duplicated import statements
359 lines
15 KiB
TypeScript
359 lines
15 KiB
TypeScript
import { Dialog, Switch, Transition } from '@headlessui/react'
|
|
import * as RSlider from '@radix-ui/react-slider'
|
|
import BigNumber from 'bignumber.js'
|
|
import React, { useEffect, useMemo, useState } from 'react'
|
|
import { toast } from 'react-toastify'
|
|
|
|
import Slider from 'components/Slider'
|
|
import useWithdrawFunds from 'hooks/mutations/useWithdrawFunds'
|
|
import useAllBalances from 'hooks/useAllBalances'
|
|
import useCalculateMaxWithdrawAmount from 'hooks/useCalculateMaxWithdrawAmount'
|
|
import useCreditAccountPositions from 'hooks/useCreditAccountPositions'
|
|
import useMarkets from 'hooks/useMarkets'
|
|
import useTokenPrices from 'hooks/useTokenPrices'
|
|
import useCreditManagerStore from 'stores/useCreditManagerStore'
|
|
import { formatCurrency } from 'utils/formatters'
|
|
import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
|
|
import useAccountStats, { AccountStatsAction } from 'hooks/useAccountStats'
|
|
import { chain } from 'utils/chains'
|
|
|
|
import Spinner from './Spinner'
|
|
import SemiCircleProgress from './SemiCircleProgress'
|
|
import ProgressBar from './ProgressBar'
|
|
import ContainerSecondary from './ContainerSecondary'
|
|
import Button from './Button'
|
|
|
|
const WithdrawModal = ({ show, onClose }: any) => {
|
|
const [amount, setAmount] = useState(0)
|
|
const [selectedToken, setSelectedToken] = useState('')
|
|
const [isBorrowEnabled, setIsBorrowEnabled] = useState(false)
|
|
|
|
const selectedAccount = useCreditManagerStore((s) => s.selectedAccount)
|
|
const { data: positionsData, isLoading: isLoadingPositions } = useCreditAccountPositions(
|
|
selectedAccount ?? '',
|
|
)
|
|
|
|
const { data: balancesData } = useAllBalances()
|
|
const { data: tokenPrices } = useTokenPrices()
|
|
const { data: marketsData } = useMarkets()
|
|
|
|
const selectedTokenSymbol = getTokenSymbol(selectedToken)
|
|
const selectedTokenDecimals = getTokenDecimals(selectedToken)
|
|
|
|
const tokenAmountInCreditAccount = useMemo(() => {
|
|
return BigNumber(positionsData?.coins.find((coin) => coin.denom === selectedToken)?.amount ?? 0)
|
|
.div(10 ** selectedTokenDecimals)
|
|
.toNumber()
|
|
}, [positionsData, selectedTokenDecimals, selectedToken])
|
|
|
|
const { actions, borrowAmount, withdrawAmount } = useMemo(() => {
|
|
const borrowAmount =
|
|
amount > tokenAmountInCreditAccount
|
|
? BigNumber(amount)
|
|
.minus(tokenAmountInCreditAccount)
|
|
.times(10 ** selectedTokenDecimals)
|
|
.toNumber()
|
|
: 0
|
|
|
|
const withdrawAmount = BigNumber(amount)
|
|
.times(10 ** selectedTokenDecimals)
|
|
.toNumber()
|
|
|
|
return {
|
|
borrowAmount,
|
|
withdrawAmount,
|
|
actions: [
|
|
{
|
|
type: 'borrow',
|
|
amount: borrowAmount,
|
|
denom: selectedToken,
|
|
},
|
|
{
|
|
type: 'withdraw',
|
|
amount: withdrawAmount,
|
|
denom: selectedToken,
|
|
},
|
|
] as AccountStatsAction[],
|
|
}
|
|
}, [amount, selectedToken, selectedTokenDecimals, tokenAmountInCreditAccount])
|
|
|
|
const accountStats = useAccountStats(actions)
|
|
|
|
const { mutate, isLoading } = useWithdrawFunds(withdrawAmount, borrowAmount, selectedToken, {
|
|
onSuccess: () => {
|
|
onClose()
|
|
toast.success(`${amount} ${selectedTokenSymbol} successfully withdrawn`)
|
|
},
|
|
})
|
|
|
|
const maxWithdrawAmount = useCalculateMaxWithdrawAmount(selectedToken, isBorrowEnabled)
|
|
|
|
const walletAmount = useMemo(() => {
|
|
if (!selectedToken) return 0
|
|
|
|
return BigNumber(balancesData?.find((balance) => balance.denom === selectedToken)?.amount ?? 0)
|
|
.div(10 ** selectedTokenDecimals)
|
|
.toNumber()
|
|
}, [balancesData, selectedToken, selectedTokenDecimals])
|
|
|
|
useEffect(() => {
|
|
if (positionsData && positionsData.coins.length > 0) {
|
|
// initialize selected token when allowedCoins fetch data is available
|
|
setSelectedToken(positionsData.coins[0].denom)
|
|
}
|
|
}, [positionsData])
|
|
|
|
const handleTokenChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
setSelectedToken(e.target.value)
|
|
|
|
if (e.target.value !== selectedToken) setAmount(0)
|
|
}
|
|
|
|
const handleValueChange = (value: number) => {
|
|
if (value > maxWithdrawAmount) {
|
|
setAmount(maxWithdrawAmount)
|
|
return
|
|
}
|
|
|
|
setAmount(value)
|
|
}
|
|
|
|
const handleBorrowChange = () => {
|
|
setIsBorrowEnabled((c) => !c)
|
|
// reset amount due to max value calculations changing depending on wheter the user is borrowing or not
|
|
setAmount(0)
|
|
}
|
|
|
|
const getTokenTotalUSDValue = (amount: string, denom: string) => {
|
|
// early return if prices are not fetched yet
|
|
if (!tokenPrices) return 0
|
|
|
|
return (
|
|
BigNumber(amount)
|
|
.div(10 ** getTokenDecimals(denom))
|
|
.toNumber() * tokenPrices[denom]
|
|
)
|
|
}
|
|
|
|
const percentageValue = useMemo(() => {
|
|
if (isNaN(amount) || maxWithdrawAmount === 0) return 0
|
|
|
|
return (amount * 100) / maxWithdrawAmount
|
|
}, [amount, maxWithdrawAmount])
|
|
|
|
return (
|
|
<Transition appear show={show} as={React.Fragment}>
|
|
<Dialog as='div' className='relative z-10' onClose={onClose}>
|
|
<Transition.Child
|
|
as={React.Fragment}
|
|
enter='ease-out duration-300'
|
|
enterFrom='opacity-0'
|
|
enterTo='opacity-100'
|
|
leave='ease-in duration-200'
|
|
leaveFrom='opacity-100'
|
|
leaveTo='opacity-0'
|
|
>
|
|
<div className='fixed inset-0 bg-black bg-opacity-80' />
|
|
</Transition.Child>
|
|
|
|
<div className='fixed inset-0 overflow-y-auto'>
|
|
<div className='flex min-h-full items-center justify-center p-4'>
|
|
<Transition.Child
|
|
as={React.Fragment}
|
|
enter='ease-out duration-300'
|
|
enterFrom='opacity-0 scale-95'
|
|
enterTo='opacity-100 scale-100'
|
|
leave='ease-in duration-200'
|
|
leaveFrom='opacity-100 scale-100'
|
|
leaveTo='opacity-0 scale-95'
|
|
>
|
|
<Dialog.Panel className='flex w-full max-w-3xl transform overflow-hidden rounded-2xl bg-[#585A74] align-middle shadow-xl transition-all'>
|
|
{isLoading && (
|
|
<div className='absolute inset-0 z-40 grid place-items-center bg-black/50'>
|
|
<Spinner />
|
|
</div>
|
|
)}
|
|
<div className='flex w-1/2 flex-col p-4'>
|
|
<Dialog.Title as='h3' className='mb-4 text-center text-lg font-medium'>
|
|
Withdraw from Account {selectedAccount}
|
|
</Dialog.Title>
|
|
<div>
|
|
<ContainerSecondary className='mb-3 p-3'>
|
|
<div className='mb-4 text-sm'>
|
|
<div className='mb-1 flex justify-between'>
|
|
<div className='font-bold'>Asset:</div>
|
|
<select className='bg-transparent' onChange={handleTokenChange}>
|
|
{positionsData?.coins?.map((coin) => (
|
|
<option key={coin.denom} value={coin.denom}>
|
|
{getTokenSymbol(coin.denom)}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className='flex justify-between'>
|
|
<div className='font-bold'>Amount:</div>
|
|
<input
|
|
type='number'
|
|
className='border border-black/50 bg-transparent px-2'
|
|
value={amount}
|
|
min='0'
|
|
onChange={(e) => handleValueChange(e.target.valueAsNumber)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<p className='mb-2 text-sm'>In wallet: {walletAmount.toLocaleString()}</p>
|
|
<Slider
|
|
className='mb-6'
|
|
value={percentageValue}
|
|
onChange={(value) => {
|
|
const decimal = value[0] / 100
|
|
// limit decimal precision based on token contract decimals
|
|
const newAmount = Number(
|
|
(decimal * maxWithdrawAmount).toFixed(selectedTokenDecimals),
|
|
)
|
|
|
|
setAmount(newAmount)
|
|
}}
|
|
onMaxClick={() => setAmount(maxWithdrawAmount)}
|
|
/>
|
|
</ContainerSecondary>
|
|
<ContainerSecondary className='mb-10 flex items-center justify-between'>
|
|
<div className='text-left'>
|
|
<h3 className='font-bold'>Withdraw with borrowing</h3>
|
|
<div className='text-sm text-[#585A74]/50'>Explanation....</div>
|
|
</div>
|
|
|
|
<Switch
|
|
checked={isBorrowEnabled}
|
|
onChange={handleBorrowChange}
|
|
className={`${
|
|
isBorrowEnabled ? 'bg-blue-600' : 'bg-gray-400'
|
|
} relative inline-flex h-6 w-11 items-center rounded-full`}
|
|
>
|
|
<span
|
|
className={`${
|
|
isBorrowEnabled ? 'translate-x-6' : 'translate-x-1'
|
|
} inline-block h-4 w-4 transform rounded-full bg-white transition`}
|
|
/>
|
|
</Switch>
|
|
</ContainerSecondary>
|
|
</div>
|
|
<Button className='mt-auto w-full' onClick={() => mutate()}>
|
|
Withdraw
|
|
</Button>
|
|
</div>
|
|
<div className='flex w-1/2 flex-col justify-center bg-[#4A4C60] p-4'>
|
|
<p className='text-bold mb-3 text-xs uppercase text-white/50'>About</p>
|
|
<h4 className='mb-4 text-xl'>Subaccount {selectedAccount}</h4>
|
|
<div className='mb-2 rounded-md border border-white/20 p-3'>
|
|
{accountStats && (
|
|
<div className='flex items-center gap-x-3'>
|
|
<p className='flex-1 text-xs'>
|
|
{formatCurrency(
|
|
BigNumber(accountStats.netWorth)
|
|
.dividedBy(10 ** chain.stakeCurrency.coinDecimals)
|
|
.toNumber(),
|
|
)}
|
|
</p>
|
|
{/* TOOLTIP */}
|
|
<div title={`${String(accountStats.currentLeverage.toFixed(1))}x`}>
|
|
<SemiCircleProgress
|
|
value={accountStats.currentLeverage / accountStats.maxLeverage}
|
|
label='Lvg'
|
|
/>
|
|
</div>
|
|
<SemiCircleProgress value={accountStats.risk} label='Risk' />
|
|
<ProgressBar value={accountStats.health} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className='mb-2 rounded-md border border-white/20 p-3 text-sm'>
|
|
<div className='mb-1 flex justify-between'>
|
|
<div>Total Position:</div>
|
|
<div className='font-semibold'>
|
|
{formatCurrency(
|
|
BigNumber(accountStats?.totalPosition ?? 0)
|
|
.dividedBy(10 ** chain.stakeCurrency.coinDecimals)
|
|
.toNumber(),
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className='flex justify-between'>
|
|
<div>Total Liabilities:</div>
|
|
<div className='font-semibold'>
|
|
{formatCurrency(
|
|
BigNumber(accountStats?.totalDebt ?? 0)
|
|
.dividedBy(10 ** chain.stakeCurrency.coinDecimals)
|
|
.toNumber(),
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className='rounded-md border border-white/20 p-3'>
|
|
<h4 className='mb-2 font-bold'>Balances</h4>
|
|
{isLoadingPositions ? (
|
|
<div>Loading...</div>
|
|
) : (
|
|
<table className='w-full border-separate border-spacing-1'>
|
|
<thead className='text-left text-xs font-semibold'>
|
|
<tr>
|
|
<th>Asset</th>
|
|
<th>Value</th>
|
|
<th>Size</th>
|
|
<th className='text-right'>APY</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{positionsData?.coins.map((coin) => (
|
|
<tr key={coin.denom} className='text-xs text-white/50'>
|
|
<td>{getTokenSymbol(coin.denom)}</td>
|
|
<td>
|
|
{formatCurrency(getTokenTotalUSDValue(coin.amount, coin.denom))}
|
|
</td>
|
|
<td>
|
|
{BigNumber(coin.amount)
|
|
.div(10 ** getTokenDecimals(coin.denom))
|
|
.toNumber()
|
|
.toLocaleString(undefined, {
|
|
maximumFractionDigits: getTokenDecimals(coin.denom),
|
|
})}
|
|
</td>
|
|
<td className='text-right'>-</td>
|
|
</tr>
|
|
))}
|
|
{positionsData?.debts.map((coin) => (
|
|
<tr key={coin.denom} className='text-xs text-red-500'>
|
|
<td className='text-white/50'>{getTokenSymbol(coin.denom)}</td>
|
|
<td>
|
|
-{formatCurrency(getTokenTotalUSDValue(coin.amount, coin.denom))}
|
|
</td>
|
|
<td>
|
|
-
|
|
{BigNumber(coin.amount)
|
|
.div(10 ** getTokenDecimals(coin.denom))
|
|
.toNumber()
|
|
.toLocaleString(undefined, {
|
|
maximumFractionDigits: 6,
|
|
})}
|
|
</td>
|
|
<td className='text-right'>
|
|
-{(Number(marketsData?.[coin.denom].borrow_rate) * 100).toFixed(1)}%
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Dialog.Panel>
|
|
</Transition.Child>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</Transition>
|
|
)
|
|
}
|
|
|
|
export default WithdrawModal
|