Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: CSS and default reward token symbol #176

Merged
merged 2 commits into from
May 18, 2023
Merged

fix: CSS and default reward token symbol #176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6d51624
fix: CSS issue in vault details page on mobile
karelianpie May 18, 2023
56b13c9
fix: Default to yvOP when wallet not connected
karelianpie May 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ module.exports = {
'indent': 'off',
'@typescript-eslint/indent': ['error', 'tab'],
'no-multi-spaces': ['error', {ignoreEOLComments: false}],
'no-mixed-spaces-and-tabs': 'error'
'no-mixed-spaces-and-tabs': 'error',
'react/jsx-max-props-per-line': 'off'
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't like the rule of X number of props per line, if the prop name or value are smallish then it's more than fine to have them in the same line :)

}
};
2 changes: 1 addition & 1 deletion apps/vaults/components/RewardsTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ function RewardsTab({currentVault}: {currentVault: TYDaemonVault}): ReactElement
className={'w-full md:w-[216px]'}
label={'You have unclaimed'}
legend={formatCounterValue(rewardBalance.normalized, rewardTokenBalance.normalizedPrice)}
value={`${trimAmount(rewardBalance.normalized)} ${rewardTokenBalance.symbol}`}
value={`${trimAmount(rewardBalance.normalized)} ${rewardTokenBalance.symbol || 'yvOP'}`}
isDisabled
/>
<Button
Expand Down
118 changes: 60 additions & 58 deletions apps/vaults/components/details/tabs/VaultDetailsAbout.tsx
View file
Open in desktop
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

DRYed a bit the code, there was a bit of repetition

Original file line number Diff line number Diff line change
Expand Up @@ -11,60 +11,68 @@ import type {TGraphForVaultEarningsProps} from '@vaults/components/graphs/GraphF

const GraphForVaultEarnings = dynamic<TGraphForVaultEarningsProps>(async (): LoaderComponent<TGraphForVaultEarningsProps> => import('@vaults/components/graphs/GraphForVaultEarnings'), {ssr: false});

