Cannot connect with Metamask on Sapphire Devnet (sapphire_devnet)

[webguru]

I’m following the tutorial to set up a web application. Everything works fine when using the config from the examples. However, when changing my development project, the UI always asks me to install Metamask Extention. But it is installed and working with the example.

Here is my config:

const clientId = process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID!;

const chainConfig = {
  chainNamespace: CHAIN_NAMESPACES.EIP155,
  chainId: '0xaa36a7',
  rpcTarget: 'https://rpc.ankr.com/eth_sepolia',
  displayName: 'Ethereum Sepolia Testnet',
  blockExplorerUrl: 'https://sepolia.etherscan.io',
  ticker: 'ETH',
  tickerName: 'Ethereum',
  logo: 'https://cryptologos.cc/logos/ethereum-eth-logo.png',
};

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

const web3AuthOptions: Web3AuthOptions = {
  chainConfig,
  clientId,
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
  privateKeyProvider,
};

const adapters = getDefaultExternalAdapters({ options: web3AuthOptions });

const web3AuthContextConfig = {
  web3AuthOptions,
  adapters: [...adapters],
};

export default web3AuthContextConfig;

The NEXT_PUBLIC_WEB3AUTH_CLIENT_ID is set correctly. I’m seeing the successful configuration call in the network tab:

{
    "network": "sapphire_devnet",
    "sms_otp_enabled": true,
    "wallet_connect_enabled": true,
    "key_export_enabled": true,
    "whitelist": {
        "urls": [
            "http://localhost:3000"
        ],
        "signed_urls": {
            "http://localhost:3000": "MEQCIGR0koD2Y97UKcUAklbQPsCtcqAEl_ojKyVZslh4PLUeAiBrk5oPlEnGXxcSo0Dn6VpEdAAQdVzpkF9mCwTjvh-CFQ"
        }
    }
}

But when clicking connect, I’m getting this:

And on Metamask (or any other wallet):

When using the CLIENT_ID from the example:

NEXT_PUBLIC_WEB3AUTH_CLIENT_ID="BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"

and WEB3AUTH_NETWORK.SAPPHIRE_MAINNET:

const web3AuthOptions: Web3AuthOptions = {
  ...
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
  ...
};

Everything works. So, I assume something is wrong with my application config, but I haven’t figured out why. Any hint how I could further debug would be very much appreciated

[w3abot]

Hey Hypha Webguru,

Thanks for sharing the details and the code snippet—super helpful! Let’s see if we can get you sorted out.

From your description, it sounds like the issue might be linked to the configuration for sapphire_devnet, especially since your setup works fine with sapphire_mainnet. Here are a few things you could check or try:

1. Metamask Extension Detection: Ensure that the project is detecting the Metamask extension correctly. There could be a script or resource that is blocking this detection if there’s a mismatch in how the network or client ID is set up.

2. Chain ID Match: Double-check the chainId configuration. It appears you’re using ‘0xaa36a7’, make sure this matches the chain ID expected when using the test network with MetaMask.

3. Network Configuration: The configuration appears different when switching environments. Verify that the NEXT_PUBLIC_WEB3AUTH_CLIENT_ID for sapphire_devnet is correctly whitelisted, as inconsistent whitelisting might result in connection issues.

4. Browser Console & Network Debugging: Keep an eye on both console errors and network requests. There might be failed network requests or specific error messages in the console when attempting to connect to the wallet.

5. Image Details: I see you’ve posted screenshots but unfortunately, they didn’t upload successfully. If there’s an error visible there, could you try uploading again or describing it?

6. Cross-Origin Issues: Sometimes running locally can incur cross-origin issues which might be affecting Metamask detection. Ensure that permissions are set to allow localhost if necessary.

Try these steps to get closer to the source. If you need further help, feel free to share more details, especially if you see any error messages with the screenshots or console logs.

I hope this nudges you in the right direction! Let me know how it goes or if there’s more we can dive into.

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.

[shahbaz]

Hey @webguru

This is happening because you have not configured the WalletConnect Project ID on the web3auth dashboard.

There are two ways to fix it.

1. Configure Wallet Connect AddOn on the Web3Auth Dashboard with a valid project ID.

   
   
   

2. Don’t include the Wallet Connect Adapter

@webguru

const adapters = getDefaultExternalAdapters({ options: web3AuthOptions });

const web3AuthContextConfig = {
  web3AuthOptions,
  adapters: [...adapters],
};

const adapters = getDefaultExternalAdapters({ options: web3AuthOptions });
const filteredAdapters = adapters.filter((adapter) => adapter.name !== "wallet-connect-v2");

export const web3AuthContextConfig: Web3AuthContextConfig = {
  web3AuthOptions,
  adapters: [authAdapter, ...filteredAdapters],
};

[webguru]

Beautiful, thank you @shahbaz