Aniol Carbó
June 02, 2023

Create your own POAP claiming site with the Vottun NFT SDK

Next.js is a popular framework for building server-side rendered React applications. In this article, we will explore how to implement the Vottun SDK in a Next.js project to create a POAP (Proof of Attendance Protocol) claiming site. By leveraging Next.js’s serverless functions and secure environment variables, we can ensure the smooth integration of the Vottun SDK while maintaining the necessary security measures.

Prerequisites

Before you start developing, you need to have the following:

Ethereum wallet (e.g. Metamask)
Vottun API credentials (get yours at https://apis.vottun.tech/trial)
Node (version 16.8 or higher)

Building the Next.js API with the Vottun SDK implementation

To begin, we store the Vottun API KEY in the environment variables of the serverless API. By doing so, the API KEY remains secure and cannot be accessed or read from the browser. This step is crucial to prevent any potential misuse or unauthorized access to the API KEY.

API functions: Scripts and Endpoints

The implementation of the Vottun SDK methods in our Next.js project can be divided into two groups: “Scripts” and “Endpoints.”

Scripts

The “Scripts” category comprises actions that are performed only once, serving as helpers to prepare the website. These actions include deploying the contract, uploading assets, and other necessary tasks. We execute these scripts using Node.js to ensure smooth deployment and setup processes. Here’s an example of a script:

Endpoints

The “Endpoints” category includes methods that will be called from the frontend, such as claiming a POAP. These methods interact with the Vottun SDK and handle the necessary operations. By exposing these endpoints, we enable the frontend to communicate with the backend seamlessly. Here’s an example of an endpoint:

Frontend Implementation

In the frontend of our POAP claiming site, we follow a simple and intuitive user flow. We aim to provide a seamless experience for users to connect their wallets and claim their POAP tokens.

On the initial page, we include a “Connect Wallet” button that uses Metamask in order to retrieve the user’s wallet address without requiring a text input.

Once the wallet address is retrieved, we display a “Claim POAP” button to the user. When clicked, this button triggers an API call to our custom endpoint. The backend, utilizing the Vottun SDK, facilitates the transfer of the POAP to the corresponding account.

Conclusions

In this article, we’ve learned how to implement the Vottun SDK in a Next.js project with the following particularities:

Using Next.js serverless functions for securing the Vottun API KEY through environment variables, keeping it inaccessible from the browser.
Dividing the API methods into “Scripts” and “Endpoints,” for separating the SDK implementation between the actions used during the website setup and the actions performed within the website.
Connecting the wallet through Metamask to retrieve the user’s wallet address for a more user-friendly and smooth experience.

In future articles, we will dive deeper into the implementation code and provide more detailed explanations and insights of the integration process.