feat/apr system

.eslintrc.js

@@ -1,5 +1,10 @@
 module.exports = {
-	extends: ['./node_modules/@yearn-finance/web-lib/.eslintrc.cjs', 'plugin:@next/next/recommended', 'prettier'],
+	extends: [
+		'./node_modules/@yearn-finance/web-lib/.eslintrc.cjs',
+		'plugin:@next/next/recommended',
+		'prettier',
+		'plugin:react-hooks/recommended'
+	],
 	parser: '@typescript-eslint/parser',
 	parserOptions: {
 		ecmaFeatures: {
@@ -24,6 +29,12 @@ module.exports = {
 				ImportDeclaration: {multiline: true, consistent: true},
 				ExportDeclaration: {multiline: true, minProperties: 3}
 			}
+		],
+		'react-hooks/exhaustive-deps': [
+			'warn',
+			{
+				additionalHooks: '^useAsyncTrigger$'
+			}
 		]
 	}
 };

.prettierrc

@@ -7,5 +7,6 @@
 	"bracketSpacing": false,
 	"arrowParens": "avoid",
 	"bracketSameLine": true,
-	"singleAttributePerLine": true
+	"singleAttributePerLine": true,
+	"printWidth": 120
 }

apps/common/components/AmountInput.tsx

@@ -18,7 +18,19 @@ type TAmountInputProps = {
 	onMaxClick?: () => void;
 };
 
