assets to borrow table mobile display
This commit is contained in:
saml33
parent
2eb88a9ab8
commit
f8d30519df
|
|
@ -1,5 +1,6 @@
|
|||
import {
|
||||
ArrowUpLeftIcon,
|
||||
ChevronDownIcon,
|
||||
QuestionMarkCircleIcon,
|
||||
} from '@heroicons/react/20/solid'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
|
|
@ -8,7 +9,7 @@ import { useCallback, useEffect, useState } from 'react'
|
|||
import { useViewport } from '../../hooks/useViewport'
|
||||
import { formatNumericValue } from '../../utils/numbers'
|
||||
import { breakpoints } from '../../utils/theme'
|
||||
import { IconButton } from '../shared/Button'
|
||||
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'
|
||||
|
|
@ -18,6 +19,7 @@ import BorrowRepayModal from '@components/modals/BorrowRepayModal'
|
|||
import BankAmountWithValue from '@components/shared/BankAmountWithValue'
|
||||
import useBanksWithBalances from 'hooks/useBanksWithBalances'
|
||||
import { getAvailableToBorrow } from './YourBorrowsTable'
|
||||
import { Disclosure, Transition } from '@headlessui/react'
|
||||
|
||||
const AssetsBorrowsTable = () => {
|
||||
const { t } = useTranslation(['common', 'token'])
|
||||
|
|
@ -133,10 +135,10 @@ const AssetsBorrowsTable = () => {
|
|||
</tbody>
|
||||
</Table>
|
||||
) : (
|
||||
<div>
|
||||
<div className="border-b border-th-bkg-3">
|
||||
{banks.map((b) => {
|
||||
const bank = b.bank
|
||||
let logoURI
|
||||
let logoURI: string | undefined
|
||||
if (mangoTokens?.length) {
|
||||
logoURI = mangoTokens.find(
|
||||
(t) => t.address === bank.mint.toString()
|
||||
|
|
@ -146,47 +148,75 @@ const AssetsBorrowsTable = () => {
|
|||
const available = group ? getAvailableToBorrow(b, group) : 0
|
||||
|
||||
return (
|
||||
<div
|
||||
key={bank.name}
|
||||
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>
|
||||
<BankAmountWithValue
|
||||
amount={available > 0 ? available : 0}
|
||||
bank={bank}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-0.5 text-right text-xs">{t('rate')}</p>
|
||||
<p className="text-right text-th-down">
|
||||
{formatNumericValue(bank.getBorrowRateUi(), 2)}%
|
||||
</p>
|
||||
</div>
|
||||
<IconButton
|
||||
disabled={b.maxBorrow === 0}
|
||||
onClick={() => handleShowBorrowModal(bank.name)}
|
||||
size="medium"
|
||||
<Disclosure key={bank.name}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Disclosure.Button
|
||||
className={`w-full border-t border-th-bkg-3 p-4 text-left first:border-t-0 focus:outline-none`}
|
||||
>
|
||||
<ArrowUpLeftIcon className="h-5 w-5" />
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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('rate')}
|
||||
</p>
|
||||
<p className="text-right text-th-down">
|
||||
{formatNumericValue(bank.getBorrowRateUi(), 2)}%
|
||||
</p>
|
||||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
<Transition
|
||||
enter="transition ease-in duration-200"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
>
|
||||
<Disclosure.Panel>
|
||||
<div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
|
||||
<div className="col-span-1">
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
{t('available')}
|
||||
</p>
|
||||
<BankAmountWithValue
|
||||
amount={available > 0 ? available : 0}
|
||||
bank={bank}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
className="col-span-2 flex items-center justify-center"
|
||||
onClick={() => handleShowBorrowModal(bank.name)}
|
||||
secondary
|
||||
>
|
||||
<ArrowUpLeftIcon className="mr-2 h-5 w-5" />
|
||||
{`${t('borrow')} ${bank.name.split(' ')[0]}`}
|
||||
</Button>
|
||||
</div>
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue