Feat/v3 main

.eslintrc.js

@@ -20,6 +20,7 @@ module.exports = {
 		indent: 'off',
 		'no-multi-spaces': ['error', {ignoreEOLComments: false}],
 		'@typescript-eslint/indent': 0,
+		'@typescript-eslint/consistent-type-assertions': 0,
 		'no-mixed-spaces-and-tabs': ['warn', 'smart-tabs'],
 		'object-curly-newline': [
 			'error',

.husky/pre-commit

@@ -1,4 +1,12 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npx lint-staged
+if git status -s | grep -q "CHANGELOG"; then
+	npx lint-staged
+    exit 0
+else
+	echo
+    echo "❌ CHANGELOG Not Updated."
+	echo
+    exit 1
+fi

.lintstagedrc.json

@@ -1,4 +1,4 @@
 {
-	"*.ts|*.tsx": ["yarn prettier-format", "eslint"],
+	"*.ts|*.tsx": ["yarn prettier-format", "yarn eslint --quiet --fix", "bash -c tsc --noEmit"],
 	"*.scss|*.css": "yarn prettier-format"
 }

CHANGELOG.md

@@ -1,3 +1,31 @@
+# 0.3.0 (x/12/2023)
+
+-   Build: Release the V3 vaults.
+-   Build: Release the multichain config.
+-   Fix: The zap balances fetching to use the multichain endpoint rather than the currently connected one.
+-   Fix: On some 404 pages, the error message was positioned incorrectly (top) and needed to be centered.
+-   Chore: Add the Changelog commit hook to enforce the changelog update on commit.
+-   Deps: Deprecate Wido due to project end-of-life.
+-   Deps: Bump Portals solver to V2 version.
+-   Deps: Bump various packages.
+-   Nit: SearchBar using uncontrolled input.
+-   Fix: When searching for vaults in a aggregator vault and the search input give no match, the component was moving to "this vault is a strategy" instead of staying in the "no match" state.
+-   Fix: Add an `onReset` function in the `useQueryArguments` hook to be able to reset the query arguments to their default values.
+-   Chore: Use `New` for APR when it's tagged as new.
+-   Fix: On V3, we only display Polygon for now, as the V3 vaults are polygon only.
+-   Fix: Add Card for V3 on the index page.
+-   Nit: Minor CSS fixes on TVL display on Mobile for V3.
+-   Fix: Add the V3 line in the popover menu & fix some hook issue around the V3 color scheme. Adapt the color scheme to the Dark, Light and V3.
+-   Rename path `vault-v3` to simple `v3`.
+-   Fix: Portals zap slippage too low.
+-   Fix: Searchbar on the vault details page was removed if the search was not giving any result.
+-   Feat: Accept native coin for Portals Zap.
+-   Fix: Balance refresh not refreshing properly.
+-   Fix: Update the zap schema from yDaemon
+-   Fix: For portals, uses `OutputValue` instead of `MinOutputValue` for display.
+-   Fix: The price system was mixed-chain, not multi-chain
+-   Fix: Avoid decimal notations in the OP boost page
+
 # 0.1.25 (28/08/2023)
 
 -   Gauge voting for veYFI under the `gauge-voting` feature flag

apps/common/components/AppHeader.tsx

@@ -1,17 +1,16 @@
-import {cloneElement, Fragment, useMemo, useState} from 'react';
+import {cloneElement, useMemo, useState} from 'react';
 import Link from 'next/link';
 import {useRouter} from 'next/router';
 import {AnimatePresence} from 'framer-motion';
 import {Popover, Transition} from '@headlessui/react';
-import {useIsMounted} from '@react-hookz/web';
 import {VaultsHeader} from '@vaults/components/header/VaultsHeader';
+import {VaultsV3Header} from '@vaults-v3/components/header/VaultsHeader';
+import {V3Logo} from '@vaults-v3/Mark';
 import {VeYfiHeader} from '@veYFI/components/header/VeYfiHeader';
 import {Header} from '@yearn-finance/web-lib/components/Header';
-import {Renderable} from '@yearn-finance/web-lib/components/Renderable';
-import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
-import {BalanceReminderPopover} from '@common/components/BalanceReminderPopover';
-import {ImageWithFallback} from '@common/components/ImageWithFallback';
+import {cl} from '@yearn-finance/web-lib/utils/cl';
 import {useMenu} from '@common/contexts/useMenu';
+import {useCurrentApp} from '@common/hooks/useCurrentApp';
 import {LogoYearn} from '@common/icons/LogoYearn';
 import {YBalHeader} from '@yBal/components/header/YBalHeader';
 import {YBribeHeader} from '@yBribe/components/header/YBribeHeader';
@@ -33,6 +32,7 @@ function Logo(): ReactElement {
 			<VaultsHeader pathname={pathname} />
 			<VeYfiHeader pathname={pathname} />
 			<YBribeHeader pathname={pathname} />
+			<VaultsV3Header pathname={pathname} />
 			<MotionDiv
 				name={'yearn'}
 				animate={pathname === '/' ? 'enter' : 'exit'}>
@@ -48,82 +48,118 @@ function Logo(): ReactElement {
 
 function LogoPopover(): ReactElement {
 	const [isShowing, set_isShowing] = useState(false);
-
-	const YETH = {
-		name: 'yETH',
-		href: 'https://yeth.yearn.fi',
-		isDisabled: false,
-		icon: (
-			<ImageWithFallback
-				alt={'yETH'}
-				className={'h-8 w-8'}
-				width={100}
-				height={100}
-				src={`${process.env.BASE_YEARN_ASSETS_URI}/1/0x1BED97CBC3c24A4fb5C069C6E311a967386131f7/logo-128.png`}
-				loading={'eager'}
-				priority
-			/>
-		)
-	};
+	const router = useRouter();
+	const {name: currentAppName} = useCurrentApp(router);
 
 	return (
-		<Popover
-			onMouseEnter={(): void => set_isShowing(true)}
-			onMouseLeave={(): void => set_isShowing(false)}
-			className={'relative'}>
-			<Popover.Button className={'flex items-center'}>
-				<Link href={'/'}>
-					<span className={'sr-only'}>{'Back to home'}</span>
-					<Logo />
-				</Link>
-			</Popover.Button>
-			<Transition
-				as={Fragment}
-				show={isShowing}
-				enter={'transition ease-out duration-200'}
-				enterFrom={'opacity-0 translate-y-1'}
-				enterTo={'opacity-100 translate-y-0'}
-				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'}>
-					<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]
-								.filter(({isDisabled}): boolean => !isDisabled)
-								.map(({name, href, icon}): ReactElement => {
-									return (
+		<>
+			<Popover
+				onMouseEnter={(): void => set_isShowing(true)}
+				onMouseLeave={(): void => set_isShowing(false)}>
+				<div
+					onClick={(): void => set_isShowing(false)}
+					onMouseEnter={(): void => set_isShowing(false)}
+					className={cl(
+						'fixed inset-0 bg-neutral-900 backdrop-blur-sm transition-opacity',
+						!isShowing ? 'opacity-0 pointer-events-none' : 'opacity-50 pointer-events-auto'
+					)}
+				/>
+				<Popover.Button className={'z-20 flex items-center'}>
+					<Link href={'/'}>
+						<span className={'sr-only'}>{'Back to home'}</span>
+						<Logo />
+					</Link>
+				</Popover.Button>
+
+				<Transition.Root show={isShowing}>
+					<Transition.Child
+						as={'div'}
+						enter={'transition ease-out duration-200'}
+						enterFrom={'opacity-0 translate-y-1'}
+						enterTo={'opacity-100 translate-y-0'}
+						leave={'transition ease-in duration-150'}
+						leaveFrom={'opacity-100 translate-y-0'}
+						leaveTo={'opacity-0 translate-y-1'}
+						className={'relative z-[9999999]'}>
+						<Popover.Panel
+							className={'absolute left-1/2 z-20 w-80 -translate-x-1/2 px-4 pt-6 sm:px-0 md:w-[560px]'}>
+							<div className={'overflow-hidden pt-4 shadow-xl'}>
+								<div
+									className={cl(
+										'relative grid grid-cols-2 gap-2 border p-6 md:grid-cols-5',
+										currentAppName === 'V3'
+											? 'bg-[#000520] border-neutral-200/60 rounded-sm'
+											: 'bg-[#F4F4F4] dark:bg-[#282828] border-transparent'
+									)}>
+									<div className={'col-span-3 grid grid-cols-2 gap-2 md:grid-cols-3'}>
+										{[...Object.values(APPS)]
+											.filter(({isDisabled}): boolean => !isDisabled)
+											.filter(({name}): boolean => name !== 'V3')
+											.map(({name, href, icon}): ReactElement => {
+												return (
+													<Link
+														prefetch={false}
+														key={name}
+														href={href}
+														onClick={(): void => set_isShowing(false)}>
+														<div
+															onClick={(): void => set_isShowing(false)}
+															className={cl(
+																'flex cursor-pointer border flex-col items-center justify-center transition-colors p-4',
+																currentAppName !== 'V3'
+																	? 'bg-[#EBEBEB] border-transparent hover:bg-[#c3c3c380] dark:bg-[#0C0C0C] hover:dark:bg-[#3d3d3d80]'
+																	: 'bg-[#000520] hover:bg-[#33374d80] border-[#151C40]'
+															)}>
+															<div>{cloneElement(icon, {className: 'w-8 h-8'})}</div>
+															<div className={'pt-2 text-center'}>
+																<b className={'text-base'}>{name}</b>
+															</div>
+														</div>
+													</Link>
+												);
+											})}
+									</div>
+									<div className={'col-span-2 grid grid-cols-2 gap-2 md:grid-cols-3'}>
 										<Link
 											prefetch={false}
-											key={name}
-											href={href}
+											key={currentAppName}
+											href={'/v3'}
+											className={'col-span-3 row-span-2'}
 											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'
-												}>
-												<div>{cloneElement(icon)}</div>
-												<div className={'pt-2 text-center'}>
-													<b className={'text-base'}>{name}</b>
+												className={cl(
+													'relative flex h-full w-full cursor-pointer flex-col items-center justify-center transition-all rounded-sm p-4',
+													currentAppName !== 'V3'
+														? 'bg-[#EBEBEB] hover:bg-[#c3c3c380] dark:bg-[#0C0C0C] hover:dark:bg-[#3d3d3d80]'
+														: 'bg-[#010A3B] hover:brightness-125'
+												)}>
+												<div className={'z-10 flex w-full flex-col items-center'}>
+													<V3Logo className={'h-20'} />
+													<div className={'-mb-2 pt-4 text-center'}>
+														<p
+															className={cl(
+																'font-bold text-black dark:text-white text-sm',
+																'whitespace-break-spaces'
+															)}>
+															{`Discover\nBrand New Vaults`}
+														</p>
+													</div>
 												</div>
 											</div>
 										</Link>
-									);
-								})}
-						</div>
-					</div>
-				</Popover.Panel>
-			</Transition>
-		</Popover>
+									</div>
+								</div>
+							</div>
+						</Popover.Panel>
+					</Transition.Child>
+				</Transition.Root>
+			</Popover>
+		</>
 	);
 }
 
 export function AppHeader(): ReactElement {
-	const isMounted = useIsMounted();
 	const {pathname} = useRouter();
-	const {isActive} = useWeb3();
 	const {onOpenMenu} = useMenu();
 	const menu = useMemo((): TMenu[] => {
 		const HOME_MENU = {path: '/', label: 'Home'};
@@ -136,6 +172,10 @@ export function AppHeader(): ReactElement {
 			return [HOME_MENU, ...APPS[AppName.YBAL].menu];
 		}
 
+		if (pathname.startsWith('/v3')) {
+			return [HOME_MENU, ...APPS[AppName.VAULTSV3].menu];
+		}
+
 		if (pathname.startsWith('/vaults')) {
 			return [HOME_MENU, ...APPS[AppName.VAULTS].menu];
 		}
@@ -159,35 +199,18 @@ export function AppHeader(): ReactElement {
 		];
 	}, [pathname]);
 
-	const supportedNetworks = useMemo((): number[] => {
-		const ethereumOnlyPaths = ['/ycrv', '/ybal', '/veyfi', '/ybribe'];
-		if (ethereumOnlyPaths.some((path): boolean => pathname.startsWith(path))) {
-			return [1];
-		}
-
-		return [1, 10, 250, 42161];
-	}, [pathname]);
-
 	return (
 		<Header
 			showNetworkSelector={false}
 			linkComponent={<Link href={''} />}
 			currentPathName={pathname}
 			onOpenMenuMobile={onOpenMenu}
 			nav={menu}
-			supportedNetworks={supportedNetworks}
 			logo={
 				<AnimatePresence mode={'wait'}>
 					<LogoPopover />
 				</AnimatePresence>
 			}
-			extra={
-				<Renderable shouldRender={isActive && isMounted()}>
-					<div className={'ml-4'}>
-						<BalanceReminderPopover />
-					</div>
-				</Renderable>
-			}
 		/>
 	);
 }