109 lines
3.6 KiB
TypeScript
109 lines
3.6 KiB
TypeScript
import useCollateralFeePopupConditions from 'hooks/useCollateralFeePositions'
|
|
import Modal from '../shared/Modal'
|
|
import Button from '@components/shared/Button'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
|
|
import TableTokenName from '@components/shared/TableTokenName'
|
|
import useMangoAccount from 'hooks/useMangoAccount'
|
|
import useMangoGroup from 'hooks/useMangoGroup'
|
|
import { useMemo } from 'react'
|
|
import FormatNumericValue from '@components/shared/FormatNumericValue'
|
|
|
|
type WarningProps = {
|
|
isOpen: boolean
|
|
onClose?: () => void
|
|
}
|
|
|
|
const CollateralFeeWarningModal = ({ isOpen, onClose }: WarningProps) => {
|
|
const { t } = useTranslation(['account'])
|
|
const { setWasModalOpen, collateralFeeBanks, ltvRatio } =
|
|
useCollateralFeePopupConditions()
|
|
const { mangoAccount } = useMangoAccount()
|
|
const { group } = useMangoGroup()
|
|
const lastCharge = mangoAccount?.lastCollateralFeeCharge.toNumber()
|
|
const collateralFeeInterval = group?.collateralFeeInterval.toNumber()
|
|
|
|
const hoursTillNextCharge = useMemo(() => {
|
|
if (!lastCharge || !collateralFeeInterval) return
|
|
const nowInSeconds = Date.now() / 1000
|
|
const timeUntilChargeInSeconds =
|
|
lastCharge + collateralFeeInterval - nowInSeconds
|
|
const timeUntilChargeInHours = timeUntilChargeInSeconds / 3600
|
|
return Math.round(timeUntilChargeInHours * 100) / 100
|
|
}, [lastCharge, collateralFeeInterval])
|
|
|
|
const handleClose = () => {
|
|
setWasModalOpen(true)
|
|
if (onClose) {
|
|
onClose()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Modal isOpen={isOpen} onClose={handleClose} disableOutsideClose hideClose>
|
|
<h2 className="mb-2 text-center">
|
|
{t('collateral-funding-modal-heading', {
|
|
remaining_hours: hoursTillNextCharge,
|
|
})}
|
|
</h2>
|
|
<a
|
|
className="mb-6 flex justify-center text-base font-bold focus:outline-none"
|
|
href="https://docs.mango.markets/mango-markets/fees"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{t('whats-this')}
|
|
</a>
|
|
<Table>
|
|
<thead>
|
|
<TrHead>
|
|
<Th className="text-left">{t('collateral')}</Th>
|
|
<Th className="text-right">{t('funding-rate')} Per Day</Th>
|
|
<Th>
|
|
<div className="flex justify-end">{t('daily-fee')}</div>
|
|
</Th>
|
|
</TrHead>
|
|
</thead>
|
|
<tbody>
|
|
{collateralFeeBanks.map((b) => {
|
|
const { bank, balance } = b
|
|
const dailyFee = ltvRatio * bank.collateralFeePerDay * balance
|
|
return (
|
|
<TrBody key={bank.name}>
|
|
<Td>
|
|
<TableTokenName bank={bank} symbol={bank.name} />
|
|
</Td>
|
|
<Td>
|
|
<p className="text-right">
|
|
{(ltvRatio * bank.collateralFeePerDay * 100).toFixed(4)}%
|
|
</p>
|
|
</Td>
|
|
<Td>
|
|
<div className="flex flex-col items-end">
|
|
<p className="text-right">
|
|
<FormatNumericValue value={dailyFee} />
|
|
</p>
|
|
<span className="font-mono text-th-fgd-4">
|
|
$<FormatNumericValue value={dailyFee * bank.uiPrice} />
|
|
</span>
|
|
</div>
|
|
</Td>
|
|
</TrBody>
|
|
)
|
|
})}
|
|
</tbody>
|
|
</Table>
|
|
<Button
|
|
className="mt-6 w-full"
|
|
onClick={() => {
|
|
handleClose()
|
|
}}
|
|
>
|
|
{t('okay-got-it')}
|
|
</Button>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default CollateralFeeWarningModal
|