[SOLVED] Does anyone know why web3api function getNativeBalance() is returning Null on local devchain?

wesleyt95 · December 26, 2022, 1:36pm

import React from 'react'
import './Wallet.css'
import { Button } from 'react-bootstrap'
import {useMoralisWeb3Api} from 'react-moralis'



const Wallet = () => {
    const Moraliss = require('moralis')
    const {Web3Api} = useMoralisWeb3Api()
    const web3mm = async () =>{ await Moraliss.enable()}
    const web3wc = async () =>{ await Moraliss.enable({provider: 'walletconnect'})}
    
    
     
    const whichbutton = () => {
        if (window.ethereum._state.accounts > ['']) {
            return(
                <Button variant="danger"  >
                   Disconnect
                </Button>
            )} else {
            return(
                <div>
                <Button className='meta' onClick={web3mm}>Metamask</Button> {    }
                <Button  onClick={web3wc}>WalletConnect</Button>
                </div>
            )
        } 
    }
    
        return(
            <div className="wallet-page">
                <h1 className="main-card-title">Wallet: </h1>
                <div className="walletmaincard">
                   <div className='walletdiv'> 
                    <div className="wallet-card">
                        <h4>Current Wallet: </h4>
                        <ul>
                            <li>Provider: MetaMask </li>
                            <li>Address: #3242342423</li>
//this is the line giving trouble
                            <li>Balance: {async () => { setTimeout(2000); return(<h7>{await Web3Api.account.getNativeBalance()}</h7>)}}</li>
                            <div className="gap-2">
                                <li><Button variant='dark' size='lg'><span>Token Switch</span></Button></li>
                                <li>{whichbutton()}</li>
                            </div>
                        </ul>

                    </div>
                </div>
            </div>
        </div>  
        )
    
}

export default Wallet

cryptokid · September 30, 2021, 7:07am

I don’t know that, I tested this:

import { useMoralisWeb3Api } from "react-moralis";

function App() {
  const Web3Api = useMoralisWeb3Api();

  const x = async () => {
    try {
      const result = await Web3Api.account.getNativeBalance({
        address: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2",
        chain: "eth"
      });
      console.log(result);
    } catch (e) {
      console.log(e);
    }
  };

  return (
    <div>
      <p>
        <button onClick={x}> test button</button>
      </p>
    </div>
  );
}

export default App;

wesleyt95 · September 30, 2021, 7:12am

if you dont put any parameters it automatically uses the current connected metamask right?

cryptokid · September 30, 2021, 7:57am

It looks like this is the code that sets default values for chain an address:

github.com

MoralisWeb3/Moralis-JS-SDK/blob/8f815c12fbccd2fb304254b1117a0235abfb1a1c/src/MoralisWeb3Api.js#L4-L14


function addChainAndUserAddress(options = {}) {
  if (!options.chain) options.chain = 'eth';
  if (options.address) return options;
  const user = ParseUser.current();
  if (user) {
    options.address = user.get('ethAddress');
    return options;
  }
  throw new Error('address or logged in user required');
}

wesleyt95 · September 30, 2021, 7:44am

I don’t want to come off lazy but that looks like an endless maze, how about this from docs.moralis.io:

getNativeBalance

Returns native balance for a specific address (asynchronous).

Options:

chain(optional): The blockchain to get data from. Valid values are listed on the intro page in the Transactions and Balances section. Default value Eth.
address (optional): A user address (i.e. 0x1a2b3x...). If specified, the user attached to the query is ignored and the address will be used instead.
to_block (optional): The block number on which the balances should be checked.
address (required): The address for which the native balance will be checked.

// get mainnet native balance for the current user

const balance = await Moralis.Web3API.account.getNativeBalance();

// get BSC native balance for a given address

const options = { chain: "bsc", address: "0x...", to_block: "1234" };

const balance = await Moralis.Web3API.account.getNativeBalance(options);

