No waiting after connection for signing request with walletconnect on mobile

Moralis General
#1

After connection request approved, it moves back to application page. It does not waits for wallet signatures on wallet screen. I have tested in trust wallet and metamask both in mobile devices. User need to go back to wallet screen by minimising the current screen and sign message manually. It breaks the flow of user and it’s annoying. I am posting a video for better understanding. Is there any way to make this happen that connect and sign done on wallet and after return to application screen. If there is any help will be appreciated.

here is the sample code

htmt file here

<!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>Wallet-Connect</title>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
    <script src="https://github.com/WalletConnect/walletconnect-monorepo/releases/download/1.7.1/web3-provider.min.js"></script>
</head>
<body>
    <h1 class="title">WalletConnect Authentication</h1>

    <button class="button" id="btn-login">Login</button>
    <button class="button" id="btn-logout">Logout</button>

    <script type="text/javascript" src="./main.js"></script>
    <!-- <link rel="stylesheet" type="text/css" href="style.css" /> -->
</body>
</html>

js file here*****

// Moralis Initialisation Code

const serverUrl = "https://t15nrxcr1twb.usemoralis.com:2053/server";
const appId = "J3VGR********************************************RFME";
Moralis.start({ serverUrl, appId});

// User Authentication

async function login () {
    let user = Moralis.User.current();
    if (!user) {
        user = await Moralis.authenticate({
            signingMessage: "Log in using WalletConnect",
            provider: "walletconnect",
            chainId: "80001"
        })
        .then (function (user){
            console.log("Logged in User:", user);
            document.getElementById("btn-login").innerHTML = user.get("ethAddress");
        })
        .catch(function (error) {
            console.log(error);
        });
    }
}

async function logOut() {
    await moralis.User.logOut();
    console.log("logged out");
}

document.getElementById("btn-login").onclick = login;
document.getElementById("btn-logout").onclick = logOut;

****See issue here in Video

Issue description video

1 Like
#2

Yes on Android at least, this is the default behaviour. I think it is how the flow works in general when asking for a connection + signing message together. Worth it to try testing without Moralis authentication (prompt for a WalletConnect connection + normal signature request).

#3

They should look upon this feature. Breaks a lot user flow.

#4

Please friend,
Can you post a working code so that I could test and implement into my project. Thanks in advance.

#5

There is a demo here you can look at. The second button implements a different flow to initiate both the WalletConnect connection and the Moralis authentication signature request instead of having to do both manually.

#6

Please can you provide me code. I will be thankful to you.
I have tested but It has also same behaviour. I think there should be only connect or something like that work in on shot and after it should come to the app back.
Update: I have checked your code from inspect elements. Code is same as I am using. I need only wallet connect because user is already logged in. He just need to pay with connection. Need not to authenticate. Thanks for your help. I want if you have code with connects wallet and displays user balance there and send prompt to wallet for approval when user click pay button.

#7

The code is available in the page source for that demo as it’s just vanilla HTML/JavaScript.

If you only want to connect the wallet, then just use Moralis.enableWeb3({ provider: 'walletconnect' });.