📣 Streaming Data

How to Get Notifications for NFT Contract Creations in Three Simple Steps

Learn how to get real-time notifications about a successful NFT contract mint using Alchemy Notify webhooks

If you’re the owner or developer of an NFT collection, getting critical updates about your NFT contract interactions can play a crucial role in the success of your NFT collection. Perhaps, you’re a passionate NFT collector interested in getting the play-by-play progress of your favorite NFT collection. Regardless of your intentions, tracking smart contract on-chain activities can be arduous without the right tools.

Notify API, available on all ETH test and main networks, provides you with reliable webhook types that allow you to get real-time notifications about your smart contract transactions.

In this article, we’ll look at how you can use one of such webhook types, the NFT Activity Webhook, to obtain real-time updates on the NFT collections you’re interested in. To use the NFT activity webhook, you’ll need to create a free alchemy account first.

Overview

In three steps, we will create a webhook and test it to get notifications whenever anyone mints a new NFT from our tracked collection.

  1. Set up The Webhook URL
  2. Set up the NFT Activity Webhook
  3. Test your Webhook

With the NFT Activity Webhook, you can track the following:

  • All NFT transfers (by providing only a webhook URL),
  • All NFT transfers for a particular contract (by providing a webhook URL and an NFT contract address), or
  • A specific NFT (by providing a webhook URL, an NFT contract address, and the token id).

For this article, we will be implementing the second option.

1. Set up The Webhook URL

To create the NFT Activity Webhook, we need the following:

  • A webhook URL
  • NFT address you want to track

Getting A Webhook URL

You can use cloud services like Heroku or even ngrok to generate your webhook URL. For this tutorial, we will be using Heroku.

If you don’t have Heroku CLI set up on your local computer, you can follow our short guide.

For ngrok, run ngrok HTTP 80 from your local terminal and copy the resulting URL. If you don’t have ngrok installed on your computer, open an account, and follow the installation instructions on your dashboard to set up and connect your ngrok account to your local computer. We also have a short setup guide you can follow.

Set up your project

  1. Create a folder with any name of your choice. In it, we will set up an index.html file with a basic setup, as shown below. Don’t worry; we will make appropriate edits later.
index.html
1<html>
2    <head></head>
3    <body>
4        <h1>Hi!</h1>
5    </body>
6</html>
  1. Open your folder in your terminal and run heroku create. Take note of the URL: http://xxxxxxxxx.herokuapp.com/ and other generated information, as we’ll be using them later. If you’re using an IDE like VSCode, right-click on the folder and open it in the integrated terminal. Make sure you add /alchemyhook as a suffix, e.g., https://immense-ravine-98866.herokuapp.com/alchemyhook when using the URL as a webhook URL.

2. Set up the NFT Activity Webhook

We will prepare the webhook manually and programmatically so that you can learn both ways.

You need an alchemy account to use Notify API. If you don’t have one, visit https://www.alchemy.com/ to sign up. It’s fast and easy.

A) Setting up the NFT Activity Webhook Manually

Head to the Alchemy Notify Dashboard to set up your webhook.

  1. In the Notify dashboard, click on the ‘create webhook’ button highlighted below:

1179

  1. Select the network type of your NFT contract and fill in the boxes with your desired NFT smart contract address(optional), token id(optional), and the webhook URL we created earlier, as shown below

1174

  1. Click on the ‘create webhook’ button, and your webhook is up and running! Take note of the webhook id as we will be using it to test notifications.

B) Setting up the NFT Activity Webhook Programmatically

To achieve this, we will:

  • Set up basic HTML inputs for the user to submit the following details: webhook URL and NFT address.
  • Set up a WebSocket that sends the value of the inputs to the server and displays the result.
  • Start a server and create a function that calls the createWebhook API endpoint with the inputs’ value.