function VaultDetailsAbout({currentVault, harvestData}: {currentVault: TYDaemonVault, harvestData: TGraphData[]}): ReactElement {
type TAPYLineItemProps = {
label: string;
value: number | string;
hasUpperLimit?: boolean;
}
;
type TYearnFeesLineItem = {
children: ReactElement;
label: string;
};

function APYLineItem({value, label, hasUpperLimit}: TAPYLineItemProps): ReactElement {
const safeValue = Number(value) || 0;

return (
<div className={'flex flex-row items-center justify-between'}>
<p className={'text-sm text-neutral-500'}>{label}</p>
<p className={'font-number text-sm text-neutral-900'} suppressHydrationWarning>
{hasUpperLimit ? formatPercent(safeValue * 100) : formatPercent(safeValue * 100, 2, 2, 500)}
</p>
</div>
);
}

function YearnFeesLineItem({children, label}: TYearnFeesLineItem): ReactElement {
return (
<div className={'flex flex-col space-y-0 md:space-y-2'}>
<p className={'text-xxs text-neutral-600 md:text-xs'}>{label}</p>
{children}
</div>
);
}

function VaultDetailsAbout({currentVault, harvestData}: {currentVault: TYDaemonVault, harvestData: TGraphData[]}): ReactElement {
const {token, apy, details} = currentVault;

function getVaultDescription(): string {
if (token.description) {
return parseMarkdown(token.description);
}
return 'Sorry, we don\'t have a description for this asset right now. But did you know the correct word for a blob of toothpaste is a "nurdle". Fascinating! We\'ll work on updating the asset description, but at least you learnt something interesting. Catch ya later nurdles.';
}

return (
<div className={'grid grid-cols-1 gap-10 bg-neutral-100 p-4 md:grid-cols-2 md:gap-32 md:p-8'}>
<div className={'col-span-1 w-full space-y-6'}>
<div>
<b className={'text-neutral-900'}>{'Description'}</b>
<p
className={'mt-4 text-neutral-600'}
dangerouslySetInnerHTML={{__html: currentVault?.token?.description ? parseMarkdown(currentVault?.token?.description) : 'Sorry, we don’t have a description for this asset right now. But did you know the correct word for a blob of toothpaste is a “nurdle”. Fascinating! We’ll work on updating the asset description, but at least you learnt something interesting. Catch ya later nurdles.'}} />
<p className={'mt-4 text-neutral-600'} dangerouslySetInnerHTML={{__html: getVaultDescription()}} />
</div>
<div>
<b className={'text-neutral-900'}>{'APY'}</b>
<div className={'mt-4 grid grid-cols-1 gap-x-12 md:grid-cols-2'}>
<div className={'space-y-2'}>
<div className={'flex flex-row items-center justify-between'}>
<p className={'text-sm text-neutral-500'}>{'Weekly APY'}</p>
<p className={'font-number text-sm text-neutral-900'} suppressHydrationWarning>
{formatPercent((currentVault?.apy?.points?.week_ago || 0) * 100)}
</p>
</div>
<div className={'flex flex-row items-center justify-between'}>
<p className={'text-sm text-neutral-500'}>{'Monthly APY'}</p>
<p className={'font-number text-sm text-neutral-900'} suppressHydrationWarning>
{formatPercent((currentVault?.apy?.points?.month_ago || 0) * 100)}
</p>
</div>
<div className={'flex flex-row items-center justify-between'}>
<p className={'text-sm text-neutral-500'}>{'Inception APY'}</p>
<p className={'font-number text-sm text-neutral-900'} suppressHydrationWarning>
{formatPercent((currentVault?.apy?.points?.inception || 0) * 100)}
</p>
</div>
<APYLineItem label={'Weekly APY'} value={apy.points.week_ago} />
<APYLineItem label={'Monthly APY'} value={apy.points.month_ago} />
<APYLineItem label={'Inception APY'} value={apy.points.inception} />
</div>
<div className={'space-y-2'}>
<div className={'flex flex-row items-center justify-between'}>
<p className={'text-sm text-neutral-500'}>{'Gross APR'}</p>
<p className={'font-number text-sm text-neutral-900'} suppressHydrationWarning>
{formatPercent((currentVault?.apy?.gross_apr || 0) * 100)}
</p>
</div>
<div className={'flex flex-row items-center justify-between'}>
<p className={'text-sm text-neutral-500'}>{'Net APY'}</p>
<p className={'font-number text-sm text-neutral-900'} suppressHydrationWarning>
{formatPercent(((currentVault?.apy?.net_apy || 0) + (currentVault?.apy?.staking_rewards_apr || 0)) * 100, 2, 2, 500)}
</p>
</div>
{currentVault.apy?.staking_rewards_apr > 0 && (
<div className={'flex flex-row items-center justify-between'}>
<p className={'text-sm text-neutral-500'}>{'Reward APR'}</p>
<p className={'font-number text-sm text-neutral-900'}>
{formatPercent((currentVault?.apy?.staking_rewards_apr || 0) * 100, 2, 2, 500)}
</p>
</div>
)}
<div className={'mt-2 space-y-2 md:mt-0'}>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The real fix, add margin top when in mobile view, as this div falls underneath the previous one and didn't have margin

<APYLineItem label={'Gross APR'} value={apy.gross_apr} />
<APYLineItem label={'Net APY'} value={(apy.net_apy || 0) + (apy.staking_rewards_apr || 0)} hasUpperLimit />
{apy.staking_rewards_apr > 0 && <APYLineItem label={'Reward APR'} value={apy.staking_rewards_apr} hasUpperLimit />}
</div>
</div>
</div>
Expand All @@ -73,33 +81,27 @@ function VaultDetailsAbout({currentVault, harvestData}: {currentVault: TYDaemonV
<div>
<b className={'text-neutral-900'}>{'Yearn Fees'}</b>
<div className={'mt-4 flex flex-row space-x-6 md:space-x-8'}>
<div className={'flex flex-col space-y-0 md:space-y-2'}>
<p className={'text-xxs text-neutral-600 md:text-xs'}>{'Deposit/Withdrawal fee'}</p>
<YearnFeesLineItem label={'Deposit/Withdrawal fee'}>
<b className={'font-number text-xl text-neutral-900'}>
{formatPercent(0, 0, 0)}
</b>
</div>
<div className={'flex flex-col space-y-0 md:space-y-2'}>
<p className={'text-xxs text-neutral-600 md:text-xs'}>{'Management fee'}</p>
</YearnFeesLineItem>
<YearnFeesLineItem label={'Management fee'}>
<b className={'font-number text-xl text-neutral-900'}>
{formatPercent((currentVault?.details?.managementFee || 0) / 100, 0)}
{formatPercent((details.managementFee || 0) / 100, 0)}
</b>
</div>
<div className={'flex flex-col space-y-0 md:space-y-2'}>
<p className={'text-xxs text-neutral-600 md:text-xs'}>{'Performance fee'}</p>
</YearnFeesLineItem>
<YearnFeesLineItem label={'Performance fee'}>
<b className={'font-number text-xl text-neutral-500'}>
{formatPercent((currentVault?.details?.performanceFee || 0) / 100, 0)}
{formatPercent((details.performanceFee || 0) / 100, 0)}
</b>
</div>
</YearnFeesLineItem>
</div>
</div>
<div>
<b className={'text-neutral-900'}>{'Cumulative Earnings'}</b>
<div className={'-mx-2 mt-4 flex flex-row border-b border-l border-neutral-300 md:mx-0'} style={{height: 160}}>
<GraphForVaultEarnings
currentVault={currentVault}
harvestData={harvestData}
height={160} />
<GraphForVaultEarnings currentVault={currentVault} harvestData={harvestData} height={160} />
</div>
</div>
</div>
Expand Down