MetaMask / MetaMask/metamask-sdk
[Bug]: MetaMask Wallet Permission Request Not Working on Mobile
- Dominant language
- TypeScript
- Stars
- 338
- Forks
- 260
- PR merge metrics
- No merged PRs in 30d
Description
### SDK
Web
### Provide environment information
WEB MOBILE
### MetaMask SDK Version
https://c0f4f41c-2f55-4863-921b-sdk-docs.github.io/cdn/metamask-sdk.js
### MetaMask Mobile app Version
https://c0f4f41c-2f55-4863-921b-sdk-docs.github.io/cdn/metamask-sdk.js
### What browser are you using? (if relevant)
_No response_
### How are you deploying your application? (if relevant)
_No response_
### Describe the Bug
I created the following index.html file to request MetaMask wallet permission, but it does not work on mobile browsers.
``
MetaMask Test
Connect
ADD ETHEREUM CHAIN
const sdk = new MetaMaskSDK.MetaMaskSDK({
logging: {
developerMode: true,
},
dappMetadata: {
name: "Example Pure JS Dapp",
},
});
let provider;
function connect() {
sdk.connect()
.then((res) => {
provider = sdk.getProvider();
console.log("Connected:", res);
})
.catch((e) => console.log('request accounts ERR', e));
}
function addEthereumChain() {
if (!provider) {
console.log('Provider is not available. Please connect first.');
return;
}
provider.request({
method: 'wallet_addEthereumChain',
params: [{
chainId: '0x89',
chainName: 'Polygon',
blockExplorerUrls: ['https://polygonscan.com'],
nativeCurrency: { symbol: 'POL', decimals: 18 },
rpcUrls: ['https://polygon-rpc.com/'],
}],
})
.then((res) => console.log('add', res))
.catch((e) => console.log('ADD ERR', e));
}
``
### Expected Behavior
MetaMask does not open on mobile browsers
When calling sdk.connect(), the MetaMask wallet connection prompt does not appear.
provider is not set, which prevents addEthereumChain() from working properly.
Works fine on desktop browsers
When running the same code on a desktop browser, the MetaMask wallet connection request works as expected.
Tried solutions:
Tested on different mobile browsers (Chrome, Firefox)
Tried running the code inside the MetaMask mobile app browser
Called sdk.getProvider() before sdk.connect()
Questions:
Why does sdk.connect() not work on mobile?
How can I properly request MetaMask wallet permissions on mobile?
### Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster
_No response_
Contributor guide
Research direction
Start with the index.html reproduction and trace sdk.connect(), sdk.getProvider(), and provider.request() across desktop and mobile browsers. Check why the mobile connection prompt is absent and provider remains unset; done means mobile connection succeeds and wallet_addEthereumChain() can run afterward.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- mobile-dev, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100