Como usar webhooks na Optimism

Se você quer que sua aplicação web3 se comunique com aplicativos ou serviços de terceiros, você vai adorar webhooks. Neste tutorial, vamos aprender como configurar e usar webhooks na Optimism. Depois, vamos mostrar como configurar notificações automatizadas para envio e recebimento de ETH na Optimism no Slack.

O que é um webhook?

Webhooks são ferramentas que desenvolvedores web3 podem usar para permitir que aplicativos ou serviços de terceiros se comuniquem com aplicações quando um evento ocorre. Essa tecnologia é mais eficiente do que fazer polling contínuo em nós para verificar se um determinado estado mudou via uma API, já que webhooks permitem que esses servidores enviem notificações para a aplicação no momento do evento.

Os webhooks da Alchemy têm bastante potencial para melhorar a experiência do usuário e aumentar o engajamento de aplicações e serviços web3, como rastrear vendas de NFT em um canal do Discord ou enviar atividade de carteira para um canal do Slack.

Quais eventos da Optimism podem ser rastreados com webhooks?

Existem três tipos de eventos da Optimism para os quais podemos receber notificações via webhooks da Alchemy:

1. Mined transactions - uma transação é concluída
2. Dropped transactions - uma transação falha ou é descartada do mempool
3. Address Activity - tokens são recebidos ou transferidos

Neste tutorial, vamos rastrear eventos de Address Activity, onde receberemos notificações no Slack para envio e recebimento de ETH na Optimism.

Como configurar webhooks da Optimism

Aqui está o processo de 10 etapas para configurar webhooks da Optimism e automatizar notificações para o Slack. Esse processo pode ser seguido para várias outras plataformas de terceiros suportadas pelo Zapier, como Discord, Twitter e outras!

1. Crie uma carteira Ethereum

Precisamos de uma carteira Ethereum para enviar e receber transações. Neste tutorial, usaremos o MetaMask, uma carteira de ativos digitais baseada em navegador para gerenciar contas Ethereum. Baixe o MetaMask e crie uma conta gratuita

2. Faça login na Alchemy

Para facilitar as coisas, crie uma conta de desenvolvedor gratuita na Alchemy, para que você possa se comunicar com a chain Ethereum sem precisar rodar seus próprios nós.

3. Crie uma API key

Em seguida, crie um novo app para gerar uma API key e se conectar à testnet da Optimism.

Navegue até a página Create App no seu Alchemy Dashboard passando o mouse sobre Apps na barra de navegação e clique em Create App.

Dê um nome ao seu app (escolhemos "optimism_webhooks") e escreva uma breve descrição.

Em seguida, selecione Optimism para sua chain e escolha Optimism Sepolia para sua network.

Depois, clique em Create app.

Agora, clique no link do app recém-criado em Apps e clique em Add to Wallet.

Você agora deve estar conectado à testnet Optimism Sepolia no Metamask!

4. Obtenha ETH de testnet em um faucet Sepolia

Para fazer deploy do seu smart contract na testnet da Optimism, obtenha ETH no faucet Sepolia da Alchemy.

Primeiro, mude sua network no MetaMask para Ethereum Sepolia. Na página do faucet, cole o endereço da sua carteira e solicite ETH de teste.

Em seguida, você deve ver ETH de teste na sua conta MetaMask na Sepolia.

5. Obtenha OP Sepolia ETH

O caminho mais rápido é o faucet Optimism Sepolia da Alchemy. Você também pode fazer bridge de ETH da Sepolia para a OP Sepolia com a Superchain Bridges UI.

Assim que tiver OP Sepolia ETH na sua carteira, continue para a configuração do webhook.

6. Crie um zap e uma URL de webhook da Optimism

Agora, crie sua conta no Zapier ou faça login na sua conta se você já tiver uma conta no Zapier.

Em seguida, no dashboard, clique em Create Zap no canto superior esquerdo.

Vamos agora criar a URL do webhook para enviar a resposta do webhook da Alchemy para o Zapier.

Em Trigger, procure e selecione Webhooks by Zapier como o app event/trigger.

Para o Trigger Event, selecione Catch Hook, já que o Zapier está esperando que o webhook de address activity da Alchemy envie os dados do evento para a URL sempre que ocorrer uma transferência.

Clique em Continue para ir para a seção Set up trigger e copie a Custom Webhook URL.

7A. Crie um webhook da Optimism

Agora, precisamos criar o webhook de address activity para rastrear eventos de transferência e enviar esses dados para a URL de webhook do Zapier.

Vamos mostrar duas maneiras de configurar o webhook: primeiro pela aba Notify da Alchemy no dashboard, e segundo, de forma programática, usando a Notify API da Alchemy (recomendado para lidar com webhooks de address activity para 10+ endereços).

1. Certifique-se de estar no ecossistema Ethereum + L2 no canto superior esquerdo do Alchemy dashboard
2. Navegue até a aba Notify e clique no botão + Create Webhook na seção Address Activity
3. Selecione Chain como Optimism
4. Selecione Network como Sepolia
5. Cole a URL do webhook que você copiou do Zapier na etapa anterior
6. Cole o endereço da sua carteira MetaMask na seção Ethereum Addresses.

