# Symbol Amount Action blank? moralis dex project help

Hello everyone

im in the dex part of the javascript program still. im moving right along. i have no errors and everything seems too be working. but symbol amount and action are blank. I have a really dumb question. do i haft too add crypto into metamask too see my balances?

Can you share the code which fills data in place of Symbol Amount Action

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


        <!-- Moralis SDK code -->
        <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
        <script src="https://unpkg.com/moralis@latest/dist/moralis.js"></script>

        <title>Moralis Dex </title>

</head>


<body>
    
    
    

    <h1>MoralisSwap</h1>

    <button id="btn-login">Moralis Login</button>
    <button id="btn-buycrypto">Buy Crypto</button>
    <button id="btn-logout">Logout</button>


    <table>
        <thead>
            <tr>
                <th>#</th>
                <th>Symbol</th>
                <th>Amount</th>
                <th>Action</th>


            </tr>

        </thead>

        <tbody class ="js-token-balances"></tbody>

    </table>


    <script src="./dex.js"></script>

</body>
</html>
// connect to Moralis server

      const serverUrl = "https://hzgprsd3s1da.usemoralis.com:2053/server";
      const appId = "YwMvfUyGm50mRIrKsXsWCwlkPjQxji5zCuVNP3xe";
      Moralis.start({ serverUrl, appId });

      Moralis
          .initPlugins() 
          .then ( () => console.log ('plugins have been initialized ') );

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

      //Converting  from wei  using custom function 
      const tokenValue = (value, decimals) => (decimals ? value / Math.pow(10, decimals): value);

     // add from here down
     async function login() {
      let user = Moralis.User.current();
      if (!user) {
        user = await Moralis.authenticate();
      }
      console.log("logged in user:", user);
    }

    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> ${token.amount}</td>
  <td> ${tokenValue(token.balance, token.decimals)}</td>
  <td>button</td>

</tr>

