diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index 6f6ab39..0000000
--- a/.eslintignore
+++ /dev/null
@@ -1,4 +0,0 @@
-# Auto Generated PWA files
-public/sw*
-public/workbox*
-ipfs/*
diff --git a/.eslintrc.js b/.eslintrc.js
index d8b91ad..c90921c 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -25,6 +25,7 @@ module.exports = {
 		react: {version: 'detect'},
 		'import/resolver': {typescript: {}}
 	},
+	ignorePatterns: ['public/sw*', 'public/workbox*', 'ipfs/*'],
 	rules: {
 		'import/default': 0,
 		'react/prop-types': 0,
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 2afec2b..5c79875 100755
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -9,7 +9,7 @@
 	"editor.wordWrap": "off",
 	"editor.autoIndent": "keep",
 	"editor.codeActionsOnSave": {
-		"source.fixAll": true
+		"source.fixAll": "explicit"
 	},
 	"editor.quickSuggestions": {
 		"strings": true
diff --git a/bun.lockb b/bun.lockb
index 9576dfa..08aed6a 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/common/AddressInput.tsx b/components/common/AddressInput.tsx
deleted file mode 100644
index aa33765..0000000
--- a/components/common/AddressInput.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import React, {useCallback, useMemo, useRef, useState} from 'react';
-import {checkENSValidity} from 'utils/tools.ens';
-import {checkLensValidity} from 'utils/tools.lens';
-import {IconCircleCheck} from '@icons/IconCircleCheck';
-import {IconCircleCross} from '@icons/IconCircleCross';
-import {IconLoader} from '@yearn-finance/web-lib/icons/IconLoader';
-import {isZeroAddress, toAddress} from '@yearn-finance/web-lib/utils/address';
-import {cl} from '@yearn-finance/web-lib/utils/cl';
-import {ZERO_ADDRESS} from '@yearn-finance/web-lib/utils/constants';
-
-import type {ReactElement} from 'react';
-import type {TAddress} from '@yearn-finance/web-lib/types';
-
-export type TAddressInput = {
-	value: TInputAddressLike;
-	onChangeValue: (value: TInputAddressLike) => void;
-	inputClassName?: string;
-};
-export type TInputAddressLike = {
-	address: TAddress | undefined;
-	label: string;
-	isValid: boolean | 'undetermined';
-};
-export const defaultInputAddressLike: TInputAddressLike = {
-	address: undefined,
-	label: '',
-	isValid: false
-};
-
-function AddressInput({value, onChangeValue, ...props}: TAddressInput): ReactElement {
-	const [isLoadingValidish, set_isLoadingValidish] = useState<boolean>(false);
-	const currentLabel = useRef<string>(value.label);
-	const isFocused = useRef<boolean>(false);
-	const status = useMemo((): 'valid' | 'invalid' | 'warning' | 'pending' | 'none' => {
-		if (value.isValid === true) {
-			return 'valid';
-		}
-		if (value.isValid === false && value.label !== '' && value.address === ZERO_ADDRESS) {
-			return 'invalid';
-		}
-		if (value.isValid === false && value.label !== '' && !isLoadingValidish && !isFocused.current) {
-			return 'invalid';
-		}
-		if (isLoadingValidish) {
-			return 'pending';
-		}
-		return 'none';
-	}, [value, isLoadingValidish, isFocused]);
-
-	const onChange = useCallback(
-		async (label: string): Promise<void> => {
-			currentLabel.current = label;
-
-			if (label.endsWith('.eth') && label.length > 4) {
-				onChangeValue({address: undefined, label, isValid: 'undetermined'});
-				set_isLoadingValidish(true);
-				const [address, isValid] = await checkENSValidity(label);
-				if (currentLabel.current === label) {
-					onChangeValue({address, label, isValid});
-				}
-				set_isLoadingValidish(false);
-			} else if (label.endsWith('.lens') && label.length > 5) {
-				onChangeValue({address: undefined, label, isValid: 'undetermined'});
-				set_isLoadingValidish(true);
-				const [address, isValid] = await checkLensValidity(label);
-				if (currentLabel.current === label) {
-					onChangeValue({address, label, isValid});
-				}
-				set_isLoadingValidish(false);
-			} else if (!isZeroAddress(toAddress(label))) {
-				onChangeValue({address: toAddress(label), label, isValid: true});
-			} else {
-				onChangeValue({address: undefined, label, isValid: false});
-			}
-		},
-		[onChangeValue, currentLabel]
-	);
-
-	return (
-		<div className={'smol--input-wrapper'}>
-			<input
-				aria-invalid={status === 'invalid'}
-				autoFocus
-				onFocus={async (): Promise<void> => {
-					isFocused.current = true;
-					onChange(value.label);
-				}}
-				onBlur={(): void => {
-					isFocused.current = false;
-				}}
-				onChange={async (e): Promise<void> => onChange(e.target.value)}
-				required
-				autoComplete={'off'}
-				spellCheck={false}
-				placeholder={'0x...'}
-				type={'text'}
-				value={value.label}
-				className={cl(props.inputClassName, 'smol--input font-mono font-bold')}
-			/>
-			<label
-				className={
-					status === 'invalid' || status === 'warning' ? 'relative' : 'pointer-events-none relative h-4 w-4'
-				}>
-				<span className={status === 'invalid' || status === 'warning' ? 'tooltip' : 'pointer-events-none'}>
-					<div className={'pointer-events-none relative h-4 w-4'}>
-						<IconCircleCheck
-							className={`absolute h-4 w-4 text-[#16a34a] transition-opacity ${
-								status === 'valid' ? 'opacity-100' : 'opacity-0'
-							}`}
-						/>
-						<IconCircleCross
-							className={`absolute h-4 w-4 text-[#e11d48] transition-opacity ${
-								status === 'invalid' ? 'opacity-100' : 'opacity-0'
-							}`}
-						/>
-						<div className={'absolute inset-0 flex items-center justify-center'}>
-							<IconLoader
-								className={`h-4 w-4 animate-spin text-neutral-900 transition-opacity ${
-									status === 'pending' ? 'opacity-100' : 'opacity-0'
-								}`}
-							/>
-						</div>
-					</div>
-					<span className={'tooltiptextsmall'}>
-						{status === 'invalid' && 'This address is invalid'}
-						{status === 'warning' && 'This address is already in use'}
-					</span>
-				</span>
-			</label>
-		</div>
-	);
-}
-
-export default AddressInput;
diff --git a/components/common/ComboboxAddressInput/PossibleOption.tsx b/components/common/ComboboxAddressInput/PossibleOption.tsx
deleted file mode 100644
index 55c1869..0000000
--- a/components/common/ComboboxAddressInput/PossibleOption.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, {useMemo} from 'react';
-import {Combobox} from '@headlessui/react';
-import {IconCircleCheck} from '@icons/IconCircleCheck';
-import {toAddress} from '@yearn-finance/web-lib/utils/address';
-import {ImageWithFallback} from '@common/ImageWithFallback';
-
-import type {ReactElement} from 'react';
-import type {TToken} from '@types';
-
-function Option(props: TToken): ReactElement {
-	return (
-		<div className={'flex w-full flex-row items-center space-x-4'}>
-			<div className={'h-6 w-6'}>
-				<ImageWithFallback
-					alt={''}
-					unoptimized
-					src={props.logoURI || ''}
-					altSrc={`${process.env.SMOL_ASSETS_URL}/token/${props.chainID}/${props.address}/logo-32.png`}
-					width={24}
-					height={24}
-				/>
-			</div>
-			<div className={'flex flex-col font-sans text-neutral-900'}>
-				<div className={'flex flex-row items-center'}>{props.symbol}</div>
-				<small className={'font-number text-xs text-neutral-500'}>{toAddress(props.address)}</small>
-			</div>
-		</div>
-	);
-}
-
-function PossibleOption({option}: {option: TToken}): ReactElement {
-	const memorizedElement = useMemo<ReactElement>((): ReactElement => <Option {...option} />, [option]);
-
-	return (
-		<Combobox.Option
-			className={({active: isActive}): string =>
-				`relative cursor-pointer select-none py-2 px-4 ${
-					isActive ? 'bg-neutral-100 text-neutral-900' : 'text-neutral-900'
-				}`
-			}
-			value={option}>
-			{({selected: isSelected}): ReactElement => (
-				<div>
-					{memorizedElement}
-					{isSelected ? (
-						<span className={'absolute inset-y-0 right-8 flex items-center'}>
-							<IconCircleCheck className={'absolute h-4 w-4 text-neutral-900'} />
-						</span>
-					) : null}
-				</div>
-			)}
-		</Combobox.Option>
-	);
-}
-
-export {PossibleOption};
diff --git a/components/common/ComboboxAddressInput/SelectedOption.tsx b/components/common/ComboboxAddressInput/SelectedOption.tsx
deleted file mode 100644
index 04548de..0000000
--- a/components/common/ComboboxAddressInput/SelectedOption.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import React from 'react';
-import {Combobox} from '@headlessui/react';
-import {IconChevronBoth} from '@icons/IconChevronBoth';
-import {IconSpinner} from '@icons/IconSpinner';
-import {ImageWithFallback} from '@common/ImageWithFallback';
-
-import type {ChangeEvent, Dispatch, ReactElement, SetStateAction} from 'react';
-import type {TToken} from '@types';
-
-function ComboboxInput(props: TToken & {onChange: (event: ChangeEvent<HTMLInputElement>) => void}): ReactElement {
-	return (
-		<div className={'relative flex w-full flex-row items-center space-x-4'}>
-			<div className={'h-6 w-6'}>
-				<ImageWithFallback
-					alt={''}
-					unoptimized
-					src={props.logoURI || ''}
-					altSrc={`${process.env.SMOL_ASSETS_URL}/token/${props.chainID}/${props.address}/logo-32.png`}
-					width={24}
-					height={24}
-				/>
-			</div>
-			<div className={'flex w-full flex-col text-left font-sans text-neutral-900'}>
-				<p
-					className={
-						'w-full overflow-x-hidden text-ellipsis whitespace-nowrap pr-4 font-normal text-neutral-900 scrollbar-none'
-					}>
-					<Combobox.Input
-						className={
-							'font-inter w-full cursor-default overflow-x-scroll border-none bg-transparent p-0 outline-none scrollbar-none'
-						}
-						displayValue={(): string => props.symbol}
-						placeholder={'0x...'}
-						autoComplete={'off'}
-						autoCorrect={'off'}
-						spellCheck={false}
-						onChange={props.onChange}
-					/>
-				</p>
-			</div>
-		</div>
-	);
-}
-
-function SelectedOption(props: {
-	currentValue: TToken | null;
-	activeValue: TToken | null;
-	query: string;
-	isFetchingNewToken: boolean;
-	onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-	onToggleOptions: Dispatch<SetStateAction<boolean>>;
-}): ReactElement {
-	let source = props.currentValue;
-
-	/**********************************************************************************************
-	 ** Display the active value (hovered one) instead of the selected unless if
-	 ** - We have no current value: it's the first time, we don't want auto-populate
-	 ** - We have no active value: user isn't searching, we don't want to assume
-	 *********************************************************************************************/
-	if (props.activeValue && (props.currentValue || props.query !== '')) {
-		source = props.activeValue;
-	}
-
-	return (
-		<Combobox.Button
-			onClick={(): void => props.onToggleOptions((o: boolean): boolean => !o)}
-			className={'box-0 grow-1 col-span-12 flex h-10 w-full items-center p-2 px-4 md:col-span-9'}>
-			<ComboboxInput
-				{...(source as TToken)}
-				onChange={props.onChange}
-			/>
-			{props.isFetchingNewToken && (
-				<div className={'absolute right-8'}>
-					<IconSpinner
-						className={'h-4 w-4 text-neutral-500 transition-colors group-hover:text-neutral-900'}
-					/>
-				</div>
-			)}
-			<div className={'absolute right-2 md:right-3'}>
-				<IconChevronBoth
-					className={'h-4 w-4 text-neutral-500 transition-colors group-hover:text-neutral-900'}
-				/>
-			</div>
-		</Combobox.Button>
-	);
-}
-
-export {SelectedOption};
diff --git a/components/common/ComboboxAddressInput/index.tsx b/components/common/ComboboxAddressInput/index.tsx
deleted file mode 100644
index c43276d..0000000
--- a/components/common/ComboboxAddressInput/index.tsx
+++ /dev/null
@@ -1,215 +0,0 @@
-import React, {Fragment, useCallback, useMemo, useState} from 'react';
-import {useWallet} from 'contexts/useWallet';
-import {isAddress} from 'viem';
-import {erc20ABI} from 'wagmi';
-import {Combobox, Transition} from '@headlessui/react';
-import {useThrottledState} from '@react-hookz/web';
-import {multicall} from '@wagmi/core';
-import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID';
-import {toAddress} from '@yearn-finance/web-lib/utils/address';
-import {cl} from '@yearn-finance/web-lib/utils/cl';
-import {decodeAsNumber, decodeAsString} from '@yearn-finance/web-lib/utils/decoder';
-import {toBigInt} from '@yearn-finance/web-lib/utils/format.bigNumber';
-
-import {PossibleOption} from './PossibleOption';
-import {SelectedOption} from './SelectedOption';
-import {useFilterTokens} from './useFilterTokens';
-
-import type {Dispatch, ReactElement, SetStateAction} from 'react';
-import type {TAddress, TDict} from '@yearn-finance/web-lib/types';
-import type {TComboboxAddressInput, TToken} from '@types';
-
-function Backdrop({isOpen, onClose}: {isOpen: boolean; onClose: VoidFunction}): ReactElement {
-	if (!isOpen) {
-		return <></>;
-	}
-	return (
-		<div
-			className={'fixed inset-0 z-0'}
-			onClick={(e): void => {
-				e.stopPropagation();
-				e.preventDefault();
-				onClose();
-			}}
-		/>
-	);
-}
-
-function WithTransition({children, isOpen}: {children: ReactElement; isOpen: boolean}): ReactElement {
-	return (
-		<Transition
-			as={Fragment}
-			show={isOpen}
-			enter={'transition duration-100 ease-out'}
-			enterFrom={'transform scale-95 opacity-0'}
-			enterTo={'transform scale-100 opacity-100'}
-			leave={'transition duration-75 ease-out'}
-			leaveFrom={'transform scale-100 opacity-100'}
-			leaveTo={'transform scale-95 opacity-0'}>
-			{children}
-		</Transition>
-	);
-}
-
-function Options(
-	props: TComboboxAddressInput & {
-		isOpen: boolean;
-		onToggle: Dispatch<SetStateAction<boolean>>;
-		activaValue: TToken | null;
-		isLoadingTokenData: boolean;
-	}
-): ReactElement {
-	const {balances} = useWallet();
-	const [query, set_query] = useState<string>('');
-	const filteredValues = useFilterTokens(Object.values(props.possibleValues), query);
-
-	const filteredBalances = useMemo((): [TToken[], TToken[]] => {
-		if (!props.shouldSort) {
-			return [filteredValues, []];
-		}
-		const withBalance = [];
-		const withoutBalance = [];
-		for (const dest of filteredValues) {
-			if (toBigInt(balances?.[toAddress(dest.address)]?.raw) > 0n) {
-				withBalance.push(dest);
-			} else {
-				withoutBalance.push(dest);
-			}
-		}
-		return [withBalance, withoutBalance];
-	}, [balances, filteredValues, props.shouldSort]);
-
-	return (
-		<div className={'relative'}>
-			<SelectedOption
-				activeValue={props.activaValue}
-				currentValue={props.value}
-				query={query}
-				isFetchingNewToken={props.isLoadingTokenData}
-				onToggleOptions={props.onToggle}
-				onChange={(event): void => {
-					props.onToggle(true);
-					set_query(event.target.value);
-				}}
-			/>
-			<WithTransition isOpen={props.isOpen}>
-				<Combobox.Options
-					className={cl(
-						'absolute left-0 z-50',
-						'flex max-h-60 w-full min-w-fit flex-col',
-						'box-0 mt-1 overflow-y-auto scrollbar-none'
-					)}>
-					{filteredValues.length === 0 && query !== '' ? (
-						<div className={'relative cursor-default select-none px-4 py-2 text-neutral-500'}>
-							{'No token found.'}
-						</div>
-					) : (
-						[...filteredBalances[0], ...filteredBalances[1]].slice(0, 100).map(
-							(dest): ReactElement => (
-								<PossibleOption
-									key={`${dest.address}_${dest.chainID}`}
-									option={dest}
-								/>
-							)
-						)
-					)}
-				</Combobox.Options>
-			</WithTransition>
-		</div>
-	);
-}
-
-function ComboboxAddressInput({
-	possibleValues,
-	value,
-	onChangeValue,
-	onAddValue,
-	shouldSort = true
-}: TComboboxAddressInput): ReactElement {
-	const {safeChainID} = useChainID();
-	const {refresh} = useWallet();
-	const [isOpen, set_isOpen] = useThrottledState<boolean>(false, 100);
-	const [isLoadingTokenData, set_isLoadingTokenData] = useState<boolean>(false);
-
-	const fetchToken = useCallback(
-		async (
-			_safeChainID: number,
-			_query: TAddress
-		): Promise<{name: string; symbol: string; decimals: number} | undefined> => {
-			if (!isAddress(_query)) {
-				return undefined;
-			}
-			const results = await multicall({
-				contracts: [
-					{address: _query, abi: erc20ABI, functionName: 'name'},
-					{address: _query, abi: erc20ABI, functionName: 'symbol'},
-					{address: _query, abi: erc20ABI, functionName: 'decimals'}
-				],
-				chainId: _safeChainID
-			});
-			const name = decodeAsString(results[0]);
-			const symbol = decodeAsString(results[1]);
-			const decimals = decodeAsNumber(results[2]);
-			await refresh([{decimals, name, symbol, token: _query}]);
-			return {name, symbol, decimals};
-		},
-		[refresh]
-	);
-
-	const onChange = useCallback(
-		async (_selected: TToken): Promise<void> => {
-			let _tokenData = _selected;
-			if (!_tokenData || (!_tokenData.name && !_tokenData.symbol && !_tokenData.decimals)) {
-				set_isLoadingTokenData(true);
-				const result = await fetchToken(safeChainID, _selected.address);
-				_tokenData = {
-					..._tokenData,
-					name: result?.name || '',
-					symbol: result?.symbol || '',
-					decimals: result?.decimals || 0,
-					chainID: safeChainID,
-					logoURI: `${process.env.SMOL_ASSETS_URL}/token/${_selected.chainID}/${_selected.address}/logo-32.png`
-				};
-				set_isLoadingTokenData(false);
-			}
-
-			onAddValue((prev: TDict<TToken>): TDict<TToken> => {
-				if (prev[_selected.address]) {
-					return prev;
-				}
-				return {...prev, [toAddress(_selected.address)]: _tokenData};
-			});
-			onChangeValue(_tokenData);
-			set_isOpen(false);
-		},
-		[fetchToken, safeChainID, onAddValue, onChangeValue, set_isOpen]
-	);
-
-	return (
-		<div className={'w-full'}>
-			<Backdrop
-				isOpen={isOpen}
-				onClose={(): void => set_isOpen(false)}
-			/>
-			<Combobox<TToken | null>
-				value={value}
-				onChange={onChange}>
-				{(comboOptions): ReactElement => (
-					<Options
-						isOpen={isOpen}
-						onToggle={set_isOpen}
-						activaValue={comboOptions.activeOption}
-						possibleValues={possibleValues}
-						value={value}
-						onChangeValue={onChangeValue}
-						onAddValue={onAddValue}
-						shouldSort={shouldSort}
-						isLoadingTokenData={isLoadingTokenData}
-					/>
-				)}
-			</Combobox>
-		</div>
-	);
-}
-
-export default ComboboxAddressInput;
diff --git a/components/common/ComboboxAddressInput/useFilterTokens.ts b/components/common/ComboboxAddressInput/useFilterTokens.ts
deleted file mode 100644
index 0a7a2ee..0000000
--- a/components/common/ComboboxAddressInput/useFilterTokens.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {useMemo} from 'react';
-
-import type {TToken} from '@types';
-
-function useFilterTokens(tokens: TToken[], query: string): TToken[] {
-	const filteredTokens = useMemo((): TToken[] => {
-		if (query === '' || tokens.length === 0) {
-			return tokens;
-		}
-		return tokens.filter(
-			(token): boolean =>
-				token.name.toLowerCase().startsWith(query.toLowerCase()) ||
-				token.symbol.toLowerCase().startsWith(query.toLowerCase()) ||
-				token.address.toLowerCase().startsWith(query.toLowerCase())
-		);
-	}, [query, tokens]);
-	return filteredTokens;
-}
-
-export {useFilterTokens};
diff --git a/components/common/Drawer.tsx b/components/common/Drawer.tsx
new file mode 100644
index 0000000..7d900c1
--- /dev/null
+++ b/components/common/Drawer.tsx
@@ -0,0 +1,106 @@
+'use client';
+
+import * as React from 'react';
+import {Drawer as DrawerPrimitive} from 'vaul';
+import {cl} from '@builtbymom/web3/utils';
+
+const Drawer = ({
+	shouldScaleBackground = true,
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>): React.ReactElement => (
+	<DrawerPrimitive.Root
+		shouldScaleBackground={shouldScaleBackground}
+		{...props}
+	/>
+);
+Drawer.displayName = 'Drawer';
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = React.forwardRef<
+	React.ElementRef<typeof DrawerPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({className, ...props}, ref) => (
+	<DrawerPrimitive.Overlay
+		ref={ref}
+		className={cl('fixed inset-0 z-50 bg-black/80', className)}
+		{...props}
+	/>
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = React.forwardRef<
+	React.ElementRef<typeof DrawerPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({className, children, ...props}, ref) => (
+	<DrawerPortal>
+		<DrawerOverlay />
+		<DrawerPrimitive.Content
+			ref={ref}
+			className={cl(
+				'fixed inset-y-0 top-0 bottom-0 z-50 mr-24 w-[60vw] flex h-auto flex-col rounded-r-lg border-4',
+				className
+			)}
+			{...props}>
+			{children}
+		</DrawerPrimitive.Content>
+	</DrawerPortal>
+));
+DrawerContent.displayName = 'DrawerContent';
+
+const DrawerHeader = ({className, ...props}: React.HTMLAttributes<HTMLDivElement>): React.ReactElement => (
+	<div
+		className={cl('grid gap-1.5 p-4 text-center sm:text-left', className)}
+		{...props}
+	/>
+);
+DrawerHeader.displayName = 'DrawerHeader';
+
+const DrawerFooter = ({className, ...props}: React.HTMLAttributes<HTMLDivElement>): React.ReactElement => (
+	<div
+		className={cl('mt-auto flex flex-col gap-2 p-4', className)}
+		{...props}
+	/>
+);
+DrawerFooter.displayName = 'DrawerFooter';
+
+const DrawerTitle = React.forwardRef<
+	React.ElementRef<typeof DrawerPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({className, ...props}, ref) => (
+	<DrawerPrimitive.Title
+		ref={ref}
+		className={cl('text-lg font-semibold leading-none tracking-tight', className)}
+		{...props}
+	/>
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = React.forwardRef<
+	React.ElementRef<typeof DrawerPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({className, ...props}, ref) => (
+	<DrawerPrimitive.Description
+		ref={ref}
+		className={cl('text-sm text-muted-foreground', className)}
+		{...props}
+	/>
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+	Drawer,
+	DrawerClose,
+	DrawerContent,
+	DrawerDescription,
+	DrawerFooter,
+	DrawerHeader,
+	DrawerOverlay,
+	DrawerPortal,
+	DrawerTitle,
+	DrawerTrigger
+};
diff --git a/components/common/Header.tsx b/components/common/Header.tsx
new file mode 100644
index 0000000..56e28e3
--- /dev/null
+++ b/components/common/Header.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import Link from 'next/link';
+import {usePathname} from 'next/navigation';
+import {useWeb3} from '@builtbymom/web3/contexts/useWeb3';
+import {cl, truncateHex} from '@builtbymom/web3/utils';
+import {IconMenu} from '@icons/IconMenu';
+import {useAccountModal} from '@rainbow-me/rainbowkit';
+import {Drawer, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader, DrawerTrigger} from '@common/Drawer';
+
+import type {ReactElement} from 'react';
+
+function Header(): ReactElement {
+	const pathname = usePathname();
+	const {onConnect, onDesactivate, address, ens} = useWeb3();
+	const {openAccountModal} = useAccountModal();
+
+	const tabs = [{href: '/', label: 'Home', target: '_self'}];
+
+	return (
+		<header className={'mx-auto grid w-full max-w-6xl'}>
+			<div className={'z-10 my-4 hidden w-full justify-between md:flex'}>
+				<div className={'flex gap-x-6'}>
+					{tabs.map(({href, label, target}) => (
+						<Link
+							key={href}
+							href={href}
+							target={target}>
+							<p
+								title={label}
+								className={cl(
+									'hover-fix text-center',
+									(pathname.startsWith(href) && href !== '/') || pathname === href
+										? 'font-bold text-neutral-900'
+										: 'text-[#552E08] transition-all hover:text-neutral-900 hover:font-bold'
+								)}>
+								{label}
+							</p>
+						</Link>
+					))}
+				</div>
+				<div className={''}>
+					<button
+						suppressHydrationWarning
+						onClick={address ? openAccountModal : onConnect}
+						className={'text-base font-bold'}>
+						{address && ens ? ens : address ? truncateHex(address, 6) : 'Connect Wallet'}
+					</button>
+				</div>
+			</div>
+			<div className={'z-10 my-4 flex w-full justify-between px-2 md:hidden'}>
+				<Drawer direction={'left'}>
+					<DrawerTrigger>
+						<IconMenu className={'size-6'} />
+					</DrawerTrigger>
+					<DrawerContent className={'bg-orange'}>
+						<DrawerHeader>
+							<button
+								suppressHydrationWarning
+								onClick={address ? onDesactivate : onConnect}
+								className={
+									'h-10 rounded-lg border-2 border-neutral-900 bg-yellow px-5 text-base font-bold'
+								}>
+								{address && ens ? ens : address ? truncateHex(address, 6) : 'Connect Wallet'}
+							</button>
+							<div className={'mt-6 grid gap-4 text-left'}>
+								{tabs.map(({href, label, target}) => (
+									<Link
+										key={href}
+										href={href}
+										target={target}>
+										<DrawerClose>
+											<p
+												className={cl(
+													'text-left',
+													pathname === href ? 'font-bold text-neutral-900' : 'text-[#552E08]'
+												)}>
+												{label}
+											</p>
+										</DrawerClose>
+									</Link>
+								))}
+							</div>
+						</DrawerHeader>
+						<DrawerFooter>
+							<DrawerClose>
+								<button className={'text-xs text-neutral-900/60'}>{'Close'}</button>
+							</DrawerClose>
+						</DrawerFooter>
+					</DrawerContent>
+				</Drawer>
+				<div className={''}>
+					<button
+						suppressHydrationWarning
+						onClick={address ? openAccountModal : onConnect}
+						className={'text-base font-bold'}>
+						{address && ens ? ens : address ? truncateHex(address, 6) : 'Connect Wallet'}
+					</button>
+				</div>
+			</div>
+		</header>
+	);
+}
+
+export {Header};
diff --git a/components/common/HeaderElements.tsx b/components/common/HeaderElements.tsx
deleted file mode 100644
index 1e624a4..0000000
--- a/components/common/HeaderElements.tsx
+++ /dev/null
@@ -1,262 +0,0 @@
-import React, {Fragment, useEffect, useMemo, useState} from 'react';
-import Image from 'next/image';
-import assert from 'assert';
-import {useConnect, usePublicClient} from 'wagmi';
-import {Listbox, Transition} from '@headlessui/react';
-import {useAccountModal, useChainModal} from '@rainbow-me/rainbowkit';
-import {useIsMounted} from '@react-hookz/web';
-import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
-import {toSafeChainID} from '@yearn-finance/web-lib/hooks/useChainID';
-import {IconChevronBottom} from '@yearn-finance/web-lib/icons/IconChevronBottom';
-import {IconWallet} from '@yearn-finance/web-lib/icons/IconWallet';
-import {truncateHex} from '@yearn-finance/web-lib/utils/address';
-
-import type {ReactElement} from 'react';
-import type {Chain} from 'wagmi';
-
-function NetworkButton({
-	label,
-	isDisabled,
-	onClick
-}: {
-	label: string;
-	isDisabled?: boolean;
-	onClick?: () => void;
-}): ReactElement {
-	return (
-		<button
-			disabled={isDisabled}
-			onClick={onClick}
-			suppressHydrationWarning
-			className={
-				'yearn--header-nav-item mr-4 hidden !cursor-default flex-row items-center border-0 p-0 text-sm hover:!text-neutral-500 md:flex'
-			}>
-			<div
-				suppressHydrationWarning
-				className={'relative flex flex-row items-center'}>
-				{label}
-			</div>
-		</button>
-	);
-}
-
-function CurrentNetworkButton({label, value, isOpen}: {label: string; value: number; isOpen: boolean}): ReactElement {
-	const [src, set_src] = useState<string | undefined>(undefined);
-
-	useEffect((): void => {
-		if (value) {
-			set_src(`${process.env.SMOL_ASSETS_URL}/chain/${value}/logo-128.png`);
-		}
-	}, [value]);
-
-	return (
-		<Listbox.Button
-			suppressHydrationWarning
-			className={'yearn--header-nav-item flex flex-row items-center border-0 p-0 text-xs md:flex md:text-sm'}>
-			<div
-				suppressHydrationWarning
-				className={'relative flex flex-row items-center truncate whitespace-nowrap text-xs md:text-sm'}>
-				{src ? (
-					<Image
-						suppressHydrationWarning
-						id={value.toString()}
-						className={'mr-2 min-h-[20px] min-w-[20px]'}
-						src={src}
-						width={20}
-						height={20}
-						alt={label}
-					/>
-				) : (
-					<div className={'mr-2 min-h-[20px] min-w-[20px] animate-pulse rounded-full bg-neutral-200'} />
-				)}
-				{label}
-			</div>
-			<div className={'ml-1 md:ml-2'}>
-				<IconChevronBottom
-					className={`h-3 w-3 transition-transform md:h-5 md:w-4 ${isOpen ? '-rotate-180' : 'rotate-0'}`}
-				/>
-			</div>
-		</Listbox.Button>
-	);
-}
-
-type TNetwork = {value: number; label: string};
-export function NetworkSelector({networks}: {networks: number[]}): ReactElement {
-	const {onSwitchChain} = useWeb3();
-	const publicClient = usePublicClient();
-	const {connectors} = useConnect();
-	const safeChainID = toSafeChainID(publicClient?.chain.id, Number(process.env.BASE_CHAINID));
-	const isMounted = useIsMounted();
-
-	const supportedNetworks = useMemo((): TNetwork[] => {
-		const injectedConnector = connectors.find((e): boolean => e.id.toLocaleLowerCase() === 'injected');
-		assert(injectedConnector, 'No injected connector found');
-		const chainsForInjected = injectedConnector.chains;
-
-		return chainsForInjected
-			.filter(({id}): boolean => id !== 1337 && ((networks.length > 0 && networks.includes(id)) || true))
-			.map((network: Chain): TNetwork => ({value: network.id, label: network.name}));
-	}, [connectors, networks]);
-
-	const currentNetwork = useMemo(
-		(): TNetwork | undefined => supportedNetworks.find((network): boolean => network.value === safeChainID),
-		[safeChainID, supportedNetworks]
-	);
-
-	if (supportedNetworks.length === 1) {
-		if (publicClient?.chain.id === 1337) {
-			return (
-				<NetworkButton
-					label={'Localhost'}
-					isDisabled
-				/>
-			);
-		}
-		if (currentNetwork?.value === supportedNetworks[0]?.value) {
-			return (
-				<NetworkButton
-					label={supportedNetworks[0]?.label || 'Ethereum'}
-					isDisabled
-				/>
-			);
-		}
-		return (
-			<NetworkButton
-				label={'Invalid Network'}
-				onClick={(): void => onSwitchChain(supportedNetworks[0].value)}
-			/>
-		);
-	}
-
-	if (!isMounted() || !currentNetwork) {
-		<div className={'relative z-50 mr-4'}>
-			<div className={'h-10 w-full animate-pulse bg-neutral-100'} />
-		</div>;
-	}
-
-	return (
-		<div className={'relative z-50 mr-4'}>
-			<Listbox
-				value={safeChainID}
-				onChange={(value: unknown): void => onSwitchChain((value as {value: number}).value)}>
-				{({open}): ReactElement => (
-					<>
-						<CurrentNetworkButton
-							label={currentNetwork?.label || 'Ethereum'}
-							value={currentNetwork?.value || 1}
-							isOpen={open}
-						/>
-						<Transition
-							appear
-							show={open}
-							as={Fragment}>
-							<div>
-								<Transition.Child
-									as={Fragment}
-									enter={'ease-out duration-300'}
-									enterFrom={'opacity-0'}
-									enterTo={'opacity-100'}
-									leave={'ease-in duration-200'}
-									leaveFrom={'opacity-100'}
-									leaveTo={'opacity-0'}>
-									<div className={'fixed inset-0 bg-neutral-0/60'} />
-								</Transition.Child>
-								<Transition.Child
-									as={Fragment}
-									enter={'transition duration-100 ease-out'}
-									enterFrom={'transform scale-95 opacity-0'}
-									enterTo={'transform scale-100 opacity-100'}
-									leave={'transition duration-75 ease-out'}
-									leaveFrom={'transform scale-100 opacity-100'}
-									leaveTo={'transform scale-95 opacity-0'}>
-									<Listbox.Options
-										className={
-											'absolute -inset-x-24 z-50 flex items-center justify-center pt-2 opacity-0 transition-opacity'
-										}>
-										<div
-											className={
-												'w-fit border border-neutral-300 bg-neutral-100 p-1 px-2 text-center text-xxs text-neutral-900'
-											}>
-											{supportedNetworks.map(
-												(network): ReactElement => (
-													<Listbox.Option
-														key={network.value}
-														value={network}>
-														{({active}): ReactElement => (
-															<div
-																data-active={active}
-																className={'yearn--listbox-menu-item text-sm'}>
-																{network?.label || 'Ethereum'}
-															</div>
-														)}
-													</Listbox.Option>
-												)
-											)}
-										</div>
-									</Listbox.Options>
-								</Transition.Child>
-							</div>
-						</Transition>
-					</>
-				)}
-			</Listbox>
-		</div>
-	);
-}
-
-export function WalletSelector(): ReactElement {
-	const {openAccountModal} = useAccountModal();
-	const {openChainModal} = useChainModal();
-	const {isActive, address, ens, lensProtocolHandle, openLoginModal} = useWeb3();
-
-	const [walletIdentity, set_walletIdentity] = useState<string | undefined>(undefined);
-	const isMounted = useIsMounted();
-
-	useEffect((): void => {
-		if (!isMounted()) {
-			return;
-		}
-		if (!isActive && address) {
-			set_walletIdentity('Invalid Network');
-		} else if (ens) {
-			set_walletIdentity(ens);
-		} else if (lensProtocolHandle) {
-			set_walletIdentity(lensProtocolHandle);
-		} else if (address) {
-			set_walletIdentity(truncateHex(address, 6));
-		} else {
-			set_walletIdentity(undefined);
-		}
-	}, [ens, lensProtocolHandle, address, isActive, isMounted]);
-
-	return (
-		<div
-			onClick={(): void => {
-				if (isActive) {
-					openAccountModal?.();
-				} else if (!isActive && address) {
-					openChainModal?.();
-				} else {
-					openLoginModal();
-				}
-			}}>
-			<div
-				suppressHydrationWarning
-				className={'font-inter cursor-pointer text-sm font-medium'}>
-				{walletIdentity ? (
-					walletIdentity
-				) : (
-					<span>
-						<IconWallet className={'yearn--header-nav-item mt-0.5 block h-4 w-4 md:hidden'} />
-						<span
-							className={
-								'relative hidden h-8 cursor-pointer items-center justify-center !rounded-md border border-transparent bg-neutral-900 px-2 text-xs font-normal text-neutral-0 transition-all hover:bg-neutral-800 md:flex'
-							}>
-							{'Connect wallet'}
-						</span>
-					</span>
-				)}
-			</div>
-		</div>
-	);
-}
diff --git a/components/common/Meta.tsx b/components/common/Meta.tsx
index 4babf7b..3c4a29c 100644
--- a/components/common/Meta.tsx
+++ b/components/common/Meta.tsx
@@ -1,171 +1,176 @@
 import React from 'react';
 import Head from 'next/head';
-import {DefaultSeo} from 'next-seo';
-import meta from 'public/manifest.json';
+
+import meta from '../../public/manifest.json';
 
 import type {ReactElement} from 'react';
 
 function Meta(): ReactElement {
 	return (
-		<>
-			<Head>
-				<title>{meta.name}</title>
-				<meta
-					httpEquiv={'X-UA-Compatible'}
-					content={'IE=edge'}
-				/>
-				<meta
-					name={'viewport'}
-					content={
-						'minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover'
-					}
-				/>
-				<meta
-					name={'description'}
-					content={meta.name}
-				/>
-				<meta
-					name={'msapplication-TileColor'}
-					content={meta.title_color}
-				/>
-				<meta
-					name={'theme-color'}
-					content={meta.theme_color}
-				/>
+		<Head>
+			<title>{meta.name}</title>
+			<meta
+				httpEquiv={'X-UA-Compatible'}
+				content={'IE=edge'}
+			/>
+			<meta
+				name={'viewport'}
+				content={'minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover'}
+			/>
+			<meta
+				name={'description'}
+				content={meta.name}
+			/>
+			<meta
+				name={'msapplication-TileColor'}
+				content={meta.title_color}
+			/>
+			<meta
+				name={'theme-color'}
+				content={meta.theme_color}
+			/>
 
-				<meta
-					name={'application-name'}
-					content={meta.name}
-				/>
-				<meta
-					name={'apple-mobile-web-app-title'}
-					content={meta.name}
-				/>
-				<meta
-					name={'apple-mobile-web-app-capable'}
-					content={'yes'}
-				/>
-				<meta
-					name={'apple-mobile-web-app-status-bar-style'}
-					content={'default'}
-				/>
-				<meta
-					name={'format-detection'}
-					content={'telephone=no'}
-				/>
-				<meta
-					name={'mobile-web-app-capable'}
-					content={'yes'}
-				/>
-				<meta
-					name={'msapplication-config'}
-					content={'/favicons/browserconfig.xml'}
-				/>
-				<meta
-					name={'msapplication-tap-highlight'}
-					content={'no'}
-				/>
+			<meta
+				name={'application-name'}
+				content={meta.name}
+			/>
+			<meta
+				name={'apple-mobile-web-app-title'}
+				content={meta.name}
+			/>
+			<meta
+				name={'apple-mobile-web-app-capable'}
+				content={'yes'}
+			/>
+			<meta
+				name={'apple-mobile-web-app-status-bar-style'}
+				content={'default'}
+			/>
+			<meta
+				name={'format-detection'}
+				content={'telephone=no'}
+			/>
+			<meta
+				name={'mobile-web-app-capable'}
+				content={'yes'}
+			/>
+			<meta
+				name={'msapplication-config'}
+				content={'/favicons/browserconfig.xml'}
+			/>
+			<meta
+				name={'msapplication-tap-highlight'}
+				content={'no'}
+			/>
 
-				<link
-					rel={'manifest'}
-					href={'/manifest.json'}
-				/>
-				<link
-					rel={'mask-icon'}
-					href={'/favicons/safari-pinned-tab.svg'}
-					color={meta.theme_color}
-				/>
-				<link
-					rel={'shortcut icon'}
-					type={'image/x-icon'}
-					href={'/favicons/favicon.ico'}
-				/>
-				<link
-					rel={'icon'}
-					type={'image/png'}
-					sizes={'32x32'}
-					href={'/favicons/favicon-32x32.png'}
-				/>
-				<link
-					rel={'icon'}
-					type={'image/png'}
-					sizes={'16x16'}
-					href={'/favicons/favicon-16x16.png'}
-				/>
-				<link
-					rel={'icon'}
-					type={'image/png'}
-					sizes={'512x512'}
-					href={'/favicons/favicon-512x512.png'}
-				/>
-				<link
-					rel={'icon'}
-					type={'image/png'}
-					sizes={'192x192'}
-					href={'/favicons/android-icon-192x192.png'}
-				/>
-				<link
-					rel={'icon'}
-					type={'image/png'}
-					sizes={'144x144'}
-					href={'/favicons/android-icon-144x144.png'}
-				/>
-				<link
-					rel={'apple-touch-icon'}
-					href={'/favicons/apple-icon.png'}
-				/>
-				<link
-					rel={'apple-touch-icon'}
-					sizes={'152x152'}
-					href={'/favicons/apple-icon-152x152.png'}
-				/>
-				<link
-					rel={'apple-touch-icon'}
-					sizes={'180x180'}
-					href={'/favicons/apple-icon-180x180.png'}
-				/>
-				<link
-					rel={'apple-touch-icon'}
-					sizes={'167x167'}
-					href={'/favicons/apple-icon-167x167.png'}
-				/>
-				<meta
-					name={'robots'}
-					content={'index,nofollow'}
-				/>
-				<meta
-					name={'googlebot'}
-					content={'index,nofollow'}
-				/>
-				<meta charSet={'utf-8'} />
-			</Head>
-			<DefaultSeo
-				title={meta.name}
-				defaultTitle={meta.name}
-				description={meta.description}
-				openGraph={{
-					type: 'website',
-					locale: meta.locale,
-					url: meta.uri,
-					site_name: meta.name,
-					title: meta.name,
-					description: meta.description,
-					images: [
-						{
-							url: meta.og,
-							width: 1500,
-							height: 500,
-							alt: meta.name
-						}
-					]
-				}}
-				twitter={{
-					handle: meta.twitter,
-					site: meta.twitter,
-					cardType: 'summary_large_image'
-				}}
-			/>
-		</>
+			<link
+				rel={'manifest'}
+				href={'/manifest.json'}
+			/>
+			<link
+				rel={'mask-icon'}
+				href={'/favicons/safari-pinned-tab.svg'}
+				color={meta.theme_color}
+			/>
+			<link
+				rel={'shortcut icon'}
+				type={'image/x-icon'}
+				href={'/favicons/favicon.ico'}
+			/>
+			<link
+				rel={'icon'}
+				type={'image/png'}
+				sizes={'32x32'}
+				href={'/favicons/favicon-32x32.png'}
+			/>
+			<link
+				rel={'icon'}
+				type={'image/png'}
+				sizes={'16x16'}
+				href={'/favicons/favicon-16x16.png'}
+			/>
+			<link
+				rel={'icon'}
+				type={'image/png'}
+				sizes={'512x512'}
+				href={'/favicons/favicon-512x512.png'}
+			/>
+			<link
+				rel={'icon'}
+				type={'image/png'}
+				sizes={'192x192'}
+				href={'/favicons/android-icon-192x192.png'}
+			/>
+			<link
+				rel={'icon'}
+				type={'image/png'}
+				sizes={'144x144'}
+				href={'/favicons/android-icon-144x144.png'}
+			/>
+			<link
+				rel={'apple-touch-icon'}
+				href={'/favicons/apple-icon.png'}
+			/>
+			<link
+				rel={'apple-touch-icon'}
+				sizes={'152x152'}
+				href={'/favicons/apple-icon-152x152.png'}
+			/>
+			<link
+				rel={'apple-touch-icon'}
+				sizes={'180x180'}
+				href={'/favicons/apple-icon-180x180.png'}
+			/>
+			<link
+				rel={'apple-touch-icon'}
+				sizes={'167x167'}
+				href={'/favicons/apple-icon-167x167.png'}
+			/>
+			<link
+				rel={'icon'}
+				type={'image/png'}
+				sizes={'512x512'}
+				href={'/favicons/favicon-512x512.png'}
+			/>
+			<meta
+				name={'googlebot'}
+				content={'index,nofollow'}
+			/>
+			<meta charSet={'utf-8'} />
+			<meta
+				property={'twitter:image'}
+				content={meta.og}
+			/>
+			<meta
+				property={'twitter:card'}
+				content={'summary_large_image'}
+			/>
+			<meta
+				property={'twitter:title'}
+				content={meta.name}
+			/>
+			<meta
+				property={'twitter:description'}
+				content={meta.description}
+			/>
+
+			<meta
+				property={'og:image'}
+				content={meta.og}
+			/>
+			<meta
+				property={'og:url'}
+				content={meta.uri}
+			/>
+			<meta
+				property={'og:title'}
+				content={meta.name}
+			/>
+			<meta
+				property={'og:description'}
+				content={meta.description}
+			/>
+		</Head>
 	);
 }
 
diff --git a/components/common/TokenList/TokenListAddBox.tsx b/components/common/TokenList/TokenListAddBox.tsx
deleted file mode 100644
index ad70fae..0000000
--- a/components/common/TokenList/TokenListAddBox.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-import React, {useCallback, useMemo, useRef, useState} from 'react';
-import axios from 'axios';
-import {IconCircleCheck} from '@icons/IconCircleCheck';
-import {IconCircleCross} from '@icons/IconCircleCross';
-import {erc20ABI, readContracts} from '@wagmi/core';
-import {Button} from '@yearn-finance/web-lib/components/Button';
-import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID';
-import {IconLoader} from '@yearn-finance/web-lib/icons/IconLoader';
-import {decodeAsBigInt, decodeAsNumber, decodeAsString} from '@yearn-finance/web-lib/utils/decoder';
-import {toNormalizedBN} from '@yearn-finance/web-lib/utils/format.bigNumber';
-import AddressInput, {defaultInputAddressLike} from '@common/AddressInput';
-
-import type {TInputAddressLike} from '@common/AddressInput';
-import type {TToken, TTokenList} from '@types';
-
-type TValue = {
-	label: string;
-	isValid: boolean | 'undetermined';
-	list: TTokenList | undefined;
-};
-type TTokenListAddBox = {
-	onAddTokenList: (list: TTokenList) => void;
-	onAddToken: (token: TToken) => void;
-};
-function TokenListAddBox({onAddTokenList, onAddToken}: TTokenListAddBox): React.ReactElement {
-	const {safeChainID} = useChainID();
-	const [value, set_value] = useState<TValue>({label: '', isValid: 'undetermined', list: undefined});
-	const [extraToken, set_extraToken] = useState<TInputAddressLike>(defaultInputAddressLike);
-	const [isLoadingTokenList, set_isLoadingTokenList] = useState<boolean>(false);
-	const [isLoadingTokenAddress, set_isLoadingTokenAddress] = useState<boolean>(false);
-	const currentLabel = useRef<string>('');
-
-	const statusURI = useMemo((): 'valid' | 'invalid' | 'warning' | 'pending' | 'none' => {
-		if (value.isValid === true) {
-			return 'valid';
-		}
-		if (value.isValid === false && value.label !== '' && !isLoadingTokenList) {
-			return 'invalid';
-		}
-		if (isLoadingTokenList) {
-			return 'pending';
-		}
-		return 'none';
-	}, [value, isLoadingTokenList]);
-
-	const onChangeURI = useCallback(
-		async (label: string): Promise<void> => {
-			currentLabel.current = label;
-
-			if (!label.endsWith('.json')) {
-				return set_value({label, isValid: false, list: undefined});
-			}
-
-			set_value({label, isValid: 'undetermined', list: undefined});
-			set_isLoadingTokenList(true);
-
-			const [fromLabel] = await Promise.allSettled([axios.get(label)]);
-			if (fromLabel.status === 'fulfilled') {
-				//Check if we got name, logoURI and tokens array
-				const {name, logoURI, tokens} = fromLabel.value.data;
-				if (name && logoURI && Array.isArray(tokens) && tokens.length > 0) {
-					//Check if the tokens contains address, name, symbol, logoURI, chainID and decimals
-					const areTokensValid = (tokens as TToken[]).every((eachToken: TToken): boolean => {
-						const {address, name, symbol, logoURI, chainID, decimals} = eachToken;
-						return Boolean(
-							address &&
-								name !== undefined &&
-								symbol !== undefined &&
-								logoURI !== undefined &&
-								chainID &&
-								decimals
-						);
-					});
-					if (currentLabel.current === label) {
-						set_value({
-							label,
-							isValid: areTokensValid,
-							list: {...(fromLabel.value.data as TTokenList), uri: label}
-						});
-					}
-					set_isLoadingTokenList(false);
-				}
-			} else {
-				if (currentLabel.current === label) {
-					set_value({label, isValid: false, list: undefined});
-				}
-				set_isLoadingTokenList(false);
-			}
-		},
-		[currentLabel]
-	);
-
-	const onSubmitURI = useCallback(
-		async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
-			e.preventDefault();
-			if (value.isValid === true && value.list) {
-				onAddTokenList(value.list);
-				set_value({label: '', isValid: 'undetermined', list: undefined});
-			}
-		},
-		[value, onAddTokenList]
-	);
-
-	const onSubmitAddress = useCallback(
-		async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
-			e.preventDefault();
-			if (extraToken.isValid === true && extraToken.address) {
-				set_isLoadingTokenAddress(true);
-				const [name, symbol, decimals] = await readContracts({
-					contracts: [
-						{abi: erc20ABI, address: extraToken.address, functionName: 'name'},
-						{abi: erc20ABI, address: extraToken.address, functionName: 'symbol'},
-						{abi: erc20ABI, address: extraToken.address, functionName: 'decimals'}
-					]
-				});
-				onAddToken({
-					address: extraToken.address,
-					chainID: safeChainID,
-					name: decodeAsString(name),
-					symbol: decodeAsString(symbol),
-					decimals: Number(decodeAsBigInt(decimals)) || decodeAsNumber(decimals),
-					logoURI: `${process.env.SMOL_ASSETS_URL}/token/${safeChainID}/${extraToken.address}/logo-32.png`,
-					value: 0,
-					price: toNormalizedBN(0),
-					balance: toNormalizedBN(0)
-				});
-				set_extraToken(defaultInputAddressLike);
-				set_isLoadingTokenAddress(false);
-			}
-		},
-		[extraToken.isValid, extraToken.address, onAddToken, safeChainID]
-	);
-
-	return (
-		<div className={'mt-4 px-4 md:mt-6 md:px-6'}>
-			<div className={'rounded-md bg-primary-50 p-2 md:p-4'}>
-				<p className={'text-sm text-neutral-700'}>
-					{
-						"Need more tokens? Add a single token via it's contract address, or add a custom token list for extra tokens. You can also browse existing token lists "
-					}
-					<a
-						href={'https://smold.app/tokenlistooor'}
-						target={'_blank'}
-						rel={'noreferrer'}
-						className={'font-medium text-primary-900 hover:underline'}>
-						{'here'}
-					</a>
-					{'.'}
-				</p>
-				<form
-					onSubmit={onSubmitURI}
-					className={'mt-2 flex flex-row gap-4'}>
-					<div className={'smol--input-wrapper'}>
-						<input
-							aria-invalid={statusURI === 'invalid'}
-							onFocus={async (): Promise<void> => onChangeURI(value.label)}
-							onChange={async (e): Promise<void> => onChangeURI(e.target.value)}
-							value={value.label}
-							required
-							autoComplete={'off'}
-							spellCheck={false}
-							className={'smol--input pr-6'}
-							type={'text'}
-							placeholder={'https://...'}
-						/>
-						<label
-							className={
-								statusURI === 'invalid' || statusURI === 'warning'
-									? 'relative'
-									: 'pointer-events-none relative h-4 w-4'
-							}>
-							<span
-								className={
-									statusURI === 'invalid' || statusURI === 'warning'
-										? 'tooltip'
-										: 'pointer-events-none'
-								}>
-								<div className={'pointer-events-none relative h-4 w-4'}>
-									<IconCircleCheck
-										className={`absolute h-4 w-4 text-[#16a34a] transition-opacity ${
-											statusURI === 'valid' ? 'opacity-100' : 'opacity-0'
-										}`}
-									/>
-									<IconCircleCross
-										className={`absolute h-4 w-4 text-[#e11d48] transition-opacity ${
-											statusURI === 'invalid' ? 'opacity-100' : 'opacity-0'
-										}`}
-									/>
-									<div className={'absolute inset-0 flex items-center justify-center'}>
-										<IconLoader
-											className={`h-4 w-4 animate-spin text-neutral-900 transition-opacity ${
-												statusURI === 'pending' ? 'opacity-100' : 'opacity-0'
-											}`}
-										/>
-									</div>
-								</div>
-								<span className={'tooltiptextsmall'}>
-									{statusURI === 'invalid' && 'This address is invalid'}
-									{statusURI === 'warning' && 'This address is already in use'}
-								</span>
-							</span>
-						</label>
-					</div>
-					<div>
-						<Button
-							isDisabled={value.isValid !== true}
-							isBusy={isLoadingTokenList}
-							className={'whitespace-nowrap'}>
-							{'Add list'}
-						</Button>
-					</div>
-				</form>
-				<p className={'mt-4 text-sm text-neutral-700'}>
-					{'You can also provide a single token address to add it to your list.'}
-				</p>
-				<form
-					onSubmit={onSubmitAddress}
-					className={'mt-2 flex flex-row gap-4'}>
-					<AddressInput
-						inputClassName={'text-normal font-normal'}
-						value={extraToken}
-						onChangeValue={(e): void => set_extraToken(e)}
-					/>
-					<div>
-						<Button
-							isDisabled={extraToken.isValid !== true}
-							isBusy={isLoadingTokenAddress}
-							className={'whitespace-nowrap'}>
-							{'Add Token'}
-						</Button>
-					</div>
-				</form>
-			</div>
-		</div>
-	);
-}
-
-export {TokenListAddBox};
diff --git a/components/common/TokenList/TokenListHandlerPopover.tsx b/components/common/TokenList/TokenListHandlerPopover.tsx
deleted file mode 100644
index e9e8fc5..0000000
--- a/components/common/TokenList/TokenListHandlerPopover.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import React, {Fragment, useRef} from 'react';
-import {Dialog, Transition} from '@headlessui/react';
-import {IconCircleCross} from '@icons/IconCircleCross';
-import {ImageWithFallback} from '@common/ImageWithFallback';
-import {TokenListAddBox} from '@common/TokenList/TokenListAddBox';
-
-import type {Dispatch, ReactElement, SetStateAction} from 'react';
-import type {TToken, TTokenList} from '@types';
-
-type TTokenListHandlerPopover = {
-	lists: TTokenList[];
-	onAddTokenList: (list: TTokenList) => void;
-	onAddToken: (token: TToken) => void;
-	isOpen: boolean;
-	set_isOpen: Dispatch<SetStateAction<boolean>>;
-};
-function TokenListHandlerPopover({
-	lists,
-	onAddTokenList,
-	onAddToken,
-	isOpen,
-	set_isOpen
-}: TTokenListHandlerPopover): React.ReactElement {
-	const cancelButtonRef = useRef(null);
-
-	return (
-		<Transition.Root
-			show={isOpen}
-			as={Fragment}>
-			<Dialog
-				as={'div'}
-				className={'relative z-50'}
-				initialFocus={cancelButtonRef}
-				onClose={set_isOpen}>
-				<Transition.Child
-					as={Fragment}
-					enter={'ease-out duration-300'}
-					enterFrom={'opacity-0'}
-					enterTo={'opacity-100'}
-					leave={'ease-in duration-200'}
-					leaveFrom={'opacity-100'}
-					leaveTo={'opacity-0'}>
-					<div className={'fixed inset-0 bg-primary-900/40 backdrop-blur-sm transition-opacity'} />
-				</Transition.Child>
-
-				<div className={'fixed inset-0 z-10 w-screen overflow-y-auto'}>
-					<div className={'flex min-h-full items-end justify-center p-4 text-center sm:items-start sm:p-0'}>
-						<Transition.Child
-							as={Fragment}
-							enter={'ease-out duration-300'}
-							enterFrom={'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'}
-							enterTo={'opacity-100 translate-y-0 sm:scale-100'}
-							leave={'ease-in duration-200'}
-							leaveFrom={'opacity-100 translate-y-0 sm:scale-100'}
-							leaveTo={'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'}>
-							<Dialog.Panel
-								className={
-									'relative rounded-lg bg-white pb-4 pt-5 text-left shadow-xl transition-all sm:my-24 sm:w-full sm:max-w-2xl'
-								}>
-								<div
-									onClick={(): void => set_isOpen(false)}
-									className={'absolute -right-2 -top-2'}>
-									<div className={'group cursor-pointer rounded-full bg-white'}>
-										<IconCircleCross
-											className={
-												'h-6 w-6 text-neutral-600 transition-colors hover:text-neutral-900'
-											}
-											aria-hidden={'true'}
-										/>
-									</div>
-								</div>
-
-								<div className={'sm:flex sm:items-start'}>
-									<div className={'mt-3 text-center sm:mt-0 sm:text-left'}>
-										<Dialog.Title
-											as={'h3'}
-											className={
-												'px-4 text-base font-semibold leading-6 text-neutral-900 md:px-6'
-											}>
-											{'Manage your list of tokens'}
-										</Dialog.Title>
-
-										<TokenListAddBox
-											onAddTokenList={onAddTokenList}
-											onAddToken={onAddToken}
-										/>
-
-										<div
-											className={
-												'scrollbar-show mt-2 max-h-[280px] overflow-y-scroll md:max-h-[420px]'
-											}>
-											{lists
-												.filter((eachList: TTokenList): boolean => eachList.tokens.length > 0)
-												.map(
-													(eachList: TTokenList): ReactElement => (
-														<div
-															key={eachList.name}
-															className={
-																'relative flex w-full p-4 transition-colors hover:bg-neutral-50 md:px-6'
-															}>
-															<div
-																className={
-																	'grid w-full grid-cols-12 items-center gap-4'
-																}>
-																<div
-																	className={
-																		'col-span-12 flex flex-row items-center space-x-6 md:col-span-8'
-																	}>
-																	<div
-																		className={
-																			'rounded-full border border-neutral-100'
-																		}>
-																		<ImageWithFallback
-																			alt={eachList.name}
-																			width={40}
-																			height={40}
-																			quality={90}
-																			className={'w-10 min-w-[40px]'}
-																			unoptimized
-																			src={eachList.logoURI || ''}
-																		/>
-																	</div>
-																	<div className={'text-left'}>
-																		<p className={'text-sm'}>
-																			<span className={'font-medium'}>
-																				{eachList.name}
-																			</span>
-																		</p>
-																		<span
-																			className={
-																				'font-number mt-2 block !font-mono text-xxs text-neutral-600 transition-colors md:text-xs'
-																			}>
-																			{eachList.uri ? (
-																				<a
-																					href={eachList.uri}
-																					target={'_blank'}
-																					rel={'noreferrer'}
-																					className={
-																						'cursor-alias font-mono hover:text-neutral-900 hover:underline'
-																					}>
-																					{eachList.uri.split('/').pop() ||
-																						'Your list'}
-																				</a>
-																			) : (
-																				'Your list'
-																			)}
-																			{` • ${eachList.tokens.length} ${
-																				eachList.tokens.length > 1
-																					? 'tokens'
-																					: 'token'
-																			}`}
-																		</span>
-																	</div>
-																</div>
-															</div>
-														</div>
-													)
-												)}
-										</div>
-									</div>
-								</div>
-							</Dialog.Panel>
-						</Transition.Child>
-					</div>
-				</div>
-			</Dialog>
-		</Transition.Root>
-	);
-}
-
-export {TokenListHandlerPopover};
diff --git a/components/icons/IconCheck.tsx b/components/icons/IconCheck.tsx
new file mode 100644
index 0000000..7d5e5a8
--- /dev/null
+++ b/components/icons/IconCheck.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import type {ReactElement} from 'react';
+
+function IconCheck(props: React.SVGProps<SVGSVGElement>): ReactElement {
+	return (
+		<svg
+			{...props}
+			viewBox={'0 0 512 512'}
+			fill={'none'}
+			xmlns={'http://www.w3.org/2000/svg'}>
+			<path
+				d={
+					'M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'
+				}
+				fill={'currentcolor'}
+			/>
+		</svg>
+	);
+}
+
+export {IconCheck};
diff --git a/components/icons/IconMenu.tsx b/components/icons/IconMenu.tsx
new file mode 100644
index 0000000..9f21305
--- /dev/null
+++ b/components/icons/IconMenu.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import type {ReactElement} from 'react';
+
+function IconMenu(props: React.SVGProps<SVGSVGElement>): ReactElement {
+	return (
+		<svg
+			{...props}
+			viewBox={'0 0 448 512'}
+			fill={'none'}
+			xmlns={'http://www.w3.org/2000/svg'}>
+			<path
+				fill={'currentColor'}
+				d={
+					'M0 88C0 74.7 10.7 64 24 64H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24C10.7 112 0 101.3 0 88zM0 248c0-13.3 10.7-24 24-24H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.3 0-24-10.7-24-24zM448 408c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H424c13.3 0 24 10.7 24 24z'
+				}
+			/>
+		</svg>
+	);
+}
+
+export {IconMenu};
diff --git a/contexts/useMultichainBalances.ts b/contexts/useMultichainBalances.ts
deleted file mode 100644
index 3527f3c..0000000
--- a/contexts/useMultichainBalances.ts
+++ /dev/null
@@ -1,476 +0,0 @@
-import {useCallback, useMemo, useRef, useState} from 'react';
-import {useAsyncTrigger} from 'hooks/useAsyncTrigger';
-import {erc20ABI, useChainId} from 'wagmi';
-import {deserialize, multicall, serialize} from '@wagmi/core';
-import {useUI} from '@yearn-finance/web-lib/contexts/useUI';
-import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
-import {AGGREGATE3_ABI} from '@yearn-finance/web-lib/utils/abi/aggregate.abi';
-import {isZeroAddress, toAddress} from '@yearn-finance/web-lib/utils/address';
-import {MULTICALL3_ADDRESS} from '@yearn-finance/web-lib/utils/constants';
-import {decodeAsBigInt, decodeAsNumber, decodeAsString} from '@yearn-finance/web-lib/utils/decoder';
-import {toBigInt, toNormalizedBN, toNormalizedValue} from '@yearn-finance/web-lib/utils/format.bigNumber';
-import {isEth} from '@yearn-finance/web-lib/utils/isEth';
-import {isZero} from '@yearn-finance/web-lib/utils/isZero';
-import {getNetwork} from '@yearn-finance/web-lib/utils/wagmi/utils';
-
-import type {DependencyList} from 'react';
-import type {ContractFunctionConfig} from 'viem';
-import type {Connector} from 'wagmi';
-import type {TAddress, TDict, TNDict} from '@yearn-finance/web-lib/types';
-import type {TDefaultStatus} from '@yearn-finance/web-lib/types/hooks';
-import type {TYDaemonPrices} from '@yearn-finance/web-lib/utils/schemas/yDaemonPricesSchema';
-import type {TChainTokens, TToken} from '@types';
-
-/* 🔵 - Yearn Finance **********************************************************
- ** Request, Response and helpers for the useBalances hook.
- ******************************************************************************/
-export type TUseBalancesTokens = {
-	address: TAddress;
-	chainID: number;
-	decimals?: number;
-	name?: string;
-	symbol?: string;
-	for?: string;
-};
-export type TUseBalancesReq = {
-	key?: string | number;
-	tokens: TUseBalancesTokens[];
-	prices?: TYDaemonPrices;
-	effectDependencies?: DependencyList;
-	provider?: Connector;
-};
-
-export type TUseBalancesRes = {
-	data: TChainTokens;
-	onUpdate: () => Promise<TChainTokens>;
-	onUpdateSome: (token: TUseBalancesTokens[]) => Promise<TChainTokens>;
-	error?: Error;
-	status: 'error' | 'loading' | 'success' | 'unknown';
-} & TDefaultStatus;
-
-type TDataRef = {
-	nonce: number;
-	address: TAddress;
-	balances: TChainTokens;
-};
-
-/* 🔵 - Yearn Finance **********************************************************
- ** Default status for the loading state.
- ******************************************************************************/
-const defaultStatus = {
-	isLoading: false,
-	isFetching: false,
-	isSuccess: false,
-	isError: false,
-	isFetched: false,
-	isRefetching: false
-};
-
-async function performCall(
-	chainID: number,
-	calls: ContractFunctionConfig[],
-	tokens: TUseBalancesTokens[],
-	prices?: TYDaemonPrices
-): Promise<[TDict<TToken>, Error | undefined]> {
-	const _data: TDict<TToken> = {};
-	const results = await multicall({
-		contracts: calls as never[],
-		chainId: chainID
-	});
-
-	let rIndex = 0;
-	for (const element of tokens) {
-		const {address, decimals: injectedDecimals, name: injectedName, symbol: injectedSymbol} = element;
-		const balanceOf = decodeAsBigInt(results[rIndex++]);
-		const decimals = decodeAsNumber(results[rIndex++]) || injectedDecimals || 18;
-		const rawPrice = toBigInt(prices?.[address]);
-		let symbol = decodeAsString(results[rIndex++]) || injectedSymbol || '';
-		let name = decodeAsString(results[rIndex++]) || injectedName || '';
-		if (isEth(address)) {
-			const nativeTokenWrapper = getNetwork(chainID)?.contracts?.wrappedToken;
-			if (nativeTokenWrapper) {
-				symbol = nativeTokenWrapper.coinSymbol;
-				name = nativeTokenWrapper.coinName;
-			}
-		}
-
-		_data[address] = {
-			address: address,
-			name: name,
-			symbol: symbol,
-			decimals: decimals,
-			chainID: chainID,
-			balance: toNormalizedBN(balanceOf, decimals),
-			price: toNormalizedBN(rawPrice, 6),
-			value: toNormalizedValue(balanceOf, decimals) * toNormalizedValue(rawPrice, 6)
-		};
-	}
-	return [_data, undefined];
-}
-
-async function getBalances(
-	chainID: number,
-	address: TAddress,
-	tokens: TUseBalancesTokens[],
-	prices?: TYDaemonPrices
-): Promise<[TDict<TToken>, Error | undefined]> {
-	let result: TDict<TToken> = {};
-	const calls: ContractFunctionConfig[] = [];
-
-	for (const element of tokens) {
-		const {address: token} = element;
-		const ownerAddress = address;
-		if (isEth(token)) {
-			const nativeTokenWrapper = getNetwork(chainID)?.contracts?.wrappedToken;
-			if (!nativeTokenWrapper) {
-				console.error('No native token wrapper found for chainID', chainID);
-				continue;
-			}
-			const multicall3Contract = {address: MULTICALL3_ADDRESS, abi: AGGREGATE3_ABI};
-			const baseContract = {address: nativeTokenWrapper.address, abi: erc20ABI};
-			calls.push({...multicall3Contract, functionName: 'getEthBalance', args: [ownerAddress]});
-			calls.push({...baseContract, functionName: 'decimals'});
-			calls.push({...baseContract, functionName: 'symbol'});
-			calls.push({...baseContract, functionName: 'name'});
-		} else {
-			const baseContract = {address: token, abi: erc20ABI};
-			calls.push({...baseContract, functionName: 'balanceOf', args: [ownerAddress]});
-			calls.push({...baseContract, functionName: 'decimals'});
-			calls.push({...baseContract, functionName: 'symbol'});
-			calls.push({...baseContract, functionName: 'name'});
-		}
-	}
-
-	try {
-		const [callResult] = await performCall(chainID, calls, tokens, prices);
-		result = {...result, ...callResult};
-		return [result, undefined];
-	} catch (_error) {
-		console.error(_error);
-		return [result, _error as Error];
-	}
-}
-
-/* 🔵 - Yearn Finance ******************************************************
- ** This hook can be used to fetch balance information for any ERC20 tokens.
- **************************************************************************/
-export function useBalances(props?: TUseBalancesReq): TUseBalancesRes {
-	const {address: userAddress} = useWeb3();
-	const chainID = useChainId();
-	const {onLoadStart, onLoadDone} = useUI();
-	const [status, set_status] = useState<TDefaultStatus>(defaultStatus);
-	const [error, set_error] = useState<Error | undefined>(undefined);
-	const [balances, set_balances] = useState<TChainTokens>({});
-	const data = useRef<TDataRef>({nonce: 0, address: toAddress(), balances: {}});
-	const stringifiedTokens = useMemo((): string => serialize(props?.tokens || []), [props?.tokens]);
-
-	const updateBalancesCall = useCallback(
-		(chainID: number, newRawData: TDict<TToken>): TChainTokens => {
-			if (toAddress(userAddress) !== data?.current?.address) {
-				data.current = {
-					address: toAddress(userAddress),
-					balances: {},
-					nonce: 0
-				};
-			}
-			data.current.address = toAddress(userAddress);
-
-			for (const [address, element] of Object.entries(newRawData)) {
-				if (!data.current.balances[chainID]) {
-					data.current.balances[chainID] = {};
-				}
-				data.current.balances[chainID][address] = {
-					...data.current.balances[chainID][address],
-					...element
-				};
-			}
-			data.current.nonce += 1;
-
-			set_balances(
-				(b): TChainTokens => ({
-					...b,
-					[chainID]: {
-						...(b[chainID] || {}),
-						...data.current.balances[chainID]
-					}
-				})
-			);
-			return data.current.balances;
-		},
-		[userAddress]
-	);
-
-	/* 🔵 - Yearn Finance ******************************************************
-	 ** onUpdate will take the stringified tokens and fetch the balances for each
-	 ** token. It will then update the balances state with the new balances.
-	 ** This takes the whole list and is not optimized for performance, aka not
-	 ** send in a worker.
-	 **************************************************************************/
-	const onUpdate = useCallback(async (): Promise<TChainTokens> => {
-		if (!userAddress) {
-			return {};
-		}
-		const tokenList = deserialize(stringifiedTokens) || [];
-		const tokens = tokenList.filter(({address}: TUseBalancesTokens): boolean => !isZeroAddress(address));
-		if (isZero(tokens.length)) {
-			return {};
-		}
-		set_status({
-			...defaultStatus,
-			isLoading: true,
-			isFetching: true,
-			isRefetching: defaultStatus.isFetched
-		});
-		onLoadStart();
-
-		const tokensPerChainID: TNDict<TUseBalancesTokens[]> = {};
-		for (const token of tokens) {
-			if (!tokensPerChainID[token.chainID]) {
-				tokensPerChainID[token.chainID] = [];
-			}
-			tokensPerChainID[token.chainID].push(token);
-		}
-
-		const updated: TChainTokens = {};
-		for (const [chainIDStr, tokens] of Object.entries(tokensPerChainID)) {
-			const chainID = Number(chainIDStr);
-			const chunks = [];
-			for (let i = 0; i < tokens.length; i += 5_000) {
-				chunks.push(tokens.slice(i, i + 5_000));
-			}
-
-			for (const chunkTokens of chunks) {
-				const [newRawData, err] = await getBalances(chainID || 1, userAddress, chunkTokens);
-				if (err) {
-					set_error(err as Error);
-				}
-
-				if (toAddress(userAddress) !== data?.current?.address) {
-					data.current = {
-						address: toAddress(userAddress),
-						balances: {},
-						nonce: 0
-					};
-				}
-				data.current.address = toAddress(userAddress);
-				for (const [address, element] of Object.entries(newRawData)) {
-					if (!updated[chainID]) {
-						updated[chainID] = {};
-					}
-					updated[chainID][address] = element;
-
-					if (!data.current.balances[chainID]) {
-						data.current.balances[chainID] = {};
-					}
-					data.current.balances[chainID][address] = {
-						...data.current.balances[chainID][address],
-						...element
-					};
-				}
-				data.current.nonce += 1;
-			}
-
-			set_balances(
-				(b): TChainTokens => ({
-					...b,
-					[chainID]: {
-						...(b[chainID] || {}),
-						...data.current.balances[chainID]
-					}
-				})
-			);
-			set_status({...defaultStatus, isSuccess: true, isFetched: true});
-		}
-		onLoadDone();
-
-		return updated;
-	}, [onLoadDone, onLoadStart, stringifiedTokens, userAddress]);
-
-	/* 🔵 - Yearn Finance ******************************************************
-	 ** onUpdateSome takes a list of tokens and fetches the balances for each
-	 ** token. Even if it's not optimized for performance, it should not be an
-	 ** issue as it should only be used for a little list of tokens.
-	 **************************************************************************/
-	const onUpdateSome = useCallback(
-		async (tokenList: TUseBalancesTokens[]): Promise<TChainTokens> => {
-			set_status({
-				...defaultStatus,
-				isLoading: true,
-				isFetching: true,
-				isRefetching: defaultStatus.isFetched
-			});
-			onLoadStart();
-			const tokens = tokenList.filter(({address}: TUseBalancesTokens): boolean => !isZeroAddress(address));
-			const tokensPerChainID: TNDict<TUseBalancesTokens[]> = {};
-			for (const token of tokens) {
-				if (!tokensPerChainID[token.chainID]) {
-					tokensPerChainID[token.chainID] = [];
-				}
-				tokensPerChainID[token.chainID].push(token);
-			}
-
-			const updated: TChainTokens = {};
-			for (const [chainIDStr, tokens] of Object.entries(tokensPerChainID)) {
-				const chainID = Number(chainIDStr);
-				const chunks = [];
-				for (let i = 0; i < tokens.length; i += 2_000) {
-					chunks.push(tokens.slice(i, i + 2_000));
-				}
-
-				for (const chunkTokens of chunks) {
-					const [newRawData, err] = await getBalances(chainID || 1, toAddress(userAddress), chunkTokens);
-					if (err) {
-						set_error(err as Error);
-					}
-					if (toAddress(userAddress) !== data?.current?.address) {
-						data.current = {
-							address: toAddress(userAddress),
-							balances: {},
-							nonce: 0
-						};
-					}
-					data.current.address = toAddress(userAddress);
-
-					for (const [address, element] of Object.entries(newRawData)) {
-						if (!updated[chainID]) {
-							updated[chainID] = {};
-						}
-						updated[chainID][address] = element;
-
-						if (!data.current.balances[chainID]) {
-							data.current.balances[chainID] = {};
-						}
-						data.current.balances[chainID][address] = {
-							...data.current.balances[chainID][address],
-							...element
-						};
-					}
-					data.current.nonce += 1;
-				}
-			}
-
-			set_balances(
-				(b): TChainTokens => ({
-					...b,
-					[chainID]: {
-						...(b[chainID] || {}),
-						...data.current.balances[chainID]
-					}
-				})
-			);
-			set_status({...defaultStatus, isSuccess: true, isFetched: true});
-			onLoadDone();
-			return updated;
-		},
-		[onLoadDone, onLoadStart, userAddress, chainID]
-	);
-
-	const assignPrices = useCallback(
-		(_rawData: TChainTokens): TChainTokens => {
-			const newData = {..._rawData};
-			for (const chainIDStr of Object.keys(newData)) {
-				const chainID = Number(chainIDStr);
-				for (const address of Object.keys(newData[chainID])) {
-					const tokenAddress = toAddress(address);
-					const rawPrice = toBigInt(props?.prices?.[tokenAddress]);
-					if (!newData[chainID]) {
-						newData[chainID] = {};
-					}
-					newData[chainID][tokenAddress] = {
-						...newData[chainID][tokenAddress],
-						price: toNormalizedBN(rawPrice, 6),
-						value:
-							Number(newData?.[chainID]?.[tokenAddress]?.balance?.normalized || 0) *
-							toNormalizedValue(rawPrice, 6)
-					};
-				}
-			}
-			return newData;
-		},
-		[props?.prices]
-	);
-
-	/* 🔵 - Yearn Finance ******************************************************
-	 ** Everytime the stringifiedTokens change, we need to update the balances.
-	 ** This is the main hook and is optimized for performance, using a worker
-	 ** to fetch the balances, preventing the UI to freeze.
-	 **************************************************************************/
-	useAsyncTrigger(async (): Promise<void> => {
-		if (!userAddress) {
-			return;
-		}
-		set_status({
-			...defaultStatus,
-			isLoading: true,
-			isFetching: true,
-			isRefetching: defaultStatus.isFetched
-		});
-		onLoadStart();
-
-		const tokens = (JSON.parse(stringifiedTokens) || []) as TUseBalancesTokens[];
-		const tokensPerChainID: TNDict<TUseBalancesTokens[]> = {};
-		for (const token of tokens) {
-			if (!tokensPerChainID[token.chainID]) {
-				tokensPerChainID[token.chainID] = [];
-			}
-			tokensPerChainID[token.chainID].push(token);
-		}
-
-		for (const [chainIDStr, tokens] of Object.entries(tokensPerChainID)) {
-			const chainID = Number(chainIDStr);
-			const chunks = [];
-			for (let i = 0; i < tokens.length; i += 100) {
-				chunks.push(tokens.slice(i, i + 100));
-			}
-			const allPromises = [];
-			for (const chunkTokens of chunks) {
-				allPromises.push(
-					getBalances(chainID, userAddress, chunkTokens).then(async ([newRawData, err]): Promise<void> => {
-						updateBalancesCall(chainID, newRawData);
-						set_error(err);
-					})
-				);
-			}
-			await Promise.all(allPromises);
-		}
-		onLoadDone();
-		set_status({...defaultStatus, isSuccess: true, isFetched: true});
-	}, [stringifiedTokens, userAddress, onLoadStart, updateBalancesCall, onLoadDone]);
-
-	const contextValue = useMemo(
-		(): TUseBalancesRes => ({
-			data: assignPrices(balances || {}),
-			onUpdate: onUpdate,
-			onUpdateSome: onUpdateSome,
-			error,
-			isLoading: status.isLoading,
-			isFetching: status.isFetching,
-			isSuccess: status.isSuccess,
-			isError: status.isError,
-			isFetched: status.isFetched,
-			isRefetching: status.isRefetching,
-			status: status.isError
-				? 'error'
-				: status.isLoading || status.isFetching
-				  ? 'loading'
-				  : status.isSuccess
-				    ? 'success'
-				    : 'unknown'
-		}),
-		[
-			assignPrices,
-			balances,
-			error,
-			onUpdate,
-			onUpdateSome,
-			status.isError,
-			status.isFetched,
-			status.isFetching,
-			status.isLoading,
-			status.isRefetching,
-			status.isSuccess
-		]
-	);
-
-	return contextValue;
-}
diff --git a/contexts/useTokenList.tsx b/contexts/useTokenList.tsx
deleted file mode 100755
index d441333..0000000
--- a/contexts/useTokenList.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-import React, {createContext, useCallback, useContext, useMemo, useState} from 'react';
-import {useAsyncTrigger} from 'hooks/useAsyncTrigger';
-import axios from 'axios';
-import {useLocalStorageValue} from '@react-hookz/web';
-import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID';
-import {toAddress} from '@yearn-finance/web-lib/utils/address';
-import {toNormalizedBN} from '@yearn-finance/web-lib/utils/format.bigNumber';
-import {TokenListHandlerPopover} from '@common/TokenList/TokenListHandlerPopover';
-
-import type {AxiosResponse} from 'axios';
-import type {Dispatch, SetStateAction} from 'react';
-import type {TAddress, TDict} from '@yearn-finance/web-lib/types';
-import type {TToken, TTokenList} from '@types';
-
-export type TTokenListProps = {
-	tokenList: TDict<TToken>;
-	getToken: (tokenAddress: TAddress) => TToken | undefined;
-	set_tokenList: Dispatch<SetStateAction<TDict<TToken>>>;
-	openTokenListModal: () => void;
-};
-const defaultProps: TTokenListProps = {
-	tokenList: {},
-	getToken: (): TToken | undefined => undefined,
-	set_tokenList: (): void => undefined,
-	openTokenListModal: (): void => undefined
-};
-const customDefaultList = {
-	name: 'Custom',
-	description: 'Custom token list',
-	timestamp: new Date().toISOString(),
-	logoURI: '',
-	uri: '',
-	keywords: [],
-	version: {
-		major: 1,
-		minor: 0,
-		patch: 0
-	},
-	tokens: []
-};
-
-const TokenList = createContext<TTokenListProps>(defaultProps);
-export const TokenListContextApp = ({children}: {children: React.ReactElement}): React.ReactElement => {
-	const {safeChainID} = useChainID();
-	const {value: extraTokenlist, set: set_extraTokenlist} = useLocalStorageValue<string[]>(
-		`${process.env.PROJECT_SLUG}/extraTokenlists`
-	);
-	const {value: extraTokens, set: set_extraTokens} = useLocalStorageValue<TTokenList['tokens']>(
-		`${process.env.PROJECT_SLUG}/extraTokens`
-	);
-	const [tokenList, set_tokenList] = useState<TDict<TToken>>({});
-	const [tokenListExtra, set_tokenListExtra] = useState<TDict<TToken>>({});
-	const [tokenListCustom, set_tokenListCustom] = useState<TDict<TToken>>({});
-
-	const [lists, set_lists] = useState<TTokenList[]>([]);
-	const [extraLists, set_extraLists] = useState<TTokenList[]>([]);
-	const [customLists, set_customLists] = useState<TTokenList>(customDefaultList);
-	const [isTokenListModalOpen, set_isTokenListModalOpen] = useState<boolean>(false);
-
-	useAsyncTrigger(async (): Promise<void> => {
-		const rootURI = `https://raw.githubusercontent.com/SmolDapp/tokenLists/main/lists/${safeChainID}`;
-		const tokenListURIs = [`${rootURI}/etherscan.json`, `${rootURI}/tokenlistooor.json`];
-		const [fromEtherscan, fromSmol] = await Promise.allSettled(
-			tokenListURIs.map(async (eachURI: string): Promise<AxiosResponse> => axios.get(eachURI))
-		);
-		const tokens: TTokenList['tokens'] = [];
-		const fromList: TTokenList[] = [];
-		if (fromEtherscan.status === 'fulfilled' && fromEtherscan.value.data?.tokens) {
-			tokens.push(...(fromEtherscan.value.data as TTokenList).tokens);
-			fromList.push({...(fromEtherscan.value.data as TTokenList), uri: tokenListURIs[0]});
-		}
-		if (fromSmol.status === 'fulfilled' && fromSmol.value.data?.tokens) {
-			tokens.push(...(fromSmol.value.data as TTokenList).tokens);
-			fromList.push({...(fromSmol.value.data as TTokenList), uri: tokenListURIs[1]});
-		}
-
-		const tokenListTokens: TDict<TToken> = {};
-		for (const eachToken of tokens) {
-			if (!tokenListTokens[toAddress(eachToken.address)]) {
-				tokenListTokens[toAddress(eachToken.address)] = {
-					address: eachToken.address,
-					name: eachToken.name,
-					symbol: eachToken.symbol,
-					decimals: eachToken.decimals,
-					chainID: eachToken.chainId,
-					logoURI: eachToken.logoURI,
-					value: 0,
-					price: toNormalizedBN(0),
-					balance: toNormalizedBN(0)
-				};
-			}
-		}
-		set_tokenList(tokenListTokens);
-		set_lists(fromList);
-	}, [safeChainID]);
-
-	useAsyncTrigger(async (): Promise<void> => {
-		const tokenListTokens: TDict<TToken> = {};
-		const fromList: TTokenList[] = [];
-		for (const eachURI of extraTokenlist || []) {
-			const [fromUserList] = await Promise.allSettled([axios.get(eachURI)]);
-			if (fromUserList.status === 'fulfilled') {
-				fromList.push({...(fromUserList.value.data as TTokenList), uri: eachURI});
-				const {tokens} = fromUserList.value.data;
-				for (const eachToken of tokens) {
-					if (!tokenListTokens[toAddress(eachToken.address)]) {
-						tokenListTokens[toAddress(eachToken.address)] = {
-							address: eachToken.address,
-							name: eachToken.name,
-							symbol: eachToken.symbol,
-							decimals: eachToken.decimals,
-							chainID: eachToken.chainId,
-							logoURI: eachToken.logoURI,
-							value: 0,
-							price: toNormalizedBN(0),
-							balance: toNormalizedBN(0)
-						};
-					}
-				}
-			}
-		}
-		set_tokenListExtra(tokenListTokens);
-		set_extraLists(fromList);
-	}, [extraTokenlist]);
-
-	useAsyncTrigger(async (): Promise<void> => {
-		if (extraTokens === undefined) {
-			return;
-		}
-		if ((extraTokens || []).length > 0) {
-			const tokenListTokens: TDict<TToken> = {};
-			for (const eachToken of extraTokens || []) {
-				if (!tokenListTokens[toAddress(eachToken.address)]) {
-					tokenListTokens[toAddress(eachToken.address)] = {
-						address: eachToken.address,
-						name: eachToken.name,
-						symbol: eachToken.symbol,
-						decimals: eachToken.decimals,
-						chainID: eachToken.chainId,
-						logoURI: eachToken.logoURI,
-						value: 0,
-						price: toNormalizedBN(0),
-						balance: toNormalizedBN(0)
-					};
-				}
-			}
-			set_tokenListCustom(tokenListTokens);
-			set_customLists({...customDefaultList, tokens: extraTokens});
-		}
-	}, [extraTokens]);
-
-	const aggregatedTokenList = useMemo(
-		() => ({...tokenList, ...tokenListExtra, ...tokenListCustom}),
-		[tokenList, tokenListExtra, tokenListCustom]
-	);
-
-	const getToken = useCallback(
-		(tokenAddress: TAddress): TToken => {
-			const fromTokenList = aggregatedTokenList[toAddress(tokenAddress)];
-			if (fromTokenList) {
-				return fromTokenList;
-			}
-			return {} as TToken;
-		},
-		[aggregatedTokenList]
-	);
-
-	const contextValue = useMemo(
-		(): TTokenListProps => ({
-			tokenList: aggregatedTokenList,
-			set_tokenList,
-			getToken,
-			openTokenListModal: (): void => set_isTokenListModalOpen(true)
-		}),
-		[aggregatedTokenList, getToken]
-	);
-
-	return (
-		<TokenList.Provider value={contextValue}>
-			{children}
-			<TokenListHandlerPopover
-				isOpen={isTokenListModalOpen}
-				set_isOpen={set_isTokenListModalOpen}
-				lists={[...lists, ...extraLists, customLists]}
-				onAddTokenList={(list: TTokenList): void => {
-					const tokenListTokens: TDict<TToken> = {};
-					for (const eachToken of list.tokens) {
-						if (!tokenListTokens[toAddress(eachToken.address)]) {
-							tokenListTokens[toAddress(eachToken.address)] = {
-								address: eachToken.address,
-								name: eachToken.name,
-								symbol: eachToken.symbol,
-								decimals: eachToken.decimals,
-								chainID: eachToken.chainId,
-								logoURI: eachToken.logoURI,
-								value: 0,
-								price: toNormalizedBN(0),
-								balance: toNormalizedBN(0)
-							};
-						}
-					}
-					set_tokenList(prevTokenList => ({...prevTokenList, ...tokenListTokens}));
-					set_lists((prevLists: TTokenList[]): TTokenList[] => [...prevLists, list]);
-					set_extraTokenlist([...(extraTokenlist || []), list.uri]);
-				}}
-				onAddToken={(newToken: TToken): void => {
-					set_tokenList(prevTokenList => ({...prevTokenList, [newToken.address]: newToken}));
-					set_extraTokens([
-						...(extraTokens || []),
-						{
-							address: newToken.address,
-							name: newToken.name,
-							symbol: newToken.symbol,
-							decimals: newToken.decimals,
-							logoURI: newToken.logoURI,
-							chainId: newToken.chainID
-						}
-					]);
-				}}
-			/>
-		</TokenList.Provider>
-	);
-};
-
-export const useTokenList = (): TTokenListProps => useContext(TokenList);
diff --git a/contexts/useWallet.tsx b/contexts/useWallet.tsx
deleted file mode 100755
index ba2877e..0000000
--- a/contexts/useWallet.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import React, {createContext, memo, useCallback, useContext, useMemo, useState} from 'react';
-import {useTokenList} from 'contexts/useTokenList';
-import {useLocalStorageValue, useMountEffect, useUpdateEffect} from '@react-hookz/web';
-import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
-import {useBalances} from '@yearn-finance/web-lib/hooks/useBalances';
-import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID';
-import {toAddress} from '@yearn-finance/web-lib/utils/address';
-import {ETH_TOKEN_ADDRESS} from '@yearn-finance/web-lib/utils/constants';
-import {toNormalizedBN} from '@yearn-finance/web-lib/utils/format.bigNumber';
-import {getNetwork} from '@yearn-finance/web-lib/utils/wagmi/utils';
-
-import type {Dispatch, ReactElement, SetStateAction} from 'react';
-import type {TUseBalancesTokens} from '@yearn-finance/web-lib/hooks/useBalances';
-import type {TAddress, TDict} from '@yearn-finance/web-lib/types';
-import type {TBalanceData} from '@yearn-finance/web-lib/types/hooks';
-import type {TNormalizedBN} from '@yearn-finance/web-lib/utils/format.bigNumber';
-import type {TToken} from '@types';
-
-export type TWalletContext = {
-	balances: TDict<TBalanceData>;
-	isLoading: boolean;
-	walletProvider: string;
-	getBalance: (tokenAddress: TAddress) => TNormalizedBN;
-	refresh: (tokenList?: TUseBalancesTokens[], shouldSaveInStorage?: boolean) => Promise<TDict<TBalanceData>>;
-	refreshWithList: (tokenList: TDict<TToken>) => Promise<TDict<TBalanceData>>;
-	set_walletProvider: Dispatch<SetStateAction<string>>;
-};
-
-const defaultProps = {
-	balances: {},
-	getBalance: (): TNormalizedBN => toNormalizedBN(0),
-	isLoading: true,
-	walletProvider: 'NONE',
-	refresh: async (): Promise<TDict<TBalanceData>> => ({}),
-	refreshWithList: async (): Promise<TDict<TBalanceData>> => ({}),
-	set_walletProvider: (): void => undefined
-};
-
-/* 🔵 - Yearn Finance **********************************************************
- ** This context controls most of the user's wallet data we may need to
- ** interact with our app, aka mostly the balances and the token prices.
- ******************************************************************************/
-const WalletContext = createContext<TWalletContext>(defaultProps);
-export const WalletContextApp = memo(function WalletContextApp({children}: {children: ReactElement}): ReactElement {
-	const {tokenList} = useTokenList();
-	const {isActive} = useWeb3();
-	const {safeChainID} = useChainID();
-	const [walletProvider, set_walletProvider] = useState('NONE');
-	const {value: extraTokens, set: saveExtraTokens} = useLocalStorageValue<TUseBalancesTokens[]>(
-		`${process.env.PROJECT_SLUG}/tokens`,
-		{defaultValue: []}
-	);
-
-	const availableTokens = useMemo((): TUseBalancesTokens[] => {
-		const fromTokenList = Object.values(tokenList);
-		const tokens: TUseBalancesTokens[] = [];
-		fromTokenList
-			.filter((token): boolean => token.chainID === safeChainID)
-			.forEach((token): void => {
-				tokens.push({
-					token: toAddress(token.address),
-					decimals: Number(token.decimals),
-					name: token.name,
-					symbol: token.symbol
-				});
-			});
-		const {wrappedToken} = getNetwork(safeChainID).contracts;
-		if (wrappedToken) {
-			tokens.push({
-				token: toAddress(ETH_TOKEN_ADDRESS),
-				decimals: wrappedToken.decimals,
-				name: wrappedToken.coinName,
-				symbol: wrappedToken.coinSymbol
-			});
-		}
-		return tokens;
-	}, [safeChainID, tokenList]);
-
-	const {data: balances, update, updateSome, isLoading} = useBalances({tokens: availableTokens});
-
-	const onRefresh = useCallback(
-		async (tokenToUpdate?: TUseBalancesTokens[], shouldSaveInStorage?: boolean): Promise<TDict<TBalanceData>> => {
-			if (tokenToUpdate) {
-				const updatedBalances = await updateSome(tokenToUpdate);
-				if (shouldSaveInStorage) {
-					saveExtraTokens([...(extraTokens || []), ...tokenToUpdate]);
-				}
-				return updatedBalances;
-			}
-			const updatedBalances = await update();
-			return updatedBalances;
-		},
-		[update, updateSome, saveExtraTokens, extraTokens]
-	);
-
-	const onRefreshWithList = useCallback(
-		async (newTokenList: TDict<TToken>): Promise<TDict<TBalanceData>> => {
-			const withDefaultTokens = [...Object.values(newTokenList)];
-			const tokens: TUseBalancesTokens[] = [];
-			withDefaultTokens
-				.filter((token): boolean => token.chainID === safeChainID)
-				.forEach((token): void => {
-					tokens.push({
-						token: toAddress(token.address),
-						decimals: Number(token.decimals),
-						name: token.name,
-						symbol: token.symbol
-					});
-				});
-			const tokensToFetch = tokens.filter((token): boolean => {
-				return !availableTokens.find((availableToken): boolean => availableToken.token === token.token);
-			});
-			if (tokensToFetch.length > 0) {
-				return await onRefresh(tokensToFetch);
-			}
-			return balances;
-		},
-		[balances, onRefresh, safeChainID, availableTokens]
-	);
-
-	const onLoadExtraTokens = useCallback(async (): Promise<void> => {
-		if (extraTokens) {
-			await updateSome(extraTokens);
-		}
-	}, [extraTokens, updateSome]);
-
-	useMountEffect((): void => {
-		if (!isActive) {
-			set_walletProvider('NONE');
-		}
-	});
-
-	useUpdateEffect((): void => {
-		if (isActive) {
-			onLoadExtraTokens();
-		}
-	}, [isActive, onLoadExtraTokens]);
-
-	const getBalance = useCallback(
-		(tokenAddress: TAddress): TNormalizedBN => {
-			return toNormalizedBN(
-				balances?.[toAddress(tokenAddress)]?.raw || 0,
-				balances?.[toAddress(tokenAddress)]?.decimals || 18
-			);
-		},
-		[balances]
-	);
-
-	/* 🔵 - Yearn Finance ******************************************************
-	 **	Setup and render the Context provider to use in the app.
-	 ***************************************************************************/
-	const contextValue = useMemo(
-		(): TWalletContext => ({
-			balances: balances,
-			getBalance,
-			isLoading: isLoading || false,
-			refresh: onRefresh,
-			refreshWithList: onRefreshWithList,
-			walletProvider,
-			set_walletProvider
-		}),
-		[balances, isLoading, onRefresh, onRefreshWithList, walletProvider, getBalance]
-	);
-
-	return <WalletContext.Provider value={contextValue}>{children}</WalletContext.Provider>;
-});
-
-export const useWallet = (): TWalletContext => useContext(WalletContext);
diff --git a/hooks/useAsyncTrigger.ts b/hooks/useAsyncTrigger.ts
deleted file mode 100644
index ba51b47..0000000
--- a/hooks/useAsyncTrigger.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-
-import {type DependencyList, useCallback, useEffect} from 'react';
-
-//Should be useAsyncEffect, but exhaustive-deps is messing with this.
-function useAsyncTrigger(effect: () => Promise<void>, deps: DependencyList): () => Promise<void> {
-	const asyncEffectInCallback = useCallback(async (): Promise<void> => {
-		effect();
-	}, [...deps]);
-
-	useEffect((): void => {
-		asyncEffectInCallback();
-	}, [asyncEffectInCallback]);
-
-	return asyncEffectInCallback;
-}
-
-export {useAsyncTrigger};
diff --git a/package.json b/package.json
index 0664a84..6a8ad1e 100644
--- a/package.json
+++ b/package.json
@@ -15,61 +15,63 @@
 		"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
 	},
 	"dependencies": {
+		"@builtbymom/web3": "^0.0.70",
 		"@closeio/use-abortable-effect": "^1.0.0",
-		"@headlessui/react": "^1.7.17",
-		"@rainbow-me/rainbowkit": "^1.2.0",
-		"@react-hookz/web": "^23.1.0",
-		"@tailwindcss/forms": "^0.5.6",
-		"@wagmi/core": "^1.4.3",
-		"@yearn-finance/web-lib": "^3.0.58",
-		"axios": "^1.6.1",
-		"framer-motion": "^10.16.4",
-		"next": "^14.0.2",
+		"@headlessui/react": "^1.7.18",
+		"@rainbow-me/rainbowkit": "^2.0.5",
+		"@react-hookz/web": "^24.0.4",
+		"@tailwindcss/forms": "^0.5.7",
+		"@tailwindcss/typography": "^0.5.12",
+		"@wagmi/core": "^2.6.16",
+		"axios": "^1.6.8",
+		"framer-motion": "^11.0.28",
+		"next": "^13.5.4",
 		"next-pwa": "^5.6.0",
-		"next-seo": "^6.4.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"swr": "^2.2.4",
-		"tailwindcss": "^3.3.5",
-		"viem": "^1.16.6",
-		"wagmi": "^1.4.5"
+		"react-hot-toast": "^2.4.1",
+		"swr": "^2.2.5",
+		"tailwindcss": "^3.4.3",
+		"vaul": "^0.9.0",
+		"viem": "^2.9.16",
+		"wagmi": "^2.5.19"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^18.4.1",
-		"@commitlint/config-conventional": "^18.4.0",
+		"@commitlint/cli": "^19.2.1",
+		"@commitlint/config-conventional": "^19.1.0",
 		"@total-typescript/ts-reset": "^0.5.1",
-		"@types/node": "^20.9.0",
+		"@types/node": "^20.12.7",
 		"@types/nprogress": "^0.2.3",
-		"@types/react": "^18.2.37",
-		"@types/react-dom": "^18.2.15",
-		"@typescript-eslint/eslint-plugin": "^6.10.0",
-		"@typescript-eslint/parser": "^6.10.0",
-		"autoprefixer": "^10.4.16",
+		"@types/react": "^18.2.77",
+		"@types/react-dom": "^18.2.25",
+		"@typescript-eslint/eslint-plugin": "^7.6.0",
+		"@typescript-eslint/parser": "^7.6.0",
+		"autoprefixer": "^10.4.19",
 		"babel-loader": "^9.1.3",
-		"bun-types": "^1.0.11",
-		"eslint": "^8.53.0",
-		"eslint-config-next": "^14.0.2",
-		"eslint-config-prettier": "^9.0.0",
+		"bun-types": "^1.1.3",
+		"eslint": "^9.0.0",
+		"eslint-config-next": "^14.2.0",
+		"eslint-config-prettier": "^9.1.0",
 		"eslint-import-resolver-typescript": "^3.6.1",
 		"eslint-plugin-brackets": "^0.1.3",
-		"eslint-plugin-import": "^2.29.0",
-		"eslint-plugin-react": "^7.33.2",
+		"eslint-plugin-import": "^2.29.1",
+		"eslint-plugin-react": "^7.34.1",
 		"eslint-plugin-react-hooks": "^4.6.0",
-		"eslint-plugin-simple-import-sort": "^10.0.0",
-		"eslint-plugin-tailwindcss": "^3.13.0",
-		"eslint-plugin-unused-imports": "^3.0.0",
-		"husky": "^8.0.3",
-		"lint-staged": "^15.0.2",
+		"eslint-plugin-simple-import-sort": "^12.0.0",
+		"eslint-plugin-tailwindcss": "^3.15.1",
+		"eslint-plugin-unused-imports": "^3.1.0",
+		"husky": "^9.0.11",
+		"lint-staged": "^15.2.2",
 		"next-transpile-modules": "^10.0.1",
-		"postcss": "^8.4.31",
-		"postcss-import": "^15.1.0",
-		"postcss-nesting": "^12.0.1",
-		"prettier": "^3.0.3",
-		"sass": "^1.69.5",
-		"sharp": "^0.32.6",
-		"stylelint": "^15.11.0",
-		"stylelint-config-standard": "^34.0.0",
-		"ts-loader": "^9.5.0",
-		"typescript": "^5.2.2"
+		"postcss": "^8.4.38",
+		"postcss-import": "^16.1.0",
+		"postcss-nesting": "^12.1.1",
+		"prettier": "^3.2.5",
+		"sass": "^1.75.0",
+		"sharp": "^0.33.3",
+		"stylelint": "^16.3.1",
+		"stylelint-config-standard": "^36.0.0",
+		"ts-loader": "^9.5.1",
+		"typescript": "^5.4.5"
 	}
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 1250ac8..287f85b 100755
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,12 +1,14 @@
 import React, {Fragment} from 'react';
