diff --git a/apps/common/utils/index.tsx b/apps/common/utils/index.tsx index cf02cc58a..185d79983 100755 --- a/apps/common/utils/index.tsx +++ b/apps/common/utils/index.tsx @@ -1,13 +1,3 @@ -import {formatUnits, parseUnits} from 'viem'; -import {formatPercent, toAddress, toBigInt, toNormalizedValue} from '@builtbymom/web3/utils'; -import { - LPYCRV_TOKEN_ADDRESS, - LPYCRV_V2_TOKEN_ADDRESS, - YCRV_CURVE_POOL_ADDRESS, - YVBOOST_TOKEN_ADDRESS, - YVECRV_TOKEN_ADDRESS -} from '@yearn-finance/web-lib/utils/constants'; - import type {TYDaemonVault} from '@yearn-finance/web-lib/utils/schemas/yDaemonVaultsSchemas'; import type {TAddress, TDict} from '@builtbymom/web3/types'; @@ -18,40 +8,6 @@ export function max(input: bigint, balance: bigint): bigint { return input; } -export function getVaultAPR(vaults: TDict, vaultAddress: string): string { - if (!vaults?.[toAddress(vaultAddress)]) { - return ''; - } - - if (toAddress(vaultAddress) === YVECRV_TOKEN_ADDRESS || toAddress(vaultAddress) === YVBOOST_TOKEN_ADDRESS) { - return `APY ${formatPercent(0)}`; - } - - if (vaults?.[toAddress(vaultAddress)]?.apr?.netAPR) { - return `APY ${formatPercent((vaults?.[toAddress(vaultAddress)]?.apr?.netAPR || 0) * 100, 2, 2, 500)}`; - } - return `APY ${formatPercent(0)}`; -} - -export function getAmountWithSlippage(from: string, to: string, value: bigint, slippage: number): number { - const hasLP = - toAddress(from) === LPYCRV_TOKEN_ADDRESS || - toAddress(to) === LPYCRV_TOKEN_ADDRESS || - toAddress(from) === LPYCRV_V2_TOKEN_ADDRESS || - toAddress(to) === LPYCRV_V2_TOKEN_ADDRESS; - const isDirectDeposit = - toAddress(from) === YCRV_CURVE_POOL_ADDRESS || - toAddress(to) === LPYCRV_TOKEN_ADDRESS || - toAddress(to) === LPYCRV_V2_TOKEN_ADDRESS; - - if (hasLP && !isDirectDeposit) { - const minAmountStr = Number(formatUnits(toBigInt(value), 18)); - const minAmountWithSlippage = parseUnits((minAmountStr * (1 - slippage / 100)).toFixed(18) as `${number}`, 18); - return toNormalizedValue(toBigInt(minAmountWithSlippage), 18); - } - return toNormalizedValue(value, 18); -} - export function getVaultName(vault: TYDaemonVault): string { const baseName = vault.name; if (baseName.includes(' yVault')) { diff --git a/apps/vaults-v3/components/details/RewardsTab.tsx b/apps/vaults-v3/components/details/RewardsTab.tsx index c45703021..7431caf53 100644 --- a/apps/vaults-v3/components/details/RewardsTab.tsx +++ b/apps/vaults-v3/components/details/RewardsTab.tsx @@ -30,7 +30,7 @@ import type {TYDaemonVault} from '@yearn-finance/web-lib/utils/schemas/yDaemonVa function BoostMessage(props: {currentVault: TYDaemonVault; hasStakingRewardsLive: boolean}): ReactElement { const hasVaultData = Boolean(props.currentVault.staking.available); const vaultDataource = props.currentVault.staking.source; - const extraAPR = props.currentVault.apr.extra.stakingRewardsAPR; + const extraAPY = props.currentVault.apr.extra.stakingRewardsAPR; const {pathname} = useRouter(); const isV3Page = pathname.startsWith(`/v3`); @@ -74,7 +74,7 @@ function BoostMessage(props: {currentVault: TYDaemonVault; hasStakingRewardsLive {'Yield is good, but more yield is good-er!'}

- {`This Vault has an active veYFI gauge which boosts your APR from ${formatAmount(extraAPR * 10)}% to ${formatAmount(extraAPR * 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.`}

{'Learn more about veYFI rewards in the '} @@ -101,7 +101,7 @@ function BoostMessage(props: {currentVault: TYDaemonVault; hasStakingRewardsLive {'Yield is good, but more yield is good-er!'}

- {`This Vault can be juiced for even more yield. Simply deposit and stake to receive juiced APRs of ${formatAmount(extraAPR * 100)}%.`} + {`This Vault can be juiced for even more yield. Simply deposit and stake to receive juiced APYs of ${formatAmount(extraAPY * 100)}%.`}

{'Visit '} diff --git a/apps/vaults-v3/components/details/VaultActionsTabsWrapper.tsx b/apps/vaults-v3/components/details/VaultActionsTabsWrapper.tsx index 6be35bdca..edd38e2ca 100755 --- a/apps/vaults-v3/components/details/VaultActionsTabsWrapper.tsx +++ b/apps/vaults-v3/components/details/VaultActionsTabsWrapper.tsx @@ -68,7 +68,7 @@ export function BoostMessage(props: { const {isAutoStakingEnabled} = useYearn(); const hasStakingRewards = Boolean(props.currentVault.staking.available); const stakingRewardSource = props.currentVault.staking.source; - const extraAPR = props.currentVault.apr.extra.stakingRewardsAPR; + const extraAPY = props.currentVault.apr.extra.stakingRewardsAPR; if ( props.currentTab === 0 && @@ -76,17 +76,7 @@ export function BoostMessage(props: { !props.hasStakingRewardsLive && stakingRewardSource !== 'VeYFI' ) { - return ( -

-
- - { - "This Vault is no longer reciving any extra rewards. But don't worry, you are still earning the normal yield!" - } - -
-
- ); + return ; } if (props.currentTab === 0 && hasStakingRewards && stakingRewardSource === 'OP Boost') { @@ -120,7 +110,7 @@ export function BoostMessage(props: {
- {`This Vault has an active veYFI gauge which boosts your APR from ${formatAmount(extraAPR * 10)}% to ${formatAmount(extraAPR * 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.`} {'Learn more about veYFI rewards in the '} @@ -142,7 +132,7 @@ export function BoostMessage(props: {
- {`This Vault can be juiced for even more yield. Simply deposit and stake to receive juiced APRs of ${formatAmount(extraAPR * 100)}%.`} + {`This Vault can be juiced for even more yield. Simply deposit and stake to receive juiced APYs of ${formatAmount(extraAPY * 100)}%.`} {'Visit '} diff --git a/apps/vaults-v3/components/details/VaultDetailsHeader.tsx b/apps/vaults-v3/components/details/VaultDetailsHeader.tsx index 9c2d5c6c8..606aded13 100755 --- a/apps/vaults-v3/components/details/VaultDetailsHeader.tsx +++ b/apps/vaults-v3/components/details/VaultDetailsHeader.tsx @@ -65,19 +65,19 @@ function VaultHeaderLineItem({label, children, legend}: TVaultHeaderLineItemProp ); } -function VaultAPR({apr, source}: {apr: TYDaemonVault['apr']; source: string}): ReactElement { - const extraAPR = apr.extra.stakingRewardsAPR + apr.extra.gammaRewardAPR; - const monthlyAPR = apr.points.monthAgo; - const weeklyAPR = apr.points.weekAgo; - const netAPR = apr.netAPR + extraAPR; - const currentAPR = apr.forwardAPR.netAPR + extraAPR; +function VaultAPY({apr, source}: {apr: TYDaemonVault['apr']; source: string}): ReactElement { + const extraAPY = apr.extra.stakingRewardsAPR + apr.extra.gammaRewardAPR; + const monthlyAPY = apr.points.monthAgo; + const weeklyAPY = apr.points.weekAgo; + const netAPY = apr.netAPR + extraAPY; + const currentAPY = apr.forwardAPR.netAPR + extraAPY; const isSourceVeYFI = source === 'VeYFI'; - if (apr.forwardAPR.type === '' && extraAPR === 0) { + if (apr.forwardAPR.type === '' && extraAPY === 0) { return ( - + @@ -85,19 +85,19 @@ function VaultAPR({apr, source}: {apr: TYDaemonVault['apr']; source: string}): R ); } - if (apr.forwardAPR.type !== '' && extraAPR !== 0 && !isSourceVeYFI) { - const boostedAPR = apr.forwardAPR.netAPR + extraAPR; + if (apr.forwardAPR.type !== '' && extraAPY !== 0 && !isSourceVeYFI) { + const boostedAPY = apr.forwardAPR.netAPR + extraAPY; return (
- {'Est. APR: '} + {'Est. APY: '} @@ -113,13 +113,13 @@ function VaultAPR({apr, source}: {apr: TYDaemonVault['apr']; source: string}): R className={ 'font-number flex w-full flex-row justify-between text-wrap text-left text-neutral-400 md:w-80 md:text-xs' }> - {'Estimated APR for the next period based on current data.'} + {'Estimated APY for the next period based on current data.'}

-

{'• Base APR '}

+

{'• Base APY '}

-

{'• Rewards APR '}

+

{'• Rewards APY '}

@@ -148,7 +148,7 @@ function VaultAPR({apr, source}: {apr: TYDaemonVault['apr']; source: string}): R shouldRender={!apr?.type.includes('new')} fallback={'New'}> @@ -158,34 +158,34 @@ function VaultAPR({apr, source}: {apr: TYDaemonVault['apr']; source: string}): R } if (isSourceVeYFI) { - const sumOfRewardsAPR = apr.extra.stakingRewardsAPR + apr.extra.gammaRewardAPR; - const veYFIRange = [apr.extra.stakingRewardsAPR / 10 + apr.extra.gammaRewardAPR, sumOfRewardsAPR] as [ + const sumOfRewardsAPY = apr.extra.stakingRewardsAPR + apr.extra.gammaRewardAPR; + const veYFIRange = [apr.extra.stakingRewardsAPR / 10 + apr.extra.gammaRewardAPR, sumOfRewardsAPY] as [ number, number ]; - const estAPRRange = [veYFIRange[0] + apr.forwardAPR.netAPR, veYFIRange[1] + apr.forwardAPR.netAPR] as [ + const estAPYRange = [veYFIRange[0] + apr.forwardAPR.netAPR, veYFIRange[1] + apr.forwardAPR.netAPR] as [ number, number ]; return (
- {'Est. APR: '} + {'Est. APY: '}  →  @@ -202,13 +202,13 @@ function VaultAPR({apr, source}: {apr: TYDaemonVault['apr']; source: string}): R className={ 'font-number flex w-full flex-row justify-between text-wrap text-left text-neutral-400 md:w-80 md:text-xs' }> - {'Estimated APR for the next period based on current data.'} + {'Estimated APY for the next period based on current data.'}

-

{'• Base APR '}

+

{'• Base APY '}

-

{'• Rewards APR '}

+

{'• Rewards APY '}

@@ -257,14 +257,14 @@ function VaultAPR({apr, source}: {apr: TYDaemonVault['apr']; source: string}): R return (
- {'Est. APR: '} + {'Est. APY: '} @@ -280,16 +280,16 @@ function VaultAPR({apr, source}: {apr: TYDaemonVault['apr']; source: string}): R className={ 'font-number flex w-full flex-row justify-between text-wrap text-left text-neutral-400 md:w-80 md:text-xs' }> - {'Estimated APR for the next period based on current data.'} + {'Estimated APY for the next period based on current data.'}

-

{'• Base APR '}

+

{'• Base APY '}

@@ -299,7 +299,7 @@ function VaultAPR({apr, source}: {apr: TYDaemonVault['apr']; source: string}): R className={ 'font-number flex w-full flex-row justify-between space-x-4 whitespace-nowrap text-neutral-400 md:text-xs' }> -

{'• Rewards APR '}

+

{'• Rewards APY '}

{'N/A'}

@@ -310,7 +310,7 @@ function VaultAPR({apr, source}: {apr: TYDaemonVault['apr']; source: string}): R shouldRender={!apr?.type.includes('new')} fallback={'New'}> @@ -766,7 +766,7 @@ export function VaultDetailsHeader({currentVault}: {currentVault: TYDaemonVault}
- diff --git a/apps/vaults-v3/components/details/actions/QuickActionsButtons.tsx b/apps/vaults-v3/components/details/actions/QuickActionsButtons.tsx index 3377385b7..3825c3efe 100644 --- 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/QuickActionsFrom.tsx b/apps/vaults-v3/components/details/actions/QuickActionsFrom.tsx index 8585a25c1..4b5985e77 100644 --- a/apps/vaults-v3/components/details/actions/QuickActionsFrom.tsx +++ b/apps/vaults-v3/components/details/actions/QuickActionsFrom.tsx @@ -146,7 +146,12 @@ export function VaultDetailsQuickActionsFrom(): ReactElement { ], query: { enabled: !isZeroAddress(address) && !isZeroAddress(actionParams?.selectedOptionFrom?.value), - select(data) { + select( + data: ( + | {error: Error; result?: undefined; status: 'failure'} + | {error?: undefined; result: unknown; status: 'success'} + )[] + ) { const balanceOf = decodeAsBigInt(data[0]); const decimals = isEthAddress(actionParams?.selectedOptionFrom?.value) ? 18 : decodeAsNumber(data[1]); return toNormalizedBN(balanceOf, decimals); diff --git a/apps/vaults-v3/components/details/actions/QuickActionsTo.tsx b/apps/vaults-v3/components/details/actions/QuickActionsTo.tsx index bd52b3d76..8288dd04e 100644 --- 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 ( + + +  →  + + + ); + } + + return ( + + {formatPercent((currentVault.apr.netAPR + currentVault.apr.extra.stakingRewardsAPR) * 100, 2, 2, 500)} + + ); +} export function VaultDetailsQuickActionsTo(): ReactElement { const {isActive} = useWeb3(); @@ -44,12 +87,7 @@ export function VaultDetailsQuickActionsTo(): ReactElement { - {`APR ${formatPercent( - (currentVault.apr.netAPR + currentVault.apr.extra.stakingRewardsAPR) * 100, - 2, - 2, - 500 - )}`} +
diff --git a/apps/vaults-v3/components/details/tabs/VaultDetailsAbout.tsx b/apps/vaults-v3/components/details/tabs/VaultDetailsAbout.tsx index d6506923a..66bc955d7 100755 --- a/apps/vaults-v3/components/details/tabs/VaultDetailsAbout.tsx +++ b/apps/vaults-v3/components/details/tabs/VaultDetailsAbout.tsx @@ -62,7 +62,7 @@ export function VaultDetailsAbout({currentVault}: {currentVault: TYDaemonVault})
- {'APR'} + {'APY'}
diff --git a/apps/vaults-v3/components/details/tabs/VaultDetailsStrategies.tsx b/apps/vaults-v3/components/details/tabs/VaultDetailsStrategies.tsx index a05ba6e60..72242aa86 100755 --- a/apps/vaults-v3/components/details/tabs/VaultDetailsStrategies.tsx +++ b/apps/vaults-v3/components/details/tabs/VaultDetailsStrategies.tsx @@ -85,15 +85,15 @@ export function VaultDetailsStrategies({currentVault}: {currentVault: TYDaemonVa { + onSort={(newSortBy: string, newSortDirection: TSortDirection): void => { onChangeSortBy(newSortBy as TPossibleSortBy); onChangeSortDirection(newSortDirection as TSortDirection); }} items={[ {label: 'Vault', value: 'name', sortable: true, className: 'col-span-2'}, {label: 'Risk Level', value: 'score', sortable: true, className: 'col-span-1'}, - {label: 'Est. APR', value: 'estAPR', sortable: true, className: 'col-span-2'}, - {label: 'Hist. APR', value: 'apr', sortable: true, className: 'col-span-2'}, + {label: 'Est. APY', value: 'estAPY', sortable: true, className: 'col-span-2'}, + {label: 'Hist. APY', value: 'APY', sortable: true, className: 'col-span-2'}, {label: 'Available', value: 'available', sortable: true, className: 'col-span-2'}, {label: 'Holdings', value: 'deposited', sortable: true, className: 'col-span-2'}, {label: 'Deposits', value: 'tvl', sortable: true, className: 'col-span-2'} diff --git a/apps/vaults-v3/components/list/VaultsV3ListRow.tsx b/apps/vaults-v3/components/list/VaultsV3ListRow.tsx index a499b623f..e94398af3 100755 --- a/apps/vaults-v3/components/list/VaultsV3ListRow.tsx +++ b/apps/vaults-v3/components/list/VaultsV3ListRow.tsx @@ -16,7 +16,27 @@ import type {ReactElement} from 'react'; import type {TYDaemonVault} from '@yearn-finance/web-lib/utils/schemas/yDaemonVaultsSchemas'; import type {TNormalizedBN} from '@builtbymom/web3/types'; -function APRSubline({hasPendleArbRewards}: {hasPendleArbRewards: boolean}): ReactElement { +type TAPYSublineProps = { + hasPendleArbRewards: boolean; + hasKelpNEngenlayer: boolean; + hasKelp: boolean; +}; + +function APYSubline({hasPendleArbRewards, hasKelpNEngenlayer, hasKelp}: TAPYSublineProps): ReactElement { + if (hasKelpNEngenlayer) { + return ( + + {`+1x Kelp Miles | +1x EigenLayer Points 🚀`} + + ); + } + if (hasKelp) { + return ( + + {`+ 1x Kelp Miles 🚀`} + + ); + } if (hasPendleArbRewards) { return ( @@ -27,12 +47,14 @@ function APRSubline({hasPendleArbRewards}: {hasPendleArbRewards: boolean}): Reac return ; } -function APRTooltip(props: { - baseAPR: number; - rewardsAPR?: number; +function APYTooltip(props: { + baseAPY: number; + rewardsAPY?: number; boost?: number; range?: [number, number]; hasPendleArbRewards?: boolean; + hasKelpNEngenlayer?: boolean; + hasKelp?: boolean; }): ReactElement { return ( @@ -45,24 +67,24 @@ function APRTooltip(props: { className={ 'font-number flex w-full flex-row justify-between space-x-4 whitespace-nowrap text-neutral-400 md:text-xs' }> -

{'• Base APR '}

+

{'• Base APY '}

- {props.rewardsAPR ? ( + {props.rewardsAPY ? (
-

{'• Rewards APR '}

+

{'• Rewards APY '}

@@ -84,7 +106,7 @@ function APRTooltip(props: { className={ 'font-number flex w-full flex-row justify-between space-x-4 whitespace-nowrap text-neutral-400 md:text-xs' }> -

{'• Rewards APR '}

+

{'• Rewards APY '}

{`2 500/week`}

) : null} + + {props.hasKelp ? ( +
+

{'• Extra Kelp Miles '}

+

{`1x`}

+
+ ) : null} + + {props.hasKelpNEngenlayer ? ( + <> +
+

{'• Extra Kelp Miles '}

+

{`1x`}

+
+
+

{'• Extra EigenLayer Points '}

+

{`1x`}

+
+ + ) : null}
); } -function VaultForwardAPR({currentVault}: {currentVault: TYDaemonVault}): ReactElement { +function VaultForwardAPY({currentVault}: {currentVault: TYDaemonVault}): ReactElement { const isEthMainnet = currentVault.chainID === 1; - const hasPendleArbRewards = - currentVault.address === toAddress('0x044E75fCbF7BD3f8f4577FF317554e9c0037F145') || - currentVault.address === toAddress('0x0F2ae7531A83982F15ff1D26B165E2bF3D7566da') || - currentVault.address === toAddress('0x1Dd930ADD968ff5913C3627dAA1e6e6FCC9dc544') || - currentVault.address === toAddress('0x34a2b066AF16409648eF15d239E656edB8790ca0'); + const hasPendleArbRewards = currentVault.address === toAddress('0x1Dd930ADD968ff5913C3627dAA1e6e6FCC9dc544'); + const hasKelpNEngenlayer = currentVault.address === toAddress('0xDDa02A2FA0bb0ee45Ba9179a3fd7e65E5D3B2C90'); + const hasKelp = currentVault.address === toAddress('0x1Dd930ADD968ff5913C3627dAA1e6e6FCC9dc544'); /********************************************************************************************** - ** If there is no forwardAPR, we only have the historical APR to display. + ** If there is no forwardAPY, we only have the historical APY to display. **********************************************************************************************/ if (currentVault.apr.forwardAPR.type === '') { - const hasZeroAPR = isZero(currentVault.apr?.netAPR) || Number((currentVault.apr?.netAPR || 0).toFixed(2)) === 0; - const boostedAPR = currentVault.apr.extra.stakingRewardsAPR + currentVault.apr.netAPR; - const hasZeroBoostedAPR = isZero(boostedAPR) || Number(boostedAPR.toFixed(2)) === 0; + const hasZeroAPY = isZero(currentVault.apr?.netAPR) || Number((currentVault.apr?.netAPR || 0).toFixed(2)) === 0; + const boostedAPY = currentVault.apr.extra.stakingRewardsAPR + currentVault.apr.netAPR; + const hasZeroBoostedAPY = isZero(boostedAPY) || Number(boostedAPY.toFixed(2)) === 0; if (currentVault.apr?.extra.stakingRewardsAPR > 0) { return ( @@ -149,21 +198,27 @@ function VaultForwardAPR({currentVault}: {currentVault: TYDaemonVault}): ReactEl 'underline decoration-neutral-600/30 decoration-dotted underline-offset-4 transition-opacity hover:decoration-neutral-600' }> - - +
); } @@ -176,23 +231,27 @@ function VaultForwardAPR({currentVault}: {currentVault: TYDaemonVault}): ReactEl fallback={'NEW'}> - +
); } /********************************************************************************************** - ** If we are on eth mainnet and the vault has a boost, we display the APR with the boost. + ** If we are on eth mainnet and the vault has a boost, we display the APY with the boost. ** This is mostly valid for Curve vaults. **********************************************************************************************/ if (isEthMainnet && currentVault.apr.forwardAPR.composite?.boost > 0 && !currentVault.apr.extra.stakingRewardsAPR) { - const unBoostedAPR = currentVault.apr.forwardAPR.netAPR / currentVault.apr.forwardAPR.composite.boost; + const unBoostedAPY = currentVault.apr.forwardAPR.netAPR / currentVault.apr.forwardAPR.composite.boost; return (
@@ -221,9 +280,11 @@ function VaultForwardAPR({currentVault}: {currentVault: TYDaemonVault}): ReactEl {`BOOST ${formatAmount(currentVault.apr.forwardAPR.composite?.boost, 2, 2)}x`} -
@@ -232,30 +293,30 @@ function VaultForwardAPR({currentVault}: {currentVault: TYDaemonVault}): ReactEl } /********************************************************************************************** - ** Display the APR including the rewards APR if the rewards APR is greater than 0. + ** Display the APY including the rewards APY if the rewards APY is greater than 0. **********************************************************************************************/ - const sumOfRewardsAPR = currentVault.apr.extra.stakingRewardsAPR + currentVault.apr.extra.gammaRewardAPR; + const sumOfRewardsAPY = currentVault.apr.extra.stakingRewardsAPR + currentVault.apr.extra.gammaRewardAPR; const isSourceVeYFI = currentVault.staking.source === 'VeYFI'; - if (sumOfRewardsAPR > 0) { + if (sumOfRewardsAPY > 0) { let veYFIRange: [number, number] | undefined = undefined; - let estAPRRange: [number, number] | undefined = undefined; - let boostedAPR: number; - let hasZeroBoostedAPR: boolean; + let estAPYRange: [number, number] | undefined = undefined; + let boostedAPY: number; + let hasZeroBoostedAPY: boolean; if (isSourceVeYFI) { veYFIRange = [ currentVault.apr.extra.stakingRewardsAPR / 10 + currentVault.apr.extra.gammaRewardAPR, - sumOfRewardsAPR + sumOfRewardsAPY ] as [number, number]; - boostedAPR = veYFIRange[0] + currentVault.apr.forwardAPR.netAPR; - hasZeroBoostedAPR = isZero(boostedAPR) || Number(boostedAPR.toFixed(2)) === 0; - estAPRRange = [ + boostedAPY = veYFIRange[0] + currentVault.apr.forwardAPR.netAPR; + hasZeroBoostedAPY = isZero(boostedAPY) || Number(boostedAPY.toFixed(2)) === 0; + estAPYRange = [ veYFIRange[0] + currentVault.apr.forwardAPR.netAPR, veYFIRange[1] + currentVault.apr.forwardAPR.netAPR ] as [number, number]; } else { - boostedAPR = sumOfRewardsAPR + currentVault.apr.forwardAPR.netAPR; - hasZeroBoostedAPR = isZero(boostedAPR) || Number(boostedAPR.toFixed(2)) === 0; + boostedAPY = sumOfRewardsAPY + currentVault.apr.forwardAPR.netAPR; + hasZeroBoostedAPY = isZero(boostedAPY) || Number(boostedAPY.toFixed(2)) === 0; } return ( @@ -272,31 +333,31 @@ function VaultForwardAPR({currentVault}: {currentVault: TYDaemonVault}): ReactEl 'underline decoration-neutral-600/30 decoration-dotted underline-offset-4 transition-opacity hover:decoration-neutral-600' }> {/* */} - {estAPRRange ? ( + {estAPYRange ? (  →  ) : ( @@ -304,24 +365,30 @@ function VaultForwardAPR({currentVault}: {currentVault: TYDaemonVault}): ReactEl - - +
); } /********************************************************************************************** - ** Display the current spot APR, retrieved from the V3Oracle, only if the current APR is + ** Display the current spot APY, retrieved from the V3Oracle, only if the current APY is ** greater than 0. **********************************************************************************************/ - const hasCurrentAPR = !isZero(currentVault?.apr.forwardAPR.netAPR); - if (hasCurrentAPR) { + const hasCurrentAPY = !isZero(currentVault?.apr.forwardAPR.netAPR); + if (hasCurrentAPY) { return (
@@ -338,12 +405,16 @@ function VaultForwardAPR({currentVault}: {currentVault: TYDaemonVault}): ReactEl /> - +
); } - const hasZeroAPR = isZero(currentVault.apr?.netAPR) || Number((currentVault.apr?.netAPR || 0).toFixed(2)) === 0; + const hasZeroAPY = isZero(currentVault.apr?.netAPR) || Number((currentVault.apr?.netAPR || 0).toFixed(2)) === 0; return (
@@ -355,22 +426,26 @@ function VaultForwardAPR({currentVault}: {currentVault: TYDaemonVault}): ReactEl fallback={'NEW'}> {currentVault?.info?.isBoosted ? '⚡️ ' : ''} - +
); } -function VaultHistoricalAPR({currentVault}: {currentVault: TYDaemonVault}): ReactElement { - const hasZeroAPR = isZero(currentVault.apr?.netAPR) || Number((currentVault.apr?.netAPR || 0).toFixed(2)) === 0; - const monthlyAPR = currentVault.apr.points.monthAgo; - const weeklyAPR = currentVault.apr.points.weekAgo; +function VaultHistoricalAPY({currentVault}: {currentVault: TYDaemonVault}): ReactElement { + const hasZeroAPY = isZero(currentVault.apr?.netAPR) || Number((currentVault.apr?.netAPR || 0).toFixed(2)) === 0; + const monthlyAPY = currentVault.apr.points.monthAgo; + const weeklyAPY = currentVault.apr.points.weekAgo; if (currentVault.apr?.extra.stakingRewardsAPR > 0) { return ( @@ -385,8 +460,8 @@ function VaultHistoricalAPR({currentVault}: {currentVault: TYDaemonVault}): Reac 'underline decoration-neutral-600/30 decoration-dotted underline-offset-4 transition-opacity hover:decoration-neutral-600' }> @@ -403,10 +478,10 @@ function VaultHistoricalAPR({currentVault}: {currentVault: TYDaemonVault}): Reac className={ 'font-number flex w-full flex-row justify-between space-x-4 whitespace-nowrap text-neutral-400 md:text-xs' }> -

{'• Base APR '}

+

{'• Base APY '}

@@ -416,7 +491,7 @@ function VaultHistoricalAPR({currentVault}: {currentVault: TYDaemonVault}): Reac className={ 'font-number flex w-full flex-row justify-between space-x-4 whitespace-nowrap text-neutral-400 md:text-xs' }> -

{'• Rewards APR '}

+

{'• Rewards APY '}

{'N/A'}

@@ -434,8 +509,8 @@ function VaultHistoricalAPR({currentVault}: {currentVault: TYDaemonVault}): Reac shouldRender={!currentVault.apr?.type.includes('new')} fallback={'NEW'}> @@ -614,15 +689,15 @@ export function VaultsV3ListRow({currentVault}: {currentVault: TYDaemonVault}):
-

{'Estimated APR'}

- +

{'Estimated APY'}

+
-

{'Historical APR'}

- +

{'Historical APY'}

+
+

{label}

+

+ +  →  + +

+
+ ); + } + return (

{label}

@@ -102,43 +140,54 @@ export function VaultDetailsAbout({ />
- {'APR'} + {'APY'}
- - -
- {apr.extra.stakingRewardsAPR > 0 && (
- - diff --git a/apps/vaults/components/details/tabs/VaultDetailsStrategies.tsx b/apps/vaults/components/details/tabs/VaultDetailsStrategies.tsx index 683cf297d..12b616554 100755 --- a/apps/vaults/components/details/tabs/VaultDetailsStrategies.tsx +++ b/apps/vaults/components/details/tabs/VaultDetailsStrategies.tsx @@ -2,7 +2,7 @@ import {useMemo, useState} from 'react'; import {useFetch} from '@builtbymom/web3/hooks/useFetch'; import {formatAmount, formatPercent, toAddress, toBigInt, toNormalizedValue, truncateHex} from '@builtbymom/web3/utils'; import {useIsMounted} from '@react-hookz/web'; -import {findLatestApr} from '@vaults/components/details/tabs/findLatestApr'; +import {findLatestAPY} from '@vaults/components/details/tabs/findLatestAPY'; import {GraphForStrategyReports} from '@vaults/components/graphs/GraphForStrategyReports'; import {yDaemonReportsSchema} from '@vaults/schemas/reportsSchema'; import {Renderable} from '@yearn-finance/web-lib/components/Renderable'; @@ -32,7 +32,7 @@ export function VaultDetailsStrategy({currentVault, strategy}: TProps): ReactEle schema: yDaemonReportsSchema }); - const latestApr = useMemo((): number => findLatestApr(reports), [reports]); + const latestApr = useMemo((): number => findLatestAPY(reports), [reports]); const {lastReport} = strategy.details || {}; const lastReportTime = lastReport ? formatDuration(lastReport * 1000 - new Date().valueOf(), true) : 'N/A'; @@ -108,7 +108,7 @@ export function VaultDetailsStrategy({currentVault, strategy}: TProps): ReactEle
-

{'APR'}

+

{'APY'}

{formatPercent(latestApr, 0)}
diff --git a/apps/vaults/components/details/tabs/findLatestApr.ts b/apps/vaults/components/details/tabs/findLatestAPY.ts similarity index 87% rename from apps/vaults/components/details/tabs/findLatestApr.ts rename to apps/vaults/components/details/tabs/findLatestAPY.ts index 04f685de4..2f8851ec4 100644 --- a/apps/vaults/components/details/tabs/findLatestApr.ts +++ b/apps/vaults/components/details/tabs/findLatestAPY.ts @@ -2,7 +2,7 @@ import {isZero} from '@builtbymom/web3/utils'; import type {TYDaemonReport, TYDaemonReports} from '@vaults/schemas/reportsSchema'; -export function findLatestApr(reports?: TYDaemonReports): number { +export function findLatestAPY(reports?: TYDaemonReports): number { if (!reports?.length) { return 0; } diff --git a/apps/vaults/components/graphs/GraphForStrategyReports.tsx b/apps/vaults/components/graphs/GraphForStrategyReports.tsx index 609855481..bc2aba905 100755 --- a/apps/vaults/components/graphs/GraphForStrategyReports.tsx +++ b/apps/vaults/components/graphs/GraphForStrategyReports.tsx @@ -63,7 +63,7 @@ export function GraphForStrategyReports({ return ( <> -

{'Historical APR'}

+

{'Historical APY'}

{formatDate(label)}

-

{'APR'}

+

{'APY'}

{formatPercent(Number(value))} diff --git a/apps/vaults/components/list/VaultsListRow.tsx b/apps/vaults/components/list/VaultsListRow.tsx index 9cca1a82b..e6049a35c 100755 --- a/apps/vaults/components/list/VaultsListRow.tsx +++ b/apps/vaults/components/list/VaultsListRow.tsx @@ -13,15 +13,15 @@ import type {ReactElement} from 'react'; import type {TYDaemonVault} from '@yearn-finance/web-lib/utils/schemas/yDaemonVaultsSchemas'; import type {TNormalizedBN} from '@builtbymom/web3/types'; -export function VaultForwardAPR({currentVault}: {currentVault: TYDaemonVault}): ReactElement { +export function VaultForwardAPY({currentVault}: {currentVault: TYDaemonVault}): ReactElement { const isEthMainnet = currentVault.chainID === 1; - const extraAPR = currentVault.apr.extra.stakingRewardsAPR + currentVault.apr.extra.gammaRewardAPR; + const extraAPY = currentVault.apr.extra.stakingRewardsAPR + currentVault.apr.extra.gammaRewardAPR; if (currentVault.apr.forwardAPR.type === '') { - const hasZeroAPR = + const hasZeroAPY = isZero(currentVault.apr?.netAPR) || Number(Number(currentVault.apr?.netAPR || 0).toFixed(2)) === 0; - const boostedAPR = extraAPR + currentVault.apr.netAPR; - const hasZeroBoostedAPR = isZero(boostedAPR) || Number(boostedAPR.toFixed(2)) === 0; + const boostedAPY = extraAPY + currentVault.apr.netAPR; + const hasZeroBoostedAPY = isZero(boostedAPY) || Number(boostedAPY.toFixed(2)) === 0; if (currentVault.apr?.extra.stakingRewardsAPR > 0) { return ( @@ -37,8 +37,8 @@ export function VaultForwardAPR({currentVault}: {currentVault: TYDaemonVault}): 'underline decoration-neutral-600/30 decoration-dotted underline-offset-4 transition-opacity hover:decoration-neutral-600' }> @@ -55,7 +55,7 @@ export function VaultForwardAPR({currentVault}: {currentVault: TYDaemonVault}): className={ 'font-number flex w-full flex-row justify-between space-x-4 whitespace-nowrap text-neutral-400 md:text-xs' }> -

{'• Base APR '}

+

{'• Base APY '}

-

{'• Rewards APR '}

+

{'• Rewards APY '}

@@ -91,7 +91,7 @@ export function VaultForwardAPR({currentVault}: {currentVault: TYDaemonVault}): fallback={'NEW'}> @@ -101,8 +101,8 @@ export function VaultForwardAPR({currentVault}: {currentVault: TYDaemonVault}): ); } - if (isEthMainnet && currentVault.apr.forwardAPR.composite?.boost > 0 && !extraAPR) { - const unBoostedAPR = currentVault.apr.forwardAPR.netAPR / currentVault.apr.forwardAPR.composite.boost; + if (isEthMainnet && currentVault.apr.forwardAPR.composite?.boost > 0 && !extraAPY) { + const unBoostedAPY = currentVault.apr.forwardAPR.netAPR / currentVault.apr.forwardAPR.composite.boost; return (
@@ -124,7 +124,7 @@ export function VaultForwardAPR({currentVault}: {currentVault: TYDaemonVault}): 0 && !extraAPR + isEthMainnet && currentVault.apr.forwardAPR.composite?.boost > 0 && !extraAPY }> {`BOOST ${formatAmount(currentVault.apr.forwardAPR.composite?.boost, 2, 2)}x`} @@ -139,10 +139,10 @@ export function VaultForwardAPR({currentVault}: {currentVault: TYDaemonVault}): className={ 'font-number flex w-full flex-row justify-between space-x-4 whitespace-nowrap text-neutral-400 md:text-xs' }> -

{'• Base APR '}

+

{'• Base APY '}

@@ -163,9 +163,9 @@ export function VaultForwardAPR({currentVault}: {currentVault: TYDaemonVault}): ); } - if (extraAPR > 0) { - const boostedAPR = extraAPR + currentVault.apr.forwardAPR.netAPR; - const hasZeroBoostedAPR = isZero(boostedAPR) || Number(boostedAPR.toFixed(2)) === 0; + if (extraAPY > 0) { + const boostedAPY = extraAPY + currentVault.apr.forwardAPR.netAPR; + const hasZeroBoostedAPY = isZero(boostedAPY) || Number(boostedAPY.toFixed(2)) === 0; return (
@@ -179,8 +179,8 @@ export function VaultForwardAPR({currentVault}: {currentVault: TYDaemonVault}): 'underline decoration-neutral-600/30 decoration-dotted underline-offset-4 transition-opacity hover:decoration-neutral-600' }> @@ -197,7 +197,7 @@ export function VaultForwardAPR({currentVault}: {currentVault: TYDaemonVault}): className={ 'font-number flex w-full flex-row justify-between space-x-4 whitespace-nowrap text-neutral-400 md:text-xs' }> -

{'• Base APR '}

+

{'• Base APY '}

-

{'• Rewards APR '}

+

{'• Rewards APY '}

@@ -226,7 +226,7 @@ export function VaultForwardAPR({currentVault}: {currentVault: TYDaemonVault}): ); } - const hasZeroAPR = + const hasZeroAPY = isZero(currentVault.apr?.netAPR) || Number(Number(currentVault.apr?.netAPR || 0).toFixed(2)) === 0; return (
@@ -235,7 +235,7 @@ export function VaultForwardAPR({currentVault}: {currentVault: TYDaemonVault}): shouldRender={!currentVault.apr.forwardAPR?.type.includes('new')} fallback={'NEW'}> 0) { return ( @@ -265,8 +265,8 @@ function VaultHistoricalAPR({currentVault}: {currentVault: TYDaemonVault}): Reac 'underline decoration-neutral-600/30 decoration-dotted underline-offset-4 transition-opacity hover:decoration-neutral-600' }> @@ -283,10 +283,10 @@ function VaultHistoricalAPR({currentVault}: {currentVault: TYDaemonVault}): Reac className={ 'font-number flex w-full flex-row justify-between space-x-4 whitespace-nowrap text-neutral-400 md:text-xs' }> -

{'• Base APR '}

+

{'• Base APY '}

@@ -296,7 +296,7 @@ function VaultHistoricalAPR({currentVault}: {currentVault: TYDaemonVault}): Reac className={ 'font-number flex w-full flex-row justify-between space-x-4 whitespace-nowrap text-neutral-400 md:text-xs' }> -

{'• Rewards APR '}

+

{'• Rewards APY '}

{'N/A'}

@@ -314,8 +314,8 @@ function VaultHistoricalAPR({currentVault}: {currentVault: TYDaemonVault}): Reac shouldRender={!currentVault.apr?.type.includes('new')} fallback={'NEW'}> @@ -447,15 +447,15 @@ export function VaultsListRow({currentVault}: {currentVault: TYDaemonVault}): Re
-

{'Estimated APR'}

- +

{'Estimated APY'}

+
-

{'Historical APR'}

- +

{'Historical APY'}

+
{ - if (sortBy !== 'estAPR') { + if (sortBy !== 'estAPY') { return vaultList; } return vaultList.sort((a, b): number => @@ -39,63 +32,64 @@ export function useSortVaults( ); }, [sortBy, sortDirection, vaultList]); - const sortedByForwardAPR = useCallback((): TYDaemonVaults => { - if (sortBy !== 'estAPR') { + const sortedByForwardAPR = useCallback((): TYDaemonVaults => { + if (sortBy !== 'estAPY') { return vaultList; } return vaultList.sort((a, b): number => { - let aAPR = 0; - if (a.apr.forwardAPR.type === '') { - aAPR = a.apr.extra.stakingRewardsAPR + a.apr.netAPR; - } else if (a.chainID === 1 && a.apr.forwardAPR.composite.boost > 0 && !a.apr.extra.stakingRewardsAPR) { - aAPR = a.apr.forwardAPR.netAPR; - } else { - const sumOfRewardsAPR = a.apr.extra.stakingRewardsAPR + a.apr.extra.gammaRewardAPR; - const hasCurrentAPR = !isZero(a?.apr.forwardAPR.netAPR); - if (sumOfRewardsAPR > 0) { - aAPR = sumOfRewardsAPR + a.apr.forwardAPR.netAPR; - } else if (hasCurrentAPR) { - aAPR = a.apr.forwardAPR.netAPR; + let aAPY = 0; + if (a.apr.forwardAPR.type === '') { + aAPY = a.apr.extra.stakingRewardsAPR + a.apr.netAPR; + } else if (a.chainID === 1 && a.apr.forwardAPR.composite.boost > 0 && !a.apr.extra.stakingRewardsAPR) { + aAPY = a.apr.forwardAPR.netAPR; } else { - aAPR = a.apr.netAPR; + const sumOfRewardsAPY = a.apr.extra.stakingRewardsAPR + a.apr.extra.gammaRewardAPR; + const hasCurrentAPY = !isZero(a?.apr.forwardAPR.netAPR); + if (sumOfRewardsAPY > 0) { + aAPY = sumOfRewardsAPY + a.apr.forwardAPR.netAPR; + } else if (hasCurrentAPY) { + aAPY = a.apr.forwardAPR.netAPR; + } else { + aAPY = a.apr.netAPR; + } } - } - let bAPR = 0; - if (b.apr.forwardAPR.type === '') { - bAPR = b.apr.extra.stakingRewardsAPR + b.apr.netAPR; - } else if (b.chainID === 1 && b.apr.forwardAPR.composite.boost > 0 && !b.apr.extra.stakingRewardsAPR) { - bAPR = b.apr.forwardAPR.netAPR; - } else { - const sumOfRewardsAPR = b.apr.extra.stakingRewardsAPR + b.apr.extra.gammaRewardAPR; - const hasCurrentAPR = !isZero(b?.apr.forwardAPR.netAPR); - if (sumOfRewardsAPR > 0) { - bAPR = sumOfRewardsAPR + b.apr.forwardAPR.netAPR; - } else if (hasCurrentAPR) { - bAPR = b.apr.forwardAPR.netAPR; + let bAPY = 0; + if (b.apr.forwardAPR.type === '') { + bAPY = b.apr.extra.stakingRewardsAPR + b.apr.netAPR; + } else if (b.chainID === 1 && b.apr.forwardAPR.composite.boost > 0 && !b.apr.extra.stakingRewardsAPR) { + bAPY = b.apr.forwardAPR.netAPR; } else { - bAPR = b.apr.netAPR; + const sumOfRewardsAPY = b.apr.extra.stakingRewardsAPR + b.apr.extra.gammaRewardAPR; + const hasCurrentAPY = !isZero(b?.apr.forwardAPR.netAPR); + if (sumOfRewardsAPY > 0) { + bAPY = sumOfRewardsAPY + b.apr.forwardAPR.netAPR; + } else if (hasCurrentAPY) { + bAPY = b.apr.forwardAPR.netAPR; + } else { + bAPY = b.apr.netAPR; + } } } return numberSort({ - a: aAPR, - b: bAPR, + a: aAPY, + b: bAPY, sortDirection }); }); }, [sortDirection, vaultList, sortBy]); - const sortedByAPR = useCallback((): TYDaemonVaults => { - if (sortBy !== 'apr') { + const sortedByAPR = useCallback((): TYDaemonVaults => { + if (sortBy !== 'APY') { return vaultList; } return vaultList.sort((a, b): number => - numberSort({ - a: a.apr?.netAPR || 0, - b: b.apr?.netAPR || 0, - sortDirection - }) + numberSort({ + a: a.apr?.netAPR || 0, + b: b.apr?.netAPR || 0, + sortDirection + }) ); }, [sortDirection, vaultList, sortBy]); @@ -194,11 +188,11 @@ export function useSortVaults( if (sortBy === 'name') { return sortedByName(); } - if (sortBy === 'estAPR') { - return sortedByForwardAPR(); + if (sortBy === 'estAPY') { + return sortedByForwardAPY(); } - if (sortBy === 'apr') { - return sortedByAPR(); + if (sortBy === 'APY') { + return sortedByAPY(); } if (sortBy === 'tvl') { return sortedByTVL(); @@ -222,9 +216,9 @@ export function useSortVaults( sortDirection, sortBy, sortedByName, - sortedByForwardAPR, - sortedByAPR, + sortedByForwardAPY, sortedByTVL, + sortedByAPY, sortedByDeposited, sortedByAvailable, sortedByFeaturingScore, diff --git a/apps/vaults/hooks/useVaultsQueryArgs.ts b/apps/vaults/hooks/useVaultsQueryArgs.ts index 777c0e044..ecb8dbbb6 100644 --- a/apps/vaults/hooks/useVaultsQueryArgs.ts +++ b/apps/vaults/hooks/useVaultsQueryArgs.ts @@ -281,7 +281,7 @@ function useQueryArguments(props: { router.replace({pathname: router.pathname, query: queryArgs}, undefined, {shallow: true}); return; } - queryArgs.sortDirection = value; + queryArgs.sortDirection = value as string; router.replace({pathname: router.pathname, query: queryArgs}, undefined, {shallow: true}); }, onChangeSortBy: (value): void => { diff --git a/next-env.d.ts b/next-env.d.ts index 4f11a03dc..a4a7b3f5c 100755 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information. diff --git a/package.json b/package.json index 243f04f66..c78d5bf1a 100644 --- a/package.json +++ b/package.json @@ -13,11 +13,10 @@ "prettier-format": "prettier --config .prettierrc \"./**/**/*.{json,js,ts,tsx,scss,md}\" --write", "tslint": "tsc -p tsconfig.json --noEmit", "bump": "bump", - "prepare": "husky install", "test": "vitest run" }, "dependencies": { - "@builtbymom/web3": "0.0.157", + "@builtbymom/web3": "0.0.202", "@cowprotocol/cow-sdk": "2.1.0", "@headlessui/react": "^2.0.4", "@rainbow-me/rainbowkit": "2.1.3", diff --git a/pages/v3/index.tsx b/pages/v3/index.tsx index 7e17e8a1c..94d2aeb65 100644 --- a/pages/v3/index.tsx +++ b/pages/v3/index.tsx @@ -335,7 +335,7 @@ function ListOfVaults(): ReactElement { { + onSort={(newSortBy: string, newSortDirection: TSortDirection): void => { if (newSortDirection === '') { onChangeSortBy('featuringScore'); onChangeSortDirection(''); @@ -352,8 +352,8 @@ function ListOfVaults(): ReactElement { sortable: true, className: 'col-span-1 whitespace-nowrap' }, - {label: 'Est. APR', value: 'estAPR', sortable: true, className: 'col-span-2'}, - {label: 'Hist. APR', value: 'apr', sortable: true, className: 'col-span-2'}, + {label: 'Est. APY', value: 'estAPY', sortable: true, className: 'col-span-2'}, + {label: 'Hist. APY', value: 'APY', sortable: true, className: 'col-span-2'}, {label: 'Available', value: 'available', sortable: true, className: 'col-span-2'}, {label: 'Holdings', value: 'deposited', sortable: true, className: 'col-span-2'}, {label: 'Deposits', value: 'tvl', sortable: true, className: 'col-span-2'} diff --git a/pages/vaults/index.tsx b/pages/vaults/index.tsx index e70885fa5..d320c2f58 100644 --- a/pages/vaults/index.tsx +++ b/pages/vaults/index.tsx @@ -180,7 +180,7 @@ function ListOfVaults(): ReactElement { const {currentItems, paginationProps} = usePagination({ data: filteredByChains, - itemsPerPage: 50 || sortedVaultsToDisplay.length + itemsPerPage: sortedVaultsToDisplay.length || 50 }); return ( @@ -209,15 +209,15 @@ function ListOfVaults(): ReactElement { dataClassName={'grid-cols-10'} sortBy={sortBy} sortDirection={sortDirection} - onSort={(newSortBy: string, newSortDirection: string): void => { + onSort={(newSortBy: string, newSortDirection: TSortDirection): void => { onChangeSortBy(newSortBy as TPossibleSortBy); onChangeSortDirection(newSortDirection as TSortDirection); }} items={[ {label: , value: 'chain', sortable: false, className: 'col-span-1'}, {label: 'Token', value: 'name', sortable: true}, - {label: 'Est. APR', value: 'estAPR', sortable: true, className: 'col-span-2'}, - {label: 'Hist. APR', value: 'apr', sortable: true, className: 'col-span-2'}, + {label: 'Est. APY', value: 'estAPY', sortable: true, className: 'col-span-2'}, + {label: 'Hist. APY', value: 'APY', sortable: true, className: 'col-span-2'}, {label: 'Available', value: 'available', sortable: true, className: 'col-span-2'}, {label: 'Holdings', value: 'deposited', sortable: true, className: 'col-span-2'}, {label: 'Deposits', value: 'tvl', sortable: true, className: 'col-span-2'}