feat: Remove safeChainID, use selected chains

apps/common/components/ListHero.tsx

@@ -31,6 +31,8 @@ export type TListHero<T> = {
 	searchPlaceholder: string;
 	categories: TListHeroCategory<T>[][];
 	onSelect: (category: T) => void;
+	selectedChains?: string;
+	set_selectedChains?: (chains: string) => void;
 	searchValue: string;
 	set_searchValue: (searchValue: string) => void;
 }
@@ -109,40 +111,42 @@ export function ListHero<T extends string>({
 	categories,
 	onSelect,
 	searchValue,
+	selectedChains,
 	set_searchValue,
+	set_selectedChains,
 	switchProps
 }: TListHero<T>): ReactElement {
-	// TODO: Use the icons from web-lib
-	// https://github.com/yearn/web-lib/pull/339
+	const chains = JSON.parse(selectedChains || '[]') as number[];
+
 	const OPTIONS = [
 		{
 			label: 'Ethereum',
-			value: 'ethereum',
-			selected: false,
+			value: 1,
+			selected: chains.includes(1),
 			icon: <IconEtherumChain />
 		},
 		{
 			label: 'OP Mainnet',
-			value: 'optimism',
-			selected: false,
+			value: 10,
+			selected: chains.includes(10),
 			icon: <IconOptimismChain />
 		},
 		{
 			label: 'Fantom',
-			value: 'fantom',
-			selected: false,
+			value: 250,
+			selected: chains.includes(250),
 			icon: <IconFantomChain />
 		},
 		{
 			label: 'Base',
-			value: 'base',
-			selected: false,
+			value: 8453,
+			selected: chains.includes(8453),
 			icon: <IconBaseChain />
 		},
 		{
 			label: 'Arbitrum One',
-			value: 'arbitrum',
-			selected: false,
+			value: 42161,
+			selected: chains.includes(42161),
 			icon: <IconArbitrumChain />
 		}
 	];
@@ -169,7 +173,8 @@ export function ListHero<T extends string>({
 					options={OPTIONS}
 					placeholder={'Select chain'}
 					onSelect={(options): void => {
-						console.log({options});
+						const selectedChains = options.filter((o): boolean => o.selected).map((option): number => Number(option.value));
+						set_selectedChains?.(JSON.stringify(selectedChains));
 					}}
 				/>
 

apps/common/components/MultiSelectDropdown.tsx

@@ -9,7 +9,7 @@ import type {ReactElement} from 'react';
 
 export type TMultiSelectOptionProps = {
 	label: string;
-	value: string;
+	value: number | string;
 	selected: boolean;
 	icon?: ReactElement;
 };
@@ -97,7 +97,7 @@ export function MultiSelectDropdown({
 	const filteredOptions = query === ''
 		? currentOptions
 		: currentOptions.filter((option): boolean => {
-			return option.value.toLowerCase().includes(query.toLowerCase());
+			return option.label.toLowerCase().includes(query.toLowerCase());
 		});
 
 	return (

apps/vaults/components/details/VaultDetailsHeader.tsx

@@ -1,7 +1,6 @@
 import {useMemo} from 'react';
 import {useStakingRewards} from '@vaults/contexts/useStakingRewards';
 import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
-import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID';
 import {toAddress} from '@yearn-finance/web-lib/utils/address';
 import {toBigInt, toNormalizedBN} from '@yearn-finance/web-lib/utils/format.bigNumber';
 import {formatUSD} from '@yearn-finance/web-lib/utils/format.number';
@@ -43,9 +42,8 @@ function VaultHeaderLineItem({label, children, legend}: TVaultHeaderLineItemProp
 }
 
 export function VaultDetailsHeader({vault}: { vault: TYDaemonVault }): ReactElement {
-	const {safeChainID} = useChainID();
 	const {address: userAddress} = useWeb3();
-	const {yDaemonBaseUri} = useYDaemonBaseURI({chainID: safeChainID});
+	const {yDaemonBaseUri} = useYDaemonBaseURI({chainID: vault.chainID});
 	const {address, apy, tvl, decimals, symbol = 'token', token} = vault;
 	const {data: earned} = useFetch<TYDaemonEarned>({
 		endpoint: (address && userAddress) ? `${yDaemonBaseUri}/earned/${userAddress}` : null,

apps/vaults/components/details/actions/QuickActionsButtons.tsx

@@ -5,7 +5,6 @@ import {useSolver} from '@vaults/contexts/useSolver';
 import {useWalletForZap} from '@vaults/contexts/useWalletForZaps';
 import {Button} from '@yearn-finance/web-lib/components/Button';
 import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
-import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID';
 import {toAddress} from '@yearn-finance/web-lib/utils/address';
 import {MAX_UINT_256} from '@yearn-finance/web-lib/utils/constants';
 import {toBigInt, toNormalizedBN} from '@yearn-finance/web-lib/utils/format.bigNumber';
@@ -24,11 +23,10 @@ export function VaultDetailsQuickActionsButtons(): ReactElement {
 	const {refresh: refreshZapBalances} = useWalletForZap();
 	const {address, provider} = useWeb3();
 	const {isStakingOpBoostedVaults} = useYearn();
-	const {safeChainID} = useChainID();
 	const [txStatusApprove, set_txStatusApprove] = useState(defaultTxStatus);
 	const [txStatusExecuteDeposit, set_txStatusExecuteDeposit] = useState(defaultTxStatus);
 	const [txStatusExecuteWithdraw, set_txStatusExecuteWithdraw] = useState(defaultTxStatus);
-	const {actionParams, currentVault, onChangeAmount, maxDepositPossible, isDepositing} = useActionFlow();
+	const {actionParams, onChangeAmount, maxDepositPossible, isDepositing} = useActionFlow();
 	const {onApprove, onExecuteDeposit, onExecuteWithdraw, onRetrieveAllowance, currentSolver, expectedOut, isLoadingExpectedOut, hash} = useSolver();
 	const isWithdrawing = !isDepositing;
 
@@ -95,13 +93,11 @@ export function VaultDetailsQuickActionsButtons(): ReactElement {
 		);
 	}, [actionParams?.amount.raw, actions, currentSolver, onApprove]);
 
-	const isDiffNetwork = !!safeChainID && currentVault.chainID !== safeChainID;
 	const isButtonDisabled = (
 		(!address && !provider)
 		|| isZero(actionParams.amount.raw)
 		|| toBigInt(actionParams.amount.raw) > toBigInt(maxDepositPossible.raw)
 		|| isLoadingExpectedOut
-		|| isDiffNetwork
 	);
 
 	/* 🔵 - Yearn Finance ******************************************************

apps/vaults/components/details/tabs/VaultDetailsHistorical.tsx

@@ -7,7 +7,6 @@ import {GraphForVaultTVL} from '@vaults/components/graphs/GraphForVaultTVL';
 import {getMessariSubgraphEndpoint} from '@vaults/utils';
 import {Button} from '@yearn-finance/web-lib/components/Button';
 import {Renderable} from '@yearn-finance/web-lib/components/Renderable';
-import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID';
 import {formatToNormalizedValue, toBigInt} from '@yearn-finance/web-lib/utils/format.bigNumber';
 import {formatDate} from '@yearn-finance/web-lib/utils/format.time';
 import {isZero} from '@yearn-finance/web-lib/utils/isZero';
@@ -19,11 +18,10 @@ import type {TGraphData, TMessariGraphData} from '@common/types/types';
 
 export function VaultDetailsHistorical({currentVault, harvestData}: {currentVault: TYDaemonVault, harvestData: TGraphData[]}): ReactElement {
 	const isMounted = useIsMounted();
-	const {safeChainID} = useChainID();
 	const [selectedViewIndex, set_selectedViewIndex] = useState(0);
 
 	const {data: messariMixedData} = useSWR(currentVault.address ? [
-		getMessariSubgraphEndpoint(safeChainID),
+		getMessariSubgraphEndpoint(currentVault.chainID),
 		`{
 			vaultDailySnapshots(
 				where: {vault: "${currentVault.address.toLowerCase()}"}

apps/vaults/components/details/tabs/VaultDetailsStrategies.tsx

@@ -4,7 +4,6 @@ import {findLatestApr} from '@vaults/components/details/tabs/findLatestApr';
 import {GraphForStrategyReports} from '@vaults/components/graphs/GraphForStrategyReports';
 import {yDaemonReportsSchema} from '@vaults/schemas/reportsSchema';
 import {Renderable} from '@yearn-finance/web-lib/components/Renderable';
-import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID';
 import {IconCopy} from '@yearn-finance/web-lib/icons/IconCopy';
 import {toAddress} from '@yearn-finance/web-lib/utils/address';
 import {formatToNormalizedValue, toBigInt} from '@yearn-finance/web-lib/utils/format.bigNumber';
@@ -42,8 +41,7 @@ function RiskScoreElement({label, value}: TRiskScoreElementProps): ReactElement
 }
 
 function VaultDetailsStrategy({currentVault, strategy}: TProps): ReactElement {
-	const {safeChainID} = useChainID();
-	const {yDaemonBaseUri} = useYDaemonBaseURI({chainID: safeChainID});
+	const {yDaemonBaseUri} = useYDaemonBaseURI({chainID: currentVault.chainID});
 	const isMounted = useIsMounted();
 
 	const riskScoreElementsMap = useMemo((): TRiskScoreElementProps[] => {
@@ -163,6 +161,7 @@ function VaultDetailsStrategy({currentVault, strategy}: TProps): ReactElement {
 							<div className={'mt-4 flex flex-row border-b border-l border-neutral-300'}>
 								<Renderable shouldRender={isMounted()}>
 									<GraphForStrategyReports
+										vaultChainID={currentVault.chainID}
 										vaultDecimals={currentVault.decimals}
 										vaultTicker={currentVault?.token?.symbol || 'token'}
 										strategy={strategy} />

apps/vaults/components/details/tabs/VaultDetailsTabsWrapper.tsx

@@ -8,7 +8,6 @@ import {VaultDetailsHistorical} from '@vaults/components/details/tabs/VaultDetai
 import {VaultDetailsStrategies} from '@vaults/components/details/tabs/VaultDetailsStrategies';
 import {Renderable} from '@yearn-finance/web-lib/components/Renderable';
 import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
-import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID';
 import {IconAddToMetamask} from '@yearn-finance/web-lib/icons/IconAddToMetamask';
 import {IconLinkOut} from '@yearn-finance/web-lib/icons/IconLinkOut';
 import {toAddress} from '@yearn-finance/web-lib/utils/address';
@@ -150,8 +149,7 @@ function ExplorerLink({explorerBaseURI, currentVaultAddress}: TExplorerLinkProps
 
 export function VaultDetailsTabsWrapper({currentVault}: {currentVault: TYDaemonVault}): ReactElement {
 	const {provider} = useWeb3();
-	const {safeChainID} = useChainID();
-	const {yDaemonBaseUri} = useYDaemonBaseURI({chainID: safeChainID});
+	const {yDaemonBaseUri} = useYDaemonBaseURI({chainID: currentVault.chainID});
 	const [selectedAboutTabIndex, set_selectedAboutTabIndex] = useState(0);
 
 	async function onAddTokenToMetamask(address: string, symbol: string, decimals: number, image: string): Promise<void> {
@@ -210,7 +208,7 @@ export function VaultDetailsTabsWrapper({currentVault}: {currentVault: TYDaemonV
 						<IconAddToMetamask className={'h-5 w-5 text-neutral-600 transition-colors hover:text-neutral-900 md:h-6 md:w-6'} />
 					</button>
 					<ExplorerLink
-						explorerBaseURI={getNetwork(safeChainID)?.defaultBlockExplorer}
+						explorerBaseURI={getNetwork(currentVault.chainID)?.defaultBlockExplorer}
 						currentVaultAddress={currentVault.address} />
 				</div>
 			</div>

apps/vaults/components/graphs/GraphForStrategyReports.tsx

@@ -1,7 +1,6 @@
 import {Fragment, useMemo} from 'react';
 import {Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
 import {yDaemonReportsSchema} from '@vaults/schemas/reportsSchema';
-import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID';
 import {formatToNormalizedValue, toBigInt} from '@yearn-finance/web-lib/utils/format.bigNumber';
 import {formatAmount, formatPercent} from '@yearn-finance/web-lib/utils/format.number';
 import {formatDate} from '@yearn-finance/web-lib/utils/format.time';
@@ -14,15 +13,15 @@ import type {TYDaemonVaultStrategy} from '@common/schemas/yDaemonVaultsSchemas';
 import type {TYDaemonReport, TYDaemonReports} from '@vaults/schemas/reportsSchema';
 
 export type TGraphForStrategyReportsProps = {
-	strategy: TYDaemonVaultStrategy,
-	vaultDecimals: number,
-	vaultTicker: string
-	height?: number,
+	strategy: TYDaemonVaultStrategy;
+	vaultChainID: number;
+	vaultDecimals: number;
+	vaultTicker: string;
+	height?: number;
 }
 
-export function GraphForStrategyReports({strategy, vaultDecimals, vaultTicker, height = 127}: TGraphForStrategyReportsProps): ReactElement {
-	const {safeChainID} = useChainID();
-	const {yDaemonBaseUri} = useYDaemonBaseURI({chainID: safeChainID});
+export function GraphForStrategyReports({strategy, vaultChainID, vaultDecimals, vaultTicker, height = 127}: TGraphForStrategyReportsProps): ReactElement {
+	const {yDaemonBaseUri} = useYDaemonBaseURI({chainID: vaultChainID});
 
 	const {data: reports} = useFetch<TYDaemonReports>({
 		endpoint: `${yDaemonBaseUri}/reports/${strategy.address}`,

apps/vaults/components/list/VaultsListEmpty.tsx

@@ -1,8 +1,6 @@
 import {useAppSettings} from '@vaults/contexts/useAppSettings';
 import {Button} from '@yearn-finance/web-lib/components/Button';
-import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID';
 import {isZero} from '@yearn-finance/web-lib/utils/isZero';
-import {getNetwork} from '@yearn-finance/web-lib/utils/wagmi/utils';
 
 import type {ReactElement} from 'react';
 import type {TYDaemonVaults} from '@common/schemas/yDaemonVaultsSchemas';
@@ -16,7 +14,6 @@ export function VaultsListEmpty({
 	currentCategory: string,
 	isLoading: boolean
 }): ReactElement {
-	const {safeChainID} = useChainID();
 	const {searchValue, category, set_category} = useAppSettings();
 
 	if (isLoading && isZero(sortedVaultsToDisplay.length)) {
@@ -30,6 +27,7 @@ export function VaultsListEmpty({
 			</div>
 		);
 	}
+
 	if (!isLoading && isZero(sortedVaultsToDisplay.length) && currentCategory === 'Holdings') {
 		return (
 			<div className={'mx-auto flex h-96 w-full flex-col items-center justify-center px-10 py-2 md:w-3/4'}>
@@ -40,17 +38,7 @@ export function VaultsListEmpty({
 			</div>
 		);
 	}
-	if (!isLoading && isZero(sortedVaultsToDisplay.length) && safeChainID !== 1) {
-		const chainName = getNetwork(safeChainID)?.name || 'this network';
-		return (
-			<div className={'mx-auto flex h-96 w-full flex-col items-center justify-center px-10 py-2 md:w-3/4'}>
-				<b className={'text-center text-lg'}>{'👀 Where Vaults ser?'}</b>
-				<p className={'text-center text-neutral-600'}>
-					{`It seems we don’t have ${currentCategory} on ${chainName} (yet). Feel free to check out other vaults on ${chainName} or change network. New Vaults and strategies are added often, so check back later. Don’t be a stranger.`}
-				</p>
-			</div>
-		);
-	}
+
 	if (!isLoading && isZero(sortedVaultsToDisplay.length)) {
 		return (
 			<div className={'mx-auto flex h-96 w-full flex-col items-center justify-center gap-4 px-10 py-2 md:w-3/4'}>
@@ -94,8 +82,6 @@ export function VaultsListEmptyFactory({
 	currentCategory: string,
 	isLoading: boolean
 }): ReactElement {
-	const {safeChainID} = useChainID();
-
 	if (isLoading && isZero(sortedVaultsToDisplay.length)) {
 		return (
 			<div className={'flex h-96 w-full flex-col items-center justify-center px-10 py-2'}>
@@ -106,7 +92,9 @@ export function VaultsListEmptyFactory({
 				</div>
 			</div>
 		);
-	} if (!isLoading && isZero(sortedVaultsToDisplay.length) && currentCategory === 'Holdings') {
+	}
+
+	if (!isLoading && isZero(sortedVaultsToDisplay.length) && currentCategory === 'Holdings') {
 		return (
 			<div className={'mx-auto flex h-96 w-full flex-col items-center justify-center px-10 py-2 md:w-3/4'}>
 				<b className={'text-center text-lg'}>{'Well this is awkward...'}</b>
@@ -115,17 +103,9 @@ export function VaultsListEmptyFactory({
 				</p>
 			</div>
 		);
-	} if (!isLoading && isZero(sortedVaultsToDisplay.length) && safeChainID !== 1) {
-		const chainName = getNetwork(safeChainID)?.name || 'this network';
-		return (
-			<div className={'mx-auto flex h-96 w-full flex-col items-center justify-center px-10 py-2 md:w-3/4'}>
-				<b className={'text-center text-lg'}>{'👀 Where Vaults ser?'}</b>
-				<p className={'text-center text-neutral-600'}>
-					{`It seems we don’t have ${currentCategory} on ${chainName} (yet). Feel free to check out other vaults on ${chainName} or change network. New Vaults and strategies are added often, so check back later. Don’t be a stranger.`}
-				</p>
-			</div>
-		);
-	} if (!isLoading && isZero(sortedVaultsToDisplay.length)) {
+	}
+
+	if (!isLoading && isZero(sortedVaultsToDisplay.length)) {
 		return (
 			<div className={'mx-auto flex h-96 w-full flex-col items-center justify-center px-10 py-2 md:w-3/4'}>
 				<b className={'text-center text-lg'}>{'No data, reeeeeeeeeeee'}</b>

apps/vaults/contexts/useAppSettings.tsx

@@ -6,29 +6,34 @@ import type {ReactElement} from 'react';
 
 export type	TAppSettingsContext = {
 	category: string;
+	selectedChains: string;
 	searchValue: string;
 	shouldHideDust: boolean,
 	shouldHideLowTVLVaults: boolean,
 	onSwitchHideDust: VoidFunction,
 	onSwitchHideLowTVLVaults: VoidFunction,
 	set_category: (v: string) => void
 	set_searchValue: (v: string) => void
+	set_selectedChains: (v: string) => void
 }
 const defaultProps: TAppSettingsContext = {
 	category: '',
+	selectedChains: '[1]',
 	searchValue: '',
 	shouldHideDust: false,
 	shouldHideLowTVLVaults: false,
 	onSwitchHideDust: (): void => undefined,
 	onSwitchHideLowTVLVaults: (): void => undefined,
 	set_category: (): void => undefined,
-	set_searchValue: (): void => undefined
+	set_searchValue: (): void => undefined,
+	set_selectedChains: (): void => undefined
 };
 
 const AppSettingsContext = createContext<TAppSettingsContext>(defaultProps);
 export const AppSettingsContextApp = memo(function AppSettingsContextApp({children}: {children: ReactElement}): ReactElement {
 	const [category, set_category] = useSessionStorage('yearn.fi/vaults-category', 'All Vaults');
 	const [searchValue, set_searchValue] = useSessionStorage('yearn.fi/vaults-search', '');
+	const [selectedChains, set_selectedChains] = useSessionStorage('yearn.fi/selected-chains', '[1]');
 	const [shouldHideDust, set_shouldHideDust] = useLocalStorage('yearn.fi/should-hide-dust', false);
 	const [shouldHideLowTVLVaults, set_shouldHideLowTVLVaults] = useLocalStorage('yearn.fi/hide-low-tvl', false);
 
@@ -41,9 +46,11 @@ export const AppSettingsContextApp = memo(function AppSettingsContextApp({childr
 		shouldHideLowTVLVaults,
 		onSwitchHideLowTVLVaults: (): void => set_shouldHideLowTVLVaults(!shouldHideLowTVLVaults),
 		category,
+		selectedChains,
 		searchValue,
 		set_category,
-		set_searchValue
+		set_searchValue,
+		set_selectedChains
 	}), [shouldHideDust, shouldHideLowTVLVaults, category, searchValue, set_category, set_searchValue, set_shouldHideDust, set_shouldHideLowTVLVaults]);
 
 	return (