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,
|
||||
fillWidth = false,
|
||||
}) => {
|
||||
const { t } = useTranslation(['common', 'swap', 'token', 'trade'])
|
||||
const { t } = useTranslation(['common', 'swap', 'token', 'trade', 'borrow'])
|
||||
|
||||
return (
|
||||
<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