[bug] Connecting a wallet in React example fails on iOS

[cgrayson-ch]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.1.0

wagmi Version

0.3.5

Current Behavior

When I use the react example from the official repo, connecting to my wallet in a browser on a laptop works as expected but on iOS fails.

Clicking on the "connect" button will open the corresponding wallet app but will not prompt for a pairing request once the app is open. When testing with Metamask it just fails silently. When testing with Rainbow Wallet a text box pops up stating "Error initializing with WalletConnect."

Curiously, both of the next.js examples found in the official repo work as expected (on both laptop browser and mobile thick clients).

Expected Behavior

I expect the "connect" button to successfully open a wallet and initiate the pairing sequence on Android and iOS.

Steps To Reproduce

1. Clone the official examples repo at https://github.com/rainbow-me/rainbowkit-examples
2. Change directory to the with-create-react-app subdirectory
3. Install dependencies (npm install)
4. Run the server (npm start)
5. On a mobile phone, point your browser to the server spun up in the previous step
6. Click on the "connect" button
   7a. Choose Metamask and observe that the Metamask app is opened but no prompt to pair the wallet is received
   7b. Choose Rainbow Wallet and observe the error stating that there was a Wallet Connect misconfiguration

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

No response

Anything else?

No response

[nickbytes]

Thanks for the issue @cgrayson-ch! 

I believe this has to do w/ CRA v5 updates + walletconnect dependencies missing. Here's probably the best explanation: WalletConnect/walletconnect-monorepo#584

If you plug your phone in and debug w/ Safari devtools, you'll probably see a message like:

Here's some more info you might find helpful:

• Coinbase docs for getting set up w/ web3-react here
  • This fix would be the same for RainbowKit, since both use the same WalletConnect dependencies
• Issues in WalletConnect:
  • Buffer is not defined error with CRA WalletConnect/walletconnect-monorepo#748
  • Webpack v5 support WalletConnect/walletconnect-monorepo#584
• Other users in RainbowKit
  • Struggling with WalletConnect and Rainbow wallets #380
  • [bug] <ReferenceError: Buffer is not defined> #341

I believe the solution here is to customize your webpack setup (using something like craco) OR downgrade react-scripts.

[nickbytes]

@cgrayson-ch I'm going to close this now. Feel free to re-open and/or reach out if you're still having issues!