cryptokid · September 30, 2021, 7:46am

I don’t understand what you want to say.

cryptokid · September 30, 2021, 7:49am

it looks like uses options.address = user.get('ethAddress');, if that does not work for you then you can set that parameter yourself with the address that is in metamask.

cryptokid · September 30, 2021, 8:22am

Moralis.Web3API.account.getNativeBalance uses default address from current logged in user, but in your case if you don’t want to login/authenticate with MetaMask then you should provide that address as parameter.

wesleyt95 · September 30, 2021, 8:44am

I did that, still nothing… I’m using react-moralis btw

{chain: 'ganache', address: '0xA...'}

cryptokid · September 30, 2021, 8:54am

Ok, you are trying that on local devchain, on local devchain most of web3api functions don’t work, few of them should work but I still have to find out how to call them with local devchain, you can skip this part of using web3api functions with local devchain for now, you can put there an address from a testnet or mainnet with the corresponding chain and it should work fine.

wesleyt95 · September 30, 2021, 9:04am

Still didn’t work, it’ll probably come to me when I wake up, thanks

Yomoo · September 30, 2021, 9:05am

does it return null or error message?

wesleyt95 · September 30, 2021, 9:06am

null, I’m afraid…

Yomoo · September 30, 2021, 4:34pm

Could you share the full request code you have used

wesleyt95 · September 30, 2021, 6:34pm

Here it is, I’ve tried several different ways according to documentation

import React from 'react'
import './Wallet.css'
import { Button } from 'react-bootstrap'
import {useMoralisWeb3Api} from 'react-moralis'



const Wallet = () => {
    const Moralis = require('moralis')
    const Web3Api = useMoralisWeb3Api()
    const web3mm = async () =>{ await Moralis.enable()}
    const web3wc = async () =>{ await Moralis.enable({provider: 'walletconnect'})}
    
    
     
    const whichbutton = () => {
        if (window.ethereum._state.accounts > ['']) {
            return(
                <Button variant="danger"  >
                   Disconnect
                </Button>
            )} else {
            return(
                <div>
                <Button className='meta' onClick={web3mm}>Metamask</Button> {    }
                <Button  onClick={web3wc}>WalletConnect</Button>
                </div>
            )
        } 
    }
    
        return(
            <div className="wallet-page">
                <h1 className="main-card-title">Wallet: </h1>
                <div className="walletmaincard">
                   <div className='walletdiv'> 
                    <div className="wallet-card">
                        <h4>Current Wallet: </h4>
                        <ul>
                            <li>Provider: MetaMask </li>
                            <li>Address: #3242342423</li>
                            <li>Balance: {async () => {  return(<p>{ await Web3Api.account.getNativeBalance({address: '0xAb97Bf09F0F404f9dc271314bb09Dd0f097C990A'})}</p>)}}</li>
                            <div className="gap-2">
                                <li><Button variant='dark' size='lg'><span>Token Switch</span></Button></li>
                                <li>{whichbutton()}</li>
                            </div>
                        </ul>

                    </div>
                </div>
            </div>
        </div>  
        )
    
}

export default Wallet

Yomoo · September 30, 2021, 8:26pm

The problem was in your code only.

I suggest you to make a big refactoring of your code with adding more useEffect, useState hoos and etc. Also you import Moralis not correctly and don’t use its hooks.

Take a look at our react-moralis docs, you can find there a lot of useful stuff

Here is edited code which works nice, but as I said you need to refactor it anyway:

import React, { useEffect, useState } from "react";
import "./Wallet.css";
import { Button } from "react-bootstrap";
import { useMoralisWeb3Api, web3 } from "react-moralis";