`).join('');


}

    async function buycrypto () {
      Moralis.Plugins.fiat.buy ();



    }

    async function logOut() {
      await Moralis.User.logOut();
      console.log("logged out");
    }

    document.getElementById("btn-login").onclick = login;
    document.getElementById("btn-buycrypto").onclick =buycrypto;
    document.getElementById("btn-logout").onclick = logOut;



    async function getTop10tokens() {
      const response = await fetch(" https://api.coinpaprika.com/v1/coins ");
      const tokens = await response.json();
    
      let result = tokens
        .filter((token) => token.rank <= 10)
        .map((token) => token.symbol);
    
      return result;
    }
    
    async function gettickerdata(top10Tokens) {
      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) => top10Tokens.includes(token.symbol));
    }
    
    getTop10tokens()
      .then((top10Tokens) => gettickerdata(top10Tokens))
      .then(console.log);

@johnversus this is my current code right now

Here’s a little fix to your getStats() function

async function getStats() {
  const balances = await Moralis.Web3API.account.getTokenBalances({
    chain: "polygon",
  });
  console.log(balances);

  document.querySelector(".js-token-balances").innerHTML += balances
    .map(
      (token, index) => `
    <tr>
      <td> ${index + 1}</td>
      <td> ${token.symbol}</td>
      <td> ${token.amount}</td>
      <td> ${Moralis.Units.FromWei(token.balance, token.decimals)}</td>
      <td>button</td>
    </tr>`
    )
    .join("");
}

Make sure you call getStats() function too somewhere

1 Like

so this is my updated code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


        <!-- Moralis SDK code -->
        <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
        <script src="https://unpkg.com/moralis@latest/dist/moralis.js"></script>

        <title>Moralis Dex </title>
        <link rel="stylesheet" href="style.css">

</head>


<body>
    
    
    

    <h1>MoralisSwap</h1>

    <button id="btn-login">Moralis Login</button>
    <button id="btn-buycrypto">Buy Crypto</button>
    <button id="btn-logout">Logout</button>


    <table>
        <thead>
            <tr>
                <th>#</th>
                <th>Symbol</th>
                <th>Amount</th>
                <th>Action</th>


            </tr>

        </thead>

        <tbody class ="js-token-balances"></tbody>

    </table>

    <form action="#" method="POST" class="exchange-form">
        <div class="form-row">

        <label>


            <span class ="js-from-token"></span>
            Amount:
            <input type ="text" name="from-amount" class="js-from-amount" disabled  />
        </label>

        <div class="js-amount-error error"></div>
        </div>
        <div class="form-row">
            <button type="submit" class="js-submit" disabled > Get Qoute</button>
            <button class="js-cancel" disabled > Cancel</button>
        </div>
        <div class="js qoute-container"></div>
        
    </form>




    <script src="./dex.js"></script>

</body>
</html>
// connect to Moralis server

      const serverUrl = "************************";
      const appId = "*************************";
      Moralis.start({ serverUrl, appId });

      Moralis
          .initPlugins() 
          .then ( () => console.log ('plugins have been initialized ') );

      const $tokenBalanceTBody = document.querySelector('.js-token-balances');
      const $selectedToken =document.querySelector('js-from-token');
      const $amountInput= document.querySelector('.js-form-amount');

      //Converting  from wei  using custom function 
      const tokenValue = (value, decimals) => (decimals ? value / Math.pow(10, decimals): value);

     // add from here down
     async function login() {
      let user = Moralis.User.current();
      if (!user) {
        user = await Moralis.authenticate();
      }
      console.log("logged in user:", user);
    }


    async function swap (event) {
      event.preventDefault();
      $selectedToken.innerText = event.target.dataset.symbol;
      $selectedToken.dataset.address =  event.target.dataset.address;
      $selectedToken.dataset.decimals =  event.target.dataset.decimals;
      $selectedToken.dataset.max =  event.target.dataset.max;
      $amountInput.removeAttribute('disabled');
      $amountInput.value = '';
      document.querySelector('.js-submit').removeAttribute('disabled');
      document.querySelector('.js-cancel').removeAttribute('disabled');
      document.querySelector('.js-qoute.container').innerHTML = '';


    }

    async function getStats() {
      const balances = await Moralis.Web3API.account.getTokenBalances({
        chain: "polygon",
      });
      console.log(balances);
    
      document.querySelector(".js-token-balances").innerHTML += balances
        .map(
          (token, index) => `
        <tr>
          <td> ${index + 1}</td>
          <td> ${token.symbol}</td>
          <td> ${token.amount}</td>
          <td> ${Moralis.Units.FromWei(token.balance, token.decimals)}</td>
          <td>button</td>
        </tr>`
        )
        .join("");
  


for ( let $btn of  $tokenBalanceTBody.querySelectorAll('js-swap')) {
  $btn.addEventListener('click',swap);

}


}

    async function buycrypto () {
      Moralis.Plugins.fiat.buy ();



    }

    async function logOut() {
      await Moralis.User.logOut();
      console.log("logged out");
    }

    document.getElementById("btn-login").onclick = login;
    document.getElementById("btn-buycrypto").onclick =buycrypto;
    document.getElementById("btn-logout").onclick = logOut;



    async function getTop10tokens() {
      const response = await fetch(" https://api.coinpaprika.com/v1/coins ");
      const tokens = await response.json();
    
      let result = tokens
        .filter((token) => token.rank <= 10)
        .map((token) => token.symbol);
    
      return result;
    }
    
    async function gettickerdata(top10Tokens) {
      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) => top10Tokens.includes(token.symbol));
    }
    
    getTop10tokens()
      .then((top10Tokens) => gettickerdata(top10Tokens))
      .then(console.log);

.error {

    color: darkred;
}

is it doing what its supposed too do? its stil coming up blank after i log in

i checked further. the local id is undefined. is that the problem?

I tried with what @qudusayo suggested with my wallet address and it is working. I am able to see the token table
https://jsfiddle.net/y21rwxhz/8/

Make sure you call the function after the wallet login.

// connect to Moralis server

      const serverUrl = "https://hzgprsd3s1da.usemoralis.com:2053/server";
      const appId = "YwMvfUyGm50mRIrKsXsWCwlkPjQxji5zCuVNP3xe";
      Moralis.start({ serverUrl, appId });

      Moralis
          .initPlugins() 
          .then ( () => console.log ('plugins have been initialized ') );

      const $tokenBalanceTBody = document.querySelector('.js-token-balances');
      const $selectedToken =document.querySelector('js-from-token');
      const $amountInput= document.querySelector('.js-frorm-amount');

      //Converting  from wei  using custom function 
      const tokenValue = (value, decimals) => (decimals ? value / Math.pow(10, decimals): value);

     // add from here down
     async function login() {
      let user = Moralis.User.current();
      if (!user) {
        user = await Moralis.authenticate();
      }
      console.log("logged in user:", user);
    }

    async function getStats() {
      const balances = await Moralis.Web3API.account.getTokenBalances({
        chain: "polygon",
      });
      console.log(balances);
    
      document.querySelector(".js-token-balances").innerHTML += balances
        .map(
          (token, index) => `
        <tr>
          <td> ${index + 1}</td>
          <td> ${token.symbol}</td>
          <td> ${token.amount}</td>
          <td> ${Moralis.Units.FromWei(token.balance, token.decimals)}</td>
          <td>button</td>
        </tr>`
        )
        .join("");
    }


    async function swap (event) {
      event.preventDefault();
      $selectedToken.innerText = event.target.dataset.symbol;
      $selectedToken.dataset.address =  event.target.dataset.address;
      $selectedToken.dataset.decimals =  event.target.dataset.decimals;
      $selectedToken.dataset.max =  event.target.dataset.max;
      $amountInput.removeAttribute('disabled');
      $amountInput.value = '';
      document.querySelector('.js-submit').removeAttribute('disabled');
      document.querySelector('.js-cancel').removeAttribute('disabled');
      document.querySelector('.js-qoute.container').innerHTML = '';


    }

    

for ( let $btn of  $tokenBalanceTBody.querySelectorAll('js-swap')) {
  $btn.addEventListener('click',swap);

}




    async function buycrypto () {
      Moralis.Plugins.fiat.buy ();



    }

    async function logOut() {
      await Moralis.User.logOut();
      console.log("logged out");
    }

    document.getElementById("btn-login").onclick = login;
    document.getElementById("btn-buycrypto").onclick =buycrypto;
    document.getElementById("btn-logout").onclick = logOut;



    async function getTop10tokens() {
      const response = await fetch(" https://api.coinpaprika.com/v1/coins ");
      const tokens = await response.json();
    
      let result = tokens
        .filter((token) => token.rank <= 10)
        .map((token) => token.symbol);
    
      return result;
    }
    
    async function gettickerdata(top10Tokens) {
      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) => top10Tokens.includes(token.symbol));
    }
    
    getTop10tokens()
      .then((top10Tokens) => gettickerdata(top10Tokens))
      .then(console.log);
      getStats();

would it be like this?

i still cant seem too get it too work. i have no coins in my wallet

Ohh ok you have no tokens in your wallet? I think this is why it is blank.

Try adding an address parameter (address with any tokens) in getTokenBalances and see if you can see data.

    
    // connect to Moralis server

      const serverUrl = "https://hzgprsd3s1da.usemoralis.com:2053/server";
      const appId = "YwMvfUyGm50mRIrKsXsWCwlkPjQxji5zCuVNP3xe";
      Moralis.start({ serverUrl, appId });

      Moralis
          .initPlugins() 
          .then ( () => console.log ('plugins have been initialized ') );

      const $tokenBalanceTBody = document.querySelector('.js-token-balances');
      const $selectedToken =document.querySelector('js-from-token');
      const $amountInput= document.querySelector('.js-frorm-amount');

      //Converting  from wei  using custom function 
      const tokenValue = (value, decimals) => (decimals ? value / Math.pow(10, decimals): value);

     // add from here down
     async function login() {
      let user = Moralis.User.current();
      if (!user) {
        user = await Moralis.authenticate();
      }
      console.log("logged in user:", user);
    }

    async function getStats() {
      const balances = await Moralis.Web3API.account.getTokenBalances({
        chain: "polygon",
        address:"0xA22d6115e35Fee3E8Ef1112A634C1cF5EeFa640d"
      });
      console.log(balances);
    
      document.querySelector(".js-token-balances").innerHTML += balances
        .map(
          (token, index) => `
        <tr>
          <td> ${index + 1}</td>
          <td> ${token.symbol}</td>
          <td> ${token.amount}</td>
          <td> ${Moralis.Units.FromWei(token.balance, token.decimals)}</td>
          <td>button</td>
        </tr>`
        )
        .join("");
    }


    async function swap (event) {
      event.preventDefault();
      $selectedToken.innerText = event.target.dataset.symbol;
      $selectedToken.dataset.address =  event.target.dataset.address;
      $selectedToken.dataset.decimals =  event.target.dataset.decimals;
      $selectedToken.dataset.max =  event.target.dataset.max;
      $amountInput.removeAttribute('disabled');
      $amountInput.value = '';
      document.querySelector('.js-submit').removeAttribute('disabled');
      document.querySelector('.js-cancel').removeAttribute('disabled');
      document.querySelector('.js-qoute.container').innerHTML = '';


    }

    

for ( let $btn of  $tokenBalanceTBody.querySelectorAll('js-swap')) {
  $btn.addEventListener('click',swap);

}




    async function buycrypto () {
      Moralis.Plugins.fiat.buy ();



    }

    async function logOut() {
      await Moralis.User.logOut();
      console.log("logged out");
    }

    document.getElementById("btn-login").onclick = login;
    document.getElementById("btn-buycrypto").onclick =buycrypto;
    document.getElementById("btn-logout").onclick = logOut;



    async function getTop10tokens() {
      const response = await fetch(" https://api.coinpaprika.com/v1/coins ");
      const tokens = await response.json();
    
      let result = tokens
        .filter((token) => token.rank <= 10)
        .map((token) => token.symbol);
    
      return result;
    }
    
    async function gettickerdata(top10Tokens) {
      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) => top10Tokens.includes(token.symbol));
    }
    
    getTop10tokens()
      .then((top10Tokens) => gettickerdata(top10Tokens))
      .then(console.log);

yes i have no tokens in my wallet right now. i added the address like you suggested though and its still blank i guess. maybe i need too add a token

this is my current wallet

Try with this address.
0x0D0707963952f2fBA59dD06f2b425ace40b492Fe

And also call the getStats() function after log in. You can call it in broswer console directly

can you show me a example on how too call the function?

// add from here down
     async function login() {
      let user = Moralis.User.current();
      if (!user) {
        user = await Moralis.authenticate();
      }
      console.log("logged in user:", user);
    }

    async function getStats() {
      const balances = await Moralis.Web3API.account.getTokenBalances({
        chain: "polygon",
        address:"0x0D0707963952f2fBA59dD06f2b425ace40b492Fe"
      });
      console.log(balances);
    
      document.querySelector(".js-token-balances").innerHTML += balances
        .map(
          (token, index) => `
        <tr>
          <td> ${index + 1}</td>
          <td> ${token.symbol}</td>
          <td> ${token.amount}</td>
          <td> ${Moralis.Units.FromWei(token.balance, token.decimals)}</td>
          <td>button</td>
        </tr>`
        )
        .join("");
    }

is this what you mean?

Yes, that is how I wanted to add

I have added the same here and called the getStats() at the end of js file.
https://jsfiddle.net/xf91d36t/

You can see the output data getting updated.

after i did what you suggested it worked. but that button is supposed too be called swap. like in the video. do you have a suggestion too fix this?