switchChain with wagmi is not working

[mitevandon94]

I do have following config:

const chainConfig: CustomChainConfig = {
  chainNamespace: CHAIN_NAMESPACES.EIP155,
  chainId: '0x' + base.id.toString(16),
  rpcTarget: base.rpcUrls.default.http[0],
  displayName: base.name,
  tickerName: base.nativeCurrency?.name,
  ticker: base.nativeCurrency?.symbol,
  blockExplorerUrl: base.blockExplorers.default.url,
  logo: 'https://web3auth.io/images/web3authlog.png',
};

export const wagmiConfig = createConfig({
  chains: [base],
  transports: {
    [base.id]: http(),
  },
  connectors: [
    Web3AuthConnectorInstance([base]),
  ],
});

and when i try to switch chain:

import { switchChain } from '@wagmi/core';

 const checkAndSwitchChainIfNeeded = async () => {
    if (chainId !== defaultChain.id) {
      await switchChain(wagmiConfig, { chainId: base.id });
    }
  };

I do get following error:

inpage.js:1 MetaMask - RPC Error: Expected null or array with at least one valid string HTTPS URL 'blockExplorerUrl'. Received: h

but when i log the config looks like this:

{
    "chainNamespace": "eip155",
    "chainId": "0x2105",
    "rpcTarget": "https://mainnet.base.org",
    "displayName": "Base",
    "tickerName": "Ether",
    "ticker": "ETH",
    "blockExplorerUrl": "https://basescan.org",
    "logo": "https://web3auth.io/images/web3authlog.png"
}

[w3abot]

Thanks for sharing the details! It looks like you’ve provided a comprehensive overview of your configuration and the issue you’re experiencing.

From the error message MetaMask - RPC Error: Expected null or array with at least one valid string HTTPS URL 'blockExplorerUrl', and your provided configuration, here are a few things to double-check:

1. Ensure the blockExplorerUrl is correctly formatted and accessible. Sometimes, extra whitespace or special characters can cause such issues.
2. Verify the integrity of the base configuration imported from @wagmi/core, especially the base.id and base.rpcUrls being correctly defined.

It seems like your configuration should work based on code snippets you shared. Just to ensure there aren’t any hidden misconfigurations, you could try manually setting the base values within your chainConfig, as shown below:

const base = {
  id: 84837, // Example chain ID, ensure this matches your intended chain
  rpcUrls: {
    default: {
      http: ["https://mainnet.base.org"], // Ensure this is the correct endpoint
    },
  },
  name: "Base",
  nativeCurrency: {
    name: "Ether",
    symbol: "ETH",
  },
  explorers: {
    default: { url: "https://basescan.org" }
  }
};

const chainConfig: CustomChainConfig = {
  chainNamespace: CHAIN_NAMESPACES.EIP155,
  chainId: '0x' + base.id.toString(16),
  rpcTarget: base.rpcUrls.default.http[0],
  displayName: base.name,
  tickerName: base.nativeCurrency?.name,
  ticker: base.nativeCurrency?.symbol,
  blockExplorerUrl: base.explorers.default.url,
  logo: 'https://web3auth.io/images/web3authlog.png',
};

If this does not resolve the issue, could you provide:

1. The version numbers for the Web3Auth and any related wagmi/core libraries you’re using?
2. A screenshot of the browser console log capturing the full error and stack trace.

This information will help us dive deeper into the problem.

This response was generated by the Web3Auth Bot. A person from the Web3Auth team will come and give a more detailed answer to your query as well.

[mitevandon94]

Actually there is a bug in web3Auth switchChain

blockExplorerUrl: ((_chain$blockExplorers = chain.blockExplorers) === null || _chain$blockExplorers === void 0 ? void 0 : _chain$blockExplorers.default.url[0]) 

inside of await web3AuthInstance.addChain

Provided config looks like this:

{
    "default": {
        "name": "Basescan",
        "url": "https://basescan.org",
        "apiUrl": "https://api.basescan.org/api"
    }
}

and url[0] resolves to h and is not switching the chain!

I’ve manage to solve it by overriding default configuration like so:

export const wagmiConfig = createConfig({
  chains: [
    {
      ...base,
      blockExplorers: {
        default: {
          url: [base.blockExplorers.default.url],
        } as any,
      },
    },
  ],
  transports: {
    [base.id]: http(),
  },
  connectors: [
    Web3AuthConnectorInstance([
      {
        ...base,
        blockExplorers: {
          default: {
            url: [base.blockExplorers.default.url],
          } as any,
        },
      },
    ]),
  ],
});

btw i’ve tried with:

• import { base } from ‘wagmi/chains’;
• import { base } from ‘wagmi/viem’;

but they do have the same structure so this did not work

[yashovardhan]

Thanks for raising the issue. Looks like a change in interface from Wagmi’s side broke this. I’ll check and fix it as soon as possible.