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

Moralis General
#21

Your example worked however Iā€™m facing additional problems in my codeā€¦

Ever since I tried to return the address with: let result = await window.ethereum.request({method: ā€˜eth_accountsā€™}) my project has been crashing atleast every 60 seconds (my computer has froze twice too)ā€¦ instead I tried to use: window.ethereum.selectedAddress and that was causing rendering issues as well.

Also my function for returning ā€˜Metamaskā€™ as the provider isnā€™t working even though I followed your example

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

const Wallet = () => {
  const Moralis = require('moralis')
  const web3 = async () =>{ await Moralis.enable()}
  const [nativeBalance, setNativeBalance] = useState();
  const [metamaskButton, setMetamaskButton] = useState(() => {return(<Button className="meta" onClick={web3}>Metamask</Button>)});
  const [nativeAddress, setNativeAddress] = useState('');
  const [nativeProvider, setNativeProvider] = useState('');
  const Web3Api = useMoralisWeb3Api();
  

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

  const fetchAddress = async () => {
    if (window.ethereum._state.accounts > [""]) {
    let result = await window.ethereum.request({method: 'eth_accounts'});
    setNativeAddress(result);
  }};

  const fetchProvide =  () => {
    if (window.ethereum.isMetamask) {
    let result = 'MetaMask';
    setNativeProvider(result);
  }};

  const whichbutton = () => {
    if (window.ethereum._state.accounts > [""]) {
        setMetamaskButton(() =>{return(<Button variant="danger">Disconnect</Button>)})
    } 
  };
  useEffect(() => {
    whichbutton();
    fetchBalance();
    fetchAddress();
    fetchProvide()
  });



  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: {nativeProvider} </li>
              <li><div className='addydiv'><div className='yaya'>Address: </div><div className='theaddydiv'><i class="fab fa-ethereum" size='xs'></i>{nativeAddress}</div></div></li>
              <li>Balance: {nativeBalance}</li>
              <div className="gap-2">
                <li>
                  <Button variant="dark" size="lg">
                    <span>Token Switch</span>
                  </Button>
                </li>
                <li>{metamaskButton}</li>
              </div>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Wallet;
#22

My browser keeps saying ā€˜waiting for oorfqpis.grandmoralis.comā€™ until it crashes

#23

it looks like oorfqpis.grandmoralis.com does not resolve, can you double check your Moralis Server URL address?

#24

Could it have something to do with not having frpc installed?

#25

Where do you have that oorfqpis.grandmoralis.com in your code?

#26

index.jsā€¦ This is what it looks like

    <MoralisProvider appId='45BaqF58HRAB1mPXlo77qnbP' serverUrl='https://oorfqpisq8bs.grandmoralis.com:2053/server'>
        <App /> 
     </MoralisProvider>
#27

can you double check that 45BaqF58HRAB1mPXlo77qnbP is your Application ID?

#28

I didnā€™t post my actual info but itā€™s definitely correct, I just deleted what was there and copy and pasted from https://admin.moralis.io/servers and ran into the same problems

#29

I just updated and restarted my server too, still freezing

#30

Do you think using useEffect() on Web3Api.account.getNativeBalance() is fetching too much data and causing my site to crash?

#31

I just checked your server logs. It looks like you make ~1000 api calls just in a second

#32

If it doesnā€™t have any dependencies you can specify [] and it will be called only once when the component is rendered

useEffect(() => {
    whichbutton();
    fetchBalance();
    fetchAddress();
    fetchProvide()
  }, []);
1 Like
#35

You can ignore them. No problem, feel free to ask any questions :man_factory_worker:

#36

Okay I have one last question on this component, if I open the console on chrome and type ā€˜window.ethereum.isMetamaskā€™ I get ā€˜trueā€™ returnedā€¦

however this function isnā€™t detecting metamask, its acting as if itā€™s uninstalled:

  const fetchProvide =  () => {
    if (window.ethereum.isMetamask) {
    setNativeProvider('MetaMask');
  } else if (!window.ethereum.isMetamask) {
    setNativeProvider('None Found')
  }
};

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

const Wallet = () => {
  const Web3Api = useMoralisWeb3Api();
  const [metamaskButton, setMetamaskButton] = useState();
  const [nativeBalance, setNativeBalance] = useState();
  const [nativeAddress, setNativeAddress] = useState();
  const [nativeProvider, setNativeProvider] = useState();
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);


  const fetchAddress = async () => {
    if (window.ethereum._state.accounts > [""]) {
    let result = await window.ethereum.request({method: 'eth_accounts'});
    setNativeAddress(result);
  }};

  const fetchProvide =  () => {
    if (window.ethereum.isMetamask) {
    setNativeProvider('MetaMask');
  } else if (!window.ethereum.isMetamask) {
    setNativeProvider('None Found')
  }
};

  useEffect(() => {
    const Moralis = require('moralis')
    const web3mm = async () =>{ await Moralis.enable()}
    const web3wc = async () =>{ await Moralis.enable({provider: 'walletconnect'})}

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

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

    whichbutton();
    fetchBalance();
    fetchAddress();
    fetchProvide();
  }, [Web3Api.account]);



  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: {nativeProvider} </li>
              <li><div className='addydiv'><div className='yaya'>Address: </div><div className='theaddydiv'><i class="fab fa-ethereum" size='xs'></i>{nativeAddress}</div></div></li>
              <li>Balance: {nativeBalance}</li>
              <div className="gap-2">
                <li>
                  <div>
                  <Button variant="dark" size="lg" onClick={handleShow}>
                    <span>Token Switch</span>
                  </Button>
                  <Modal show={show} onHide={handleClose}>
                  <form>
        <Modal.Header >
          <Modal.Title>Switch</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <div className='walletmodal'>
            <div className='currency-selector'>
            <label for="currency-selector" className="currency-selector">Cryptocurrency: </label><br/>
            <select className="currency-selector" name="Currency Selector">
                <option value="eth">Ethereum (ETH) </option>
                <option value="usdc">USD Coin (USDC)</option>
                <option value="wbtc">Wrapped BTC (WBTC) </option>
                <option value="aave">AAVE (AAVE)</option>
                <option value="bnb">Binance (BNB)</option>
                <option value="link">ChainLink Token (LINK)</option>
                <option value="zrx">0x (ZRX)</option>
                <option value="uni">Uniswap (UNI)</option>
                <option value="usdt">Tether USD (USDT)</option>
            </select> <br/>
            </div>
            <div className='switchamount'>
            <label for="send-amount" className="send-amount">Amount: </label> 
            <input type="text" className="send-amount" id="send-amount" placeholder="Enter Amount"/> <br/>
            <i class="fas fa-arrow-down fa-xs"></i><br/>
            </div>

            <div className='currency-selector'>
            <label for="currency-selector" className="currency-selector">Cryptocurrency: </label><br/>
            <select className="currency-selector" name="Currency Selector">
                <option value="eth">Ethereum (ETH) </option>
                <option value="usdc">USD Coin (USDC)</option>
                <option value="wbtc">Wrapped BTC (WBTC) </option>
                <option value="aave">AAVE (AAVE)</option>
                <option value="bnb">Binance (BNB)</option>
                <option value="link">ChainLink Token (LINK)</option>
                <option value="zrx">0x (ZRX)</option>
                <option value="uni">Uniswap (UNI)</option>
                <option value="usdt">Tether USD (USDT)</option>
            </select> <br/>
            </div>
            </div>
            
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="info" onClick={handleClose}>
            Swap!
          </Button>
        </Modal.Footer>
        </form>
      </Modal>
                  </div>
                </li>
                <li>{metamaskButton}</li>
              </div>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Wallet;
#37

Nevermind I forgot a capital M, you can close this threadā€¦ thx again team