Optimism에서 웹훅을 사용하는 방법

웹3 애플리케이션이 서드파티 앱이나 서비스와 통신하게 하려면 웹훅을 좋아하게 될 겁니다. 이 튜토리얼에서는 Optimism에서 웹훅을 설정하고 사용하는 방법을 배웁니다. 그런 다음 Optimism에서 ETH를 주고받을 때 Slack으로 자동 알림을 설정하는 방법을 보여드리겠습니다.

웹훅이란?

웹훅은 이벤트가 발생했을 때 서드파티 앱이나 서비스가 애플리케이션과 통신할 수 있게 해주는 도구입니다. 이 방식은 API를 통해 특정 상태의 변화를 확인하기 위해 노드를 계속 폴링하는 것보다 효율적인데, 웹훅을 사용하면 이벤트가 발생한 시점에 서버가 앱으로 알림을 푸시할 수 있기 때문입니다.

Alchemy 웹훅은 Discord 채널에서 NFT 판매를 추적하거나 Slack 채널로 지갑 활동을 전송하는 등, 웹3 애플리케이션과 서비스의 사용자 경험을 개선하고 참여를 높이는 데 큰 잠재력을 가지고 있습니다.

웹훅으로 추적할 수 있는 Optimism 이벤트는?

Alchemy 웹훅을 통해 알림을 받을 수 있는 Optimism 이벤트는 세 가지입니다:

1. 채굴된 트랜잭션 - 트랜잭션이 완료됨
2. 드롭된 트랜잭션 - 트랜잭션이 실패하거나 mempool에서 제외됨
3. 주소 활동 - 토큰을 받거나 전송함

이 튜토리얼에서는 주소 활동 이벤트를 추적하여, Optimism에서 ETH를 주고받을 때 Slack 알림을 받도록 하겠습니다.

Optimism 웹훅 설정 방법

Optimism 웹훅을 설정하고 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"로 지었습니다), 간단한 설명을 작성합니다.

다음으로, 체인은 _Optimism_을, 네트워크는 _Optimism Goerli_를 선택합니다.

그런 다음 _Create app_을 클릭합니다.

이제 Apps 아래 새로 생성된 앱 링크를 클릭하고 _Add to Wallet_을 클릭합니다.

이제 Metamask가 Optimism Goerli 테스트넷에 연결되었을 것입니다!

4. Goerli faucet에서 테스트넷 ETH 받기

스마트 컨트랙트를 Optimism 테스트넷에 배포하려면 Goerli faucet에서 ETH를 받으세요.

먼저 MetaMask 네트워크를 Ethereum Goerli로 변경한 다음 _Claim_을 클릭합니다.

그러면 Goerli 테스트넷의 MetaMask 계정에 0.05 ETH가 표시될 것입니다.

5. Goerli ETH를 Optimism-Goerli 테스트넷으로 브릿지하기

아직 Goerli ETH를 Optimism으로 전송하는 공개 브릿지는 없지만, Ethereum 애플리케이션 개발 툴킷인 Cast from Foundry를 사용하면 가능합니다.

다음 코드 스니펫을 사용하세요:

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

이제 Opt-Goerli 테스트넷에 Goerli ETH가 있을 것입니다.

6. Zap 및 Optimism 웹훅 URL 생성하기

이제 Zapier 계정을 생성하거나, 이미 계정이 있다면 로그인합니다.

다음으로, 대시보드 왼쪽 상단에서 _Create Zap_을 클릭합니다.

이제 Alchemy에서 Zapier로 웹훅 응답을 보내기 위한 웹훅 URL을 생성하겠습니다.

Trigger 아래에서 앱 이벤트/트리거로 _Webhooks by Zapier_를 검색해 선택합니다.

_Trigger Event_로는 _Catch Hook_을 선택합니다. 전송이 발생할 때마다 Zapier가 Alchemy의 주소 활동 웹훅이 URL로 이벤트 데이터를 보내는 것을 기다리기 때문입니다.

_Continue_를 클릭해 Set up trigger 섹션으로 이동한 후 _Custom Webhook URL_을 복사합니다.

7A. Optimism 웹훅 생성하기

이제 전송 이벤트를 추적하고 해당 데이터를 Zapier 웹훅 URL로 보낼 주소 활동 웹훅을 생성해야 합니다.

웹훅을 설정하는 두 가지 방법을 보여드리겠습니다. 첫 번째는 대시보드 내 Alchemy의 Notify 탭을 사용하는 방법이고, 두 번째는 Alchemy의 Notify API를 프로그래밍 방식으로 사용하는 방법입니다(10개 이상의 주소에 대한 주소 활동 웹훅을 다룰 때 권장).

1. Alchemy 대시보드 왼쪽 상단에서 Ethereum + L2 생태계에 있는지 확인하세요
2. Notify 탭으로 이동해 Address Activity 섹션의 + Create Webhook 버튼을 클릭하세요
3. _Chain_을 _Optimism_으로 선택하세요
4. _Network_를 Goerli로 선택하세요
5. 이전 단계에서 Zapier로부터 복사한 웹훅 URL을 붙여넣으세요
6. Ethereum Addresses 섹션에 MetaMask 지갑 주소를 붙여넣으세요.

참고: 생성을 확정하기 전에 Alchemy 웹훅이 Zapier의 웹훅 URL로 요청을 성공적으로 보내는지 테스트하려면 웹훅 URL 옆의 _Test Webhook_을 클릭하세요. 또는 웹훅을 이미 생성했지만 다시 테스트하고 싶다면 웹훅 옆의 점 세 개를 클릭하고 _Send Test Notification_을 선택하세요.

이제 Zapier로 돌아가 Test trigger 섹션으로 이동한 다음 _Test trigger_를 클릭하세요.

"We found a request message"라는 문구가 보이면 성공입니다!

7B. Notify API를 사용해 Optimism 웹훅 생성하기

여러 개의 Optimism 주소에 대한 웹훅을 생성하려면 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 주소는 원하는 만큼 추가할 수 있습니다.

새로고침하면 지정한 모든 매개변수와 함께 새로 생성된 주소 활동 웹훅이 Notify 대시보드에 표시될 것입니다.

8. Zapier에서 Optimism 웹훅 응답 파싱하기

Alchemy로부터 받은 웹훅 응답을 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 웹훅을 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을 게시하세요.

축하합니다! 이제 Optimism 지갑에서 트랜잭션을 전송할 때마다 Zap이 해당 트랜잭션에 대한 상세 메시지를 보낼 것입니다.

Zapier 대시보드의 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 아래에서 다음과 같이 입력 데이터를 설정합니다:

현재 알림은 우리 지갑이 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"; \} // 이메일에 사용할 필드를 출력합니다 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 섹션을 클릭하세요.

이제 메시지 텍스트에서 웹훅 응답의 일반 필드를, 우리 지갑이 토큰을 보냈는지 받았는지에 따라 달라지는 Javascript 코드의 더 동적인 출력값으로 교체하겠습니다:

_Continue_를 클릭하고 액션을 테스트하세요. 그런 다음 게시하세요!

축하합니다! Optimism 웹훅 생성을 방금 완료했습니다!