WalletConnect Desktop

Moralis General
#1

Adding walletconnect was pretty easy, big thanks to you guys at Moralis! I’m testing in the live server right now and I can use my phone to scan the QR code for mobile, but when I switch over to desktop it looks like this:

screenshot-127.0.0.1_5500-2021.10.13-13_32_23
screenshot-127.0.0.1_5500-2021.10.13-13_32_23665×561 34.9 KB

is there any way to add it so that metamask shows up as well?

here is the code I am using:

login = async () => {
    const web3 = await Moralis.enable();
    try {
        currentUser = await Moralis.User.current();
        if (!currentUser) {
            currentUser = await Moralis.authenticate({
                provider: "walletconnect",
                chainId: 0x38,
                mobileLinks: [
                    "rainbow",
                    "metamask",
                    "argent",
                    "trust",
                    "imtoken",
                    "pillar",
                ]
            }).then(function (user) {
                console.log(user.get('ethAddress'))
            })
        }
        console.log(currentUser);
        document.getElementById("connectWalletBtn").style.display = "none";
        document.getElementById("connectWalletBtnRt").style.display = "none";
        document.getElementById("BudsRewardsDapp").style.display = "block";
        document.getElementById("logoutBtn").style.display = "block";
        totalRewards();
    } catch (error) {
        console.log(error);
    }
}
#2

Hi @derekryansnzy

WalletConnect supports only these three browser wallets

#3

I guess what I’m trying to do is something like this:

screenshot-app.airnfts.com-2021.10.13-16_05_16
screenshot-app.airnfts.com-2021.10.13-16_05_161858×948 142 KB

So that means I’d probably have to change my frontend buttons so a modal that pops up. Then inside the modal I’d link Metamask and Wallet Connect separately? If that’s the case, can you tell me how I’d modify my code so that I can use Metamask and Wallet Connect together like in the screenshot?

Thanks!

#4

Hi @derekryansnzy

You are right, it’s not a part of walletconnect. You need to create your own code. Sometinhg like:

async function authenticate(provider) {
  await Moralis.authenticate({ provider });
}

<button onClick={() => authenticate()}>Metamask</button>
<button onClick={() => authenticate("walletconnect")}>WalletConnect</button>
#5

Thank you for giving me some kinda guide to follow! I will play with the codes and see what I come up with.

1 Like