Building Web3 Wallets (Part 2) - Curve LP Token Balances

Clone this starter kit and initialize the project

Open the terminal and run the following commands:

Head over to localhost:3000 in your browser. You should see the following:

This is just a simple template to get you started. In this tutorial, we’ll be focusing on building out the topmost component (LP Tokens). In later parts of this series, we’ll build the Transactions and Pools component. If you open up src/App.js, you’ll see that there are three simple components (<Tokens />, <Transactions />, and <Pools />) that correspond to the sections you see on this page in the components folder.

Open up the <Tokens /> component, and let’s begin.

Fetching the LP tokens data

First, be sure to create a .env file that specifies your Covalent API key in this format:

REACT_APP_APIKEY='ckey_8bdxxxxxxxxxxxxxxxxxxxxxxxxxx99'

If you don’t have a Covalent API key, you can get it for free here.

Then, add the following code to the <Tokens.js> component to fetch the data:

Save and head to the browser again. Opening up the dev console, you should be able to see the following:

Congratulations, you’ve successfully retrieved the Curve LP tokens data for the wallet!

Understanding the data response

The endpoint we’ve used above is the Curve - Get balances for wallet address endpoint. This is what the response for one item looks like:

One item in the response corresponds to the balances information of one LP (Liquidity Provider) token held by the user. The endpoint returns all LP token holdings of a wallet address.

One thing to note about this endpoint is that it will only return responses if the wallet holds any LP tokens. If your wallet address does not have LP tokens, it will return an empty array. For the sake of having something to display, I’ve picked a wallet that currently holds quite a few LP tokens.

Rendering the live token data

Replace the placeholder values inside the return statement of the <Token.js> component:

Save, and voilà:

We’ve successfully displayed all the LP token holdings of the selected wallet.

The number on the top right-hand side of each row indicates the value of the token in USD, whereas the number below displays the rewards you get (in USD).

A word on the rewards: this refers purely to the rewards you get in proportion to the swap fees earned in the pool. It does not include rewards from liquidity farming activities, such as when you stake your token in a reward gauge.

There we have it, we’ve built a component that tells us our LP token holdings, its value in USD, as well as the rewards we can redeem, all in one glance.

Now, our component is perfectly fine if we are satisfied with knowing just the LP token values. However, what if we want to know how much these tokens would be worth if we redeemed them right away?

New feature: redeemable tokens

In this step, we’re going to create an add-on that allows us to get the underlying token values. It looks something like this:

Expanding each row on click to display the LP tokens’ underlying redeemable tokens and their values.

What are the underlying redeemable tokens of an LP token? When you inject liquidity into a Curve pool, you get LP tokens back. When you want to withdraw your original assets, you will be swapping those LP tokens for your original assets. But just what amount of your original tokens would you get? To understand this, we need to dive in a bit more on the idea of pool proportions and swap rates.

Pool proportions

Every pool has a variable pool token proportion, depending on the balance of tokens within the pool. This balance is always changing. If users inject more of token A and withdraw more of token B, token A will have a higher pool proportion.

Swap rates

Importantly, pool proportions affect the exchange rate between assets within a pool. From the pool above, we see that USDC has a 39.28% pool balance whilst USDT has 21.80%. If we were to swap the token with higher proportion (USDC) for a token of smaller proportion (USDT), the exchange rate we get will be less than 1. On the other hand, if we were to swap USDC for USDT, Curve rewards us with a very good exchange rate of more than 1. When pools are out of proportion, the under-balanced asset will be more expensive whilst the over-balanced one will be cheaper. This is Curve’s in-built mechanism of incentivizing traders to bring the pool to balanced proportion.

For liquidity providers, this has implications on how much you’ll be able to swap your LP tokens for. The optimal rate at which you get the best value for your swap (assuming all things constant) is to swap at the pool proportion rate. You can, of course, choose other levels of proportions, but if you choose to swap for a higher proportion of an under-balanced asset, the value you get out of your LP tokens will be less. This applies the other way round as well: swapping for more tokens of a higher pool balance will get you the most value. So knowing the pool proportions before you make a swap helps guide your swapping strategies.

Luckily for us, with Covalent’s Get Redeemable token balance endpoint, we’ll be able to get the pool proportion easily. It even returns the balance of the underlying token we are getting.

Let’s go ahead and build this add-on feature.

Within your project folder, you can commit your current progress. Then, hop over to the branch for this add-on:

You’ll be able to find that the skeletal framework for this feature has already been created for you. Run npm start, and click on one of the rows:

You’ll see that it expands to display some default values.

Opening up the <RedeemableTokens /> component, we find that it has the same familiar structure to what we’ve done before. First, we fetch the data in an effect hook, and then we display it. This time, I’ve already fetched it for you, but you’ll need to fill up the placeholder values:

JavaScript

// RedeemableTokens.js

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

const RedeemableTokens = ({ address, poolAddress }) => {
    const [tokenData, setTokenData] = useState(null)
    const [loading, setLoading] = useState(false)
    const apiKey = process.env.REACT_APP_APIKEY
		const protocol = 'curve'

    const redeemableTokenBalanceEndpoint = `https://api.covalenthq.com/v1/cq/covalent/app/${protocol}/tokens/?key=${apiKey}&pool-address=${poolAddress}&address=${address}`

    useEffect(() => {
        setLoading(true)
        fetch(redeemableTokenBalanceEndpoint, {method: 'GET', headers: {
            "Authorization": `Basic ${btoa(apiKey + ':')}`
          }})
            .then(res => res.json())
            .then(res => {
                setLoading(false)
                setTokenData(res.data.items)
            })
    }, [redeemableTokenBalanceEndpoint])

    if (loading) {
       return (
        <div className='loading'>Loading redeemable tokens...</div>
       )
    } else if (!loading  && tokenData) {
        return (
            <>  
                <div className='rowHeadersRedeem'>  
                    <div className='rowHeaderPool'>Tokens</div>
                    <div className='rowHeaderAPY'> Redeemable Value (USD)</div>
                </div>
                <div className='redeemTokenContainer'>
                    {tokenData.map(token => {
                        return (

                            <div className='redeemTokenRow'>
                                <div className='redeem-left'> 
                                    <div className='poolTokenName'>token0</div>
                                    <div className='poolTokenBalance'>000 USDC</div>
                                </div>
                                <div className='redeem-right tvl'> $00 </div>
                            </div>
                            
                        )
                    })}
                </div>
            </>
        )
    }
}

export default RedeemableTokens

Note that the Get Redeemable token balance endpoint has this query format:

https://api.covalenthq.com/v1/cq/covalent/app/${protocol}/tokens/?key=${apiKey}&pool-address=${poolAddress}&address=${address}

Query parameters:

• protocol - string: the name of the protocol. Currently, we support Aave, Balancer, Compound, Curve, Dodo, Frax, Instadapp, Lido, and Yearn.

• apiKey - string: your API key. Note: passing the API key via the query string is not advised, and is used here for mainly demonstration purposes. Use basic auth instead for all other cases.

• poolAddress - string: the address of the liquidity pool on Curve.

• address - string: the wallet address you’re querying.

And a sample response looks like this:

Try console logging the tokenData state to see what values you’ll need to fill!

Given it a go? Here is what it should be:

Finally, replace the token images with a default Curve image, save it and run npm start...

Voilà! We now have a component that tells us everything about our LP tokens, as well as their underlying tokens.