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

[wizinfantry]

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.

``

<title>MetaMask Test</title> <script src="https://c0f4f41c-2f55-4863-921b-sdk-docs.github.io/cdn/metamask-sdk.js"></script> Connect ADD ETHEREUM CHAIN

<script>
    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));
    }
</script>

``

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