From ed17ae32ee23711d06fac0d0dc4c6b1c1e5387c7 Mon Sep 17 00:00:00 2001
From: Majorfi <major-tom.eth@pm.me>
Date: Thu, 9 Nov 2023 15:30:55 +0100
Subject: [PATCH] fix: staking data feat

---
 apps/common/components/Dropdown.tsx           |   2 +-
 apps/common/components/ImageWithFallback.tsx  |   6 +-
 apps/common/components/Popover.tsx            |  12 +-
 apps/common/components/Table.tsx              |   4 +-
 apps/common/hooks/useFetch.ts                 |   2 +-
 apps/common/schemas/yDaemonVaultsSchemas.ts   |  42 +++-
 apps/vaults-v3/Wrapper.tsx                    |  13 +-
 apps/vaults-v3/components/SettingsPopover.tsx |   5 +-
 .../details/VaultActionsTabsWrapper.tsx       |  38 +--
 .../components/details/VaultDetailsHeader.tsx |  23 +-
 .../details/actions/QuickActionsButtons.tsx   |  56 ++---
 .../details/actions/QuickActionsFrom.tsx      |   4 +-
 .../details/actions/QuickActionsSwitch.tsx    |   2 +-
 .../details/actions/QuickActionsTo.tsx        |   4 +-
 .../components/list/VaultsV3ListRow.tsx       |  18 +-
 apps/vaults/Wrapper.tsx                       |   5 +-
 apps/vaults/components/RewardsTab.tsx         | 219 +++++++++---------
 apps/vaults/components/SettingsPopover.tsx    |   8 +-
 .../details/VaultActionsTabsWrapper.tsx       |  38 +--
 .../components/details/VaultDetailsHeader.tsx |  27 +--
 .../details/actions/QuickActionsButtons.tsx   |  56 ++---
 .../details/actions/QuickActionsFrom.tsx      |   6 +-
 .../details/actions/QuickActionsSwitch.tsx    |   3 +-
 .../details/actions/QuickActionsTo.tsx        |   4 +-
 .../details/tabs/VaultDetailsStrategies.tsx   |   4 +-
 .../components/list/VaultListOptions.tsx      |   8 +-
 apps/vaults/components/list/VaultsListRow.tsx |  12 +-
 apps/vaults/contexts/useActionFlow.tsx        |   5 +-
 apps/vaults/contexts/useStakingRewards.tsx    | 165 -------------
 apps/vaults/hooks/useSortVaults.ts            |  23 +-
 apps/vaults/hooks/useVaultStakingData.ts      |  78 +++++++
 apps/veyfi/components/RewardsTab.tsx          |   8 +-
 .../components/ViewStakeUnstakeGauges.tsx     |   8 +-
 apps/veyfi/contexts/useGauge.tsx              |  12 +-
 apps/ybal/components/CardZap.tsx              |   8 +-
 .../components/bribe/GaugeBribeModal.tsx      |   8 +-
 apps/ybribe/components/bribe/GaugeListRow.tsx |   6 +-
 apps/ybribe/components/claim/GaugeListRow.tsx |  10 +-
 .../rewardFeed/RewardFeedTableRow.tsx         |   4 +-
 apps/ycrv/components/CardZap.tsx              |   8 +-
 apps/ycrv/components/QuickActions.tsx         |   7 +-
 next.config.js                                |   5 +-
 pages/index.tsx                               |   1 -
 pages/vaults/factory.tsx                      |   4 +-
 44 files changed, 384 insertions(+), 597 deletions(-)
 delete mode 100644 apps/vaults/contexts/useStakingRewards.tsx
 create mode 100644 apps/vaults/hooks/useVaultStakingData.ts

