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

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;

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

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

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

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

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

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

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

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

I just updated and restarted my server too, still freezing

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

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

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

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

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;

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