Building a dApp with Real-Time Transaction Notifications

dApps on Ethereum have come a long way over the last several years, both in popularity and in complexity. Unfortunately, the user experience of most dApps is still lacking in comparison to web2 applications.
One key piece missing is real-time notifications of events. Users need to know immediately when their trades execute, when their transactions fail, when their auction bid has been accepted, or when a wallet of interest has aped into some new token. Without these notifications, trades can be missed, critical actions are forgotten, and ultimately users end up abandoning your dApp. 
Unfortunately, building these real-time notifications into your dApp has traditionally been complicated, time-consuming, and error-prone. But now with Alchemy Notify, sending real-time push notifications to your users for critical events such as dropped transactions, mined transactions, wallet activity, and even gas price changes is straightforward, easy, and dependable. 
In this tutorial, we’ll look at an example of how, with just a few lines of code, your dApp can integrate the 🔋 power of Alchemy Notify.
Overview
1.High level walkthrough of the example project
2.Build the project using Heroku
1.Clone Github Repo & Set Up Heroku 
2.Create a free Alchemy account​
3.Alchemy Notify API & Register Webhook Notifications
4.Insert Alchemy Webhook Id and Auth Key
5.Deploy Heroku App!
3.Build the project from scratch
1.Create Express Server
2.Create a free Alchemy account​
3.Alchemy Notify API & Register Webhook Notifications
4.Insert Alchemy Webhook Id and Auth Key
5.Create dApp Frontend
6.Deploy!
Our Example
For our example, we’ll create a dApp that notifies users, in real-time, when activity happens on  specific Ethereum addresses. For our architecture, we’ll use Express for our server, WebSockets to communicate between the client and server, and Alchemy Notify to monitor an address and send a push notification when there is activity on that address. 
If you don't want to spend real (mainnet) Ethereum to try out this tutorial, you can follow the same process using a testnet, like Rinkeby, so that you can send transactions to and from your target address for testing without paying for gas ⛽
Our example dApp will perform two functions: First, it will register a user’s address for notifications, and second it will send a notification to that user when they receive or send transactions.
The “register a user’s address for notifications” flow looks like this:
1.A user connects to their wallet through the dApp
2.The user clicks to register their wallet address to be monitored
3.The dApp sends an event through WebSockets to the server to register the address
4.The server calls the Alchemy API to register the address with Alchemy Notify
The “send a notification” flow looks like this:
1.A change happens to the registered address - they either send or receive a transaction
2.Alchemy Notify calls the server webhook with the change information
3.The server notifies the client through WebSockets that a change has been made to the address
4.Website frontend displays the JSON response from the Websocket, inclusive of all the transaction metadata
We’ll go through two versions of the tutorial: the first by cloning the Github Repo using Heroku and the second by doing it all from scratch. 
Build Heroku-Serviced Project
1. Set Up Github Repo & Heroku 
In this tutorial, we utilize Heroku for hosting a server and website; if you choose to use heroku, be sure to follow all of the following steps.  (If you want to use another provider, see “Build Project From Scratch”)
a) Make a clone of the existing Github Repository​
1
git clone https://github.com/alchemyplatform/Alchemy-Notify-Tutorial
2
​
3
cd alchemy_notify
Copied!
b) Install Heroku-CLI and verify/install dependencies
Download Heroku-CLI based on your OS
After installation, open your terminal and run heroku login; follow the commands that follow to login to your Heroku account. If you don't have a Heroku account, you can sign up for one!
Run node --version. You must have any version of Node greater than 10 installed. If you don’t have it or have an older version, install a more recent version of Node.
Run npm --version. npm is installed with Node, so check that it’s there. If you don’t have it, install a more recent version of Node:
c) Initiate Heroku
Run heroku create to create your heroku app.  Take note of the info that pops up in the terminal, especially the URL that looks like http://xxxxxxxxx.herokuapp.com/ We'll be using it!
2. Alchemy Notify API & Register Webhook Notifications
First, let’s look at how notifications with Alchemy work. There are two ways to create and modify notifications: through the Alchemy Notify dashboard, and through the Alchemy Notify API. For our example, we’ll work with both! Let’s start by looking at the dashboard.
If you don’t already have one, you’ll first need to create an account on Alchemy. The free version will work fine for getting started. 
Once you have an account, go to the dashboard and select “Notify” from the top menu. Here you’ll see the different kinds of notifications you can set up:
Address Activity
Dropped Transactions
Mined Transaction
Gas Price
Could not load image
For our example, we’ll use the Address Activity notification, but you should be able to easily swap out any of the others for your own use case.
In the dashboard you can create all of your notifications, add the addresses you want to monitor, and add the webhook URL that Alchemy should communicate with when that notification triggers. Alchemy sends all the relevant details to this webhook. Your server needs to simply create the webhook, receive the call, and process the information as needed. 
a) Create our example notification by clicking “Create Webhook” on Address Activity. 
Could not load image
b) Enter our webhook URL 
If using Heroku, see Step 1 for the http://xxxxxxxxx.herokuapp.com/ URL that was generated with heroku create
If doing from scratch, insert your custom webhook URL from whichever service provider you are using.  
c) Enter a test Ethereum address (0xab5801a7d398351b8be11c439e05c5b3259aec9b) here for our setup. 
(We’ll add the real one we want to monitor programmatically through the API in the next step).  
d) Select an app from the dropdown menu 
Make sure the app selected is on the Ethereum network you want to test on; if you're testing on Rinkeby, select an app configured to it!
e) Click “Create Webhook” and we’re done!
Could not load image
3. Insert Alchemy Webhook Id and Auth Key
Open the server.js file.  Change lines 37 and 43 in server.js to reflect your particular Alchemy webhook id and auth token! 

