如何在 Optimism 上使用 webhooks

如果你希望你的 web3 應用程式能與第三方應用程式或服務溝通，你會愛上 webhooks。在本教學中，我們將學習如何在 Optimism 上設定並使用 webhooks。接著，我們會示範如何設定自動化通知，在 Slack 中接收 Optimism 上 ETH 收發的訊息。

什麼是 webhook？

Webhooks 是 web3 開發者可以用來讓第三方應用程式或服務在事件發生時與應用程式溝通的工具。相較於透過 API 持續輪詢節點以檢查特定狀態是否改變，這項技術更有效率，因為 webhooks 讓這些伺服器可以在事件發生的當下就主動推送通知給應用程式。

Alchemy webhooks 在提升使用者體驗、推動 web3 應用程式與服務的參與度方面有很大的潛力，例如在 Discord 頻道追蹤 NFT 銷售，或是將錢包活動傳送到 Slack 頻道。

哪些 Optimism 事件可以用 webhooks 追蹤？

透過 Alchemy webhooks，我們可以接收三種 Optimism 事件的通知：

1. Mined transactions - 交易完成
2. Dropped transactions - 交易失敗或從 mempool 中被移除
3. Address Activity - 代幣被接收或轉移

在本教學中，我們將追蹤 Address Activity 事件，也就是在 Optimism 上收發 ETH 時接收 Slack 通知。

如何設定 Optimism webhooks

以下是設定 Optimism webhooks 並自動化 Slack 通知的 10 個步驟。這套流程同樣適用於許多其他 Zapier 支援的第三方平台，例如 Discord、Twitter 等等！

1. 建立 Ethereum 錢包

我們需要一個 Ethereum 錢包來收發交易。在本教學中，我們會使用 MetaMask，一款以瀏覽器為基礎的數位資產錢包，用來管理 Ethereum 帳戶。下載 MetaMask 並建立一個免費帳戶。

2. 登入 Alchemy

為了簡化流程，註冊一個免費的 Alchemy 開發者帳戶，這樣你就可以與 Ethereum 鏈溝通，而不必自己執行節點。

3. 建立 API key

接著，建立一個新的 app 來產生 API key，並連線到 Optimism 測試網路。

將滑鼠移到導覽列的 Apps 上，並點選 Create App，前往 Alchemy Dashboard 中的 Create App 頁面。

為你的 app 命名（我們選了「optimism_webhooks」），並寫一段簡短的說明。

接著，將 chain 選為 Optimism，網路選為 Optimism Sepolia。

然後點選 Create app。

現在，點選 Apps 底下新建立的 app 連結，並點選 Add to Wallet。

你現在應該已經在 Metamask 上連接到 Optimism Sepolia testnet 了！

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 帳戶，就直接登入。

接著，在 dashboard 中，點選左上角的 Create Zap。

我們現在要建立 webhook URL，用來將 webhook 回應從 Alchemy 傳送到 Zapier。

在 Trigger 底下，搜尋並選擇 Webhooks by Zapier 作為 app event/trigger。

在 Trigger Event 部分，選擇 Catch Hook，因為 Zapier 會等待 Alchemy 的 address activity webhook 在每次轉帳發生時將事件資料傳送到該 URL。

點選 Continue 進入 Set up trigger 部分，並複製 Custom Webhook URL。

7A. 建立 Optimism webhook

現在，我們需要建立 address activity webhook 來追蹤轉帳事件，並將這些資料傳送到 Zapier webhook URL。

我們會示範兩種設定 webhook 的方式：第一種是透過 dashboard 中 Alchemy 的 Notify tab，第二種是透過程式化的方式使用 Alchemy 的 Notify API（建議在處理 10 個以上地址的 address activity webhooks 時使用）。

1. 確認你在 Alchemy dashboard 左上角的 Ethereum + L2 ecosystem 中
2. 前往 Notify tab，並在 Address Activity 區塊點選 + Create Webhook 按鈕
3. 將 Chain 選為 Optimism
4. 將 Network 選為 Sepolia
5. 貼上你上一步從 Zapier 複製的 webhook URL
6. 將你的 MetaMask 錢包地址貼到 Ethereum Addresses 區塊

注意：如果你想在確認建立之前測試 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 地址建立 webhooks，可以使用 Notify API。首先，從你的 Notify dashboard 右上角的 AUTH TOKEN 按鈕下複製你的 Alchemy 驗證 token（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 地址來追蹤它們的轉帳事件。

重新整理後，你應該會在 Notify dashboard 中看到新建立的 address activity webhook，並附上你指定的所有參數。

8. 在 zapier 中解析 Optimism webhook 回應

有了來自 Alchemy 的 webhook 回應後，我們需要在 Zapier 中解析它，建立一個動作，讓我們的 Optimism 地址每次成功送出交易時都會發出提醒。

在 Action 部分，選擇右側的 Filter 選項。

在 Filter setup & testing 中，我們希望在 Event Activity From Address（或者你可以直接搜尋 fromAddress）(Text) Exactly matches 我們的 Optimism 地址（將它貼到最後一個文字欄位）時繼續執行。

如果你點選 Continue 後發現「Your Zap would not have continued」，別擔心！測試通知並不是從錢包發送的，所以出現這個訊息是預期中的。

9. 將你的 Optimism webhooks 與 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 就會發送一則訊息詳述該筆交易。

你也可以在 Zapier dashboard 的 Zap History 頁面查看你 Zap 的執行詳情。

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 中設定輸入資料，如下所示：

我們要再次解析 webhook 回應，因為我們目前的通知只針對錢包發送 ETH 的情況撰寫。因此，我們需要為錢包接收 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"; \} // 輸出將用於 email 的欄位 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 webhooks 的建立！