Implementing the DEX frontend for the native token

In this section, we will dive into the frontend of the DEX to explore how we support ETH, the native token of Ethereum, by interacting with the smart contracts we implemented in the last section. The first question for the frontend implementation is how could we represent ETH as a token object in the JavaScript code.

Remember that in Chapter 6, Implementing a Liquidity Management Frontend with Web3 we introduced a new function called getTokeInfo in src/frontend/utils/Helper.js. It returns the token objects by providing the token addresses. Each token object contains the following four fields – address, name, symbol, and decimals. However, the native token doesn’t have the deployment address. Here, we should consider using the deployed WETH address as the native token. We should make the frontend code, which requires including ETH and WETH as the two initial tokens in the token list of the token selection modal dialog...