WalletConnect Modal Close throws error

Technical Issue Reporting
#1 
(anonymous function)
src/hooks/useMoralis/_useMoralisWeb3.ts:51
  48 |     onSuccess(currentWeb3);
  49 |   }
  50 | } catch (error) {
> 51 |   setEnableWeb3Error(error);
     | ^  52 |   if (throwOnError) {
  53 |     throw error;
  54 |   }![Screenshot 2021-11-12 at 12.37.33|690x341]

Basically, I’m trying to get WalletConnect login/logout functionality working is react, pure dapp without email login.

The standard authenticate({provider: ‘walletconnect’}) isn’t working right, so I’m using enableWeb3

I’m using the react demo app starter

Steps to reproduce:

git clone https://github.com/MoralisWeb3/demo-apps.git
cd ./demo-apps/moralis-react-app
yarn install

Then replace the App.js with code below
Add your projectID to index.js

import React from "react";
import { useMoralis } from "react-moralis";

const App = () => {
  const [connected, setConnected] = React.useState(true)
  const { enableWeb3, isWeb3Enabled, isWeb3EnableLoading, web3EnableError, Moralis } = useMoralis()


  function wc_logout() {
    Moralis.Web3.cleanup()
    setConnected(false)
  }

  function wconnect() {
    try {
      enableWeb3({ provider: 'walletconnect' })
    } catch (error) { console.log(error) }
  }

  if (!isWeb3Enabled || !connected) {
    return (
      <div>
        {web3EnableError && <h1>{web3EnableError}</h1>}
        <button onClick={() => wconnect()} disabled={isWeb3EnableLoading}>Authenticate web3</button>
      </div>
    )
  };


  if (isWeb3Enabled && connected) {
    return (
      <div>
        <h1>Welcome </h1>
        <button onClick={() => wc_logout()}>Logout</button>
      </div>)
  };

};

export default App;

Screenshot 2021-11-12 at 12.37.33
Screenshot 2021-11-12 at 12.37.331936×958 99.8 KB

#2

what problems you have with using this?

#3

Got it working…
App.js

import React, { useState } from "react";
import { useMoralis } from "react-moralis";


const App = () => {
  const { user, authenticate, Moralis } = useMoralis()
  
 const [disconnect, setDisconnect] = useState(true);

  const onLoginW = async () => {
    await authenticate({ provider: "walletconnect" });
  };

  const onLoginM = async () => {
    await authenticate();
  };

  const onLogout = () => {
    Moralis.User.logOut();
    setDisconnect(false)
  };

  if (user && disconnect) {
    return <button onClick={onLogout}>Logout</button>;
  }

  return (
    <>
      <button onClick={onLoginM}>Login Metamask</button>
      <button onClick={onLoginW}>Login WalletConnect</button>
    </>
  );
};

export default App;

When I replace

if (user && disconnect) {

with

 if (isAuthenticated) {

For some reason it doesn’t work anymore

The Modal does not crash anymore on close! Woot woot!