Optimismでwebhookを使う方法

Web3アプリケーションをサードパーティのアプリやサービスと連携させたいなら、webhookはきっと役に立ちます。このチュートリアルでは、Optimismでwebhookをセットアップして使う方法を学びます。その後、OptimismでのETHの送受信をSlackで自動通知する方法を紹介します。

webhookとは何か

webhookは、イベントが発生したときにサードパーティのアプリやサービスがアプリケーションと通信できるようにする、web3開発者向けのツールです。この方式は、APIを使って特定の状態が変化したかどうかをノードにポーリングし続けるよりも効率的です。webhookなら、イベント発生時にサーバー側からアプリへ通知をプッシュできるためです。

Alchemy webhookは、web3アプリケーションやサービスのユーザー体験を改善し、エンゲージメントを高める大きな可能性を持っています。例えば、DiscordチャンネルでNFTの売買を追跡したり、Slackチャンネルにウォレットのアクティビティを送信したりできます。

webhookで追跡できるOptimismのイベント

Alchemy webhookで通知を受け取れるOptimismのイベントは3種類あります。

1. Mined transactions - トランザクションが完了した
2. Dropped transactions - トランザクションが失敗、またはmempoolから削除された
3. Address Activity - トークンが送受信された

このチュートリアルでは、_Address Activity_イベントを追跡し、OptimismでのETHの送受信についてSlack通知を受け取ります。

Optimism webhookのセットアップ方法

以下は、Optimism webhookをセットアップし、Slackへの通知を自動化する10ステップの手順です。この手順は、Discord、Twitterなど、Zapierがサポートする他のサードパーティプラットフォームにも応用できます。

1. Ethereumウォレットを作成する

トランザクションを送受信するには、Ethereumウォレットが必要です。このチュートリアルでは、Ethereumアカウントを管理するブラウザベースのデジタル資産ウォレットである**MetaMask**を使用します。MetaMaskをダウンロードして、無料アカウントを作成してください。

2. Alchemyにサインインする

作業を簡単にするため、Alchemyの無料開発者アカウントに登録しましょう。これにより、自前のノードを実行しなくてもEthereumチェーンと通信できます。

3. APIキーを作成する

次に、新しいアプリを作成してAPIキーを生成し、Optimismのテストネットに接続します。

Alchemyダッシュボードのナビバーで_Apps_にカーソルを合わせ、_Create App_をクリックして_Create App_ページに移動します。

アプリに名前を付け（ここでは「optimism_webhooks」としました）、簡単な説明を記入します。

次に、chainには_Optimism_を選択し、networkには_Optimism Goerli_を選択します。

その後、_Create app_をクリックします。

_Apps_の下にある新しく作成されたアプリのリンクをクリックし、_Add to Wallet_をクリックします。

これでMetaMaskがOptimism Goerliテストネットに接続されているはずです。

4. Goerliフォーセットからテストネット用ETHを取得する

スマートコントラクトをOptimismのテストネットにデプロイするため、Goerliフォーセットからテストネット用ETHを取得します。

まず、MetaMaskのネットワークをEthereum Goerliに切り替え、_Claim_をクリックします。

すると、Goerliテストネット上のMetaMaskアカウントに0.05 ETHが入っているはずです。

5. Goerli ETHをOptimism-Goerliテストネットへブリッジする

Goerli ETHをOptimismへ送るための公開ブリッジはまだありませんが、Ethereumアプリケーション開発のツールキットであるFoundry の Castを使えば実現できます。

次のコードスニペットを使用してください。

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

これで、Opt-GoerliテストネットにGoerli ETHが用意できました。

6. zapとOptimism webhook URLを作成する

次に、Zapierアカウントを作成します。すでにZapierアカウントを持っている場合はログインしてください。

ダッシュボードの左上にある_Create Zap_をクリックします。

ここでは、AlchemyからZapierへwebhookのレスポンスを送信するためのwebhook URLを作成します。

_Trigger_で、アプリのイベント／トリガーとして_Webhooks by Zapier_を検索して選択します。

_Trigger Event_には_Catch Hook_を選択します。Zapierは、転送が発生するたびにAlchemyのaddress activity webhookがイベントデータをそのURLに送信するのを待ち受けるためです。

_Continue_をクリックして_Set up trigger_セクションに進み、_Custom Webhook URL_をコピーします。

7A. Optimism webhookを作成する

次に、転送イベントを追跡し、そのデータをZapierのwebhook URLへ送信するためのaddress activity webhookを作成する必要があります。

ここでは2通りのwebhookのセットアップ方法を紹介します。1つ目はダッシュボード内のAlchemyのNotifyタブから、2つ目はAlchemy Notify APIをプログラムから使う方法です（10個以上のアドレスに対するaddress activity webhookを扱う場合はこちらを推奨します）。

1. Alchemyダッシュボード左上で_Ethereum + L2_エコシステムが選択されていることを確認します
2. Notifyタブに移動し、Address Activityセクションの_+ Create Webhook_ボタンをクリックします
3. _Chain_で_Optimism_を選択します
4. _Network_で_Goerli_を選択します
5. 前の手順でZapierからコピーしたwebhook URLを貼り付けます
6. MetaMaskのウォレットアドレスを_Ethereum Addresses_セクションに貼り付けます

