[feat] Network switching

src/components/Connect/Connect.tsx

@@ -1,3 +1,4 @@
+import { UnsupportedChainIdError } from '@web3-react/core';
 import GenericModal from 'components/Modals/GenericModal';
 import { useActiveWeb3React } from 'hooks/useActiveWeb3React';
 import useEagerConnect from 'hooks/useEagerConnect';
@@ -11,25 +12,34 @@ import WalletLinkConnect from './WalletLinkConnect';
 
 const Connect: React.FC = () => {
 	const dispatch = useDispatch();
-	const { active } = useActiveWeb3React();
+	const { active, error } = useActiveWeb3React();
 	const triedToEagerConnect = useEagerConnect();
 	const open = useSelector(selectConnectingStatus);
 
+	const wrongNetwork = error instanceof UnsupportedChainIdError;
+
 	useEffect(() => {
 		dispatch(setEagerAttempt(triedToEagerConnect));
+		if (active === true) dispatch(setConnectingStatus(false));
 	}, [triedToEagerConnect, active, dispatch]);
 
 	return (
 		<GenericModal
 			show={open}
 			onDialogClose={(state) => dispatch(setConnectingStatus(state))}
-			modalTitle="Connect a wallet"
+			modalTitle={wrongNetwork ? 'Wrong Network' : 'Connect a wallet'}
 			onTitleCloseClick={() => dispatch(setConnectingStatus(false))}
 		>
-			<MetamaskConnect />
-			<WalletConnectConnect />
-			<WalletLinkConnect />
-			<TorusConnect />
+			{wrongNetwork ? (
+				<>Please connect to a supported network in the dropdown menu or in your wallet.</>
+			) : (
+				<>
+					<MetamaskConnect />
+					<WalletConnectConnect />
+					<WalletLinkConnect />
+					<TorusConnect />
+				</>
+			)}
 		</GenericModal>
 	);
 };

src/components/Connect/MetamaskConnect.tsx

@@ -22,7 +22,7 @@ const MetamaskConnect: React.FC = () => {
 		}
 	}, [active, error]);
 
-	if (error || !triedToEagerConnect) {
+	if (!triedToEagerConnect) {
 		return null;
 	}
 

src/components/Connect/TorusConnect.tsx

@@ -4,11 +4,7 @@ import { useActiveWeb3React } from 'hooks/useActiveWeb3React';
 import React from 'react';
 
 const TorusConnect: React.FC = () => {
-	const { error, activate, setError } = useActiveWeb3React();
-
-	if (error) {
-		return null;
-	}
+	const { activate, setError } = useActiveWeb3React();
 
 	return (
 		<>

src/components/Connect/WalletConnectConnect.tsx

@@ -4,11 +4,7 @@ import { useActiveWeb3React } from 'hooks/useActiveWeb3React';
 import React from 'react';
 
 const WalletConnectConnect: React.FC = () => {
-	const { error, activate, setError } = useActiveWeb3React();
-
-	if (error) {
-		return null;
-	}
+	const { activate, setError } = useActiveWeb3React();
 
 	return (
 		<>

src/components/Connect/WalletLinkConnect.tsx

@@ -3,11 +3,7 @@ import { useActiveWeb3React } from 'hooks/useActiveWeb3React';
 import React from 'react';
 
 const WalletLinkConnect: React.FC = () => {
-	const { error, activate, setError } = useActiveWeb3React();
-
-	if (error) {
-		return null;
-	}
+	const { activate, setError } = useActiveWeb3React();
 
 	return (
 		<>

src/components/Navbar/Navbar.tsx

@@ -1,17 +1,18 @@
+import { UnsupportedChainIdError } from '@web3-react/core';
 import AccountName from 'components/Account/AccountName';
 import { useActiveWeb3React } from 'hooks/useActiveWeb3React';
 import Link from 'next/link';
 import React from 'react';
+import { If, Then, Else, Case, Default, Switch } from 'react-if';
 import { useDispatch } from 'react-redux';
 import { setConnectingStatus } from 'state/reducers/user';
-import { If, Then, Else, Switch, Case, Default } from 'react-if';
 import AppBar from './AppBar';
 import { useRouter } from 'next/router';
 
 const Navbar: React.FC = () => {
 	const router = useRouter();
 	const dispatch = useDispatch();
-	const { active } = useActiveWeb3React();
+	const { active, error } = useActiveWeb3React();
 
 	return (
 		<>
@@ -34,6 +35,14 @@ const Navbar: React.FC = () => {
 								<div className="ml-6 block w-full content-center">
 									<div className="flex justify-end space-x-4">
 										<Switch>
+											<Case condition={error instanceof UnsupportedChainIdError}>
+												<button
+													className="btn cursor-pointer select-none rounded-md bg-lights-500 px-6 py-2 text-sm font-medium normal-case hover:bg-lights-500"
+													onClick={() => dispatch(setConnectingStatus(true))}
+												>
+													Wrong Network
+												</button>
+											</Case>
 											<Case condition={!router.pathname.startsWith('/app')}>
 												<Link href={'/app'}>
 													<div className="btn cursor-pointer select-none rounded-md bg-lights-300 px-3 py-2 text-sm font-medium normal-case hover:bg-lights-400">

src/constants/chains.ts

@@ -1,3 +1,5 @@
+import bobaLogoUrl from 'public/assets/chains/boba.svg';
+
 export enum SupportedChainId {
 	BOBA = 288,
 	BOBA_RINKEBY = 28
@@ -50,6 +52,7 @@ interface BaseChainInfo {
 	readonly networkType: NetworkType;
 	readonly blockWaitMsBeforeWarning?: number;
 	readonly explorer: string;
+	readonly logoUrl: string;
 	readonly label: string;
 	readonly addNetworkInfo: AddNetworkInfo;
 }
@@ -71,6 +74,7 @@ export const CHAIN_INFO: ChainInfoMap = {
 		networkType: NetworkType.L2,
 		// blockWaitMsBeforeWarning: ms`25m`,
 		explorer: 'https://blockexplorer.boba.network/',
+		logoUrl: bobaLogoUrl,
 		label: 'Boba L2',
 		addNetworkInfo: {
 			nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
@@ -81,6 +85,7 @@ export const CHAIN_INFO: ChainInfoMap = {
 		networkType: NetworkType.L2,
 		// blockWaitMsBeforeWarning: ms`25m`,
 		explorer: 'https://blockexplorer.rinkeby.boba.network/',
+		logoUrl: bobaLogoUrl,
 		label: 'Boba L2 Rinkeby',
 		addNetworkInfo: {
 			nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },