65ee49a3cd
* 🌟 Add HLS Vault Modal * 🛠️ Fix failing build * fix: keep the selected accountId if its present int the url (#588) * Link changelog (#589) * env: update RPC endpoint * feat: added changelog link to the footer version * Refactor balances table (#590) * env: update env.example after last sync * tidy: refactored AccountBalancesTable * fix: updated isCard to hideCard * fix: do update the health on sliding the margin back to 0 (#593) * fix: disable highlighting on non-expandable rows (#592) * Healthfactor adjustments (#594) * fix: do update the health on sliding the margin back to 0 * MP-3531: first updates on the health bars * fix: added exponential function for health percentage * fix: build fix * tidy: refactor * tidy: cleanup * feat: added new curve * fix: base set to 3.5 * env: version update * 🌟 Add HLS Vault Modal * Use `DisplayCurrency` in subtitle header * 🔥Remove redundant component --------- Co-authored-by: Linkie Link <linkielink.dev@gmail.com>
73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
import classNames from 'classnames'
|
|
import React from 'react'
|
|
|
|
import DoubleLogo from 'components/DoubleLogo'
|
|
import Text from 'components/Text'
|
|
import TitleAndSubCell from 'components/TitleAndSubCell'
|
|
import { VaultStatus } from 'types/enums/vault'
|
|
import { produceCountdown } from 'utils/formatters'
|
|
|
|
export const NAME_META = { id: 'name', header: 'Vault', accessorKey: 'name' }
|
|
interface Props {
|
|
vault: Vault | DepositedVault
|
|
}
|
|
|
|
export default function Name(props: Props) {
|
|
const { vault } = props
|
|
const timeframe = vault.lockup.timeframe[0]
|
|
const unlockDuration = !!timeframe ? ` - (${vault.lockup.duration}${timeframe})` : ''
|
|
|
|
let remainingTime = 0
|
|
let status: VaultStatus = VaultStatus.ACTIVE
|
|
if ('status' in vault) {
|
|
status = vault.status as VaultStatus
|
|
if (vault.status === VaultStatus.UNLOCKING && vault.unlocksAt) {
|
|
remainingTime = vault.unlocksAt - Date.now()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className='flex'>
|
|
<DoubleLogo primaryDenom={vault.denoms.primary} secondaryDenom={vault.denoms.secondary} />
|
|
<TitleAndSubCell
|
|
className='ml-2 mr-2 text-left'
|
|
title={`${vault.name}${unlockDuration}`}
|
|
sub={vault.provider}
|
|
/>
|
|
{status === VaultStatus.UNLOCKING && (
|
|
<Text
|
|
className='group/label relative h-5 w-[84px] rounded-sm bg-green text-center leading-5 text-white'
|
|
size='xs'
|
|
>
|
|
<span
|
|
className={classNames(
|
|
'absolute inset-0 text-center',
|
|
'opacity-100 transition-opacity duration-500',
|
|
'group-hover/label:opacity-0 group-[.is-expanded]/row:opacity-0',
|
|
)}
|
|
>
|
|
Unlocking
|
|
</span>
|
|
<span
|
|
className={classNames(
|
|
'absolute inset-0 text-center',
|
|
'opacity-0 transition-opacity duration-500',
|
|
'group-hover/label:opacity-100 group-[.is-expanded]/row:opacity-100',
|
|
)}
|
|
>
|
|
{produceCountdown(remainingTime)}
|
|
</span>
|
|
</Text>
|
|
)}
|
|
{status === VaultStatus.UNLOCKED && (
|
|
<Text
|
|
className='h-5 w-[84px] rounded-sm bg-green text-center leading-5 text-white'
|
|
size='xs'
|
|
>
|
|
Unlocked
|
|
</Text>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|