Building Web3 Wallets (Part 1) - Token Displays

Figuring out what data you need

Let’s take a closer look at the component that we want to build.

From this, we can break down our data needs into the following fields:

1. Token Name: the name of the token - e.g. "Ethereum", "Dai"

2. Token Logo: the logo image of the token to be rendered

3. Token Ticker: the ticker symbol of the token - e.g. "ETH", "DAI"

4. Token Balances: the balances of the token - e.g. "25.20368" for ETH

5. Token Value (denominated in USD, say) - e.g. $9,407.68 on the first row

6. 24H Change (Value) - e.g. 6.49% on the first row

A deceptively simple component, but quite a few pieces of data actually!

Identifying the right Covalent API endpoint to use

Luckily, you can get all of these data points using just one Covalent endpoint: the Get token balances for address endpoint. The image shows the response shape for one item.

The fields you'll be interested in are: contract_name (token names), logo_url (token logos), contract_ticker_symbol (token tickers), balance (token balances), quote (token values), and quote_24h (24H change).

You can examine the response directly from our API reference, or, if you like, paste the following into your browser (just be sure to replace the {API_KEY} with your actual Covalent API key):

https://api.covalenthq.com/v1/eth-mainnet/address/0x0b17cf48420400e1D71F8231d4a8e43B3566BB5B/balances_v2/?key={API_KEY}

Checked out the response? All ready? Let’s go on to build the app.

Clone this starter kit & initialize the project

Open the terminal and run the following commands:

npm start

Run npm start and head over to localhost:3000 in your browser. You should see the following:

This is just a simple template I’ve set up to get you going. There’s nothing fancy, just a bunch of <divs> sitting within src/App.js and styled with src/App.css.

JavaScript

// src/App.js
import { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [data, setData] = useState([...Array(6).keys()])

  return (
    <div className='container'>
      {data.map(item => {
        return (
          <div className='row'>

            <div className='left'>
              <div className='logoContainer'>
                <img className='tokenLogo' src='<https://res.cloudinary.com/dl4murstw/image/upload/v1677729872/greybox_zkioqf.png>' alt='tokenlogo'/>
              </div>
              <div className='left-info-container'>
                <div className='tokenName'>Token</div>
                <div className='tokenBalance'>0.00</div>
              </div>
            </div>

            <div className='right'>
              <div className='tokenValue'>$0</div>
              <div className='percentageChange'>0%</div>
            </div>
          </div>
        )
      })}
    </div>
  );
}

export default App;

In the next few steps, we’re going to make a call to the Covalent API, and get the token balances for the Ethereum address 0x0b17cf48420400e1D71F8231d4a8e43B3566BB5B.

Fetch the data

First, create an effect hook:

Second, define the Covalent endpoint and enter your API key:

⚠️In an actual production environment, it is advised to put your API key in the .env file.

Third, call fetch() within the effects hook and console.log the results:

Opening up the dev console, you should be able to see the following:

If you see this, you’ve successfully loaded the data! Expand it to check it out.

Lastly, set the data to be the items returned:

You will now be able to access the balances data within your data state variable.

Fill out the placeholder values with data state

For each of the placeholder values, replace them with the values within the data state.

JavaScript

//App.js
...
return (
    <div className='container'>
      {data.map(item => {
        return (
          <div className='row' key={item}>

            <div className='left'>
              <div className='logoContainer'>
                <img className='tokenLogo' src={item.logo_url} alt='tokenlogo'/>
              </div>
              <div className='left-info-container'>
                <div className='tokenName'>{item.contract_name}</div>
                <div className='tokenBalance'>{item.balance}</div>
              </div>
            </div>

            <div className='right'>
              <div className='tokenValue'>${item.quote}</div>
              <div className='percentageChange'>${(item.quote-item.quote24h)/ 100}%</div>
            </div>
          </div>
        )
      })}
    </div>
  );
...

Save, and refresh the page on the browser.

Looking not too bad!

However, you may notice that the balances are returning a ridiculously large number. This is because the balances field returns values in wei. To get it to the SI unit, do the following:

And finally, to get rid of the excessive decimals:

And we get…