MetaMask / MetaMask/metamask-sdk

[Bug]: MetaMask Wallet Permission Request Not Working on Mobile

Open
#1,211 1 comment 1 reaction 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.