1<html>
2<head>
3  <script src="/socket.io/socket.io.js"></script>
4  <script>
5    // connect to WebSocket server and start listening for notifications
6    let socket = io();
7    // listen for client connections/calls on the WebSocket server 
8    socket.on('addNFTnotif', (notificationBody) => {
9      console.log("got NFT notification", notificationBody);
10      el = document.getElementById('add-notification');
11      el.innerHTML = 'NFT added!: ' + notificationBody;
12      
13    });
14  </script>
15</head>
16<body>
17 <!-- Set up basic HTML inputs for the user to submit the following details:
18 `webhook URL and NFT contract address` -->
19  <p>Fill in the inputs below with the desired contract Address and webhook url</p>
20  <input name="contractAddress" placeholder="contract Address" type="text" maxlength="512" id="contractAddress"/>
21  <input name="webhook_url" placeholder="webhook url" type="text" maxlength="512" id="webhook_url"/>
22  <button class="enableHookButton">Create Your NFT Webhook </button>
23
24  <script>
25    //sends the value of the inputs to the server
26    const enableButton = document.querySelector('.enableHookButton');
27    enableButton.addEventListener('click', () => {
28      console.log("Creating NFT Webhook");
29      let contractAddress = document.querySelector('#contractAddress').value;
30      let webhook_url = document.querySelector('#webhook_url').value;
31      let data = 
32      {
33          "network": "ETH_MAINNET",
34          "nft_filters": [
35               {
36                    "contract_address": contractAddress
37               }
38          ],
39          "webhook_type": "NFT_ACTIVITY",
40          "webhook_url": webhook_url
41      }
42      if (webhook_url && contractAddress ) {
43        socket.emit('register address', data)
44        alert("Creating NFT Webhook.")
45      }
46      else (
47        alert("Fill all input.")
48      )
49    });
50  </script>
51  <p id="add-notification"></p>
52</body>
53</html>

The resulting webpage will look like the image shown below. We will be testing this after Step 3

Tip: Retrieve your auth token from the Notify Dashboard by clicking the button below:

1241

Now that we have our create webhook functionality, let’s incorporate more functionalities that will allow the user to begin receiving real-time information from the created NFT Activity webhook.

To achieve this, we will:

  • Set up an HTML input for the user to submit the webhook id.
  • Create a server function that calls the Update webhook NFT filters API endpoint with the inputs’ value. This helps us register the webhook id to our notification setup.
  • Set up a client script that starts listening for notifications and displays the resulting information.

Here’s the complete code that implements the above steps:

Additions for the index.html file are lines 9-13, 28-31, 36-45 and 70 Additions for the server.js file are lines 25-27, 30-34 and 36-54

You can also find the entire code in this git repository.

1<html>
2<head>
3  <script src="/socket.io/socket.io.js"></script>
4  <script>
5     // connect to WebSocket server and start listening for notifications
6     let socket = io();
7    let el;
8    let result;
9    socket.on('notification', (notificationBody) => {
10      console.log("got notification");
11      el = document.getElementById('server-notification');
12      el.innerHTML = 'Look what just happened!: ' + notificationBody;
13    });
14    socket.on('addNFTnotif', (notificationBody) => {
15      console.log("got NFT notification", notificationBody);
16      el = document.getElementById('add-notification');
17      el.innerHTML = 'NFT added!: ' + notificationBody; 
18    });
19  </script>
20</head>
21<body>
22  <!-- Set up basic HTML inputs for the user to submit the following details: 
23  `webhook URL and NFT contract address` -->
24  <p>Fill in the inputs below with the desired contract Address and webhook url</p>
25  <input name="contractAddress" placeholder="contract Address" type="text" maxlength="512" id="contractAddress"/>
26  <input name="webhook_url" placeholder="webhook url" type="text" maxlength="512" id="webhook_url"/>
27  <button class="enableHookButton">Create Your NFT Webhook </button>
28  <br />
29  <p>Copy the webhook id from your dashboard or from the result of webhook creation after clicking the "Create Your NFT Webhook" button</p>
30  <input name="webhook_id" placeholder="webhook_id" type="text" maxlength="512" id="webhook_id"/>
31  <button class="enableNotificationsButton">Enable Notifications for your webhook</button>
32
33  <script>
34    const enableButton = document.querySelector('.enableHookButton');
35
36    const enableNotificationsButton = document.querySelector('.enableNotificationsButton');
37
38    // when clicked, send request to server to register the connected webhook id with Alchemy
39    enableNotificationsButton.addEventListener('click', () => {
40      let webhook_id = document.querySelector('#webhook_id').value;
41      console.log("listen webhook");
42      socket.emit('listen webhook', webhook_id);
43      alert(" Listening to NFT Webhook.")
44    });
45		// sends the value of the inputs to the server
46    enableButton.addEventListener('click', () => {
47      console.log("Creating NFT Webhook");
48      let contractAddress = document.querySelector('#contractAddress').value;
49      let webhook_url = document.querySelector('#webhook_url').value;
50      let data = 
51      {
52          "network": "ETH_MAINNET",
53          "nft_filters": [
54               {
55                    "contract_address": contractAddress
56               }
57          ],
58          "webhook_type": "NFT_ACTIVITY",
59          "webhook_url": webhook_url
60      }
61      if (webhook_url && contractAddress) {
62        socket.emit('register address', data)
63        alert("Creating NFT Webhook.")
64      }
65      else (
66        alert("Fill all input.")
67      )
68    });
69  </script>
70  <p id="server-notification"></p>
71  <p id="add-notification"></p>
72</body>
73</html>

