No balance. Moralis Academy: JS Programming Course

Moralis General
#1

So i can login and logout fine. When i login though theres no balance.

Screenshot (18)_LI
Screenshot (18)_LI3000×2000 662 KB

I have .getTokenBalances({chain:'polygon'}); the part thats cutoff.

#2

Hey @jonkani

All we can see here is an error because of innerHTML. Please always provide your code as a code, we cannot debug your screenshot :sweat_smile:

#3

Sorry about that.

//connect to moralis
/* Moralis init code */
const serverUrl = "";
const appId = "";
Moralis.start({ serverUrl, appId });

const $tokenBalanceTBody = document.querySelector('.js-token-balances');

//CONVERTING FROM WEI USING CUSTOM FUNCTION
const tokenValue = (value,decimals)=>
    (decimals?value/Math.pow(10,decimals):value);

/*const tokenValue = Moralis.Units.FromWei(value, decimals);*/

//Metamask Login
async function login() {
    let user = Moralis.User.current();
    if (!user) {
      user = await Moralis.authenticate();
    }
    console.log("logged in user:", user);
    getStats();
  }
//GET STATS
  async function getStats(){
    const balances = await Moralis.Web3API.account.getTokenBalances({chain:'polygon'});
    console.log(balances);
    $tokenBalanceTBody.innerHTML = balances.map((token,index) => `
    <tr>
        <td>${index+1}</td>
        <td>${token.symbol}</td>
        <td>${tokenValue(token.balance, token.decimals)}</td>
        <td>button</td>
    </tr>
    `).join('');
  }
//LOGOUT
  async function logOut() {
    await Moralis.User.logOut();
    console.log("logged out");
  }

  document.querySelector("#btn-login").addEventListener('click', login);
  document.querySelector("#btn-logout").addEventListener('click', logOut);

/* TODO: Add Moralis Authentication code */
//TOP TOKENS
async function getTop10Tokens(){
    const response = await fetch('https://api.coinpaprika.com/v1/coins');
    const tokens = await response.json();

    return tokens
        .filter(token => token.rank >= 1 && token.rank <= 30)
        .map(token => token.symbol);

}
async function getTickerData(tickerList){
    const response = await fetch('https://api.1inch.exchange/v3.0/137/tokens');
    const tokens = await response.json();
    const tokenList = Object.values(tokens.tokens);

    return tokenList.filter(token => tickerList.includes(token.symbol));
}

getTop10Tokens()
    .then(getTickerData)
    .then(console.log);

heres the error i get

dex.js:28 Uncaught (in promise) TypeError: Cannot set properties of null (setting 'innerHTML')
    at getStats (dex.js:28)
getStats @ dex.js:28
await in getStats (async)
login @ dex.js:22

which is highlighting this area of the code

    <tr>
        <td>${index+1}</td>
        <td>${token.symbol}</td>
        <td>${tokenValue(token.balance, token.decimals)}</td>
        <td>button</td>
    </tr>
    `).join('');
  }