Overview of the token swapping frontend
Before implementing the code of the token swapping frontend, let’s introduce what we will build and the workflow of the token swapping frontend.
Similar to the liquidity management page, we will create a React /swap route for users to access the token swapping page. Figure 7.1 shows the snapshots of the token swapping page at different stages.
Figure 7.1 – The snapshots of the token swapping page at different stages
On the token swapping page, we allow the users to select a pair of tokens and provide the number of tokens they want to spend or want to receive for the swapping. After the pair of tokens and amounts are provided, the page will show the price for swapping, the price impact, and the best swapping path for the swapping operation. This information is calculated dynamically based on the amount for swapping and the reserves in existing liquidity pools. This page will also show an ENABLE <...
