Hi, when I have mobile browser and choose Metamask in WalletConnect, it nicely opens the Metamask app. But when I use the dedicated “@web3auth/default-evm-adapter” library to add a “Connect with Metamask” button it does not open mobile metamask. In fact it does nothing because it does not find any injected adapter.
I am using this code. On mobile (like Safari or Edge in iOS) the code does nothing. I was expecting it to open Metamask mobile app, like WalletConnect does.
const adapters = await getInjectedAdapters({ options: web3AuthOptions });
var metamaskAdapter = adapters.find((e) => e.name == "metamask");
if (metamaskAdapter) {
web3auth.configureAdapter(metamaskAdapter);
}else{
const defaultAdapters = await getDefaultExternalAdapters({ options: web3AuthOptions });
metamaskAdapter = defaultAdapters.find((e) => e.name == "metamask");
if (metamaskAdapter) {
web3auth.configureAdapter(metamaskAdapter);
}
}
//metamaskAdapter remains NULL here on mobile. Even though I have Metamask app installed on mobile.
How do I add a “Connect with Metamask” button so it would open the Metamask app?
Hi Silver! Thanks for reaching out with your question about integrating Metamask on mobile using the @web3auth/default-evm-adapter. It looks like you’re encountering an issue where the Metamask adapter isn’t being recognized on mobile devices.
Here’s a possible approach to solve the issue:
Verify Mobile Adapter Compatibility:
Ensure that the Web3Auth adapter you’re using is compatible with mobile browsers. The standard injected metamask adapter might not work as expected on mobile devices since they don’t have an “injected” environment like desktop browsers.
Use WalletConnect Approach:
Since you mentioned WalletConnect successfully opens the Metamask app on mobile, consider using it for mobile environments instead of relying solely on the injected adapter. This requires detecting the platform and choosing the appropriate connection strategy.
Update Web3Auth and Dependencies:
Make sure all your packages (@web3auth/* and others) are up-to-date to benefit from the latest fixes and features.
Unfortunately, direct interaction with installed mobile apps like Metamask isn’t always straightforward due to how mobile environments handle these integrations. Using WalletConnect is often recommended for consistent behavior across mobile platforms.
If you continue facing issues or have more questions, feel free to provide any additional details or clarifications, and we’ll be happy to help further!
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.
I noticed that Web3Auth allows you to open the Metamask app in your mobile browser. You can try it out here in our playground: https://pnp-modal-playground.vercel.app