WalletInitialization Error: Invalid params passed in, Invalid wallet connect project id. Please configure it on the dashboard

[michaelkooy0112]

• SDK Version(package.json): 8.0.1
• Platform: Next.js 14.1.4
• Browser Console Screenshots:
  
  

We did run into this problem when deploying to production. Web3auth does not initialize a wallet connection on https://bogle.app hosted on Heroku but works well on localhost and dev url - https://bogle-app.onrender.com/

            const privateKeyProvider = new EthereumPrivateKeyProvider({
                config: { chainConfig: configs[activeChain] }
            })
    
            //Creating web3auth instance
            
            const web3AuthOptions: Web3AuthOptions = {
                clientId: process.env.WEB3AUTH_CLIENT_ID, // Get your Client ID from the Web3Auth Dashboard https://dashboard.web3auth.io/
                web3AuthNetwork: "sapphire_mainnet",
                chainConfig: configs[activeChain],
                uiConfig: {
                    mode: "dark",
                },
                privateKeyProvider
            }
            
            const web3auth = new Web3Auth(web3AuthOptions as Web3AuthOptions);
    
            const adapters = await getDefaultExternalAdapters({ options: web3AuthOptions });
            adapters.forEach((adapter) => {
                web3auth.configureAdapter(adapter);
            });
    
            setWeb3auth(web3auth);
            await web3auth.initModal();
            await web3auth.connect();

[TomTom]

hi @michaelkooy0112,

Would you mind checking for the value web3auth.connected is true before calling to await web3auth.connect();

as you can see in our examples: web3auth-pnp-examples/web-modal-sdk/blockchain-connection-examples/evm-modal-example/src/App.tsx at 67442edad97f58a55d9cc5a6f59875ada9b38185 · Web3Auth/web3auth-pnp-examples · GitHub

Please contact me if the problem persists

[michaelkooy0112]

The error comes before checking web3auth.connected

[michaelkooy0112]

I think there is a problem in getting default external adapters

const adapters = await getDefaultExternalAdapters({ options: web3AuthOptions });
adapters.forEach((adapter) => {
    web3auth.configureAdapter(adapter);
});

Once I remove the code above, the modal works correctly without wallet connect option.
The issue may lie in configuring the WalletConnect project ID within the external adapters.

[TomTom]

hi @michaelkooy0112

I hope you are doing great.

Did you try using our last version in all the Web3Auth packages ? v8.3 ?

[maharshi]

Hey @michaelkooy0112,
Please try configuring your WalletConnect project id on the Web3Auth dashboard. Here’s a gif for assistance.