Infinite event loop when using an 'injected' connector for metamask with the Coinbase wallet extension enabled

[flipscholtz]

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Describe the bug

Not sure if this can be addressed in Wagmi or if the bug is with Coinbase.

Conditions:

• Using Chrome
• injectedWallet is passed in as one of the wallets to wagmi createConfig, and the Metamask browser extension is enabled.
• Chrome has the Coinbase wallet extension enabled.

Behaviour:
When the react WagmiProvider tries to initialize, the browser tab completely locks up and crashes.

Analysis of infinite loop:

• When connecting, wagmi's 'injected' connector calls getAccounts() here , which calls .request() on the provider here
• The Coinbase extension has a class called MultiProvider, which is triggered when a Metamask connector is loaded into Wagmi. This class emits a "connect" event whenever a request is made, including getAccounts().
• Wagmi listens to "connect" events here, and the onConnect listener immediately calls getAccounts() again, which triggers another "connect" event from the Coinbase extension, etc etc, in an infinite loop.

I have attached screenshots showing the loop.
Wagmi + Coinbase + Metamask infinite loop.pdf

I think the issue may be with Coinbase, because it seems to me that it shouldn't be emitting "connect" events on every request after the provider has already been registered / connected. But I'm posting here too to see if anyone else has come across this issue / has any insights.

Link to Minimal Reproducible Example

No response

Steps To Reproduce

No response

What Wagmi package(s) are you using?

wagmi, @wagmi/connectors, @wagmi/core

Wagmi Package(s) Version(s)

[email protected]

Viem Version

2.19.6

TypeScript Version

5.7.2

Anything else?

This is a React app, using Rainbowkit with Wagmi.

[hubagaspar91]

We might be experiencing something similar.

Can you link to the piece of code in Cb Wallet that emits connect on requests?

[flipscholtz]

We might be experiencing something similar.

Can you link to the piece of code in Cb Wallet that emits connect on requests?

@hubagaspar91
I narrowed this down to happen when rainbowkit's injectedWallet is used. There's a rainbowkit issue here, and I will comment on there shortly with a sample repo to reproduce it.

Unfortunately I couldn't find the source for the coinbase extension on Github, except for one quite outdated version that someone unminified, but it doesn't contain the code in question.
Their official SDK repo at https://github.com/coinbase/coinbase-wallet-sdk does not contain the extension itself it seems.

I looked at the code in Chrome devtools, the file is under Coinbase Wallet extension => requestProvider.js, the last line of the registerProviders function, which is called when getAccounts is called.

      registerProviders(e) {
                    this.providers.slice(0, this.providers.length);
                    for (const t of e)
                        !this.selectedProvider && this.shouldSelectProvider(t) && this.setSelectedProvider(t),
                        t.isMetaMask && (this.overrideIsMetaMask = !0,
                        this.providerMap.set(n.ProviderType.MetaMask, t)),
                        t.isCoinbaseWallet && this.providerMap.set(n.ProviderType.CoinbaseWallet, t),
                        this.providers.push(t),
                        this.providers = [...new Set(this.providers)];
                    const {chainId: t} = this;
                    this.emit("connect", {
                        chainId: t
                    })
                }

[flipscholtz]

See here for a sample app to reproduce.