1
​
2
// add an address to a notification in Alchemy
3
​
4
async function addAddress(new_address) {
5
  console.log("adding address " + new_address);
6
  const body = { webhook_id: <your alchemy webhook id>, addresses_to_add: [new_address], addresses_to_remove: [] };
7
  try {
8
    fetch('https://dashboard.alchemyapi.io/api/update-webhook-addresses', {
9
      method: 'PATCH',
10
      body: JSON.stringify(body),
11
      headers: { 'Content-Type': 'application/json' },
12
      headers: { 'X-Alchemy-Token': <your alchemy token> }
13
    })
14
      .then(res => res.json())
15
      .then(json => console.log(json));
16
  }
17
  catch (err) {
18
    console.error(err);
19
  }
20
}
Copied!
4. Deploy and Test
1
git add .                             // to add changes
2
git commit -m "added Alchemy keys"    // to add a comment 
3
git push heroku master                // to push and deploy your heroku app
Copied!
Click “Enable Ethereum” to connect to MetaMask and select a wallet you want to connect to from the drop-down menu.
Could not load image
And now click “Enable Notifications on this address” to register our address:
Could not load image
We can confirm in our Alchemy Dashboard that our wallet address has been added to the notification.
Could not load image
And now, with everything in place, you can test out your dApp!  
🎉 Congratulations on your dApp deployment! Feel free to edit your app, change its behavior, or make the frontend more spiffy!
5. Conclusion​
Build Project From Scratch
In this tutorial, we provide a generalized setup for a server and website that will allow you to run an Alchemy Notify webhook.
1. Create Express Server
Our server will be a simple Express node.js server. It will do three things:
1.Create a WebSocket server to communicate with the client
2.Interact with the Alchemy API to set up/modify notifications
3.Create a webhook URLto receive the real-time notifications from Alchemy 
This code, with some customization for your specific on-prem, AWS, or other hosting provider, can be run to power the tutorial. You will need to install express, path, socket.io, and node-fetch into your environment. 
First, we need to start our Express server and establish the routes for our client (index.html) and our Alchemy webhook. This Alchemy webhook allows Alchemy to send real-time notifications to our server.
2. Create a server.js file in your project folder and set up the appropriate routes for our webhood and web requests.
1
// server.js
2
// start the express server with the appropriate routes for our webhook and web requests
3
​
4
var app = express()
5
  .use(express.static(path.join(__dirname, 'public')))
6
  .use(express.json())
7
  .post('/alchemyhook', (req, res) => { notificationReceived(req); res.status(200).end() })
8
  .get('/*', (req, res) => res.sendFile('/index.html'))
9
  .listen(PORT, () => console.log(`Listening on ${PORT}`))
10
​
Copied!
With this setup above, the webhook URL we’ll need later is https://<yoururl.com>/alchemyhook
3. Emit notification to clients
If a notification is received by our webhook, we want to do any necessary processing and then send it back to the client. In our simple case, we’ll just emit the notification to all clients using WebSockets.
1
// server.js
2
// notification received from Alchemy from the webhook. Let the clients know.
3
function notificationReceived(req) {
4
  console.log("notification received!"); 
5
  io.emit('notification', JSON.stringify(req.body));
6
}
7
​
Copied!
4. Start WebSocket server.
Let’s start our WebSockets server. This is how we will communicate with our client dApp. WebSockets allow bidirectional communication between our client dApp and our Express server. In our example, we’ll use a library that sits on top of WebSockets, socket.io.
1
// server.js
2
// start the websocket server
3
const io = socketIO(app);
4
​
Copied!
5. Listen for client connections and calls on the WebSocket server 
With our WebSockets connection established, we can listen for clients to connect and disconnect. We can also listen for specific calls from our clients. In our example, we want to listen for clients that want to add new Ethereum addresses to be monitored, using register address.
1
//server.js
2
// listen for client connections/calls on the WebSocket server
3
​
4
io.on('connection', (socket) => {
5
  console.log('Client connected');
6
  socket.on('disconnect', () => console.log('Client disconnected'));
7
  socket.on('register address', (msg) => {
8
    //send address to Alchemy to add to notification
9
    addAddress(msg);
10
  });
11
});
12
​
Copied!
6. Add Alchemy Notify API functionality.  
When we receive a client request to add an address, we use the Alchemy API to register the address with our Alchemy Notification. 
(Be sure to replace <your alchemy token> with your auth token found on the Alchemy Dashboard.) The webhook_id here is a unique ID provided by Alchemy when we create the webhook (in the next step).

