[SOLVED] Walletconnect not working on mobile chrome and safari

Moralis General
#1

Walletconnect not working while initiating from the web site on mobile chrome and safari. I’m not able to connect. Https is enabled. Moreover, on the desktop, there are no problems.

Error is: Connection failed. XMLHttpRequest failed: “Unable to connect to the Parse API”

I tested it using mobile wallets: imToken, Metamask

Also, maybe it is important while I’m initiating walletconnect QR from desktop, and scanning it using wallet on mobile phone I can see id:KX… and H:… for transaction and no error. However, if website is open on mobile, and Im redirected to chosen wallet I see no id and h and Im getting that error.

Code to reproduce:

try {
    let user = await Moralis.authenticate({
      provider: "walletconnect",
    });

    let web3 = await Moralis.enableWeb3({ provider: "walletconnect" });

    // console.log("web3:", web3);

  } catch (error) {
    console.log("authenticate failed", error.message);
  }
#2

Also to note, using desktop safari, Im not able to connect, same error. Maybe someone knows what to do?

#3

what url tries to access when it gives this error?

#4

No url. That authorization code above throw such error while safari mobile/desktop and chrome mobile. No error in chrome desktop

#5

can you look in network tab?

that error looks like the server is not available or the wrong moralis server url is used

#6

I’m building SPA. If im testing it in desktop using chrome there are no errors, but the build versing of a single-page application loaded to the server and fetched using mobile gives such an error. And build SPA gives no error for desktop chrome. How to check what is blocking it?

#7

I don’t know, I’m not familiar with that

#8

Ok, thanks. Maybe someone else faced same issue.

#9

So you have deployed the app and it doesn’t work for mobile/Safari? What is the URL?

Make sure you don’t have a domain whitelisted in your server settings.

#10

Domain doesn’t whitelisted

Yes, mobile/safari doesn’t work. Im able to initiate walletconnect, and then there is redirect to selected wallet and signing and then just nothing and error

this is my boot file loaded at the application start

const Moralis = require("moralis-v1/node");
// const serverUrl = process.env.MORALIS_SERVER_URL;
const serverUrl = "https://jnyyhg2v7gkc.usemoralis.com:2053/server";
const appId = process.env.MORALIS_APP_ID;
Moralis.start({ serverUrl, appId });
export { Moralis };

and this is the only code on the button click

try {
    let user = await Moralis.authenticate({
      provider: "walletconnect",
    });

    let web3 = await Moralis.enableWeb3({ provider: "walletconnect" });

    // console.log("web3:", web3);

  } catch (error) {
    console.log("authenticate failed", error.message);
  }
Walletconnect not working on mobile chrome
#11

this is a live server to see such behavior https://thebillionpage.com/u

#12

WalletConnect works for me for that site on Edge (Android). Can you try another browser, and make sure to go back to your wallet to see if the signature request shows up.

#13

@alex On my server, if you are authenticated, you will see a profile icon and 9 first symbols of your wallet in the top bar. Did you see that using android edge? Please, can any other member try to log in also using mobile device?

Yes, I know, that for walletconnect to authenticate, there are two steps. First, allow it to connect and the second one is a sign&verification confirm. Each step requires to be initiated from the website.

In my test, no mobile browser (brave, safari, chrome) on iPhone worked as expected. I mean, I could initiate walletconnect, and there was signing in, but the transaction showed no id during sign&verification step, and in the end, it gave an error

Is it possible that some sort of apple’s policies not allowing walletconnect to be initiated properly? Or maybe it is possible to pass additional argument to make it work?

#14

you will see a profile icon and 9 first symbols of your wallet in the top bar. Did you see that using android edge?

Yes I see that (in orange). Try authenticating with this basic demo on your iPhone just to make sure it’s not an issue with your app.

#15

@alex thanks, this demo works properly. I need to do a revision of my code

#16

Make sure to do a test with the code in that demo I linked (available in page source) with your own serverUrl and appId to make sure it’s not your Moralis server. Also in your code above, you shouldn’t be using moralis-v1/node with a regular frontend or vanilla JS app - is that what you’re using for https://thebillionpage.com/u?

#17

I will test it with my credentials, thank you. I’m using the quasar framework. And for moralis part, I’m using authentication and other functionality. What should be used instead?

#18

Quite interesting part with timeout in the demo code

#19

You can just use moralis-v1 typically - moralis-v1/node is for Node.js or if you’re needing to use it serverside.

1 Like
#20

@alex Awesome! It was the case. With moralis-v it works