hackquest logo

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.

視頻

技術堆疊

React
Node
Next
Ethers
Web3
Solidity
Pimlico
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
團隊負責人
CCat Tom
專案連結
行業
DeFiInfra