Opens Metamask but doesn't prompt to connect and doesn't connect

[php4fan]

I have deployed a copy of the demo folder, with only these changes to sample.js:
https://editor.mergely.com/6pqTzASK/

I've tried it in Chrome on my Android phone where I have Metamask installed.

1. I click on "Connect",
2. then, under "Select your wallet", I click "WalletConnect" (the only one available, as expected),
3. then in the WalletConnect popup I click "connect"
4. in Android's "Choose Activity" modal (offering MetaMask and Chrome as options) I choose MetaMask

This opens MetaMask, but does not prompt me to connect. It just shows the main screen.

So then I go back to Chrome, where instead of the demo page I find a blank page that has been opened in a new tab. I close that to go back to the original demo, where the WalletConnect popup is still open.
If I reload the page, I restart from scratch and the result is always the same.

This is a variation of similar issues that I've found in every single WalletConnect demo that I've tried, including:
WalletConnect/walletconnect-example-dapp#93
WalletConnect/web3modal-vanilla-js-example#35

There is a significant difference wrt those however: with your demo, every time I reload the page and restart from scratch I experience the exact same behavior 100% consistently. With the others, well, you can see the details in the linked issues if you want, there are erratic variations in behavior.

[php4fan]

By remotely debugging the device, there's this error in the console the moment the WalletConnect popup shows up:

walletconnect_1.7.1.min.js:8 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'importKey')
    at o (walletconnect_1.7.1.min.js:8:75490)
    at s (walletconnect_1.7.1.min.js:8:75704)
    at Object.i (walletconnect_1.7.1.min.js:14:25717)
    at Module.m (walletconnect_1.7.1.min.js:44:157647)
    at async e.default._encrypt (walletconnect_1.7.1.min.js:44:155660)
    at async e.default._sendRequest (walletconnect_1.7.1.min.js:44:150319)
o @ walletconnect_1.7.1.min.js:8
s @ walletconnect_1.7.1.min.js:8
i @ walletconnect_1.7.1.min.js:14
m @ walletconnect_1.7.1.min.js:44
await in m (async)
_sendSessionRequest @ walletconnect_1.7.1.min.js:44
createSession @ walletconnect_1.7.1.min.js:44
await in createSession (async)
(anonymous) @ walletconnect_1.7.1.min.js:22
getWalletConnector @ walletconnect_1.7.1.min.js:22
(anonymous) @ walletconnect_1.7.1.min.js:22
(anonymous) @ walletconnect_1.7.1.min.js:37
f @ walletconnect_1.7.1.min.js:37
enable @ walletconnect_1.7.1.min.js:22
(anonymous) @ KV.latest.min.js:31
enable @ KV.latest.min.js:30
KV.wallet.enable @ KV.latest.min.js:39
d @ KV.WalletUIHandler.latest.min.js:9

Obviously there must be a bug in WalletConnect itself, whether or not it's triggered by a bug in your code, because they are reading a property on an undefined variable without checking...

[php4fan]

Ok my bad, I was opening my page over plain http instead of https.

Wel, not entirely my bad, rather a bug in WalletConnect that fails to check for that and throw a sensible error message stating what is wrong, but not a bug in your demo anyway.

[php4fan]

Actually, I can reproduce the issue also with https.

It's not systematic. Sometimes it happens, sometimes not, randomly.