[SOLVED] Cant get Native balance

Technical Issue Reporting
#1

Hi guys,
i try to get native balace on bsc mainnet but didt`t show, token balaces and nft works as well
I really appreciate if some one can help me to fix this ,

native test

source code
index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <!--Head Content-->
        <title>Register Dapps</title>
        <!-- Required meta tags -->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Links -->
        <!-- Make It Pretty Import the Bootstrap stylesheet -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    </head>
    <body>
        <main>
            <div class="container">
             
                <div class="mt-2 mb-2">
                    <input id="order" type="number" class="form-control" placeholder="Input your Order in BNB">
                </div>
                <div class="mt-2 mb-2">
                    <input id="phone" type="text" class="form-control" placeholder="Input your WA or Telegram phone number">
                </div>
                <div class="mt-2 mb-2">
                    <button id="login" class="btn btn-dark" onclick="login();">Connect MetaMask or Trust Wallet</button>
                </div>
                <hr>
                <div class="mt-2 mb-2">
                    <h2>Token Balances</h2>
                    <div id="resultBalances">
                    </div>
                </div>
                <hr>
                <div class="mt-2 mb-2">
                    <h2>Your NFTs Collection</h2>
                    <div id="resultNFT">
                    </div>
                </div>
                <div class="mt-2 mb-2">
                    <h2>Native Balances</h2>
                    <div id="resultNative">
                    </div>
                </div>
                <hr>
               
            </div>
        </main>
    <!-- Scripts -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
        <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
        <script src="static/logic.js"></script>
    </body>
</html>

logic.js

Moralis.initialize("79wvBXO9HFgp9lgbcWAiFuGZeItjiko0QBbphX0y"); //Application ID
Moralis.serverURL = "https://bwjkht45wr6l.grandmoralis.com:2053/server"; //Server URL 

/* Valid values for chain in https://docs.moralis.io/moralis-server/transactions-and-balances/intro */
const chainToQuery = 'bsc'

async function login(){
    Moralis.Web3.authenticate().then(function (user){
        user.set("order", document.getElementById('order').value);
        user.set("phone", document.getElementById('phone').value);
        user.save();
        deactivateControls();
        populate();
    })
}

function deactivateControls(){
    document.getElementById('login').setAttribute("disabled", null);
    document.getElementById('order').setAttribute("disabled", null);
    document.getElementById('phone').setAttribute("disabled", null);
}

async function populate(){
    const balances = await Moralis.Web3API.account.getTokenBalances({chain: chainToQuery}).then(buildTableBalances);
    const nft = await Moralis.Web3API.account.getNFTs({chain: chainToQuery}).then(buildTableNFT);
    const balance = await Moralis.Web3API.account.getNativeBalance({chain: chainToQuery}).then(buildTableNative);
}

function buildTableBalances(data){
    document.getElementById("resultBalances").innerHTML = `<table class="table table-dark table-striped" id="balancesTable">
                                                            </table>`;
    const table = document.getElementById("balancesTable");
    const rowHeader = `<thead>
                            <tr>
                                <th>Token</th>
                                <th>Symbol</th>
                                <th>Balance</th>
                            </tr>
                        </thead>`
    table.innerHTML += rowHeader;
    for (let i=0; i < data.length; i++){
        let row = `<tr>
                        <td>${data[i].name}</td>
                        <td>${data[i].symbol}</td>
                        <td>${data[i].balance/10**18}</td>
                    </tr>`
        table.innerHTML += row
    }
}


function buildTableNFT(_data){
    let data = _data.result;
    document.getElementById("resultNFT").innerHTML = `<table class="table table-dark table-striped" id="nftTable">
                                                            </table>`;
    const table = document.getElementById("nftTable");
    const rowHeader = `<thead>
                            <tr>
                                <th>ID</th>
                                <th>Type</th>
                                <th>Contract</th>
                            </tr>
                        </thead>`
    table.innerHTML += rowHeader;
    for (let i=0; i < data.length; i++){
        let row = `<tr>
                        <td>${data[i].token_id}</td>
                        <td>${data[i].contract_type}</td>
                        <td>${data[i].token_address}</td>
                    </tr>`
        table.innerHTML += row
    }
}

function buildTableNative(data){
    document.getElementById("resultNative").innerHTML = `<table class="table table-dark table-striped" id="balancesTableNative">
                                                            </table>`;
    const table = document.getElementById("balancesTableNative");
    const rowHeader = `<thead>
                            <tr>
                                <th>Balance</th>
                            </tr>
                        </thead>`
    table.innerHTML += rowHeader;
    for (let i=0; i < data.length; i++){
        let row = `<tr>
                        <td>${data[i].balance}</td>
                    </tr>`
        table.innerHTML += row
    }
}
#2

Hey @tranceman

Try this:

function buildTableNative(data){
    document.getElementById("resultNative").innerHTML = `<table class="table table-dark table-striped" id="balancesTableNative">
                                                            </table>`;
    const table = document.getElementById("balancesTableNative");
    const rowHeader = `<thead>
                            <tr>
                                <th>Balance</th>
                            </tr>
                        </thead>`
    table.innerHTML += rowHeader;
        let row = `<tr>
                        <td>${data.result.balance}</td>
                    </tr>`
        table.innerHTML += row
}

Results from getNativeBalance have the {"result":{"balance":"91062148894377737"}} form

#3

sorry, it’s doesn’t work for me, I have followed the script you provided…
on the web that I built, the balance was not detected…
thanks …

image
image1162×458 14.7 KB

#4

you can use there a console.log(data) to see what you have in that variable

#5

if i can console.log(data) i get variable native balance,
but i can’t showing variable to interface…

image

#6

Ok, for native balance you have only one balance, ${data.balance} may work for you
you can try console.log(data.balance)

#7

it’s works

function buildTableNative(data){
    console.log(data);
    document.getElementById("resultNative").innerHTML = `<table class="table table-dark table-striped" id="balancesTableNative">
                                                            </table>`;
    const table = document.getElementById("balancesTableNative");
    const rowHeader = `<thead>
                            <tr>
                                <th>Balance</th>
                            </tr>
                        </thead>`
    table.innerHTML += rowHeader;
        let row = `<tr>
                        <td>${data.balance/10**18}</td>
                    </tr>`
        table.innerHTML += row
}

and result native coin