Cómo usar webhooks en Optimism

Si quieres que tu aplicación web3 se comunique con aplicaciones o servicios de terceros, los webhooks te van a encantar. En este tutorial, aprenderemos cómo configurar y usar webhooks en Optimism. Luego te mostraremos cómo configurar notificaciones automáticas para el envío y recepción de ETH en Optimism en Slack.

¿Qué es un webhook?

Los webhooks son herramientas que los desarrolladores web3 pueden usar para permitir que aplicaciones o servicios de terceros se comuniquen con las aplicaciones cuando ocurre un evento. Esta tecnología es más eficiente que hacer polling continuo a los nodos para verificar si un estado particular cambió mediante una API, ya que los webhooks permiten que estos servidores envíen notificaciones a la app en el momento del evento.

Los webhooks de Alchemy tienen bastante potencial para mejorar la experiencia del usuario e impulsar el engagement de aplicaciones y servicios web3, como rastrear ventas de NFT en un canal de Discord o enviar actividad de wallet a un canal de Slack.

¿Qué eventos de Optimism se pueden rastrear con webhooks?

Hay tres tipos de eventos de Optimism para los que podemos recibir notificaciones mediante webhooks de Alchemy:

1. Transacciones minadas: una transacción se completa
2. Transacciones descartadas: una transacción falla o se descarta del mempool
3. Actividad de dirección: se reciben o transfieren tokens

Para este tutorial, rastrearemos eventos de Actividad de dirección, donde recibiremos notificaciones de Slack por el envío y recepción de ETH en Optimism.

Cómo configurar webhooks de Optimism

Aquí está el proceso de 10 pasos para configurar webhooks de Optimism y automatizar notificaciones a Slack. Este proceso se puede seguir para muchas otras plataformas de terceros compatibles con Zapier, como Discord, Twitter, y más.

1. Crea una wallet de Ethereum

Necesitamos una wallet de Ethereum para enviar y recibir transacciones. Para este tutorial, usaremos MetaMask, una wallet de activos digitales basada en el navegador para administrar cuentas de Ethereum. Descarga MetaMask y crea una cuenta gratuita.

2. Inicia sesión en Alchemy

Para facilitar las cosas, regístrate para obtener una cuenta gratuita de desarrollador de Alchemy, para que puedas comunicarte con la cadena de Ethereum sin tener que correr tus propios nodos.

3. Crea una API key

A continuación, crea una nueva app para generar una API key y conectarte a la red de prueba de Optimism.

Navega a la página Create App en tu Alchemy Dashboard pasando el mouse sobre Apps en la barra de navegación y haz clic en Create App.

Nombra tu app (nosotros elegimos "optimism_webhooks"), y escribe una breve descripción.

A continuación, selecciona Optimism como tu chain y elige Optimism Sepolia como tu network.

Luego, haz clic en Create app.

Ahora, haz clic en el enlace de la app recién creada bajo Apps y haz clic en Add to Wallet.

¡Ahora deberías estar conectado a la testnet de Optimism Sepolia en Metamask!

4. Obtén ETH de testnet desde un faucet de Sepolia

Para desplegar tu smart contract en la red de prueba de Optimism, obtén ETH del faucet de Sepolia de Alchemy.

Primero, cambia tu red de MetaMask a Ethereum Sepolia. En la página del faucet, pega tu dirección de wallet y solicita ETH de prueba.

Luego, deberías ver ETH de prueba en tu cuenta de MetaMask en Sepolia.

5. Obtén ETH de OP Sepolia

El camino más rápido es el faucet de Optimism Sepolia de Alchemy. También puedes hacer bridge de ETH de Sepolia a OP Sepolia con la interfaz de Superchain Bridges.

Una vez que tengas ETH de OP Sepolia en tu wallet, continúa con la configuración del webhook.

6. Crea un zap y una URL de webhook de Optimism

Ahora, crea tu cuenta de Zapier o inicia sesión en tu cuenta si ya tienes una cuenta de Zapier.

A continuación, en el dashboard, haz clic en Create Zap en la esquina superior izquierda.

Ahora crearemos la URL del webhook para enviar la respuesta del webhook desde Alchemy hacia Zapier.

