Building Web3 Wallets (Part 3) - Displaying Curve Transactions
- Curve: Get transactions by wallet address
In the last section, we built a component that displays the Liquidity Provider (LP) tokens of a wallet address. With the power of Covalent’s Get Redeemable token balance endpoint, we even managed to find out what the underlying redeemable tokens are worth. This is what our end product looked like:
While it is good to see what LP tokens you have and what can you redeem them for, it is perhaps even more useful to be able to quickly see your interaction history with the Curve protocol. This may be useful if you’re building a DeFi taxation tool, for instance, or a DeFi portfolio manager.
In this section, we’ll build out a Transactions component that shows you all the transactions that a wallet address has made on the Curve protocol. You’ll end up with something like this:
Ready? Let’s get started!
(Estimated time to follow along: 20mins)
Prerequisite
Basic familiarity with React
Some HTML/CSS knowledge
Fetching data using APIs
Covalent endpoints used:
Class C (Curve) - Get transactions by wallet address
Class C (Curve) - Get all markets
Step 1: Figuring out what data you need
Let’s take a closer look at the Transactions component that we want to build.
From this, we can break down our data needs into the following fields:
Action: the action associated with the transaction - e.g. 'Swap’ or ‘Add’
Date: the date of the transaction - e.g. ‘Oct 14’
Token 1: the token out of wallet - e.g. ‘USDC’
Token 2: the token received, e.g. ‘USDT’
Token 1 value: the value of token out, e.g. ‘-$8000’
Token 2 value: the value of token received, e.g. ‘+$8000’
Transaction Fees (ETH): fees for the swap, e.g. ‘0.0031 ETH’
Fees quote (USD): fees for the swap in USD, e.g. ‘($15.00)’
Again, a seemingly simple component, with a lot of data fields!
Step 2: Hunting for the data Identifying the right Covalent API endpoint to use
Luckily, you can get all of these data points using just one Covalent endpoint: the Class C endpoint for Curve, Get transactions by wallet address endpoint.
Here is what the request path looks like:
https://api.covalenthq.com/v1/cq/covalent/app/curve/transactions/?address={walletAddress}&key={apiKey}
ℹ️ If you want to try it for yourself, be sure to replace the walletAddress and apiKey variables, and pop the endpoint into the browser. If you don’t have a Covalent API key, you can get it for free here.
This is what the response looks like:
Let’s take a closer look at one item.
The response item contains most of the fields we are interested in: event_name (action), block_signed_at (date), contract_ticker_symbol (Token 1 ticker), value_quote (Token 1 value), fees_paid (fees), and gas_quote (fees in USD). However, it only contains the token data for one side of the swap. The data for the other side of the swap is in the next item:
These responses correspond to what we see on Etherscan:
Now that we know how to get the data, let’s dive in and build our component!
Step 3: Clone this starter kit & initialize the project
Open the terminal and run the following commands:
git clone <https://github.com/xiaogit00/building-wallets.git>
cd building-wallets
npm i
git checkout part3-defi-protocols-txns
npm start
Head over to localhost:3000 in your browser. You should see the following:
If you don’t, it’s possibly because you have not created the .env file. Create it at your project root and add your Covalent API to the REACT_APP_APIKEY variable, like so:
REACT_APP_APIKEY='ckey_8bd56xxxxxxxxxxxxxxxxxxxx499'
Save, and head back to your browser.
The component you see on your screen is basically what we created for part 2. Of course, the actual LP token holdings might differ on your screen depending on whether the address’s 3Crv token holdings have changed. The wallet I’ve used is the same one as above: 0xc0152cd4c429b7273db278a0355f0dfc9edbe840.
With this framework in place, it's time to fetch the data!
Step 4: Fetching the LP Tokens data
Head over to the components/Transactions.js file. Within it, we have the JSX template for the Transactions section. Our goal now is to fetch the relevant data first.
Add an effect hook using the [Get transactions by wallet address](<https://www.covalenthq.com/docs/api/curve/curve-transactions/>) endpoint above and console.log the response.
const Transactions = () => {
const [data, setData] = useState([...Array(3).keys()])
const [loading, setLoading] = useState(false)
const apiKey = process.env.REACT_APP_APIKEY
const walletAddress = '0xc0152cd4c429b7273db278a0355f0dfc9edbe840'
const lpTransactionsEndpoint = `https://api.covalenthq.com/v1/cq/covalent/app/curve/transactions/?address=${walletAddress}`
useEffect(() => {
setLoading(true)
fetch(lpTransactionsEndpoint, {method: 'GET', headers: {
"Authorization": `Basic ${btoa(apiKey + ':')}`
}})
.then(res => res.json())
.then(res => {
console.log(res.data.items)
setLoading(false)
})
}, [lpTransactionsEndpoint, apiKey])
...Save, and npm start in your terminal.
Heading over the dev console, you should be able to see this:
Congratulations, you’ve successfully retrieved the Curve protocol transactions data for the wallet!
Step 5: Cleaning the data
Now, there are a couple of things that we’ll need to do to get the data rendered in precisely the way we want.
First, as mentioned above, each of the items in the response array contains information of a specific token within a transaction.
For a transaction involving 2 tokens, there will be 2 corresponding items. We would thus need to group the items from the same transactions together for easier display. You can do it via a function like so:
...
useEffect(() => {
setLoading(true)
fetch(lpTransactionsEndpoint, {method: 'GET', headers: {
"Authorization": `Basic ${btoa(apiKey + ':')}`
}})
.then(res => res.json())
.then(res => {
var groupedData = Object.values(
res.data.items.reduce((p, c) => {
(p[c.tx_hash] = p[c.tx_hash] || []).push(c)
return p
}, {})
)
setData(groupedData)
setLoading(false)
})
}, [lpTransactionsEndpoint, apiKey])The result will be a grouped array:
The reason why we want to group the same transactions into an array first is that we’ll want all the items from the same transaction to render into a single row for our display. Of course, you can achieve this in any way you want.
Expanding the first array, you can see that each object contains the same tx_hash.
Nice! Now you’ll be able to map over this object to render each of the rows of data.
Step 6: Rendering the right data
You’ll finally be able to render the data onto the page. Let’s begin with the Action field (swap, add_liquidity, etc).
Replace the “Swap” placeholder here:
return (
...
<div className='txnContainer'>
<div className='action'>
<div className='actionText'>Swap</div>
...with the following:
<div className='actionText'>{item[0].event_name}</div>Save, and you’ll be able to see this:
Not too bad! Now you know what each transaction signifies. The formatting is not ideal, so let’s define a simple function to clean up the action names:
const cleanAction = (actionName) => {
switch (actionName) {
case 'swap':
return 'Swap'
case 'add_liquidity':
return 'Add'
case 'remove_liquidity':
return 'Remove'
case 'remove_liquidity_one_coin':
return 'Remove One'
case 'remove_liquidity_imbalance':
return 'Remove Imbalance'
default:
return actionName
}
}And calling it in our JSX:
<div className='actionText'>{cleanAction(item[0].event_name)}</div>We see the following:
Much better. Now, replacing the rest of the placeholder values…
return(
...
<div className='sectionContainer'>
{data.map(item => {
return (
<div className='rowTxn' key={item}>
<div className='txnContainer'>
<div className='action'>
<div className='actionText'>{cleanAction(item[0].event_name)}</div>
<div className='date'>{new Date(item[0].block_signed_at).toLocaleString('en-US', { day: 'numeric', month: 'short', year: "2-digit" })}</div>
<div className='date'>{new Date(item[0].block_signed_at).toLocaleString('en-US', {timeStyle: 'short' })}</div>
</div>
<div className='tokenBundle'>
<div><img className='tokenLogoTransactions' src='<https://res.cloudinary.com/dl4murstw/image/upload/v1677729872/greybox_zkioqf.png>' alt='tokenlogo'/></div>
<div className='tokeninfo'>
<p className='txnText'>{-(getTokenOut(item).value/(10**getTokenOut(item).contract_decimals)).toFixed(2)}</p>
<p className='txnText'>{getTokenOut(item).contract_ticker_symbol}</p>
</div>
</div>
<div className='arrow'><img src='<https://res.cloudinary.com/dl4murstw/image/upload/v1668500894/next_e7qvca.png>' alt='arrow' height="32px"/></div>
<div className='tokenBundle'>
<div><img className='tokenLogoTransactions' src='<https://res.cloudinary.com/dl4murstw/image/upload/v1677729872/greybox_zkioqf.png>' alt='tokenlogo'/></div>
<div className='tokeninfo'>
<p className='txnText'>+{(-getTokenIn(item).value/(10**getTokenIn(item).contract_decimals)).toFixed(2)}</p>
<p className='txnText'>{getTokenIn(item).contract_ticker_symbol}</p>
</div>
</div>
<div className='rightTxn'>
<div className='gasEth'>{(Number(item[0].fees_paid)/(10**item[0].gas_token_decimals)).toFixed(4)}
<img
alt=""
src="<https://res.cloudinary.com/dl4murstw/image/upload/v1668511869/gas-station_ydpfe5.png>"
height="12"
/>
</div>
<div className='gasQuote'>ETH</div>
<div className='gasQuote'>(${item[0].gas_quote.toFixed(2)})</div>
</div>
</div>
</div>
)
})}
</div>
</>
)Save and head over to your browser, you’ll be able to see this:
Congratulations. You have managed to build a very compact component that shows you important data on your Curve transactions. All with 1 API call!
In our case, you will realize that what is missing is the token logos. At the point of writing (28th March 2023), the response for Get transactions by wallet address does not contain a token logo (it might be added in the future). The current workaround is to make use of the Trust wallet repository to render the logos. Apart from that, our component is done.
If you have not been following along and would just like the end state, you can do the following to see this app locally:
git clone https://github.com/xiaogit00/building-wallets.git
cd building-wallets
npm i
git checkout part3-defi-protocols-txns-end
npm start
Just be sure to add your API key in a .env file, like so:
REACT_APP_APIKEY='ckey_8bdxxxxxxxxxxxxxxxxxxxxxxxxxx99'
All in a day’s work
Congratulations on reaching this part of the Building Wallets series. We’ve managed to accomplish quite a bit. In the previous part, we managed to get all the LP token holdings of your users. In this part, we have managed to get all their transactions on Curve.
In the final section, we’ll look at how you can get important data on all Curve’s liquidity pools to display to your users. Stay tuned.