ExplorerFaucetBridgeDevelopersWhitepaperDashboard

Hello Humanity Client

In this section you will be creating your first client side integration app with humanity protocol. This will be a web application where users can check the validity of their wallet addresses associated with their identity against the Humanity Protocol knowledge base through Humanity Protocol API.

You can find the code for this tutorial in the following repo. Remember to rename your .env.example to .env and to add your API key

LogoGitHub - humanity-org/hello-humanity: Humanity Protocol Example AppGitHub

Let’s first create the folder and basic structure of our project

Add the following content to your package.json

Install all the packages with npm i

Let’s create a next.config.mjs at the root of our project with the following content so we can work with svg files flawless:

Now for tailwind which is our styling solution let’s create a tailwind.config.js with the following content:

And a postcss.config.js with the following content:

Now let’s create the basic structure for our application.

Create a folder called app in the root of your project then inside that folder create a layout.tsx with the following contents:

Then create another file inside /app folder alongside layout.tsx called page.tsx and add the following content:

Finally let’s create a folder called styles inside our /app folder and let’s create a file called globals.css inside that new folder with the following content:

The structure of the our folder should look like this:

We are now ready to fire up our app by typing in our terminal npm run dev which may generate a couple of new files for us and you should see something like this when visiting http://localhost:3000/ .

With our environment ready we can now move to creating our app

You can download a repository with the code. If you do, do not forget to rename .env.example to .env.local

LogoGitHub - humanity-org/hello-humanity: Humanity Protocol Example AppGitHub

First let’s create a .env.local file at the root of our directory with the following contents

In order to properly connect our wallet without any Typescript errors we need to create a global.d.ts file with the following contents

Then in our tsconfig.ts file we need to add our global.d.ts file inside the includes array like this:

Let’s create a new folder called components inside our app folder, then create a file called MessageCard.tsx with the following content

This is a simple component in charge of displaying a successful verification graphic for users with an EVM wallet address associated with their Humanity Protocol identity. The component accepts a simple property isSuccess then just returns styled HTML alongside a confetti effect when the component is rendered on our app.

Let’s jump into our page.tsx and create our logic. We will add the following content at the beginning of the file

inside our export function Page we will include a set of state variables to control the reactivity of our application. We need to keep track of the connected wallet address, a trimmed version of that address for displaying purposes, a boolean reference for our API call and, finally a loading state for when our fetching to the API is taking place.

Then for our return statement we will replace our previous content with the following

This will generate the right HTML we are going to need in order to connect our wallet and make our call to the Humanity Protocol API

Now let’s connect our app to Metamask. Add the following function after your state variables declarations

This function will handle the connection to Metamask from our HTML markup through our “Connect Wallet” button. It will look for an instance of Metamask in our browser and if one is found will create a connection with our currently selected account asking you to allow to connect to the application through a dialog.

It will also change our “Connect Wallet” text to a trimmed version of our wallet address as well as taking care of errors when trying to connect to Metamask or if no instance of Metamask is found in the browser (the extension is not installed or enabled).

Now let’s focus on the connection to Humanity Protocol API. Add the following code below our previous connectWallet function

The above function will only work if we successfully connected our wallet using one of our state variables: walletAddress. If not we will use react-toaster installed library to display an error.

If a wallet is connected, we will proceed with the request to the API using the base URL stored in our .env.local file plus the right endpoint v1/human/verify? plus the connected wallet address.

In the call we need to attach our API key in the headers section declaring it as X-HP-API-Key

We await for the json response coming from the API and if it does not contain a property called is_human set to true we will display a react-toast message informing the user they are not a verified human within Humanity Protocol.

If the is_human property is true we set our isSuccess state variable as true as well.

Finally let’s add this following line to our return statement inside our <div className=”layout-right”> HTML node.

This will trigger our MessageCard component to show up once our isSuccess variable changes its state to true.

Your Page.tsx file should look like this

And your folder structure should look like this

If our app is not already running make sure it is by running npm run dev If you visit http://localhost:3000 you should see something like this

Click on the Connect Wallet button and it should ask for Metamask to connect to the app

Finally click on Check your human credential and after a few second you should see the following page including our MessageCard component

Congratulations you successfully build a modern online application that implements a verification process for any individual enrolled in Humanity Protocol with an EIP-55 compatible wallet address!. Feel free to modify or expand this implementation to integrate your own service.

Next Steps

If you want to explore a server side integration to integrate your project into humanity protocol please visit our hello humaniy server

You are now equipped to develop more sophisticated applications and incorporate Humanity Protocol into your existing systems. To facilitate this process, please visit our Developers Portal where you can access comprehensive resources to create innovative applications that ensure each user is a verified unique individual.

PreviousPrerequisitesNextHello Humanity Server

Last updated