Como usar webhooks na Optimism

Se você quer que sua aplicação web3 se comunique com apps 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 apps 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 nodes para verificar se um determinado estado mudou via uma API, já que webhooks permitem que esses servidores enviem notificações para o app 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 wallet para um canal do Slack.

Quais eventos da Optimism podem ser rastreados com webhooks?

Há 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

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

Como configurar webhooks na Optimism

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

1. Crie uma wallet Ethereum

Precisamos de uma wallet Ethereum para enviar e receber transações. Para este tutorial, usaremos a MetaMask, uma wallet de ativos digitais baseada em navegador para gerenciar contas Ethereum. Baixe a 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 nodes.

3. Crie uma API key

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

Navegue até a página Create App no seu Alchemy Dashboard passando o mouse sobre Apps na navbar e clique em Create App.

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

Em seguida, selecione Optimism como sua chain e escolha Optimism Goerli como 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ê já deve estar conectado à testnet Optimism Goerli no Metamask!

4. Obtenha ETH de testnet no faucet da Goerli

Para fazer deploy do seu smart contract na testnet da Optimism, obtenha ETH de um faucet da Goerli.

Primeiro, mude sua network no MetaMask para Ethereum Goerli, e depois clique em Claim.

Em seguida, você deve ver 0.05 ETH na sua conta MetaMask na testnet Goerli.

5. Faça a ponte de ETH da Goerli para a testnet Optimism-Goerli

Ainda não existe uma bridge pública para transferir ETH da Goerli para a Optimism, mas isso pode ser feito usando o Cast do Foundry, um toolkit para desenvolvimento de aplicações Ethereum.

Use este trecho de código:

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

Agora você tem ETH da Goerli na testnet Opt-Goerli.

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.

Agora vamos criar a URL de 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 estará esperando o webhook de address activity da Alchemy enviar os dados do evento para a URL sempre que ocorrer uma transferência.

Clique em Continue para ir à 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 formas de configurar o webhook, primeiro pela aba Notify da Alchemy dentro do dashboard, e segundo programaticamente 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 Optimism como Chain
4. Selecione Goerli como Network
5. Cole a URL de webhook que você copiou do Zapier no passo anterior
6. Cole o endereço da sua wallet 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 até 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 na 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, no botão AUTH TOKEN.

Em seguida, vá até sua 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_KOVAN","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 wallet 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. Faça o parsing das respostas do webhook da Optimism no zapier

Dada a resposta do webhook da Alchemy, precisamos fazer o parsing dela no Zapier para criar uma ação que envie um alerta sempre que nosso endereço na Optimism enviar uma transação com sucesso.

Na seção Action, selecione a opção Filter no 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 na Optimism (cole 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 wallet, 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 você já tiver uma. Depois, crie um novo workspace. Nós chamamos o nosso de Optimism Wallet Alerts, mas sinta-se à vontade para usar sua própria criatividade!

Lidando com alertas para envio de tokens

Em seguida, queremos enviar uma mensagem se nossa wallet 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 onde 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 resto na opção padrão.

Clique em continue, depois em test and continue.

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

Parabéns! Agora, sempre que sua wallet na 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 no dashboard do Zapier.

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

Também queremos enviar alertas quando nossa wallet for a destinatária de uma transação na 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 na Optimism (cole 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 opção, mas a lógica funciona da mesma forma para Python.

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

Estamos fazendo o parsing da resposta do webhook novamente porque nossa notificação atual é escrita apenas para quando nossa wallet envia ETH. Portanto, precisamos personalizá-la para quando nossa wallet 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 wallet MetaMask. Ao testar a ação, não se preocupe se ela não atribuir nada às variáveis de saída.

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 pelas saídas mais dinâmicas do nosso código Javascript, que são personalizadas 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!