注：作成を確定する前に、Alchemy webhookがZapierのwebhook URLへ正しくリクエストを送れるかテストしたい場合は、webhook URLの横にある_Test Webhook_をクリックしてください。すでにwebhookを作成済みで再度テストしたい場合は、webhookの横にある3つの点をクリックし、_Send Test Notification_を選択します。

次に、Zapierに戻り_Test trigger_セクションに進み、_Test trigger_をクリックします。

「We found a request message」と表示されれば成功です！

7B. Notify APIを使ってOptimism webhookを作成する

複数のOptimismアドレスに対してwebhookを作成したい場合は、Notify APIを使用します。始めるには、NotifyダッシュボードのAUTH TOKENボタンの下、右上にあるAlchemyの認証トークン（X-Alchemy-Token）をコピーします。

その後、コマンドラインで以下を入力します。

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

your-X-Alchemy-Token、your-Zapier-Webhook-URL、your-Ethereum-Address（つまり先ほど貼り付けたウォレットアドレス）は自分のものを使ってください。転送イベントを追跡したいEthereumアドレスはいくつでも追加できます。

再読み込みすると、指定したすべてのパラメータとともに、新しく作成されたaddress activity webhookがNotifyダッシュボードに表示されるはずです。

8. Zapier内でOptimism webhookのレスポンスをパースする

Alchemyからのwebhookレスポンスをもとに、Optimismアドレスがトランザクションの送信に成功したときにアラートを送信するアクションをZapier内で作成するため、レスポンスをパースする必要があります。

_Action_セクションで、右側の_Filter_オプションを選択します。

Filter setup & testing_で、Event Activity From Address（あるいは単に_fromAddress_で検索してもかまいません）の(Text) Exactly matches_が自分のOptimismアドレス（最後のテキストフィールドに貼り付けます）と一致した場合のみ続行するように設定します。

_Continue_をクリックして「Your Zap would not have continued」と表示されても心配ありません！テスト通知はウォレットから送信されたものではないため、このメッセージは想定通りです。

9. Optimism webhookをSlackと連携する

まず、Slackアカウントとワークスペースを作成しましょう。Slackでアカウントを作成するか、すでにアカウントを持っている場合はログインしてください。その後、新しいワークスペースを作成します。ここでは_Optimism Wallet Alerts_という名前にしましたが、好きな名前を付けてかまいません！

トークン送信時のアラートを処理する

次に、自分のウォレットがtransfer eventの送信者である場合にメッセージを送信するようにします。

1. 下部にある「+」をクリックします
2. 新しい_Action_セクションで_Slack_を検索して選択します
3. _Action Event_で_Send Channel Message_を選択します
4. _Continue_をクリックした後、Slackアカウントにサインインします
5. _Set up action_セクションで、メッセージ送信のための各フィールドを入力します
6. アラートを送信したいチャンネルを選択します（今回は_Optimism-Wallet-Alerts_）

メッセージのテキストでは、送信したいフィールドや値を自由に選んでかまいません。

今回は以下のフィールドを選択しました。

その他はすべてデフォルトのままで構いません。

_Continue_をクリックし、次に_test and continue_をクリックします。

エラーが出なければ準備完了です！アカウントにSlackメッセージが届いているはずです。あとはZapを公開しましょう。

おめでとうございます！これで、Optimismウォレットがトランザクションを送信するたびに、Zapがそのトランザクションの詳細を記したメッセージを送信するようになります。

Zapの実行詳細は、Zapierダッシュボードの Zap History ページでも確認できます。

10. Optimismでのトークン受信を処理するメッセージを送信する

自分のウォレットがOptimismトランザクションの受信側になった場合にもアラートを送信したいと思います。

まず、_continue only if_アクションを編集します。

Filter Setup & Testing_をクリックし、「+ or」ボタンを押して、Event Activity To Address（あるいは単に_fromAddress_で検索してもかまいません）の(Text) Exactly matches_に自分のOptimismアドレス（最後のテキストフィールドに貼り付けます）を入力します。

これで、ウォレットが受信者になった場合にもZapが実行されるようになりました！

次に、_Only continue if…_アクションと_Send Channel Message in Slack_アクションの間に_Code by Zapier_アクションを作成します。

_Run Python_か_Run Javascript_のどちらかを選べます。ここではJavaScriptを選びますが、Pythonでもロジックは同じです。

_Continue_をクリックしたら、_Set up action_で以下のように入力データを設定します。

現在の通知はウォレットがETHを送信する場合にしか対応していないため、再度webhookレスポンスをパースします。ウォレットがETHを受信する場合にも対応できるようにカスタマイズする必要があります。

コードブロックに以下のコードを貼り付けてください（各行の意味はコメントを参照してください）。

// 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 = \[\{account\_1: account\_1, account\_2: account\_2, t\_or\_f: t\_or\_f, f\_or\_t: f\_or\_t\}\];

再度になりますが、Wallet-Addressは自分のMetaMaskウォレットアドレスに置き換えてください。アクションのテストの際、出力変数に何も割り当てられなくても問題ありません。

最後に、_Send Channel Message in Slack_アクションに移動し、_Set up action_セクションをクリックします。

ここで、メッセージテキスト内のwebhookレスポンスの汎用的なフィールドを、JavaScriptコードから得られるより動的な出力に置き換えます。これらは、ウォレットがトークンを送信したか受信したかに応じてカスタマイズされます。

_Continue_をクリックしてアクションをテストし、公開しましょう！

おめでとうございます！これでOptimism webhookの作成が完了しました。