WalletConnect Adapter giving error on connection 'Missing or invalid.'

silver · October 23, 2024, 3:04pm

I try to use walletconnect login
I use mobile Metamask to take picture of the QR code
Metamask asks if I want to connect to the site
Signing fails in browser (error): Login failed: JsonRpcError: Missing or invalid. request() chainId: eip155:8453

I only have Base blockchain selected - is this the reason that it is failing? If I understand correctly it should propose to add the chain if it is missing? Or is the logic that auth should only specify Ethereum Mainnet (0x1)?

index.92c53fec.js:1  Login failed: JsonRpcError: Missing or invalid. request() chainId: eip155:8453
    at getJsonRpcError (errors.js:38:10)
    at Object.internal (errors.js:87:20)
    at r.sendAsync (jrpcEngine.js:395:23)
    at async r.request (jrpcEngine.js:416:11)
    at async WalletConnectV2Adapter._getSignedMessage (walletConnectV2adapter.js:354:11)
    at async WalletConnectV2Adapter.authenticateUser (walletConnectV2adapter.js:200:13)
    at async Proxy.sendWeb3AuthTokenToXano (index.92c53fec.js:1:23357)
    at async e (index.92c53fec.js:1:22323)

Code:

            const defaultWcSettings = await getWalletConnectV2Settings(
                "eip155",
                ["0x2105"],
                this.content.walletConnectProjectId,
            );
            const walletConnectModal = new WalletConnectModal({
                projectId: this.content.walletConnectProjectId,
            });
            const walletConnectV2Adapter = new WalletConnectV2Adapter({
                adapterSettings: { qrcodeModal: walletConnectModal, ...defaultWcSettings.adapterSettings },
                loginSettings: { ...defaultWcSettings.loginSettings },
            });
            
            web3auth.configureAdapter(walletConnectV2Adapter);

w3abot · October 23, 2024, 3:06pm

Hi Silver Sepp! Thank you for reaching out with your issue regarding the WalletConnect adapter. I understand how frustrating it can be to encounter these kinds of errors.

Here’s a summary of the details you’ve provided:

SDK Details: PnP Web SDK
Issue: WalletConnect Adapter giving error on connection ‘Missing or invalid.’
Error Message: Login failed: JsonRpcError: Missing or invalid. request() chainId: eip155:8453
Steps to Reproduce:
1. Using WalletConnect to log in.
2. Scanning the QR code with mobile MetaMask.
3. MetaMask prompts for connection.
4. Signing fails with the mentioned error.

Code Snippet:

You provided the following code snippet for configuring the WalletConnect adapter:

const defaultWcSettings = await getWalletConnectV2Settings(
    "eip155",
    ["0x2105"],
    this.content.walletConnectProjectId,
);
const walletConnectModal = new WalletConnectModal({
    projectId: this.content.walletConnectProjectId,
});
const walletConnectV2Adapter = new WalletConnectV2Adapter({
    adapterSettings: { qrcodeModal: walletConnectModal, ...defaultWcSettings.adapterSettings },
    loginSettings: { ...defaultWcSettings.loginSettings },
});

web3auth.configureAdapter(walletConnectV2Adapter);

Proposed Solution:

It seems like the issue may be related to the chain ID you’ve specified. The error suggests that the chain ID being used (eip155:8453) is not being recognized or is invalid. Ensure that:

The chain ID being sent during the request is supported and correctly configured in both your application and the WalletConnect settings.
If using Base blockchain, confirm that it is correctly set up and supported by WalletConnect.

Additionally, if you want WalletConnect to propose adding the chain, make sure that your WalletConnect configuration is set up to allow for that.

Next Steps:

Please check if you can modify the chain ID and see if that resolves the issue.
If the problem persists, could you provide us with any browser console screenshots? They might give us more insight into the error.

Feel free to reach out with any further questions or clarifications! We’re here to help.

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.

silver · October 23, 2024, 5:54pm

Just FYI, this is how the chainConfig is initialized:

          const chainConfig = {
                chainNamespace: CHAIN_NAMESPACES.EIP155,
                chainId: "0x2105",
                displayName: "Base Mainnet",
                rpcTarget: "https://mainnet.base.org",
                blockExplorerUrl: "https://base.blockscout.com",
                ticker: "ETH",
                tickerName: "Ethereum",
                logo: "https://github.com/base-org/brand-kit/raw/main/logo/in-product/Base_Network_Logo.svg",
            };

            const privateKeyProvider = new window.EthereumPrivateKeyProvider({
                config: { chainConfig },
            });
            
            const web3AuthOptions = {
                clientId,
                web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
                privateKeyProvider,
                sessionTime: 604800
            };

This same chainconfig works with MEtamask wallet for example. It asks to add the missing chain. But not the WalletConnect adapter.

maharshi · October 23, 2024, 11:57pm

Hey @silver,
Thanks for providing the details. To help us better diagnose the issue, could you please submit a recording of the process using jam.dev? This will allow us to see exactly which call is failing and what the response looks like.

silver · October 24, 2024, 5:39am

Can I post the recording somewhere privately?

maharshi · October 25, 2024, 3:14am

When you click on the avatar next to my name, you’ll see an option to message me, please DM me the link.

silver · October 29, 2024, 10:11am

Sorry but there is no way to message you. I think perhaps only admins can private message people? Can you please message and I will respond to you?

