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

웹3 애플리케이션이 서드파티 앱이나 서비스와 통신하도록 하고 싶다면, 웹훅을 마음에 들어할 것입니다. 이 튜토리얼에서는 Optimism에서 웹훅을 설정하고 사용하는 방법을 알아봅니다. 그다음, Optimism에서 ETH를 주고받을 때 Slack으로 자동 알림을 보내도록 설정하는 방법을 보여드리겠습니다.

웹훅이란?

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

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

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

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

1. Mined transactions - 트랜잭션이 완료됨
2. Dropped transactions - 트랜잭션이 실패하거나 mempool에서 제거됨
3. Address Activity - 토큰을 받거나 전송함

이 튜토리얼에서는 Address Activity 이벤트를 추적하여, 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"로 지정했습니다), 간단한 설명을 작성합니다.

다음으로 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를 요청하세요.

그러면 Sepolia 상의 MetaMask 계정에서 테스트 ETH를 확인할 수 있습니다.

5. OP Sepolia ETH 받기

가장 빠른 방법은 Alchemy의 Optimism Sepolia faucet을 이용하는 것입니다. Superchain Bridges UI를 이용해 Sepolia ETH를 OP Sepolia로 브릿지할 수도 있습니다.

지갑에 OP Sepolia ETH가 들어오면 웹훅 설정을 계속 진행합니다.

6. zap 및 Optimism 웹훅 URL 만들기

이제 Zapier 계정을 만드세요. 이미 Zapier 계정이 있다면 로그인하세요.

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

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

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

_Trigger Event_에서는 _Catch Hook_을 선택합니다. transfer가 발생할 때마다 Alchemy의 address activity 웹훅이 이벤트 데이터를 URL로 보내는 것을 Zapier가 대기하기 때문입니다.

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

7A. Optimism 웹훅 만들기

이제 transfer 이벤트를 추적하고 그 데이터를 Zapier 웹훅 URL로 전송하는 address activity 웹훅을 만들어야 합니다.

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

1. Alchemy 대시보드 좌측 상단에서 Ethereum + L2 ecosystem에 있는지 확인하세요
2. Notify 탭으로 이동해 Address Activity 섹션에서 + Create Webhook 버튼을 클릭하세요
3. _Chain_에서 _Optimism_을 선택하세요
4. _Network_에서 Sepolia를 선택하세요
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_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(즉, 앞서 붙여넣은 지갑 주소)는 각자 자신의 값으로 사용해야 한다는 점을 기억하세요. transfer 이벤트를 추적하고 싶은 Ethereum 주소는 원하는 만큼 추가할 수 있습니다.

새로고침 후, Notify 대시보드에 지정한 모든 파라미터와 함께 새로 생성된 address activity 웹훅이 나타나는 것을 확인할 수 있습니다.

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

Alchemy로부터 받은 웹훅 응답을 바탕으로, 우리의 Optimism 주소가 성공적으로 트랜잭션을 보낼 때마다 알림을 보내는 action을 만들려면 이를 Zapier에서 파싱해야 합니다.

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_라는 이름을 사용했지만, 자유롭게 이름을 지어도 좋습니다!

토큰 전송 알림 처리하기

다음으로, 우리 지갑이 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을 publish하세요.

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

Zapier 대시보드의 Zap History 페이지에서 Zap의 실행 세부 정보도 확인할 수 있습니다.

10. Optimism에서 토큰 수신 처리를 위한 메시지 보내기

우리 지갑이 Optimism 트랜잭션의 수신자일 때도 알림을 보내고 싶습니다.

먼저 continue only if action을 편집합니다.

_Filter Setup & Testing_을 클릭하고 "+ or" 버튼을 누른 다음, Event Activity To Address(또는 간단히 _fromAddress_로 검색 가능)와 _(Text) Exactly matches_에 우리의 Optimism 주소를 채워 넣으세요(마지막 텍스트 필드에 붙여넣으세요).

이제 지갑이 수신자일 때도 Zap이 실행될 것입니다!

다음으로, Only continue if… action과 Send Channel Message in Slack action 사이에 Code by Zapier action을 만듭니다.

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 지갑 주소로 교체하는 것을 잊지 마세요. action을 테스트할 때, 출력 변수에 아무 값도 할당되지 않더라도 걱정하지 마세요.

마지막으로, Send Channel Message in Slack action으로 이동해 Set up action 섹션을 클릭하세요.

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

_Continue_를 클릭하고 action을 테스트하세요. 그다음 publish하세요!

축하합니다! Optimism 웹훅 만들기를 완료했습니다!