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...