WalletConnect modal does not appear when using a fallback to unstable_connector(injected)

[0xAlunara]

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Describe the bug

Version 0.0.32 of the @wagmi/vue package introduces a bug where the WalletConnect modal does not appear when using a fallback to unstable_connector(injected). This issue does not occur in version 0.0.31.

I'm too unfamiliar with the codebase to submit a PR.

Link to Minimal Reproducible Example

https://github.com/0xAlunara/walletconnect-no-modal.

Steps To Reproduce

1. Clone the reproduction repository: https://github.com/0xAlunara/walletconnect-no-modal.
2. Run the project with vite dev.
3. Attempt to connect using WalletConnect.

What Wagmi package(s) are you using?

@wagmi/vue

Wagmi Package(s) Version(s)

@wagmi/vue@0.0.32

Viem Version

2.18.0

TypeScript Version

5.5.4

Anything else?

Expected Behavior:
The WalletConnect QR modal should pop up, allowing users to connect their wallets.

Actual Behavior:
The WalletConnect QR modal does not appear. No console errors are shown, but the front-end displays an error: Cannot read properties of undefined (reading 'url').

Bug Introduction
The changelog for version 0.0.32 indicates added functionality for consumer-defined RPC URLs to be propagated to the WalletConnect & MetaMask Connectors, which likely introduced this bug.

Temporary Workaround:
Change the code in wagmi.ts from:

transports: {
  [mainnet.id]: fallback([http(), unstable_connector(injected)]),
},

to:

transports: {
  [mainnet.id]: fallback([http()]),
},

This bypasses the issue but is not a permanent fix.

Error Stacktrace:

TypeError: Cannot read properties of undefined (reading 'url')
    at chunk-TUJIUJBX.js?v=70b75fb5:5663:46
    at Array.map (<anonymous>)
    at extractRpcUrls (chunk-TUJIUJBX.js?v=70b75fb5:5663:21)
    at @wagmi_vue_connectors.js?v=70b75fb5:914:27
    at Array.map (<anonymous>)
    at initProvider (@wagmi_vue_connectors.js?v=70b75fb5:913:52)

Potential Cause:
The issue is identified in wagmi_vue_connectors.js:

const [url] = extractRpcUrls({
  chain,
  transports: config.transports
});

In extractRpcUrls.js:
return transports.map(({ value }) => value.url || fallbackUrl);

The variable value is undefined in some cases, specifically when using unstable_connector(injected) which does not have an RPC specified. Perhaps a fix would be to change value.url into value?.url?

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Wagmi version. If you have any questions or comments you can create a new discussion thread.