Issues with WalletConnectv2 and MetaMask

[cbonaco1]

Describe the bug
Connection to MetaMask (and other wallets such as TrustWallet, Ledger) is not working after scanning the QR code.

SDK Version (if relevant)
@walletconnect/ethereum-provider version 2.8.1
@walletconnect/modal version 2.5.2
@usedapp/core version 1.2.10
MetaMask iOS app v7.0.1(1126)

To Reproduce
For our setup, we are using the @walletconnect/modal package (following the Just Modal steps here). we are also using useDAapp for blockchain integration, not wagmi.

import { useEthers } from '@usedapp/core';
//..
const { activate } = useEthers();
//...
// inside the onClick of our WalletConnect button on our connect wallet modal:
const provider = await EthereumProvider.init({
  projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID || '', // required
  chains: [parseInt(process.env.NEXT_PUBLIC_CHAIN_ID || '')], // required
  showQrModal: true, // requires @walletconnect/modal
});

await provider.enable();
activate(provider);

Expected behavior
QR code modal should close, wallet should be connected to the dApp

Actual behavior
For some MetaMask users, nothing happens after scanning the QR code. The QR code modal remains open, and nothing happens in the MetaMask app. For some other MetaMask users, the wallet does connect, but am unable to fetch any onchain data. Looking at some of the calls to https://rpc.walletconnect.com/v1/?chainId=eip155:5&projectId=PROJECT_ID, some of the response is error code -32603

error processing the request: Error parsing relay: Redirect not found: goerli.gateway.pokt.network

Similar experience for users with TrustWallet. There is a spinning modal on the TrustWallet app, and no connection on the dApp.

When the QR code modal opens, we are also seeing one error pretty consistently in the JS console that says:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://verify.walletconnect.com') does not match the recipient window's origin

Please let me know if maybe our modal setup is incorrect.

Desktop (please complete the following information):

• OS: [macOS, iOS]
• Browser [Chrome]
• Version [114.0.5735.133]

Smartphone (please complete the following information):

• Device: [iPhone13]
• OS: [iOS 16.5.1]

Additional context
As mentioned earlier, we are using useDApp, not wagmi.

The diff for our changes from v1 to v2 is shown below. Instead of passing an infuraId to WalletConnectProvider, we are passing projectId, chains, and showQrModal to EthereumProvider.init

Any guidance here is appreciated, thank you!

[cmdr-dhiraj-laddha]

@cbonaco1 I am also facing the same issue, it seems to be working well with Rainbow Wallet but not with Metamask and TrustWallet. TrustWallet I am able to log in but not able to sign the message.

[siosio34]

I guess I'm in the same error.

When I launch QR on the desktop and take a picture of QR in the Metamask app to connect, even if I take a picture of QR intermittently, it does not go over from QR, or even if I sign lastly, I cannot get the signing result from the desktop.

[ganchoradkov]

Hey @cbonaco1, feel free to disregard the error in the console, in short, it's just noise.
As for the connection, which chainId are you passing as required?
Does the connection work with our example wallet? https://react-wallet.walletconnect.com/

[T-Matrix]

I use it by:

      await providerClient.connect()
      const accounts = await providerClient.enable();

called connect first. You can try.

[cmdr-dhiraj-laddha]

@ganchoradkov
I just tested my code works fine with your given example wallet https://react-wallet.walletconnect.com/ ,
but when I tried to use it with MetaMask it does not even show for connect option,
And for TrustWallet it allows me to connect but not shows a "Sign Message" popup.

let me know how can we fix this issue.

Just sharing code, I just adding base code here

