Implementing a Frontend for Staking and Farming

As discussed in Chapter 9, Building Smart Contracts for Staking and Farming staking and farming are two DeFi features that incentivize users to hold cryptos and generate passive income. Although the two features can share the same set of smart contracts, farming (or yield farming) is a special case of staking that is for liquidity pool tokens (LP tokens). We have learned the principles and how to implement smart contracts for staking and farming.

In this chapter, we will complete the two features by implementing the frontend. First, we will implement the features for staking; the feature will only support common ERC20 tokens (non-LP tokens) as the staked tokens and reward tokens. Then, we will reuse the majority of the frontend code for farming (for a farming pool, the staked token is an LP token, and the reward token is a non-LP token). We will also address the main differences between the two features in the frontend code.

By...

Overview of frontend pages for staking and farming

At the beginning of this chapter, we will walk through the structure of the frontend code and an overview of the pages we are building in this section. Because they depend on the smart contracts that we implemented in Chapter 9, Building Smart Contracts for Staking and Farming we encourage you to follow the instructions in this chapter based on the completed code of Chapter 9, Building Smart Contracts for Staking and Farming or you can pull the code from the chapter10-start branch from the GitHub repository of this book.

Similar to what we created for liquidity management pages in Chapter 6, Implementing a Liquidity Management Frontend with Web3, the staking feature includes multiple pages. Each page can be accessed via one of the URL routes defined in a React router component. Now, we need to create a folder at src/frontend/features/Stake to accommodate the router component and other pages for staking. Here are the six JavaScript...

Implementing a staking pool listing dashboard

In this section, we will create a staking pool listing dashboard, as shown in Figure 10.2:

Figure 10.2 – The UI for the staking pool listing dashboard

Figure 10.2 shows a dashboard that lists all the staking pools with the staking terms of each pool. The accordion component of each staking pool can be expanded for the user to interact with the staking pool. At the top of the page, there is a check box to hide the expired pools. There is also a button at the bottom of the page for users to create new staking pools.

Retrieve staking pools

The first process needed to build the staking pool listing dashboard is to retrieve all the staking pools. We have learned from Chapter 9, Building Smart Contracts for Staking and Farming that there is a getAllStakingPools function in the StakingPoolManager smart contract. We can use this function to retrieve all the addresses of the staking pools. We can also access...

Implementing pages for creating staking pools and supplying rewards

Creating staking pools and supplying rewards are two features of managing staking pools. As a decentralized application, everyone can create staking pools and supply rewards to any staking pools. In this section, we will implement the pages for creating staking pools and supplying rewards for the staking pools.

Improving the token selection modal component

Before implementing the staking pool creation page, we need to improve the token selection modal component src/frontend/components/TokenSelectModal/index.js because the staking pool creation page will reuse it to select ERC20 tokens (LP tokens or non-LP tokens).

As we mentioned in Chapter 6, Implementing a Liquidity Management Frontend with Web3 and Chapter 8, Working with Native Tokens, the TokenSelectModal component allows users to select from all tokens deployed by the rpm run deploy command and the native token ETH. However, sometimes, we should support...

Implementing frontend components for deposits, withdrawals, and harvesting

Deposit, withdrawal, and harvest are the three most important functions of staking pools, and users can use these three operations to earn crypto. In this section, we will dive into the code of how to interact with smart contracts and on-chain data to perform these operations. We will not go deep into the UI code and the JavaScript code that we discussed previously (e.g., how to approve token transfers with ethers.js).

Deposit page for staking pools

The deposit page for staking pools allows a user to deposit staked tokens by calling the deposit function of the StakingPool smart contract. Figure 10.5 shows a screenshot of the deposit page, the source file of which is located at src/frontend/features/Stake/Deposit.js in the project.

Figure 10.5 – Screenshot of the staking pool deposit page

Before a user can call the deposit function of a staking pool smart contract, the...

Implementing the farming frontend

We have learned that the feature of yield farming is a specific type of staking that is used for LP tokens only. It can use the same smart contract as the staking tokens.

When implementing the frontend of farming, we can reuse the JavaScript files that we created previously by copying the files from src/frontend/features/Stake into a new directory: src/frontend/features/Farm, which accommodates farming frontend source files. Here are the six JavaScript files we copied for the farming frontend:

• FarmRouter.js: The React router components for the sub-routes of farming. It is copied from StakeRouter.js. You can refer to the source of this file at https://github.com/PacktPublishing/Building-Full-stack-DeFi-Application/blob/chapter10-end/defi-apps/src/frontend/features/Farm/FarmRouter.js.
• ListFarmingPools.js: The farming pool listing dashboard page, which is copied from ListStakingPools.js. It will show the farming pool information in each...

Summary

This chapter has demonstrated the implementation of the frontend for the staking and farming feature of the DeFi project. We have learned how to interact with smart contracts to list staking pools and farming pools. We also dived into the frontend code to deposit staked tokens, withdraw, harvest rewards, create a staking pool, and supply rewards for staking pools. In the last section, we learned how to reuse the code of the staking feature to create the farming feature of the DeFi project. By the end of this chapter, we have completed the full-stack functionalities for staking and farming.

In the next chapter, we will start exploring an important topic of DeFi: the crypto loan. It involves many components that build up the whole functional system. For example, crypto loans introduce the interest rate model for lending and borrowing various types of cryptocurrencies. The system also requires a price oracle to dynamically determine the value of the maximum tokens a user can...