fix: staking data feat

yearn · Nov 9, 2023 · ed17ae3 · ed17ae3
1 parent 96a3bdb
commit ed17ae3
Show file tree

Hide file tree

Showing 44 changed files with 384 additions and 597 deletions.
diff --git a/apps/common/components/Dropdown.tsx b/apps/common/components/Dropdown.tsx
@@ -98,7 +98,7 @@ export const Dropdown = ({
 	return (
 		<div className={className}>
 			<div className={'relative z-20 flex flex-col space-y-1'}>
-				{label && <label className={'text-base text-neutral-600'}>{label}</label>}
+				{label && <p className={'text-base text-neutral-600'}>{label}</p>}
 				<div>
 					{isOpen ? (
 						<div

diff --git a/apps/common/components/ImageWithFallback.tsx b/apps/common/components/ImageWithFallback.tsx
@@ -11,7 +11,7 @@ type TImageWithFallback = ImageProps & {
 	smHeight?: number;
 };
 export function ImageWithFallback(props: TImageWithFallback): ReactElement {
-	const {alt, src, ...rest} = props;
+	const {alt, src, smWidth, smHeight, ...rest} = props;
 	const [imageSrc, set_imageSrc] = useState(`${src}?fallback=true`);
 	const [imageStyle, set_imageStyle] = useState<CSSProperties>({});
 
@@ -26,8 +26,8 @@ export function ImageWithFallback(props: TImageWithFallback): ReactElement {
 			src={imageSrc}
 			style={imageStyle}
 			className={cl(
-				`w-[${rest.smWidth ?? rest.width}px] min-w-[${rest.smWidth ?? rest.width}px]`,
-				`h-[${rest.smHeight ?? rest.height}px] min-h-[${rest.smHeight ?? rest.height}px]`,
+				`w-[${smWidth ?? rest.width}px] min-w-[${smWidth ?? rest.width}px]`,
+				`h-[${smHeight ?? rest.height}px] min-h-[${smHeight ?? rest.height}px]`,
 				`md:w-[${rest.width}px] md:h-[${rest.height}px]`,
 				`md:min-w-[${rest.width}px] md:min-h-[${rest.height}px]`
 			)}

diff --git a/apps/common/components/Popover.tsx b/apps/common/components/Popover.tsx
@@ -148,7 +148,7 @@ export function Popover(): ReactElement {
 									onChange={({target: {value}}): void => set_telegramHandle(value)}
 									placeholder={'Your telegram handle for follow up'}
 								/>
-								<label className={'max-w-xs items-center justify-end pt-1'}>
+								<p className={'max-w-xs items-center justify-end pt-1'}>
 									<p className={'text-xs'}>
 										{"If you don't have telegram please "}
 										<Link href={'https://discord.gg/yearn'}>{'join our discord'}</Link>
@@ -159,7 +159,7 @@ export function Popover(): ReactElement {
 										</Link>
 										{', admins will never dm first.'}
 									</p>
-								</label>
+								</p>
 								<button
 									disabled={
 										!description || description.length < 10 || isCoolingOff || isSubmitDisabled
@@ -170,23 +170,23 @@ export function Popover(): ReactElement {
 									onClick={async (): Promise<void> => onSubmit(close)}>
 									{!isCoolingOff ? 'Submit' : `Please wait ${timeLeft}`}
 								</button>
-								<label className={'max-w-xs items-center justify-end pt-2'}>
+								<p className={'max-w-xs items-center justify-end pt-2'}>
 									<p className={'text-right text-xs italic text-neutral-200'}>
 										{'Address and screenshot of page will be attached'}
 									</p>
 									<p className={'text-right text-xs italic text-neutral-200'}>
 										{'For internal use only'}
 									</p>
-								</label>
-								<label className={'flex cursor-pointer items-center justify-end'}>
+								</p>
+								<p className={'flex cursor-pointer items-center justify-end'}>
 									<button
 										className={
 											'text-right text-xs text-neutral-200 underline transition-colors hover:text-neutral-400'
 										}
 										onClick={(): void => set_hasPopover(!hasPopover)}>
 										{'Hide me forever'}
 									</button>
-								</label>
+								</p>
 							</div>
 						)}
 					</PopoverHeadlessUI.Panel>

diff --git a/apps/common/components/Table.tsx b/apps/common/components/Table.tsx
@@ -184,9 +184,9 @@ export function Table<T>({
 											className
 										)}>
 										{!fullWidth && (
-											<label className={'inline text-start text-sm text-neutral-500 md:hidden'}>
+											<p className={'inline text-start text-sm text-neutral-500 md:hidden'}>
 												{label}
-											</label>
+											</p>
 										)}
 										<div
 											className={cl(

diff --git a/apps/common/hooks/useFetch.ts b/apps/common/hooks/useFetch.ts
@@ -30,7 +30,7 @@ export function useFetch<T>({endpoint, schema, config}: TUseZodProps<T>): SWRRes
 	const parsedData = schema.safeParse(result.data);
 
 	if (!parsedData.success) {
-		// console.error(endpoint, parsedData.error);
+		console.error(endpoint, parsedData.error);
 		Sentry.captureException(parsedData.error, {tags: {endpoint}});
 		return {...result, isSuccess: false};
 	}

diff --git a/apps/common/schemas/yDaemonVaultsSchemas.ts b/apps/common/schemas/yDaemonVaultsSchemas.ts
@@ -1,12 +1,12 @@
 import {z} from 'zod';
+import {toAddress} from '@yearn-finance/web-lib/utils/address';
 import {toBigInt} from '@yearn-finance/web-lib/utils/format.bigNumber';
 import {addressSchema} from '@yearn-finance/web-lib/utils/schemas/addressSchema';
 
 const yDaemonVaultStrategySchema = z.object({
 	address: addressSchema,
 	name: z.string(),
-	displayName: z.string(),
-	description: z.string(),
+	description: z.string().optional().default(''),
 	details: z
 		.object({
 			totalDebt: z.string(),
@@ -59,21 +59,36 @@ export const yDaemonVaultSchema = z.object({
 		.or(z.literal('Experimental'))
 		.or(z.literal('Experimental Yearn Vault'))
 		.or(z.literal('Standard'))
-		.or(z.literal('Yearn Vault')),
-	kind: z.literal('Legacy').or(z.literal('Multi Strategies')).or(z.literal('Single Strategy')),
+		.or(z.literal('Yearn Vault'))
+		.default('Standard')
+		.catch('Standard'),
+	kind: z
+		.literal('Legacy')
+		.or(z.literal('Multi Strategies'))
+		.or(z.literal('Single Strategy'))
+		.default('Legacy')
+		.catch('Legacy'),
 	symbol: z.string(),
 	name: z.string(),
 	category: z
 		.literal('Curve')
-		.or(z.literal('Volatile').or(z.literal('Balancer')).or(z.literal('Stablecoin')))
+		.or(z.literal('Volatile'))
+		.or(z.literal('Balancer'))
+		.or(z.literal('Stablecoin'))
 		.or(z.literal('Velodrome'))
 		.or(z.literal('Boosted'))
-		.or(z.literal('Aerodrome')),
+		.or(z.literal('Aerodrome'))
+		.default('Volatile')
+		.catch('Volatile'),
 	decimals: z.number(),
 	chainID: z.number(),
 	token: yDaemonVaultTokenSchema,
 	tvl: z.object({
-		totalAssets: z.string().transform((val): bigint => toBigInt(val)),
+		totalAssets: z
+			.string()
+			.default('0')
+			.catch('0')
+			.transform((val): bigint => toBigInt(val)),
 		tvl: z.number().default(0).catch(0),
 		price: z.number().default(0).catch(0)
 	}),
@@ -122,6 +137,19 @@ export const yDaemonVaultSchema = z.object({
 	featuringScore: z.number().default(0).catch(0),
 	retired: z.boolean().default(false).catch(false),
 	strategies: z.array(yDaemonVaultStrategySchema).nullable().default([]),
+	staking: z
+		.object({
+			address: addressSchema,
+			available: z.boolean().default(false).catch(false)
+		})
+		.default({
+			address: toAddress(''),
+			available: false
+		})
+		.catch({
+			address: toAddress(''),
+			available: false
+		}),
 	migration: z.object({
 		available: z.boolean(),
 		address: addressSchema,

diff --git a/apps/vaults-v3/Wrapper.tsx b/apps/vaults-v3/Wrapper.tsx
@@ -1,7 +1,6 @@
 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';
@@ -17,13 +16,11 @@ export function Wrapper({children, router}: {children: ReactElement; router: Nex
 			<Meta meta={manifest} />
 			<AppSettingsContextApp>
 				<WalletForZapAppContextApp>
-					<StakingRewardsContextApp>
-						<QueryParamProvider
-							adapter={NextQueryParamAdapter}
-							options={{removeDefaultsFromUrl: true, updateType: 'replaceIn'}}>
-							{children}
-						</QueryParamProvider>
-					</StakingRewardsContextApp>
+					<QueryParamProvider
+						adapter={NextQueryParamAdapter}
+						options={{removeDefaultsFromUrl: true, updateType: 'replaceIn'}}>
+						{children}
+					</QueryParamProvider>
 				</WalletForZapAppContextApp>
 			</AppSettingsContextApp>
 		</>

diff --git a/apps/vaults-v3/components/SettingsPopover.tsx b/apps/vaults-v3/components/SettingsPopover.tsx
@@ -1,7 +1,7 @@
 import {Fragment, useMemo} from 'react';
 import {Popover, Transition} from '@headlessui/react';
+import {STACKING_TO_VAULT} from '@vaults/constants/optRewards';
 import {isSolverDisabled} from '@vaults/contexts/useSolver';
-import {useStakingRewards} from '@vaults/contexts/useStakingRewards';
 import {Renderable} from '@yearn-finance/web-lib/components/Renderable';
 import {IconSettings} from '@yearn-finance/web-lib/icons/IconSettings';
 import {cl} from '@yearn-finance/web-lib/utils/cl';
@@ -209,8 +209,7 @@ function ZapSection({chainID}: {chainID: number}): ReactElement {
 
 function StakingSection({vaultAddress}: {vaultAddress: TAddress}): ReactElement | null {
 	const {isStakingOpBoostedVaults, set_isStakingOpBoostedVaults} = useYearn();
-	const {stakingRewardsByVault} = useStakingRewards();
-	const hasStakingRewards = !!stakingRewardsByVault?.[vaultAddress];
+	const hasStakingRewards = !!STACKING_TO_VAULT?.[vaultAddress];
 
 	if (!hasStakingRewards) {
 		return null;

diff --git a/apps/vaults-v3/components/details/VaultActionsTabsWrapper.tsx b/apps/vaults-v3/components/details/VaultActionsTabsWrapper.tsx
@@ -4,20 +4,14 @@ import {Listbox, Transition} from '@headlessui/react';
 import {useUpdateEffect} from '@react-hookz/web';
 import {RewardsTab} from '@vaults/components/RewardsTab';
 import {Flow, useActionFlow} from '@vaults/contexts/useActionFlow';
-import {useStakingRewards} from '@vaults/contexts/useStakingRewards';
 import {VaultDetailsQuickActionsButtons} from '@vaults-v3/components/details/actions/QuickActionsButtons';
 import {VaultDetailsQuickActionsFrom} from '@vaults-v3/components/details/actions/QuickActionsFrom';
 import {VaultDetailsQuickActionsSwitch} from '@vaults-v3/components/details/actions/QuickActionsSwitch';
 import {VaultDetailsQuickActionsTo} from '@vaults-v3/components/details/actions/QuickActionsTo';
 import {SettingsPopover} from '@vaults-v3/components/SettingsPopover';
-import {Banner} from '@yearn-finance/web-lib/components/Banner';
-import {useLocalStorage} from '@yearn-finance/web-lib/hooks/useLocalStorage';
-import {toAddress} from '@yearn-finance/web-lib/utils/address';
 import {cl} from '@yearn-finance/web-lib/utils/cl';
-import {toBigInt, toNormalizedBN} from '@yearn-finance/web-lib/utils/format.bigNumber';
 import {isZero} from '@yearn-finance/web-lib/utils/isZero';
 import {performBatchedUpdates} from '@yearn-finance/web-lib/utils/performBatchedUpdates';
-import {useToken} from '@common/hooks/useToken';
 import {IconChevron} from '@common/icons/IconChevron';
 import {Solver} from '@common/schemas/yDaemonTokenListBalances';
 
@@ -38,8 +32,6 @@ const tabs: TTabsOptions[] = [
 	{value: 3, label: '$OP BOOST', flowAction: Flow.None, slug: 'boost'}
 ];
 
-const DISPLAY_DECIMALS = 10;
-
 function getCurrentTab({
 	isDepositing,
 	hasMigration,
@@ -58,29 +50,16 @@ function getCurrentTab({
 export function VaultActionsTabsWrapper({currentVault}: {currentVault: TYDaemonVault}): ReactElement {
 	const {onSwitchSelectedOptions, isDepositing, actionParams, currentSolver} = useActionFlow();
 	const [possibleTabs, set_possibleTabs] = useState<TTabsOptions[]>([tabs[0], tabs[1]]);
-	const {stakingRewardsMap, positionsMap, stakingRewardsByVault} = useStakingRewards();
 	const willDepositAndStake = currentSolver === Solver.enum.OptimismBooster;
-	const stakingRewardsAddress = stakingRewardsByVault[currentVault.address];
-	const stakingRewards = stakingRewardsAddress ? stakingRewardsMap[stakingRewardsAddress] : undefined;
-	const stakingRewardsPosition = stakingRewardsAddress ? positionsMap[stakingRewardsAddress] : undefined;
-	const rewardTokenBalance = useToken({
-		address: toAddress(stakingRewards?.rewardsToken),
-		chainID: currentVault.chainID
-	});
-	const hasStakingRewards = !!stakingRewardsByVault[currentVault.address];
+	const hasStakingRewards = Boolean(currentVault.staking.available);
 	const [currentTab, set_currentTab] = useState<TTabsOptions>(
 		getCurrentTab({
 			isDepositing,
 			hasMigration: currentVault?.migration?.available,
 			isRetired: currentVault?.retired
 		})
 	);
-	const [shouldShowOpBoostInfo, set_shouldShowOpBoostInfo] = useLocalStorage<boolean>(
-		'yearn.fi/op-boost-banner',
-		true
-	);
 	const router = useRouter();
-	const rewardBalance = toNormalizedBN(toBigInt(stakingRewardsPosition?.reward), rewardTokenBalance.decimals);
 
 	useEffect((): void => {
 		const tab = tabs.find((tab): boolean => tab.slug === router.query.action);
@@ -242,19 +221,6 @@ export function VaultActionsTabsWrapper({currentVault}: {currentVault: TYDaemonV
 				</div>
 				<div className={'-mt-0.5 h-0.5 w-full bg-neutral-300'} />
 
-				{shouldShowOpBoostInfo && !isZero(rewardBalance.normalized) && (
-					<div>
-						<Banner
-							content={`Ser where's my rewards? You have ${Number(rewardBalance.normalized).toFixed(
-								DISPLAY_DECIMALS
-							)} ${
-								rewardTokenBalance.symbol || 'yvOP'
-							} waiting for you in the OP BOOST tab (yep, the one just above here).`}
-							type={'info'}
-							onClose={(): void => set_shouldShowOpBoostInfo(false)}
-						/>
-					</div>
-				)}
 				{currentTab.value === 3 ? (
 					<RewardsTab currentVault={currentVault} />
 				) : (
@@ -266,7 +232,7 @@ export function VaultActionsTabsWrapper({currentVault}: {currentVault: TYDaemonV
 						<VaultDetailsQuickActionsSwitch />
 						<VaultDetailsQuickActionsTo />
 						<div className={'w-full space-y-0 md:w-42 md:min-w-42 md:space-y-2'}>
-							<label className={'hidden text-base md:inline'}>&nbsp;</label>
+							<p className={'hidden text-base md:inline'}>&nbsp;</p>
 							<div>
 								<VaultDetailsQuickActionsButtons currentVault={currentVault} />
 							</div>

diff --git a/apps/vaults-v3/components/details/VaultDetailsHeader.tsx b/apps/vaults-v3/components/details/VaultDetailsHeader.tsx
@@ -1,8 +1,6 @@
 import {useMemo} from 'react';
 import {useContractRead} from 'wagmi';
-import {useStakingRewards} from '@vaults/contexts/useStakingRewards';
 import {VAULT_V3_ABI} from '@vaults/utils/abi/vaultV3.abi';
-import {toAddress} from '@yearn-finance/web-lib/utils/address';
 import {cl} from '@yearn-finance/web-lib/utils/cl';
 import {toBigInt, toNormalizedBN} from '@yearn-finance/web-lib/utils/format.bigNumber';
 import {formatUSD} from '@yearn-finance/web-lib/utils/format.number';
@@ -140,14 +138,15 @@ function ValueInToken(props: {currentVault: TYDaemonVault; vaultPrice: number; d
 }
 
 export function VaultDetailsHeader({currentVault}: {currentVault: TYDaemonVault}): ReactElement {
-	const {address, apr, tvl, decimals, symbol = 'token', token} = currentVault;
+	const {apr, tvl, decimals, symbol = 'token', token} = currentVault;
 	const chainInfo = getNetwork(currentVault.chainID);
-	const vaultBalance = useBalance({address, chainID: currentVault.chainID});
-	const vaultPrice = useTokenPrice(address) || currentVault?.tvl?.price || 0;
+	const vaultBalance = useBalance({address: currentVault.address, chainID: currentVault.chainID});
+	const stakedBalance = useBalance({address: currentVault.staking.address, chainID: currentVault.chainID});
+	const vaultPrice = useTokenPrice(currentVault.address) || currentVault?.tvl?.price || 0;
 	const vaultName = useMemo((): string => getVaultName(currentVault), [currentVault]);
-	const {stakingRewardsByVault, positionsMap} = useStakingRewards();
-	const stakedBalance = toBigInt(positionsMap[toAddress(stakingRewardsByVault[address])]?.stake);
-	const depositedAndStaked = toNormalizedBN(vaultBalance.raw + stakedBalance, decimals);
+	const depositedAndStaked = currentVault.staking.available
+		? toNormalizedBN(vaultBalance.raw + stakedBalance.raw, decimals)
+		: vaultBalance;
 
 	return (
 		<div className={'col-span-12 mt-4 flex w-full flex-col items-center justify-center'}>
@@ -161,9 +160,11 @@ export function VaultDetailsHeader({currentVault}: {currentVault: TYDaemonVault}
 			</strong>
 
 			<div className={'mb-10 mt-6 flex flex-col justify-center md:mt-4'}>
-				{address ? (
-					<button onClick={(): void => copyToClipboard(address)}>
-						<p className={'font-number text-center text-xxs text-neutral-900/70 md:text-xs'}>{address}</p>
+				{currentVault.address ? (
+					<button onClick={(): void => copyToClipboard(currentVault.address)}>
+						<p className={'font-number text-center text-xxs text-neutral-900/70 md:text-xs'}>
+							{currentVault.address}
+						</p>
 					</button>
 				) : (
 					<p className={'text-xxs md:text-xs'}>&nbsp;</p>