1
//server.js
2
// add an address to a notification in Alchemy
3
​
4
async function addAddress(new_address) {
5
  console.log("adding address " + new_address);
6
  const body = { webhook_id: <your alchemy webhook id>, addresses_to_add: [new_address], addresses_to_remove: [] };
7
  try {
8
    fetch('https://dashboard.alchemyapi.io/api/update-webhook-addresses', {
9
      method: 'PATCH',
10
      body: JSON.stringify(body),
11
      headers: { 'Content-Type': 'application/json' },
12
      headers: { 'X-Alchemy-Token': <your alchemy token> }
13
    })
14
      .then(res => res.json())
15
      .then(json => console.log(json));
16
  }
17
  catch (err) {
18
    console.error(err);
19
  }
20
}
21
​
Copied!
A word about the Alchemy API: Anything we can do in the Alchemy Notify dashboard we can also do programmatically through the Alchemy Notify API. We can create new notifications, modify them, add and remove addresses, and so on. For example, here is a quick call to get a list of all our Alchemy webhooks:
1
​
2
// server.js
3
​
4
async function getWebhooks() {
5
  try {
6
    fetch('https://dashboard.alchemyapi.io/api/team-webhooks', {
7
      method: 'GET',
8
      headers: { 'Content-Type': 'application/json' },
9
      headers: { 'X-Alchemy-Token': <your alchemy token> }
10
    })
11
      .then(res => res.json())
12
      .then(json => console.log(json));
13
  }
14
  catch (err) {
15
    console.error(err);
16
  }
17
}
18
​
Copied!
Our server is ready! Here is the entire sample server.js we have created together:
1
const express = require('express')
2
const path = require('path')
3
const socketIO = require('socket.io');
4
const PORT = process.env.PORT || 5000
5
const fetch = require('node-fetch');
6
​
7
// start the express server with the appropriate routes for our webhook and web requests
8
var app = express()
9
  .use(express.static(path.join(__dirname, 'public')))
10
  .use(express.json())
11
  .post('/alchemyhook', (req, res) => { notificationReceived(req); res.status(200).end() })
12
  .get('/*', (req, res) => res.sendFile(path.join(__dirname + '/index.html')))
13
  .listen(PORT, () => console.log(`Listening on ${PORT}`))
14
​
15
// start the websocket server
16
const io = socketIO(app);
17
​
18
// listen for client connections/calls on the WebSocket server
19
io.on('connection', (socket) => {
20
  console.log('Client connected');
21
  socket.on('disconnect', () => console.log('Client disconnected'));
22
  socket.on('register address', (msg) => {
23
    //send address to Alchemy to add to notification
24
    addAddress(msg);
25
  });
26
});
27
​
28
// notification received from Alchemy from the webhook. Let the clients know.
29
function notificationReceived(req) {
30
  console.log("notification received!"); 
31
  io.emit('notification', JSON.stringify(req.body));
32
}
33
​
34
// add an address to a notification in Alchemy
35
async function addAddress(new_address) {
36
  console.log("adding address " + new_address);
37
  const body = { webhook_id: <your alchemy webhook id>, addresses_to_add: [new_address], addresses_to_remove: [] };
38
  try {
39
    fetch('https://dashboard.alchemyapi.io/api/update-webhook-addresses', {
40
      method: 'PATCH',
41
      body: JSON.stringify(body),
42
      headers: { 'Content-Type': 'application/json' },
43
      headers: { 'X-Alchemy-Token': <your alchemy token> }
44
    })
45
      .then(res => res.json())
46
      .then(json => console.log(json));
47
  }
48
  catch (err) {
49
    console.error(err);
50
  }
51
}
52
​
Copied!
The webhook id and the alchemy auth token comes from the Alchemy UI which we use to create our webhook in the next step!  
7. Complete Steps 2 & 3 from the Heroku-Serviced Project. 
8. Create the frontend for your dApp
Finally, we’ll build our dApp. Our example client is extremely simple. Of course, you’ll want to integrate this code into your dApp as appropriate.
Our dApp is a simple HTML/JavaScript page that does several things:
Connect to our WebSockets server to communicate with the server
Use web3 to connect to a browser wallet (such as MetaMask)
Send a wallet address to the server to be monitored
Receive notifications from the server when the server receives Alchemy notifications
Note: You’ll need two JavaScript libraries for this code to work: socket.io and web3.
a) Connect to WebSocket server and listen for incoming notifications
First, we establish our WebSocket connection with the client. Then, we set up a listener to receive messages from the server; in this case, our address notifications. We’ll simply display the contents of the notification in this example, but you’d obviously want to do something more interesting:
1
<script>
2
    // connect to WebSocket server and start listening for notifications
