cd5ec3ee3b
* tidy: refactor text
* tidy: refactor text
* fix display of vaults table
* feat: added unstyled select
* tidy: useToggle
* tidy: useToggle
* add vaults to types
* MP-2344: first unstyled version of Select
* fix: fixed the build
* MP-2344: progress on the Select
* MP-2344: almost finished the Select
* implement basic vault modal (no logic)
* 🍱 max + displaycur for token input
* Convert to BN for TokenInputs
* env: update wallet-connector
* fix: fixed build errors and relative imports
* fix: updated TokenInput
* tidy: format
* fix: BN instead of new BigNumber
---------
Co-authored-by: Linkie Link <linkielink.dev@gmail.com>
76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import { Button } from 'components/Button'
|
|
import VaultLogo from 'components/Earn/vault/VaultLogo'
|
|
import Text from 'components/Text'
|
|
import TitleAndSubCell from 'components/TitleAndSubCell'
|
|
import useStore from 'store'
|
|
import { getAssetByDenom } from 'utils/assets'
|
|
import { formatPercent, formatValue } from 'utils/formatters'
|
|
|
|
interface Props {
|
|
vault: Vault
|
|
title: string
|
|
subtitle: string
|
|
provider?: string
|
|
unbondingPeriod?: number
|
|
}
|
|
|
|
export default function VaultCard(props: Props) {
|
|
function openVaultModal() {
|
|
useStore.setState({ vaultModal: { vault: props.vault } })
|
|
}
|
|
|
|
return (
|
|
<div className='border-r-[1px] border-r-white/10 p-4'>
|
|
<div className='align-center mb-8 flex justify-between'>
|
|
<div>
|
|
<Text size='xs' className='mb-2 text-white/60'>
|
|
{props.subtitle}
|
|
</Text>
|
|
<span className='flex'>
|
|
<Text className='mr-2 font-bold'>{props.title}</Text>
|
|
{props.provider && (
|
|
<Text size='sm' className='text-white/60'>
|
|
via {props.provider}
|
|
</Text>
|
|
)}
|
|
</span>
|
|
</div>
|
|
<VaultLogo vault={props.vault} />
|
|
</div>
|
|
<div className='mb-6 flex justify-between'>
|
|
<TitleAndSubCell
|
|
className='text-xs'
|
|
title={props.vault.apy ? formatPercent(props.vault.apy) : '-'}
|
|
sub={'APY'}
|
|
/>
|
|
<TitleAndSubCell
|
|
className='text-xs'
|
|
title={`${props.vault.lockup.duration} ${props.vault.lockup.timeframe}`}
|
|
sub={'Lockup'}
|
|
/>
|
|
<TitleAndSubCell
|
|
className='text-xs'
|
|
title={formatValue(props.vault.cap.used || '0', {
|
|
abbreviated: true,
|
|
decimals: getAssetByDenom(props.vault.cap.denom)?.decimals,
|
|
})}
|
|
sub={'TVL'}
|
|
/>
|
|
<TitleAndSubCell
|
|
className='text-xs'
|
|
title={formatValue(props.vault.cap.max || '0', {
|
|
abbreviated: true,
|
|
decimals: getAssetByDenom(props.vault.cap.denom)?.decimals,
|
|
})}
|
|
sub={'Depo. Cap'}
|
|
/>
|
|
</div>
|
|
<Button color='secondary' onClick={openVaultModal} className='w-full'>
|
|
Deposit
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|