103 lines
3.5 KiB
TypeScript
103 lines
3.5 KiB
TypeScript
import { useState } from 'react'
|
|
import { useParams } from 'react-router-dom'
|
|
|
|
import Button from 'components/Button'
|
|
import { CircularProgress } from 'components/CircularProgress'
|
|
import DisplayCurrency from 'components/DisplayCurrency'
|
|
import VaultLogo from 'components/Earn/Farm/VaultLogo'
|
|
import { FormattedNumber } from 'components/FormattedNumber'
|
|
import Modal from 'components/Modal'
|
|
import Text from 'components/Text'
|
|
import useStore from 'store'
|
|
import { BNCoin } from 'types/classes/BNCoin'
|
|
import { getAssetByDenom } from 'utils/assets'
|
|
import { hardcodedFee } from 'utils/constants'
|
|
import { demagnify } from 'utils/formatters'
|
|
|
|
export default function WithdrawFromVaultsModal() {
|
|
const modal = useStore((s) => s.withdrawFromVaultsModal)
|
|
const { accountId } = useParams()
|
|
const [isConfirming, setIsConfirming] = useState(false)
|
|
const withdrawFromVaults = useStore((s) => s.withdrawFromVaults)
|
|
const baseCurrency = useStore((s) => s.baseCurrency)
|
|
|
|
function onClose() {
|
|
useStore.setState({ withdrawFromVaultsModal: null })
|
|
}
|
|
|
|
async function withdrawHandler() {
|
|
if (!accountId || !modal) return
|
|
setIsConfirming(true)
|
|
await withdrawFromVaults({
|
|
fee: hardcodedFee,
|
|
accountId: accountId,
|
|
vaults: modal,
|
|
})
|
|
setIsConfirming(false)
|
|
onClose()
|
|
}
|
|
|
|
if (!modal) return null
|
|
|
|
return (
|
|
<Modal
|
|
onClose={onClose}
|
|
header={
|
|
<span className='flex items-center'>
|
|
<Text>Unlocked Vaults</Text>
|
|
</span>
|
|
}
|
|
modalClassName='max-w-modal-xs'
|
|
headerClassName='px-4 py-5.5 border-b-white/5 border-b'
|
|
contentClassName='p-4'
|
|
>
|
|
{modal ? (
|
|
<div className='flex w-full flex-wrap gap-4'>
|
|
{modal.map((vault) => {
|
|
const positionValue = vault.values.primary.plus(vault.values.secondary)
|
|
const coin = BNCoin.fromDenomAndBigNumber(baseCurrency.denom, positionValue)
|
|
const primaryAsset = getAssetByDenom(vault.denoms.primary)
|
|
const secondaryAsset = getAssetByDenom(vault.denoms.secondary)
|
|
|
|
if (!primaryAsset || !secondaryAsset) return null
|
|
return (
|
|
<div className='flex items-center gap-4' key={vault.unlockId}>
|
|
<VaultLogo vault={vault} />
|
|
<div className='flex flex-1 flex-wrap'>
|
|
<Text className='w-full'>{vault.name}</Text>
|
|
<Text size='sm' className='w-full text-white/50'>
|
|
Unlocked
|
|
</Text>
|
|
</div>
|
|
<div className='flex flex-wrap'>
|
|
<DisplayCurrency coin={coin} className='w-full text-right' />
|
|
<FormattedNumber
|
|
amount={demagnify(vault.amounts.primary, primaryAsset)}
|
|
className='w-full text-right text-sm text-white/50'
|
|
options={{ suffix: ` ${vault.symbols.primary}` }}
|
|
animate
|
|
/>
|
|
<FormattedNumber
|
|
amount={demagnify(vault.amounts.secondary, secondaryAsset)}
|
|
className='w-full text-right text-sm text-white/50'
|
|
options={{ suffix: ` ${vault.symbols.secondary}` }}
|
|
animate
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
<Button
|
|
showProgressIndicator={isConfirming}
|
|
onClick={withdrawHandler}
|
|
className='mt-4 w-full'
|
|
text='Withdraw from all'
|
|
/>
|
|
</div>
|
|
) : (
|
|
<CircularProgress />
|
|
)}
|
|
</Modal>
|
|
)
|
|
}
|