Bajo Trigger, busca y selecciona Webhooks by Zapier como el app event/trigger.

Para el Trigger Event, selecciona Catch Hook ya que Zapier está esperando que el webhook de actividad de dirección de Alchemy envíe los datos del evento a la URL cada vez que ocurre una transferencia.

Haz clic en Continue para ir a la sección Set up trigger y copia la Custom Webhook URL.

7A. Crea un webhook de Optimism

Ahora, necesitamos crear el webhook de actividad de dirección para rastrear eventos de transferencia y enviar esos datos a la URL del webhook de Zapier.

Mostraremos dos formas de configurar el webhook: primero desde la pestaña Notify de Alchemy dentro del dashboard, y segundo programáticamente usando la Notify API de Alchemy (recomendado para manejar webhooks de actividad de dirección con 10 o más direcciones).

1. Asegúrate de estar en el ecosistema Ethereum + L2 en la parte superior izquierda del Alchemy dashboard
2. Navega a la pestaña Notify y haz clic en el botón + Create Webhook en la sección Address Activity
3. Selecciona Optimism como Chain
4. Selecciona Sepolia como Network
5. Pega la URL del webhook que copiaste de Zapier en el paso anterior
6. Pega la dirección de tu wallet de MetaMask en la sección Ethereum Addresses.

NOTA: Si quieres probar si el webhook de Alchemy envía correctamente las solicitudes a la URL del webhook de Zapier antes de confirmar la creación, haz clic en Test Webhook junto a la URL del webhook. O si ya creaste el webhook pero quieres probarlo de nuevo, haz clic en los tres puntos junto a tu webhook y selecciona Send Test Notification.

Ahora, vuelve a Zapier y continúa a la sección Test trigger, y haz clic en Test trigger.

Si ves un mensaje "We found a request", ¡felicidades!

7B. Crea un webhook de Optimism usando la notify API

Si quieres crear webhooks para múltiples direcciones de Optimism, usa la Notify API. Para comenzar, copia tu token de autenticación de Alchemy (X-Alchemy-Token) desde la esquina superior derecha de tu dashboard de Notify bajo el botón AUTH TOKEN.

Luego, ve a tu línea de comandos y escribe lo siguiente:

*curl https://dashboard.alchemy.com/api/create-webhook \

*-X POST \

*-H "X-Alchemy-Token":"your-X-Alchemy-Token" \

-d '\{"network":"OPT_SEPOLIA","webhook_type":"ADDRESS_ACTIVITY","webhook_url":"your-Zapier-Webhook-URL", "addresses":["your-Ethereum-Address"]\}'``

Recuerda usar tu propio your-X-Alchemy-Token, your-Zapier-Webhook-URL y your-Ethereum-Address (es decir, la dirección de wallet que pegaste), y puedes agregar tantas direcciones de Ethereum como quieras para rastrear sus eventos de transferencia.

Después de actualizar, deberías ver el webhook de actividad de dirección recién creado aparecer en tu dashboard de Notify con todos los parámetros especificados.

8. Parsea las respuestas del webhook de Optimism en zapier

Dada la respuesta del webhook de Alchemy, necesitamos parsearla en Zapier para crear una acción que envíe una alerta cada vez que nuestra dirección de Optimism envíe exitosamente una transacción.

Bajo la sección Action, selecciona la opción Filter en el lado derecho.

En Filter setup & testing, queremos continuar si Event Activity From Address (o simplemente puedes buscar fromAddress) (Text) Exactly matches nuestra dirección de Optimism (pégala en el último campo de texto).

Si haces clic en Continue y ves "Your Zap would not have continued", ¡no te preocupes! La notificación de prueba no se envió desde la wallet, así que este mensaje es esperado.

9. Integra tus webhooks de Optimism con slack

Primero, creemos una cuenta y un workspace de Slack. Crea una cuenta en Slack o inicia sesión en tu cuenta si ya tienes una. Luego, crea un nuevo workspace. Nosotros nombramos el nuestro Optimism Wallet Alerts, ¡pero siéntete libre de usar tu propia creatividad!

Maneja alertas para el envío de tokens

