WalletConnect provider

Moralis General
#1

upgrade moralis module to the last.

add authentiticated option { provider: “walletconnect” }

and get error

TypeError: MWalletConnectProvider.default is not a constructor

How make it worked in react?

#2

Hi,

Can you please elaborate your question.

Please follow these guidelines to post on the forum so that we can assist you better! FAQ - Common Issues & How To Get Help

Please paste your code as much as possible. And also screenshots to provide reference.

Thank you. :slight_smile:

#3

Thank you.
I think Codesandbox will be ok.
to check the problem and help to fix it…

#4

Hi @DmKodOff ,

Did you only try running on the Codesandbox? Codesandbox will not have the providers injected by the plugin wallets.

So, when I ran the react project and opened in my browser, the login functionality worked as expected.

Please do let me know. Looking forward to your response. :slight_smile:

#5

I got a similar error in my local react app. Maybe I did not correct injected the Wallet Connect provider. How do you do it in your project? Can you send screen, or code, please)

#6

@malik Can you make Pull Request to the https://github.com/MoralisWeb3/demo-apps/tree/main/moralis-react-app
to show how correct inject WalletConect provider in react for Moralis. Maybe just add one more button - “login with WalletConnect”. it will be very Apretiated.

1 Like
#7

I am looking into it as we speak. Will get back to you very soon.

#8

Hi @DmKodOff,

Yes, there was an issue with the WalletConnect Provider in the Moralis sdk which caused issues when using it with React.

We have fixed this bug and it will be pushed in 0.0.28 version.

Thank you for supporting and pointing these issues out. Really appreciate it. Have a wonderful day sir. :slight_smile:

1 Like
#9

Hi @malik ,
Thank you for fix it.
Kindly looking forward to upgrading the “moralis-react” module to include the WC provider at auth method, at least…
Do you have any idea when it can happen?

#10

Hi, @malik,

I just create a pull request for react-moralis to add the WalletConnect Provider to authenticate()
Can you check it)

#11

Looking at it right now. Thanks.

#12

Hi @DmKodOff,

[email protected] is published so you can install it directly now.

Until this PR is merged, You can try to achieve it this way –

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Moralis from "moralis";

Moralis.initialize("5yzecM1asSKvvuJeiVr7HrssT3ma4hmLRXIalQZx");
Moralis.serverURL = "https://6l9rj93oy21e.moralis.io:2053/server";

const initialUser = Moralis.User.current();

const App = () => {
  const [user, setUser] = useState(initialUser);
  const onLoginW = async () => {
    //Change made here
    const user = await Moralis.Web3.authenticate({ provider: "walletconnect" });
    setUser(user);
  };

  const onLoginM = async () => {
    const user = await Moralis.authenticate();
    setUser(user);
  };
  const onLogout = () => {
    Moralis.User.logOut();
    setUser(null);
  };
  if (user) {
    return <button onClick={onLogout}>Logout</button>;
  }
  return (
    <>
      <button onClick={onLoginM}>Login Metamask</button>
      <button onClick={onLoginW}>Login WalletConnect</button>
    </>
  );
};

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

This should get you moving with the functionality. :slight_smile:

1 Like
WebpackError: ReferenceError: btoa is not defined
#13

Hi, @malik.

Thank you.

I got the 0.28 already. It works properly. thanks.

I use the react-moralis user provider in the project, but there doesn’t provide any method for setUser in react state, there only setUserData(), but it not will help on it.(.

#14

Could you elaborate more on what you mean. If it’s regarding another issue of react-moralis, you can create another thread as this thread is titled WalletConnect. As always please provide all the information necessary for us to properly evaluate what you’re looking for.

Have a great day. :slight_smile:

#15

You now can use walletconnect with the latest release of react-moralis by providing:
provider:'walletconnect' to the authenticate and/or enable function.

3 Likes
#16

Thank you. It’s worked well.)

3 Likes
#17

Hello sir , I just use your wallet connect code tutorial and clone the files and made this minting website in react https://sleepy-mccarthy-1aec9f.netlify.app/
But the problem is when I connect metamask then after connecting walletconnect automatic opens , every time I have to cancel it then I mint … so can u tell me whats the error in code bcz I find but I m not soo much expert in react js template of wallet connect

import logo from "./MageLogo.jpg";
import React, { useEffect } from "react";
import "./App.css";
import { useMoralis } from "react-moralis";
import { Button, Box, Heading } from "@chakra-ui/react";
import { Container, Center } from "@chakra-ui/react";

const LogoutButton = () => {
  const { logout, isAuthenticating } = useMoralis();

  return (
    <Button
      display={"block"}
      colorScheme="red"
      variant="solid"
      isLoading={isAuthenticating}
      onClick={() => logout()}
      disabled={isAuthenticating}>
      Logout
    </Button>
  );
};

// ---------- APP -------------
function App() {
  const {
    authenticate,
    isWeb3Enabled,
    isAuthenticated,
    user,
    enableWeb3,
    Moralis,
  } = useMoralis();

  async function authWalletConnect() {
    const user = authenticate({
      provider: "walletconnect",
      chainId: 56,
      // mobileLinks: [
      //   "metamask",
      //   "trust",
      //   "rainbow",
      //   "argent",
      //   "imtoken",
      //   "pillar",
      // ],
      signingMessage: "Welcome!",
    });
    console.log(user);
  }

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

  document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "hidden") {
      window.localStorage.removeItem("WALLETCONNECT_DEEPLINK_CHOICE");
    }
  });

  // ----- Authenticate in Metamask---------
  if (!isAuthenticated && !user) {
    console.log(user);
    return (
      <Container maxW="container.lg">
        <Center>
          <img width={500} height={500} src={logo} alt="logo" />
        </Center>
        <br />
        <Center>
          <Heading as="h2" size="3xl" p={10}>
            Wallet authentication
          </Heading>
        </Center>
        <Center>
          <Button
            colorScheme="green"
            size="lg"
            onClick={() => authenticate({ signingMessage: "Hello youtube" })}>
            Sign in using Metamask
          </Button>
        </Center>
        <br />
        <Center>
          <Button
            colorScheme="green"
            size="lg"
            onClick={() => authWalletConnect()}>
            Sign in using Wallet Connect
          </Button>
        </Center>
        <br />
      </Container>
    );
  }

  return (
    <Box display={"block"} p={35} className="App">
      <LogoutButton />
      <Center>
        <img width={500} height={500} src={logo} alt="logo" />
      </Center>

      <Center>
        <Heading as="h2" size="3xl" p={10}>
          Wallet Logged in
        </Heading>
      </Center>
    </Box>
  );
}

export default App;
#18

Hi @Sudhanshusribastava2

I guess a solution with local storage will solve your problem. So you need to set the latest wallet user to connect in local storage and read that info before authenticate/enableWeb3

For react the code will be like this:

useEffect(() => {
            if(window.localStorage.walletconnect){
                enableWeb3({provider: 'walletconnect'});
            } else {
                enableWeb3();
            }
    },[]);