Optimismでwebhookを使う方法

web3アプリケーションをサードパーティのアプリやサービスと連携させたいなら、webhookがきっと役に立つはずです。このチュートリアルでは、Optimismでwebhookを設定・利用する方法を学びます。その後、SlackでOptimism上のETHの送受信を自動通知する方法を紹介します。

webhookとは?

webhookは、イベントが発生した際にサードパーティのアプリやサービスがアプリケーションと通信できるようにするためのツールです。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 Dashboardのナビバーで_Apps_にカーソルを合わせ、_Create App_をクリックして_Create App_ページに移動します。

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

次に、chainで_Optimism_を選択し、networkで_Optimism Sepolia_を選択します。

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

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

これで、MetamaskがOptimism Sepoliaテストネットに接続されているはずです!

4. Sepolia faucetからテストネットETHを取得する

Optimismテストネットワークにスマートコントラクトをデプロイするには、AlchemyのSepolia faucetからETHを取得します。

まず、MetaMaskのネットワークをEthereum Sepoliaに切り替えます。faucetページで、ウォレットアドレスを貼り付けてテストETHをリクエストします。

その後、MetaMaskアカウントのSepolia上にテストETHが表示されるはずです。

5. OP Sepolia ETHを取得する

最も早い方法は、AlchemyのOptimism Sepolia faucetを利用することです。また、Superchain Bridges UIを使ってSepolia ETHをOP Sepoliaにブリッジすることもできます。

ウォレットにOP Sepolia ETHが入ったら、webhookの設定に進みます。

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

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

ダッシュボードで、左上の_Create Zap_をクリックします。

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

_Trigger_で、appのevent/triggerとして_Webhooks by Zapier_を検索・選択します。

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

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

7A. Optimism webhookを作成する

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

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

1. Alchemyダッシュボードの左上で_Ethereum + L2_ ecosystemになっていることを確認します
2. Notifyタブに移動し、Address Activity_セクションの+ Create Webhook_ボタンをクリックします
3. _Chain_を_Optimism_に設定します
4. _Network_を_Sepolia_に設定します
5. 前のステップでZapierからコピーしたwebhook URLを貼り付けます
6. _Ethereum Addresses_セクションにMetaMaskウォレットアドレスを貼り付けます

NOTE: webhookの作成を確定する前に、AlchemyのwebhookがZapierのwebhook URLへ正しくリクエストを送信できるかテストしたい場合は、webhook URLの隣にある_Test Webhook_をクリックしてください。既にwebhookを作成済みで再度テストしたい場合は、webhookの横にある三点リーダーをクリックし、_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_SEPOLIA","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_という名前にしましたが、お好きな名前を付けてかまいません!

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

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

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をpublishしましょう。

おめでとうございます! これで、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_のどちらかを選べます。ここでは後者を選びますが、ロジックは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_をクリックしてアクションをテストします。そしてpublishしましょう!

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