OBSERVAÇÃO: Se você quiser testar se o webhook da Alchemy envia requisições com sucesso para a URL de webhook do Zapier antes de confirmar a criação, clique em Test Webhook ao lado da URL do webhook. Ou, se você já criou o webhook mas quer testar novamente, clique nos três pontos ao lado do seu webhook e selecione Send Test Notification.

Agora, volte ao Zapier e continue para a seção Test trigger, e clique em Test trigger.

Se você ver uma mensagem "We found a request message", parabéns!

7B. Crie um webhook da Optimism usando a notify API

Se você quiser criar webhooks para múltiplos endereços Optimism, use a Notify API. Para começar, copie seu token de autenticação da Alchemy (X-Alchemy-Token) no canto superior direito do seu Notify dashboard, sob o botão AUTH TOKEN.

Em seguida, vá até a linha de comando e digite o seguinte:

*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"]\}'``

Lembre-se de usar seu próprio your-X-Alchemy-Token, your-Zapier-Webhook-URL e your-Ethereum-Address (ou seja, o endereço da carteira que você colou), e você pode adicionar quantos endereços Ethereum quiser para rastrear seus eventos de transferência.

Depois de atualizar a página, você deve ver o webhook de address activity recém-criado aparecer no seu Notify dashboard com todos os parâmetros especificados.

8. Processe as respostas do webhook da Optimism no zapier

Dada a resposta do webhook da Alchemy, precisamos processá-la no Zapier para criar uma ação que envie um alerta sempre que nosso endereço Optimism enviar uma transação com sucesso.

Na seção Action, selecione a opção Filter do lado direito.

Em Filter setup & testing, queremos continuar se o Event Activity From Address (ou você pode simplesmente procurar por fromAddress) (Text) Exactly matches nosso endereço Optimism (cole-o no último campo de texto).

Se você clicar em Continue e ver "Your Zap would not have continued", não se preocupe! A notificação de teste não foi enviada pela carteira, então essa mensagem é esperada.

9. Integre seus webhooks da Optimism com o slack

Primeiro, vamos criar uma conta e um workspace no Slack. Crie uma conta no Slack ou faça login na sua conta se já tiver uma. Depois, crie um novo workspace. Chamamos o nosso de Optimism Wallet Alerts, mas fique à vontade para usar sua própria criatividade!

Trate alertas de envio de tokens

Em seguida, queremos enviar uma mensagem se nossa carteira for a remetente de um evento de transferência.

1. Clique em "+" na parte inferior
2. Procure e selecione Slack na nova seção Action
3. Para o Action Event, escolha Send Channel Message
4. Depois de clicar em Continue, faça login na sua conta do Slack
5. Preencha os campos para enviar nossa mensagem na seção Set up action
6. Selecione o canal para o qual você quer que os alertas sejam enviados (Optimism-Wallet-Alerts no nosso caso).

No texto da mensagem, você pode ser criativo e escolher quais campos e valores quer enviar.

Nós escolhemos estes campos:

Você pode deixar tudo o mais na opção padrão.

Clique em continue, depois em test and continue.

Se nenhum erro aparecer, significa que estamos prontos! Uma mensagem no Slack deve ter sido criada na sua conta. Agora, publique o Zap.

Parabéns! Agora, sempre que sua carteira Optimism enviar uma transação, nosso Zap enviará uma mensagem detalhando essa transação.

Você também pode ver os detalhes de execução do seu Zap na página Zap History do dashboard do Zapier.

10. Envie uma mensagem para tratar o recebimento de tokens na Optimism

Também queremos enviar alertas quando nossa carteira estiver do lado receptor de uma transação Optimism.

Primeiro, edite a ação continue only if.

Clique em Filter Setup & Testing e pressione o botão "+ or", preenchendo Event Activity To Address (ou você pode simplesmente procurar por fromAddress) e (Text) Exactly matches nosso endereço Optimism (cole-o no último campo de texto).

Ótimo, agora nosso Zap será executado quando a Wallet também for destinatária!

Em seguida, vamos criar uma ação Code by Zapier entre nossas ações Only continue if… e Send Channel Message in Slack.

Você pode escolher Run Python ou Run Javascript. Vamos escolher a segunda, mas a lógica funciona da mesma forma para Python.

Depois de clicar em Continue, configuraremos nossos dados de entrada em Set up action da seguinte forma:

Estamos processando a resposta do webhook novamente porque nossa notificação atual só foi escrita para quando nossa carteira envia ETH. Portanto, precisamos personalizá-la para quando nossa carteira recebe ETH.

No bloco de código, cole o seguinte código (leia os comentários para ver o que cada linha significa):

// 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\}\];

Novamente, lembre-se de substituir Wallet-Address pelo endereço da sua carteira MetaMask. Ao testar a ação, não se preocupe se ela não atribuir nada às variáveis de output.

Por fim, vá até a ação Send Channel Message in Slack e clique na seção Set up action.

Agora vamos substituir os campos genéricos da resposta do webhook no texto da mensagem pelos outputs mais dinâmicos do nosso código Javascript, que são personalizados dependendo se nossa Wallet enviou ou recebeu tokens:

Clique em Continue e teste sua ação. Depois publique!

Parabéns! Você acabou de terminar de criar webhooks da Optimism!