blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix available to borrow

This commit is contained in:
saml33 2023-02-16 21:56:05 +11:00
parent 142aac7d9c
commit d33457aa91
6 changed files with 78 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/borrow/AssetsBorrowsTable.tsx
View File

@ -17,6 +17,7 @@ import mangoStore from '@store/mangoStore'
import BorrowRepayModal from '@components/modals/BorrowRepayModal'
import BankAmountWithValue from '@components/shared/BankAmountWithValue'
import useBanksWithBalances from 'hooks/useBanksWithBalances'
import { getAvailableToBorrow } from './YourBorrowsTable'
const AssetsBorrowsTable = () => {
const { t } = useTranslation(['common', 'token'])
@ -28,7 +29,7 @@ const AssetsBorrowsTable = () => {
const { mangoTokens } = useJupiterMints()
const { width } = useViewport()
const showTableView = width ? width > breakpoints.md : false
const banks = useBanksWithBalances('maxBorrow')
const banks = useBanksWithBalances()
const handleShowBorrowModal = useCallback((token: string) => {
setSelectedToken(token)
@ -74,6 +75,8 @@ const AssetsBorrowsTable = () => {
}
const borrows = bank.uiBorrows()
const available = group ? getAvailableToBorrow(b, group) : 0
return (
<TrBody key={bank.name}>
<Td>
@ -101,8 +104,9 @@ const AssetsBorrowsTable = () => {
<Td>
<div className="flex flex-col text-right">
<BankAmountWithValue
amount={b.maxBorrow}
amount={available}
bank={bank}
fixDecimals={false}
stacked
/>
</div>
@ -141,6 +145,8 @@ const AssetsBorrowsTable = () => {
)?.logoURI
}
const available = group ? getAvailableToBorrow(b, group) : 0
return (
<div
key={bank.name}
@ -162,7 +168,11 @@ const AssetsBorrowsTable = () => {
<p className="mb-0.5 text-right text-xs">
{t('available')}
</p>
<BankAmountWithValue amount={b.maxBorrow} bank={bank} />
<BankAmountWithValue
amount={available}
fixDecimals={false}
bank={bank}
/>
</div>
<div>
<p className="mb-0.5 text-right text-xs">{t('rate')}</p>

18
components/borrow/BorrowPage.tsx
View File

@ -4,7 +4,7 @@ import useLocalStorageState from 'hooks/useLocalStorageState'
import useMangoAccount from 'hooks/useMangoAccount'
import useMangoGroup from 'hooks/useMangoGroup'
import { useTranslation } from 'next-i18next'
import { ANIMATION_SETTINGS_KEY } from 'utils/constants'
import { ANIMATION_SETTINGS_KEY, USDC_MINT } from 'utils/constants'
import FlipNumbers from 'react-flip-numbers'
import Button from '@components/shared/Button'
import { formatCurrencyValue } from 'utils/numbers'
@ -15,12 +15,13 @@ import { ArrowDownRightIcon, ArrowUpLeftIcon } from '@heroicons/react/20/solid'
import { useWallet } from '@solana/wallet-adapter-react'
import BorrowRepayModal from '@components/modals/BorrowRepayModal'
import CreateAccountModal from '@components/modals/CreateAccountModal'
import { toUiDecimalsForQuote } from '@blockworks-foundation/mango-v4'
import TabButtons from '@components/shared/TabButtons'
import { useViewport } from 'hooks/useViewport'
import { breakpoints } from 'utils/theme'
import FormatNumericValue from '@components/shared/FormatNumericValue'
import useBanksWithBalances from 'hooks/useBanksWithBalances'
import { PublicKey } from '@solana/web3.js'
import { getMaxWithdrawForBank } from '@components/swap/useTokenMax'
const BorrowPage = () => {
const { t } = useTranslation(['common', 'borrow'])
@ -33,7 +34,7 @@ const BorrowPage = () => {
const { connected } = useWallet()
const { width } = useViewport()
const fullWidthTabs = width ? width < breakpoints.sm : false
const banks = useBanksWithBalances('borrowedAmount')
const banks = useBanksWithBalances()
const handleBorrowModal = () => {
if (!connected || mangoAccount) {
@ -70,9 +71,14 @@ const BorrowPage = () => {
const [collateralRemaining, collateralRemainingRatio] = useMemo(() => {
if (mangoAccount && group) {
const remaining = toUiDecimalsForQuote(
mangoAccount.getCollateralValue(group).toNumber()
)
const usdcBank = group.getFirstBankByMint(new PublicKey(USDC_MINT))
const remaining = getMaxWithdrawForBank(
group,
usdcBank,
mangoAccount,
true
).toNumber()
if (borrowValue) {
const total = borrowValue + remaining
const ratio = (remaining / total) * 100

38
components/borrow/YourBorrowsTable.tsx
View File

@ -1,4 +1,4 @@
import { Bank } from '@blockworks-foundation/mango-v4'
import { Bank, Group } from '@blockworks-foundation/mango-v4'
import useJupiterMints from 'hooks/useJupiterMints'
import {
ArrowDownRightIcon,
@ -17,7 +17,6 @@ import useMangoGroup from 'hooks/useMangoGroup'
import ConnectEmptyState from '../shared/ConnectEmptyState'
import { useWallet } from '@solana/wallet-adapter-react'
import Decimal from 'decimal.js'
import { getMaxWithdrawForBank } from '@components/swap/useTokenMax'
import { IconButton } from '@components/shared/Button'
import { useCallback, useState } from 'react'
import BorrowRepayModal from '@components/modals/BorrowRepayModal'
@ -25,6 +24,27 @@ import Tooltip from '@components/shared/Tooltip'
import BankAmountWithValue from '@components/shared/BankAmountWithValue'
import { BankWithBalance } from 'hooks/useBanksWithBalances'
export const getAvailableToBorrow = (
bankWithBal: BankWithBalance,
group: Group
) => {
const { balance, bank, maxBorrow } = bankWithBal
const { mint, mintDecimals, minVaultToDepositsRatio } = bankWithBal.bank
const deposits = bank.uiDeposits()
const availableVaultBalance =
group.getTokenVaultBalanceByMintUi(mint) -
deposits * minVaultToDepositsRatio
const availableAccountBorrow = balance > 0 ? maxBorrow - balance : maxBorrow
const available = Decimal.min(
availableAccountBorrow.toFixed(bank.mintDecimals),
Decimal.max(0, availableVaultBalance.toFixed(mintDecimals))
)
return available
}
const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
const { t } = useTranslation(['common', 'trade'])
const [showBorrowModal, setShowBorrowModal] = useState(false)
@ -78,7 +98,9 @@ const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
)?.logoURI
}
const available = b.maxBorrow
const available = group
? getAvailableToBorrow(b, group)
: new Decimal(0)
const borrowedAmount = b.borrowedAmount
@ -112,6 +134,7 @@ const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
<BankAmountWithValue
amount={available}
bank={bank}
fixDecimals={false}
stacked
/>
</Td>
@ -132,7 +155,7 @@ const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
</Tooltip>
<Tooltip content={`${t('borrow')} ${bank.name}`}>
<IconButton
disabled={available === 0}
disabled={available.eq(0)}
onClick={() =>
handleShowActionModals(bank.name, 'borrow')
}
@ -159,10 +182,9 @@ const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
)?.logoURI
}
const available =
group && mangoAccount
? getMaxWithdrawForBank(group, bank, mangoAccount, true)
: new Decimal(0)
const available = group
? getAvailableToBorrow(b, group)
: new Decimal(0)
const borrowedAmount = mangoAccount
? Math.abs(mangoAccount.getTokenBalanceUi(bank))

8
components/shared/TokenVaultWarnings.tsx
View File

@ -32,20 +32,20 @@ const TokenVaultWarnings = ({
return [maxWithdraw, maxBorrow]
}, [bank, mangoAccount, group])
const availableVaultBalance = useMemo(() => {
if (!bank || !group) return 0
const [availableVaultBalance, vaultBalance] = useMemo(() => {
if (!bank || !group) return [0, 0]
const vaultBalance = group.getTokenVaultBalanceByMintUi(bank.mint)
const vaultDeposits = bank.uiDeposits()
const available =
vaultBalance - vaultDeposits * bank.minVaultToDepositsRatio
return available
return [available, vaultBalance]
}, [bank, group])
const showWarning = useMemo(() => {
if (!bank || !group) return false
if (
(type === 'borrow' && maxBorrow > availableVaultBalance) ||
(type === 'swap' && swapBorrowMax.toNumber() > availableVaultBalance) ||
(type === 'swap' && swapBorrowMax.toNumber() > vaultBalance) ||
(type === 'withdraw' && maxWithdraw > availableVaultBalance)
) {
return true

25
components/stats/TokenStats.tsx
View File

@ -21,6 +21,7 @@ import mangoStore from '@store/mangoStore'
import FormatNumericValue from '@components/shared/FormatNumericValue'
import BankAmountWithValue from '@components/shared/BankAmountWithValue'
import useBanksWithBalances from 'hooks/useBanksWithBalances'
import Decimal from 'decimal.js'
const TokenStats = () => {
const { t } = useTranslation(['common', 'token'])
@ -48,7 +49,7 @@ const TokenStats = () => {
router.push(`/token/${bank.name}`, undefined, { shallow: true })
}
return (
return group ? (
<ContentBox hideBorder hidePadding>
{showTableView ? (
<Table>
@ -102,8 +103,13 @@ const TokenStats = () => {
}
const deposits = bank.uiDeposits()
const borrows = bank.uiBorrows()
const available =
deposits - deposits * bank.minVaultToDepositsRatio - borrows
const availableVaultBalance =
group.getTokenVaultBalanceByMintUi(bank.mint) -
deposits * bank.minVaultToDepositsRatio
const available = Decimal.max(
0,
availableVaultBalance.toFixed(bank.mintDecimals)
)
return (
<TrBody key={bank.name}>
@ -215,9 +221,14 @@ const TokenStats = () => {
}
const deposits = bank.uiDeposits()
const borrows = bank.uiBorrows()
const availableVaultBalance =
group.getTokenVaultBalanceByMintUi(bank.mint) -
deposits * bank.minVaultToDepositsRatio
const available = Decimal.max(
0,
availableVaultBalance.toFixed(bank.mintDecimals)
)
const price = bank.uiPrice
const available =
deposits - deposits * bank.minVaultToDepositsRatio - borrows
return (
<div
key={bank.name}
@ -330,7 +341,7 @@ const TokenStats = () => {
/>{' '}
<span className="text-th-fgd-4">
<FormatNumericValue
value={(available * price).toFixed(2)}
value={(available.toNumber() * price).toFixed(2)}
isUsd
/>
</span>
@ -369,7 +380,7 @@ const TokenStats = () => {
</div>
)}
</ContentBox>
)
) : null
}
export default TokenStats

2
components/trade/TradeHistory.tsx
View File

@ -59,7 +59,7 @@ const parsePerpEvent = (mangoAccountAddress: string, event: PerpFillEvent) => {
size: event.quantity,
price: event.price,
value,
feeCost: (feeRate * value).toFixed(4),
feeCost: (feeRate.toNumber() * value).toFixed(4),
side,
}
}