A decentralized application (dApp) that allows users to stake ERC20 tokens and earn rewards in real-time. Built with the modern Ethereum stack (Next.js, RainbowKit, Wagmi), this project demonstrates a complete DeFi lifecycle: staking, withdrawing, claiming rewards, and administrative pool management.
- Wallet Connection: Seamless login with MetaMask, Rainbow, Coinbase Wallet, etc. (via RainbowKit).
- Real-Time Data: Live updates for Staked Balance, Earned Rewards, and Wallet Balance.
- Staking Mechanics: Approve and Deposit ERC20 tokens into the smart contract.
- Rewards: Claim accumulated rewards instantly without exiting your position.
- Withdrawal: Unstake tokens at any time.
- Exclusive control panel visible only to the contract owner.
- Set Duration: Configure how long the staking epoch lasts (e.g., 7 days).
- Fund Pool: Inject reward tokens and start a new earning epoch (
notifyRewardAmount). - Event Monitoring: View exact start and end times for the current staking round.
- Frontend: Next.js 14 (App Router), TypeScript, Tailwind CSS
- Web3 Integration: Wagmi v2, Viem
- Wallet UI: RainbowKit
- Smart Contracts: Solidity (Hardhat environment)
- Network: Sepolia Testnet
staking-frontend/
├── app/
│ ├── components/
│ │ └── StakingInterface.tsx # Core logic (Staking + Admin Panel)
│ ├── constants.ts # Contract Addresses & ABIs
│ ├── layout.tsx # Global layout (Providers)
│ ├── page.tsx # Home page structure
│ └── providers.tsx # Wagmi & QueryClient context
├── public/ # Static assets
└── ...
- Node.js (v18+)
- A browser wallet (MetaMask) with Sepolia ETH.
Clone the repository and install dependencies:
git clone [https://github.com/AlanDXiang/staking-frontend.git](https://github.com/AlanDXiang/staking-frontend.git)
cd staking-dapp
npm install
This frontend requires a deployed StakingPool contract and RewardToken.
- Open
app/constants.ts. - Replace the
STAKING_POOL_ADDRESSand Token Addresses with your deployed contract addresses. - Paste the contract ABI (Application Binary Interface) from your Hardhat artifacts into the respective arrays.
npm run dev
Open http://localhost:3000 (or port 8088 as configured) to view the dApp.
- Connect Wallet: Click the button in the top right to connect via MetaMask.
- Approve Tokens: Enter an amount to stake. If it's your first time, click Approve to allow the contract to use your tokens.
- Stake: Once approved, click Stake to deposit your tokens.
- Watch Rewards: You will see your "Rewards" balance increase every second (block).
- Claim or Withdraw: Click Claim Rewards to harvest yield, or switch to the Withdraw tab to exit your position.
The contracts for this frontend are located in a separate Hardhat repository.
- StakingPool.sol: Synthetix-based staking logic.
- MockERC20.sol: Used for both Staking Token (STK) and Reward Token (RWD).
This project is open source and available under the MIT License.