Sneak-peek:

GitHub - Tidelaw/webhook-display: Create a UI for Helius's transaction webhook.

Why would you build this?

Webhooks are a critical component of web development today. It allows developers to receive real-time data about user activities on websites or apps. In this blog post, we will walk you through the process of creating a UI for Helius's transaction webhook.

• We will be using Supabase in order to store the data received from the webhooks
• No other third party app is required.

What are we building?

A website that displays webhook data from Helius API for NFT-related transactions of any given wallet address. The website will use a webhook from Helius to receive real-time data, which will then be processed by an internal API. This API will store the data into the Supabase database, where it will be retrieved by another internal API and displayed to the user in real-time on every reload of the website. This means that users will be able to stay up-to-date with their NFT transactions, receiving notifications in real-time whenever new transactions occur.

Getting Started:

In order to run locally:

• Node.js needs to be installed on your OS
• Clone the webhook-display repo
• Start the project
  1. Run npm install to install all our project's dependencies
  2. Run npm run dev to run our application

npm install downloads the packages found in package.json

npm run dev runs the website. The website can now be accessed from localhost:3000 or 0.0.0.0

In order for the dAPP to work, a webhook is necessary - in order to set one up, visit

https://www.helius.xyz

If following the below guide, feel free to ask for help in the Helius Discord or check with the open-source repository.

Setting up the webhook

First, you'll need to navigate to the webhook section of the Helius Developer Portal, and create a webhook, inputting the account address that you wish to track. In this example (that will be used in the code and for production), we are tracking an address on the Mainnet, with enhanced data unique to Helius. In the Webhook URL section, add the URL of your website - for now, we can add a URL from https://webhook.site/ in order to test. Doing so, we will be able to determine the format of the data sent, and prepare for it’s input into our database.

Setting up the database

For this, we will be using Supabase, after creating an account and organisation with all the default settings, you can create a project. The only setting we will be changing is to disable ‘RLS’

This will make it a lot simpler to save data to our database.

Save the Supabase keys to your .env.local file and we can now establish a connection to our database using the client we installed previously in the package.json . Create a file called supabaseClient.js in the outermost directory and input the following:

import { createClient } from '@supabase/supabase-js'

export const supabase = createClient(process.env.supabase_url, process.env.supabase_anon_key)

Depending on how you saved the Supabase keys you may need to change variable names - this is all we need to begin inserting data we receive form the webhook into our database.

To begin adding data to the database, we need to first add the columns that format the data we receive from the webhooks. Helius webhooks allow us to send a test to the webhook, after connecting the previously mentioned webhook as the URL, send a test so that we can see the columns and input them into Supabase.

Pasting this into a code editor like VSC, we can now see the outermost properties of the object we receive from Helius.

Although tedious, this is a necessary step, otherwise an error is thrown by Supabase. Fill these columns in using the test data from above.

• Simply insert a new column

• Input the name, and define the data type.

Below, are what the columns should look like once you are finished.

Setting up the website

Now that we have a place to store the data, we can start receiving it.

In an empty folder:

1. Open your terminal or command prompt.
2. Navigate to the directory where you want to create your project.
3. Run the following command to create a new Next.js project:

npx create-next-app

1. Follow the prompts to configure your project, include a src folder, choose a name for the project, I’d call it ‘webhook-display’.
2. Once the project is created, navigate into the project directory using the following command:

cd webhook-display

1. (Optional, START HERE IF INSTALLING THIS WAY) Install TailwindCSS using this tutorial.
2. Now, you can start your development server by running the following command:

npm run dev

1. Install all dependencies, replace your package.json with the following code and run the command npm install in the terminal

   {
     "name": "webhook-display",
     "version": "0.1.0",
     "private": true,
     "scripts": {
       "dev": "next dev",
       "build": "next build",
       "start": "next start",
       "lint": "next lint"
     },
     "dependencies": {
       "@supabase/supabase-js": "^2.21.0",
       "axios": "^1.3.5",
       "eslint": "8.38.0",
       "eslint-config-next": "13.3.0",
       "next": "13.3.0",
       "react": "18.2.0",
       "react-dom": "18.2.0"
     },
     "devDependencies": {
       "autoprefixer": "^10.4.14",
       "postcss": "^8.4.22",
       "tailwindcss": "^3.3.1"
     }
   }
   

• Supabase to store out webhook data
• Axios to retrieve our data in the frontend from the backend

The other dependencies should be preinstalled.

Receiving data from the webhook

In order for the webhook to be able to send the data, we will need to deploy the site; all we need is an API endpoint that the webhook can reach. Create a new file in /src/api named webhook.js

import { supabase } from '../../../supabaseClient';

export default function handler(req, res) {

  try {
    if (req.method === "POST") {

      let webhook_data = req.body

      const { data, error } = await supabase
        .from('txs')
        .upsert(webhook_data)
      res.status(200).json("success")

      console.log(data, error)

    };

  }

  catch (err) { console.log(err) }
}

We will be importing the supabaseClient we created before, this will allow our connection to the database. Our endpoint will only be accepting requests from the webhook, so we can restrict it to only being POST requests. This entire process is pretty simple, we only have to take the body of the request, and access the “txs” (in the earlier table editor example the table was named webhook-display so a tweak may be necessary depending on what you named the table for the database). Although the method .upsert isn’t necessary to be used here, it works fine and will not throw errors like .insert would in case the same tx is uploaded to the database twice.

Now, we need to push our existing code and files onto a Github repository, you can do this graphically on VSC:

• Firstly enter a commit message, anything will do
• Stage all changes by clicking the plus sign
• Then, click commit and push

Now we can deploy our app onto Vercel and start receiving data from the webhook. Create an account, all the default settings, then on the dashboard:

• Add a new project

• Import the repository