diff --git a/apps/vaults-v3/components/details/RewardsTab.tsx b/apps/vaults-v3/components/details/RewardsTab.tsx index b9753d68..0f55e719 100644 --- a/apps/vaults-v3/components/details/RewardsTab.tsx +++ b/apps/vaults-v3/components/details/RewardsTab.tsx @@ -1,4 +1,6 @@ -import {useCallback, useMemo, useState} from 'react'; +import {Fragment, useCallback, useMemo, useState} from 'react'; +import Image from 'next/image'; +import Link from 'next/link'; import {useRouter} from 'next/router'; import {useReadContract} from 'wagmi'; import {useWeb3} from '@builtbymom/web3/contexts/useWeb3'; @@ -22,6 +24,74 @@ import {useYearnToken} from '@common/hooks/useYearnToken'; import type {ReactElement} from 'react'; import type {TYDaemonVault} from '@yearn-finance/web-lib/utils/schemas/yDaemonVaultsSchemas'; +const OneUp = ( + +
+ {'1UP'} +

{'1UP'}

+
+ +); + +const Cove = ( + +
+ {'Cove'} +

{'Cove'}

+
+ +); + +const StakeDAO = ( + +
+ {'StakeDAO'} +

{'StakeDAO'}

+
+ +); + /************************************************************************************************** ** The BoostMessage component will display a message to the user if the current vault has staking ** rewards and the source of the rewards is either 'OP Boost' or 'VeYFI'. More source might be @@ -70,7 +140,7 @@ function BoostMessage(props: {currentVault: TYDaemonVault; hasStakingRewardsLive if (hasVaultData && vaultDataource === 'VeYFI') { return ( -
+
{'Yield is good, but more yield is good-er!'} @@ -142,6 +212,56 @@ function BoostMessage(props: {currentVault: TYDaemonVault; hasStakingRewardsLive return ; } +function VeYFIBoostMessage(props: {currentVault: TYDaemonVault; hasStakingRewardsLive: boolean}): ReactElement { + const vaultDataource = props.currentVault.staking.source; + const extraAPY = props.currentVault.apr.extra.stakingRewardsAPR; + + const randomOrder = useMemo(() => { + const apps = [OneUp, Cove, StakeDAO]; + function shuffle(array: ReactElement[]): ReactElement[] { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + return array; + } + return shuffle(apps); + }, []); + + if (vaultDataource !== 'VeYFI') { + return ; + } + + return ( +
+ {'Yield is good, but more yield is good-er!'} +
+

+ {`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. `} + + {'Learn more'} + + {'.'} +

+

{"Don't have veYFI? Deposit with a liquid locker to earn boosted rewards today!"}

+
+
+ {randomOrder.map((item, index) => ( + {item} + ))} +
+
+ ); +} + /************************************************************************************************** ** The RewardsTab component will display the staking rewards data for the current vault. It will ** allow the user to stake, unstake, and claim rewards from the staking rewards contract. @@ -326,112 +446,119 @@ export function RewardsTab(props: {currentVault: TYDaemonVault; hasStakingReward } return ( -
- - -
-
-
{'Stake'}
+
+
+ +
+
+
{'Stake'}
+
+
+ +

{`${formatAmount(vaultData.vaultBalanceOf.normalized, 6)} ${props.currentVault.symbol} available to stake`}

+

{`${formatCounterValue(vaultData.vaultBalanceOf.normalized, vaultTokenPrice.normalized)}`}

+
+ } + value={ + toBigInt(vaultData.vaultBalanceOf.raw) === 0n ? undefined : ( + + ) + } + /> +
+ +
+
-
- -

{`${formatAmount(vaultData.vaultBalanceOf.normalized, 6)} ${props.currentVault.symbol} available to stake`}

-

{`${formatCounterValue(vaultData.vaultBalanceOf.normalized, vaultTokenPrice.normalized)}`}

-
- } - value={ - toBigInt(vaultData.vaultBalanceOf.raw) === 0n ? undefined : ( - - ) - } - /> +
+
{'Unstake'}
+
+
+ +

{`${formatAmount(vaultData.stakedBalanceOf.normalized, 6)} ${symbol} staked`}

+

{`${formatCounterValue(vaultData.stakedBalanceOf.normalized, vaultTokenPrice.normalized)}`}

+
+ } + value={ + toBigInt(vaultData.stakedBalanceOf.raw) === 0n ? undefined : ( + + ) + } + /> +
-
-
-
-
{'Unstake'}
-
-
- -

{`${formatAmount(vaultData.stakedBalanceOf.normalized, 6)} ${symbol} staked`}

-

{`${formatCounterValue(vaultData.stakedBalanceOf.normalized, vaultTokenPrice.normalized)}`}

-
- } - value={ - toBigInt(vaultData.stakedBalanceOf.raw) === 0n ? undefined : ( - - ) - } - /> +
+
+
{'Claim Rewards'}
+
+
+ +

{`${formatAmount(vaultData.stakedEarned.normalized, 6)} ${rewardTokenBalance.symbol || (props.currentVault.staking.rewards || [])[0]?.symbol || ''} available to claim`}

+

{`${formatCounterValue(vaultData.stakedEarned.normalized, rewardTokenPrice.normalized)}`}

+
+ } + value={ + toBigInt(vaultData.stakedEarned.raw) === 0n ? undefined : ( + + ) + } + /> - + +
-
-
-
{'Claim Rewards'}
-
-
- -

{`${formatAmount(vaultData.stakedEarned.normalized, 6)} ${rewardTokenBalance.symbol || (props.currentVault.staking.rewards || [])[0]?.symbol || ''} available to claim`}

-

{`${formatCounterValue(vaultData.stakedEarned.normalized, rewardTokenPrice.normalized)}`}

-
- } - value={ - toBigInt(vaultData.stakedEarned.raw) === 0n ? undefined : ( - - ) - } - /> - - -
+
+
);