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.
Overzicht
Token Sweeper is een DeFi-applicatie waarmee gebruikers meerdere kleine saldi aan ERC-20-tokens efficiënt kunnen samenvoegen tot één token naar keuze, met behulp van EIP-7702-batchtransacties. Ervaar atomic swaps met één enkele handtekening op Base Optimism .
Deze voorbeeldapp wordt uitsluitend aangeboden voor educatieve en demonstratiedoeleinden. Gebruik op eigen risico.
Raadpleeg de technische handleiding voor een uitgebreide uitleg over het bouwen van deze app
Bekijk de token-sweeper in actie!
🚀 Probeer het zelf uit met de live demo →
Kenmerken
- 🔄 Consolidatie van meerdere tokens: zet meerdere dust-tokens om in één voorkeurstoken met optimale routing
- ⚡ EIP-7702 Batchtransacties: alle swaps atomair uitvoeren met één enkele transactiehandtekening
- 📊 Real-time portefeuilleoverzicht: live opvragen van tokensaldi via de Covalent GoldRush Token API
- 🛡️ Geavanceerde spamfiltering: detectie van spam- en scam-tokens via de Covalent GoldRush Token API en de Aerodrome/Velodrome Swap API’s
- 🌐 Ondersteuning voor meerdere blockchains: Volledige ondersteuning voor Base 8453) en Optimism 10) met native DEX-integratie (Aerodrome en Velodrome)
- 📱 Social-prestatiekaarten: maak prachtige prestatiekaarten na een ruil en deel ze
Technologiestack
Frontend-framework
- Next.js: React-framework met App Router
- TypeScript: Typeveilige ontwikkeling
- Tailwind CSS: een CSS-framework waarin functionaliteit voorop staat
- shadcn/ui: Moderne React-componentbibliotheek
Web3-integratie
- Wagmi: React-hooks voor Ethereum
- Viem: TypeScript-interface voor Ethereum
- RainbowKit: Koppeling met portemonnee
- EIP-7702: Ondersteuning voor atomaire batchtransacties
API's en gegevensbronnen
- Covalent GoldRush Wallet API: Tokensaldo ophalen
- Aerodrome Swap API: Koersen en swaps op Aerodrome, de toonaangevende DEX op Base
- Velodrome Swap API: Koersen en swaps op Velodrome, de toonaangevende DEX op Optimism
Vereisten
- Node.js 20+
- A Quicknode Quicknode-account met Base Optimism
- The Covalent GoldRush Wallet API endpoint add-on (free tier not available) and Quicknode's Swap API with the Aerodrome or Velodrome integration (free tier available)
- Project-ID van Reown, voorheen WalletConnect
- MetaMask of een compatibele wallet die EIP-7702 ondersteunt
Quicknode instellen
- Eindpunten aanmaken: Log in op je Quicknode en maak een nieuw endpoint aan endpoint elke blockchain die je wilt ondersteunen. In deze handleiding gebruiken we Base Optimism.
Since these APIs are available on mainnet only, you will need to set up your Quicknode account with a mainnet endpoint.
- Configure Quicknode services:
- Zodra je in het dashboard endpoint je endpoint bent, ga je naar de add-ons voor je 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.
-
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.
-
Swap API-URL's ophalen: Open Aan de slag 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/...deel, aangezien we de specifieke eindpunten in onze code zullen toevoegen. Het zou er ongeveer zo uit moeten zien:https://YOUR-QUICKNODE-ENDPOINT-URL/addon/YOUR-ADDON-ID
Reown instellen (voorheen WalletConnect)
-
Een Reown-project (voorheen WalletConnect) aanmaken: Ga naar de Reown Cloud en maak een nieuw project aan. Je kunt het een naam naar keuze geven.
-
Project-ID ophalen: Nadat je het project hebt aangemaakt, word je doorgestuurd naar het projectdashboard. Hier vind je je project-ID, die je in je aanvraag moet vermelden.
Snel aan de slag
1. Kloon de repository
git clone https://github.com/quiknode-labs/qn-guide-examples.git
cd qn-guide-examples/sample-dapps/token-sweeper-eip-7702
2. Afhankelijkheden installeren
npm install
# of met yarn
yarn install
# of met pnpm
pnpm installeren
3. Configuratie van de omgeving
cp .env.voorbeeld .env
Bewerken .env:
# API-sleutels
COVALENT_API_KEY=uw_covalent_api-sleutel_hier
# WalletConnect-project-ID
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=uw_walletconnect-project-id_hier
# RPC-URL's (optioneel – als deze niet zijn ingesteld, worden openbare RPC's gebruikt, wat niet wordt aanbevolen voor productieomgevingen)
NEXT_PUBLIC_BASE_RPC_URL=je_basis-rpc-url_hier
NEXT_PUBLIC_OPTIMISM_RPC_URL=uw_optimism_rpc_url_hier
# API-URL's voor vliegvelden/velodromes (vereist voor de swap-functionaliteit)
AERODROME_BASE_API=uw_quicknode_aerodrome_base_api_hier
VELODROME_OPTIMISM_API=uw_quicknode_velodrome_optimism_api_hier
4. Start de ontwikkelingsserver
npm run dev
# of met yarn
yarn dev
# of met pnpm
pnpm dev
Bezoek http://localhost:3000 om de aanvraag te bekijken.
Voorbeeld
- Maak een fork van de repository
- Maak een feature-branch aan:git checkout -b feature/amazing-feature
- Sla je wijzigingen op:git commit -m "Geweldige functie toevoegen"
- Pusht je branch:git push origin feature/amazing-feature
- Dien een pull-verzoek in.
