fix: search all

.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-	extends: ['./node_modules/@yearn-finance/web-lib/.eslintrc.cjs', 'plugin:@next/next/recommended', 'prettier'],
+	extends: ['./node_modules/@yearn-finance/web-lib/.eslintrc.cjs', 'plugin:@next/next/recommended', 'prettier', 'plugin:react-hooks/recommended'],
 	parser: '@typescript-eslint/parser',
 	parserOptions: {
 		ecmaFeatures: {

apps/common/components/MultiSelectDropdown.tsx

@@ -96,6 +96,10 @@ export function MultiSelectDropdown({options, onSelect, placeholder = ''}: TMult
 	const [query, set_query] = useState('');
 	const componentRef = useRef(null);
 
+	useEffect((): void => {
+		set_currentOptions(options);
+	}, [options]);
+
 	useEffect((): void => {
 		set_areAllSelected(currentOptions.every((option): boolean => option.isSelected));
 	}, [currentOptions]);

apps/vaults/components/ListHero.tsx

@@ -20,8 +20,10 @@ type TListHero = {
 };
 
 export function ListHero({categories, set_categories, searchValue, selectedChains, set_searchValue, set_selectedChains}: TListHero): ReactElement {
+	const chainsFromJSON = useMemo((): number[] => JSON.parse(selectedChains || '[]') as number[], [selectedChains]);
+	const categoriesFromJSON = useMemo((): string[] => JSON.parse(categories || '[]') as string[], [categories]);
+
 	const chainOptions = useMemo((): TMultiSelectOptionProps[] => {
-		const chainsFromJSON = JSON.parse(selectedChains || '[]') as number[];
 		return [
 			{
 				label: 'Ethereum',
@@ -54,10 +56,9 @@ export function ListHero({categories, set_categories, searchValue, selectedChain
 				icon: <IconArbitrumChain />
 			}
 		];
-	}, [selectedChains]);
+	}, [chainsFromJSON]);
 
 	const categoryOptions = useMemo((): TMultiSelectOptionProps[] => {
-		const categoriesFromJSON = JSON.parse(categories || '[]') as string[];
 		const options: TMultiSelectOptionProps[] = [];
 
 		options.push({
@@ -107,7 +108,7 @@ export function ListHero({categories, set_categories, searchValue, selectedChain
 		});
 
 		return options;
-	}, [selectedChains, categories]);
+	}, [categoriesFromJSON]);
 
 	return (
 		<div className={'flex flex-col items-start justify-between space-x-0 px-4 pb-2 pt-4 md:px-10 md:pb-8 md:pt-10'}>

apps/vaults/components/list/VaultsListEmpty.tsx

@@ -1,4 +1,4 @@
-import {useAppSettings} from '@vaults/contexts/useAppSettings';
+import {ALL_CATEGORIES, ALL_CHAINS, useAppSettings} from '@vaults/contexts/useAppSettings';
 import {Button} from '@yearn-finance/web-lib/components/Button';
 import {isZero} from '@yearn-finance/web-lib/utils/isZero';
 
@@ -16,7 +16,7 @@ export function VaultsListEmpty({
 	currentChains: number[];
 	isLoading: boolean;
 }): ReactElement {
-	const {searchValue, category, set_category} = useAppSettings();
+	const {searchValue, category, set_category, set_selectedChains} = useAppSettings();
 
 	if (isLoading && isZero(sortedVaultsToDisplay.length)) {
 		return (
@@ -52,7 +52,10 @@ export function VaultsListEmpty({
 						</p>
 						<Button
 							className={'w-full md:w-48'}
-							onClick={(): void => set_category('All Vaults')}>
+							onClick={(): void => {
+								set_category(ALL_CATEGORIES);
+								set_selectedChains(ALL_CHAINS);
+							}}>
 							{'Search all vaults'}
 						</Button>
 					</>
@@ -68,7 +71,10 @@ export function VaultsListEmpty({
 					<p className={'text-center text-neutral-600'}>{`Please, select a chain. At least one, just one.`}</p>
 					<Button
 						className={'w-full md:w-48'}
-						onClick={(): void => set_category('All Vaults')}>
+						onClick={(): void => {
+							set_category(ALL_CATEGORIES);
+							set_selectedChains(ALL_CHAINS);
+						}}>
 						{'Search all vaults'}
 					</Button>
 				</>

apps/vaults/contexts/useAppSettings.tsx

@@ -4,6 +4,9 @@ import {useSessionStorage} from '@yearn-finance/web-lib/hooks/useSessionStorage'
 
 import type {ReactElement} from 'react';
 
+export const ALL_CATEGORIES = '["Holdings","Crypto Vaults","Stables Vaults","Curve Vaults","Balancer Vaults","Boosted Vaults","Velodrome Vaults","Aerodrome Vaults"]';
+export const ALL_CHAINS = '[1,10,250,8453,42161]';
+
 export type TAppSettingsContext = {
 	category: string;
 	selectedChains: string;
@@ -31,14 +34,11 @@ const defaultProps: TAppSettingsContext = {
 
 const AppSettingsContext = createContext<TAppSettingsContext>(defaultProps);
 export const AppSettingsContextApp = memo(function AppSettingsContextApp({children}: {children: ReactElement}): ReactElement {
-	const [category, set_category] = useSessionStorage(
-		'yearn.fi/vaults-categories',
-		'["Holdings","Crypto Vaults","Stables Vaults","Curve Vaults","Balancer Vaults","Boosted Vaults","Velodrome Vaults","Aerodrome Vaults"]'
-	);
-	const [searchValue, set_searchValue] = useSessionStorage('yearn.fi/vaults-search', '');
-	const [selectedChains, set_selectedChains] = useSessionStorage('yearn.fi/selected-chains', '[1,10,250,8453,42161]');
-	const [shouldHideDust, set_shouldHideDust] = useLocalStorage('yearn.fi/should-hide-dust', false);
-	const [shouldHideLowTVLVaults, set_shouldHideLowTVLVaults] = useLocalStorage('yearn.fi/hide-low-tvl', false);
+	const [category, set_category] = useSessionStorage('yearn.fi/[email protected]', ALL_CATEGORIES);
+	const [searchValue, set_searchValue] = useSessionStorage('yearn.fi/[email protected]', '');
+	const [selectedChains, set_selectedChains] = useSessionStorage('yearn.fi/[email protected]', ALL_CHAINS);
+	const [shouldHideDust, set_shouldHideDust] = useLocalStorage('yearn.fi/[email protected]', false);
+	const [shouldHideLowTVLVaults, set_shouldHideLowTVLVaults] = useLocalStorage('yearn.fi/[email protected]', false);
 
 	/* 🔵 - Yearn Finance ******************************************************
 	 **	Setup and render the Context provider to use in the app.

pages/vaults/index.tsx

@@ -99,10 +99,10 @@ function Index(): ReactElement {
 		sortBy: TPossibleSortBy;
 		sortDirection: TSortDirection;
 	}>('yVaultsSorting', {sortBy: 'featuringScore', sortDirection: 'desc'});
-	const {shouldHideDust, shouldHideLowTVLVaults, category, searchValue, selectedChains, set_category, set_searchValue, set_selectedChains} = useAppSettings();
-	const chainsFromJSON = JSON.parse(selectedChains || '[]') as number[];
-	const categoriesFromJSON = JSON.parse(category || '[]') as string[];
+	const {shouldHideDust, category, searchValue, selectedChains, set_category, set_searchValue, set_selectedChains} = useAppSettings();
 
+	const chainsFromJSON = useMemo((): number[] => JSON.parse(selectedChains || '[]') as number[], [selectedChains]);
+	const categoriesFromJSON = useMemo((): string[] => JSON.parse(category || '[]') as string[], [category]);
 	const filterHoldingsCallback = useCallback(
 		(address: TAddress, chainID: number): boolean => {
 			const holding = getToken({address, chainID});
@@ -201,7 +201,7 @@ function Index(): ReactElement {
 		_vaultList = _vaultList.filter((vault, index, self): boolean => index === self.findIndex((v): boolean => v.address === vault.address));
 
 		return _vaultList;
-	}, [vaults, categoriesFromJSON, shouldHideLowTVLVaults, curveVaults, balancerVaults, velodromeVaults, boostedVaults, stablesVaults, cryptoVaults, holdingsVaults]);
+	}, [categoriesFromJSON, curveVaults, balancerVaults, velodromeVaults, boostedVaults, stablesVaults, cryptoVaults, holdingsVaults]);
 
 	/* 🔵 - Yearn Finance **************************************************************************
 	 **	Then, on the vaultsToDisplay list, we apply the search filter. The search filter is
@@ -283,7 +283,7 @@ function Index(): ReactElement {
 				/>
 			);
 		});
-	}, [category, isLoadingVaultList, sortedVaultsToDisplay]);
+	}, [categoriesFromJSON, chainsFromJSON, isLoadingVaultList, sortedVaultsToDisplay]);
 
 	return (
 		<section className={'mt-4 grid w-full grid-cols-12 gap-y-10 pb-10 md:mt-20 md:gap-x-10 md:gap-y-20'}>