---
title: "Cómo usar webhooks en Optimism"
description: "Qué son los Webhooks de Optimism y cómo usarlos en Web3"
---

# 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](https://www.alchemy.com/layer2/optimism/?a=a40402f9aa). 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**](https://www.alchemy.com/overviews/what-is-a-webhook) 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](https://www.alchemy.com/docs/reference/notify-api-quickstart) 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
1. Transacciones descartadas: una transacción falla o se descarta del mempool
1. 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](https://www.alchemy.com/dapps/metamask)**, una wallet de activos digitales basada en el navegador para administrar cuentas de Ethereum. [Descarga MetaMask](https://metamask.io/download.html) 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](https://dashboard.alchemy.com/signup), 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](https://www.alchemy.com/docs).

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

<ImageBlock
  src="https://media.alchemy.com/1704209670-create-api-key-alchemy.jpg"
  alt="Panel de Alchemy: creación de una nueva app para generar una API key de Optimism"
  width={1600}
  height={912}
/>

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!

<ImageBlock
  src="https://media.alchemy.com/1704209686-alchemy-optimism-webhooks.png"
  alt="Panel de Alchemy: la nueva app de Optimism Goerli con el botón Add to Wallet"
  width={1600}
  height={469}
/>

### 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](https://www.alchemy.com/overviews/goerli-faucet).

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](https://github.com/foundry-rs/foundry/tree/master/cast), 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](https://zapier.com/sign-up) 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_.

<ImageBlock
  src="https://media.alchemy.com/1704209746-zap-and-optimism-webhook-url.png"
  alt="Editor de Zap de Zapier: copiando la URL del webhook personalizado desde el trigger Catch Hook"
  width={1600}
  height={634}
/>

### 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
1. Navega a la pestaña Notify y haz clic en el botón _+ Create Webhook_ en la sección *Address Activity*
1. Selecciona _Optimism_ en _Chain_
1. Selecciona *Goerli* en _Network_
1. Pega la URL de webhook que copiaste de Zapier en el paso anterior
1. 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](https://www.alchemy.com/docs/reference/webhooks-overview). 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_.

<ImageBlock
  src="https://media.alchemy.com/1704209787-alchemy-auth-token.png"
  alt="Panel de Alchemy que muestra dónde copiar el Auth Token para la API de Notify."
  width={1600}
  height={152}
/>

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.

<ImageBlock
  src="https://media.alchemy.com/1704209834-optimism-webhook-responses-zapier.png"
  alt="Configuración de filtro en Zapier: coincidencia del fromAddress del webhook con la dirección de wallet de Optimism"
  width={1600}
  height={912}
/>

### 9. Integra tus webhooks de Optimism con Slack

Primero, creemos una cuenta y un workspace de Slack. Crea una cuenta en [Slack](https://slack.com/) 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
1. Busca y selecciona _Slack_ en la nueva sección _Action_
1. Para el _Action Event_, elige _Send Channel Message_
1. Después de hacer clic en _Continue_, inicia sesión en tu cuenta de Slack
1. Completa los campos para enviar nuestro mensaje en la sección _Set up action_
1. 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:

<ImageBlock
  src="https://media.alchemy.com/1704209860-alerts-for-sending-tokens.png"
  alt="Acción de Slack en Zapier: campos de mensaje elegidos para las alertas de transferencia de tokens de Optimism"
  width={864}
  height={133}
/>

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:

<ImageBlock
  src="https://media.alchemy.com/1704209961-run-javascript-code-zapier.png"
  alt="Acción Code by Zapier: configuración de los datos de entrada para el paso de JavaScript"
  width={1600}
  height={862}
/>

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:

<ImageBlock
  src="https://media.alchemy.com/1704209901-send-channel-message.png"
  alt="Acción Send Channel Message in Slack; hacer clic en la sección Set up action"
  width={876}
  height={173}
/>

Haz clic en _Continue_ y prueba tu acción. ¡Luego publica!

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