`
import {EthereumProvider} from "@walletconnect/ethereum-provider";

const web3 = new Web3();

async function connectWalletv2(callback, dispatch) {

const projectId = "xxxxx";

const provider = await EthereumProvider.init({
    projectId: projectId,
    chains: [1],
    optionalChains: [5, 56, 137, 10, 100],
    showQrModal: true
}); 

provider.modal.setTheme({
    themeVariables: {
        "--w3m-font-family": "Roboto, sans-serif",
        "--w3m-accent-color": "#F5841F",
        "--w3m-z-index": "3000",
    },
});

await provider.connect()
let accounts = await provider.enable().catch((error) => {
    dispatch({
        type: "LOGIN_RESET"
    });
});
console.log("accounts", accounts);

web3.setProvider(provider);
web3.eth.net.getNetworkType().then(async (network_type) => {
    let chain = chainObject.find(v => v.chainId == provider.chainId);
    let network = {}
    network['type'] = chain.network;
    network['chainId'] = chain.chainId;
    callback({
        type: "success",
        data: {
            network: network,
            eth_address: accounts[0]
        }
    });
})

var signature = await web3.eth.personal.sign("XXXXXXX", accounts[0]);


provider.on("chainChanged", (chainId) => {

});
provider.on("accountsChanged", (e) => {
    window.location.reload();
});
provider.on("connect", (e) => {});
provider.on("session_event", (e) => {});
provider.on("display_uri", (e) => {});
provider.on("disconnect", (e) => {
    localStorage.clear();
    window.location.reload();
});
window.addEventListener('logoutAll', async function(event) {
    await provider.disconnect()
});

}

`

[cbonaco1]

Hey @cbonaco1, feel free to disregard the error in the console, in short, it's just noise. As for the connection, which chainId are you passing as required? Does the connection work with our example wallet? https://react-wallet.walletconnect.com/

hey @ganchoradkov thanks for the info on the console error. I was about to go down that rabbit hole.
we are using chainId 5 (Goerli).
forgive me but I'm not quite sure how to use the test wallet you mentioned. can you share any documentation or high level steps on how to use it?

[cbonaco1]

just an update here.
after upgrading to Typescript v5, we did manage to get MetaMask wallet connection working in our localhost environment. the errors with error code -32603 also went away.
however, when we deployed this to our cloud environment (via Cloudflare Pages), nothing happens when we scan the QR code. no popup on MetaMask app, and QR code modal remains open.

[ganchoradkov]

forgive me but I'm not quite sure how to use the test wallet you mentioned. can you share any documentation or high level steps on how to use it?

1. copy connection URI from web3modal
2. open https://react-wallet.walletconnect.com/walletconnect
3. paste the uri in the text field
4. click connect

[364734461]

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided
same bug！

[cbonaco1]

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided same bug！

hey @364734461 as @ganchoradkov mentioned above, that error can be disregarded.
#2789 (comment)

[cbonaco1]

hi @ganchoradkov thanks for providing those steps. after following the steps, I see two logs in the JS console:

Emitting subscription_created
context: "core/relayer/subscription"

and then

Emitting expirer_created
context: "core"

The UI does not change, but it does show a pairing if I go to the Pairing tab. If I try to connect again, it says "a pairing already exists". please let me know if this is helpful, and what the next steps might be.

[arein]

@cbonaco1

however, when we deployed this to our cloud environment (via Cloudflare Pages), nothing happens when we scan the QR code. no popup on MetaMask app, and QR code modal remains open.

This might just be a MetaMask issue (circumvented in a more recent version of @walletconnect/ethereum-provider (2.8.4).

[cbonaco1]

just an update here. we were able to get the wallet connection working after the following steps were taken:

1. upgrading typescript to version 5
2. set swcMinify to false in our nextjs.config. (nextjs version 12.2.2)
3. only call EthereumProvider.init once. the provider object it returns manages the session of the wallet connection. you can check for an active session with provider.session. you can also end the session with provider.disconnect()
4. added rpcMap to EthereumProvider.init call with the chainId as the keys, and our infura URL as the values
5. also upgraded @walletconnect/ethereum-provider to version 2.8.5, @walletconnect/modal to version 2.5.6, and @usedapp/core to 1.2.10 but not sure if those were contributing factors.

hope this helps.

[CuteShaun]

Same issue for me. All things above done but doesn't work

[gritaliana]

Got the same error on our web dApp: Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://verify.walletconnect.com') does not match the recipient window's origin ([our dev.website path]).

Everything is working fine on localhost with Metamask and Trust wallet.

But after deploying it to the dev environment, this error occurred every time I open the Modal.
In https://cloud.walletconnect.com/ in our project for dev environment I have added to the Origin allow list section our domain for the dev. Nothing is changed.

Using:
"next": "^12.2.2",
"@walletconnect/modal": "^2.6.1",
"@walletconnect/sign-client": "^2.9.2",