Implementing a Liquidity Management Frontend with Web3

Liquidity management is the foundation of liquidity pool-based crypto trading. It is also a common feature of Decentralized Exchanges (DEXs). It allows crypto holders to provide liquidities for various token pairs to improve the liquidity pool and strengthen the price stability of trading.

In the previous chapter, we went through smart contracts for a simple DEX that leverages the Constant Product Market Maker (CPMM) strategy. We learned how to create liquidity pools, add liquidity, and remove liquidity by interacting with smart contracts that are deployed on the blockchain. In this chapter, we will build a user interface for liquidity management to integrate smart contract interaction with Web3 technologies.

By reading this chapter, you will learn the following:

• How to implement URL routes for liquidity management
• How to retrieve liquidity pool information by interacting with smart contracts with ethers.js
...

Implementing URL routes for liquidity management

In this chapter, we will write UI code for liquidity management and interact with smart contracts. In this section, we will explain the structure of liquidity management pages and explain how to implement these pages. Before starting to write the UI code, you can start by using the code in the chatper06-start branch of the GitHub repository of this book or continue the work you did in Chapter 5, Building Crypto-Trading Smart Contracts.

In order to distinguish other features of the DeFi application, we will create a new URL route, /liquidity, for users to access all liquidity management functions. If you run the web application with the npm start command, you will access the liquidity management feature via http://localhost:3000/liquidity.

Meanwhile, we will create three sub-routes under /liquidity for the following three functions of the liquidity management feature:

• Listing liquidity pool tokens (LP tokens) in the wallet...

Retrieving liquidity information

In this section, we will implement the page for listing liquidity. It involves accessing multiple smart contracts to retrieve liquidity-related information. The liquidity information is tied to a wallet account so we require the user to connect their account to view the information.

By completing the liquidity listing page, you will see a page like Figure 6.2:

Figure 6.2 – The implemented page listing liquidity

From the UI in Figure 6.2, a user can view the list of LP tokens and their balances in the accordion components. The amount of tokens for each token pair will be shown once the user clicks the down-arrow button on the right side of each accordion component. The amount of tokens represents how many tokens users can get if they remove the current liquidity. Please note that the amounts could change from time to time if someone else is using this liquidity pool for swapping.

After each of the accordion...

Implementing the liquidity provisioning page

In this section, we will implement the liquidity provisioning page, AddLiquidity.js. Before diving into the code, let’s demonstrate how the page works using several snapshots.

Overview of the liquidity provisioning page

Figure 6.4 shows the page view of accessing the /liquidity/add URL without specifying any search parameters. This page allows the user to select a token from a list of supported tokens by clicking the drop-down arrow on the right side of the Input box.

Figure 6.4 – A snapshot of the liquidity provisioning page without specifying URL parameters

Once the down-arrow button is clicked, a dialog will show up that allows the user to select one of the tokens in the list as shown in Figure 6.5.

Figure 6.5 – Snapshot of the token selection dialog for liquidity provisioning

After a pair of tokens is selected, the liquidity provisioning page will...

Implementing the liquidity removal page

In this section, we will go through the implementation of the liquidity removal page, RemoveLiquidity.js. A snapshot of this page is shown in Figure 6.10:

Figure 6.10 – Snapshot of the liquidity removal page

With the liquidity removal page, a user can select the percentage of liquidity or the amount of LP tokens they want to remove. By removing the liquidity, the user can receive the pooled tokens in return, meanwhile, the LP tokens are automatically burned.

Next, let’s dive into the frontend workflow of liquidity removal.

Frontend workflow of liquidity removal

Before implementing the UI of liquidity removal, let’s go through the frontend workflow first. When removing liquidity, the UI page should allow the user to input the amount of LP tokens they want to remove, then the UI code should check with the LP token smart contract to see whether the AMM router can transfer the LP token from...

Verifying liquidity management pages

We have completed all the pages for liquidity management. In this section, we will provide some instructions to verify the functions on these pages. Before the verification, I suggest you complete all the components mentioned in this chapter by referring to the code at https://github.com/PacktPublishing/Building-Full-stack-DeFi-Application/tree/chapter06-end/defi-apps.

This branch introduces another two tokens for the DEX: Foo Token (symbol: FOO) and Bar Token (symbol: BAR), so that you can create multiple liquidity pools with these tokens.

When you add a new token to the DEX, don’t forget to include its deployment by adding a line in the contractList array in scripts/deploy.js like this:

const contractList = [
  // "Contract Name", "Contract Factory Name"
  ["Simple DeFi Token", "SimpleDeFiToken"],
  ["Meme Token", "MemeToken"],
  ...

Summary

In this chapter, we have gone through the process and explained the code for implementing liquidity management features for a DEX. We learned about the workflows of typical liquidity management operations such as liquidity information retrieval, liquidity provisioning, and liquidity removal. For each of these operations, we learned about and discussed the code implementation with Web3 technologies. We showed you how to use ethers.js to interact with the smart contracts implemented in Chapter 5, Building Crypto-Trading Smart Contracts to complete these operations. We also demonstrated other topics such as creating sub-routes in React.js and verification of the liquidity management features in this chapter.

In the next chapter, we will proceed with the journey of implementing the frontend of the most important feature of a DEX: swapping. This feature will allow users to swap tokens with other tokens using the DeFi application in web browsers.