Token Sweeper: Intercambio por lotes según la EIP-7702
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.
Resumen
Token Sweeper es una aplicación DeFi que permite a los usuarios agrupar de forma eficiente varios saldos pequeños de tokens ERC-20 en un único token de su elección mediante transacciones por lotes EIP-7702. Disfruta de los intercambios atómicos con una sola firma en Optimism Base Optimism .
Esta aplicación de ejemplo se ofrece únicamente con fines educativos y de demostración. Su uso es bajo tu propia responsabilidad.
Si quieres una guía detallada sobre cómo desarrollar esta aplicación, consulta la guía técnica.
¡Descubre cómo funciona el recogedor de fichas!
🚀 Pruébalo tú mismo con la demostración en directo →
Características
- 🔄 Consolidación de múltiples tokens: Convierte varios tokens de valor insignificante en un único token preferido con un enrutamiento óptimo
- ⚡ EIP-7702 Transacciones por lotes: Ejecutar todos los intercambios de forma atómica con una única firma de transacción
- 📊 Seguimiento de la cartera en tiempo real: obtención del saldo de tokens en tiempo real a través de la API de Covalent GoldRush Token
- 🛡️ Filtrado avanzado de spam: detección de tokens de spam o estafa mediante la API de Covalent GoldRush Token y las API de Aerodrome/Velodrome Swap
- 🌐 Compatibilidad con múltiples cadenas: Compatibilidad total con Base 8453) y Optimism 10), con integración nativa de DEX (Aerodrome y Velodrome)
- 📱 Tarjetas de logros en redes sociales: Crea y comparte bonitas tarjetas de logros tras un intercambio de publicaciones
Pila tecnológica
Marco de trabajo de front-end
- Next.js: marco de trabajo de React con App Router
- TypeScript: Desarrollo con seguridad de tipos
- Tailwind CSS: Marco de trabajo CSS basado en utilidades
- shadcn/ui: Biblioteca moderna de componentes de React
Integración con Web3
- Wagmi: Hooks de React para Ethereum
- Viem: interfaz de TypeScript para Ethereum
- RainbowKit: Conexión con el monedero
- EIP-7702: Compatibilidad con transacciones por lotes atómicas
API y fuentes de datos
- API de la cartera Covalent GoldRush: Obtención del saldo de tokens
- API de intercambio de Aerodrome: Cotizaciones y swaps en Aerodrome, el principal DEX de Base
- API de Velodrome Swap: Cotizaciones y permutas en Velodrome, el principal DEX de Optimism
Requisitos previos
- Node.js 20+
- A Quicknode con Optimism de 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)
- ID del proyecto de Reown, anteriormente WalletConnect
- MetaMask o un monedero compatible con EIP-7702
Configuración de Quicknode
- Crear puntos finales: Inicia sesión en tu Quicknode y crea un nuevo endpoint cada cadena que quieras admitir. Para esta guía, utilizaremos 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:
- Una vez que estés en el panel de control endpoint tu endpoint, ve a la sección «Complementos» de tu 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.
-
Obtener las URL de la API de Swap: Open Primeros pasos 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/...por un lado, ya que añadiremos los puntos finales específicos en nuestro código. Debería quedar algo así:https://YOUR-QUICKNODE-ENDPOINT-URL/addon/YOUR-ADDON-ID
Configuración de Reown (antes conocido como WalletConnect)
-
Crear un proyecto de Reown (antes conocido como WalletConnect): Entra en Reown Cloud y crea un nuevo proyecto. Puedes ponerle el nombre que quieras.
-
Obtener el ID del proyecto: Una vez creado el proyecto, se te redirigirá al panel de control del proyecto. Aquí encontrarás el ID del proyecto, que deberás utilizar en tu solicitud.
Inicio rápido
1. Clonar el repositorio
git clone https://github.com/quiknode-labs/qn-guide-examples.git
cd qn-guide-examples/sample-dapps/token-sweeper-eip-7702
2. Instalar las dependencias
npm instalar
# o con yarn
yarn install
# o con pnpm
pnpm instalar
3. Configuración del entorno
cp .env.example .env
Editar .env:
# Claves de API
COVALENT_API_KEY=tu_clave_API_de_Covalent_aquí
# ID del proyecto de WalletConnect
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=tu_id_de_proyecto_de_walletconnect_aquí
# URL de RPC (opcional; si no se configuran, se utilizarán las RPC públicas, lo cual no se recomienda en entornos de producción)
NEXT_PUBLIC_BASE_RPC_URL=tu_url_rpc_base_aquí
NEXT_PUBLIC_OPTIMISM_RPC_URL=tu_url_rpc_de_optimism_aquí
# URL de la API de Aerodrome/Velodrome (necesarias para la funcionalidad de intercambio)
AERODROME_BASE_API=tu_api_base_de_aeródromo_de_QuickNode_aquí
VELODROME_OPTIMISM_API=tu_API_de_QuickNode_para_el_velódromo_aquí
4. Ejecutar el servidor de desarrollo
npm ejecutar dev
# o con yarn
yarn dev
# o con pnpm
pnpm dev
Visita http://localhost:3000 para ver la solicitud.
Vista previa
- Hacer un fork del repositorio
- Crear una rama de características:git checkout -b feature/amazing-feature
- Guarda los cambios:git commit -m "Añadir una función increíble"
- Envía tu rama:git push origin feature/amazing-feature
- Abre una solicitud de incorporación de cambios.
