如何在 Optimism 上使用 webhook

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

什麼是 webhook？

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

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

Webhooks 可以追蹤哪些 Optimism 事件？

透過 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 測試網路。

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

為你的 app 命名（我們選擇「optimism_webhooks」），並寫一段簡短的描述。

接著，將 chain 選擇為 Optimism，network 選擇為 Optimism Goerli。

然後，點擊 Create app。

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

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

4. 從 Goerli faucet 取得 Testnet ETH

要將你的智慧合約部署到 Optimism 測試網路，從 Goerli faucet 取得 ETH。

首先，將你的 MetaMask network 切換成 Ethereum Goerli，然後點擊 Claim。

接著，你應該會在 Goerli testnet 上的 MetaMask 帳戶中看到 0.05 ETH。

5. 將 Goerli ETH 橋接到 Optimism-Goerli Testnet

目前還沒有公開的橋可以將 Goerli ETH 轉移到 Optimism，但可以透過 Cast from Foundry（一個 Ethereum 應用程式開發工具組）來達成。

使用這段程式碼片段：

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

現在你已經在 Opt-Goerli testnet 上擁有 Goerli ETH。

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 生態系中
2. 前往 Notify tab，並在 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 旁的三個點，選擇 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 authentication 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_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 地址來追蹤它們的轉帳事件。

重新整理後，你應該會在 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！