[bug] Cannot connect with Coinbase Wallet on non-whitelisted networks

[yonadaaa]

Is there an existing issue for this?

• [X] I have searched the existing issues

RainbowKit Version

1.0.11

wagmi Version

1.4.1

Current Behavior

I cannot connect, or switch networks, with Coinbase Wallet if the network is not in the wallets list of whitelisted networks: https://docs.cloud.coinbase.com/wallet-sdk/docs/whitelisted-networks

The app works fine if I add the network AND switch to it manually.

I believe this is because RainbowKit uses Viem's CoinbaseWalletConnector.switchChain, but the wallet_switchEthereumChain RPC method is not supported in Coinbase for non-whitelisted chains: https://docs.cloud.coinbase.com/wallet-sdk/docs/switching-chains

Expected Behavior

I can connect with Coinbase wallet and the app requests that I add or switch to the new chain.

Steps To Reproduce

Create a Wagmi Config with a non-whitelisted chain (eg. Harmony One):

import { harmonyOne } from 'wagmi/chains';

...

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [harmonyOne],
  [publicProvider()]
);

Run the app and attempt to connect with Coinbase Wallet. You will receive the following error:

SwitchChainError: An error occurred when attempting to switch chain.

Details: Unrecognized chain ID. Try adding the chain using addEthereumChain first.
Version: [email protected]
    at CoinbaseWalletConnector.switchChain (coinbaseWallet.js:188:1)

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

No response

Anything else?

No response

[juansalvatore]

We are also having the same issue with:

"wagmi": "0.12.19",
"@rainbow-me/rainbowkit": "0.12.18"

@DanielSinclair any updates on this issue? We are basically having to check the connectorId for now and adding our own logic using await coinbaseWalletObject.request from window to bypass this issue, even though we have correctly configured the coinbaseWallet with the chains array. Thanks!

[magiziz]

I've checked the issue and can confirm it happens on my end too.

As @yonadaaa pointed out, we're using viem and wagmi for wallet connections and chain switching. This seems to be causing the problem.

We need to raise an issue to the wagmi team to discuss adding non-whitelisted chains to the coinbase wallet during the connection process.

For now, there isn't an easy fix. The temporary solution is to manually open the Coinbase wallet, select the custom network, and then click "retry."

[magiziz]

@yonadaaa Are you able to reproduce this issue right now ? Coinbase wallet has fixed this by adding a warning about switching to a non whitelisted network like this.

You have to use the EIP-6963 wallet meaning that you have to have Coinbase wallet shown in the Installed section of the RainbowKit modal.

[magiziz]

@yonadaaa Any thoughts ?

[magiziz]

Closing this issue for now. Feel free to raise another issue if you come up with anything else 🙏

[BornPsych]

It does show errors and doesn't allow us to connect to the specific network If the user connects to non-whitelisted networks for the first time, when you manually add it to the network tab and then it works fine but when you try to connect by using the following configuration, the chain does not get added to the network and it shows ambiguous behaviour

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [ nonWhitelistedNetwork],
  [
    jsonRpcProvider({
      rpc: () => ({
        http: 'https://nonWhitelistedNetwork.xyz/http',
        webSocket: 'wss://nonWhitelistedNetwork.xyz/ws',
      }),
    }),
  ]
);

    <WagmiConfig config={wagmiConfig}>
      <RainbowKitProvider chains={chains} initialChain={nonWhitelistedNetwork.id}>
        {children}
      </RainbowKitProvider>
    </WagmiConfig>

@magiziz Please look into this, tell me if you are not able to replicate the error

[magiziz]

@BornPsych This is not going to work in RainbowKit v1 due to EIP-1193 connector behaviours. Please can you try using RainbowKit version 2.0.2 ?

[AlijonovMukhammaddiyor]

I found solution:

export const wagmiConfig = createConfig({
  chains: [
    {
      ...chiliz,
      blockExplorers: [
        {
          name: "Chiliz Explorer",
          apiUrl: "https://scan.chiliz.com/api",
          url: "https://scan.chiliz.com",
        },
      ],
    },
    {
      ...spicy,
      blockExplorers: [
        {
          name: "Spicy Explorer",
          apiUrl: "http://spicy-explorer.chiliz.com/api",
          url: "http://spicy-explorer.chiliz.com",
        },
      ],
    },
  ],
  connectors,
  transports,
  ssr: true,
})

Change the blockExplorers and it is working