[bug] The dApp fails to load when both Phantom and Coinbase Wallet are enabled.

[Sharqiewicz]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

2.1.7

wagmi Version

2.12.29

Current Behavior

When I visit my dApp with both Phantom and Coinbase Wallet enabled, the application displays only a white screen and doesn’t load. However, when either wallet is disabled, the dApp functions perfectly.

Expected Behavior

The dApp loads successfully when both Phantom and Coinbase Wallet are enabled.

Steps To Reproduce

In the CodeSandbox

1. Have both wallets enabled
2. Click on Connect Wallet button
3. Refresh the page

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

https://codesandbox.io/p/sandbox/lingering-mountain-83h7z2

Anything else?

No response

[hesoyamcode]

Same we are experiencing this

[DanielSinclair]

Was able to reproduce some of this behavior, where the page will hang after a few seconds; the exact reproduction steps are unclear to me.

This looks to be a problem within one of the extensions themselves and their inpage scripts to inject their dapp provider, rather than upstream in RainbowKit. I've relayed to the Phantom team to investigate. I'd suggest you disable one of the extensions for the time being, or disable Phantom's EVM support to prevent the collision.

[GarrettJMU]

I'm also confirming this is happening

[flipscholtz]

I followed the trail of the crash down into the internals of Wagmi, this eth_accounts call is hanging and never returning for the coinbase injected provider.

The wagmi code wrapping that call does retry, but it does not time out if an individual call hangs, and so it hangs the whole tab which eventually becomes unresponsive, and I think it’s related to this code being run in the onMount logic of the wagmi provider component, although I’m not sure of that. But commenting out the eth_accounts call takes the crash away.

A further lead wrt the connection to Rainbowkit:

The crash only happens if the config passed into the WagmiProvider comes from Rainbowkit’s getDefaultConfig function. If I use Wagmi’s own createConfig function, the crash does not happen.

[flipscholtz]

We have a sample app for reproducing this:
https://github.com/civicteam/rainbowkit-coinbase-bug

Steps:

1. Have Coinbase and Phantom extensions enabled
2. npm install && npm run dev
3. Load the app (may have to refresh once or twice to trigger the issue).
4. Observe that the tab hangs...screen goes blank and the tab becomes unresponsive
5. Disable the Phantom or Coinbase extension
6. Load the page again in a new tab and observe it can load successfully even when refreshing multiple times.

While the underlying issue seems to be the infinite event loop between wagmi and the Coinbase extension, it seems to be triggered by using Rainbowkit's injectedWallet.
If we try wagmi's createConfig function directly and pass in a wagmi injected() connector directly without going via rainbowkit, we don't get the issue.