Switch network doesn't work with non default chains

[layinka]

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.7

Current Behavior

I added some new chains when setting up the providers.

When i use SwitchNetwork from the useNetwork hook with chains i added e.g BSC, BSC Testnet etc, the selected network and list of networks do not show any longer.
There is no error and if i refresh the page, it now shows that i am connected to the right network

Expected Behavior

SwitchNetwork should work well with default and non default chains

Steps To Reproduce

Add new chains to the provider on setup and then use the code below to select and switch between chains

import { useNetwork } from 'wagmi'

const App = () => {
  const [{ data, error, loading }, switchNetwork] = useNetwork()

  return (
    <>
      <div>
        {data.chain?.name ?? networkData.chain?.id}{' '}
        {data.chain?.unsupported && '(unsupported)'}
      </div>

      {switchNetwork &&
        data.chains.map((x) =>
          x.id === data.chain?.id ? null : (
            <button key={x.id} onClick={() => switchNetwork(x.id)}>
              Switch to {x.name}
            </button>
          ),
        )}

      {error && <div>{error?.message}</div>}
    </>
  )
}

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

[tmm]

Looks like there's an issue with MetaMask, where it emits a disconnect event before switching chain.
MetaMask/metamask-extension#13375 (comment)

Until this gets fixed, I'm adding a shim to help prevent this from happening. #190

[layinka]

OK thanksThough, the bug doesn't happen with default chains in wagmi-------- Original message --------From: awkweb ***@***.***>Date: Sun, 20 Feb 2022, 01:00To: tmm/wagmi ***@***.***>Cc: layinka ***@***.***>, Author ***@***.***>Subject: Re: [tmm/wagmi] Switch network doesn't work with non default chains (Issue #180) Looks like there's an issue with MetaMask, where is emits a disconnect event before switching chain. MetaMask/metamask-extension#13375 (comment) Until this gets fixed, I'm adding a shim to help prevent this from happening. #190 —Reply to this email directly, view it on GitHub, or unsubscribe.Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you authored the thread.Message ID: ***@***.***>

[tmm]

Yup, that's correct. It looks like it only occurs when you use chains not built-in to MetaMask.

[tmm]

Looks like this was an issue on MM's side and works again when testing (using this CodeSandbox).

@layinka can you try out and re-open this issue if it doesn't work?

[peetzweg]

@tmm I still have this issue when switching between BSC and BSC Testnet. Not sure how related this is to "non-default chains".
Seems like I disconnected during the switching process, as you've already mentioned.

This Error bubbles up, not sure where it is coming from though.

Error: underlying network changed (event="changed", network={"name":"bnb","chainId":56,"ensAddress":null,"_defaultProvider":null}, detectedNetwork={"name":"bnbt","chainId":97,"ensAddress":null,"_defaultProvider":null}, code=NETWORK_ERROR, version=providers/5.6.1)
    at Logger.makeError (index.js?dd68:219:1)
    at Web3Provider.eval (base-provider.js?4ba1:971:1)
    at Generator.next (<anonymous>)
    at fulfilled (base-provider.js?4ba1:5:43)

[richikchanda1999]

While adding connectors, there was an option named shimChainChangedDisconnect that had solved this issue. However, it was removed in 0.3.x and onwards.
This issue has resurfaced in the above sandbox as well.

Looks like this was an issue on MM's side and works again when testing (using this CodeSandbox).

@layinka can you try out and re-open this issue if it doesn't work?

@tmm

[tmm]

Yeah, the shimChainChangedDisconnect option was a hack. Better that this is fixed by MM. Will think about it some more.

[FranRom]

I'm facing the same issue in my project, any workaround meanwhile MM fix it?
Thanks in advance!

[richikchanda1999]

I'm facing the same issue in my project, any workaround meanwhile MM fix it? Thanks in advance!

A workaround I used was to use a boolean state variable, with initial value as false.
Its value changes from false to true when the connect function is called. (connect from useConnect hook)
And from true to false when the disconnect function is called. (disconnect from useDisconnect hook)

The useConnect hook also returns a boolean value isDisconnected.
So, a network change makes the value of isDisconnected false, however the state variable still has a value true.

[0xflumedev]

I guess we have to wait until this is fixed for the problematic behavior to disappear MetaMask/metamask-extension#13375

[onigiri-x]

Hi there

I am having this issue on a webapp that has wagmi. Any options on how to fix this on the app - like a workaround?

I use this list of networks below, it at first lets me connect to any of them. Then when I start like a transaction, it will randomnly change to whatever is the FIRST in the list, in this case bsc. Then I need to disconnect and reconnect to get it to work.

Any tips would be appreciated, thank you

const { chains, provider } = configureChains(
[
bsc, goerli, polygon, mainnet
],
[
publicProvider(),
]
);

const { connectors } = getDefaultWallets({
appName: 'MyApp',
chains
});

const wagmiClient = createClient({
autoConnect: true,
connectors,
provider
});

[aryan877]

any fixes yet ?

[tmm]

Yup, was fixed in 0.12.6 by wevm/references#177

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest wagmi version. If you have any other comments you can create a new discussion.