メインコンテンツへスキップ
サンプルアプリに戻る

Token Sweeper: EIP-7702 Batch Swap

This app provides a practical implementation of EIP-7702 for swapping multiple ERC20 tokens at once. It uses Quicknode's Swap API and an endpoint add-on to fetch token balances, get optimal swap quotes, and execute batch transactions on Base and Optimism.

アイコンの展開
アプリをデプロイする
GitHubのアイコン
リポジトリを表示
フロントエンドフレームワーク／ライブラリ：
React
言語：
TypeScript
ビルドツール／開発サーバー：
Next.js
サンプルアプリのプレビュー

概要

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.


tip

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の統合​


  • Wagmi: React hooks for Ethereum
  • Viem: TypeScript interface for Ethereum
  • RainbowKit: Wallet connection
  • EIP-7702: Atomic batch transaction support

APIs & Data Sources​


前提条件


Quicknodeの設定​


  1. エンドポイントの作成：Quicknode にログインし、サポートしたいチェーンendpoint 新しいendpoint を作成します。このガイドでは、Base Optimismを使用します。

Since these APIs are available on mainnet only, you will need to set up your Quicknode account with a mainnet endpoint.

  1. Configure Quicknode services:
  • endpointダッシュボードにアクセスしたら、endpoint アドオン画面に移動してください。
  • Enable the Covalent GoldRush Wallet API endpoint add-on.
  • Activate the Swap API with the Aerodrome and Velodrome integrations. You can use the free tier to start.

  1. Get Covalent API Key: Click Sign in to Dashboard next to the Covalent GoldRush Wallet API add-on. This will redirect you to the Covalent dashboard where you can find your API key.

  2. Swap APIのURLを取得する: Open はじめに for the Aerodrome or Velodrome integration. This will show you the base API URLs you need to use in your application. Use the URL before the /v1/... この部分については、コード内で具体的なエンドポイントを追加するため、ここでは割愛します。完成形は次のような感じになるはずです： https://YOUR-QUICKNODE-ENDPOINT-URL/addon/YOUR-ADDON-ID

Reown（旧WalletConnect）の設定​

  1. Reown（旧WalletConnect）プロジェクトを作成する：Reown Cloudにアクセスし、新しいプロジェクトを作成します。プロジェクト名は自由に設定できます。

  2. プロジェクトIDの取得：プロジェクトを作成すると、プロジェクトダッシュボードにリダイレクトされます。ここで、アプリケーションで使用する必要があるプロジェクトIDを確認できます。

Quick Start

1. Clone the Repository​

git 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.

プレビュー

プレビュー

投稿とフィードバック
皆様からのご意見をお待ちしております。また、このサンプルアプリへのご協力も大歓迎です！
問題の報告やフィードバックの共有を行うには、GitHubのイシューを qn-ガイド-例 リポジトリ。
投稿するには、以下の手順に従ってください：
  1. リポジトリをフォークする
  2. フィーチャーブランチを作成する：
    git checkout -b feature/amazing-feature
  3. 変更をコミットします：
    git commit -m "素晴らしい機能を追加"
  4. ブランチをプッシュしてください：
    git push origin feature/amazing-feature
  5. プルリクエストを作成してください。
その他のサンプルアプリを見る
AML and CFT Compliant dApp
This application enables secure ETH staking with integrated compliance features. Built on Base and compatible with any Ethereum-based network, it leverages Chainlink Functions and Quicknode’s Risk Assessment API to ensure only low-risk wallets can participate in the staking pool.
AML and CFT Compliant dApp
Coinbase x402 Paywall
This crypto paywall demo shows how to monetize video content using blockchain payments via the x402 payment protocol. Built with Express.js, it requires users to pay USDC cryptocurrency to access premium videos on Base Sepolia testnet.
Coinbase x402 Paywall
AI Powered DeFi Yield Optimizer
This app teaches you how to integrate the Aerodrome Swap API with an AI model to create a personalized DeFi yield optimizer and analytics dashboard for Aerodrome.
AI Powered DeFi Yield Optimizer