Token Sweeper: EIP-7702 Batch Swap
This app provides a practical implementation of EIP-7702 for swapping multiple ERC20 tokens at once. It leverages Marketplace add-ons to fetch token balances, get optimal swap quotes, and execute batch transactions on Base and Optimism.
概覽
Token Sweeper is a DeFi application that enables users to efficiently sweep multiple small ERC-20 token balances into a single preferred token using EIP-7702 batch transactions. Experience atomic swaps with a single signature across Base and Optimism mainnets.
This example app is provided for educational and demonstration purposes only. Use at your own risk.
For an in-depth guide on how to build this app, refer to the technical guide
Experience the token sweeper in action!
🚀 Try it yourself with the live demo →
特色
- 🔄 Multi-Token Consolidation: Convert multiple dust tokens into a single preferred token with optimal routing
- ⚡ EIP-7702 Batch Transactions: Execute all swaps atomically in a single transaction signature
- 📊 Real-time Portfolio Tracking: Live token balance fetching via Covalent GoldRush Token API
- 🛡️ Advanced Spam Filtering: Spam/scam token detection via Covalent GoldRush Token API and Aerodrome/Velodrome Swap APIs
- 🌐 Multi-Chain Support: Full support for Base (8453) and Optimism (10) with native DEX integration (Aerodrome and Velodrome)
- 📱 Social Achievement Cards: Generate and share beautiful post-swap achievement cards
Technology Stack
Frontend Framework
- Next.js: React framework with App Router
- TypeScript: Type-safe development
- Tailwind CSS: Utility-first CSS framework
- shadcn/ui: Modern React component library
Web3 Integration
- Wagmi: React hooks for Ethereum
- Viem: TypeScript interface for Ethereum
- RainbowKit: Wallet connection
- EIP-7702: Atomic batch transaction support
APIs & Data Sources
- Covalent GoldRush Wallet API: Token balance fetching
- Aerodrome Swap API: Quotes and swaps on Aerodrome, leading DEX on Base
- Velodrome Swap API: Quotes and swaps on Velodrome, leading DEX on Optimism
先決條件
- Node.js 20+
- A Quicknode account with Base or Optimism endpoints
- The Covalent Token API add-on (free tier not available) and Aerodrome or Velodrome Swap API add-on (free tier available)
- Project ID from Reown, formerly WalletConnect
- MetaMask or compatible wallet with EIP-7702 support
Setting Up Quicknode
- Create Endpoints: Log in to your Quicknode account and create a new endpoint for each chain you want to support. For this guide, we will use Base and Optimism.
Since these API add-ons are available on mainnet only, you will need to set up your Quicknode account with a mainnet endpoint.
- Install Add-ons:
- Once you are in your endpoint's dashboard, navigate to the Add-ons for your endpoint.
- Install the Covalent Token API add-on.
- Install the Aerodrome Swap API and Velodrome Swap API add-ons. You can use the free tier for the swap APIs to start.
-
Get Covalent API Key: Click Sign in to Dashboard next to the Covalent Token API add-on. This will redirect you to the Covalent dashboard where you can find your API key.
-
Get Swap API URLs: Click 開始使用 next to the Aerodrome or Velodrome Swap API add-on. This will show you the base API URLs you need to use in your application. Use the URL before the
/v1/...part, as we will append the specific endpoints in our code. It should look something like this:https://YOUR-QUICKNODE-ENDPOINT-URL/addon/YOUR-ADDON-ID
Setting Up Reown (formerly, WalletConnect)
-
Create a Reown (formerly, WalletConnect) Project: Head to the Reown Cloud and create a new project. You can name it whatever you want.
-
Get Project ID: After creating the project, you will be redirected to the project dashboard. Here, you can find your Project ID, which you'll need to use in your application.
快速入門
1. Clone the Repository
git clone https://github.com/quiknode-labs/qn-guide-examples.git
cd qn-guide-examples/sample-dapps/token-sweeper-eip-7702
2. Install Dependencies
npm install
# or using yarn
yarn install
# or using pnpm
pnpm install
3. Environment Configuration
cp .env.example .env
Edit .env:
# API Keys
COVALENT_API_KEY=your_covalent_api_key_here
# WalletConnect Project ID
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_walletconnect_project_id_here
# RPC URLs (Optional - will use public RPCs if not set, which is not recommended for production)
NEXT_PUBLIC_BASE_RPC_URL=your_base_rpc_url_here
NEXT_PUBLIC_OPTIMISM_RPC_URL=your_optimism_rpc_url_here
# Aerodrome/Velodrome API URLs (Required for swap functionality)
AERODROME_BASE_API=your_quicknode_aerodrome_base_api_here
VELODROME_OPTIMISM_API=your_quicknode_velodrome_optimism_api_here
4. Run Development Server
npm run dev
# or using yarn
yarn dev
# or using pnpm
pnpm dev
Visit http://localhost:3000 to see the application.
預覽
- 分叉此儲存庫
- 建立功能分支：git checkout -b feature/amazing-feature
- 將您的變更提交：git commit -m "新增超棒的功能"
- 推送您的分支：git push origin feature/amazing-feature
- 開啟一個 Pull Request。
