add borrow page
This commit is contained in:
saml33
parent
dd3f9b18ae
commit
c1c795cb40
|
|
@ -0,0 +1,352 @@
|
||||||
|
import { Transition } from '@headlessui/react'
|
||||||
|
import {
|
||||||
|
ArrowUpLeftIcon,
|
||||||
|
ChevronDownIcon,
|
||||||
|
QuestionMarkCircleIcon,
|
||||||
|
} from '@heroicons/react/20/solid'
|
||||||
|
import { useTranslation } from 'next-i18next'
|
||||||
|
import Image from 'next/legacy/image'
|
||||||
|
import { Fragment, useCallback, useEffect, useMemo, useState } from 'react'
|
||||||
|
import { useViewport } from '../../hooks/useViewport'
|
||||||
|
import { formatDecimal, formatFixedDecimals } from '../../utils/numbers'
|
||||||
|
import { breakpoints } from '../../utils/theme'
|
||||||
|
import Button, { IconButton } from '../shared/Button'
|
||||||
|
import Tooltip from '@components/shared/Tooltip'
|
||||||
|
import useJupiterMints from 'hooks/useJupiterMints'
|
||||||
|
import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
|
||||||
|
import useMangoGroup from 'hooks/useMangoGroup'
|
||||||
|
import mangoStore from '@store/mangoStore'
|
||||||
|
import AmountWithValue from '@components/shared/AmountWithValue'
|
||||||
|
import { getMaxWithdrawForBank } from '@components/swap/useTokenMax'
|
||||||
|
import useMangoAccount from 'hooks/useMangoAccount'
|
||||||
|
import BorrowRepayModal from '@components/modals/BorrowRepayModal'
|
||||||
|
|
||||||
|
const AssetsBorrowsTable = () => {
|
||||||
|
const { t } = useTranslation(['common', 'token'])
|
||||||
|
const [showBorrowModal, setShowBorrowModal] = useState(false)
|
||||||
|
const [selectedToken, setSelectedToken] = useState('')
|
||||||
|
const actions = mangoStore.getState().actions
|
||||||
|
const initialStatsLoad = mangoStore((s) => s.tokenStats.initialLoad)
|
||||||
|
const [showTokenDetails, setShowTokenDetails] = useState('')
|
||||||
|
const { group } = useMangoGroup()
|
||||||
|
const { mangoAccount } = useMangoAccount()
|
||||||
|
const { mangoTokens } = useJupiterMints()
|
||||||
|
const { width } = useViewport()
|
||||||
|
const showTableView = width ? width > breakpoints.md : false
|
||||||
|
|
||||||
|
const handleShowBorrowModal = useCallback((token: string) => {
|
||||||
|
setSelectedToken(token)
|
||||||
|
setShowBorrowModal(true)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (group && !initialStatsLoad) {
|
||||||
|
actions.fetchTokenStats()
|
||||||
|
}
|
||||||
|
}, [group])
|
||||||
|
|
||||||
|
const banks = useMemo(() => {
|
||||||
|
if (group) {
|
||||||
|
const rawBanks = Array.from(group?.banksMapByName, ([key, value]) => ({
|
||||||
|
key,
|
||||||
|
value,
|
||||||
|
}))
|
||||||
|
return rawBanks.sort((a, b) => a.key.localeCompare(b.key))
|
||||||
|
}
|
||||||
|
return []
|
||||||
|
}, [group])
|
||||||
|
|
||||||
|
const handleShowTokenDetails = (name: string) => {
|
||||||
|
showTokenDetails ? setShowTokenDetails('') : setShowTokenDetails(name)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{showTableView ? (
|
||||||
|
<Table>
|
||||||
|
<thead>
|
||||||
|
<TrHead>
|
||||||
|
<Th className="text-left">{t('token')}</Th>
|
||||||
|
<Th className="text-right">{t('total-borrows')}</Th>
|
||||||
|
<Th>
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Tooltip content={t('borrow:tooltip-available')}>
|
||||||
|
<span className="tooltip-underline">{t('available')}</span>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</Th>
|
||||||
|
<Th>
|
||||||
|
<div className="flex justify-end">{t('rate')}</div>
|
||||||
|
</Th>
|
||||||
|
{/* <Th>
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Tooltip content="The percentage of deposits that have been lent out.">
|
||||||
|
<span className="tooltip-underline">
|
||||||
|
{t('utilization')}
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</Th> */}
|
||||||
|
<Th>
|
||||||
|
<div className="flex justify-end text-right">
|
||||||
|
<Tooltip content={t('borrow:liability-weight-desc')}>
|
||||||
|
<span className="tooltip-underline">
|
||||||
|
{t('liability-weight')}
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</Th>
|
||||||
|
<Th />
|
||||||
|
</TrHead>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{banks.map(({ key, value }) => {
|
||||||
|
const bank = value[0]
|
||||||
|
|
||||||
|
let logoURI
|
||||||
|
if (mangoTokens?.length) {
|
||||||
|
logoURI = mangoTokens.find(
|
||||||
|
(t) => t.address === bank.mint.toString()
|
||||||
|
)?.logoURI
|
||||||
|
}
|
||||||
|
const borrows = bank.uiBorrows()
|
||||||
|
const price = bank.uiPrice
|
||||||
|
|
||||||
|
const available =
|
||||||
|
group && mangoAccount
|
||||||
|
? getMaxWithdrawForBank(
|
||||||
|
group,
|
||||||
|
bank,
|
||||||
|
mangoAccount,
|
||||||
|
true
|
||||||
|
).toNumber()
|
||||||
|
: 0
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TrBody key={key}>
|
||||||
|
<Td>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="mr-2.5 flex flex-shrink-0 items-center">
|
||||||
|
{logoURI ? (
|
||||||
|
<Image alt="" width="24" height="24" src={logoURI} />
|
||||||
|
) : (
|
||||||
|
<QuestionMarkCircleIcon className="h-6 w-6 text-th-fgd-3" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="font-body">{bank.name}</p>
|
||||||
|
</div>
|
||||||
|
</Td>
|
||||||
|
<Td>
|
||||||
|
<div className="flex flex-col text-right">
|
||||||
|
<p>{formatFixedDecimals(borrows)}</p>
|
||||||
|
<p className="text-th-fgd-4">
|
||||||
|
{formatFixedDecimals(borrows * price, true, true)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Td>
|
||||||
|
<Td>
|
||||||
|
<div className="flex flex-col text-right">
|
||||||
|
<p>
|
||||||
|
{available > 0 ? formatFixedDecimals(available) : '0'}
|
||||||
|
</p>
|
||||||
|
<p className="text-th-fgd-4">
|
||||||
|
{available > 0
|
||||||
|
? formatFixedDecimals(available * price, false, true)
|
||||||
|
: '$0.00'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Td>
|
||||||
|
<Td>
|
||||||
|
<p className="text-right text-th-down">
|
||||||
|
{formatDecimal(bank.getBorrowRateUi(), 2, {
|
||||||
|
fixed: true,
|
||||||
|
})}
|
||||||
|
%
|
||||||
|
</p>
|
||||||
|
</Td>
|
||||||
|
{/* <Td>
|
||||||
|
<div className="flex flex-col text-right">
|
||||||
|
<p>
|
||||||
|
{bank.uiDeposits() > 0
|
||||||
|
? formatDecimal(
|
||||||
|
(bank.uiBorrows() / bank.uiDeposits()) * 100,
|
||||||
|
1,
|
||||||
|
{ fixed: true }
|
||||||
|
)
|
||||||
|
: '0.0'}
|
||||||
|
%
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Td> */}
|
||||||
|
<Td>
|
||||||
|
<div className="flex justify-end space-x-1.5 text-right">
|
||||||
|
<p>{bank.initLiabWeight.toFixed(2)}</p>
|
||||||
|
</div>
|
||||||
|
</Td>
|
||||||
|
<Td>
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Tooltip content={`${t('borrow')} ${bank.name}`}>
|
||||||
|
<IconButton
|
||||||
|
onClick={() => handleShowBorrowModal(bank.name)}
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
<ArrowUpLeftIcon className="h-5 w-5" />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</Td>
|
||||||
|
</TrBody>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</Table>
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
{banks.map(({ key, value }) => {
|
||||||
|
const bank = value[0]
|
||||||
|
let logoURI
|
||||||
|
if (mangoTokens?.length) {
|
||||||
|
logoURI = mangoTokens.find(
|
||||||
|
(t) => t.address === bank.mint.toString()
|
||||||
|
)?.logoURI
|
||||||
|
}
|
||||||
|
const borrows = bank.uiBorrows()
|
||||||
|
const price = bank.uiPrice
|
||||||
|
|
||||||
|
const available =
|
||||||
|
group && mangoAccount
|
||||||
|
? getMaxWithdrawForBank(
|
||||||
|
group,
|
||||||
|
bank,
|
||||||
|
mangoAccount,
|
||||||
|
true
|
||||||
|
).toNumber()
|
||||||
|
: 0
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={key} className="border-b border-th-bkg-3 px-6 py-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="mr-2.5 flex flex-shrink-0 items-center">
|
||||||
|
{logoURI ? (
|
||||||
|
<Image alt="" width="24" height="24" src={logoURI} />
|
||||||
|
) : (
|
||||||
|
<QuestionMarkCircleIcon className="h-7 w-7 text-th-fgd-3" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-th-fgd-1">{bank.name}</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div>
|
||||||
|
<p className="mb-0.5 text-right text-xs">
|
||||||
|
{t('available')}
|
||||||
|
</p>
|
||||||
|
<AmountWithValue
|
||||||
|
amount={formatFixedDecimals(available)}
|
||||||
|
value={formatFixedDecimals(
|
||||||
|
available * price,
|
||||||
|
true,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="mb-0.5 text-right text-xs">{t('rate')}</p>
|
||||||
|
<p className="text-right text-th-down">
|
||||||
|
{formatDecimal(bank.getBorrowRateUi(), 2, {
|
||||||
|
fixed: true,
|
||||||
|
})}
|
||||||
|
%
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<IconButton
|
||||||
|
onClick={() => handleShowTokenDetails(bank.name)}
|
||||||
|
size="medium"
|
||||||
|
>
|
||||||
|
<ChevronDownIcon
|
||||||
|
className={`${
|
||||||
|
showTokenDetails === bank.name
|
||||||
|
? 'rotate-180'
|
||||||
|
: 'rotate-360'
|
||||||
|
} h-6 w-6 flex-shrink-0 text-th-fgd-1`}
|
||||||
|
/>
|
||||||
|
</IconButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Transition
|
||||||
|
appear={true}
|
||||||
|
show={showTokenDetails === bank.name}
|
||||||
|
as={Fragment}
|
||||||
|
enter="transition ease-in duration-200"
|
||||||
|
enterFrom="opacity-0"
|
||||||
|
enterTo="opacity-100"
|
||||||
|
leave="transition ease-out"
|
||||||
|
leaveFrom="opacity-100"
|
||||||
|
leaveTo="opacity-0"
|
||||||
|
>
|
||||||
|
<div className="mt-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4">
|
||||||
|
<div className="col-span-1">
|
||||||
|
<p className="mb-0.5 text-xs">{t('total-borrows')}</p>
|
||||||
|
<AmountWithValue
|
||||||
|
amount={formatFixedDecimals(borrows)}
|
||||||
|
value={formatFixedDecimals(borrows * price, true, true)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/* <div className="col-span-1">
|
||||||
|
<p className="text-xs text-th-fgd-3">
|
||||||
|
{t('utilization')}
|
||||||
|
</p>
|
||||||
|
<p className="font-mono text-th-fgd-1">
|
||||||
|
{bank.uiDeposits() > 0
|
||||||
|
? formatDecimal(
|
||||||
|
(bank.uiBorrows() / bank.uiDeposits()) * 100,
|
||||||
|
1,
|
||||||
|
{ fixed: true }
|
||||||
|
)
|
||||||
|
: '0.0'}
|
||||||
|
%
|
||||||
|
</p>
|
||||||
|
</div> */}
|
||||||
|
<div className="col-span-1">
|
||||||
|
<Tooltip content={t('borrow:liability-weight-desc')}>
|
||||||
|
<p className="tooltip-underline text-xs text-th-fgd-3">
|
||||||
|
{t('liability-weight')}
|
||||||
|
</p>
|
||||||
|
</Tooltip>
|
||||||
|
<div className="flex space-x-1.5 font-mono">
|
||||||
|
<p className="text-th-fgd-1">
|
||||||
|
{bank.initLiabWeight.toFixed(2)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-1">
|
||||||
|
<Button
|
||||||
|
className="flex items-center"
|
||||||
|
onClick={() => handleShowBorrowModal(bank.name)}
|
||||||
|
secondary
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
<ArrowUpLeftIcon className="mr-1.5 h-5 w-5" />
|
||||||
|
{`${t('borrow')} ${bank.name}`}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Transition>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{showBorrowModal ? (
|
||||||
|
<BorrowRepayModal
|
||||||
|
action="borrow"
|
||||||
|
isOpen={showBorrowModal}
|
||||||
|
onClose={() => setShowBorrowModal(false)}
|
||||||
|
token={selectedToken}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AssetsBorrowsTable
|
||||||
|
|
@ -0,0 +1,226 @@
|
||||||
|
import { INITIAL_ANIMATION_SETTINGS } from '@components/settings/AnimationSettings'
|
||||||
|
import Tooltip from '@components/shared/Tooltip'
|
||||||
|
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 FlipNumbers from 'react-flip-numbers'
|
||||||
|
import Button from '@components/shared/Button'
|
||||||
|
import mangoStore from '@store/mangoStore'
|
||||||
|
import { formatFixedDecimals } from 'utils/numbers'
|
||||||
|
import { useEffect, useMemo, useState } from 'react'
|
||||||
|
import YourBorrowsTable from './YourBorrowsTable'
|
||||||
|
import AssetsBorrowsTable from './AssetsBorrowsTable'
|
||||||
|
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'
|
||||||
|
|
||||||
|
const BorrowPage = () => {
|
||||||
|
const { t } = useTranslation(['common', 'borrow'])
|
||||||
|
const { group } = useMangoGroup()
|
||||||
|
const { mangoAccount, mangoAccountAddress } = useMangoAccount()
|
||||||
|
const [activeTab, setActiveTab] = useState('borrow:your-borrows')
|
||||||
|
const [showBorrowModal, setShowBorrowModal] = useState(false)
|
||||||
|
const [showRepayModal, setShowRepayModal] = useState(false)
|
||||||
|
const [showCreateAccountModal, setShowCreateAccountModal] = useState(false)
|
||||||
|
const { connected } = useWallet()
|
||||||
|
|
||||||
|
const handleBorrowModal = () => {
|
||||||
|
if (!connected || mangoAccount) {
|
||||||
|
setShowBorrowModal(true)
|
||||||
|
} else {
|
||||||
|
setShowCreateAccountModal(true)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const [animationSettings] = useLocalStorageState(
|
||||||
|
ANIMATION_SETTINGS_KEY,
|
||||||
|
INITIAL_ANIMATION_SETTINGS
|
||||||
|
)
|
||||||
|
const actions = mangoStore((s) => s.actions)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (mangoAccountAddress) {
|
||||||
|
const set = mangoStore.getState().set
|
||||||
|
set((s) => {
|
||||||
|
s.mangoAccount.performance.initialLoad = false
|
||||||
|
})
|
||||||
|
actions.fetchAccountPerformance(mangoAccountAddress, 1)
|
||||||
|
}
|
||||||
|
}, [actions, mangoAccountAddress])
|
||||||
|
|
||||||
|
const banks = useMemo(() => {
|
||||||
|
if (group && mangoAccount) {
|
||||||
|
const borrowBanks = Array.from(group?.banksMapByName, ([key, value]) => ({
|
||||||
|
key,
|
||||||
|
value,
|
||||||
|
})).filter((b) => {
|
||||||
|
const bank = b.value[0]
|
||||||
|
return mangoAccount.getTokenBalanceUi(bank) < 0
|
||||||
|
})
|
||||||
|
return borrowBanks
|
||||||
|
.map((b) => {
|
||||||
|
return {
|
||||||
|
balance: mangoAccount.getTokenBalanceUi(b.value[0]),
|
||||||
|
bank: b.value[0],
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.sort((a, b) => {
|
||||||
|
const aBalance = Math.abs(a.balance * a.bank.uiPrice)
|
||||||
|
const bBalance = Math.abs(b.balance * b.bank.uiPrice)
|
||||||
|
return aBalance > bBalance ? -1 : 1
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return []
|
||||||
|
}, [group, mangoAccount])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (mangoAccountAddress && !banks.length) {
|
||||||
|
setActiveTab('borrow:assets-to-borrow')
|
||||||
|
}
|
||||||
|
}, [banks, mangoAccountAddress])
|
||||||
|
|
||||||
|
const borrowValue = useMemo(() => {
|
||||||
|
if (!banks.length) return 0
|
||||||
|
return banks.reduce((a, c) => a + Math.abs(c.balance) * c.bank.uiPrice, 0)
|
||||||
|
}, [banks])
|
||||||
|
|
||||||
|
const [collateralRemaining, collateralRemainingRatio] = useMemo(() => {
|
||||||
|
if (mangoAccount && group) {
|
||||||
|
const remaining = toUiDecimalsForQuote(
|
||||||
|
mangoAccount.getCollateralValue(group).toNumber()
|
||||||
|
)
|
||||||
|
if (borrowValue) {
|
||||||
|
const total = borrowValue + remaining
|
||||||
|
const ratio = (remaining / total) * 100
|
||||||
|
return [remaining, ratio]
|
||||||
|
}
|
||||||
|
return [remaining, 100]
|
||||||
|
}
|
||||||
|
return [0, 0]
|
||||||
|
}, [borrowValue, mangoAccount, group])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="flex flex-col border-b border-th-bkg-3 px-6 py-4 lg:flex-row lg:items-center lg:justify-between">
|
||||||
|
<div className="flex flex-col md:flex-row">
|
||||||
|
<div className="pb-4 md:pr-6 md:pb-0">
|
||||||
|
<Tooltip
|
||||||
|
maxWidth="20rem"
|
||||||
|
placement="bottom-start"
|
||||||
|
content="The value of your assets (deposits) minus the value of your liabilities (borrows)."
|
||||||
|
delay={250}
|
||||||
|
>
|
||||||
|
<p className="mb-0.5 text-base">
|
||||||
|
{t('borrow:current-borrow-value')}
|
||||||
|
</p>
|
||||||
|
</Tooltip>
|
||||||
|
<div className="flex items-center font-display text-5xl text-th-fgd-1">
|
||||||
|
{animationSettings['number-scroll'] ? (
|
||||||
|
group && mangoAccount ? (
|
||||||
|
<FlipNumbers
|
||||||
|
height={48}
|
||||||
|
width={35}
|
||||||
|
play
|
||||||
|
delay={0.05}
|
||||||
|
duration={1}
|
||||||
|
numbers={formatFixedDecimals(borrowValue, true, true)}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<FlipNumbers
|
||||||
|
height={48}
|
||||||
|
width={36}
|
||||||
|
play
|
||||||
|
delay={0.05}
|
||||||
|
duration={1}
|
||||||
|
numbers={'$0.00'}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<span>{formatFixedDecimals(borrowValue, true, true)}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="h-full border-t border-th-bkg-3 pt-4 md:border-t-0 md:border-b-0 md:border-l md:pt-0 md:pl-6">
|
||||||
|
<p className="mb-0.5 text-base">
|
||||||
|
{t('borrow:available-to-borrow')}
|
||||||
|
</p>
|
||||||
|
<p className="mb-1 font-display text-2xl text-th-fgd-2">
|
||||||
|
{formatFixedDecimals(collateralRemaining, true, true)}
|
||||||
|
</p>
|
||||||
|
<div className="mt-[2px] flex h-2 w-full rounded-full bg-th-bkg-3 md:w-48">
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: `${collateralRemainingRatio}%`,
|
||||||
|
}}
|
||||||
|
className="flex rounded-full bg-th-active"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-6 mb-1 lg:mt-0 lg:mb-0">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Button
|
||||||
|
className="flex w-1/2 items-center justify-center md:w-auto"
|
||||||
|
disabled={!mangoAccount}
|
||||||
|
onClick={() => setShowRepayModal(true)}
|
||||||
|
secondary
|
||||||
|
>
|
||||||
|
<ArrowDownRightIcon className="mr-2 h-5 w-5" />
|
||||||
|
{t('repay')}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
className="flex w-1/2 items-center justify-center md:w-auto"
|
||||||
|
onClick={handleBorrowModal}
|
||||||
|
secondary
|
||||||
|
>
|
||||||
|
<ArrowUpLeftIcon className="mr-2 h-5 w-5" />
|
||||||
|
{t('borrow')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="border-b border-th-bkg-3">
|
||||||
|
<TabButtons
|
||||||
|
activeValue={activeTab}
|
||||||
|
onChange={(v) => setActiveTab(v)}
|
||||||
|
showBorders
|
||||||
|
values={[
|
||||||
|
['borrow:your-borrows', 0],
|
||||||
|
['borrow:assets-to-borrow', 0],
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{activeTab === 'borrow:your-borrows' ? (
|
||||||
|
<YourBorrowsTable banks={banks} />
|
||||||
|
) : (
|
||||||
|
<AssetsBorrowsTable />
|
||||||
|
)}
|
||||||
|
{showBorrowModal ? (
|
||||||
|
<BorrowRepayModal
|
||||||
|
action="borrow"
|
||||||
|
isOpen={showBorrowModal}
|
||||||
|
onClose={() => setShowBorrowModal(false)}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
{showRepayModal ? (
|
||||||
|
<BorrowRepayModal
|
||||||
|
action="repay"
|
||||||
|
isOpen={showRepayModal}
|
||||||
|
onClose={() => setShowRepayModal(false)}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
{showCreateAccountModal ? (
|
||||||
|
<CreateAccountModal
|
||||||
|
isOpen={showCreateAccountModal}
|
||||||
|
onClose={() => setShowCreateAccountModal(false)}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BorrowPage
|
||||||
|
|
@ -0,0 +1,268 @@
|
||||||
|
import { Bank } from '@blockworks-foundation/mango-v4'
|
||||||
|
import useJupiterMints from 'hooks/useJupiterMints'
|
||||||
|
import {
|
||||||
|
ArrowDownRightIcon,
|
||||||
|
ArrowUpLeftIcon,
|
||||||
|
NoSymbolIcon,
|
||||||
|
QuestionMarkCircleIcon,
|
||||||
|
} from '@heroicons/react/20/solid'
|
||||||
|
import useMangoAccount from 'hooks/useMangoAccount'
|
||||||
|
import { useViewport } from 'hooks/useViewport'
|
||||||
|
import { useTranslation } from 'next-i18next'
|
||||||
|
import Image from 'next/legacy/image'
|
||||||
|
import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
|
||||||
|
import { breakpoints } from 'utils/theme'
|
||||||
|
import { Table, Td, Th, TrBody, TrHead } from '../shared/TableElements'
|
||||||
|
import useMangoGroup from 'hooks/useMangoGroup'
|
||||||
|
import AmountWithValue from '../shared/AmountWithValue'
|
||||||
|
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'
|
||||||
|
import Tooltip from '@components/shared/Tooltip'
|
||||||
|
|
||||||
|
interface BankWithBalance {
|
||||||
|
balance: number
|
||||||
|
bank: Bank
|
||||||
|
}
|
||||||
|
|
||||||
|
const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
|
||||||
|
const { t } = useTranslation(['common', 'trade'])
|
||||||
|
const [showBorrowModal, setShowBorrowModal] = useState(false)
|
||||||
|
const [showRepayModal, setShowRepayModal] = useState(false)
|
||||||
|
const [selectedToken, setSelectedToken] = useState('')
|
||||||
|
const { mangoAccount, mangoAccountAddress } = useMangoAccount()
|
||||||
|
const { group } = useMangoGroup()
|
||||||
|
const { mangoTokens } = useJupiterMints()
|
||||||
|
const { width } = useViewport()
|
||||||
|
const { connected } = useWallet()
|
||||||
|
const showTableView = width ? width > breakpoints.md : false
|
||||||
|
|
||||||
|
const handleShowActionModals = useCallback(
|
||||||
|
(token: string, action: 'borrow' | 'repay') => {
|
||||||
|
setSelectedToken(token)
|
||||||
|
action === 'borrow' ? setShowBorrowModal(true) : setShowRepayModal(true)
|
||||||
|
},
|
||||||
|
[]
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{banks?.length ? (
|
||||||
|
showTableView ? (
|
||||||
|
<Table>
|
||||||
|
<thead>
|
||||||
|
<TrHead>
|
||||||
|
<Th className="text-left">{t('token')}</Th>
|
||||||
|
<Th className="text-right">{t('borrow:borrowed-amount')}</Th>
|
||||||
|
<Th>
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Tooltip content={t('borrow:tooltip-available')}>
|
||||||
|
<span className="tooltip-underline">
|
||||||
|
{t('available')}
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</Th>
|
||||||
|
<Th className="text-right">{t('rate')}</Th>
|
||||||
|
<Th />
|
||||||
|
</TrHead>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{banks.map((b) => {
|
||||||
|
const bank: Bank = b.bank
|
||||||
|
|
||||||
|
let logoURI
|
||||||
|
if (mangoTokens.length) {
|
||||||
|
logoURI = mangoTokens.find(
|
||||||
|
(t) => t.address === bank.mint.toString()
|
||||||
|
)?.logoURI
|
||||||
|
}
|
||||||
|
|
||||||
|
const available =
|
||||||
|
group && mangoAccount
|
||||||
|
? getMaxWithdrawForBank(group, bank, mangoAccount, true)
|
||||||
|
: new Decimal(0)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TrBody key={bank.name} className="text-sm">
|
||||||
|
<Td>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="mr-2.5 flex flex-shrink-0 items-center">
|
||||||
|
{logoURI ? (
|
||||||
|
<Image
|
||||||
|
alt=""
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
src={logoURI}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<QuestionMarkCircleIcon className="h-7 w-7 text-th-fgd-3" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<span>{bank.name}</span>
|
||||||
|
</div>
|
||||||
|
</Td>
|
||||||
|
<Td className="text-right">
|
||||||
|
{mangoAccount ? (
|
||||||
|
<AmountWithValue
|
||||||
|
amount={formatDecimal(
|
||||||
|
mangoAccount.getTokenBalanceUi(bank),
|
||||||
|
bank.mintDecimals
|
||||||
|
)}
|
||||||
|
value={formatFixedDecimals(
|
||||||
|
mangoAccount.getTokenBalanceUi(bank) * bank.uiPrice,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
stacked
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<AmountWithValue amount={0} value={'0'} />
|
||||||
|
)}
|
||||||
|
</Td>
|
||||||
|
<Td className="text-right">
|
||||||
|
<AmountWithValue
|
||||||
|
amount={formatDecimal(
|
||||||
|
available.toNumber(),
|
||||||
|
bank.mintDecimals
|
||||||
|
)}
|
||||||
|
value={formatFixedDecimals(
|
||||||
|
available.toNumber() * bank.uiPrice,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
stacked
|
||||||
|
/>
|
||||||
|
</Td>
|
||||||
|
<Td className="text-right text-th-down">
|
||||||
|
{formatDecimal(bank.getBorrowRateUi(), 2, {
|
||||||
|
fixed: true,
|
||||||
|
})}
|
||||||
|
%
|
||||||
|
</Td>
|
||||||
|
<Td>
|
||||||
|
<div className="flex items-center justify-end space-x-2">
|
||||||
|
<Tooltip content={`${t('repay')} ${bank.name}`}>
|
||||||
|
<IconButton
|
||||||
|
onClick={() =>
|
||||||
|
handleShowActionModals(bank.name, 'repay')
|
||||||
|
}
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
<ArrowDownRightIcon className="h-5 w-5" />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip content={`${t('borrow')} ${bank.name}`}>
|
||||||
|
<IconButton
|
||||||
|
onClick={() =>
|
||||||
|
handleShowActionModals(bank.name, 'borrow')
|
||||||
|
}
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
<ArrowUpLeftIcon className="h-5 w-5" />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</Td>
|
||||||
|
</TrBody>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</Table>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{/* {banks.map(({ key, value }) => {
|
||||||
|
const bank = value[0]
|
||||||
|
|
||||||
|
let logoURI
|
||||||
|
if (mangoTokens.length) {
|
||||||
|
logoURI = mangoTokens.find(
|
||||||
|
(t) => t.address === bank.mint.toString()
|
||||||
|
)?.logoURI
|
||||||
|
}
|
||||||
|
|
||||||
|
const inOrders = spotBalances[bank.mint.toString()]?.inOrders || 0
|
||||||
|
const unsettled = spotBalances[bank.mint.toString()]?.unsettled || 0
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="flex items-center justify-between border-b border-th-bkg-3 p-4"
|
||||||
|
key={key}
|
||||||
|
>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="mr-2.5 flex flex-shrink-0 items-center">
|
||||||
|
{logoURI ? (
|
||||||
|
<Image alt="" width="20" height="20" src={logoURI} />
|
||||||
|
) : (
|
||||||
|
<QuestionMarkCircleIcon className="h-7 w-7 text-th-fgd-3" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<span>{bank.name}</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="mb-0.5 flex justify-end space-x-1.5">
|
||||||
|
<span className="text-sm text-th-fgd-4">
|
||||||
|
{mangoAccount
|
||||||
|
? `${formatFixedDecimals(
|
||||||
|
mangoAccount.getTokenBalanceUi(bank) * bank.uiPrice,
|
||||||
|
false,
|
||||||
|
true
|
||||||
|
)}`
|
||||||
|
: '$0.00'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex space-x-2">
|
||||||
|
<p className="text-xs text-th-fgd-4">
|
||||||
|
{t('trade:in-orders')}:{' '}
|
||||||
|
<span className="font-mono text-th-fgd-3">{inOrders}</span>
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-th-fgd-4">
|
||||||
|
{t('trade:unsettled')}:{' '}
|
||||||
|
<span className="font-mono text-th-fgd-3">
|
||||||
|
{unsettled ? unsettled.toFixed(bank.mintDecimals) : 0}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})} */}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
) : mangoAccountAddress || connected ? (
|
||||||
|
<div className="border-b border-th-bkg-3">
|
||||||
|
<div className="flex flex-col items-center p-8">
|
||||||
|
<NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
|
||||||
|
<p>{t('borrow:no-borrows')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="border-b border-th-bkg-3">
|
||||||
|
<div className="p-8">
|
||||||
|
<ConnectEmptyState text={t('borrow:connect-borrows')} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{showBorrowModal ? (
|
||||||
|
<BorrowRepayModal
|
||||||
|
action="borrow"
|
||||||
|
isOpen={showBorrowModal}
|
||||||
|
onClose={() => setShowBorrowModal(false)}
|
||||||
|
token={selectedToken}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
{showRepayModal ? (
|
||||||
|
<BorrowRepayModal
|
||||||
|
action="repay"
|
||||||
|
isOpen={showRepayModal}
|
||||||
|
onClose={() => setShowRepayModal(false)}
|
||||||
|
token={selectedToken}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default YourBorrowsTable
|
||||||
|
|
@ -18,7 +18,7 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
|
||||||
rounded = false,
|
rounded = false,
|
||||||
fillWidth = false,
|
fillWidth = false,
|
||||||
}) => {
|
}) => {
|
||||||
const { t } = useTranslation(['common', 'swap', 'token', 'trade'])
|
const { t } = useTranslation(['common', 'swap', 'token', 'trade', 'borrow'])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex w-full bg-th-bkg-1 text-th-fgd-4">
|
<div className="flex w-full bg-th-bkg-1 text-th-fgd-4">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
import BorrowPage from '@components/borrow/BorrowPage'
|
||||||
|
import type { NextPage } from 'next'
|
||||||
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
||||||
|
|
||||||
|
export async function getStaticProps({ locale }: { locale: string }) {
|
||||||
|
return {
|
||||||
|
props: {
|
||||||
|
...(await serverSideTranslations(locale, [
|
||||||
|
'borrow',
|
||||||
|
'common',
|
||||||
|
'onboarding',
|
||||||
|
'profile',
|
||||||
|
'search',
|
||||||
|
'settings',
|
||||||
|
'token',
|
||||||
|
'trade',
|
||||||
|
])),
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const Borrow: NextPage = () => {
|
||||||
|
return (
|
||||||
|
<div className="pb-20 md:pb-0">
|
||||||
|
<BorrowPage />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Borrow
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"assets-to-borrow": "Assets to Borrow",
|
||||||
|
"available-to-borrow": "Available to Borrow",
|
||||||
|
"borrowed-amount": "Borrowed Amount",
|
||||||
|
"connect-borrows": "Connect to see your borrows",
|
||||||
|
"current-borrow-value": "Current Borrow Value",
|
||||||
|
"liability-weight-desc": "Liability weight adds to the value of the liability in your account health calculation.",
|
||||||
|
"no-borrows": "No Borrows",
|
||||||
|
"tooltip-available": "The max amount you can borrow",
|
||||||
|
"your-borrows": "Your Borrows"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"assets-to-borrow": "Assets to Borrow",
|
||||||
|
"available-to-borrow": "Available to Borrow",
|
||||||
|
"borrowed-amount": "Borrowed Amount",
|
||||||
|
"connect-borrows": "Connect to see your borrows",
|
||||||
|
"current-borrow-value": "Current Borrow Value",
|
||||||
|
"liability-weight-desc": "Liability weight adds to the value of the liability in your account health calculation.",
|
||||||
|
"no-borrows": "No Borrows",
|
||||||
|
"tooltip-available": "The max amount you can borrow",
|
||||||
|
"your-borrows": "Your Borrows"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"assets-to-borrow": "Assets to Borrow",
|
||||||
|
"available-to-borrow": "Available to Borrow",
|
||||||
|
"borrowed-amount": "Borrowed Amount",
|
||||||
|
"connect-borrows": "Connect to see your borrows",
|
||||||
|
"current-borrow-value": "Current Borrow Value",
|
||||||
|
"liability-weight-desc": "Liability weight adds to the value of the liability in your account health calculation.",
|
||||||
|
"no-borrows": "No Borrows",
|
||||||
|
"tooltip-available": "The max amount you can borrow",
|
||||||
|
"your-borrows": "Your Borrows"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"assets-to-borrow": "Assets to Borrow",
|
||||||
|
"available-to-borrow": "Available to Borrow",
|
||||||
|
"borrowed-amount": "Borrowed Amount",
|
||||||
|
"connect-borrows": "Connect to see your borrows",
|
||||||
|
"current-borrow-value": "Current Borrow Value",
|
||||||
|
"liability-weight-desc": "Liability weight adds to the value of the liability in your account health calculation.",
|
||||||
|
"no-borrows": "No Borrows",
|
||||||
|
"tooltip-available": "The max amount you can borrow",
|
||||||
|
"your-borrows": "Your Borrows"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"assets-to-borrow": "Assets to Borrow",
|
||||||
|
"available-to-borrow": "Available to Borrow",
|
||||||
|
"borrowed-amount": "Borrowed Amount",
|
||||||
|
"connect-borrows": "Connect to see your borrows",
|
||||||
|
"current-borrow-value": "Current Borrow Value",
|
||||||
|
"liability-weight-desc": "Liability weight adds to the value of the liability in your account health calculation.",
|
||||||
|
"no-borrows": "No Borrows",
|
||||||
|
"tooltip-available": "The max amount you can borrow",
|
||||||
|
"your-borrows": "Your Borrows"
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue