Issue with WalletConnect wallets/QR code

[jayohTM]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.10

wagmi Version

0.10.9

Current Behavior

WalletConnect wallets do not function correctly; Metamask and Coinbase Wallet function as expected.

With Trust Wallet, nothing happens after scanning QR code.

With ZenGo, an invalid QR code error is shown.

Expected Behavior

WalletConnect supported wallets should connect.

Steps To Reproduce

Connect with WalletConnect, Trust Wallet or ZenGo

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

https://stake-board-dash-bxvql010b-bradyj04.vercel.app/

Anything else?

We have requested a WalletConnect ID, which has been pending for 2 months, but our understanding is that is not required yet for operation.

[civa]

same issue here!

[jayohTM]

Hi @jayohTM and @civa i suggest you talk to a web3 wallet developer on their web3chain website...

This comment is spam and has been reported.

[codingfarhan]

Same issue here. Please look into it.

[DanielSinclair]

@jayohTM It looks like the QR codes generated on that dApp are malformed and are missing a key: wc:@1?bridge=https%3A%2F%2F6.bridge.walletconnect.org&key=. I don't see this behavior on any of our recent test dApps.

Some next steps:

• Can you share a reproducible example or snippets of how you're initializing the WagmiConfig?
• I'd also recommend you bump up to Wagmi 0.12 in parity with RainbowKit 0.12. Some changes introduced to Wagmi and the WalletConnect supply chain over the last few months in preparation for v2 have created issues.

[jayohTM]

@DanielSinclair Thanks for your help. Is the key something we need to provide on our end?

You can review how we're invoking WagmiConfig here (line 51):
https://github.com/bradyj04/StakeBoard-Dash/blob/develop-v12/src/App.js

We'll bump up Wagmi as well for testing. 👍

[DanielSinclair]

@jayohTM Opened a PR against your repo with a fix for the issue: bradyj04/StakeBoard-Dash#7
create-react-app v5 now relies on Webpack 5, which no longer includes Node polyfills by default. Upstream WalletConnect libraries rely on Buffer and thus the key param of the WalletConnect pairing URI wasn't being populated. The CRA polyfill issue has unfortunately been a known issue for some time: facebook/create-react-app#11756. Our CRA, Vite, and Remix examples cover this, but it's easy to miss.

[DanielSinclair]

I also bumped the Wagmi config out of your App component; this is a best practice as you won't want to re-initialize Wagmi and reset the provider connection.

[jayohTM]

Thank you so much for your assistance! It is appreciated.