Skip to content

Commit

Permalink
fix: display of risk/overflow
Browse files Browse the repository at this point in the history
  • Loading branch information
@Majorfi
Majorfi committed Dec 19, 2024
1 parent 6f432f8 commit 3e74d7b
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 32 deletions.
17 changes: 11 additions & 6 deletions apps/vaults-v3/components/details/tabs/VaultDetailsStrategies.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,27 +85,32 @@ export function VaultDetailsStrategies({currentVault}: {currentVault: TYDaemonVa

<div className={cl(isVaultListEmpty ? 'hidden' : '')}>
<div className={'grid grid-cols-12 px-8 pb-6 md:gap-6'}>
<div className={'col-span-12 flex w-full flex-col'}>
<div className={'col-span-12 flex min-h-[240px] w-full flex-col'}>
<VaultsV3ListHead
sortBy={sortBy}
sortDirection={sortDirection}
onSort={(newSortBy: string, newSortDirection: TSortDirection): void => {
if (newSortDirection === '') {
onChangeSortBy('featuringScore');
onChangeSortDirection('');
return;
}
onChangeSortBy(newSortBy as TPossibleSortBy);
onChangeSortDirection(newSortDirection as TSortDirection);
}}
items={[
{label: 'Vault', value: 'name', sortable: true, className: 'col-span-2'},
{label: 'Vault', value: 'name', sortable: true, className: 'col-span-4'},
{label: 'Est. APY', value: 'estAPY', sortable: true, className: 'col-span-2'},
{label: 'Hist. APY', value: 'APY', sortable: true, className: 'col-span-2'},
{
label: 'Risk Level',
value: 'score',
sortable: true,
className: 'col-span-1 text-nowrap'
className: 'col-span-2 whitespace-nowrap'
},
{label: 'Est. APY', value: 'estAPY', sortable: true, className: 'col-span-2'},
{label: 'Hist. APY', value: 'APY', sortable: true, className: 'col-span-2'},
{label: 'Available', value: 'available', sortable: true, className: 'col-span-2'},
{label: 'Holdings', value: 'deposited', sortable: true, className: 'col-span-2'},
{label: 'Deposits', value: 'tvl', sortable: true, className: 'col-span-2'}
{label: 'Deposits', value: 'tvl', sortable: true, className: 'col-span-2 justify-end'}
]}
/>
<div className={'grid gap-4'}>
Expand Down
4 changes: 1 addition & 3 deletions apps/vaults-v3/components/list/VaultsV3ListHead.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,7 @@ export function VaultsV3ListHead({items, sortBy, sortDirection, onSort}: TListHe
</button>
</div>

<div />

<div className={cl('col-span-7 z-10', 'grid grid-cols-2 md:grid-cols-11 gap-1', 'mt-4 md:mt-0')}>
<div className={cl('col-span-8 z-10', 'grid grid-cols-2 md:grid-cols-12 gap-1', 'mt-4 md:mt-0')}>
{rest.map(
(item, index): ReactElement => (
<button
Expand Down
36 changes: 18 additions & 18 deletions apps/vaults-v3/components/list/VaultsV3ListRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,22 +25,24 @@ type TAPYSublineProps = {
function APYSubline({hasPendleArbRewards, hasKelpNEngenlayer, hasKelp}: TAPYSublineProps): ReactElement {
if (hasKelpNEngenlayer) {
return (
<small className={cl('whitespace-nowrap text-xs text-neutral-800 self-end -mb-4')}>
{`+1x Kelp Miles | +1x EigenLayer Points 🚀`}
<small className={cl('whitespace-nowrap text-xs text-neutral-400 self-end -mb-4 absolute top-6')}>
{`+1x Kelp Miles`}
<br />
{'+1x EigenLayer Points'}
</small>
);
}
if (hasKelp) {
return (
<small className={cl('whitespace-nowrap text-xs text-neutral-800 self-end -mb-4')}>
{`+ 1x Kelp Miles 🚀`}
<small className={cl('whitespace-nowrap text-xs text-neutral-400 self-end -mb-4 absolute top-6')}>
{`+ 1x Kelp Miles`}
</small>
);
}
if (hasPendleArbRewards) {
return (
<small className={cl('whitespace-nowrap text-xs text-neutral-800 self-end -mb-5 pt-1 -mr-1')}>
{`+ 2500 ARB/week 🚀`}
<small className={cl('whitespace-nowrap text-xs text-neutral-400 self-end -mb-4 absolute top-6')}>
{`+ 2500 ARB/week`}
</small>
);
}
Expand Down Expand Up @@ -185,7 +187,7 @@ function VaultForwardAPY({currentVault}: {currentVault: TYDaemonVault}): ReactEl

if (currentVault.apr?.extra.stakingRewardsAPR > 0) {
return (
<div className={'flex flex-col items-end md:text-right'}>
<div className={'relative flex flex-col items-end md:text-right'}>
<span className={'tooltip'}>
<b className={'yearn--table-data-section-item-value'}>
<Renderable
Expand Down Expand Up @@ -223,7 +225,7 @@ function VaultForwardAPY({currentVault}: {currentVault: TYDaemonVault}): ReactEl
);
}
return (
<div className={'flex flex-col items-end md:text-right'}>
<div className={'relative flex flex-col items-end md:text-right'}>
<b className={'yearn--table-data-section-item-value'}>
<Renderable
shouldRender={!currentVault.apr.forwardAPR?.type.includes('new')}
Expand Down Expand Up @@ -320,7 +322,7 @@ function VaultForwardAPY({currentVault}: {currentVault: TYDaemonVault}): ReactEl
}

return (
<div className={'flex flex-col items-end md:text-right'}>
<div className={'relative flex flex-col items-end md:text-right'}>
<span className={'tooltip'}>
<b className={'yearn--table-data-section-item-value whitespace-nowrap'}>
<Renderable
Expand Down Expand Up @@ -390,7 +392,7 @@ function VaultForwardAPY({currentVault}: {currentVault: TYDaemonVault}): ReactEl
const hasCurrentAPY = !isZero(currentVault?.apr.forwardAPR.netAPR);
if (hasCurrentAPY) {
return (
<div className={'flex flex-col items-end md:text-right'}>
<div className={'relative flex flex-col items-end md:text-right'}>
<b className={'yearn--table-data-section-item-value'}>
<Renderable
shouldRender={!currentVault.apr.forwardAPR?.type.includes('new')}
Expand All @@ -416,7 +418,7 @@ function VaultForwardAPY({currentVault}: {currentVault: TYDaemonVault}): ReactEl

const hasZeroAPY = isZero(currentVault.apr?.netAPR) || Number((currentVault.apr?.netAPR || 0).toFixed(2)) === 0;
return (
<div className={'flex flex-col items-end md:text-right'}>
<div className={'relative flex flex-col items-end md:text-right'}>
<b className={'yearn--table-data-section-item-value'}>
<Renderable
shouldRender={
Expand Down Expand Up @@ -524,7 +526,7 @@ function VaultRiskScoreTag({riskLevel}: {riskLevel: number}): ReactElement {
const level = riskLevel < 0 ? 0 : riskLevel > 5 ? 5 : riskLevel;
const riskColor = [`transparent`, `#63C532`, `#F8A908`, `#F8A908`, `#C73203`, `#C73203`];
return (
<div className={'col-span-2 flex flex-row justify-between md:col-span-2 md:flex-col md:justify-center'}>
<div className={'col-span-2 flex flex-row items-end justify-between md:flex-col md:justify-center'}>
<p className={'inline whitespace-nowrap text-start text-xs text-neutral-800/60 md:hidden'}>
{'Risk Score'}
</p>
Expand Down Expand Up @@ -644,7 +646,7 @@ export function VaultsV3ListRow({currentVault}: {currentVault: TYDaemonVault}):
/>

<div className={cl('col-span-4 z-10', 'flex flex-row items-center justify-between')}>
<div className={'flex flex-row gap-6 overflow-hidden'}>
<div className={'flex flex-row gap-6 overflow-hidden pr-10'}>
<div className={'mt-2.5 size-8 min-h-8 min-w-8 rounded-full md:flex'}>
<ImageWithFallback
src={`${process.env.BASE_YEARN_ASSETS_URI}/${currentVault.chainID}/${currentVault.token.address}/logo-128.png`}
Expand Down Expand Up @@ -681,11 +683,7 @@ export function VaultsV3ListRow({currentVault}: {currentVault: TYDaemonVault}):
</div>
</div>

<div className={'col-span-1'} />

<div className={cl('col-span-7 z-10', 'grid grid-cols-2 md:grid-cols-12 gap-4', 'mt-4 md:mt-0')}>
<VaultRiskScoreTag riskLevel={currentVault.info.riskLevel} />

<div className={cl('col-span-8 z-10', 'grid grid-cols-2 md:grid-cols-12 gap-4', 'mt-4 md:mt-0')}>
<div
className={'yearn--table-data-section-item col-span-2 flex-row md:flex-col'}
datatype={'number'}>
Expand All @@ -700,6 +698,8 @@ export function VaultsV3ListRow({currentVault}: {currentVault: TYDaemonVault}):
<VaultHistoricalAPY currentVault={currentVault} />
</div>

<VaultRiskScoreTag riskLevel={currentVault.info.riskLevel} />

<div
className={'yearn--table-data-section-item col-span-2 flex-row md:flex-col'}
datatype={'number'}>
Expand Down
10 changes: 5 additions & 5 deletions pages/v3/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -345,18 +345,18 @@ function ListOfVaults(): ReactElement {
onChangeSortDirection(newSortDirection as TSortDirection);
}}
items={[
{label: 'Vault', value: 'name', sortable: true, className: 'col-span-2'},
{label: 'Vault', value: 'name', sortable: true, className: 'col-span-4'},
{label: 'Est. APY', value: 'estAPY', sortable: true, className: 'col-span-2'},
{label: 'Hist. APY', value: 'APY', sortable: true, className: 'col-span-2'},
{
label: 'Risk Level',
value: 'score',
sortable: true,
className: 'col-span-1 whitespace-nowrap'
className: 'col-span-2 whitespace-nowrap'
},
{label: 'Est. APY', value: 'estAPY', sortable: true, className: 'col-span-2'},
{label: 'Hist. APY', value: 'APY', sortable: true, className: 'col-span-2'},
{label: 'Available', value: 'available', sortable: true, className: 'col-span-2'},
{label: 'Holdings', value: 'deposited', sortable: true, className: 'col-span-2'},
{label: 'Deposits', value: 'tvl', sortable: true, className: 'col-span-2'}
{label: 'Deposits', value: 'tvl', sortable: true, className: 'col-span-2 justify-end'}
]}
/>
<div className={'grid gap-4'}>{renderVaultList()}</div>
Expand Down

0 comments on commit 3e74d7b

Please sign in to comment.