Skip to main content
Tutorial
Intermediate

Creating a watcher with ngrok-integrated webhooks

Learn how to receive ngrok-integrated webhooks to monitor blockchain activity locally.

You will need

  • A Starton API KEY
  • Ngrok Authentication Token
  • Basic comprehension of Node.js and Webhooks

Step 1

Creating Your Node.js Project

Set up your Node.js project environment:

  1. Create a Project Directory:

    mkdir my-starton-project
    cd my-starton-project
  2. Initialize Your Node.js Project:

    npm init -y
  3. Install Essential Packages:

    npm install express dotenv axios body-parser ngrok node-notifier
    • express: A minimal and flexible Node.js web application framework for building APIs and web servers.
    • dotenv: Loads environment variables from a .env file into process.env, managing configuration settings separately from the code.
    • axios: A promise-based HTTP client for making asynchronous HTTP requests to external resources, like REST APIs.
    • body-parser: Middleware for Express that parses incoming request bodies, making them available under the req.body property.
    • ngrok: Exposes local development servers to the Internet, useful for testing applications that interact with external services like webhooks.
    • node-notifier: A module for sending native desktop notifications, providing visual feedback from scripts or applications.

Understanding Webhooks

Webhooks dispatch automated HTTP POST requests activated by specific events in a source system. They relay data to a recipient system. With Starton, watchers utilize webhooks to send event notifications.

Step 2

Setting Up Environment Variables

  1. Configuring Variables: Create or update the .env file in your project's root directory:
STARTON_API_KEY=YOUR_STARTON_API_KEY
NGROK_TOKEN=YOUR_NGROK_AUTH_TOKEN
  1. Retrieving Your Ngrok Authentication Token

  2. Sign Up or Log In: Visit Ngrok's website and sign up or log in.

  3. Find the Token: In the dashboard, go to Your Authtoken and click Copy.

Step 3

Configuring the Watcher Integration

In your project's root directory, create a file named index.js and insert the following code: Tailor the watcher parameters and the rest of the code to suit your project's needs.

const express = require("express");
const bodyParser = require('body-parser');
const notifier = require('node-notifier');
const ngrok = require('ngrok');
const axios = require("axios");
require('dotenv').config();

const app = express();
app.use(bodyParser.json());

const axiosInstance = axios.create({
baseURL: "<https://api.starton.com>",
headers: {
"x-api-key": process.env.STARTON_API_KEY,
},
});
let watcherId = null;

app.post('/', (req, res) => {
if (req.body.data) {
notifier.notify({
title: 'New transaction',
message: `Hash: ${req.body.data.transaction.hash}`
})
}
res.send('ok')
})
const port = 30001
app.listen(port, () => {
console.log(`Server listening on port ${port}`)
createNgrokTunnelAndWatcher()
})

const createNgrokTunnelAndWatcher = async () => {
const url = await ngrok.connect({
authtoken: process.env.NGROK_TOKEN,
addr: port
})
console.log(`NGROK listening on ${url}`)
axiosInstance.post("/v3/watcher", {
name: "Watcher test",
address: "0x7ceB23fD6bC0adD59E62ac25578270cFf1b9f619",
network: "polygon-mainnet",
type: "EVENT_TRANSFER",
webhookUrl: url,
confirmationsBlocks: 0
}).then((response) => {
console.log("Watcher created", response.data)
watcherId = response.data.id
}).catch(e => console.log(e.response.data))
}

Tailor the watcher parameters to your needs like so :

name: "Watcher test",name of your watcher in Starton (learn more)
address:"0x7ceB23fD6bC0adD59E62ac25578270cFf1b9f619",address watched on the blockchain (learn more)
network: "polygon-mainnet",network on which we are creating the watcher (learn more)
type: "EVENT_TRANSFER",Type of event returned by the watcher (learn more)
webhookUrl: url,Url of your webhook (learn more)
confirmationsBlocks: 0Number of confirmation blocks (learn more)

Step 4

Automating the deletion of our test watcher

After testing, ensure to delete the watcher to prevent unintended operations.

const deleteWatcher = async () => {
await axiosInstance.delete(`/v3/watcher/${watcherId}`).then(response => {
console.log("Watcher deleted")
})
process.exit();
}

process.on('SIGINT', deleteWatcher)
process.on('SIGTERM', deleteWatcher)

Step 5

##Running the Project**

  1. Server: Start your server using the command:

    node index.js

  2. Client: Access your application by visiting http://localhost:3000 in a browser.

Step 6

Setting Up Webhooks with Ngrok**

  1. Launching Ngrok:

    ngrok http 3000

    Document the provided URL for webhook testing.

  2. Webhook Examination: Use the Ngrok URL as the webhook endpoint when creating the watcher.

Congratulations! You've successfully integrated Starton's Monitor with webhook notifications using Ngrok. This setup allows you to monitor blockchain activities locally and in real-time. As you transition to a production environment, remember to use permanent and secure webhook endpoints.

Loubna Benzaama

Lead technical writer


Created:

April 3, 2024

Reading time:

4 min


Content
  • Creating Your Node.js Project
  • Configuring the Watcher Integration
  • Automating the deletion of our test watcher