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[], ];