How to Build an ERC-20 Staking App

·

In this guide, you'll learn how to create an ERC-20 token staking application using thirdweb's Connect SDK and pre-built smart contracts. By the end, your app will enable users to:

👉 Explore advanced staking strategies

Prerequisites

Before starting, ensure you have:

  1. A thirdweb account
  2. Node.js installed
  3. A Web3 wallet (e.g., MetaMask)
  4. Testnet funds for deployment

Deploying Smart Contracts

The staking app requires three contracts:

  1. ERC-20 Staking Token: Token users stake.
  2. ERC-20 Reward Token: Token distributed as rewards.
  3. Staking Contract: Manages staking logic.

Steps:

  1. Deploy two ERC-20 tokens (staking and reward) via thirdweb’s dashboard.
  2. Deploy the Staking Contract, linking the two token addresses.
  3. Mint initial token supplies (e.g., 1,000,000 tokens).

Depositing Reward Tokens

To enable reward distribution:

  1. Approve the Staking Contract to spend reward tokens.
  2. Deposit rewards into the Staking Contract via depositRewardTokens.

Project Setup

Tools:

Steps:

  1. Create a Next.js project:

    npx create-next-app erc20-staking

  2. Install thirdweb SDK:

    npm i thirdweb
  3. Configure ThirdwebProvider in your app.

Building the Staking Interface

Key Components:

  1. Token Balances: Display staking/reward token balances using useReadContract.
  2. Staking Info: Fetch staked amounts and rewards via getStakeInfo.

  3. Actions:

    • Stake: Approve tokens, then stake.
    • Withdraw: Unstake tokens.
    • Claim: Harvest rewards.

Example Code:

const { data: stakeInfo } = useReadContract({
  contract: STAKING_CONTRACT,
  method: "getStakeInfo",
  params: [userAddress],
});

👉 Optimize your staking rewards

FAQ

1. How do I fund the reward pool?

Deposit tokens into the Staking Contract after approving it via approve.

2. Can I use mainnet instead of testnet?

Yes, but ensure you have sufficient ETH for gas fees.

3. How are rewards calculated?

Rewards are distributed based on the staking duration and pool allocation.

4. Is thirdweb’s SDK free?

Yes, thirdweb offers free tools for smart contract interaction.

Conclusion

You’ve built a functional ERC-20 staking app with:

Leverage thirdweb’s SDK to streamline development and focus on user experience.

Next Steps:

Happy coding!