Build A Web Wallet in 10 Minutes - Displaying ERC20 Tokens by Contract Address

Moralis General
#1

Greetings,

I have been working on playing around with my own version of the wallet dapp that is featured in the How to Build a Web Wallet in 10 Minutes tutorial and had a question about customizing the ERC20 token balance displays. I’m building this wallet to partner with another dapp that I am working on that will utilize a custom token that we deployed on Polygon. I want this wallet to only show the user their balance for the single token that is relevant. I tried editing the getTokenBalances options to add the contract address, but that seemed to break it. Right now, as is, it will fetch and display all of the ERC20 tokens that I have in my wallet on Polygon, so all I need to be able to do is filter those results down to the single token I care about.

I would appreciate it a lot if someone out there could help me understand how to filter these tokens properly. Maybe I just don’t understand how to properly utilize the getTokenBalances options.

Here is the relevant bit of code from my main.js file:

getERC20Balances = async () => {
    let ethTokens = await Moralis.Web3API.account.getTokenBalances();
    let maticTokens = await Moralis.Web3API.account.getTokenBalances({chain: 'matic'});

    let otherBalancesContent = document.querySelector('#otherBalances');
    otherBalancesContent.innerHTML ='';
    
    if(ethTokens.length > 0){

    }
    if(maticTokens.length > 0){

        let tokenBalanceContent = '';

        maticTokens.forEach((e,i) => {
                let content = `
    
                <tr>
                <td>${e.name}</td>
                <td>${e.symbol}</td>
                <td>${(e.balance / ('1e' + e.decimals))} </td>
                <td>${e.decimals}</td>
                <td>${e.token_address}</td>
                </tr>
    
                `
                tokenBalanceContent += content
        });
        otherBalancesContent.innerHTML += tokenBalanceContent; 
    }
}

Thanks in advance for your help and please let me know if there is more information I need to share to add better context.

#2

it looks like you could use an if in order to skip all the tokens that don’t have a specific address, after you got the list for all the tokens

#3

Thanks for the quick reply! Can you elaborate a little bit? I understand the basic idea but I’m rusty with javascript, so I need a bit of hand holding.

I understand that I could add an if statement that looked at whether each entry had a token_address that is not equal to the contract address specified and if so, that entry would be hidden. What would that code look like? It seems like it ought to be simplest to do with a != but I’m a little unsure of how to set it up.

#4

Try various options until you make it work, you’ll have to lean javascript anyway.
You could also compare e.name with your known name.
You already have an if example in your code:

if(maticTokens.length > 0){

#5

I appreciate the spirit of your reply, but I’ve already been wrestling with this for a while trying different things and trying to understand what I may be missing, and have been unsuccessful. Any additional help would be appreciated.

I think my biggest problem is not totally understanding how to use the token contract address, name or symbol in the next if / else statement. I’m sure it is super simple that I ought to be able to figure out, but alas, here I am. I’ve read through https://docs.moralis.io/moralis-server/web3-sdk/token and feel that I’ve hit a wall.

I’m good with operators and basic commands, but I’m struggling with the variables, I think. :man_shrugging:

#6

You can use console.log to see how the data looks.
I thought that you already see this table with all the data:

            <td>${e.name}</td>
            <td>${e.symbol}</td>
            <td>${(e.balance / ('1e' + e.decimals))} </td>
            <td>${e.decimals}</td>
            <td>${e.token_address}</td>

and you only want to filter out rows from this table.
If you see the table then it means that you already see the variable values.
But you can use console.log(maticTokens) to see how data looks too.

#7

did you find the answer? I also need to display the balance of 1 particular token.