[SOLVED] Moralis Wallet connect not working with mobile apps

Moralis General
#1

Following moralis connection examples, no problem with metamask, but when I use wallet connect as provider, the qr is shown, but when I use the mobile app to catch it, I get an error (white page in mobile app, in this case, trust)

Also, if I go to the mobile app again, invalid URI error appears in address
You can see the content here: https://coconut-games.com/desarrollo/moralis/

Any suggestions?

#2

it doesn’t work how it should work.
can you also post your code?

#3

Sure!

I did it following this tutorial, using the code in description (github) as base:

Authenticate Users With WalletConnect (Only Few Lines Of Code) - Ethereum Web3 Programming - YouTube

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
  <script src="https://github.com/WalletConnect/walletconnect-monorepo/releases/download/1.4.1/web3-provider.min.js"></script>
  <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
  <link rel="stylesheet" href="style.css" />

</head>
<body>
  
  <header>
    <h1 class="title">Moralis x WalletConnect</h1>
    <p id="subheader"></p>
  </header>

  <main>
    <section class="buttons">
      <button id="btn-auth">Login</button>
      <button id="btn-logout">Logout</button>
      <button id="btn-enable">Enable web3</button>
      <button id="btn-call">Test sign call</button>
    </section>
    <section class="result" id="result"></section>
  </main>

  <!-- scripts -->
  <script src="./main.js"></script>
</body>
</html>```

and main.js (excluding serverurl and appid)

/* Moralis init code */

const serverUrl = "******************************"; // My code here

const appId = "***************************************"; // My code here

Moralis.start({ serverUrl, appId });

const authButton = document.getElementById('btn-auth');

const enableButton = document.getElementById('btn-enable');

const logoutButton = document.getElementById('btn-logout');

const callButton = document.getElementById('btn-call');

const subheader = document.getElementById('subheader');

const resultBox = document.getElementById('result');

let user;

let web3;

let result = '';

const provider = 'walletconnect';

function renderApp() {

  user = Moralis.User.current();

  if (user) {

    authButton.style.display = 'none';

    logoutButton.style.display = 'inline-block';

    subheader.innerText = `Welcome ${user.get('username')}`;

    if (web3) {

      callButton.style.display = 'inline-block';

      enableButton.style.display = 'none';

    } else {

      callButton.style.display = 'none';

      enableButton.style.display = 'inline-block';

    }

  } else {

    authButton.style.display = 'inline-block';

    callButton.style.display = 'none';

    logoutButton.style.display = 'none';

    subheader.innerText = '';

    enableButton.style.display = 'none';

  }

  resultBox.innerText = result;

}

async function authenticate() {

  try {

    let web3;

    if (provider == 'walletconnect') {

      const user = await Moralis.authenticate({ provider: provider});

      web3 = await Moralis.enable({ provider });

    } else {

      const user = await Moralis.authenticate();

      web3 = await Moralis.enable();

    }

  } catch (error) {

    console.log('authenticate failed', error);

  }

  renderApp();

}

async function logout() {

  try {

    await Moralis.User.logOut();

  } catch (error) {

    console.log('logOut failed', error);

  }

  result = '';

  renderApp();

}

async function testCall() {

  try {

    result = await web3.eth.personal.sign('Hello world', user.get('ethAddress'));

  } catch (error) {

    console.log('testCall failed', error);

  }

  renderApp();

}

async function enableWeb3() {

  try {

    web3 = await Moralis.enableWeb3({ provider });

  } catch (error) {

    console.log('testCall failed', error);

  }

  renderApp();

}

authButton.onclick = authenticate;

logoutButton.onclick = logout;

callButton.onclick = testCall;

enableButton.onclick = enableWeb3;

renderApp();
#4

you could look here: https://github.com/MoralisWeb3/demo-apps/tree/main/moralis-vanilla-walletconnect

at a first look it seems that you are using a older version of wallet connect

#5

Thanks! I take a look to the link.
I´ll write back after testing it. Thanks!

#6

It’s works like a charm. Thank you so much!

1 Like