3
    let socket = io();
4
    let el;
5
    socket.on('notification', (notificationBody) => {
6
      console.log("got notification");
7
      el = document.getElementById('server-notification');
8
      el.innerHTML = 'Look what just happened!: ' + notificationBody;
9
    });
10
  </script>
11
​
Copied!
b) Emit new addresses to monitor to the WebSocket server
The second piece of interesting code happens when the user clicks to add their Ethereum address to the list of monitored addresses. When the user clicks the “enable notifications on my address” button, the code emits an event to WebSockets requesting to register a new address. As we saw above, the server then receives this event and sends the new address to the Alchemy API to register in the Alchemy Notification, closing our loop.
1
enableNotificationsButton.addEventListener('click', function (e) {
2
      e.preventDefault();
3
      console.log("send address");
4
      if (showAccount.innerHTML) {
5
        socket.emit('register address', showAccount.innerHTML);
6
      }
7
      alert(showAccount.innerHTML + " added to notifications.")
8
    });
9
​
Copied!
Here is the entire sample index.html client that we built:
1
<html>
2
​
3
<head>
4
  <script src="/socket.io/socket.io.js"></script>
5
  <script src="web3.js"></script>
6
  <script>
7
    // connect to WebSocket server and start listening for notifications
8
    let socket = io();
9
    let el;
10
    socket.on('notification', (notificationBody) => {
11
      console.log("got notification");
12
      el = document.getElementById('server-notification');
13
      el.innerHTML = 'Look what just happened!: ' + notificationBody;
14
    });
15
  </script>
16
</head>
17
​
18
<body>
19
  <button class="enableEthereumButton">Enable Ethereum</button>
20
  <h2>Account: <span class="showAccount"></span></h2>
21
  <button class="enableNotificationsButton">Enable Notifications on this address</button>
22
  <script>
23
    const ethereumButton = document.querySelector('.enableEthereumButton');
24
    const showAccount = document.querySelector('.showAccount');
25
    const enableNotificationsButton = document.querySelector('.enableNotificationsButton');
26
    // when clicked, send request to server to register the connected Ethereum address with Alchemy
27
    enableNotificationsButton.addEventListener('click', function (e) {
28
      e.preventDefault();
29
      console.log("send address");
30
      if (showAccount.innerHTML) {
31
        socket.emit('register address', showAccount.innerHTML);
32
      }
33
      alert(showAccount.innerHTML+" added to notifications.")
34
    });
35
    // when clicked, connect to a web3 Ethereum wallet and get the active account
36
    ethereumButton.addEventListener('click', () => {
37
      getAccount();
38
    });
39
    async function getAccount() {
40
      const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
41
      const account = accounts[0];
42
      showAccount.innerHTML = account;
43
    }
44
  </script>
45
  <p id="server-notification"></p>
46
</body>
47
​
48
</html>

Copied!
That’s all it takes! With a quick build and deploy, our dApp looks like this:

Could not load image
Click “Enable Ethereum” to connect to MetaMask and select a wallet you want to connect to from the drop-down menu.e
Could not load image
And now click “Enable Notifications on this address” to register our address:
Could not load image
We can confirm in our Alchemy Dashboard that our wallet address has been added to the notification.
Could not load image
And now, with everything in place, if we send a small amount of testnet ETH to our address, we get a notification from the client with all the necessary details!  Note that to use the app, you must first click “Enable Ethereum” and connect with your desired Metamask address.  Then, you must click “Enable Notifications”.  Then, the webhook’s messages will show up on your frontend!

Could not load image
This is a simple example, but there are many ways you can expand on this to build a dApp that is real-time responsive for your users.  
Fork 🍴, build 🏗️, and design 📝off this repo!
9. Conclusion
Blockchain has evolved quickly, but blockchain user experience continues to be a discouraging experience, causing users to abandon dApps quickly. However, with Alchemy Notify, your users can stay informed and confident about their app usage and transaction activity.

Ready to start using Alchemy Notify? Create a free Alchemy account and get started today!