MetaMask SDK popup shows even if i have the extension

Question

I am making a DAPP using React Vite, and i want to switch from using window.ethereum to MMSDK.

Here is my github branch for migrating to MMSDK.

So, what happens is that even if I have the extension it opens the popup when the Submit Button is clicked.

Here are the screenshots for this:

My Extenstion:

If I click Submit:

There are no errors but the popup comes even though I have the extension.

Also, there is a warning when the button is clicked:

That is the main problem, but also if I click Install Metamask Extenstion it does not open the chrome extenstion page; instead it gives this error:

This not working code is also deployed here, if you want to try it on your device.

Here is my submit function:

const handleMethodSubmit = async (methodName, params, stateMutability) => {
        try {
            const method = contract.methods[methodName];
            const provider = MMSDK.getProvider();

            const accounts = await provider.request({
                method: "eth_requestAccounts",
                params: [],
            });
            const account = accounts[0];
            console.log(account);

            if (stateMutability === "view") {
                const result = await method(...params).call({
                    from: account,
                });
                console.log("Method result:", result);
                log("Method result: " + result);
            } else {
                const gasEstimate = await method(...params).estimateGas({
                    from: account,
                });

                const transaction = {
                    from: account,
                    to: contractAddress,
                    data: method(...params).encodeABI(),
                    gas: gasEstimate.toString(),
                    value: "0x0",
                    maxFeePerGas: "0x5F5E100",
                    maxPriorityFeePerGas: "0x5F5E100",
                    chainId: "0xaa36a7",
                };

                const result = await provider.request({
                    method: "eth_sendTransaction",
                    params: [
                        {
                            ...transaction,
                            feeMarketBid: {
                                maxFeePerGas: transaction.maxFeePerGas,
                                maxPriorityFeePerGas:
                                    transaction.maxPriorityFeePerGas,
                            },
                        },
                    ],
                });

                console.log("Transaction receipt:", result);
                log("Transaction receipt: " + result);
            }
        } catch (error) {
            console.error("Error executing method:", error);
            log("Error executing method: " + error);
        }
    };

If you want the full code it is on my github.

At last, I want to mention that on my laptop the test dapp given by MetaMask works well.

PS: Also if you want to checkout my deployed project without MMSDK, it is here.

Answer 1

To anyone who is facing this issue, I posted this question on the MetaMask community and someone helped me there.

So, here is the link to that post.

Hope this helps!