feat: new registry

yearn · Oct 27, 2023 · ac37073 · ac37073
1 parent 58dd54c
commit ac37073
Show file tree

Hide file tree

Showing 7 changed files with 183 additions and 261 deletions.
diff --git a/apps/vaults-v3/Wrapper.tsx b/apps/vaults-v3/Wrapper.tsx
@@ -1,9 +1,11 @@
 import {type NextRouter} from 'next/router';
+import {QueryParamProvider} from 'use-query-params';
 import {AppSettingsContextApp} from '@vaults/contexts/useAppSettings';
 import {StakingRewardsContextApp} from '@vaults/contexts/useStakingRewards';
 import {WalletForZapAppContextApp} from '@vaults/contexts/useWalletForZaps';
 import Meta from '@common/components/Meta';
 import {useCurrentApp} from '@common/hooks/useCurrentApp';
+import {NextQueryParamAdapter} from '@common/utils/QueryParamsProvider';
 
 import type {ReactElement} from 'react';
 
@@ -15,7 +17,13 @@ export function Wrapper({children, router}: {children: ReactElement; router: Nex
 			<Meta meta={manifest} />
 			<AppSettingsContextApp>
 				<WalletForZapAppContextApp>
-					<StakingRewardsContextApp>{children}</StakingRewardsContextApp>
+					<StakingRewardsContextApp>
+						<QueryParamProvider
+							adapter={NextQueryParamAdapter}
+							options={{removeDefaultsFromUrl: true, updateType: 'replaceIn'}}>
+							{children}
+						</QueryParamProvider>
+					</StakingRewardsContextApp>
 				</WalletForZapAppContextApp>
 			</AppSettingsContextApp>
 		</>

diff --git a/apps/vaults-v3/components/details/VaultDetailsTabsWrapper.tsx b/apps/vaults-v3/components/details/VaultDetailsTabsWrapper.tsx
@@ -209,9 +209,7 @@ export function VaultDetailsTabsWrapper({currentVault}: {currentVault: TYDaemonV
 	const [selectedAboutTabIndex, set_selectedAboutTabIndex] = useState(0);
 
 	return (
-		<div
-			aria-label={'Vault Details'}
-			className={'col-span-12 mb-4 flex flex-col rounded-b-3xl bg-neutral-100'}>
+		<div className={'col-span-12 mb-4 flex flex-col rounded-b-3xl bg-neutral-100'}>
 			<div className={'relative flex w-full flex-row items-center justify-between px-4 pt-4 md:px-8'}>
 				<Tabs
 					selectedAboutTabIndex={selectedAboutTabIndex}

diff --git a/apps/vaults-v3/components/details/tabs/VaultDetailsAbout.tsx b/apps/vaults-v3/components/details/tabs/VaultDetailsAbout.tsx
@@ -109,3 +109,75 @@ export function VaultDetailsAbout({currentVault}: {currentVault: TYDaemonVault})
 		</div>
 	);
 }
+
+export function VaultDetailsAboutCard({currentVault}: {currentVault: TYDaemonVault}): ReactElement {
+	const {token, apr} = 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={'col-span-12 w-full rounded-3xl bg-neutral-100 p-6 md:col-span-7'}>
+			<strong className={'block pb-2 text-3xl font-black text-neutral-900 md:pb-4 md:text-4xl md:leading-[48px]'}>
+				{'About'}
+			</strong>
+			<div className={'flex flex-col gap-4 md:flex-col md:gap-10'}>
+				<div>
+					<p
+						className={'text-neutral-900/50'}
+						dangerouslySetInnerHTML={{
+							__html: getVaultDescription()
+						}}
+					/>
+				</div>
+				<div className={'col-span-12 mt-4 w-full md:col-span-5 md:mt-0'}>
+					<div className={'grid grid-cols-1 gap-x-12 md:grid-cols-5'}>
+						<b className={'col-span-3 text-neutral-900'}>{'APR'}</b>
+						<b className={'col-span-2 text-neutral-900'}>{'Fees'}</b>
+					</div>
+					<div className={'mt-2 grid grid-cols-1 gap-x-12 md:grid-cols-5'}>
+						<YearnFeesLineItem label={'Last 7 days'}>
+							<b className={'font-number text-xl text-neutral-900'}>
+								{formatPercent(apr.points.weekAgo * 100, 0)}
+							</b>
+						</YearnFeesLineItem>
+						<YearnFeesLineItem label={'Last 30 days'}>
+							<b className={'font-number text-xl text-neutral-900'}>
+								{formatPercent(apr.points.monthAgo * 100, 0)}
+							</b>
+						</YearnFeesLineItem>
+
+						<YearnFeesLineItem label={'Inception'}>
+							<b className={'font-number text-xl text-neutral-900'}>
+								{formatPercent(apr.points.inception * 100, 0)}
+							</b>
+						</YearnFeesLineItem>
+
+						<YearnFeesLineItem label={'Management'}>
+							<b className={'font-number text-xl text-neutral-900'}>
+								{formatPercent((apr.fees.management || 0) / 100, 0)}
+							</b>
+						</YearnFeesLineItem>
+						<YearnFeesLineItem label={'Performance'}>
+							<b className={'font-number text-xl text-neutral-900'}>
+								{formatPercent((apr.fees.performance || 0) / 100, 0)}
+							</b>
+						</YearnFeesLineItem>
+						{currentVault.category === 'Velodrome' || currentVault.category === 'Aerodrome' ? (
+							<YearnFeesLineItem
+								label={'keepVELO'}
+								tooltip={`Percentage of VELO locked in each harvest. This is used to boost ${currentVault.category} vault pools, and is offset via yvOP staking rewards.`}>
+								<b className={'font-number text-xl text-neutral-500'}>
+									{formatPercent(currentVault.apr.fees.keepVelo * 100, 0)}
+								</b>
+							</YearnFeesLineItem>
+						) : null}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}