WalletConnect Provider | mobileLinks filter not working

Moralis General
#1

Using this code on Moralis Latest Update and WalletConnect 1.6.2 seems to break the Desktop wallet selection window.

user = await Moralis.authenticate({
                signingMessage: "Log in to Crypt Rewards Tracker",
                provider: "walletconnect",
                mobileLinks: [
                    "metamask",
                ],
            })

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
<script src="https://github.com/WalletConnect/walletconnect-monorepo/releases/download/1.6.2/web3-provider.min.js"></script>```

![image|690x415](upload://4tEQiGnRbXlIjKvGHD4XoTe6dw2.png) 
It seems to stay like that forever.

Changing WalletConnect to 1.6.6 (latest version) seems to ignore the mobileLinks filter all-together.
![image|690x415](upload://4tEQiGnRbXlIjKvGHD4XoTe6dw2.png)
#2

you started with this code: https://github.com/MoralisWeb3/demo-apps/tree/main/moralis-vanilla-walletconnect ?

#3

No. I used the code in the docs.
https://docs.moralis.io/moralis-server/users/crypto-login#walletconnect

#4

what was the environment where you tested, mobile browser, iOS, android, desktop?
can you all share the full minimal code?

#5

Desktop/Google Chrome Linux

    let user = Moralis.User.current();
    if (!user) {
        user = await Moralis.authenticate({
                signingMessage: "Log in to Crypt Rewards Tracker",
                provider: "walletconnect",
                mobileLinks: [
                    "rainbow",
                    "metamask",
                    "argent",
                    "trust",
                    "imtoken",
                    "pillar",
                ]
            })
            .then(function(user) {
                console.log("logged in user:", user);
                console.log(user.get("ethAddress"));
                window.location.reload();
            })
            .catch(function(error) {
                console.log(error);
            });
    } else {
        initLoggedInUser();
    }
}```
#6

can you post a minimal full html + js code that replicates the problem with being stuck on loading?

#7

Hi @vscorpio

The mobileLinks works only in mobile versions

#8

If the MobileLinks array only shows up on mobile, what’s the code to create a specific set of wallets on Desktop?

It’s a bit counterintuitive. On Desktop, the modal comes up with two options: QR code and “Desktop”. So you click Desktop… and tha’s where… mobile only option show up?

What we are aiming to do is as the docs say, " reduce the number of mobile linking options or customize its order". Out of the box, the WalletConnect boilerplate from the Moralis repo opens up options to connect to a bunch of wallets that do not include Metamask so probably we are all looking for a way to include that. The way the docs are written, it sounds like “to customise the wallets shown, do this:”

      mobileLinks: [
        "rainbow",
        "metamask",
        "argent",
        "trust",
        "imtoken",
        "pillar",
      ]

But if that’s mobile only, why does it remove wallet options for people on Desktop?

I’ve tried it on iOS and the list of filtered wallets shows up as expected. But why, when adding a specific list of wallets for mobile, does it remove all desktop options???

1 Like
#9

I think that usually on desktop someone doesn’t use wallet connect. Maybe you could also identify when the site is on mobile or desktop and pass different parameters to wallet connect.

#10

I’ve seen many people for NFTs ask why a minting site only ever uses Metamask, and why can’t they use Walletconnect etc etc. So Walletconnect is supposed to pop up the modal to prompt you to choose whichever wallet you like. Some people want to mint from ledger on Desktop. It’s a valid use case, instead of a metamask button and a wallet connect button that only functions on mobile, one button for walletconnect that lets people choose MM or whatever other solution they like.

#11

Hey @JimBob

mobileLinks works only on the mobile version. WalletConnect is not a simple modal for selecting wallets. walletconnect and metamask are web3-providers, each of them is used for specific tasks and works a specific way.

#12

Walletconnect on a desktop allows you to choose a big number of different mobile wallets and only 2 injected to the browser wallets

#13

Hmm OK. Thanks for the explanation. You have to admit this is weird though. Why only 2 on desktop? Strange of them to limit it that way. I thought it was similar to a wallet-selection modal. That’s the way it comes off in the all the Moralis vids. “You can use Metamask, OR you can use Walletconnect and choose from these wallets!”

Alright maybe we’ll give up on that idea and just go with Metamask.

1 Like
#14

You can use walletconnect and metamask both, just give users a choice…like on pancakeswap when you connect your wallet you can select a method

#15

Did you guys consider using web3modal instead of walletconnect? Web3modal does exactly this, but again with ONE button, not two connect buttons. Web3modal will pop open and users can elect to use Metamask, or Formatic, or other wallets, OR WalletConnect if they’re on a mobile. So it would improve even further on what you have?
I think one connect button in the UI is cleaner, not a range of them for different scenarios.

#16

I think part of the confusion stems about how the walletconnect/moralis combo is spoken about.
Eg here at 42:20 in the Course
He says, if you just want to just use walletconnect on Desktop and give people a choice of wallets then blah blah"

But now I understand WalletConnect is NOT another version of Web3Modal
Ie, WalletConnect is Mobile Only and DOES NOT give wallet selection options for desktop.

[https://youtu.be/MY4WYoZPr-U?t=2543]
[https://github.com/Web3Modal/web3modal]