🪙 ERC20 Token Staking dApp

A modern, decentralized application for staking ERC20 tokens with automatic rewards and real-time balance updates. Built with React, TypeScript, and Web3 technologies.

🌐 Live Demo

🚀 View Live Application

✨ Features

🔐 Wallet Integration

• RainbowKit wallet connection
• Support for multiple wallets (MetaMask, WalletConnect, Coinbase Wallet, etc.)
• Network switching and account management
• Mobile-responsive wallet interface

💰 Smart Staking System

• ERC20 Token Staking: Stake any ERC20 tokens securely
• Automatic Approval: Smart approval flow for token spending
• Time-based Staking: Set custom staking durations
• Real-time Balance Updates: Automatic refresh when transactions confirm
• Unstaking: Withdraw staked tokens after duration expires

🎨 Modern UI/UX

• shadcn/ui Components: Beautiful, accessible UI components
• Dark/Light Theme: Toggle between themes with system preference support
• Responsive Design: Optimized for mobile, tablet, and desktop
• Loading States: Visual feedback for all operations
• Error Handling: Comprehensive error messages and recovery

⚡ Advanced Features

• Auto-Refresh: Balances update automatically after transactions
• Transaction Tracking: Monitor transaction confirmations
• Contract Information: View staking contract details
• Token Minting: Get free test tokens for staking
• Real-time Data: Live balance and staking information

🛠️ Tech Stack

Frontend

• React 19 - Latest React with concurrent features
• TypeScript - Type-safe development
• Vite - Fast build tool and dev server
• Tailwind CSS 4 - Utility-first CSS framework

Web3 Integration

• Wagmi - React hooks for Ethereum
• Viem - TypeScript interface for Ethereum
• RainbowKit - Wallet connection UI
• TanStack Query - Data fetching and caching

UI Components

• shadcn/ui - Modern component library
• Radix UI - Accessible UI primitives
• Lucide React - Beautiful icons
• Tailwind Merge - Dynamic class merging

Development Tools

• ESLint - Code linting
• TypeScript ESLint - TypeScript-specific linting
• PostCSS - CSS processing

🚀 Getting Started

Prerequisites

• Node.js 18+ (preferably 20+)
• npm or yarn package manager
• A Web3 wallet (MetaMask, etc.)

Installation

1. Clone the repository

   git clone https://github.com/your-username/erc20-token-staking.git
   cd erc20-token-staking

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173

Build for Production

# Build the application
npm run build

# Preview production build
npm run preview

📁 Project Structure

src/
├── components/
│   ├── ui/                 # shadcn/ui components
│   ├── site-header.tsx     # Main header with wallet & theme
│   ├── theme-provider.tsx  # Theme context provider
│   └── mode-toggle.tsx     # Theme switcher component
├── hooks/
│   └── use-mobile.ts       # Mobile detection hook
├── lib/
│   └── utils.ts           # Utility functions
├── abi.json               # Smart contract ABI
├── ercabi.json           # ERC20 contract ABI
├── config.tsx            # Wagmi configuration
├── ContextProvider.tsx    # Web3 context provider
├── homepage.tsx          # Main staking interface
├── App.tsx               # Root component
└── main.tsx              # Application entry point

🔧 Configuration

Environment Variables

The application uses default configurations but can be customized:

• Contract Addresses: Update in ContextProvider.tsx
• Supported Networks: Modify in config.tsx
• Theme Settings: Adjust in theme-provider.tsx

Smart Contract Integration

The app integrates with custom staking contracts:

// Contract addresses (update these for your deployment)
const STAKING_CONTRACT = '0x78f68a870B2454AFb4fa8A944B7c18dAdcA39dDC';
const ERC20_CONTRACT = 'YOUR_ERC20_CONTRACT_ADDRESS';

🎨 Customization

Themes

The app supports three theme modes:

• Light: Clean, bright interface
• Dark: Easy on the eyes for low-light environments
• System: Automatically matches your OS preference

UI Components

All UI components are built with shadcn/ui and can be customized by:

1. Modifying component variants in src/components/ui/
2. Updating Tailwind CSS classes
3. Changing color schemes in tailwind.config.js

🔒 Security Features

• Type Safety: Full TypeScript coverage
• Input Validation: Client-side validation for all forms
• Error Boundaries: Graceful error handling
• Secure Transactions: Wallet-based transaction signing
• Contract Verification: Transparent smart contract interactions

📱 Mobile Support

The application is fully responsive and optimized for:

• Mobile phones (320px+)
• Tablets (640px+)
• Desktop (1024px+)

Key mobile features:

• Touch-friendly interface
• Optimized wallet connection
• Responsive card layouts
• Mobile-first design approach

🚀 Deployment

Vercel (Recommended)

1. Connect your GitHub repository to Vercel
2. Vercel will automatically detect Vite configuration
3. Deploy with zero configuration

Netlify

1. Connect your repository to Netlify
2. Set build command: npm run build
3. Set publish directory: dist
4. Deploy

Manual Deployment

# Build the project
npm run build

# Deploy the dist/ folder to your hosting service

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• shadcn/ui for the beautiful component library
• RainbowKit for seamless wallet integration
• Wagmi for React hooks for Ethereum
• Vite for the lightning-fast build tool
• Tailwind CSS for the utility-first CSS framework

📞 Support

If you encounter any issues or have questions:

1. Check the Issues page
2. Create a new issue with detailed information
3. Contact the maintainers

🔄 Updates

Stay tuned for updates:

• Additional token support
• Enhanced UI/UX improvements
• New staking features
• Mobile app development

---

Built with ❤️ for the Web3 community