diff --git a/src/app.tsx b/src/app.tsx
index a3a58e840..cf41f1c52 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -44,6 +44,7 @@ export const App: React.FC = () => {
// further refactoring of layout (see further below).
const {pathname} = useLocation();
const {methods, status, network, address, provider} = useWallet();
+
useMonitoring();
// Initialize feature flags using the initial URL
diff --git a/src/containers/networkErrorMenu/index.tsx b/src/containers/networkErrorMenu/index.tsx
index 32169d9a2..401c7d82f 100644
--- a/src/containers/networkErrorMenu/index.tsx
+++ b/src/containers/networkErrorMenu/index.tsx
@@ -9,11 +9,11 @@ import {useAlertContext} from 'context/alert';
import {useGlobalModalContext} from 'context/globalModals';
import {useNetwork} from 'context/network';
import useScreen from 'hooks/useScreen';
-import {useSwitchNetwork} from 'hooks/useSwitchNetwork';
import {useWallet} from 'hooks/useWallet';
import WalletIcon from 'assets/images/wallet.svg';
-import {CHAIN_METADATA} from 'utils/constants';
+import {CHAIN_METADATA, SupportedNetworks} from 'utils/constants';
import {handleClipboardActions, shortenAddress} from 'utils/library';
+import {useSwitchChain} from 'wagmi';
interface INetworkErrorMenuState {
onClose?: () => void;
@@ -26,8 +26,9 @@ export const NetworkErrorMenu = () => {
const {onClose, onSuccess} = modalState ?? {};
const {network} = useNetwork();
- const {switchWalletNetwork} = useSwitchNetwork();
- const {address, ensName, ensAvatarUrl, connectorName} = useWallet();
+ const {switchChain} = useSwitchChain();
+ const {address, ensName, ensAvatarUrl} = useWallet();
+
const {isDesktop} = useScreen();
const {t} = useTranslation();
const {alert} = useAlertContext();
@@ -38,7 +39,8 @@ export const NetworkErrorMenu = () => {
};
const handleSwitchNetwork = () => {
- switchWalletNetwork();
+ const currentChain = CHAIN_METADATA[network as SupportedNetworks]?.id;
+ switchChain({chainId: currentChain});
close();
onSuccess?.();
};
@@ -86,13 +88,11 @@ export const NetworkErrorMenu = () => {
- {connectorName === 'MetaMask' && (
-
- )}
+
);
diff --git a/src/hooks/useSwitchNetwork.tsx b/src/hooks/useSwitchNetwork.tsx
deleted file mode 100644
index 7c6af6e5d..000000000
--- a/src/hooks/useSwitchNetwork.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import {useNetwork} from 'context/network';
-import {CHAIN_METADATA} from 'utils/constants';
-import {toHex} from 'utils/library';
-
-type ErrorType = {
- code: number;
-};
-
-export const useSwitchNetwork = () => {
- const {network} = useNetwork();
-
- const switchWalletNetwork = async () => {
- // Check if MetaMask is installed
- if (window.ethereum) {
- try {
- // check if the chain to connect to is installed
- await window.ethereum.request({
- method: 'wallet_switchEthereumChain',
- params: [{chainId: toHex(CHAIN_METADATA[network].id)}], // chainId must be in hexadecimal numbers
- });
- } catch (error) {
- if ((error as ErrorType).code === 4902) {
- try {
- await window.ethereum.request({
- method: 'wallet_addEthereumChain',
- params: [
- {
- chainName: CHAIN_METADATA[network].name,
- chainId: toHex(CHAIN_METADATA[network].id),
- rpcUrls: CHAIN_METADATA[network].publicRpc,
- nativeCurrency: CHAIN_METADATA[network].nativeCurrency,
- },
- ],
- });
- } catch (addError) {
- console.error(addError);
- }
- }
- console.error(error);
- }
- } else {
- // if no window.ethereum then MetaMask is not installed
- alert(
- 'MetaMask is not installed. Please consider installing it: https://metamask.io/download.html'
- );
- }
- };
-
- return {switchWalletNetwork};
-};
diff --git a/src/index.tsx b/src/index.tsx
index f18ef0cb8..ba369fb7e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -32,7 +32,7 @@ import {App} from './app';
import {aragonGateway} from 'utils/aragonGateway';
import {HttpTransport} from 'viem';
-const chains = [base, mainnet, polygon, arbitrum, sepolia] as [
+const chains = [mainnet, polygon, base, arbitrum, sepolia] as [
Chain,
...Chain[],
];