Btw, it seems that even if I have the chain in mobile Metamask but it is not active, then WalletConnect adapter will throw an exception. Only when I previously have the chain active it seems to work.

silver · October 30, 2024, 6:15pm

@maharshi could you please send me a PM, I will respond with the link

maharshi · October 30, 2024, 7:39pm

Dm’d you, please check your messages.

silver · November 20, 2024, 8:03am

What is the result of this, any comments?

silver · November 26, 2024, 9:55am

Hello, @maharshi ? Let me know if you have managed to test this

maharshi · November 27, 2024, 4:02am

Hey @silver,

I attempted to recreate the issue using our examples but was unable to replicate it. There’s one final check I’d recommend on your end:

Navigate to the Web3Auth Dashboard.
Open the project associated with the client ID used in your app.
Go to the Add-ons tab.
Click on WalletConnect v2 and ensure that your WalletConnect project ID is entered correctly.

Let me know if this resolves the issue, or if further assistance is needed!

silver · November 28, 2024, 7:03am

Ofcourse I have, when I have Base blockchain selected in Metamask mobile wallet then it all works!

This is the code I have, I am trying to log in with Base

            const chainConfig = {
                chainNamespace: window.CHAIN_NAMESPACES.EIP155,
                chainId: "0x2105", //CONNECTING TO BASE MAINNET !!!!
                displayName: "Base Mainnet",
                rpcTarget: "https://mainnet.base.org",
                blockExplorerUrl: "https://base.blockscout.com",
                ticker: "ETH",
                tickerName: "Ethereum",
                logo: "https://github.com/base-org/brand-kit/raw/main/logo/in-product/Base_Network_Logo.svg",
            };

            const privateKeyProvider = new window.EthereumPrivateKeyProvider({
                config: { chainConfig },
            });
            
            const web3AuthOptions = {
                clientId,
                web3AuthNetwork,
                privateKeyProvider
            };

            const web3auth = new Web3AuthNoModal(web3AuthOptions);
            const defaultWcSettings = await getWalletConnectV2Settings(
                "eip155",
                ["0x2105"], //CONNECTING TO BASE MAINNET !!!!
                walletConnectProjectId,
            );
            const walletConnectModal = new WalletConnectModal({
                projectId: walletConnectProjectId,
            });
            const walletConnectV2Adapter = new WalletConnectV2Adapter({
                adapterSettings: { qrcodeModal: walletConnectModal, ...defaultWcSettings.adapterSettings },
                loginSettings: { ...defaultWcSettings.loginSettings },
            });
            
            web3auth.configureAdapter(walletConnectV2Adapter);

            await web3auth.init();

            await web3authGlobal.connectTo(WALLET_ADAPTERS.WALLET_CONNECT_V2);

The error comes when I have Ethereum (or some other chain, not Base) selected in Metamask mobile wallet. When I try to connect it immediately says Login failed: JsonRpcError: Missing or invalid. request() chainId: eip155:8453. When Base is selected prior to login it shows signature screen correctly without error and I can log in successfully.

It should offer me to change the wallet to Base chain, like it does with other login methods (like Metamask). But it does not offer me to change the wallet to Base - instead throws the error.

I am using the latest version of the libraries, 9.4.4. @maharshi It has now been over a month since I posted the issue - its quite urgent as Mobile Metamask is one of the most popular login methods.

silver · December 10, 2024, 6:35am

Hi @maharshi have you checked this issue?

Ayush · December 11, 2024, 6:51am

Hey @silver can you please try to reproduce the issue with demo.web3auth.io? I tried with our demo, and not facing any issues. If you are able to reproduce the issue on the demo, please let us know.

maharshi · December 12, 2024, 5:28am

Hey @silver
thank you for the clarification.
Please follow what @Ayush has suggested, also please try out one more thing

silver:

const defaultWcSettings = await getWalletConnectV2Settings(
                "eip155",
                ["0x2105"], //CONNECTING TO BASE MAINNET !!!!
                walletConnectProjectId,
            );

Here, instead of ["0x2105"], can you please send ["0x2105", "0x1"]. This will get the settings for Ethereum as well, since you confirmed in your last message that the error happens when you switch to Ethereum from Base.

silver · December 12, 2024, 8:10am

@Ayush How do I in demo.web3auth.io display the walletconnect QR code?

As I said I get the error when choosing walletconnect in the desktop browser, opening mobile metamask in the phone and scanning the QR code. This works when I have Base selected previously in Metamask. It does not work, when I have some other chain selected - it never offers to change the chain and just errors out.

@maharshi

The code you provided has no effect. I think the problem is because the initial chainConfig going into EthereumProvateKeyProvider is set to Base. So if I connect Metamask while anything else is selected then I still see this in the logs:

            const chainConfig = {
                chainNamespace: window.CHAIN_NAMESPACES.EIP155,
                chainId: "0x2105",
                displayName: "Base Mainnet",
                rpcTarget: "https://mainnet.base.org",
                blockExplorerUrl: "https://base.blockscout.com",
                ticker: "ETH",
                tickerName: "Ethereum",
                logo: "https://github.com/base-org/brand-kit/raw/main/logo/in-product/Base_Network_Logo.svg",
            };

            const privateKeyProvider = new EthereumPrivateKeyProvider({
                config: { chainConfig },
            });