A continuación, queremos enviar un mensaje si nuestra wallet es la que envía en un evento de transferencia.

1. Haz clic en "+" en la parte inferior
2. Busca y selecciona Slack en la nueva sección Action
3. Para el Action Event, elige Send Channel Message
4. Después de hacer clic en Continue, inicia sesión en tu cuenta de Slack
5. Completa los campos para enviar nuestro mensaje en la sección Set up action
6. Selecciona el canal donde quieres que se envíen las alertas (Optimism-Wallet-Alerts en nuestro caso).

En el texto del mensaje, puedes ser creativo y elegir qué campos y valores quieres enviar.

Nosotros elegimos estos campos:

Puedes dejar todo lo demás en la opción predeterminada.

Haz clic en continue, luego en test and continue.

Si no aparecen errores, ¡eso significa que todo está listo! Debería haberse generado un mensaje de Slack en tu cuenta. Ahora, publica el Zap.

¡Felicidades! Ahora, cada vez que tu wallet de Optimism envíe una transacción, nuestro Zap enviará un mensaje detallando esa transacción.

También puedes ver los detalles de ejecución de tu Zap en la página Zap History del dashboard de Zapier.

10. Envía un mensaje para manejar la recepción de tokens en Optimism

También queremos enviar alertas cuando nuestra wallet sea la receptora de una transacción de Optimism.

Primero, edita la acción continue only if.

Haz clic en Filter Setup & Testing y presiona el botón "+ or", completando Event Activity To Address (o simplemente puedes buscar fromAddress) y (Text) Exactly matches nuestra dirección de Optimism (pégala en el último campo de texto).

Genial, ¡ahora nuestro Zap se ejecutará cuando la wallet también sea destinataria!

A continuación, creemos una acción de Code by Zapier entre nuestras acciones Only continue if… y Send Channel Message in Slack.

Puedes elegir Run Python o Run Javascript. Nosotros elegiremos la segunda opción, pero la lógica funciona igual para Python.

Después de hacer clic en Continue, configuraremos nuestros datos de entrada bajo Set up action de la siguiente manera:

Estamos parseando de nuevo la respuesta del webhook porque nuestra notificación actual solo está escrita para cuando nuestra wallet envía ETH. Por lo tanto, necesitamos personalizarla para cuando nuestra wallet recibe ETH.

En el bloque de código, pega el siguiente código (lee los comentarios para ver qué significa cada línea):

// Since JavaScript is case-sensitive, we will be comparing addresses in upper case const address = "Wallet-Address".toUpperCase\(\); // Define Account 1 \(Our wallet\) let account\_1 = ""; // Define Account 2 \(the user our wallet is sending to / receiving from\) let account\_2 = ""; // Define to use "to" or "from" in message let t\_or\_f = ""; let f\_or\_t = ""; if \(inputData.fromAddress.toUpperCase\(\) == address\) \{ // If Wallet is sending, then it is the fromAddress account\_1 = inputData.fromAddress; account\_2 = inputData.toAddress; t\_or\_f = "from"; f\_or\_t = "to"; \} else if \(inputData.toAddress.toUpperCase\(\) == address\) \{ // If Wallet is receiving, then it is the toAddress account\_1 = inputData.toAddress; account\_2 = inputData.fromAddress; t\_or\_f = "to"; f\_or\_t = "from"; \} // Output the fields to be used in email output = \[\{account\_1: account\_1, account\_2: account\_2, t\_or\_f: t\_or\_f, f\_or\_t: f\_or\_t\}\];

De nuevo, recuerda reemplazar Wallet-Address con la dirección de tu wallet de MetaMask. Al probar la acción, no te preocupes si no se le asigna nada a las variables de salida.

Por último, ve a la acción Send Channel Message in Slack y haz clic en la sección Set up action.

Ahora reemplazaremos los campos genéricos de la respuesta del webhook en el texto del mensaje con las salidas más dinámicas de nuestro código de Javascript, que se personalizan según si nuestra wallet envió o recibió tokens:

Haz clic en Continue y prueba tu acción. ¡Luego publícalo!

¡Felicidades! Acabas de terminar de crear webhooks de Optimism.