fix: disable wallet connect while waiting for v2 validation

apps/common/components/Header.tsx

@@ -1,13 +1,15 @@
 import {cloneElement, Fragment, useEffect, useMemo, useState} from 'react';
+import {useNetwork, usePublicClient} from 'wagmi';
 import {Listbox, Transition} from '@headlessui/react';
+import {useIsMounted} from '@react-hookz/web';
 import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
-import {useChain} from '@yearn-finance/web-lib/hooks/useChain';
-import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID';
+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 {AnchorHTMLAttributes, DetailedHTMLProps, ReactElement} from 'react';
+import type {Chain} from 'wagmi';
 
 const Link = (props: (DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>) & {tag: ReactElement}): ReactElement => {
 	const {tag, ...rest} = props;
@@ -40,20 +42,23 @@ function Navbar({nav, linkComponent = <a />, currentPathName}: TNavbar): ReactEl
 }
 
 export type TNetwork = {value: number, label: string};
-function NetworkSelector({supportedChainID}: {supportedChainID: number[]}): ReactElement {
-	const chains = useChain();
-	const {chainID} = useChainID();
+function NetworkSelector({networks}: {networks: number[]}): ReactElement {
 	const {onSwitchChain} = useWeb3();
+	const publicClient = usePublicClient();
+	const {chains} = useNetwork();
+	const safeChainID = toSafeChainID(publicClient?.chain.id, Number(process.env.BASE_CHAINID));
+
 	const supportedNetworks = useMemo((): TNetwork[] => {
-		const noTestnet = supportedChainID.filter((chainID: number): boolean => chainID !== 1337);
-		return noTestnet.map((chainID: number): TNetwork => (
-			{value: chainID, label: chains.get(chainID)?.displayName || `Chain ${chainID}`}
+		const noTestnet = chains.filter(({id}): boolean => id !== 1337);
+		const onlyNetworks = noTestnet.filter(({id}): boolean => networks.includes(id));
+		return onlyNetworks.map((network: Chain): TNetwork => (
+			{value: network.id, label: network.name}
 		));
-	}, [chains, supportedChainID]);
+	}, [chains, networks]);
 
 	const	currentNetwork = useMemo((): TNetwork | undefined => (
-		supportedNetworks.find((network): boolean => network.value === chainID)
-	), [chainID, supportedNetworks]);
+		supportedNetworks.find((network): boolean => network.value === safeChainID)
+	), [safeChainID, supportedNetworks]);
 
 	if (supportedNetworks.length === 1) {
 		if (currentNetwork?.value === supportedNetworks[0]?.value) {
@@ -83,9 +88,9 @@ function NetworkSelector({supportedChainID}: {supportedChainID: number[]}): Reac
 	}
 
 	return (
-		<div key={chainID} className={'relative z-50 mr-4'}>
+		<div key={safeChainID} className={'relative z-50 mr-4'}>
 			<Listbox
-				value={chainID}
+				value={safeChainID}
 				onChange={async (value: any): Promise<void> => onSwitchChain(value.value)}>
 				{({open}): ReactElement => (
 					<>
@@ -131,10 +136,14 @@ function NetworkSelector({supportedChainID}: {supportedChainID: number[]}): Reac
 }
 
 function WalletSelector(): ReactElement {
-	const	{options, isActive, address, ens, lensProtocolHandle, openLoginModal, onDesactivate, onSwitchChain} = useWeb3();
-	const	[walletIdentity, set_walletIdentity] = useState<string | undefined>(undefined);
+	const {options, isActive, address, ens, lensProtocolHandle, openLoginModal, onDesactivate, onSwitchChain} = 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) {
@@ -146,7 +155,7 @@ function WalletSelector(): ReactElement {
 		} else {
 			set_walletIdentity(undefined);
 		}
-	}, [ens, lensProtocolHandle, address, isActive]);
+	}, [ens, lensProtocolHandle, address, isActive, isMounted]);
 
 	return (
 		<div
@@ -192,12 +201,6 @@ function Header({
 	supportedNetworks,
 	onOpenMenuMobile
 }: THeader): ReactElement {
-	const {options} = useWeb3();
-
-	const supportedChainID = useMemo((): number[] => (
-		supportedNetworks || options?.supportedChainID || [1, 10, 250, 42161]
-	), [supportedNetworks, options?.supportedChainID]);
-
 	return (
 		<header className={'yearn--header'}>
 			<Navbar
@@ -227,7 +230,7 @@ function Header({
 				</div>
 			</div>
 			<div className={'flex w-1/3 items-center justify-end'}>
-				<NetworkSelector supportedChainID={supportedChainID} />
+				<NetworkSelector networks={supportedNetworks || [1]} />
 				<WalletSelector />
 				{extra}
 			</div>

apps/common/utils/wagmiConfig.ts

@@ -4,8 +4,6 @@ import {CoinbaseWalletConnector} from 'wagmi/connectors/coinbaseWallet';
 import {LedgerConnector} from 'wagmi/connectors/ledger';
 import {MetaMaskConnector} from 'wagmi/connectors/metaMask';
 import {SafeConnector} from 'wagmi/connectors/safe';
-import {WalletConnectConnector} from 'wagmi/connectors/walletConnect';
-import {WalletConnectLegacyConnector} from 'wagmi/connectors/walletConnectLegacy';
 import {alchemyProvider} from 'wagmi/providers/alchemy';
 import {publicProvider} from 'wagmi/providers/public';
 import {InjectedConnector} from '@yearn-finance/web-lib/utils/web3/injectedConnector';
@@ -119,16 +117,15 @@ const config = createConfig({
 		new InjectedConnector({chains}),
 		new MetaMaskConnector(),
 		new LedgerConnector({chains}),
-		new WalletConnectLegacyConnector({options: {qrcode: true}}),
+		// new WalletConnectConnector({
+		// 	chains,
+		// 	options: {projectId: process.env.WALLETCONNECT_PROJECT_ID as string}
+		// }),
 		new CoinbaseWalletConnector({
 			options: {
 				jsonRpcUrl: getRPC(1),
 				appName: process.env.WEBSITE_TITLE as string
 			}
-		}),
-		new WalletConnectConnector({
-			chains,
-			options: {projectId: process.env.WALLETCONNECT_PROJECT_ID as string}
 		})
 	]
 });

package.json

@@ -20,7 +20,7 @@
     "@react-hookz/deep-equal": "^1.0.4",
     "@sentry/nextjs": "^7.54.0",
     "@wagmi/core": "^1.1.1",
-    "@yearn-finance/web-lib": "^0.20.77",
+    "@yearn-finance/web-lib": "^0.20.83",
     "axios": "^1.4.0",
     "dayjs": "^1.11.8",
     "ethers": "5.7.2",

pages/_app.tsx

@@ -144,9 +144,6 @@ function MyApp(props: AppProps): ReactElement {
 			<WithYearn
 				configOverwrite={config}
 				options={{
-					web3: {
-						supportedChainID: [1, 10, 250, 42161, 1337]
-					},
 					baseSettings: {
 						yDaemonBaseURI: process.env.YDAEMON_BASE_URI as string
 					},

pages/vaults/index.tsx

@@ -8,7 +8,9 @@ import {useAppSettings} from '@vaults/contexts/useAppSettings';
 import {useFilteredVaults} from '@vaults/hooks/useFilteredVaults';
 import {useSortVaults} from '@vaults/hooks/useSortVaults';
 import Wrapper from '@vaults/Wrapper';
+import {Button} from '@yearn-finance/web-lib/components/Button';
 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 {useSessionStorage} from '@yearn-finance/web-lib/hooks/useSessionStorage';
 import {toAddress} from '@yearn-finance/web-lib/utils/address';
@@ -33,6 +35,7 @@ import type {TPossibleSortBy} from '@vaults/hooks/useSortVaults';
 function HeaderUserPosition(): ReactElement {
 	const {cumulatedValueInVaults} = useWallet();
 	const {earned} = useYearn();
+	const {options, isActive, address, openLoginModal, onSwitchChain} = useWeb3();
 
 	const formatedYouEarned = useMemo((): string => {
 		const amount = (earned?.totalUnrealizedGainsUSD || 0) > 0 ? earned?.totalUnrealizedGainsUSD || 0 : 0;
@@ -43,6 +46,25 @@ function HeaderUserPosition(): ReactElement {
 		return formatAmount(cumulatedValueInVaults || 0) ?? '';
 	}, [cumulatedValueInVaults]);
 
+	if (!isActive) {
+		return (
+			<Fragment>
+				<div className={'col-span-12 h-auto w-full md:col-span-8 md:h-[136px]'}>
+					<p className={'pb-2 text-lg text-neutral-900 md:pb-6 md:text-3xl'}>{'Wallet not connected'}</p>
+					<Button
+						onClick={(): void => {
+							if (!isActive && address) {
+								onSwitchChain(options?.defaultChainID || 1);
+							} else {
+								openLoginModal();
+							}
+						}}>
+						{'Connect Wallet'}
+					</Button>
+				</div>
+			</Fragment>
+		);
+	}
 	return (
 		<Fragment>
 			<div className={'col-span-12 w-full md:col-span-8'}>

yarn.lock

@@ -3110,10 +3110,10 @@
     motion "10.16.2"
     qrcode "1.5.3"
 
-"@yearn-finance/web-lib@^0.20.77":
-  version "0.20.77"
-  resolved "https://registry.yarnpkg.com/@yearn-finance/web-lib/-/web-lib-0.20.77.tgz#739a7494470a1885a2a7e48a6106f501aac4784f"
-  integrity sha512-pp5CdhZ+ZYYJtRD9UtKGMkgelhNS5o+QrBOxN40N2ey7vtSjzToTF9iR+FsCpFFV2gG1xQnixlj/zXBy5Ze/zw==
+"@yearn-finance/web-lib@^0.20.83":
+  version "0.20.83"
+  resolved "https://registry.yarnpkg.com/@yearn-finance/web-lib/-/web-lib-0.20.83.tgz#bb08fedbb647b9ea6c1688ef3a2bc241414d4a1c"
+  integrity sha512-u82y4y07eFvtap6/HheWk33txke/EMPFzbqop34lOWCO1/7T5Zr6CAF4faCHrhvwTW10cR/nek4j+tnPs5n+gw==
   dependencies:
     "@headlessui/react" "^1.7.15"
     "@ledgerhq/iframe-provider" "^0.4.3"