-export function AmountInput({amount, maxAmount, label, placeholder, legend, error, disabled, loading, onAmountChange, onLegendClick, onMaxClick}: TAmountInputProps): ReactElement {
+export function AmountInput({
+	amount,
+	maxAmount,
+	label,
+	placeholder,
+	legend,
+	error,
+	disabled,
+	loading,
+	onAmountChange,
+	onLegendClick,
+	onMaxClick
+}: TAmountInputProps): ReactElement {
 	let displayedAmount = amount.toString();
 	if (isZero(displayedAmount) && !disabled) {
 		displayedAmount = '';
@@ -31,7 +43,9 @@ export function AmountInput({amount, maxAmount, label, placeholder, legend, erro
 			{label && <p className={'mb-1 w-full truncate text-base text-neutral-600'}>{label}</p>}
 			<div className={'relative flex w-full items-center justify-center'}>
 				<input
-					className={`h-10 w-full p-2 font-mono text-base font-normal outline-none ${maxAmount && !disabled ? 'pr-12' : null} ${
+					className={`h-10 w-full p-2 font-mono text-base font-normal outline-none ${
+						maxAmount && !disabled ? 'pr-12' : null
+					} ${
 						error ? 'border border-solid border-[#EA5204] focus:border-[#EA5204]' : 'border-0 border-none'
 					} ${disabled ? 'bg-neutral-300 text-neutral-600' : 'bg-neutral-0'}`}
 					type={'number'}
@@ -45,7 +59,9 @@ export function AmountInput({amount, maxAmount, label, placeholder, legend, erro
 				<Renderable shouldRender={!!maxAmount && !disabled}>
 					<button
 						onClick={onMaxClick ? (): void => onMaxClick() : undefined}
-						className={'absolute right-2 ml-2 h-6 cursor-pointer border-none bg-neutral-900 px-2 py-1 text-xs text-neutral-0 transition-colors hover:bg-neutral-700'}>
+						className={
+							'absolute right-2 ml-2 h-6 cursor-pointer border-none bg-neutral-900 px-2 py-1 text-xs text-neutral-0 transition-colors hover:bg-neutral-700'
+						}>
 						{'Max'}
 					</button>
 				</Renderable>

apps/common/components/AppHeader.tsx

@@ -86,7 +86,8 @@ function LogoPopover(): ReactElement {
 				leave={'transition ease-in duration-150'}
 				leaveFrom={'opacity-100 translate-y-0'}
 				leaveTo={'opacity-0 translate-y-1'}>
-				<Popover.Panel className={'absolute left-1/2 z-10 mt-6 w-80 -translate-x-1/2 px-4 pt-4 sm:px-0 md:w-96'}>
+				<Popover.Panel
+					className={'absolute left-1/2 z-10 mt-6 w-80 -translate-x-1/2 px-4 pt-4 sm:px-0 md:w-96'}>
 					<div className={'overflow-hidden border border-neutral-200 shadow-lg'}>
 						<div className={'relative grid grid-cols-2 bg-neutral-0 md:grid-cols-3'}>
 							{[...Object.values(APPS), YETH]
@@ -100,7 +101,9 @@ function LogoPopover(): ReactElement {
 											onClick={(): void => set_isShowing(false)}>
 											<div
 												onClick={(): void => set_isShowing(false)}
-												className={'flex cursor-pointer flex-col items-center p-4 transition-colors hover:bg-neutral-200'}>
+												className={
+													'flex cursor-pointer flex-col items-center p-4 transition-colors hover:bg-neutral-200'
+												}>
 												<div>{cloneElement(icon)}</div>
 												<div className={'pt-2 text-center'}>
 													<b className={'text-base'}>{name}</b>

apps/common/components/BalanceReminderPopover.tsx

@@ -3,16 +3,17 @@ import {Popover, Transition} from '@headlessui/react';
 import {captureException} from '@sentry/nextjs';
 import {Renderable} from '@yearn-finance/web-lib/components/Renderable';
 import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
-import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID';
 import {IconAddToMetamask} from '@yearn-finance/web-lib/icons/IconAddToMetamask';
 import {IconCross} from '@yearn-finance/web-lib/icons/IconCross';
 import {IconWallet} from '@yearn-finance/web-lib/icons/IconWallet';
 import {toAddress, truncateHex} from '@yearn-finance/web-lib/utils/address';
+import {cl} from '@yearn-finance/web-lib/utils/cl';
 import {formatAmount} from '@yearn-finance/web-lib/utils/format.number';
 import {ImageWithFallback} from '@common/components/ImageWithFallback';
 import {useWallet} from '@common/contexts/useWallet';
 import {useYearn} from '@common/contexts/useYearn';
 import {useBalance} from '@common/hooks/useBalance';
+import {IconQuestion} from '@common/icons/IconQuestion';
 
 import type {ReactElement} from 'react';
 import type {TAddress} from '@yearn-finance/web-lib/types';
@@ -28,10 +29,14 @@ type TBalanceReminderElement = {
 
 function TokenItem({element}: {element: TBalanceReminderElement}): ReactElement {
 	const {provider} = useWeb3();
-	const {safeChainID} = useChainID();
 	const balance = useBalance({address: element.address, chainID: element.chainID});
 
-	async function addTokenToMetamask(address: TAddress, symbol: string, decimals: number, image: string): Promise<void> {
+	async function addTokenToMetamask(
+		address: TAddress,
+		symbol: string,
+		decimals: number,
+		image: string
+	): Promise<void> {
 		if (!provider) {
 			return;
 		}
@@ -63,7 +68,9 @@ function TokenItem({element}: {element: TBalanceReminderElement}): ReactElement
 							width={32}
 							height={32}
 							quality={90}
-							src={`${process.env.BASE_YEARN_ASSETS_URI}/${safeChainID}/${toAddress(element.address)}/logo-128.png`}
+							src={`${process.env.BASE_YEARN_ASSETS_URI}/${element.chainID}/${toAddress(
+								element.address
+							)}/logo-128.png`}
 						/>
 					</div>
 					<span className={'ml-2'}>{element.symbol}</span>
@@ -78,10 +85,14 @@ function TokenItem({element}: {element: TBalanceReminderElement}): ReactElement
 								element.address,
 								element.symbol,
 								element.decimals,
-								`${process.env.BASE_YEARN_ASSETS_URI}/${safeChainID}/${toAddress(element.address)}/logo-128.png`
+								`${process.env.BASE_YEARN_ASSETS_URI}/${element.chainID}/${toAddress(
+									element.address
+								)}/logo-128.png`
 							);
 						}}
-						className={'ml-4 h-4 w-4 cursor-pointer text-neutral-400 transition-colors hover:text-neutral-900'}
+						className={
+							'ml-4 h-4 w-4 cursor-pointer text-neutral-400 transition-colors hover:text-neutral-900'
+						}
 					/>
 				</span>
 			</span>
@@ -90,7 +101,7 @@ function TokenItem({element}: {element: TBalanceReminderElement}): ReactElement
 }
 
 export function BalanceReminderPopover(): ReactElement {
-	const {balances: tokens, isLoading} = useWallet();
+	const {balances: tokens, isLoading, triggerForknetBalances, shouldUseForknetBalances} = useWallet();
 	const {address, ens, isActive, onDesactivate} = useWeb3();
 	const {vaults} = useYearn();
 
@@ -153,16 +164,46 @@ export function BalanceReminderPopover(): ReactElement {
 						leave={'transition ease-in duration-150'}
 						leaveFrom={'opacity-100 translate-y-0'}
 						leaveTo={'opacity-0 translate-y-1'}>
-						<Popover.Panel className={'yearn--shadow absolute right-0 top-6 z-[1000] mt-3 w-screen max-w-xs md:-right-4 md:top-4'}>
+						<Popover.Panel
+							className={
+								'yearn--shadow absolute right-0 top-6 z-[1000] mt-3 w-screen max-w-xs md:-right-4 md:top-4'
+							}>
 							<div className={'overflow-hidden'}>
 								<div className={'relative bg-neutral-0 p-0'}>
-									<div className={'flex items-center justify-center border-b border-neutral-300 py-4 text-center'}>
-										<b>{isActive && address && ens ? ens : isActive && address ? truncateHex(address, 5) : 'Connect wallet'}</b>
+									<div
+										className={cl(
+											'absolute left-4 top-4 opacity-0 transition-colors hover:opacity-100',
+											shouldUseForknetBalances ? 'opacity-100' : 'opacity-0'
+										)}>
+										<button
+											onClick={(): void => {
+												// Special command to enable dev forknet balances
+												triggerForknetBalances();
+											}}
+											className={
+												'flex h-6 w-6 items-center justify-center rounded-full bg-neutral-200/50'
+											}>
+											<IconQuestion className={'h-4 w-4 text-neutral-600'} />
+										</button>
+									</div>
+									<div
+										className={
+											'flex items-center justify-center border-b border-neutral-300 py-4 text-center'
+										}>
+										<b>
+											{isActive && address && ens
+												? ens
+												: isActive && address
+												? truncateHex(address, 5)
+												: 'Connect wallet'}
+										</b>
 									</div>
 									<div className={'absolute right-4 top-4'}>
 										<button
 											onClick={onDesactivate}
-											className={'flex h-6 w-6 items-center justify-center rounded-full bg-neutral-200/50'}>
+											className={
+												'flex h-6 w-6 items-center justify-center rounded-full bg-neutral-200/50'
+											}>
 											<IconCross className={'h-4 w-4 text-neutral-600'} />
 										</button>
 									</div>

apps/common/components/Dropdown.tsx

@@ -31,7 +31,11 @@ const DropdownOption = (option: TDropdownOption): ReactElement => {
 					)}
 					<div>
 						<p className={`font-normal text-neutral-900 ${icon ? 'pl-2' : 'pl-0'}`}>{label}</p>
-						{description && <p className={`text-xxs font-normal text-neutral-600 ${icon ? 'pl-2' : 'pl-0'}`}>{description}</p>}
+						{description && (
+							<p className={`text-xxs font-normal text-neutral-600 ${icon ? 'pl-2' : 'pl-0'}`}>
+								{description}
+							</p>
+						)}
 					</div>
 				</div>
 			)}
@@ -76,12 +80,22 @@ export type TDropdownProps = {
 	className?: string;
 };
 
-export const Dropdown = ({selected, options, onChange, label, legend, isDisabled, className}: TDropdownProps): ReactElement => {
+export const Dropdown = ({
+	selected,
+	options,
+	onChange,
+	label,
+	legend,
+	isDisabled,
+	className
+}: TDropdownProps): ReactElement => {
 	const [isOpen, set_isOpen] = useThrottledState(false, 400);
 	const [search, set_search] = useState('');
 
 	const isSearching = search !== '';
-	const filteredOptions = isSearching ? options.filter(({label}): boolean => label.toLowerCase().includes(search.toLowerCase())) : options;
+	const filteredOptions = isSearching
+		? options.filter(({label}): boolean => label.toLowerCase().includes(search.toLowerCase()))
+		: options;
 
 	return (
 		<div className={className}>
@@ -136,7 +150,9 @@ export const Dropdown = ({selected, options, onChange, label, legend, isDisabled
 											isDisabled ? 'text-neutral-600' : 'text-neutral-900'
 										)}>
 										<Combobox.Input
-											className={'w-full cursor-default overflow-x-scroll border-none bg-transparent p-0 outline-none scrollbar-none'}
+											className={
+												'w-full cursor-default overflow-x-scroll border-none bg-transparent p-0 outline-none scrollbar-none'
+											}
 											displayValue={(option?: TDropdownOption): string => option?.label ?? '-'}
 											spellCheck={false}
 											onChange={(event): void => {
@@ -151,7 +167,9 @@ export const Dropdown = ({selected, options, onChange, label, legend, isDisabled
 								<div className={'absolute right-2 md:right-3'}>
 									<IconChevron
 										aria-hidden={'true'}
-										className={`h-6 w-6 transition-transform ${isOpen ? '-rotate-180' : 'rotate-0'}`}
+										className={`h-6 w-6 transition-transform ${
+											isOpen ? '-rotate-180' : 'rotate-0'
+										}`}
 									/>
 								</div>
 							</Combobox.Button>

apps/common/components/GaugeDropdown.tsx

@@ -14,9 +14,13 @@ function DropdownItem({option}: TDropdownGaugeItemProps): ReactElement {
 				<div
 					data-active={active}
 					className={'yearn--dropdown-menu-item w-full hover:bg-neutral-0/40'}>
-					<div className={'h-6 w-6 flex-none rounded-full'}>{option?.icon ? cloneElement(option.icon) : null}</div>
+					<div className={'h-6 w-6 flex-none rounded-full'}>
+						{option?.icon ? cloneElement(option.icon) : null}
+					</div>
 					<div className={'flex w-full flex-row items-center justify-between'}>
-						<p className={`${option.icon ? 'pl-2' : 'pl-0'} font-normal text-neutral-900`}>{option.label}</p>
+						<p className={`${option.icon ? 'pl-2' : 'pl-0'} font-normal text-neutral-900`}>
+							{option.label}
+						</p>
 						<p className={`${option.icon ? 'pl-2' : 'pl-0'} text-xs font-normal text-neutral-600`}>
 							{`APY ${formatPercent((option?.value?.APY || 0) * 100, 2, 2, 500)}`}
 						</p>
@@ -90,16 +94,27 @@ export function Dropdown({options, selected, onSelect, placeholder = ''}: TDropd
 				<>
 					<Combobox.Button
 						onClick={(): void => set_isOpen(!isOpen)}
-						className={'flex h-10 w-full items-center justify-between bg-neutral-0 p-2 text-base text-neutral-900 md:px-3'}>
+						className={
+							'flex h-10 w-full items-center justify-between bg-neutral-0 p-2 text-base text-neutral-900 md:px-3'
+						}>
 						<div className={'relative flex flex-row items-center'}>
 							<div
 								key={selected?.label}
 								className={'h-6 w-6 flex-none rounded-full'}>
-								{selected?.icon ? cloneElement(selected.icon) : <div className={'h-6 w-6 flex-none rounded-full bg-neutral-500'} />}
+								{selected?.icon ? (
+									cloneElement(selected.icon)
+								) : (
+									<div className={'h-6 w-6 flex-none rounded-full bg-neutral-500'} />
+								)}
 							</div>
-							<p className={'max-w-[90%] overflow-x-hidden text-ellipsis whitespace-nowrap pl-2 font-normal text-neutral-900 scrollbar-none md:max-w-full'}>
+							<p
+								className={
+									'max-w-[90%] overflow-x-hidden text-ellipsis whitespace-nowrap pl-2 font-normal text-neutral-900 scrollbar-none md:max-w-full'
+								}>
 								<Combobox.Input
-									className={'w-full cursor-default overflow-x-scroll border-none bg-transparent p-0 outline-none scrollbar-none'}
+									className={
+										'w-full cursor-default overflow-x-scroll border-none bg-transparent p-0 outline-none scrollbar-none'
+									}
 									displayValue={(option: TDropdownGaugeOption): string => option.label}
 									placeholder={placeholder}
 									spellCheck={false}

apps/common/components/HeroTimer.tsx

@@ -18,7 +18,10 @@ export function HeroTimer({endTime}: TProps): ReactElement {
 		<div className={'md:mb-0 md:mt-16'}>
 			<div className={'mx-auto flex w-full max-w-6xl flex-col items-center justify-center'}>
 				<div className={'mt-10 w-[300px] md:w-full'}>
-					<div className={'flex w-full items-center justify-center text-center text-4xl font-bold uppercase text-neutral-900 md:text-8xl'}>
+					<div
+						className={
+							'flex w-full items-center justify-center text-center text-4xl font-bold uppercase text-neutral-900 md:text-8xl'
+						}>
 						<b
 							className={'font-number'}
 							suppressHydrationWarning>

apps/common/components/ListHead.tsx

@@ -20,9 +20,23 @@ export type TListHead = {
 	onSort: (sortBy: string, sortDirection: TSortDirection) => void;
 };
 
-export function ListHead({items, dataClassName, wrapperClassName, tokenClassName, sortBy, sortDirection, onSort}: TListHead): ReactElement {
+export function ListHead({
+	items,
+	dataClassName,
+	wrapperClassName,
+	tokenClassName,
+	sortBy,
+	sortDirection,
+	onSort
+}: TListHead): ReactElement {
 	const toggleSortDirection = (newSortBy: string): TSortDirection => {
-		return sortBy === newSortBy ? (sortDirection === '' ? 'desc' : sortDirection === 'desc' ? 'asc' : 'desc') : 'desc';
+		return sortBy === newSortBy
+			? sortDirection === ''
+				? 'desc'
+				: sortDirection === 'desc'
+				? 'asc'
+				: 'desc'
+			: 'desc';
 	};
 
 	const renderChevron = useCallback(
@@ -33,7 +47,11 @@ export function ListHead({items, dataClassName, wrapperClassName, tokenClassName
 			if (shouldSortBy && sortDirection === 'asc') {
 				return <IconChevronPlain className={'yearn--sort-chevron rotate-180'} />;
 			}
-			return <IconChevronPlain className={'yearn--sort-chevron--off text-neutral-300 group-hover:text-neutral-500'} />;
+			return (
+				<IconChevronPlain
+					className={'yearn--sort-chevron--off text-neutral-300 group-hover:text-neutral-500'}
+				/>
+			);
 		},
 		[sortDirection]
 	);