When I npm run dev and my wallet is not connected to one of the chains I have specified, I get the following error

enter image description here

This raises the question for me, how to handle the error when a user is not connected to the correct chain once we are launched?

This is how I am currently doing the connection:

import { WagmiProvider, chain } from 'wagmi';
import { providers } from 'ethers';

const infuraId = process.env.INFURA_ID;

const provider = ({ chainId }: { chainId?: number }) =>
  new providers.InfuraProvider(chainId, infuraId);

const chains: Chain[] = [
  { ...chain.mainnet, name: 'Ethereum' },
  { ...chain.ropsten, name: 'Ropsten' },

const wallets = getDefaultWallets({
  appName: 'My App',
  jsonRpcUrl: ({ chainId }) =>
    chains.find(x => x.id === chainId)?.rpcUrls?.[0] ??

const connectors = connectorsForWallets(wallets);

const App = ({ Component, pageProps }: AppProps) => {
  return (
      <WagmiProvider autoConnect connectors={connectors} provider={provider}>
        <ChakraProvider theme={theme}>
              <Component {...pageProps} />

export default App

Everything is working correctly, that error just gets thrown when I run the app and I am not on a supported chain - want to get ahead of it so that the user does not experience a crash or something when they go to the site when it is live.


1 Answer 1

  provider = new ethers.InfuraProvider('sepolia', infuraApiKey);
//in your React/NextJs:
  const { chain, chains } = useNetwork();//from Wagmi
  if (chain.name.toLowerCase() !== expected_blockchain.toLowerCase()) { ... }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.