Wallet Connect Errors on deployed site

Moralis General
#1

Hi I have a React front-end that utilizes Wallet Connect as a provider to send ERC-20 tokens.
I am running the setup locally and have a deployed version on AWS amplify.
Locally I am able to connect my trust wallet via wallet connect QR Code.

PROBLEM: When I do the same procedure on the deployed site. I get the following errors.

Screen Shot 2021-10-05 at 12.11.31 AM
Screen Shot 2021-10-05 at 12.11.31 AM2836×1174 475 KB

Having followed the Moralis docs, this is what I have for connecting Trust wallet via wallet connect.

if (!isAuthenticated && screenSize.width < 860)
        {
            return (
                <Button 
                    bg="linear-gradient(to right, #2b56f5 0%, #8224e3 100%);" 
                    loadingText="Connecting" 
                    variant="outline" 
                    onClick={ () => authenticate(
                    {
                        provider: "walletconnect",
                        chainId: 56,
                        mobileLinks:
                        [
                            "metamask",
                            "trust",
                        ],
                        signingMessage:"Welcome to The Official DogeX Migration Portal"
                    }) }>
                        Connect Wallet
                </Button>
            );
        }

Once user isAuthenticated on button click users tokens are sent to a recipient.
this is what that part of the code looks like

 const send = async () =>{

    await Moralis.enable();

    const requestDetails = {
      type: 'erc20',
      amount: balance,
      receiver: recipient.toUpperCase(),
      contract_address: contractAdd,
    }

    console.log(requestDetails);

    await Moralis.transfer(requestDetails).then(
      result => {
        console.log(result);
      }
    ).catch (
      error =>{
        console.log(error)
      }
    )
  }

Github repo : https://github.com/subaiyalShk/web3_auth_moralis/tree/main

#2

From that error it looks like you didn’t properly set the SERVER_URL for Moralis Server in production and you have additional quotes on that server url.

#3

Thank you for pointing that out. it fixed the issue :sweat_smile:
The other problem I am facing is when connecting to Meta mask from mobile devices and switching screens. i get a pop up on Meta mask to connect to the site. I click connect and then I get a notification in Meta mask to go back to the browser. when I navigate back the wallet isn’t connected.

When I don’t switch screens and use two devices (my phone with Meta mask & desktop with the site) everything works fine.

any suggestions on what I am doing wrong ?
deployed site : https://main.d2yxljae5jvq04.amplifyapp.com/

#4

Hi @subaiyalshk

I’ve tested your link and checked the code. Transfers don’t work due the bug.
In your code there is a function:

  const send = async () =>{

    await Moralis.enable();

    const requestDetails = {
      type: 'erc20',
      amount: balance,
      receiver: recipient.toUpperCase(),
      contract_address: contractAdd,
    }

    console.log(requestDetails);

    await Moralis.transfer(requestDetails).then(
      result => {
        console.log(result);
      }
    ).catch (
      error =>{
        console.log(error)
      }
    )
  }

The problem is when you call await Moralis.enable() it will try to get an access to metamask in your browser. For activating the walletconnect provider you need to use await Moralis.enable({provider: "walletconnect"}); (docs)

Also take a look at Send transactions web3 provider WalletConnect

You can try to call a transaction request on demo (github link) I made for you: https://forum-tests.vercel.app/

#5

This is not our problem, this is simply a small error in the minimal working code - in fact, we previously had this in the deployment, however we had to remove it as adding this line bricked TrustWallet + iOS functionality ON TOP of iOS + MetaMask functionality.

#6

I am not saying anything bad about your code. I just explained how Moralis Js SDK works :man_mechanic:

#7

thank you for going out of your way and setting up a repo, test app and providing references to the docs. I went through your code and implemented this section in my app

useEffect(() => {
    if (!isWeb3Enabled && isAuthenticated) {
      enableWeb3({ provider: "walletconnect", chainId: 56 });
      console.log("web3 activated");
    }
  }, [isWeb3Enabled, isAuthenticated]);

unfortunately after adding this portion I was unable to make the transactions. So I have implemented this instead:

React.useEffect(() => {
        const enableit = async () => {
            if(window.localStorage.walletconnect){
                await Moralis.enable({provider: 'walletconnect'});
            }
        }
        enableit()
    },[]);

Now I am able to make transactions and everything works smoothly.
Only issue that still remains is when switching between windows from the frontend app to Metamask/TrustWallet. Here is the deployed site with the latest changes so you can test and give me your thoughts https://main.d2yxljae5jvq04.amplifyapp.com/ try to access this site via Android and IOS. On IOS, when switching between apps, everything seemed fine. Problem occurs on Android for some reason.

open repo: https://github.com/subaiyalShk/web3_auth_moralis/tree/main

Thank you again !!