Introduction
Staking is one of the most widely used mechanisms in DeFi — deposit tokens, earn yield over time, withdraw whenever you want. It sounds simple, but building one correctly means getting the token approval flow, the reward math, and the live dashboard data all working together without confusing the user at any step.
For Week 4 of my Web3 internship at Ether Authority, I built a complete, production-ready DeFi Staking Platform from scratch — smart contracts, frontend, and a live deployment on the SecureChain AI (SCAI) Mainnet.
🌐 Live Demo: https://de-fi-staking-platform-vert.vercel.app
💻 GitHub: https://github.com/feudcommon/DeFi-staking-platform
Architecture Overview
Smart Contracts
1. ERC20Token (STK)
An ERC-20 token with a built-in faucet. Features:
- Public faucet (
faucet()) — any wallet claims 100 STK, enforced with a 24-hour cooldown per address - Owner-only minting — used by the staking contract to mint reward tokens directly to users on claim
- Packed faucet storage —
faucetAmountandfaucetCooldownare bothuint128, packed into a single storage slot to save gas on every faucet read
2. StakingContract
The core of the platform:
- Stake any amount of STK with no minimum
- Token-weighted, time-based rewards — yield accrues continuously based on stake size and a basis-points APR
- No lock-up period — withdraw staked tokens at any time
- Reward snapshot pattern — every stake, withdraw, or claim first snapshots pending rewards via an
updateRewardmodifier, so yield is always calculated up to the exact second - Faucet passthrough (
claimFaucet()) — lets users claim free STK directly from the staking interface without touching the token contract separately
Frontend Features
Built with React + TypeScript + Ethers.js v6:
- Automatic MetaMask integration — connects to SCAI Mainnet, prompts users to switch if on the wrong network
- Live dashboard — staked amount, available rewards, APR, APY, and wallet balance, all pulled from a single
getDashboardData()call - Auto-approval flow —
approve()is called automatically before staking, so users never see a confusing failed transaction - Multi-wallet support — MetaMask, WalletConnect, and Coinbase Wallet via RainbowKit
- Transaction hash links — every stake, withdraw, and claim links directly to the block explorer
Tech Stack
| Layer | Technology |
|---|---|
| Smart Contracts | Solidity ^0.8.19 |
| Development | Hardhat |
| Frontend | React 18, TypeScript, Ethers.js v6 |
| Wallet Connectivity | RainbowKit, Wagmi, WalletConnect |
| Deployment | Vercel (frontend), SCAI Mainnet (contracts) |
Deployed Contract Addresses (SCAI Mainnet — Chain ID: 34)
| Contract | Address |
|---|---|
| ERC20Token (STK) | 0x822Bc4Be4e784e0a9b78d92Fa2c79cF1E471512e |
| StakingContract | 0x530944aC3cb1A8AC17Ca11b90EB17D90c5d5bE78 |
All contracts are verified on the SecureChain Explorer.
How to Run Locally
Clone the repo
git clone https://github.com/feudcommon/DeFi-staking-platform.git
cd DeFi-staking-platform
Install dependencies
npm install
Start the dev server
npm start
The app opens at http://localhost:3000. Connect a wallet, switch to SCAI Mainnet, claim STK from the faucet, and start staking.
Key Learnings
The approve → stake two-step is where most dApp UX breaks. Checking the existing allowance first and only prompting for approval when needed turns two confusing transactions into one smooth click.
Struct packing saves real gas at scale. Packing lastUpdateTime, stakedSince, and a reserved field into a single storage slot means every stake and withdraw call writes less data on-chain.
A public faucet is essential for review. Letting anyone claim test tokens directly, with a simple cooldown, means reviewers and new users never have to ask for funds manually before trying the platform.
Basis points avoid floating-point math entirely. Storing the reward rate as BPS instead of a percentage keeps reward calculations precise and avoids decimal handling issues that Solidity doesn't support natively.
Acknowledgements
Massive thanks to the Ether Authority team for designing such a structured, hands-on internship program. Building and shipping a real project every week is the fastest way to grow as a Web3 developer.
Top comments (0)