66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
import Tooltip from '@components/shared/Tooltip'
|
|
import mangoStore from '@store/mangoStore'
|
|
import { useTranslation } from 'next-i18next'
|
|
import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
|
|
import { useTokenMax } from './useTokenMax'
|
|
|
|
const BorrowInfo = ({
|
|
amount,
|
|
useMargin,
|
|
}: {
|
|
amount: number
|
|
useMargin: boolean
|
|
}) => {
|
|
const { t } = useTranslation('common')
|
|
const { amount: tokenMax } = useTokenMax(useMargin)
|
|
const inputBank = mangoStore((s) => s.swap.inputBank)
|
|
|
|
const tokenMaxAsNumber = tokenMax.toNumber()
|
|
const borrowAmount = amount - tokenMaxAsNumber
|
|
|
|
return amount > tokenMaxAsNumber && inputBank ? (
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between">
|
|
<Tooltip
|
|
content={
|
|
tokenMaxAsNumber
|
|
? t('swap:tooltip-borrow-balance', {
|
|
balance: formatFixedDecimals(tokenMaxAsNumber),
|
|
borrowAmount: formatFixedDecimals(borrowAmount),
|
|
token: inputBank.name,
|
|
})
|
|
: t('swap:tooltip-borrow-no-balance', {
|
|
borrowAmount: formatFixedDecimals(borrowAmount),
|
|
token: inputBank.name,
|
|
})
|
|
}
|
|
delay={250}
|
|
>
|
|
<p className="tooltip-underline text-sm text-th-fgd-3">
|
|
{t('borrow-amount')}
|
|
</p>
|
|
</Tooltip>
|
|
<p className="text-right font-mono text-sm text-th-fgd-3">
|
|
{formatFixedDecimals(borrowAmount)}
|
|
<span className="font-body"> {inputBank.name}</span>
|
|
</p>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<Tooltip content={t('tooltip-borrow-rate')} delay={250}>
|
|
<p className="tooltip-underline text-sm text-th-fgd-3">
|
|
{t('borrow-rate')}
|
|
</p>
|
|
</Tooltip>
|
|
<p className="text-right font-mono text-sm text-th-down">
|
|
{formatDecimal(inputBank.getBorrowRateUi(), 2, {
|
|
fixed: true,
|
|
})}
|
|
%
|
|
</p>
|
|
</div>
|
|
</div>
|
|
) : null
|
|
}
|
|
|
|
export default BorrowInfo
|