Airdrop Token Claim DApp - Web3 Token Distribution Portal

One-Click Token Airdrops for Your Blockchain Project

A complete, production-ready token airdrop claim portal built with React and Solidity. Allow your community to claim tokens with a beautiful, modern interface. Perfect for ICOs, token launches, community rewards, and promotional campaigns.

---

🎯 What You Get

A fully functional Web3 airdrop system with:

• React Frontend - Modern, responsive UI with shadcn-inspired design
• Solidity Smart Contracts - Secure, gas-optimized, and auditable
• Admin Dashboard - Manage eligibility, deposits, and settings
• One-Click Deployment - Ready for Vercel, Netlify, or any static host

---

✨ Key Features

For Users

Feature	Description
Wallet Connection	MetaMask and WalletConnect support
Eligibility Check	Instant verification of wallet eligibility
One-Click Claim	Simple, single-transaction token claim
Real-Time Stats	Live airdrop progress and availability
Mobile Responsive	Works perfectly on all devices

For Admins

Feature	Description
Add Eligible Wallets	Single or bulk address management
Set Claim Amount	Configure tokens per claim
Pause/Resume	Enable or disable claiming instantly
Deposit Tokens	Fund the airdrop contract
Withdraw Tokens	Retrieve unclaimed tokens anytime

Technical

Feature	Description
ERC-20 Compatible	Works with any ERC-20 token
Gas Optimized	Efficient contract design
Reentrancy Protected	Secure against common attacks
Verified Contracts	Etherscan verification included
TypeScript	Full type safety

---

🖥️ Live Demo

Frontend Preview:

• Clean, dark-themed interface
• Public stats visible without wallet
• Smooth animations and transitions
• Professional admin panel

---

📋 How It Works

User Flow

1. Visit Portal → See airdrop stats (no wallet needed)
2. Connect Wallet → Check eligibility status
3. Claim Tokens → One transaction, instant transfer
4. Done → Tokens in wallet

Admin Flow

1. Deploy Contracts → Token + Airdrop contracts
2. Fund Airdrop → Deposit tokens to contract
3. Add Wallets → Upload eligible addresses
4. Enable Claims → Users can now claim
5. Monitor → Track claims in real-time

---

🔧 Technical Specifications

Frontend Stack

• React 18 - Latest React with hooks
• TypeScript - Type-safe development
• Ethers.js v6 - Blockchain interactions
• CSS Variables - Easy theming
• Vercel Ready - One-click deployment

Smart Contracts

• Solidity 0.8.20 - Latest stable version
• OpenZeppelin - Battle-tested libraries
• Hardhat - Development & deployment
• Multi-Network - Deploy to any EVM chain

Security Features

• ✅ ReentrancyGuard protection
• ✅ Ownable access control
• ✅ SafeERC20 transfers
• ✅ One-claim-per-wallet enforcement
• ✅ Pausable functionality

---

📁 What's Included

airdrop-claim/
├── frontend/                 # React Application
│   ├── src/
│   │   ├── App.tsx          # Main application
│   │   ├── App.css          # Styling
│   │   ├── config.ts        # Contract addresses
│   │   └── index.css        # Global styles
│   ├── package.json
│   └── vercel.json          # Deployment config
│
├── contracts/                # Smart Contracts
│   ├── contracts/
│   │   ├── Airdrop.sol      # Main airdrop contract
│   │   └── DummyToken.sol   # Sample ERC-20 token
│   ├── scripts/
│   │   └── deploy.js        # Deployment script
│   └── hardhat.config.js    # Hardhat configuration
│
└── Documentation

---

🚀 Quick Start

1. Deploy Smart Contracts

cd contracts
npm install
npx hardhat run scripts/deploy.js --network sepolia

2. Configure Frontend

Update src/config.ts with your contract addresses:

export const AIRDROP_ADDRESS = "0x...";
export const TOKEN_ADDRESS = "0x...";

3. Deploy Frontend

cd frontend
npm install
npm run build
npx vercel

---

🎨 Customization

Easy Theming

Change colors by editing CSS variables in index.css:

:root {
  --primary: 0 0% 98%;
  --background: 0 0% 3.9%;
  --success: 142 76% 36%;
  /* Add your brand colors */
}

Multi-Network Support

Deploy to any EVM-compatible network:

• Ethereum Mainnet
• Polygon
• BSC (Binance Smart Chain)
• Arbitrum
• Optimism
• Avalanche
• Base
• And more...

---

📊 Smart Contract Functions

User Functions

Function	Description
claim()	Claim allocated tokens
isEligible(address)	Check if address can claim
hasUserClaimed(address)	Check if already claimed
getClaimStatus(address)	Get full status details

Admin Functions

Function	Description
setClaimAmount(uint256)	Set tokens per claim
setClaimEnabled(bool)	Enable/disable claims
addEligibleAddress(address)	Add single address
addEligibleAddresses(address[])	Bulk add addresses
removeEligibleAddress(address)	Remove address
depositTokens(uint256)	Fund the contract
withdrawTokens(uint256)	Withdraw specific amount
withdrawAllTokens()	Withdraw everything

---

🔐 Security Considerations

This codebase follows security best practices:

1. Access Control - Only owner can manage settings
2. Reentrancy Protection - Guards against reentrancy attacks
3. Safe Transfers - Uses OpenZeppelin's SafeERC20
4. Input Validation - All inputs are validated
5. Event Logging - All actions emit events for transparency

Note: Always conduct your own security audit before mainnet deployment.

---

📱 Responsive Design

The portal is fully responsive and works on:

• Desktop computers
• Tablets
• Mobile phones

All features are accessible on any device with a Web3 wallet.

---

🛠️ Requirements

Development

• Node.js 18+
• npm or yarn
• MetaMask or Web3 wallet

Deployment

• EVM-compatible blockchain
• Vercel/Netlify account (free tier works)
• Small amount of native tokens for gas

---

💡 Use Cases

Perfect for:

• Token Launches - Distribute tokens to early supporters
• Community Rewards - Reward active community members
• Marketing Campaigns - Promotional token giveaways
• DAO Distributions - Governance token airdrops
• NFT Holder Rewards - Reward your NFT community
• Testnet Faucets - Distribute testnet tokens

---

📄 License

This item comes with a standard marketplace license. You may use it for personal or commercial projects.

---

🆘 Support

Documentation and code comments are included to help you get started quickly. The codebase is clean, well-organized, and follows React/Solidity best practices.

---

📝 Changelog

Version 1.0.0

• Initial release
• React 18 + TypeScript frontend
• Solidity 0.8.20 smart contracts
• Admin dashboard
• Bulk address management
• Vercel deployment ready