Connect with wallet button not showing in Modal

Help - Plug n Play PnP Web SDKs
1

Connect with wallet button not showing in Modal. Is there any setting for this?

When asking for help in this category, please make sure to provide the following details:
Web3Auth PnP Web SDK

const chainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: “0xA869”, // hex of 43113
rpcTarget: “https://api.avax-test.network/ext/bc/C/rpc”,
// Avoid using public rpcTarget in production.
// Use services like Infura
displayName: “Avalanche C-Chain Testnet”,
blockExplorerUrl: “Explorer | Avalanche”,
ticker: “AVAX”,
tickerName: “AVAX”,
logo: “https://cryptologos.cc/logos/avalanche-avax-logo.png”,
};

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

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

useEffect(() => {
const init = async () => {
try {
const web3authInstance = new Web3Auth(web3AuthOptions);
setWeb3auth(web3authInstance);
await web3authInstance.initModal();
} catch (error) {
console.error(“Error initializing Web3Auth:”, error);
}
};
init();
}, []);

Also, kindly provide the Web3Auth initialization and login code snippet below. This will help us better understand your issue and provide you with the necessary assistance.

2

Hi Mahesh,

Thank you for providing detailed information about the issue you’re facing! It looks like you’re working with the Web3Auth PnP Web SDK in a React environment. You’ve mentioned that the “Connect with wallet” button isn’t appearing in the modal, and you’ve included the SDK version (9.7.0), platform, and browser console screenshot—great start!

To troubleshoot this further, could you please verify the following:

  1. Initialization Check: Ensure that web3authInstance.initModal() is correctly initializing. Any errors in the console related to this might be causing the button not to show.
  2. Dependencies: Double-check your package.json to ensure all dependencies specific to Web3Auth SDK are resolved and up-to-date.
  3. Console Errors: Review any errors in the console that might provide more insight.

Additionally, here are some steps you can try:

  • Modal Configuration: Ensure that all modal-related configurations are set correctly. You can check the Web3Auth Documentation to ensure that everything aligns with your current setup.
  • Network Check: Verify that there’s a stable connection to your specified rpcTarget.

If you’ve confirmed these and the issue persists, please provide your complete Web3Auth initialization and login code snippet. This will help in diagnosing the issue more effectively!

Feel free to check out similar issues on the Web3Auth Community Forum as well.

Let me know if you need further assistance! :blush:

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.

Additionally, we would recommend you to join our biweekly Office Hours to get this resolved even faster. Web3Auth Developer Office Hours

3

@w3abot Modal configuration documentation link you share is giving 404 Not found. Can you please check if link is correct?

There are no errors in console.

Login code snippet below
const login = async () => {
// IMP START - Login
const web3authProvider = await web3auth.connect();
// IMP END - Login
setProvider(web3authProvider);
if (web3auth.connected) {
setLoggedIn(true);
}
};

Thanks

4

Hey @maheshvemula40

Please add the Default EVM Adapter in order to view the external wallets: Default EVM Adapter | Documentation | Web3Auth

You can also refer to our quick start here: Integration Builder | Web3Auth