Implementing the Crypto Loan Frontend with Web3

After implementing all the smart contracts for the crypto loan system, it is time to build the frontend for the crypto loan system. This will complete our implementation of all the features and user experiences of the decentralized application. By implementing the frontend, users will be able view the information of all asset pools and the asset value positions of the users. The frontend also provides the interfaces for users to deposit, withdraw, borrow, and repay token assets to perform savings- and loan-related activities. By completing the crypto loan application, you will gain an understanding of how to build the main features that a traditional financial institution can offer in the DeFi world.

By reading this chapter, you will achieve the following:

• Learn how to implement a page to display the account summary and a list of all asset pools
• Learn how to implement the pages for depositing, withdrawal, borrowing, and...

Technical requirements

We highly recommend that you have the completed smart contracts we built in the previous chapters. Alternatively, you can pull the code from the chapter14-start branch of the GitHub repository of this book before following along with the code explanations of this chapter. You can refer to the source code of the aforementioned branch at https://github.com/PacktPublishing/Building-Full-stack-DeFi-Application/tree/chapter14-start.

After reading through the code examples in this chapter, you will find the implemented code in the chapter14-end branch of the GitHub repository of this book, located at https://github.com/PacktPublishing/Building-Full-stack-DeFi-Application/tree/chapter14-end.

Implementing the account summary and asset pool listing page

In this section, we will implement the account summary and asset pool listing page shown in Figure 14.1.

Figure 14.1 – A snapshot of the account information and asset pool listing page

The page in the preceding screenshot is broken into two sections. Section 1 shows the crypto loan account information. The section contains the following four items:

• Total Deposit Value is the total value of deposit token assets for the connected account.
• Total Borrowed Value is the total value of borrowed token assets for the connected account.
• Maximum Borrowable Value is the maximum token value that the connected account can borrow.
• Is Account Healthy represents whether or not the connected account is healthy. The account is healthy (the value is true) if the total borrowed value is not greater than the maximum borrowable value. Otherwise, the account is not healthy (the value is false...

Implementing the pages for deposit, withdrawal, borrowing, and repayment

Deposit, withdrawal, borrowing, and repayment are the four main features of the crypto loan system. Our implementation of the frontend for these features involves having an individual page for each of the features. All of the pages for these features have three major functions that need to be implemented: loading information, verification, and taking action. After taking action, the deposit is complete), the UI code of the page should take the user back to the Loading Information stage and perform Verification on the loaded information.

We will use the following screenshot of the deposit page (Figure 14.2) to explain these three functions.

Figure 14.2 – The three major steps for the page to deposit tokens

Figure 14.2 shows the layout of the pages for the three features we will implement in this section. The page is structured as an interactive form with three parts:

...

Best practices for decentralized crypto loan systems

Unlike other maintenance-free DeFi applications (e.g., DEX or staking protocols), running a crypto loan system requires some effort and cost to maintain. For example, the project owner may need somebody to liquidate assets when some users’ accounts becomes unhealthy. Also, we need to monitor the asset pools to ensure that users have access to sufficient tokens to borrow or withdraw. In this section, we will discuss the best practices to keep a decentralized crypto loan system in good shape.

Select blue chip assets

Blue chip assets in the context of crypto loans are cryptocurrencies that have stable prices, big market capitalizations, and good long-term reputations. These assets maximize the security of investments and help stabilize the values of the assets held by the crypto loan system. Therefore, blue chip assets are the best choice for asset pools.

The stability of blue chip assets means that liquidation is less...

Summary

In this chapter, we focused on the development of the frontend to complete our full stack application for a decentralized crypto loan system. First, we built the landing page that shows the user account information and a list of asset pools as the entry point to access the crypto loan operations. Then, we built the four operational pages for users to interact with crypto loan smart contracts for depositing, withdrawing, borrowing, and repayment. Finally, we discussed the best practices for maintaining a decentralized crypto loan system in operation.

We now have completed the implementation of the full stack application for our crypto loan system. Congratulations on following the demonstrations and code examples in this book on building DeFi applications! I hope you have enjoyed learning about the concepts involved, and now feel ready to build DeFi applications after reading, writing, and running the code in this book.

Because DeFi is a rapidly growing technology, there...