diff --git a/apps/common/components/Dropdown.tsx b/apps/common/components/Dropdown.tsx
index 16f509716..7aed30022 100644
--- 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
index 0cfc3d7d5..0b151c94d 100755
--- 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
index 60c7eaf86..749925581 100644
--- 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,15 +170,15 @@ 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'
@@ -186,7 +186,7 @@ export function Popover(): ReactElement {
 										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
index 6f3b54afc..26b68f088 100644
--- 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
index b7ee15a1b..c709a9e7b 100644
--- 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
index 74ec81a82..770f35997 100644
--- 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
index 1e147e45e..0b8b952d6 100755
--- 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
index 3d6ed71eb..baba9fffe 100755
--- 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
index 66b3335c9..7edda07ae 100755
--- 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,16 +50,8 @@ 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,
@@ -75,12 +59,7 @@ export function VaultActionsTabsWrapper({currentVault}: {currentVault: TYDaemonV
 			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
index da2c2da97..485d4d031 100755
--- 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>
diff --git a/apps/vaults-v3/components/details/actions/QuickActionsButtons.tsx b/apps/vaults-v3/components/details/actions/QuickActionsButtons.tsx
index 8a391350b..e77d2c286 100644
--- a/apps/vaults-v3/components/details/actions/QuickActionsButtons.tsx
+++ b/apps/vaults-v3/components/details/actions/QuickActionsButtons.tsx
@@ -1,7 +1,6 @@
 import {useCallback, useState} from 'react';
 import {useActionFlow} from '@vaults/contexts/useActionFlow';
 import {useSolver} from '@vaults/contexts/useSolver';
-import {useStakingRewards} from '@vaults/contexts/useStakingRewards';
 import {useWalletForZap} from '@vaults/contexts/useWalletForZaps';
 import {Button} from '@yearn-finance/web-lib/components/Button';
 import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
@@ -23,7 +22,6 @@ import type {TYDaemonVault} from '@common/schemas/yDaemonVaultsSchemas';
 export function VaultDetailsQuickActionsButtons({currentVault}: {currentVault: TYDaemonVault}): ReactElement {
 	const {refresh} = useWallet();
 	const {refresh: refreshZapBalances} = useWalletForZap();
-	const {refresh: refreshStakingRewards} = useStakingRewards();
 	const {address, provider} = useWeb3();
 	const {isStakingOpBoostedVaults} = useYearn();
 	const [txStatusApprove, set_txStatusApprove] = useState(defaultTxStatus);
@@ -53,6 +51,7 @@ export function VaultDetailsQuickActionsButtons({currentVault}: {currentVault: T
 	}, [address, onRetrieveAllowance, hash]);
 
 	const onSuccess = useCallback(async (): Promise<void> => {
+		const {chainID} = currentVault;
 		onChangeAmount(toNormalizedBN(0));
 		if (
 			Solver.enum.Vanilla === currentSolver ||
@@ -61,19 +60,15 @@ export function VaultDetailsQuickActionsButtons({currentVault}: {currentVault: T
 			Solver.enum.OptimismBooster === currentSolver ||
 			Solver.enum.InternalMigration === currentSolver
 		) {
-			await refresh([
-				{
-					address: toAddress(actionParams?.selectedOptionFrom?.value),
-					chainID: currentVault.chainID
-				},
-				{
-					address: toAddress(actionParams?.selectedOptionTo?.value),
-					chainID: currentVault.chainID
-				}
-			]);
-			if (Solver.enum.OptimismBooster === currentSolver) {
-				await refreshStakingRewards();
+			const toRefresh = [
+				{address: toAddress(actionParams?.selectedOptionFrom?.value), chainID},
+				{address: toAddress(actionParams?.selectedOptionTo?.value), chainID},
+				{address: toAddress(currentVault.address), chainID}
+			];
+			if (currentVault.staking.available) {
+				toRefresh.push({address: toAddress(currentVault.staking.address), chainID});
 			}
+			await refresh(toRefresh);
 		} else if (
 			Solver.enum.Cowswap === currentSolver ||
 			Solver.enum.Portals === currentSolver ||
@@ -82,44 +77,23 @@ export function VaultDetailsQuickActionsButtons({currentVault}: {currentVault: T
 			if (isDepositing) {
 				//refresh input from zap wallet, refresh output from default
 				await Promise.all([
-					refreshZapBalances([
-						{
-							address: toAddress(actionParams?.selectedOptionFrom?.value),
-							chainID: currentVault.chainID
-						}
-					]),
-					refresh([
-						{
-							address: toAddress(actionParams?.selectedOptionTo?.value),
-							chainID: currentVault.chainID
-						}
-					])
+					refreshZapBalances([{address: toAddress(actionParams?.selectedOptionFrom?.value), chainID}]),
+					refresh([{address: toAddress(actionParams?.selectedOptionTo?.value), chainID}])
 				]);
 			} else {
 				await Promise.all([
-					refreshZapBalances([
-						{
-							address: toAddress(actionParams?.selectedOptionTo?.value),
-							chainID: currentVault.chainID
-						}
-					]),
-					refresh([
-						{
-							address: toAddress(actionParams?.selectedOptionFrom?.value),
-							chainID: currentVault.chainID
-						}
-					])
+					refreshZapBalances([{address: toAddress(actionParams?.selectedOptionTo?.value), chainID}]),
+					refresh([{address: toAddress(actionParams?.selectedOptionFrom?.value), chainID}])
 				]);
 			}
 		}
 	}, [
+		currentVault,
 		onChangeAmount,
 		currentSolver,
-		refresh,
 		actionParams?.selectedOptionFrom?.value,
 		actionParams?.selectedOptionTo?.value,
-		currentVault.chainID,
-		refreshStakingRewards,
+		refresh,
 		isDepositing,
 		refreshZapBalances
 	]);
diff --git a/apps/vaults-v3/components/details/actions/QuickActionsFrom.tsx b/apps/vaults-v3/components/details/actions/QuickActionsFrom.tsx
index d7c4413de..a23261af5 100644
--- a/apps/vaults-v3/components/details/actions/QuickActionsFrom.tsx
+++ b/apps/vaults-v3/components/details/actions/QuickActionsFrom.tsx
@@ -67,9 +67,7 @@ export function VaultDetailsQuickActionsFrom(): ReactElement {
 			className={'flex w-full flex-col space-x-0 md:flex-row md:space-x-4'}>
 			<div className={'relative z-10 w-full'}>
 				<div className={'flex flex-col items-baseline justify-between pb-2 pl-1 md:flex-row'}>
-					<label className={'text-base text-neutral-600'}>
-						{isDepositing ? 'From wallet' : 'From vault'}
-					</label>
+					<p className={'text-base text-neutral-600'}>{isDepositing ? 'From wallet' : 'From vault'}</p>
 					<legend
 						className={'font-number inline text-xs text-neutral-900/50 md:hidden'}
 						suppressHydrationWarning>
diff --git a/apps/vaults-v3/components/details/actions/QuickActionsSwitch.tsx b/apps/vaults-v3/components/details/actions/QuickActionsSwitch.tsx
index 252018b78..426d94dfb 100644
--- a/apps/vaults-v3/components/details/actions/QuickActionsSwitch.tsx
+++ b/apps/vaults-v3/components/details/actions/QuickActionsSwitch.tsx
@@ -5,7 +5,7 @@ import type {ReactElement} from 'react';
 export function VaultDetailsQuickActionsSwitch(): ReactElement {
 	return (
 		<div className={'mx-auto flex w-full justify-center space-y-0 md:mx-none md:block md:w-14 md:space-y-2'}>
-			<label className={'hidden text-base md:inline'}>&nbsp;</label>
+			<p className={'hidden text-base md:inline'}>&nbsp;</p>
 
 			<div className={'flex h-6 w-6 rotate-90 items-center justify-center p-0 md:h-10 md:w-14 md:rotate-0'}>
 				<span className={'sr-only'}>{'Deposit / Withdraw'}</span>
diff --git a/apps/vaults-v3/components/details/actions/QuickActionsTo.tsx b/apps/vaults-v3/components/details/actions/QuickActionsTo.tsx
index 7845f4208..460dc2763 100644
--- a/apps/vaults-v3/components/details/actions/QuickActionsTo.tsx
+++ b/apps/vaults-v3/components/details/actions/QuickActionsTo.tsx
@@ -35,9 +35,9 @@ export function VaultDetailsQuickActionsTo(): ReactElement {
 		<section className={'flex w-full flex-col space-x-0 md:flex-row md:space-x-4'}>
 			<div className={'relative z-10 w-full'}>
 				<div className={'flex flex-col items-baseline justify-between pb-2 pl-1 md:flex-row'}>
-					<label className={'text-base text-neutral-600'}>
+					<p className={'text-base text-neutral-600'}>
 						{isDepositing || isMigrationAvailable ? 'To vault' : 'To wallet'}
-					</label>
+					</p>
 					<legend
 						className={'font-number inline text-xs text-neutral-900/50 md:hidden'}
 						suppressHydrationWarning>
diff --git a/apps/vaults-v3/components/list/VaultsV3ListRow.tsx b/apps/vaults-v3/components/list/VaultsV3ListRow.tsx
index fb57a4290..e3a859408 100755
--- a/apps/vaults-v3/components/list/VaultsV3ListRow.tsx
+++ b/apps/vaults-v3/components/list/VaultsV3ListRow.tsx
@@ -413,27 +413,21 @@ export function VaultsV3ListRow({currentVault}: {currentVault: TYDaemonVault}):
 					<div
 						className={'yearn--table-data-section-item md:col-span-2'}
 						datatype={'number'}>
-						<label className={'inline text-start text-xs text-neutral-800/60 md:hidden'}>
-							{'Estimated APR'}
-						</label>
+						<p className={'inline text-start text-xs text-neutral-800/60 md:hidden'}>{'Estimated APR'}</p>
 						<VaultForwardAPR currentVault={currentVault} />
 					</div>
 
 					<div
 						className={'yearn--table-data-section-item md:col-span-2'}
 						datatype={'number'}>
-						<label className={'inline text-start text-xs text-neutral-800/60 md:hidden'}>
-							{'Historical APR'}
-						</label>
+						<p className={'inline text-start text-xs text-neutral-800/60 md:hidden'}>{'Historical APR'}</p>
 						<VaultHistoricalAPR currentVault={currentVault} />
 					</div>
 
 					<div
 						className={'yearn--table-data-section-item md:col-span-2'}
 						datatype={'number'}>
-						<label className={'inline text-start text-xs text-neutral-800/60 md:hidden'}>
-							{'Available'}
-						</label>
+						<p className={'inline text-start text-xs text-neutral-800/60 md:hidden'}>{'Available'}</p>
 						<p
 							className={`yearn--table-data-section-item-value ${
 								isZero(availableToDeposit) ? 'text-neutral-400' : 'text-neutral-900'
@@ -450,9 +444,7 @@ export function VaultsV3ListRow({currentVault}: {currentVault: TYDaemonVault}):
 					<div
 						className={'yearn--table-data-section-item md:col-span-2'}
 						datatype={'number'}>
-						<label className={'inline text-start text-xs text-neutral-800/60 md:hidden'}>
-							{'Deposited'}
-						</label>
+						<p className={'inline text-start text-xs text-neutral-800/60 md:hidden'}>{'Deposited'}</p>
 						<p
 							className={`yearn--table-data-section-item-value ${
 								isZero(staked) ? 'text-neutral-400' : 'text-neutral-900'
@@ -469,7 +461,7 @@ export function VaultsV3ListRow({currentVault}: {currentVault: TYDaemonVault}):
 					<div
 						className={'yearn--table-data-section-item md:col-span-2'}
 						datatype={'number'}>
-						<label className={'inline text-start text-xs text-neutral-800/60 md:hidden'}>{'TVL'}</label>
+						<p className={'inline text-start text-xs text-neutral-800/60 md:hidden'}>{'TVL'}</p>
 						<p className={'yearn--table-data-section-item-value'}>
 							<RenderAmount
 								value={currentVault.tvl?.tvl}
diff --git a/apps/vaults/Wrapper.tsx b/apps/vaults/Wrapper.tsx
index aac1cc89d..77068a260 100755
--- a/apps/vaults/Wrapper.tsx
+++ b/apps/vaults/Wrapper.tsx
@@ -1,6 +1,5 @@
 import {type NextRouter} from 'next/router';
 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';
@@ -14,9 +13,7 @@ export function Wrapper({children, router}: {children: ReactElement; router: Nex
 		<div className={'mx-auto my-0 max-w-6xl pt-4 md:mb-0 md:mt-16'}>
 			<Meta meta={manifest} />
 			<AppSettingsContextApp>
-				<WalletForZapAppContextApp>
-					<StakingRewardsContextApp>{children}</StakingRewardsContextApp>
-				</WalletForZapAppContextApp>
+				<WalletForZapAppContextApp>{children}</WalletForZapAppContextApp>
 			</AppSettingsContextApp>
 		</div>
 	);
diff --git a/apps/vaults/components/RewardsTab.tsx b/apps/vaults/components/RewardsTab.tsx
index 0c3f1322c..95cbe8cb1 100644
--- a/apps/vaults/components/RewardsTab.tsx
+++ b/apps/vaults/components/RewardsTab.tsx
@@ -1,12 +1,9 @@
 import {useCallback, useState} from 'react';
-import {useContractRead} from 'wagmi';
-import {useStakingRewards} from '@vaults/contexts/useStakingRewards';
+import {useVaultStakingData} from '@vaults/hooks/useVaultStakingData';
 import {claim as claimAction, stake as stakeAction, unstake as unstakeAction} from '@vaults/utils/actions';
 import {Button} from '@yearn-finance/web-lib/components/Button';
 import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
-import {VAULT_ABI} from '@yearn-finance/web-lib/utils/abi/vault.abi';
 import {toAddress} from '@yearn-finance/web-lib/utils/address';
-import {ZERO_ADDRESS} from '@yearn-finance/web-lib/utils/constants';
 import {toBigInt, toNormalizedBN} from '@yearn-finance/web-lib/utils/format.bigNumber';
 import {formatCounterValue} from '@yearn-finance/web-lib/utils/format.value';
 import {isZero} from '@yearn-finance/web-lib/utils/isZero';
@@ -23,46 +20,24 @@ const DISPLAY_DECIMALS = 10;
 const trimAmount = (amount: string | number): string => Number(Number(amount).toFixed(DISPLAY_DECIMALS)).toString();
 
 export function RewardsTab({currentVault}: {currentVault: TYDaemonVault}): ReactElement {
-	const {provider, address, isActive} = useWeb3();
+	const {provider, isActive} = useWeb3();
 	const {refresh: refreshBalances} = useWallet();
-	const {
-		stakingRewardsByVault,
-		stakingRewardsMap,
-		positionsMap,
-		refresh: refreshStakingRewards
-	} = useStakingRewards();
-	const stakingRewardsAddress = stakingRewardsByVault[currentVault.address];
-	const stakingRewards = stakingRewardsAddress ? stakingRewardsMap[stakingRewardsAddress] : undefined;
-	const stakingRewardsPosition = stakingRewardsAddress ? positionsMap[stakingRewardsAddress] : undefined;
+	const [stakingRewards, updateStakingRewards] = useVaultStakingData({currentVault});
 	const vaultToken = useToken({address: currentVault.address, chainID: currentVault.chainID});
-	const rewardTokenBalance = useToken({
-		address: toAddress(stakingRewards?.rewardsToken),
-		chainID: currentVault.chainID
-	});
+	const rewardTokenBalance = useToken({address: stakingRewards.rewardsToken, chainID: currentVault.chainID});
+	const normalizedStakeBalance = toNormalizedBN(stakingRewards.balanceOf, rewardTokenBalance.decimals);
+	const normalizedRewardBalance = toNormalizedBN(stakingRewards.earned, rewardTokenBalance.decimals);
+
 	const [approveStakeStatus, set_approveStakeStatus] = useState(defaultTxStatus);
 	const [stakeStatus, set_stakeStatus] = useState(defaultTxStatus);
 	const [claimStatus, set_claimStatus] = useState(defaultTxStatus);
 	const [unstakeStatus, set_unstakeStatus] = useState(defaultTxStatus);
-	const stakeBalance = toNormalizedBN(toBigInt(stakingRewardsPosition?.stake), currentVault.decimals);
-	const rewardBalance = toNormalizedBN(toBigInt(stakingRewardsPosition?.reward), rewardTokenBalance.decimals);
 
-	const {
-		data: allowance,
-		isLoading,
-		refetch
-	} = useContractRead({
-		address: currentVault.address,
-		abi: VAULT_ABI,
-		chainId: currentVault.chainID,
-		functionName: 'allowance',
-		args: [toAddress(address), toAddress(stakingRewards?.address)],
-		enabled: toAddress(stakingRewards?.address) !== ZERO_ADDRESS
-	});
-	const isApproved = toBigInt(allowance) >= vaultToken.balance.raw;
+	const isApproved = toBigInt(stakingRewards.allowance) >= vaultToken.balance.raw;
 
 	const refreshData = useCallback(async (): Promise<void> => {
-		await Promise.all([refreshBalances(), refreshStakingRewards()]);
-	}, [refreshBalances, refreshStakingRewards]);
+		await Promise.all([refreshBalances(), updateStakingRewards()]);
+	}, [refreshBalances, updateStakingRewards]);
 
 	const onApprove = useCallback(async (): Promise<void> => {
 		const result = await approveERC20({
@@ -74,14 +49,14 @@ export function RewardsTab({currentVault}: {currentVault: TYDaemonVault}): React
 			statusHandler: set_approveStakeStatus
 		});
 		if (result.isSuccessful) {
-			refetch();
+			updateStakingRewards();
 		}
-	}, [currentVault.address, provider, refetch, stakingRewards?.address, vaultToken.balance.raw]);
+	}, [currentVault, provider, updateStakingRewards, stakingRewards?.address, vaultToken.balance.raw]);
 
 	const onStake = useCallback(async (): Promise<void> => {
 		const result = await stakeAction({
 			connector: provider,
-			chainID: currentVault.chainID,
+			chainID: vaultToken.chainID,
 			contractAddress: toAddress(stakingRewards?.address),
 			amount: vaultToken.balance.raw,
 			statusHandler: set_stakeStatus
@@ -89,7 +64,7 @@ export function RewardsTab({currentVault}: {currentVault: TYDaemonVault}): React
 		if (result.isSuccessful) {
 			refreshData();
 		}
-	}, [provider, refreshData, stakingRewards?.address, vaultToken.balance.raw]);
+	}, [provider, refreshData, stakingRewards?.address, vaultToken]);
 
 	const onUnstake = useCallback(async (): Promise<void> => {
 		const result = await unstakeAction({
@@ -101,7 +76,7 @@ export function RewardsTab({currentVault}: {currentVault: TYDaemonVault}): React
 		if (result.isSuccessful) {
 			refreshData();
 		}
-	}, [provider, refreshData, stakingRewards?.address]);
+	}, [provider, refreshData, stakingRewards?.address, currentVault.chainID]);
 
 	const onClaim = useCallback(async (): Promise<void> => {
 		const result = await claimAction({
@@ -113,89 +88,103 @@ export function RewardsTab({currentVault}: {currentVault: TYDaemonVault}): React
 		if (result.isSuccessful) {
 			refreshData();
 		}
-	}, [provider, refreshData, stakingRewards?.address]);
+	}, [provider, refreshData, stakingRewards?.address, currentVault.chainID]);
 
 	return (
-		<div className={'flex flex-col gap-6 bg-neutral-100 p-4 md:gap-10 md:p-8'}>
-			<div className={'flex flex-col gap-4'}>
-				<div>
-					<div className={'font-bold'}>{'Stake'}</div>
-					<div className={'mt-2 text-neutral-600'}>
-						<p>{'Stake your yVault tokens for additional $OP rewards.'}</p>
+		<>
+			<div className={'flex flex-col gap-6 bg-neutral-100 p-4 md:gap-10 md:p-8'}>
+				<div className={'flex flex-col gap-4'}>
+					<div>
+						<div className={'font-bold'}>{'Stake'}</div>
+						<div className={'mt-2 text-neutral-600'}>
+							<p>{'Stake your yVault tokens for additional $OP rewards.'}</p>
+						</div>
 					</div>
-				</div>
-				<div className={'flex flex-col gap-4 md:flex-row'}>
-					<Input
-						className={'w-full md:w-[216px]'}
-						label={'You have unstaked'}
-						legend={formatCounterValue(vaultToken.balance.normalized, Number(vaultToken.price.normalized))}
-						value={`${trimAmount(vaultToken.balance.normalized)} ${currentVault.symbol}`}
-						isDisabled
-					/>
-					<Button
-						className={'w-full md:mt-7 md:w-[168px]'}
-						onClick={(): unknown => (isApproved ? onStake() : onApprove())}
-						isBusy={stakeStatus.pending || approveStakeStatus.pending || isLoading}
-						isDisabled={!isActive || isLoading || Number(vaultToken.balance.normalized) <= 0}>
-						{isApproved ? 'Stake' : 'Approve'}
-					</Button>
-				</div>
-			</div>
-			<div className={'flex flex-col gap-4'}>
-				<div>
-					<div className={'font-bold'}>{'Claim'}</div>
-					<div className={'mt-2 text-neutral-600'}>
-						<p>{"Claim your staking rewards here. You've earned it anon."}</p>
+					<div className={'flex flex-col gap-4 md:flex-row'}>
+						<Input
+							className={'w-full md:w-1/3'}
+							label={'You have unstaked'}
+							legend={formatCounterValue(
+								vaultToken.balance.normalized,
+								Number(vaultToken.price.normalized)
+							)}
+							value={`${trimAmount(vaultToken.balance.normalized)} ${currentVault.symbol}`}
+							isDisabled
+						/>
+						<Button
+							className={'w-full md:mt-7 md:w-[200px]'}
+							onClick={(): unknown => (isApproved ? onStake() : onApprove())}
+							isBusy={stakeStatus.pending || approveStakeStatus.pending}
+							isDisabled={
+								!isActive ||
+								Number(vaultToken.balance.normalized) <= 0 ||
+								stakingRewards.allowance > vaultToken.balance.raw
+							}>
+							{isApproved ? 'Stake' : 'Approve'}
+						</Button>
 					</div>
 				</div>
-				<div className={'flex flex-col gap-4 md:flex-row'}>
-					<Input
-						className={'w-full md:w-[216px]'}
-						label={'You have unclaimed'}
-						legend={formatCounterValue(
-							rewardBalance.normalized,
-							Number(rewardTokenBalance.price.normalized)
-						)}
-						value={`${trimAmount(rewardBalance.normalized)} ${rewardTokenBalance.symbol || 'yvOP'}`}
-						isDisabled
-					/>
-					<Button
-						className={'w-full md:mt-7 md:w-[168px]'}
-						onClick={onClaim}
-						isBusy={claimStatus.pending}
-						isDisabled={!isActive || isZero(rewardBalance.raw)}>
-						{'Claim'}
-					</Button>
-				</div>
-			</div>
-			<div className={'flex flex-col gap-4'}>
-				<div>
-					<div className={'font-bold'}>{'Unstake'}</div>
-					<div className={'mt-2 text-neutral-600'}>
-						<p>
-							{
-								'Unstake your yVault tokens and your remaining $OP rewards will be claimed automatically. Boom.'
-							}
-						</p>
+				<div className={'flex flex-col gap-4'}>
+					<div>
+						<div className={'font-bold'}>{'Claim'}</div>
+						<div className={'mt-2 text-neutral-600'}>
+							<p>{"Claim your staking rewards here. You've earned it anon."}</p>
+						</div>
+					</div>
+					<div className={'flex flex-col gap-4 md:flex-row'}>
+						<Input
+							className={'w-full md:w-1/3'}
+							label={'You have unclaimed'}
+							legend={formatCounterValue(
+								normalizedRewardBalance.normalized,
+								Number(rewardTokenBalance.price.normalized)
+							)}
+							value={`${trimAmount(normalizedRewardBalance.normalized)} ${
+								rewardTokenBalance.symbol || 'yvOP'
+							}`}
+							isDisabled
+						/>
+						<Button
+							className={'w-full md:mt-7 md:w-[200px]'}
+							onClick={onClaim}
+							isBusy={claimStatus.pending}
+							isDisabled={!isActive || isZero(normalizedRewardBalance.raw)}>
+							{'Claim'}
+						</Button>
 					</div>
 				</div>
-				<div className={'flex flex-col gap-4 md:flex-row'}>
-					<Input
-						className={'w-full md:w-[216px]'}
-						label={'You have staked'}
-						legend={formatCounterValue(stakeBalance.normalized, Number(vaultToken.price.normalized))}
-						value={`${trimAmount(stakeBalance.normalized)} ${currentVault.symbol}`}
-						isDisabled
-					/>
-					<Button
-						className={'w-full md:mt-7 md:w-[168px]'}
-						onClick={onUnstake}
-						isBusy={unstakeStatus.pending}
-						isDisabled={!isActive || Number(stakeBalance.normalized) <= 0}>
-						{'Unstake + Claim'}
-					</Button>
+				<div className={'flex flex-col gap-4'}>
+					<div>
+						<div className={'font-bold'}>{'Unstake'}</div>
+						<div className={'mt-2 text-neutral-600'}>
+							<p>
+								{
+									'Unstake your yVault tokens and your remaining $OP rewards will be claimed automatically. Boom.'
+								}
+							</p>
+						</div>
+					</div>
+					<div className={'flex flex-col gap-4 md:flex-row'}>
+						<Input
+							className={'w-full md:w-1/3'}
+							label={'You have staked'}
+							legend={formatCounterValue(
+								normalizedStakeBalance.normalized,
+								Number(vaultToken.price.normalized)
+							)}
+							value={`${trimAmount(normalizedStakeBalance.normalized)} ${currentVault.symbol}`}
+							isDisabled
+						/>
+						<Button
+							className={'w-full md:mt-7 md:w-[200px]'}
+							onClick={onUnstake}
+							isBusy={unstakeStatus.pending}
+							isDisabled={!isActive || Number(normalizedStakeBalance.normalized) <= 0}>
+							{'Unstake + Claim'}
+						</Button>
+					</div>
 				</div>
 			</div>
-		</div>
+		</>
 	);
 }
diff --git a/apps/vaults/components/SettingsPopover.tsx b/apps/vaults/components/SettingsPopover.tsx
index 9f8048bab..9833e8243 100755
--- a/apps/vaults/components/SettingsPopover.tsx
+++ b/apps/vaults/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 {Switch} from '@common/components/Switch';
@@ -35,10 +35,8 @@ export function SettingsPopover({vault}: TSettingPopover): ReactElement {
 		isStakingOpBoostedVaults,
 		set_isStakingOpBoostedVaults
 	} = useYearn();
-	const {stakingRewardsByVault} = useStakingRewards();
-
 	const {address, chainID} = vault;
-	const hasStakingRewards = !!stakingRewardsByVault?.[address];
+	const hasStakingRewards = !!STACKING_TO_VAULT?.[address];
 
 	const currentZapProvider = useMemo((): TSolver => {
 		if (chainID !== 1 && zapProvider === 'Cowswap') {
@@ -68,7 +66,7 @@ export function SettingsPopover({vault}: TSettingPopover): ReactElement {
 							<div className={'yearn--shadow'}>
 								<div className={'relative bg-neutral-0 p-4'}>
 									<div className={'mb-6 flex flex-col space-y-1'}>
-										<Label>{'Zap Provider'}</Label>
+										<p>{'Zap Provider'}</p>
 										<select
 											id={'zapProvider'}
 											onChange={(e): void => set_zapProvider(e.target.value as TSolver)}
diff --git a/apps/vaults/components/details/VaultActionsTabsWrapper.tsx b/apps/vaults/components/details/VaultActionsTabsWrapper.tsx
index 97c58144a..49132c04f 100755
--- a/apps/vaults/components/details/VaultActionsTabsWrapper.tsx
+++ b/apps/vaults/components/details/VaultActionsTabsWrapper.tsx
@@ -10,14 +10,8 @@ import {VaultDetailsQuickActionsTo} from '@vaults/components/details/actions/Qui
 import {RewardsTab} from '@vaults/components/RewardsTab';
 import {SettingsPopover} from '@vaults/components/SettingsPopover';
 import {Flow, useActionFlow} from '@vaults/contexts/useActionFlow';
-import {useStakingRewards} from '@vaults/contexts/useStakingRewards';
-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 {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,16 +50,8 @@ 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,
@@ -75,12 +59,7 @@ export function VaultActionsTabsWrapper({currentVault}: {currentVault: TYDaemonV
 			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);
@@ -244,19 +223,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} />
 				) : (
@@ -268,7 +234,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/components/details/VaultDetailsHeader.tsx b/apps/vaults/components/details/VaultDetailsHeader.tsx
index 5f672aee7..ccc008fb1 100755
--- a/apps/vaults/components/details/VaultDetailsHeader.tsx
+++ b/apps/vaults/components/details/VaultDetailsHeader.tsx
@@ -1,5 +1,4 @@
 import {useMemo} from 'react';
-import {useStakingRewards} from '@vaults/contexts/useStakingRewards';
 import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
 import {toAddress} from '@yearn-finance/web-lib/utils/address';
 import {toBigInt, toNormalizedBN} from '@yearn-finance/web-lib/utils/format.bigNumber';
@@ -97,12 +96,13 @@ function VaultAPR({apr}: {apr: TYDaemonVault['apr']}): ReactElement {
 }
 
 export function VaultDetailsHeader({currentVault}: {currentVault: TYDaemonVault}): ReactElement {
-	const {address: userAddress} = useWeb3();
+	const {address} = useWeb3();
 	const {yDaemonBaseUri} = useYDaemonBaseURI({chainID: currentVault.chainID});
-	const {address, apr, tvl, decimals, symbol = 'token', token} = currentVault;
+	const {apr, tvl, decimals, symbol = 'token', token} = currentVault;
 
 	const {data: earned} = useFetch<TYDaemonEarnedSingle>({
-		endpoint: address && userAddress ? `${yDaemonBaseUri}/earned/${userAddress}/${currentVault.address}` : null,
+		endpoint:
+			currentVault.address && address ? `${yDaemonBaseUri}/earned/${address}/${currentVault.address}` : null,
 		schema: yDaemonSingleEarnedSchema
 	});
 
@@ -110,14 +110,15 @@ export function VaultDetailsHeader({currentVault}: {currentVault: TYDaemonVault}
 		const {unrealizedGains} = earned?.earned?.[toAddress(currentVault.address)] || {};
 		const value = toBigInt(unrealizedGains);
 		return toNormalizedBN(value < 0n ? 0n : value);
-	}, [earned?.earned, address]);
+	}, [earned?.earned, currentVault.address]);
 
-	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
@@ -130,9 +131,9 @@ export function VaultDetailsHeader({currentVault}: {currentVault: TYDaemonVault}
 				&nbsp;{vaultName}&nbsp;
 			</b>
 			<div className={'mb-10 mt-4 md:mb-14 md:mt-10'}>
-				{address ? (
-					<button onClick={(): void => copyToClipboard(address)}>
-						<p className={'font-number text-xxs text-neutral-500 md:text-xs'}>{address}</p>
+				{currentVault.address ? (
+					<button onClick={(): void => copyToClipboard(currentVault.address)}>
+						<p className={'font-number text-xxs text-neutral-500 md:text-xs'}>{currentVault.address}</p>
 					</button>
 				) : (
 					<p className={'text-xxs text-neutral-500 md:text-xs'}>&nbsp;</p>
diff --git a/apps/vaults/components/details/actions/QuickActionsButtons.tsx b/apps/vaults/components/details/actions/QuickActionsButtons.tsx
index 942c84c74..cc5e0f739 100644
--- a/apps/vaults/components/details/actions/QuickActionsButtons.tsx
+++ b/apps/vaults/components/details/actions/QuickActionsButtons.tsx
@@ -1,7 +1,6 @@
 import {useCallback, useState} from 'react';
 import {useActionFlow} from '@vaults/contexts/useActionFlow';
 import {useSolver} from '@vaults/contexts/useSolver';
-import {useStakingRewards} from '@vaults/contexts/useStakingRewards';
 import {useWalletForZap} from '@vaults/contexts/useWalletForZaps';
 import {Button} from '@yearn-finance/web-lib/components/Button';
 import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
@@ -23,7 +22,6 @@ import type {TYDaemonVault} from '@common/schemas/yDaemonVaultsSchemas';
 export function VaultDetailsQuickActionsButtons({currentVault}: {currentVault: TYDaemonVault}): ReactElement {
 	const {refresh} = useWallet();
 	const {refresh: refreshZapBalances} = useWalletForZap();
-	const {refresh: refreshStakingRewards} = useStakingRewards();
 	const {address, provider} = useWeb3();
 	const {isStakingOpBoostedVaults} = useYearn();
 	const [txStatusApprove, set_txStatusApprove] = useState(defaultTxStatus);
@@ -53,6 +51,7 @@ export function VaultDetailsQuickActionsButtons({currentVault}: {currentVault: T
 	}, [address, onRetrieveAllowance, hash]);
 
 	const onSuccess = useCallback(async (): Promise<void> => {
+		const {chainID} = currentVault;
 		onChangeAmount(toNormalizedBN(0));
 		if (
 			Solver.enum.Vanilla === currentSolver ||
@@ -61,19 +60,15 @@ export function VaultDetailsQuickActionsButtons({currentVault}: {currentVault: T
 			Solver.enum.OptimismBooster === currentSolver ||
 			Solver.enum.InternalMigration === currentSolver
 		) {
-			await refresh([
-				{
-					address: toAddress(actionParams?.selectedOptionFrom?.value),
-					chainID: currentVault.chainID
-				},
-				{
-					address: toAddress(actionParams?.selectedOptionTo?.value),
-					chainID: currentVault.chainID
-				}
-			]);
-			if (Solver.enum.OptimismBooster === currentSolver) {
-				await refreshStakingRewards();
+			const toRefresh = [
+				{address: toAddress(actionParams?.selectedOptionFrom?.value), chainID},
+				{address: toAddress(actionParams?.selectedOptionTo?.value), chainID},
+				{address: toAddress(currentVault.address), chainID}
+			];
+			if (currentVault.staking.available) {
+				toRefresh.push({address: toAddress(currentVault.staking.address), chainID});
 			}
+			await refresh(toRefresh);
 		} else if (
 			Solver.enum.Cowswap === currentSolver ||
 			Solver.enum.Portals === currentSolver ||
@@ -82,44 +77,23 @@ export function VaultDetailsQuickActionsButtons({currentVault}: {currentVault: T
 			if (isDepositing) {
 				//refresh input from zap wallet, refresh output from default
 				await Promise.all([
-					refreshZapBalances([
-						{
-							address: toAddress(actionParams?.selectedOptionFrom?.value),
-							chainID: currentVault.chainID
-						}
-					]),
-					refresh([
-						{
-							address: toAddress(actionParams?.selectedOptionTo?.value),
-							chainID: currentVault.chainID
-						}
-					])
+					refreshZapBalances([{address: toAddress(actionParams?.selectedOptionFrom?.value), chainID}]),
+					refresh([{address: toAddress(actionParams?.selectedOptionTo?.value), chainID}])
 				]);
 			} else {
 				await Promise.all([
-					refreshZapBalances([
-						{
-							address: toAddress(actionParams?.selectedOptionTo?.value),
-							chainID: currentVault.chainID
-						}
-					]),
-					refresh([
-						{
-							address: toAddress(actionParams?.selectedOptionFrom?.value),
-							chainID: currentVault.chainID
-						}
-					])
+					refreshZapBalances([{address: toAddress(actionParams?.selectedOptionTo?.value), chainID}]),
+					refresh([{address: toAddress(actionParams?.selectedOptionFrom?.value), chainID}])
 				]);
 			}
 		}
 	}, [
 		onChangeAmount,
 		currentSolver,
-		refresh,
+		currentVault,
 		actionParams?.selectedOptionFrom?.value,
 		actionParams?.selectedOptionTo?.value,
-		currentVault.chainID,
-		refreshStakingRewards,
+		refresh,
 		isDepositing,
 		refreshZapBalances
 	]);
diff --git a/apps/vaults/components/details/actions/QuickActionsFrom.tsx b/apps/vaults/components/details/actions/QuickActionsFrom.tsx
index 3ee8ad76d..b52d8beb5 100644
--- a/apps/vaults/components/details/actions/QuickActionsFrom.tsx
+++ b/apps/vaults/components/details/actions/QuickActionsFrom.tsx
@@ -56,7 +56,7 @@ export function VaultDetailsQuickActionsFrom(): ReactElement {
 				)
 			);
 		},
-		[actionParams?.selectedOptionFrom?.value, getToken, onChangeAmount]
+		[actionParams?.selectedOptionFrom, getToken, onChangeAmount]
 	);
 
 	return (
@@ -65,9 +65,7 @@ export function VaultDetailsQuickActionsFrom(): ReactElement {
 			className={'flex w-full flex-col space-x-0 md:flex-row md:space-x-4'}>
 			<div className={'relative z-10 w-full space-y-2'}>
 				<div className={'flex flex-row items-baseline justify-between'}>
-					<label className={'text-base text-neutral-600'}>
-						{isDepositing ? 'From wallet' : 'From vault'}
-					</label>
+					<p className={'text-base text-neutral-600'}>{isDepositing ? 'From wallet' : 'From vault'}</p>
 					<legend
 						className={'font-number inline text-xs text-neutral-600 md:hidden'}
 						suppressHydrationWarning>
diff --git a/apps/vaults/components/details/actions/QuickActionsSwitch.tsx b/apps/vaults/components/details/actions/QuickActionsSwitch.tsx
index e5ea3a79c..cd5eadc86 100644
--- a/apps/vaults/components/details/actions/QuickActionsSwitch.tsx
+++ b/apps/vaults/components/details/actions/QuickActionsSwitch.tsx
@@ -5,8 +5,7 @@ import type {ReactElement} from 'react';
 export function VaultDetailsQuickActionsSwitch(): ReactElement {
 	return (
 		<div className={'mx-auto flex w-full justify-center space-y-0 md:mx-none md:block md:w-14 md:space-y-2'}>
-			<label className={'hidden text-base md:inline'}>&nbsp;</label>
-
+			<p className={'hidden text-base md:inline'}>&nbsp;</p>
 			<div className={'flex h-6 w-6 rotate-90 items-center justify-center p-0 md:h-10 md:w-14 md:rotate-0'}>
 				<span className={'sr-only'}>{'Deposit / Withdraw'}</span>
 				<IconArrowRight className={'w-4 text-neutral-900 md:w-[25px]'} />
diff --git a/apps/vaults/components/details/actions/QuickActionsTo.tsx b/apps/vaults/components/details/actions/QuickActionsTo.tsx
index 835eb1dc5..bc97d29ff 100644
--- a/apps/vaults/components/details/actions/QuickActionsTo.tsx
+++ b/apps/vaults/components/details/actions/QuickActionsTo.tsx
@@ -34,9 +34,9 @@ export function VaultDetailsQuickActionsTo(): ReactElement {
 			className={'flex w-full flex-col space-x-0 md:flex-row md:space-x-4'}>
 			<div className={'relative z-10 w-full space-y-2'}>
 				<div className={'flex flex-row items-baseline justify-between'}>
-					<label className={'text-base text-neutral-600'}>
+					<p className={'text-base text-neutral-600'}>
 						{isDepositing || isMigrationAvailable ? 'To vault' : 'To wallet'}
-					</label>
+					</p>
 					<legend
 						className={'font-number inline text-xs text-neutral-600 md:hidden'}
 						suppressHydrationWarning>
diff --git a/apps/vaults/components/details/tabs/VaultDetailsStrategies.tsx b/apps/vaults/components/details/tabs/VaultDetailsStrategies.tsx
index 752bad79f..9f689d116 100755
--- a/apps/vaults/components/details/tabs/VaultDetailsStrategies.tsx
+++ b/apps/vaults/components/details/tabs/VaultDetailsStrategies.tsx
@@ -77,7 +77,7 @@ function VaultDetailsStrategy({currentVault, strategy}: TProps): ReactElement {
 		<details className={'p-0'}>
 			<summary>
 				<div>
-					<b className={'text-neutral-900'}>{strategy.displayName || strategy.name}</b>
+					<b className={'text-neutral-900'}>{strategy.name}</b>
 				</div>
 				<div>
 					<IconChevron className={'summary-chevron'} />
@@ -217,7 +217,7 @@ export function VaultDetailsStrategies({currentVault}: {currentVault: TYDaemonVa
 				if (!searchValue) {
 					return true;
 				}
-				return `${strategy.name} ${strategy.displayName}`.toLowerCase().includes(searchValue);
+				return strategy.name.toLowerCase().includes(searchValue);
 			})
 			.filter((strategy): boolean => {
 				if (!shouldDisplayInactiveStrategies) {
diff --git a/apps/vaults/components/list/VaultListOptions.tsx b/apps/vaults/components/list/VaultListOptions.tsx
index a1ca780f1..2653ce57a 100644
--- a/apps/vaults/components/list/VaultListOptions.tsx
+++ b/apps/vaults/components/list/VaultListOptions.tsx
@@ -34,7 +34,7 @@ export function VaultListOptions(props: TVautListOptions): ReactElement {
 							}>
 							<div className={'yearn--shadow overflow-hidden'}>
 								<div className={cl(props.panelClassName, 'relative bg-neutral-0')}>
-									<label
+									<div
 										className={
 											'flex cursor-pointer items-center justify-between p-4 transition-colors hover:bg-neutral-100/40'
 										}>
@@ -43,9 +43,9 @@ export function VaultListOptions(props: TVautListOptions): ReactElement {
 											isEnabled={shouldHideDust}
 											onSwitch={onSwitchHideDust}
 										/>
-									</label>
+									</div>
 
-									<label
+									<div
 										className={
 											'flex cursor-pointer items-center justify-between p-4 transition-colors hover:bg-neutral-100/40'
 										}>
@@ -54,7 +54,7 @@ export function VaultListOptions(props: TVautListOptions): ReactElement {
 											isEnabled={shouldHideLowTVLVaults}
 											onSwitch={onSwitchHideLowTVLVaults}
 										/>
-									</label>
+									</div>
 								</div>
 							</div>
 						</Popover.Panel>
diff --git a/apps/vaults/components/list/VaultsListRow.tsx b/apps/vaults/components/list/VaultsListRow.tsx
index a4f815fdf..53ec700c8 100755
--- a/apps/vaults/components/list/VaultsListRow.tsx
+++ b/apps/vaults/components/list/VaultsListRow.tsx
@@ -386,23 +386,21 @@ export function VaultsListRow({currentVault}: {currentVault: TYDaemonVault}): Re
 					<div
 						className={'yearn--table-data-section-item md:col-span-2'}
 						datatype={'number'}>
-						<label className={'yearn--table-data-section-item-label !font-aeonik'}>{'Estimated APR'}</label>
+						<p className={'yearn--table-data-section-item-label !font-aeonik'}>{'Estimated APR'}</p>
 						<VaultForwardAPR currentVault={currentVault} />
 					</div>
 
 					<div
 						className={'yearn--table-data-section-item md:col-span-2'}
 						datatype={'number'}>
-						<label className={'yearn--table-data-section-item-label !font-aeonik'}>
-							{'Historical APR'}
-						</label>
+						<p className={'yearn--table-data-section-item-label !font-aeonik'}>{'Historical APR'}</p>
 						<VaultHistoricalAPR currentVault={currentVault} />
 					</div>
 
 					<div
 						className={'yearn--table-data-section-item md:col-span-2'}
 						datatype={'number'}>
-						<label className={'yearn--table-data-section-item-label !font-aeonik'}>{'Available'}</label>
+						<p className={'yearn--table-data-section-item-label !font-aeonik'}>{'Available'}</p>
 						<p
 							className={`yearn--table-data-section-item-value ${
 								isZero(availableToDeposit) ? 'text-neutral-400' : 'text-neutral-900'
@@ -419,7 +417,7 @@ export function VaultsListRow({currentVault}: {currentVault: TYDaemonVault}): Re
 					<div
 						className={'yearn--table-data-section-item md:col-span-2'}
 						datatype={'number'}>
-						<label className={'yearn--table-data-section-item-label !font-aeonik'}>{'Deposited'}</label>
+						<p className={'yearn--table-data-section-item-label !font-aeonik'}>{'Deposited'}</p>
 						<p
 							className={`yearn--table-data-section-item-value ${
 								isZero(staked) ? 'text-neutral-400' : 'text-neutral-900'
@@ -436,7 +434,7 @@ export function VaultsListRow({currentVault}: {currentVault: TYDaemonVault}): Re
 					<div
 						className={'yearn--table-data-section-item md:col-span-2'}
 						datatype={'number'}>
-						<label className={'yearn--table-data-section-item-label !font-aeonik'}>{'TVL'}</label>
+						<p className={'yearn--table-data-section-item-label !font-aeonik'}>{'TVL'}</p>
 						<p className={'yearn--table-data-section-item-value'}>
 							<RenderAmount
 								value={currentVault.tvl?.tvl}
diff --git a/apps/vaults/contexts/useActionFlow.tsx b/apps/vaults/contexts/useActionFlow.tsx
index eae9170d0..1c8a5aa61 100644
--- a/apps/vaults/contexts/useActionFlow.tsx
+++ b/apps/vaults/contexts/useActionFlow.tsx
@@ -2,7 +2,7 @@ import {createContext, useCallback, useContext, useEffect, useMemo, useReducer,
 import {useRouter} from 'next/router';
 import {useContractReads} from 'wagmi';
 import {useMountEffect, useUpdateEffect} from '@react-hookz/web';
-import {useStakingRewards} from '@vaults/contexts/useStakingRewards';
+import {STACKING_TO_VAULT} from '@vaults/constants/optRewards';
 import {useWalletForZap} from '@vaults/contexts/useWalletForZaps';
 import {VAULT_V3_ABI} from '@vaults/utils/abi/vaultV3.abi';
 import {setZapOption} from '@vaults/utils/zapOptions';
@@ -153,8 +153,7 @@ export function ActionFlowContextApp({
 	const {getBalance} = useWallet();
 	const {listTokens: listZapTokens, tokensList} = useWalletForZap();
 	const {zapProvider, isStakingOpBoostedVaults} = useYearn();
-	const {stakingRewardsByVault} = useStakingRewards();
-	const hasStakingRewards = !!stakingRewardsByVault[currentVault.address];
+	const hasStakingRewards = !!STACKING_TO_VAULT[currentVault.address];
 	const [possibleOptionsFrom, set_possibleOptionsFrom] = useState<TDropdownOption[]>([]);
 	const [possibleZapOptionsFrom, set_possibleZapOptionsFrom] = useState<TDropdownOption[]>([]);
 	const [possibleOptionsTo, set_possibleOptionsTo] = useState<TDropdownOption[]>([]);
diff --git a/apps/vaults/contexts/useStakingRewards.tsx b/apps/vaults/contexts/useStakingRewards.tsx
deleted file mode 100644
index 836d1c8a1..000000000
--- a/apps/vaults/contexts/useStakingRewards.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import {createContext, memo, useCallback, useContext, useMemo, useState} from 'react';
-import {OPT_STAKING_REWARD_SUPPORTED_NETWORK} from '@vaults/constants';
-import {STACKING_TO_VAULT, VAULT_TO_STACKING} from '@vaults/constants/optRewards';
-import {STAKING_REWARDS_ABI} from '@vaults/utils/abi/stakingRewards.abi';
-import {STAKING_REWARDS_REGISTRY_ABI} from '@vaults/utils/abi/stakingRewardsRegistry.abi';
-import {multicall} from '@wagmi/core';
-import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
-import {toAddress} from '@yearn-finance/web-lib/utils/address';
-import {STAKING_REWARDS_REGISTRY_ADDRESS} from '@yearn-finance/web-lib/utils/constants';
-import {decodeAsBigInt, decodeAsString} from '@yearn-finance/web-lib/utils/decoder';
-import {useAsyncTrigger} from '@common/hooks/useAsyncEffect';
-import {keyBy} from '@common/utils';
-
-import type {ReactElement} from 'react';
-import type {TAddress, TDict} from '@yearn-finance/web-lib/types';
-
-export type TStakingRewards = {
-	address: TAddress;
-	stakingToken: TAddress;
-	rewardsToken: TAddress;
-	totalStaked: bigint;
-};
-export type TStakePosition = {
-	address: TAddress;
-	stake: bigint;
-	reward: bigint;
-};
-export type TStakingRewardsContext = {
-	stakingRewardsByVault: TDict<TAddress | undefined>;
-	stakingRewardsMap: TDict<TStakingRewards | undefined>;
-	positionsMap: TDict<TStakePosition | undefined>;
-	refresh: () => void;
-};
-const defaultProps: TStakingRewardsContext = {
-	stakingRewardsByVault: {},
-	stakingRewardsMap: {},
-	positionsMap: {},
-	refresh: (): void => undefined
-};
-
-const StakingRewardsContext = createContext<TStakingRewardsContext>(defaultProps);
-export const StakingRewardsContextApp = memo(function StakingRewardsContextApp({
-	children
-}: {
-	children: ReactElement;
-}): ReactElement {
-	const {address: userAddress, isActive} = useWeb3();
-	const [stakingRewards, set_stakingRewards] = useState<TStakingRewards[]>([]);
-	const [positions, set_positions] = useState<TStakePosition[]>([]);
-
-	const stakingRewardsFetcher = useAsyncTrigger(async (): Promise<void> => {
-		const stakingPoolCalls = [];
-		const stackingAddresses = Object.values(VAULT_TO_STACKING);
-		for (const stackingAddress of stackingAddresses) {
-			stakingPoolCalls.push({
-				address: STAKING_REWARDS_REGISTRY_ADDRESS,
-				abi: STAKING_REWARDS_REGISTRY_ABI,
-				chainId: OPT_STAKING_REWARD_SUPPORTED_NETWORK,
-				functionName: 'stakingPool',
-				args: [stackingAddress]
-			});
-		}
-		const stakingRewardsAddresses = await multicall({
-			contracts: stakingPoolCalls,
-			chainId: OPT_STAKING_REWARD_SUPPORTED_NETWORK
-		});
-
-		/* 🔵 - Yearn Finance **********************************************************************
-		 ** For each stakingRewardsAddresses, grab the info in a multicall
-		 ******************************************************************************************/
-		const _stackingRewards: TStakingRewards[] = [];
-		for (const stakingRewardsAddress of stakingRewardsAddresses) {
-			if (stakingRewardsAddress.status === 'success') {
-				const address = decodeAsString(stakingRewardsAddress);
-				const baseStackingContract = {
-					address: toAddress(address),
-					abi: STAKING_REWARDS_ABI,
-					chainId: OPT_STAKING_REWARD_SUPPORTED_NETWORK
-				};
-				const results = await multicall({
-					contracts: [
-						{...baseStackingContract, functionName: 'stakingToken'},
-						{...baseStackingContract, functionName: 'rewardsToken'},
-						{...baseStackingContract, functionName: 'totalSupply'}
-					],
-					chainId: OPT_STAKING_REWARD_SUPPORTED_NETWORK
-				});
-
-				const stakingToken = decodeAsString(results[0]);
-				const rewardsToken = decodeAsString(results[1]);
-				const totalSupply = decodeAsBigInt(results[2]);
-				_stackingRewards.push({
-					address: toAddress(address),
-					stakingToken: toAddress(stakingToken),
-					rewardsToken: toAddress(rewardsToken),
-					totalStaked: totalSupply
-				});
-			}
-		}
-
-		set_stakingRewards(_stackingRewards);
-	}, []);
-
-	const positionsFetcher = useAsyncTrigger(async (): Promise<void> => {
-		if (!stakingRewards || !isActive || !userAddress) {
-			return;
-		}
-		/* 🔵 - Yearn Finance **********************************************************************
-		 ** Retrieve the number of tokens in the registry, and for each token retrieve it's address
-		 ** so we can proceed
-		 ******************************************************************************************/
-		const calls = [];
-		for (const {address} of stakingRewards) {
-			const baseContract = {
-				address,
-				abi: STAKING_REWARDS_ABI,
-				chainId: OPT_STAKING_REWARD_SUPPORTED_NETWORK
-			} as const;
-			calls.push({
-				...baseContract,
-				functionName: 'balanceOf',
-				args: [userAddress]
-			});
-			calls.push({
-				...baseContract,
-				functionName: 'earned',
-				args: [userAddress]
-			});
-		}
-		const results = await multicall({contracts: calls, chainId: OPT_STAKING_REWARD_SUPPORTED_NETWORK});
-
-		let resultIndex = 0;
-		const positionPromises = [];
-		for (const {address} of stakingRewards) {
-			const stake = decodeAsBigInt(results[resultIndex++]);
-			const reward = decodeAsBigInt(results[resultIndex++]);
-			positionPromises.push({address, stake, reward});
-		}
-
-		set_positions(positionPromises);
-	}, [stakingRewards, isActive, userAddress]);
-
-	const positionsMap = useMemo((): TDict<TStakePosition | undefined> => {
-		return keyBy(positions ?? [], 'address');
-	}, [positions]);
-
-	const refresh = useCallback((): void => {
-		stakingRewardsFetcher();
-		positionsFetcher();
-	}, [positionsFetcher, stakingRewardsFetcher]);
-
-	const contextValue = useMemo(
-		(): TStakingRewardsContext => ({
-			stakingRewardsByVault: STACKING_TO_VAULT,
-			stakingRewardsMap: keyBy(stakingRewards ?? [], 'address'),
-			positionsMap,
-			refresh
-		}),
-		[stakingRewards, positionsMap, refresh]
-	);
-
-	return <StakingRewardsContext.Provider value={contextValue}>{children}</StakingRewardsContext.Provider>;
-});
-
-export const useStakingRewards = (): TStakingRewardsContext => useContext(StakingRewardsContext);
diff --git a/apps/vaults/hooks/useSortVaults.ts b/apps/vaults/hooks/useSortVaults.ts
index a7d1160ec..f0461eb33 100644
--- a/apps/vaults/hooks/useSortVaults.ts
+++ b/apps/vaults/hooks/useSortVaults.ts
@@ -1,9 +1,7 @@
 import {useCallback, useMemo} from 'react';
-import {useStakingRewards} from '@vaults/contexts/useStakingRewards';
 import {deserialize, serialize} from '@wagmi/core';
 import {toAddress} from '@yearn-finance/web-lib/utils/address';
 import {ETH_TOKEN_ADDRESS, WETH_TOKEN_ADDRESS, WFTM_TOKEN_ADDRESS} from '@yearn-finance/web-lib/utils/constants';
-import {toBigInt, toNormalizedValue} from '@yearn-finance/web-lib/utils/format.bigNumber';
 import {useWallet} from '@common/contexts/useWallet';
 import {getVaultName} from '@common/utils';
 import {numberSort, stringSort} from '@common/utils/sort';
@@ -19,7 +17,6 @@ export function useSortVaults(
 	sortDirection: TSortDirection
 ): TYDaemonVaults {
 	const {getBalance} = useWallet();
-	const {stakingRewardsByVault, positionsMap} = useStakingRewards();
 
 	const sortedByName = useCallback(
 		(): TYDaemonVaults =>
@@ -72,20 +69,22 @@ export function useSortVaults(
 		return vaultList.sort((a, b): number => {
 			const aDepositedBalance = Number(getBalance({address: a.address, chainID: a.chainID})?.normalized || 0);
 			const bDepositedBalance = Number(getBalance({address: b.address, chainID: b.chainID})?.normalized || 0);
-			const aStakedBalance = toNormalizedValue(
-				toBigInt(positionsMap[toAddress(stakingRewardsByVault[a.address])]?.stake),
-				a.decimals
-			);
-			const bStakedBalance = toNormalizedValue(
-				toBigInt(positionsMap[toAddress(stakingRewardsByVault[b.address])]?.stake),
-				b.decimals
-			);
+			let aStakedBalance = 0;
+			let bStakedBalance = 0;
+
+			if (a.staking.available) {
+				aStakedBalance = Number(getBalance({address: a.staking.address, chainID: a.chainID})?.normalized || 0);
+			}
+			if (b.staking.available) {
+				bStakedBalance = Number(getBalance({address: b.staking.address, chainID: b.chainID})?.normalized || 0);
+			}
+
 			if (sortDirection === 'asc') {
 				return aDepositedBalance + aStakedBalance - (bDepositedBalance + bStakedBalance);
 			}
 			return bDepositedBalance + bStakedBalance - (aDepositedBalance + aStakedBalance);
 		});
-	}, [vaultList, getBalance, positionsMap, stakingRewardsByVault, sortDirection]);
+	}, [vaultList, getBalance, sortDirection]);
 
 	const sortedByAvailable = useCallback((): TYDaemonVaults => {
 		return vaultList.sort((a, b): number => {
diff --git a/apps/vaults/hooks/useVaultStakingData.ts b/apps/vaults/hooks/useVaultStakingData.ts
new file mode 100644
index 000000000..e3a03a096
--- /dev/null
+++ b/apps/vaults/hooks/useVaultStakingData.ts
@@ -0,0 +1,78 @@
+import {erc20ABI, useContractReads} from 'wagmi';
+import {STAKING_REWARDS_ABI} from '@vaults/utils/abi/stakingRewards.abi';
+import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
+import {isZeroAddress, toAddress} from '@yearn-finance/web-lib/utils/address';
+import {toBigInt} from '@yearn-finance/web-lib/utils/format.bigNumber';
+
+import type {TAddress} from '@yearn-finance/web-lib/types';
+import type {TYDaemonVault} from '@common/schemas/yDaemonVaultsSchemas';
+
+type TStakingInfo = {
+	address: TAddress;
+	stakingToken: TAddress;
+	rewardsToken: TAddress;
+	totalStaked: bigint;
+	balanceOf: bigint;
+	earned: bigint;
+	allowance: bigint;
+};
+export function useVaultStakingData({currentVault}: {currentVault: TYDaemonVault}): [TStakingInfo, VoidFunction] {
+	const {address} = useWeb3();
+	const {data, refetch} = useContractReads({
+		contracts: [
+			{
+				address: toAddress(currentVault.staking.address),
+				abi: STAKING_REWARDS_ABI,
+				chainId: currentVault.chainID,
+				functionName: 'stakingToken'
+			},
+			{
+				address: toAddress(currentVault.staking.address),
+				abi: STAKING_REWARDS_ABI,
+				chainId: currentVault.chainID,
+				functionName: 'rewardsToken'
+			},
+			{
+				address: toAddress(currentVault.staking.address),
+				abi: STAKING_REWARDS_ABI,
+				chainId: currentVault.chainID,
+				functionName: 'totalSupply'
+			},
+			{
+				address: toAddress(currentVault.staking.address),
+				abi: STAKING_REWARDS_ABI,
+				chainId: currentVault.chainID,
+				functionName: 'balanceOf',
+				args: [toAddress(address)]
+			},
+			{
+				address: toAddress(currentVault.staking.address),
+				abi: STAKING_REWARDS_ABI,
+				chainId: currentVault.chainID,
+				functionName: 'earned',
+				args: [toAddress(address)]
+			},
+			{
+				address: toAddress(currentVault.address),
+				abi: erc20ABI,
+				chainId: currentVault.chainID,
+				functionName: 'allowance',
+				args: [toAddress(address), toAddress(currentVault.staking.address)]
+			}
+		],
+		enabled: currentVault.staking.available
+	});
+
+	return [
+		{
+			address: toAddress(currentVault.staking.address),
+			stakingToken: toAddress(data?.[0].result),
+			rewardsToken: toAddress(data?.[1].result),
+			totalStaked: toBigInt(data?.[2].result),
+			balanceOf: isZeroAddress(address) ? 0n : toBigInt(data?.[3].result),
+			earned: isZeroAddress(address) ? 0n : toBigInt(data?.[4].result),
+			allowance: isZeroAddress(address) ? 0n : toBigInt(data?.[5].result)
+		},
+		refetch
+	];
+}
diff --git a/apps/veyfi/components/RewardsTab.tsx b/apps/veyfi/components/RewardsTab.tsx
index 2682575e2..62429fac2 100644
--- a/apps/veyfi/components/RewardsTab.tsx
+++ b/apps/veyfi/components/RewardsTab.tsx
@@ -25,13 +25,13 @@ import type {TNormalizedBN} from '@common/types/types';
 function GaugeRewards(): ReactElement {
 	const [selectedGauge, set_selectedGauge] = useState<TDropdownOption>();
 	const {provider, isActive} = useWeb3();
-	const {gaugesMap, positionsMap, refresh: refreshGauges} = useGauge();
+	const {gaugesMap, userPositionInGauge, refresh: refreshGauges} = useGauge();
 	const {dYFIPrice} = useOption();
 	const {vaults} = useYearn();
 	const refreshData = useCallback((): unknown => Promise.all([refreshGauges()]), [refreshGauges]);
 	const [claimStatus, set_claimStatus] = useState(defaultTxStatus);
 	const selectedGaugeAddress = toAddress(selectedGauge?.id);
-	const selectedGaugeRewards = positionsMap[selectedGaugeAddress]?.reward ?? toNormalizedBN(0n);
+	const selectedGaugeRewards = userPositionInGauge[selectedGaugeAddress]?.reward ?? toNormalizedBN(0n);
 
 	const onClaim = useCallback(async (): Promise<void> => {
 		const result = await GaugeActions.claimRewards({
@@ -48,7 +48,7 @@ function GaugeRewards(): ReactElement {
 	const gaugeOptions = useMemo((): TDropdownOption[] => {
 		const options: TDropdownOption[] = [];
 		for (const gauge of Object.values(gaugesMap)) {
-			if (!gauge || toBigInt(positionsMap[gauge.address]?.reward?.raw) === 0n) {
+			if (!gauge || toBigInt(userPositionInGauge[gauge.address]?.reward?.raw) === 0n) {
 				continue;
 			}
 			const vault = vaults[toAddress(gauge?.vaultAddress)];
@@ -60,7 +60,7 @@ function GaugeRewards(): ReactElement {
 			});
 		}
 		return options;
-	}, [gaugesMap, positionsMap, vaults]);
+	}, [gaugesMap, userPositionInGauge, vaults]);
 
 	return (
 		<div className={'flex flex-col gap-6 md:gap-10'}>
diff --git a/apps/veyfi/components/ViewStakeUnstakeGauges.tsx b/apps/veyfi/components/ViewStakeUnstakeGauges.tsx
index 598fafcef..effce4796 100644
--- a/apps/veyfi/components/ViewStakeUnstakeGauges.tsx
+++ b/apps/veyfi/components/ViewStakeUnstakeGauges.tsx
@@ -151,7 +151,7 @@ function StakeUnstakeButtons({vaultAddress, gaugeAddress, vaultDeposited, gaugeS
 
 export function StakeUnstakeGauges(): ReactElement {
 	const {address} = useWeb3();
-	const {gaugesMap, positionsMap} = useGauge();
+	const {gaugesMap, userPositionInGauge} = useGauge();
 	const {vaults, prices} = useYearn();
 	const {getBalance} = useWallet();
 	const {dYFIPrice} = useOption();
@@ -172,7 +172,7 @@ export function StakeUnstakeGauges(): ReactElement {
 
 			const vaultBalance = getBalance({address: vault.address, chainID: vault.chainID});
 			const tokenPrice = formatToNormalizedValue(toBigInt(prices?.[vault.token.address] || 0), 6);
-			const boost = Number(positionsMap[gauge.address]?.boost || 1);
+			const boost = Number(userPositionInGauge[gauge.address]?.boost || 1);
 			let APRFor10xBoost =
 				((Number(gauge?.rewardRate.normalized || 0) * dYFIPrice * SECONDS_PER_YEAR) /
 					Number(gauge?.totalStaked.normalized || 0) /
@@ -192,13 +192,13 @@ export function StakeUnstakeGauges(): ReactElement {
 				vaultDeposited: vaultBalance,
 				gaugeAPR: APRFor10xBoost,
 				gaugeBoost: boost,
-				gaugeStaked: positionsMap[gauge.address]?.deposit ?? toNormalizedBN(0),
+				gaugeStaked: userPositionInGauge[gauge.address]?.deposit ?? toNormalizedBN(0),
 				actions: undefined
 			});
 		}
 		set_isLoadingGauges(false);
 		return data;
-	}, [vaults, gaugesMap, getBalance, prices, positionsMap, dYFIPrice]);
+	}, [vaults, gaugesMap, getBalance, prices, userPositionInGauge, dYFIPrice]);
 
 	const searchedGaugesData = useMemo((): TGaugeData[] => {
 		if (!search) {
diff --git a/apps/veyfi/contexts/useGauge.tsx b/apps/veyfi/contexts/useGauge.tsx
index 66e24403b..4d6440fa6 100644
--- a/apps/veyfi/contexts/useGauge.tsx
+++ b/apps/veyfi/contexts/useGauge.tsx
@@ -34,12 +34,12 @@ export type TGaugePosition = {
 
 export type TGaugeContext = {
 	gaugesMap: TDict<TGauge | undefined>;
-	positionsMap: TDict<TGaugePosition | undefined>;
+	userPositionInGauge: TDict<TGaugePosition | undefined>;
 	refresh: () => void;
 };
 const defaultProps: TGaugeContext = {
 	gaugesMap: {},
-	positionsMap: {},
+	userPositionInGauge: {},
 	refresh: (): void => undefined
 };
 
@@ -47,7 +47,7 @@ const GaugeContext = createContext<TGaugeContext>(defaultProps);
 export const GaugeContextApp = memo(function GaugeContextApp({children}: {children: ReactElement}): ReactElement {
 	const {address, isActive} = useWeb3();
 	const [gauges, set_gauges] = useState<TGauge[]>([]);
-	const [positionsMap, set_positionsMap] = useState<TDict<TGaugePosition>>({});
+	const [userPositionInGauge, set_userPositionInGauge] = useState<TDict<TGaugePosition>>({});
 
 	const refreshVotingEscrow = useAsyncTrigger(async (): Promise<void> => {
 		const gaugePromises = VE_YFI_GAUGES.map(async (gaugeAddress): Promise<TGauge> => {
@@ -142,7 +142,7 @@ export const GaugeContextApp = memo(function GaugeContextApp({children}: {childr
 		for (const positions of allPositions) {
 			allPositionsAsMap[positions.address] = positions;
 		}
-		set_positionsMap(allPositionsAsMap);
+		set_userPositionInGauge(allPositionsAsMap);
 	}, [address, gauges, isActive]);
 
 	const refresh = useCallback(async (): Promise<void> => {
@@ -153,10 +153,10 @@ export const GaugeContextApp = memo(function GaugeContextApp({children}: {childr
 	const contextValue = useDeepCompareMemo(
 		(): TGaugeContext => ({
 			gaugesMap: keyBy(gauges, 'address'),
-			positionsMap: positionsMap,
+			userPositionInGauge: userPositionInGauge,
 			refresh
 		}),
-		[gauges, positionsMap, refresh]
+		[gauges, userPositionInGauge, refresh]
 	);
 
 	return <GaugeContext.Provider value={contextValue}>{children}</GaugeContext.Provider>;
diff --git a/apps/ybal/components/CardZap.tsx b/apps/ybal/components/CardZap.tsx
index 1f844c706..2fb1fe060 100755
--- a/apps/ybal/components/CardZap.tsx
+++ b/apps/ybal/components/CardZap.tsx
@@ -102,7 +102,7 @@ function CardZap(): ReactElement {
 	return (
 		<>
 			<div className={'grid grid-cols-2 gap-4'}>
-				<label className={'relative z-20 flex flex-col space-y-1'}>
+				<div className={'relative z-20 flex flex-col space-y-1'}>
 					<p className={'text-ba text-neutral-600'}>{'Swap from'}</p>
 					<Dropdown
 						defaultOption={ZAP_OPTIONS_FROM[0]}
@@ -125,7 +125,7 @@ function CardZap(): ReactElement {
 						}}
 					/>
 					<p className={'pl-2 !text-xs font-normal !text-green-600'}>{fromVaultAPY}</p>
-				</label>
+				</div>
 				<div className={'flex flex-col space-y-1'}>
 					<label
 						htmlFor={'amount'}
@@ -207,7 +207,7 @@ function CardZap(): ReactElement {
 			</div>
 
 			<div className={'mb-8 mt-4 grid grid-cols-2 gap-4 md:mt-0'}>
-				<label className={'relative z-10 flex flex-col space-y-1'}>
+				<div className={'relative z-10 flex flex-col space-y-1'}>
 					<p className={'text-ba text-neutral-600'}>{'Swap to'}</p>
 					<Dropdown
 						defaultOption={possibleTo[0]}
@@ -216,7 +216,7 @@ function CardZap(): ReactElement {
 						onSelect={(option: TDropdownOption): void => set_selectedOptionTo(option)}
 					/>
 					<p className={'pl-2 !text-xs font-normal !text-green-600'}>{toVaultAPY}</p>
-				</label>
+				</div>
 				<div className={'flex flex-col space-y-1'}>
 					<div>
 						<p className={'text-ba hidden text-neutral-600 md:block'}>{'You will receive minimum'}</p>
diff --git a/apps/ybribe/components/bribe/GaugeBribeModal.tsx b/apps/ybribe/components/bribe/GaugeBribeModal.tsx
index bed571953..e74643145 100755
--- a/apps/ybribe/components/bribe/GaugeBribeModal.tsx
+++ b/apps/ybribe/components/bribe/GaugeBribeModal.tsx
@@ -167,7 +167,7 @@ export function GaugeBribeModal({
 			</div>
 			<div className={'mt-6 grid grid-cols-12 gap-4'}>
 				<div className={'relative z-20 col-span-12 flex flex-col space-y-4'}>
-					<label className={'flex flex-col space-y-1 '}>
+					<div className={'flex flex-col space-y-1 '}>
 						<p className={'text-base text-neutral-600'}>{'Reward Token'}</p>
 						<div className={'flex h-10 items-center bg-neutral-100 p-2'}>
 							<div className={'flex h-10 w-full flex-row items-center justify-between px-0 py-4'}>
@@ -194,9 +194,9 @@ export function GaugeBribeModal({
 								/>
 							</div>
 						</div>
-					</label>
+					</div>
 
-					<label className={'flex flex-col space-y-1'}>
+					<div className={'flex flex-col space-y-1'}>
 						<p className={'text-base text-neutral-600'}>{'Reward Amount'}</p>
 						<div className={'flex h-10 items-center bg-neutral-100 p-2'}>
 							<div className={'flex h-10 w-full flex-row items-center justify-between px-0 py-4'}>
@@ -227,7 +227,7 @@ export function GaugeBribeModal({
 								</button>
 							</div>
 						</div>
-					</label>
+					</div>
 
 					<div className={'space-y-1 border-t border-neutral-200 bg-neutral-0 py-6'}>
 						<div className={'flex flex-row items-center justify-between'}>
diff --git a/apps/ybribe/components/bribe/GaugeListRow.tsx b/apps/ybribe/components/bribe/GaugeListRow.tsx
index d36353fc1..f492f7590 100755
--- a/apps/ybribe/components/bribe/GaugeListRow.tsx
+++ b/apps/ybribe/components/bribe/GaugeListRow.tsx
@@ -98,14 +98,14 @@ export function GaugeListRow({currentGauge}: {currentGauge: TCurveGauge}): React
 				<div
 					className={'yearn--table-data-section-item md:col-span-3'}
 					datatype={'number'}>
-					<label className={'yearn--table-data-section-item-label'}>{'Weight'}</label>
+					<p className={'yearn--table-data-section-item-label'}>{'Weight'}</p>
 					<p className={'yearn--table-data-section-item-value'}>{formatPercent(gaugeRelativeWeight * 100)}</p>
 				</div>
 
 				<div
 					className={'yearn--table-data-section-item md:col-span-2'}
 					datatype={'number'}>
-					<label className={'yearn--table-data-section-item-label'}>{'Current Bribes'}</label>
+					<p className={'yearn--table-data-section-item-label'}>{'Current Bribes'}</p>
 					<Renderable
 						shouldRender={!!currentRewardsForCurrentGaugeMap && currentRewardsForCurrentGaugeMap.length > 0}
 						fallback={renderDefaultValueUSDFallback()}>
@@ -124,7 +124,7 @@ export function GaugeListRow({currentGauge}: {currentGauge: TCurveGauge}): React
 				<div
 					className={'yearn--table-data-section-item md:col-span-2'}
 					datatype={'number'}>
-					<label className={'yearn--table-data-section-item-label'}>{'Pending Bribes'}</label>
+					<p className={'yearn--table-data-section-item-label'}>{'Pending Bribes'}</p>
 					<Renderable
 						shouldRender={!!nextRewardsForCurrentGaugeMap && nextRewardsForCurrentGaugeMap.length > 0}
 						fallback={renderDefaultValueUSDFallback()}>
diff --git a/apps/ybribe/components/claim/GaugeListRow.tsx b/apps/ybribe/components/claim/GaugeListRow.tsx
index 7df6ce627..5e15a4f95 100755
--- a/apps/ybribe/components/claim/GaugeListRow.tsx
+++ b/apps/ybribe/components/claim/GaugeListRow.tsx
@@ -206,7 +206,7 @@ export function GaugeListRow({currentGauge}: {currentGauge: TCurveGauge}): React
 							className={
 								'mb-4 flex h-auto flex-row items-baseline justify-between pt-0 md:mb-0 md:h-14 md:flex-col md:items-end'
 							}>
-							<label className={'yearn--table-data-section-item-label'}>{'Current APR'}</label>
+							<p className={'yearn--table-data-section-item-label'}>{'Current APR'}</p>
 							<Renderable
 								shouldRender={
 									!!currentRewardsForCurrentGaugeMap && currentRewardsForCurrentGaugeMap.length > 0
@@ -227,7 +227,7 @@ export function GaugeListRow({currentGauge}: {currentGauge: TCurveGauge}): React
 							className={
 								'flex h-auto flex-row items-baseline justify-between pt-0 md:h-14 md:flex-col md:items-end'
 							}>
-							<label className={'yearn--table-data-section-item-label'}>{'Pending APR'}</label>
+							<p className={'yearn--table-data-section-item-label'}>{'Pending APR'}</p>
 							<Renderable
 								shouldRender={
 									!!nextRewardsForCurrentGaugeMap && nextRewardsForCurrentGaugeMap.length > 0
@@ -255,7 +255,7 @@ export function GaugeListRow({currentGauge}: {currentGauge: TCurveGauge}): React
 							className={
 								'mb-4 flex h-auto flex-row items-baseline justify-between pt-0 md:mb-0 md:h-14 md:flex-col md:items-end'
 							}>
-							<label className={'yearn--table-data-section-item-label'}>{'Current $/veCRV'}</label>
+							<p className={'yearn--table-data-section-item-label'}>{'Current $/veCRV'}</p>
 							<Renderable
 								shouldRender={
 									!!currentRewardsForCurrentGaugeMap && currentRewardsForCurrentGaugeMap.length > 0
@@ -276,7 +276,7 @@ export function GaugeListRow({currentGauge}: {currentGauge: TCurveGauge}): React
 							className={
 								'flex h-auto flex-row items-baseline justify-between pt-0 md:h-14 md:flex-col md:items-end'
 							}>
-							<label className={'yearn--table-data-section-item-label'}>{'Pending $/veCRV'}</label>
+							<p className={'yearn--table-data-section-item-label'}>{'Pending $/veCRV'}</p>
 							<Renderable
 								shouldRender={
 									!!nextRewardsForCurrentGaugeMap && nextRewardsForCurrentGaugeMap.length > 0
@@ -304,7 +304,7 @@ export function GaugeListRow({currentGauge}: {currentGauge: TCurveGauge}): React
 							className={
 								'flex h-auto flex-row items-baseline justify-between pt-0 md:h-14 md:flex-col md:items-end'
 							}>
-							<label className={'yearn--table-data-section-item-label'}>{'Claimable'}</label>
+							<p className={'yearn--table-data-section-item-label'}>{'Claimable'}</p>
 							<div className={'flex flex-col gap-2'}>
 								<Renderable
 									shouldRender={
diff --git a/apps/ybribe/components/rewardFeed/RewardFeedTableRow.tsx b/apps/ybribe/components/rewardFeed/RewardFeedTableRow.tsx
index 5fa889420..77a10398a 100755
--- a/apps/ybribe/components/rewardFeed/RewardFeedTableRow.tsx
+++ b/apps/ybribe/components/rewardFeed/RewardFeedTableRow.tsx
@@ -105,9 +105,9 @@ export function RewardFeedTableRow({
 
 			<div className={'col-span-1 flex h-20 w-full justify-end'}>
 				<div className={'flex flex-row pt-6'}>
-					<label className={'block text-sm leading-6 text-neutral-400 md:hidden'}>
+					<p className={'block text-sm leading-6 text-neutral-400 md:hidden'}>
 						{'Current Rewards per veCRV'}
-					</label>
+					</p>
 					<RewardFeedRowItemWithExtraData
 						address={currentRewardAdded.rewardToken}
 						value={toBigInt(currentRewardAdded.amount)}
diff --git a/apps/ycrv/components/CardZap.tsx b/apps/ycrv/components/CardZap.tsx
index e26a57a21..76536cfae 100755
--- a/apps/ycrv/components/CardZap.tsx
+++ b/apps/ycrv/components/CardZap.tsx
@@ -142,7 +142,7 @@ function CardZap(): ReactElement {
 	return (
 		<>
 			<div className={'grid grid-cols-2 gap-4'}>
-				<label className={'relative z-20 flex flex-col space-y-1'}>
+				<div className={'relative z-20 flex flex-col space-y-1'}>
 					<p className={'text-base text-neutral-600'}>{'Swap from'}</p>
 					<Dropdown
 						defaultOption={ZAP_OPTIONS_FROM[0]}
@@ -169,7 +169,7 @@ function CardZap(): ReactElement {
 						className={'pl-2 !text-xs font-normal !text-green-600'}>
 						{fromVaultAPY}
 					</p>
-				</label>
+				</div>
 				<div className={'flex flex-col space-y-1'}>
 					<label
 						htmlFor={'amount'}
@@ -254,7 +254,7 @@ function CardZap(): ReactElement {
 			</div>
 
 			<div className={'mb-8 mt-4 grid grid-cols-2 gap-4 md:mt-0'}>
-				<label className={'relative z-10 flex flex-col space-y-1'}>
+				<div className={'relative z-10 flex flex-col space-y-1'}>
 					<p className={'text-base text-neutral-600'}>{'Swap to'}</p>
 					<Dropdown
 						defaultOption={possibleTo[0]}
@@ -267,7 +267,7 @@ function CardZap(): ReactElement {
 						className={'pl-2 !text-xs font-normal !text-green-600'}>
 						{toVaultAPY}
 					</p>
-				</label>
+				</div>
 				<div className={'flex flex-col space-y-1'}>
 					<div>
 						<p className={'hidden text-base text-neutral-600 md:block'}>{'You will receive minimum'}</p>
diff --git a/apps/ycrv/components/QuickActions.tsx b/apps/ycrv/components/QuickActions.tsx
index 73a65d17b..295089061 100644
--- a/apps/ycrv/components/QuickActions.tsx
+++ b/apps/ycrv/components/QuickActions.tsx
@@ -51,7 +51,7 @@ function QASelect(props: TQASelect): ReactElement {
 	return (
 		<div className={'relative z-10 w-full space-y-2'}>
 			<div className={'flex flex-row items-baseline justify-between'}>
-				<label className={'text-base text-neutral-600'}>{label}</label>
+				<p className={'text-base text-neutral-600'}>{label}</p>
 				<legend
 					className={'font-number inline text-xs text-neutral-600 md:hidden'}
 					suppressHydrationWarning>
@@ -93,8 +93,7 @@ function QASelect(props: TQASelect): ReactElement {
 function QASwitch(): ReactElement {
 	return (
 		<div className={'mx-auto flex w-full justify-center space-y-0 md:mx-none md:block md:w-14 md:space-y-2'}>
-			<label className={'hidden text-base md:inline'}>&nbsp;</label>
-
+			<p className={'hidden text-base md:inline'}>&nbsp;</p>
 			<div className={'flex h-6 w-6 rotate-90 items-center justify-center p-0 md:h-10 md:w-14 md:rotate-0'}>
 				<IconArrowRight className={'w-4 text-neutral-400 md:w-[25px]'} />
 			</div>
@@ -153,7 +152,7 @@ function QAInput(props: TQAInput): ReactElement {
 function QAButton({label, ...props}: TQAButton): ReactElement {
 	return (
 		<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>
 				<Button
 					className={'w-full'}
diff --git a/next.config.js b/next.config.js
index 8d815b262..49532e7ca 100755
--- a/next.config.js
+++ b/next.config.js
@@ -31,6 +31,9 @@ const config = {
 			}
 		]
 	},
+	experimental: {
+		webpackBuildWorker: true
+	},
 	swcMinify: false,
 	async rewrites() {
 		return [
@@ -112,11 +115,11 @@ const config = {
 		PARTNER_ID_ADDRESS: '0xFEB4acf3df3cDEA7399794D0869ef76A6EfAff52',
 		SHOULD_USE_PARTNER_CONTRACT: true,
 		YDAEMON_BASE_URI: 'https://ydevmon.ycorpo.com',
+		// YDAEMON_BASE_URI: process.env.YDAEMON_BASE_URI,
 		RANGE_LIMIT: 1_000_000,
 
 		// YDAEMON_BASE_URI: 'https://ydaemon.ycorpo.com',
 		// YDAEMON_BASE_URI: 'http://localhost:8080',
-		// YDAEMON_BASE_URI: 'https://ydaemon-dev.yearn.finance',
 		// YDAEMON_BASE_URI: 'https://api.ycorpo.com',
 		BASE_YEARN_ASSETS_URI: 'https://assets.smold.app/api/token',
 		BASE_YEARN_CHAIN_URI: 'https://assets.smold.app/api/chain'
diff --git a/pages/index.tsx b/pages/index.tsx
index 8ca443de8..7e6c2ec94 100755
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -147,7 +147,6 @@ function AppBox({app}: {app: (typeof apps)[0]}): ReactElement {
 
 	return (
 		<Link
-			prefetch={false}
 			key={app.href}
 			href={app.href}>
 			<div
diff --git a/pages/vaults/factory.tsx b/pages/vaults/factory.tsx
index 68245b671..417180dae 100644
--- a/pages/vaults/factory.tsx
+++ b/pages/vaults/factory.tsx
@@ -241,7 +241,7 @@ function Factory(): ReactElement {
 					aria-label={'Available Curve pools'}
 					className={'flex flex-col pb-[52px]'}>
 					<div className={'grid grid-cols-1 gap-x-0 gap-y-5 md:grid-cols-6 md:gap-x-8'}>
-						<label className={'yearn--input relative z-10 col-span-2'}>
+						<div className={'yearn--input relative z-10 col-span-2'}>
 							<p className={'!text-neutral-600'}>{'Available Curve pools'}</p>
 							<Dropdown
 								placeholder={'Select Curve Pool'}
@@ -249,7 +249,7 @@ function Factory(): ReactElement {
 								selected={selectedOption}
 								onSelect={set_selectedOption}
 							/>
-						</label>
+						</div>
 
 						<div className={'col-span-2 w-full space-y-1'}>
 							<p className={'text-neutral-600'}>{'Vault name'}</p>