[SOLVED] useNativeBalance doesn't work after refresh

Moralis General
#1

useNativeBalance returns correct amount of MATIC after authenticating with Metamask. The problem is that after the user is already authenticated and I refresh the page, the balance becomes undefined. I have the latest moralis and react-moralis.

import Container from 'react-bootstrap/Container';
import { useNativeBalance } from "react-moralis";
import ListGroup from 'react-bootstrap/ListGroup';

function Cryptocurrencies() {
  const { data: balance } = useNativeBalance();
      
  console.log(balance);

  return (
    <ListGroup as="ul">
        <ListGroup.Item as="li" active>
            {balance.formatted}
        </ListGroup.Item>
    </ListGroup>
  );
}

export default Cryptocurrencies;
#2

try to use useEffect, where you check if isInitialized is set

#3

isInitialized returns true

#4

I don’t see useEffect in that code
the issue could be related to the fact that the user object it not initialised at the time, you could try to print current user address

#5 
import Container from 'react-bootstrap/Container';
import { useNativeBalance, useMoralis } from "react-moralis";
import ListGroup from 'react-bootstrap/ListGroup';
import { useEffect } from 'react';

function Cryptocurrencies() {
  const { isInitialized, user } = useMoralis();
  const { getBalances, data: balance } = useNativeBalance();

  useEffect(() => {
    getBalances();
    console.log(user.get("ethAddress"));
  }, [isInitialized]);

  return (
    <ListGroup as="ul">
        <ListGroup.Item as="li" active>
            {balance.formatted}
        </ListGroup.Item>
    </ListGroup>
  );
}

export default Cryptocurrencies;

console.log returns correct user address. balance remains undefined.

#6

isInitializled it not checked here, you can check it in an if

#7

you can also use the address parameter for useNativeBalance

#8

After adding chain: “mumbai” in useNativeBalance it does return balance, but balance.formatted is still null. balance looks like this: {balance: ‘200000000000000000’, formatted: null}. I know I could convert the balance from wei, but I want it to work in a clean way. There has to be a reason why it works after authenticating but stops working after refresh.

#9

Another problem with this solution is that now it’s going to work only on Mumbai, not any other chain.

#10

try to look in network tab in the browser to see what request is made as parameters and what response is received

#11

It should work on other chains too. So far it’s one of the Supported Chains. You can give example of such chain that doesn’t work.

As @cryptokid mentioned, you should check if isInitialized and isAuthenticated before checking for the balance. If no chain is passed as the param, the default chain is eth

#12 
useEffect(() => {
    if (isInitialized && isAuthenticated) {
        getBalances();
    }
  }, [isInitialized, isAuthenticated]);

This still returns undefined.

If no chain is passed as the param, the default chain is eth

What you’re saying here do not match what the react-moralis documentation says:

  • chain (optional): The blockchain to get data from. Valid values are listed on the intro page in the Transactions and Balances section. Default value: current chain.
#13

The docs is right. Was using the api way.

You can try this way to be sure if it still returns undefined

      getBalances({
        onSuccess: (res) => console.log(res),
      });
#14

For the people who struggle with this in the future: it turns out that in react-moralis after you authenticate, the web3 is enabled automatically but after you refresh the page, even tho you’re still logged in, the web3 does not turn on automatically and you need to do it like this:

const { isWeb3Enabled, enableWeb3 } = useMoralis();

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

This issue is solved, thanks @cryptokid & @qudusayo for help.

1 Like