[bug] <title>Error: Attempt to connect to relay via transportOpen has stalled. Retrying...

[linghuccc]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

1.0.4

wagmi Version

1.3.2

Current Behavior

Error: Attempt to connect to relay via transportOpen has stalled. Retrying...

Expected Behavior

No error expected.

Steps To Reproduce

Start a brand new project by running command: npm init @rainbow-me/rainbowkit@latest. After installation, update projectId in _app.tsx file. Then run command: npm run dev. Below error occurred.

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

No response

Anything else?

No response

[RobertoSnap]

Same here

[ignaciosantise]

hey @linghuccc 👋 Are you using a VPN? If so, can you try disabling it?

Also, if you are in China, try using this relay -> wss://relay.walletconnect.org

Hope it helps 🙏

[DanielSinclair]

Inquiring with the WalletConnect team about this. If you hone in on certain network conditions that cause this (like a VPN or specific region), let me know!

[linghuccc]

hey @linghuccc 👋 Are you using a VPN? If so, can you try disabling it?

Also, if you are in China, try using this relay -> wss://relay.walletconnect.org

Hope it helps 🙏

Yes, I am in China and using VPN. Below is the error message after I disabled VPN.

I am not sure how to configue relay, but according to the error message, it seems that wss://relay.walletconnect.org has already been used, right?

[linghuccc]

Inquiring with the WalletConnect team about this. If you hone in on certain network conditions that cause this (like a VPN or specific region), let me know!

Yes, I am using VPN as replied in above post.

[linghuccc]

this relay -> wss://relay.walletconnect.org

Errr... I am not sure if it was due to VPN residual effect or what. After I tried the second time some time later, it seems to be OK. (VPN disabled)

My question is whether it is possible to develop under VPN environment. As you know, we cannot even visit Youtube if VPN is disabled. I am counting on that to learn Next JS.

Thank you.

[linghuccc]

Wow, I am not sure what happened. Did you guys just make some changes? I turned on my VPN and the rainbowKit still seems to be working. Hope this lasts.

[dmitri-ross]

hey, I have the same issue.

And your example does not works on mobile

https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-next?file=%2Fpages%2F_app.tsx%3A41%2C3-41%2C12

[ignaciosantise]

@linghuccc the issue comes from the VPN. Good to know it works now 🎉

root problem is that some VPN/ISP block .com urls, and our default relay url is wss://relay.walletconnect.com

Our latest release uses wss://relay.walletconnect.org as fallback in case .com fails -> WalletConnect/walletconnect-monorepo#2864

And we also created a PR in Wagmi to expose a way to override the relay url.

[ignaciosantise]

@neurodim i tested your sandbox and it's working for me. Are you in China/using a VPN?

[bkrem]

Adding to @ignaciosantise's points above, once these changes are released in wagmi:

• the connection should automatically attempt to fall back to using wss://relay.walletconnect.org
• you are able to manually specify a relayUrl to override default behaviour

Part of the issue may be when a VPN connection is toggled on/off with a websocket connection already established, thus changing the underlying network conditions while the socket continues to behave as if it's connected.

[RobertoSnap]

Check this out, think we found the reason here:

https://github.com/orgs/WalletConnect/discussions/2835

Basically, these plugins cause the websocket to be stalled: '@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-private-methods',

[Frontend-io]

Hey guys, This still happen for me, despite upgrading to the latest rainbowKit version along with its dependencies.
It occurs sometimes, haven't been able to pinpoint the underlying issue, and i am not using a VPN.

But one thing i've noticed is if i leave my app dormant for sometimes without any interactions, when next i try to use it, the error pops up. If we can't figure out what the issue is, we should be able to at least have a way to handle it gracefully without it crashing the app.

Browser: Google Chrome
Version: Version 114.0.5735.198 (Official Build) (arm64)

Framwork: NextJS

[armanal]

same issue here.
I'm in Iran and walletConnect doesn't allow connections from Iran due to sanctions.

Is there a way to handle this error and maybe display a toast describing the problem to user?
or use a fallback option without walletConnect, when the client couldn't establish a connection to relay?