[SOLVED] React-Moralis Issue

Moralis General
#1

What changes do we have from react-moralis from 0.2.6 to 1.4.2?
My code is breaking if i am updating the package version?

[SOLVED] Moralis self hosted users api
#2

Hi @IamRohit,

Yes, there might be some breaking changes as well as bug fixes between 0.2.6 and 1.4.2 versions.
If you can share the code which is causing errors, we can guide you to fix it.

You can find the breaking changes list on GitHub. I see that there are some breaking changes in v1.0.0

#3

PRoblem with me is I am self Hosting
My existing project was written when react-moralis was at 0.2.6 version
While self hosting i am getting a client where react-moralis is latest for Authentication section
I have tried updating dependency in my project but then my FE breaks.
What can i do for this problem?

#4

With a self-host server, you need to slightly update your authentication logic.

We use a cloud function called requestMessage which requests a message from the server and use it to sign the signature and verify the wallet. This is what the updated auth code looks like.

const { message } = await Moralis.Cloud.run('requestMessage', {
        address: account,
        chain: parseInt(chainId, 16),
        network: 'evm',
      });

      // Authenticate and login via parse
      await authenticate({
        signingMessage: message,
      });

You can find the full code to handle the authentication under these docs under the react tab.

#5

Errors received :
Uncaught TypeError: Moralis.onAccountsChanged is not a function

Uncaught TypeError: Cannot read properties of null (reading ‘givenProvider’)

#6

react-moralis package useMoralis Hook’s web3 coming as undefined in last vesion it seems.

#7

Can you show your code related to it.

#8
  1. const { web3, Moralis, user } = useMoralis();

was working fine with 0.2.6 since web3 was returned.

  1. Moralis.onAccountsChanged(function (address) {
    setWalletAddress(address[0]);
    });

was also working since Moralis was returning onAccountsChanged method.
I upgraded to 1.4.2
Which other objects can i use to resolve this?

#9

You need to use enableWeb3 to enable and start using web3. Once you run enableWeb3() function you can start to read the web3 value from useMoralis hook

const { enableWeb3 } = useMoralis();

Moralis.onAccountsChanged should work. Before using this try adding an if condition to check if Moralis value is not null. If it is not null then you should be able to access it functions.

#10

Is the following fine?

const { enableWeb3, Moralis, user } = useMoralis();
const web3 = enableWeb3({ privateKey: MORALIS_API_KEY });

Moralis ? Moralis.onAccountsChanged(function (address) {
setWalletAddress(address[0]);
}) : null;

I am getting build issue for the same though

#11

Try like this for using web3 with your existing code.
If we invoke enableWeb3 using useEffect it will get enabled as the application starts and then you can use web3 from useMoralis directly without defining const web3

const { enableWeb3, Moralis, user, web3 } = useMoralis();

useEffect(() => {
    enableWeb3();
  }, []);

And we can actually replace the above code to use account value from useMoralis hook. The account value stores the current account address of the wallet. And if the account is update in the wallet then it also gets updated. So this should replace Moralis.onAccountsChanged event listener code.

const { account } = useMoralis();

Please try the above and let us know if it works.

#12

How do i ensure that web3 gets value though?

#13

The web3 value from useMoralis hook is a state variable so it will be auto-updated when we call enableWeb3 function or when there is an active connection with wallet.

const { web3 } = useMoralis();

We could also create an if condition to check if web3 is not null and in case if it is null we can call enableWeb3 function. But this is mostly not required if we use enableWeb3 through useEffect.

#14

It Worked.
Thank you.

1 Like