mon-transfer
A modern, decentralized token transfer platform built on the Monad blockchain, featuring ERC-4337 Smart Account integration and real-time transaction indexing with Envio.
视频
描述
A modern, decentralized token transfer platform built on the Monad blockchain, featuring ERC-4337 Smart Account integration and real-time transaction indexing with Envio.
🌐 Live Demo: https://transfer-smartaccount.vercel.app/
🚀 Features
🔐 Smart Account Integration
ERC-4337 Account Abstraction: Deploy and manage Smart Accounts for gasless transactions
Pimlico Bundler Integration: Seamless transaction processing through Pimlico's infrastructure
MetaMask Delegation Toolkit: Easy wallet connection and account management
Automatic Deployment: One-click Smart Account deployment with status monitoring
💸 Advanced Transfer Capabilities
Native Token Transfers: Send MON tokens directly with Smart Account integration
ERC-20 Token Support: Transfer any ERC-20 token with automatic token detection
Batch Transfers: Send tokens to multiple recipients in a single transaction
Gas Optimization: Reduced gas fees through batch processing and Smart Account abstraction
📊 Real-time Transaction Monitoring
Envio Indexing: Real-time blockchain data indexing and querying
Transfer History: Comprehensive transaction history with filtering and search
Transaction Analytics: Sent/received statistics and net balance tracking
GraphQL API: Efficient data querying through Envio's GraphQL endpoint
🎨 Modern User Interface
Dark Theme Design: Professional dark interface with glass morphism effects
Responsive Layout: Optimized for desktop and mobile devices
Sidebar Navigation: Collapsible sidebar with smooth transitions
Progress Indicators: Visual step-by-step guidance for complex operations
Animated Components: Subtle animations and hover effects for enhanced UX
🏗️ Technical Architecture
Frontend
Framework: Next.js 14 with TypeScript
Styling: Tailwind CSS with custom CSS variables
State Management: React hooks and context providers
Wallet Integration: MetaMask with custom provider wrapper
Blockchain Integration
Network: Monad Testnet (Chain ID: 10143)
Smart Contracts: ERC-4337 EntryPoint and custom TransferEventWrapper
Libraries: Viem for blockchain interactions
Bundler: Pimlico for UserOperation processing
Data Indexing
Envio Indexer: Real-time blockchain event indexing
GraphQL API: Query interface for transaction data
Event Wrapper: Custom contract for emitting transfer events
Database: PostgreSQL with Envio's managed infrastructure
📋 Smart Contract Addresses
TransferEventWrapper Contract
Address: 0xFf71Ff614d6B621541408Adce546bF68Ad399b5d
Network: Monad Testnet
Purpose: Emit standardized events for transfer operations
ERC-4337 EntryPoint
Address: 0x0000000071727De22E5E9d8BAf0edAc6f37da032
Network: Monad Testnet
Purpose: ERC-4337 Account Abstraction entry point本次黑客松进展
100% COMPLETED - CORE FEATURES 🔐 1. Smart Account Integration (100%) ✅ ERC-4337 Account Abstraction - Deploy and manage Smart Accounts ✅ Pimlico Bundler Integration - UserOperation processing ✅ MetaMask Integration - Wallet connection and network switching ✅ Automatic Deployment - One-click Smart Account deployment ✅ Status Monitoring - Deployment status checking 💸 2. Transfer Functionality (100%) ✅ Native MON Transfers - Send MON tokens ✅ ERC-20 Token Support - Support any ERC-20 token ✅ Batch Transfers - Send to multiple recipients simultaneously ✅ Token Detection - Auto-detect token info (name, symbol, decimals) ✅ Balance Checking - Check balance before sending 📊 3. Real-time Indexing (100%) ✅ Envio Integration - Real-time blockchain indexing ✅ TransferEventWrapper Contract - Emit events for indexing ✅ GraphQL API - Query transaction data ✅ Transfer History - Real-time transaction history ✅ Analytics Dashboard - Sent/received/net balance statistics 🎨 4. Modern UI/UX (100%) ✅ Dark Theme Design - Professional dark interface ✅ Glass Morphism Effects - Glass effects for cards ✅ Responsive Layout - Optimized for all devices ✅ Sidebar Navigation - Collapsible sidebar navigation ✅ Progress Indicators - Step-by-step guidance ✅ Smooth Animations - Fluid animations 🚀 DEPLOYMENT & INFRASTRUCTURE (100%) 🌐 Production Ready ✅ Vercel Deployment - https://transfer-smartaccount.vercel.app/ ✅ Environment Configuration - Complete environment variables ✅ TypeScript Safety - Type-safe codebase ✅ Error Handling - Comprehensive error management ✅ Performance Optimization - Optimized build and runtime 📋 Documentation (100%) ✅ README.md - Complete documentation ✅ Project Description - Detailed project description ✅ Smart Contract Addresses - Contract addresses ✅ Setup Instructions - Setup and deployment guide 🔧 TECHNICAL ACHIEVEMENTS (100%) Smart Contracts ✅ TransferEventWrapper: 0xFf71Ff614d6B621541408Adce546bF68Ad399b5d ✅ Event Emission: Native, ERC-20, and Batch transfer events ✅ Envio Indexing: Real-time event indexing and querying Frontend Architecture ✅ Next.js 14 with TypeScript ✅ Component Architecture - Modular and reusable ✅ State Management - React hooks and context ✅ Styling System - Tailwind CSS with custom variables Blockchain Integration ✅ Monad Testnet - Chain ID: 10143 ✅ Viem Library - Ethereum interactions ✅ Pimlico Bundler - UserOperation processing ✅ MetaMask Provider - Wallet integration