Awesome. We’re almost there! Deploy your code to Heroku by running the following code from your command line:

shell
$git add .                             // to add the latest changes
>git commit -m "Deploying NFT webhook" // to deploy our entire code
>git push heroku master                // to push and updates heroku app with the latest changes

Now, head over to your browser and visit the Heroku URL. e.g https://immense-ravine-98866.herokuapp.com/

3. Test your Webhook

  1. Fill in the ‘create webhook’ section with the desired NFT contract Address and webhook URL and click the Create Your NFT Webhook Button!

  2. Now, head to the Notify Dashboard, and you should find your new webhook there. Exciting!

Tip: Click the ellipsis button on the far right to retrieve your webhook signing key and pause or delete the specific webhook. You can also use the webhook signing key to validate and secure your dApp integration of Notify API endpoints.

You should also receive a fanciful notification in your browser.

  1. Copy your webhook id from the Notify Dashboard, put it in the “webhook id” input box and click “Enable Notifications to enable notifications.

  2. Go back to the Notify Dashboard and send a test notification. To do that, click on the “Send Test Notification” option, as shown below.

Return to your browser, and voila, you get your first notification!

Your webhook is ready! Anytime someone mints an NFT successfully from your collection, you get a response like the code snippet below containing critical details about the transaction.

json
1{
2  "webhookId": "wh_8vl4kmswvo8qui15",
3  "id": "whevt_4tjv8ty0ph00qkl7",
4  "createdAt": "2022-12-02T03:19:51.501Z",
5  "type": "NFT_ACTIVITY",
6  "event": {
7    "network": "ETH_MAINNET",
8    "activity": [
9      {
10        "fromAddress": "0x0000000000000000000000000000000000000000",
11        "toAddress": "0x9d88b43ad48bd518eceb00d0b8fcf1da00ea9a01",
12        "contractAddress": "0x3eb0debc2f1fdb613416b3718670f64415c5ff16",
13        "blockNum": "0xf594b8",
14        "hash": "0x415888331511a3db42eba8146b4c425047166a509230f16dd68dc14bf3d93342",
15        "erc721TokenId": "0xd",
16        "category": "erc721",
17        "log": {
18          "address": "0x3eb0debc2f1fdb613416b3718670f64415c5ff16",
19          "topics": [
20            "0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef",
21            "0x0000000000000000000000000000000000000000000000000000000000000000",
22            "0x0000000000000000000000009d88b43ad48bd518eceb00d0b8fcf1da00ea9a01",
23            "0x000000000000000000000000000000000000000000000000000000000000000d"
24          ],
25          "data": "0x",
26          "blockNumber": "0xf594b8",
27          "transactionHash": "0x415888331511a3db42eba8146b4c425047166a509230f16dd68dc14bf3d93342",
28          "transactionIndex": "0x27",
29          "blockHash": "0xa3a95401bf3ce04a3bfcb37590d60d7c014e7b0f78db61672554a81bb4c923ab",
30          "logIndex": "0x68",
31          "removed": false
32        }
33      }
34    ]
35  }
36}

Next Steps

This is just the beginning. You can do so much more with Notify’s powerful NFT Activity Webhook.

For example,

The possibilities are endless, and we’re excited to see what you build with the Notify API Endpoints.

Feel free to share your end products with us on Discord.

You can also check out the Notify API Quickstart page for other webhook types you can integrate into your dApp.