+import {Toaster} from 'react-hot-toast';
 import {Inter} from 'next/font/google';
-import Image from 'next/image';
-import {TokenListContextApp} from 'contexts/useTokenList';
-import {WalletContextApp} from 'contexts/useWallet';
-import {mainnet} from 'wagmi';
-import {WithYearn} from '@yearn-finance/web-lib/contexts/WithYearn';
-import {localhost} from '@yearn-finance/web-lib/utils/wagmi/networks';
-import {NetworkSelector, WalletSelector} from '@common/HeaderElements';
+import Head from 'next/head';
+import {mainnet} from 'viem/chains';
+import {WalletContextApp} from '@builtbymom/web3/contexts/useWallet';
+import {WithMom} from '@builtbymom/web3/contexts/WithMom';
+import {localhost} from '@builtbymom/web3/utils/wagmi';
+import {IconCheck} from '@icons/IconCheck';
+import {IconCircleCross} from '@icons/IconCircleCross';
+import {Header} from '@common/Header';
 import Meta from '@common/Meta';
 
 import type {AppProps} from 'next/app';
@@ -21,64 +23,55 @@ const inter = Inter({
 	variable: '--inter-font'
 });
 
-function Header(): ReactElement {
-	return (
-		<div
-			id={'head'}
-			className={'fixed inset-x-0 top-0 z-50 w-full border-b border-primary-100'}>
-			<div
-				id={'head'}
-				className={'bg-primary-50/95 px-10'}>
-				<div className={'mx-auto flex flex-row justify-between p-4'}>
-					<div className={'flex items-center justify-start'}>
-						<div className={'flex items-center justify-center rounded-full'}>
-							<Image
-								alt={''}
-								width={40}
-								height={40}
-								src={'/logo.png'}
-								className={'h-10 w-10 rounded-full'}
-							/>
-						</div>
-					</div>
-					<div className={'flex items-center justify-end'}>
-						<NetworkSelector networks={[]} />
-						<WalletSelector />
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}
-
 function MyApp({Component, ...props}: AppProps): ReactElement {
 	return (
 		<>
-			<style
-				jsx
-				global>
-				{`
-					html {
-						font-family: ${inter.style.fontFamily};
-					}
-				`}
-			</style>
+			<Head>
+				<style
+					jsx
+					global>
+					{`
+						html {
+							font-family: ${inter.className};
+						}
+					`}
+				</style>
+			</Head>
 			<Meta />
-			<WithYearn supportedChains={[mainnet, localhost]}>
-				<TokenListContextApp>
-					<WalletContextApp>
-						<Fragment>
-							<Header />
-							<main
-								className={`relative mx-auto mb-0 flex min-h-screen w-full flex-col pt-20 ${inter.variable}`}>
-								<Component {...props} />
-							</main>
-						</Fragment>
-					</WalletContextApp>
-				</TokenListContextApp>
-			</WithYearn>
+			<WithMom
+				supportedChains={[mainnet, localhost]}
+				tokenLists={['https://raw.githubusercontent.com/SmolDapp/tokenLists/main/lists/1/tokenlistooor.json']}>
+				<WalletContextApp>
+					<Fragment>
+						<Header />
+						<main className={`relative mx-auto mb-0 flex min-h-screen w-full flex-col ${inter.variable}`}>
+							<Component {...props} />
+						</main>
+					</Fragment>
+				</WalletContextApp>
+			</WithMom>
+			<Toaster
+				toastOptions={{
+					duration: 5000,
+					className: 'toast',
+					success: {
+						icon: <IconCheck className={'-mr-1 size-5 min-h-5 min-w-5 pt-1.5'} />,
+						iconTheme: {
+							primary: 'black',
+							secondary: '#F1EBD9'
+						}
+					},
+					error: {
+						icon: <IconCircleCross className={'-mr-1 size-5 min-h-5 min-w-5 pt-1.5'} />,
+						iconTheme: {
+							primary: 'black',
+							secondary: '#F1EBD9'
+						}
+					}
+				}}
+				position={'top-right'}
+			/>
 		</>
 	);
 }
-
 export default MyApp;
diff --git a/utils/actions.ts b/utils/actions.ts
index 96b435c..d28e2f4 100644
--- a/utils/actions.ts
+++ b/utils/actions.ts
@@ -1,13 +1,11 @@
-import {erc20ABI, readContract} from '@wagmi/core';
-import {MAX_UINT_256} from '@yearn-finance/web-lib/utils/constants';
-import {toBigInt} from '@yearn-finance/web-lib/utils/format.bigNumber';
-import {handleTx, toWagmiProvider} from '@yearn-finance/web-lib/utils/wagmi/provider';
-import {assertAddress} from '@yearn-finance/web-lib/utils/wagmi/utils';
+import {erc20Abi} from 'viem';
+import {assertAddress, MAX_UINT_256, toAddress, toBigInt} from '@builtbymom/web3/utils';
+import {handleTx, retrieveConfig, toWagmiProvider} from '@builtbymom/web3/utils/wagmi';
+import {readContract} from '@wagmi/core';
 
 import type {Connector} from 'wagmi';
-import type {TAddress} from '@yearn-finance/web-lib/types';
-import type {TWriteTransaction} from '@yearn-finance/web-lib/utils/wagmi/provider';
-import type {TTxResponse} from '@yearn-finance/web-lib/utils/web3/transaction';
+import type {TAddress} from '@builtbymom/web3/types';
+import type {TTxResponse, TWriteTransaction} from '@builtbymom/web3/utils/wagmi';
 
 //Because USDT do not return a boolean on approve, we need to use this ABI
 const ALTERNATE_ERC20_APPROVE_ABI = [
@@ -38,9 +36,9 @@ type TIsApprovedERC20 = {
 };
 export async function isApprovedERC20(props: TIsApprovedERC20): Promise<boolean> {
 	const wagmiProvider = await toWagmiProvider(props.connector);
-	const result = await readContract({
+	const result = await readContract(retrieveConfig(), {
 		...wagmiProvider,
-		abi: erc20ABI,
+		abi: erc20Abi,
 		chainId: props.chainID,
 		address: props.contractAddress,
 		functionName: 'allowance',
@@ -66,10 +64,11 @@ export async function approveERC20(props: TApproveERC20): Promise<TTxResponse> {
 	props.onTrySomethingElse = async (): Promise<TTxResponse> => {
 		assertAddress(props.spenderAddress, 'spenderAddress');
 		return await handleTx(props, {
-			address: props.contractAddress,
+			address: toAddress(props.contractAddress),
 			chainId: props.chainID,
 			abi: ALTERNATE_ERC20_APPROVE_ABI,
 			functionName: 'approve',
+			confirmation: 1,
 			args: [props.spenderAddress, props.amount]
 		});
 	};
@@ -77,8 +76,9 @@ export async function approveERC20(props: TApproveERC20): Promise<TTxResponse> {
 	return await handleTx(props, {
 		address: props.contractAddress,
 		chainId: props.chainID,
-		abi: erc20ABI,
+		abi: erc20Abi,
 		functionName: 'approve',
+		confirmation: 1,
 		args: [props.spenderAddress, props.amount]
 	});
 }
diff --git a/utils/tools.ens.ts b/utils/tools.ens.ts
deleted file mode 100644
index 57cbc38..0000000
--- a/utils/tools.ens.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import {gql, request} from 'graphql-request';
-import {isAddress, toHex} from 'viem';
-import {fetchEnsAddress} from '@wagmi/core';
-import {toAddress} from '@yearn-finance/web-lib/utils/address';
-
-import type {TAddress} from '@yearn-finance/web-lib/types';
-
-export async function retrieveENSNameFromNode(tokenId: bigint): Promise<string> {
-	const labelHash = toHex(tokenId, {size: 32});
-	const url = 'https://api.thegraph.com/subgraphs/name/ensdomains/ens';
-	const GET_LABEL_NAME = gql`
-	query {
-		domains(first:1, where:{labelhash:"${labelHash}"}) {
-			labelName
-		}
-	}`;
-
-	const name = (await request(url, GET_LABEL_NAME)) as {domains: {labelName: string}[]};
-	return name.domains[0].labelName;
-}
-
-export async function checkENSValidity(ens: string): Promise<[TAddress, boolean]> {
-	const resolvedAddress = await fetchEnsAddress({name: ens, chainId: 1});
-	if (resolvedAddress) {
-		if (isAddress(resolvedAddress)) {
-			return [toAddress(resolvedAddress), true];
-		}
-	}
-	return [toAddress(), false];
-}
diff --git a/utils/tools.lens.ts b/utils/tools.lens.ts
deleted file mode 100644
index f6da71c..0000000
--- a/utils/tools.lens.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import {isAddress} from 'viem';
-import {toAddress} from '@yearn-finance/web-lib/utils/address';
-import {lensProtocolFetcher} from '@yearn-finance/web-lib/utils/fetchers';
-
-import type {TAddress} from '@yearn-finance/web-lib/types';
-
-type THandleFromAddress = {defaultProfile: {handle: string}};
-async function getHandleFromAddress(address: TAddress): Promise<string> {
-	const {defaultProfile}: THandleFromAddress = await lensProtocolFetcher(
-		`{defaultProfile(request: {ethereumAddress: "${address?.toLowerCase()}"}) {handle}}`
-	);
-	return defaultProfile?.handle || '';
-}
-
-type TAddressFromHandle = {profile: {ownedBy: TAddress}};
-async function getAddressFromHandle(handle: string): Promise<TAddress | ''> {
-	const {profile}: TAddressFromHandle = await lensProtocolFetcher(
-		`{profile(request: {handle: "${handle?.toLowerCase()}"}) {ownedBy}}`
-	);
-	return profile?.ownedBy ? toAddress(profile?.ownedBy) : '';
-}
-
-export function isLensNFT(nftName: string): boolean {
-	nftName = nftName.toLowerCase();
-
-	if (
-		nftName.includes('lens-Follower') ||
-		nftName.includes('lensprotocol') ||
-		nftName.includes('lens protocol') ||
-		nftName.includes('lens-collect') ||
-		nftName.includes("lens's follower nft")
-	) {
-		return true;
-	}
-	return false;
-}
-
-export async function checkLensValidity(lens: string): Promise<[TAddress, boolean]> {
-	const resolvedName = await lensProtocol.getAddressFromHandle(lens);
-	if (resolvedName) {
-		if (isAddress(resolvedName)) {
-			return [toAddress(resolvedName), true];
-		}
-	}
-	return [toAddress(), false];
-}
-
-const lensProtocol = {getHandleFromAddress, getAddressFromHandle};
-export default lensProtocol;
diff --git a/utils/types.tsx b/utils/types.tsx
deleted file mode 100644
index 32e1a1d..0000000
--- a/utils/types.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import type {Dispatch, SetStateAction} from 'react';
-import type {TAddress, TDict, TNDict} from '@yearn-finance/web-lib/types';
-import type {TNormalizedBN} from '@yearn-finance/web-lib/utils/format.bigNumber';
-
-export type TTokenList = {
-	name: string;
-	description: string;
-	timestamp: string;
-	logoURI: string;
-	uri: string;
-	keywords: string[];
-	version: {
-		major: number;
-		minor: number;
-		patch: number;
-	};
-	tokens: {
-		address: TAddress;
-		name: string;
-		symbol: string;
-		decimals: number;
-		chainId: number;
-		logoURI?: string;
-	}[];
-};
-
-export type TToken = {
-	address: TAddress;
-	name: string;
-	symbol: string;
-	decimals: number;
-	chainID: number;
-	logoURI?: string;
-	value: number;
-	price: TNormalizedBN;
-	balance: TNormalizedBN;
-};
-export type TChainTokens = TNDict<TDict<TToken>>;
-
-export type TComboboxAddressInput = {
-	value: TToken | null;
-	possibleValues: TDict<TToken>;
-	onChangeValue: (value: TToken) => void;
-	onAddValue: Dispatch<SetStateAction<TDict<TToken>>>;
-	shouldSort?: boolean;
-};