feat: veyfi apr

yearn · Sep 4, 2024 · 7065631 · 7065631
1 parent 520f0c9
commit 7065631
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 20 deletions.
diff --git a/apps/vaults-v3/components/details/RewardsTab.tsx b/apps/vaults-v3/components/details/RewardsTab.tsx
@@ -74,7 +74,7 @@ function BoostMessage(props: {currentVault: TYDaemonVault; hasStakingRewardsLive
 					<b className={'text-lg'}>{'Yield is good, but more yield is good-er!'}</b>
 					<div className={'mt-2 flex flex-col gap-2'}>
 						<p>
-							{`This Vault has an active veYFI gauge which boosts your APY from ${formatAmount(extraAPY * 10)}% to ${formatAmount(extraAPY * 100)}%. Simply deposit and stake to start earning.`}
+							{`This Vault has an active veYFI gauge which boosts your APY from ${formatAmount(extraAPY * 10)}% to ${formatAmount(extraAPY * 100)}% depending on the veYFI you have locked. Simply deposit and stake to start earning.`}
 						</p>
 						<p className={'block'}>
 							{'Learn more about veYFI rewards in the '}

diff --git a/apps/vaults-v3/components/details/VaultActionsTabsWrapper.tsx b/apps/vaults-v3/components/details/VaultActionsTabsWrapper.tsx
@@ -120,7 +120,7 @@ export function BoostMessage(props: {
 			<div className={'col-span-12 flex p-4 pt-0 md:px-8 md:pb-6'}>
 				<div className={'w-full rounded-lg bg-[#34A14F] p-2 md:px-6 md:py-4'}>
 					<b className={'text-base text-white'}>
-						{`This Vault has an active veYFI gauge which boosts your APY from ${formatAmount(extraAPY * 10)}% to ${formatAmount(extraAPY * 100)}%. Simply deposit and stake to start earning.`}
+						{`This Vault has an active veYFI gauge which boosts your APY from ${formatAmount(extraAPY * 10)}% to ${formatAmount(extraAPY * 100)}% depending on the veYFI you have locked. Simply deposit and stake to start earning.`}
 					</b>
 					<b className={'block text-white'}>
 						{'Learn more about veYFI rewards in the '}

diff --git a/apps/vaults-v3/components/details/actions/QuickActionsButtons.tsx b/apps/vaults-v3/components/details/actions/QuickActionsButtons.tsx
@@ -119,13 +119,15 @@ export function VaultDetailsQuickActionsButtons({currentVault}: {currentVault: T
 		},
 		[
 			currentVault,
-			onChangeAmount,
 			currentSolver,
+			onChangeAmount,
 			plausible,
 			actionParams.amount?.display,
 			actionParams?.selectedOptionFrom?.value,
 			actionParams?.selectedOptionFrom?.symbol,
 			actionParams?.selectedOptionTo?.value,
+			actionParams?.selectedOptionTo?.symbol,
+			actionParams?.selectedOptionTo?.chainID,
 			onRefresh,
 			isDepositing
 		]

diff --git a/apps/vaults-v3/components/details/actions/QuickActionsTo.tsx b/apps/vaults-v3/components/details/actions/QuickActionsTo.tsx
@@ -1,13 +1,56 @@
+import {Fragment, type ReactElement} from 'react';
 import {useRouter} from 'next/router';
 import {useWeb3} from '@builtbymom/web3/contexts/useWeb3';
 import {cl, formatCounterValue, formatPercent, toAddress} from '@builtbymom/web3/utils';
 import {useActionFlow} from '@vaults/contexts/useActionFlow';
 import {useSolver} from '@vaults/contexts/useSolver';
 import {Renderable} from '@yearn-finance/web-lib/components/Renderable';
+import {RenderAmount} from '@common/components/RenderAmount';
 import {Dropdown} from '@common/components/TokenDropdown';
+import {useYearn} from '@common/contexts/useYearn';
 import {useYearnTokenPrice} from '@common/hooks/useYearnTokenPrice';
 
-import type {ReactElement} from 'react';
+import type {TYDaemonVault} from '@yearn-finance/web-lib/utils/schemas/yDaemonVaultsSchemas';
+
+function VaultAPY({currentVault}: {currentVault: TYDaemonVault}): ReactElement {
+	const isSourceVeYFI = currentVault.staking.source === 'VeYFI';
+	const {isAutoStakingEnabled} = useYearn();
+
+	if (isSourceVeYFI && isAutoStakingEnabled) {
+		const sumOfRewardsAPY = currentVault.apr.extra.stakingRewardsAPR + currentVault.apr.extra.gammaRewardAPR;
+		const veYFIRange = [
+			currentVault.apr.extra.stakingRewardsAPR / 10 + currentVault.apr.extra.gammaRewardAPR,
+			sumOfRewardsAPY
+		] as [number, number];
+		const estAPYRange = [
+			veYFIRange[0] + currentVault.apr.forwardAPR.netAPR,
+			veYFIRange[1] + currentVault.apr.forwardAPR.netAPR
+		] as [number, number];
+		return (
+			<Fragment>
+				<RenderAmount
+					shouldHideTooltip
+					value={estAPYRange[0]}
+					symbol={'percent'}
+					decimals={6}
+				/>
+				&nbsp;&rarr;&nbsp;
+				<RenderAmount
+					shouldHideTooltip
+					value={estAPYRange[1]}
+					symbol={'percent'}
+					decimals={6}
+				/>
+			</Fragment>
+		);
+	}
+
+	return (
+		<Fragment>
+			{formatPercent((currentVault.apr.netAPR + currentVault.apr.extra.stakingRewardsAPR) * 100, 2, 2, 500)}
+		</Fragment>
+	);
+}
 
 export function VaultDetailsQuickActionsTo(): ReactElement {
 	const {isActive} = useWeb3();
@@ -44,12 +87,7 @@ export function VaultDetailsQuickActionsTo(): ReactElement {
 					<legend
 						className={'font-number inline text-xs text-neutral-900/50 md:hidden'}
 						suppressHydrationWarning>
-						{`APY ${formatPercent(
-							(currentVault.apr.netAPR + currentVault.apr.extra.stakingRewardsAPR) * 100,
-							2,
-							2,
-							500
-						)}`}
+						<VaultAPY currentVault={currentVault} />
 					</legend>
 				</div>
 				<Renderable
@@ -76,14 +114,7 @@ export function VaultDetailsQuickActionsTo(): ReactElement {
 					<legend
 						className={'font-number hidden text-xs text-neutral-900/50 md:inline'}
 						suppressHydrationWarning>
-						{isDepositing
-							? formatPercent(
-									(currentVault.apr.netAPR + currentVault.apr.extra.stakingRewardsAPR) * 100,
-									2,
-									2,
-									500
-								)
-							: ''}
+						{isDepositing ? <VaultAPY currentVault={currentVault} /> : ''}
 					</legend>
 				</div>
 			</div>

diff --git a/apps/vaults/components/details/tabs/VaultDetailsAbout.tsx b/apps/vaults/components/details/tabs/VaultDetailsAbout.tsx
@@ -3,16 +3,19 @@ import {useIsMounted} from '@react-hookz/web';
 import {GraphForVaultEarnings} from '@vaults/components/graphs/GraphForVaultEarnings';
 import {Renderable} from '@yearn-finance/web-lib/components/Renderable';
 import {parseMarkdown} from '@yearn-finance/web-lib/utils/helpers';
+import {RenderAmount} from '@common/components/RenderAmount';
 
 import type {ReactElement} from 'react';
 import type {TGraphData} from '@yearn-finance/web-lib/types';
 import type {TYDaemonVault} from '@yearn-finance/web-lib/utils/schemas/yDaemonVaultsSchemas';
 
 type TAPYLineItemProps = {
+	currentVault: TYDaemonVault;
 	label: string;
 	value: number | string;
 	apyType: string;
 	hasUpperLimit?: boolean;
+	isStaking?: boolean;
 };
 
 type TYearnFeesLineItem = {
@@ -21,10 +24,45 @@ type TYearnFeesLineItem = {
 	tooltip?: string;
 };
 
-function APYLineItem({value, label, apyType, hasUpperLimit}: TAPYLineItemProps): ReactElement {
+function APYLineItem({currentVault, value, label, apyType, isStaking, hasUpperLimit}: TAPYLineItemProps): ReactElement {
+	const isSourceVeYFI = currentVault.staking.source === 'VeYFI';
 	const safeValue = Number(value) || 0;
 	const isNew = apyType === 'new' && isZero(safeValue);
 
+	if (isSourceVeYFI && isStaking) {
+		const sumOfRewardsAPY = currentVault.apr.extra.stakingRewardsAPR + currentVault.apr.extra.gammaRewardAPR;
+		const veYFIRange = [
+			currentVault.apr.extra.stakingRewardsAPR / 10 + currentVault.apr.extra.gammaRewardAPR,
+			sumOfRewardsAPY
+		] as [number, number];
+		const estAPYRange = [
+			veYFIRange[0] + currentVault.apr.forwardAPR.netAPR,
+			veYFIRange[1] + currentVault.apr.forwardAPR.netAPR
+		] as [number, number];
+		return (
+			<div className={'flex flex-row items-center justify-between'}>
+				<p className={'text-sm text-neutral-500'}>{label}</p>
+				<p
+					className={'font-number text-sm text-neutral-900'}
+					suppressHydrationWarning>
+					<RenderAmount
+						shouldHideTooltip
+						value={estAPYRange[0]}
+						symbol={'percent'}
+						decimals={6}
+					/>
+					&nbsp;&rarr;&nbsp;
+					<RenderAmount
+						shouldHideTooltip
+						value={estAPYRange[1]}
+						symbol={'percent'}
+						decimals={6}
+					/>
+				</p>
+			</div>
+		);
+	}
+
 	return (
 		<div className={'flex flex-row items-center justify-between'}>
 			<p className={'text-sm text-neutral-500'}>{label}</p>
@@ -106,23 +144,27 @@ export function VaultDetailsAbout({
 					<div className={'mt-4 grid grid-cols-1 gap-x-12 md:grid-cols-2'}>
 						<div className={'space-y-2'}>
 							<APYLineItem
+								currentVault={currentVault}
 								label={'Weekly APY'}
 								apyType={apr.type}
 								value={apr.points.weekAgo}
 							/>
 							<APYLineItem
+								currentVault={currentVault}
 								label={'Monthly APY'}
 								apyType={apr.type}
 								value={apr.points.monthAgo}
 							/>
 							<APYLineItem
+								currentVault={currentVault}
 								label={'Inception APY'}
 								apyType={apr.type}
 								value={apr.points.inception}
 							/>
 						</div>
 						<div className={'mt-2 space-y-0 md:mt-0'}>
 							<APYLineItem
+								currentVault={currentVault}
 								hasUpperLimit
 								label={'Net APY'}
 								apyType={apr.type}
@@ -131,14 +173,21 @@ export function VaultDetailsAbout({
 							{apr.extra.stakingRewardsAPR > 0 && (
 								<div className={'pl-2'}>
 									<APYLineItem
+										currentVault={currentVault}
 										hasUpperLimit
 										label={'• Base APY'}
 										apyType={apr.type}
 										value={apr.netAPR}
 									/>
 									<APYLineItem
+										currentVault={currentVault}
+										isStaking
 										hasUpperLimit
-										label={'• Staking Reward APY'}
+										label={
+											currentVault.staking.source === 'VeYFI'
+												? '• veYFI APR'
+												: '• Staking Reward APY'
+										}
 										apyType={apr.type}
 										value={apr.extra.stakingRewardsAPR}
 									/>