Interacting with Smart Contracts and DeFi Wallets in the Frontend

Now, we have been through the process of creating, building, deploying, and testing smart contracts. You can imagine that the EVM running the smart contracts is the backend of a full stack DeFi application. In this chapter, we will start building the frontend of the DeFi application with Node.js, React.js, and Material UI. Also, you will learn how to interact with the smart contracts using frontend code.

DeFi wallets play an important role in user authentication as shown in the Architecture of DeFi applications section of Chapter 1, Introduction to DeFi. In this chapter, you will learn how to connect DeFi applications with blockchain through a DeFi wallet and interact with smart contracts.

This chapter contains the following sections:

• Overview of DeFi application frontend development
• Deploying smart contract metadata to the frontend
• Connecting to a DeFi wallet
• Reading data from blockchain
...

Technical requirements

Based on what we covered in Chapter 2, Getting Started with DeFi Application Development, React.js provides the tools for building the frontend of the application, including the UI framework, state management, and URL path routing. For this chapter, we will need the following two packages specific to DeFi application development:

• Ethers.js (https://ethers.org/) is a simple and compact library for interacting with the EVM-based blockchain and its ecosystem. The main purpose of using this library in this book is to interact with smart contracts within frontend code.
• web3-react (https://github.com/Uniswap/web3-react) is a simple and powerful framework for building EVM-based decentralized applications using React. Although it does have some overlaps with ethers.js, it has its own advantages in managing DeFi wallets by providing various wallet connectors for React applications.

Note

web3-react is a widely used library for wallet integration used...

Overview of DeFi application frontend development

In this chapter, we will start to build the frontend of the DeFi application. When we talk about the frontend, it involves all aspects of UI, event handling, and EVM blockchain connectivity. We will dive into more details in this section.

Running the UI wireframe

Because the book focuses mainly on DeFi application development, we have the UI wireframe ready, along with the required packages, in the chapter03-start branch of the git repository of this book (https://github.com/PacktPublishing/Building-Full-stack-DeFi-Application). If you have worked on the code since the last chapter or already cloned the repository on your local environment, here are the commands to pull the code of the wireframe from the project’s directory:

$ git checkout chapter03-start
$ git pull origin chapter03-start

If you are starting from scratch, you can get the code of the chapter03-start branch and change the directory to Building-Full-stack...

Deploying smart contract metadata to the frontend

Before interacting with smart contracts, we need to make the smart contract metadata accessible to the frontend. Smart contract metadata is the required information for frontend code to access a smart contract on the blockchain. To be more specific, it refers to the smart contract ABI and the smart contract address that is deployed on the blockchain.

The smart contract ABI is a section of code for off-chain components to communicate and interact with the smart contract code deployed on the blockchain. It defines the interfaces that off-chain components can use to access the smart contract, including its functions, variables, and events. Usually, the ABI used by decentralized application frontend code is in the form of JavaScript Object Notation (JSON). Meanwhile, the DeFi application also requires you to know the smart contract address so the frontend code can locate the smart contract to interact with.

The example project of...

Connecting to a DeFi wallet

We usually need a DeFi wallet to access blockchain when we perform transactions, such as transferring cryptocurrencies, approving an operation, and performing all privileged operations. In Chapter 2, Getting Started with DeFi Application Development we have gone through how we can use Hardhat to deploy smart contracts and call smart contract functions using the DeFi wallet. In this section, we will explore how we can integrate the DeFi wallet with DeFi applications.

The architecture of DeFi wallet connectivity with blockchain

We need to understand a few concepts and DeFi wallet architecture before implementing the wallet connections. When designing a DeFi application, it requires the multi-layer architecture shown in Figure 3.2 when an application wants to access blockchain with DeFi wallets.

Figure 3.2 – The architecture of DeFi wallet connectivity with blockchain

As is shown in Figure 3.2, a DeFi application could...

Reading data from blockchain

When you access a blockchain explorer such as https://etherscan.io/, you will get the data such as the total supply or number of holders of a token. Some of the data can be retrieved directly from a smart contract by calling its functions. Some of the data such as historical transactions can be read from blocks. In this section, we will mainly focus on retrieving information by calling the smart contract function. To be more specific, we will add the total supply and current user balance on the UI shown in Figure 3.1. For how to read data from blocks, please refer to the ethers.js official documentation at https://docs.ethers.org/v5/api/providers/provider/ and check the getBlockWithTransactions function.

The source code we are going to add is located in the src/frontend/features/TokenOperations/index.js file. This is the main JavaScript file for the TOKEN OPERATIONS feature we’ll implement in the remaining sections of this chapter.

Before calling...

Making transactions on blockchain

In this section, we will explore how to make transactions with the ethers.js and web3-react libraries. Meanwhile, we will complete the functions of transferring tokens on the TOKEN OPERATIONS page.

In Figure 3.1, we created four text fields that require a user to input the recipient’s address and transferring amount for the two transfer cases:

• Normal Transfer: This transfers the specified amount of tokens from one address to another address without any loss, and calls ERC20’s standard transfer function.
• Transfer with Burn: This transfers the specified amount of tokens from the sender’s address, burns 10% of them, and sends the remaining 90% of the tokens to the recipient’s address. We will call the custom transferWithAutoBurn function we defined in src/backend/contracts/SimpleDeFiToken.sol.

Let’s define the following four state variables for the four TextField values in src/frontend/features...

Summary

In this chapter, we have built the frontend for reading data and making transactions on the blockchain. It allows users to interact with the Simple DeFi Token smart contract we created in Chapter 2, Getting Started with DeFi Application Development. The functions that we implemented included reading the total supply, getting the token balance of a user, transferring tokens with the standard interface, and performing transactions with the custom transfer to burn a portion of tokens while transferring. You have learned how to use popular libraries such as ethers.js and web3-react to implement these functionalities.

Meanwhile, we also introduced the architecture of using DeFi wallets to access the blockchain, dived into the concept of provider and connector, and understood how various DeFi wallets leverage connectors to access providers and perform transactions with wallet connections.

In the next chapter, we will introduce the principle and architecture of decentralized...