MetaMask detect connection does not detect my mobile MetaMask App

[Mysth]

const detectProv = async () => {
        const provider = await detectEthereumProvider()
        let web3 = new Web3(provider)
        let chainID = await web3.eth.getChainId()
        window.alert(chainID)

        if (window.ethereum) {
            handleEthereum();
        } else {
            window.addEventListener('ethereum#initialized', handleEthereum, {
                once: true,
            });

            // If the event is not dispatched by the end of the timeout,
            // the user probably doesn't have MetaMask installed.
            setTimeout(handleEthereum, 3000); // 3 seconds
        }

        function handleEthereum() {
            const { ethereum } = window;
            if (ethereum && ethereum.isMetaMask) {
                console.log('Ethereum successfully detected!');
                window.alert("detected")
                // Access the decentralized web!
            } else {
                console.log('Please install MetaMask!');
            }
        }
    }

I try to detect my MetaMask application as the provider via a web-site using detect-provider library. In the desktop, it works fine but when I try to detect the provider using the same website and connect it to via my phone, it does not detect any provider. Where am I wrong?

[mcmire]

Hi @Mysth, sorry to hear about this. What do you mean you try to connect to it via your phone?

[Mysth]

Hi @mcmire, I want to detect the provider via the phone by connecting my dApp via browser yet I cannot detect it. I want to detect any disconnection or session ends dynamically even if the opened tab or browser is closed. Yet, I cannot detect it.

[BiLosxD]

Hi! Same issue here.

[BiLosxD]

Hi! Same issue here.

[vildantursic]

Could it be related to lib version? Since i have same issue

[mcmire]

@Mysth When you say "browser", do you mean the browser inside of MetaMask, or is it outside?

@BiLosxD and @vildantursic When you say you have the "same issue", what issue do you mean exactly? Are you visiting your dapp within the browser inside of MetaMask or outside?

[BiLosxD]

Hi @mcmire!

Visiting the MetaMask outside.

[mcmire]

@BiLosxD Cool. The tl;dr here is that this won't work — you need to visit your dapp inside MetaMask. For a longer explanation, please read: #38 (comment)

[spellet]

Hello guys, I have the same problem with metamask app on mobile. I'm in the app, spent hours testing but nothing... window.ethereum still undefined.

the event is never called

window.addEventListener("ethereum#initialized", function(event) { alert('be or not 2 be'); },{once: true});

and the provider timeout at 30sec, nothing changes always undefined

 this.provider = await detectEthereumProvider({
        'timeout':30000
  })

I thought maybe metamask changed something?

I am with a local ip, in http, containing the sslip.io and port, I tested online with an ssl and https... still nothing undefined

Someone would have any idea? PLZZZ :)

---

Small supplement, I have version 1.2.0, I also tested directly in the body with a setTimeout to see outside of my environment something would happen but nothing always the same ... Undefined ... I go crazy with This stupidity especially that Metamask describes it in his documentation ^^.

Yet with the desktop version, perfect, detection, signature, events, everything is fine but the mobile side seems to me more Tricky ... :)

[mcmire]

@spellet If you go on CodeSandbox, reproduce this issue there, and give us a link to your sandbox so that we can try it out too, that would help us a lot. Otherwise it's hard to say exactly why you'd be getting this error.

[antonio-ivanovski]

Having the same problem, the detectEthereumProvider from '@metamask/detect-provider' doesn't work when using Mobile MetaMask (browser).

@mcmire here is minimal CodeSandbox to test it out https://codesandbox.io/s/clever-wave-z59g1u

It works on Firefox+Metamask extension. Doesn't work on MetaMask mobile

[mcmire]

@ToTeTo What happens when you go directly to that URL, https://z59g1u.csb.app? For me, for some reason, opening the CodeSandbox didn't work in MetaMask mobile, but when I went to the deployed URL directly I got a "Connect to this site?" popup.

[PureNukage]

I assume the solutions are either to continue to enhance the MetaMask Mobile Browser (which seems funny to me considering how many browsers already exists) and require that all Mobile dApps use that (a horrible UX) OR to find a way to detect and communicate to installed Mobile apps via Browser-based app logic, which is asking for quite a lot.

[mcmire]

Well, we haven't been able to reproduce any example of not being to use this library from within the mobile app yet. If we can do that then we can focus on solutions! As I alluded to above a codesandbox is the best way for us to do that as it gives us a URL we can go to directly within the mobile app to test.

[PureNukage]

I have an HTML5 project that connects to MetaMask in Chrome on Desktop just fine, it does not connect to MetaMask on Android Mobile using Chrome (as expected) and the HTML5 project does not launch at all in the MetaMask Browser on Android (a fun surprise)

(insert Scooby-Doo hallway chase gag as a metaphor for this apps development)