const Transactions = () => {
  const [nativeBalance, setNativeBalance] = useState();
  const Web3Api = useMoralisWeb3Api();
  
  const web3mm = async () => await web3.enable();
  const web3wc = async () => await web3.enable({ provider: "walletconnect" });

  const fetchBalance = async () => {
    let result = await Web3Api.account.getNativeBalance({
      address: "0xAb97Bf09F0F404f9dc271314bb09Dd0f097C990A"
    });
    result = result.balance;
    setNativeBalance(result);
  };

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

  const whichbutton = () => {
    if (window.ethereum._state.accounts > [""]) {
      return <Button variant="danger">Disconnect</Button>;
    } else {
      return (
        <div>
          <Button className="meta" onClick={web3mm}>
            Metamask
          </Button>{" "}
          {}
          <Button onClick={web3wc}>WalletConnect</Button>
        </div>
      );
    }
  };

  return (
    <div className="wallet-page">
      <h1 className="main-card-title">Wallet: </h1>
      <div className="walletmaincard">
        <div className="walletdiv">
          <div className="wallet-card">
            <h4>Current Wallet: </h4>
            <ul>
              <li>Provider: MetaMask </li>
              <li>Address: #3242342423</li>
              <li>Balance: {nativeBalance}</li>
              <div className="gap-2">
                <li>
                  <Button variant="dark" size="lg">
                    <span>Token Switch</span>
                  </Button>
                </li>
                <li>{whichbutton()}</li>
              </div>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Transactions;

Feel free to ask any questions

Happy BUIDLing

wesleyt95 · September 30, 2021, 8:46pm

Okay I’m definitely about to try this but another moderator told me not to import web3 because users are logging in with non-crypto first and then they connect wallet once already logged in…Okay I’m definitely about to try this but another moderator told me

Here’s what I have so far and actually none of it is returning:

import React from 'react'
import './Wallet.css'
import { Button } from 'react-bootstrap'
import {useMoralisWeb3Api} from 'react-moralis'



const Wallet = () => {
    const Moralis = require('moralis')
    const Web3Api = useMoralisWeb3Api()
    const web3 = async () =>{ await Moralis.enable()}
    
    
    
    
     
    const whichbutton = () => {
        if (window.ethereum._state.accounts > ['']) {
            return(
                <Button variant="danger"  >
                   Disconnect
                </Button>
            )} else {
            return(
                <div>
                <Button className='meta' onClick={() => {web3()}}>Metamask</Button> 
                </div>
            )
        } 
    }
    
        return(
            <div className="wallet-page">
                <h1 className="main-card-title">Wallet: </h1>
                <div className="walletmaincard">
                   <div className='walletdiv'> 
                    <div className="wallet-card">
                        <h4>Current Wallet: </h4>
                        <ul>
                            <li>Provider: { async () => {return(<p>{await web3.currentProvider}</p>)}} </li>
                            <li>Address: { async () => {return(<p>{ await web3.eth.getAccounts()}</p>)}}</li>
                            <li>Balance: {async () => {  return(<p>{ await Web3Api.account.getNativeBalance({address: '0xAb97Bf09F0F404f9dc271314bb09Dd0f097C990A'})}</p>)}}</li>
                            <div className="gap-2">
                                <li><Button variant='dark' size='lg'><span>Token Switch</span></Button></li>
                                <li>{whichbutton()}</li>
                            </div>
                        </ul>

                    </div>
                </div>
            </div>
        </div>  
        )
    
}

export default Wallet

Yomoo · September 30, 2021, 8:46pm

Yes, that’s true. The code needs better logic.

Yomoo · September 30, 2021, 8:48pm

Don’t use things like this:

<li>Provider: { async () => {return(<p>{await web3.currentProvider}</p>)}} </li>
<li>Address: { async () => {return(<p>{ await web3.eth.getAccounts()}</p>)}}</li>
<li>Balance: {async () => {  return(<p>{ await Web3Api.account.getNativeBalance({address: '0xAb97Bf09F0F404f9dc271314bb09Dd0f097C990A'})}</p>)}}</li>

Yomoo · September 30, 2021, 8:49pm

Check my example above