Cómo usar webhooks en Optimism

Si quieres que tu aplicación web3 se comunique con apps o servicios de terceros, te van a encantar los webhooks. 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 apps o servicios de terceros se comuniquen con aplicaciones cuando ocurre un evento. Esta tecnología es más eficiente que consultar continuamente los nodos para verificar si un estado en 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 mucho potencial para mejorar la experiencia de usuario e impulsar el engagement de aplicaciones y servicios web3, como rastrear ventas de NFT en un canal de Discord o enviar actividad de una 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 la 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 gratis.

2. Inicia sesión en Alchemy

Para facilitar las cosas, regístrate para obtener una cuenta de desarrollador gratuita en Alchemy, así puedes 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 cursor 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 Goerli como tu network.

Luego, haz clic en Create app.

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

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

4. Obtén ETH de testnet desde el faucet de Goerli

Para desplegar tu smart contract en la red de prueba de Optimism, obtén ETH de un faucet de Goerli.

Primero, cambia tu red de MetaMask a Ethereum Goerli, y luego haz clic en Claim.

Luego, deberías ver 0.05 ETH en tu cuenta de MetaMask en la testnet de Goerli.

5. Bridgea ETH de Goerli a la testnet de Optimism-Goerli

Todavía no hay un bridge público para transferir ETH de Goerli a Optimism, pero se puede lograr usando Cast de Foundry, un toolkit para el desarrollo de aplicaciones de Ethereum.

Usa este fragmento de código:

cast send --legacy --rpc-url=$ALCHEMY-OPT-GOERLI-ENDPOINT --value=0.001ether --private-key= 0x636Af16bf2f682dD3109e60102b8E1A089FedAa8

Ahora ya tienes ETH de Goerli en la testnet de Opt-Goerli.

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 de Alchemy a Zapier.

En 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 ocurra 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 de webhook de Zapier.

Mostraremos dos formas de configurar el webhook: primero desde la pestaña Notify de Alchemy dentro del dashboard, y segundo, de forma programática 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 en Chain
4. Selecciona Goerli en Network
5. Pega la URL de webhook que copiaste de Zapier en el paso anterior
6. Pega tu dirección de wallet de MetaMask en la sección Ethereum Addresses.

NOTA: Si quieres probar si el webhook de Alchemy envía correctamente solicitudes a la URL de 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, regresa 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 message", ¡felicidades!

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

Si quieres crear webhooks para varias 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 Notify dashboard, en 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_KOVAN","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 en tu Notify dashboard con todos los parámetros que especificaste.

8. Analiza las respuestas del webhook de Optimism en Zapier

Dada la respuesta del webhook de Alchemy, necesitamos analizarla 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.

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

En Filter setup & testing, queremos continuar si el campo 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 encuentras que "Your Zap would not have continued", ¡no te preocupes! La notificación de prueba no fue enviada 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 en el que 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 estamos listos! Debería haberse creado 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á también cuando la wallet sea receptora!

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 en Set up action de la siguiente manera:

Estamos analizando 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 tu dirección de wallet de MetaMask. Al probar la acción, no te preocupes si no 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 publica!

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