How I made a Web3 app to reward my community with tokens
Published: 2022-02-15 07:20:53

When I started my web3 journey I got a freelance contract: Add web3 features to an existing app and **reward the users with our token**.

The point of rewarding the community was:

- To motivate the community to **do something** to earn a token.
- The brand wanted to have its own token to **improve branding**.
- Rewarding the user with tokens is becoming more and more common these days.

Our users should **get 5 tokens** when completing their profile (bio, curriculum, social media links, etc.).

But we could imagine rewarding users for many other kinds of actions, such as: commenting on a post or sharing a post on social media.

## Create a token  ⚒️

The first major task was to create a token.

After some research and discussions with other DEV, I decided to use an [ERC-20 token](https://ethereum.org/en/developers/docs/standards/tokens/erc-20/).

I made one million token supplies and decided to lock half of it using a [time lock contract](https://www.investopedia.com/terms/h/hashed-timelock-contract.asp).

Locking tokens is for purpose to give [trust](https://www.certik.com/resources/blog/technology/Timelock) to your tokens to your users.

## Get the wallet public ID of the user 🆔

Then, I had to connect my front-end to Metamask API (or to [wallet connect](https://walletconnect.com/))

The goal is to get the **wallet public ID of my users**.

With this wallet public ID I will be able to **transfer** to theses users my **reward’s tokens**.

I also needed to add our token to their Metamask wallet. Which was something I could handle with the Metamask API.

I then simply saved the wallet public ID on the user table. I will use this public ID later.

## Reward the users when they complete their profile 👏

When a user completes his profile on the app we need to send him 5 tokens.

Firstly I made a **« reward »** table on the back-end. I want to know whether that specific type of reward was already given to this user.

Then on my back-end, I needed to make an endpoint that would trigger a **function to make a token transaction**.

To make a transaction I used **[etherJs](https://docs.ethers.io/v5/)** on my NodeJs app. When the conditions are met, I **make a new transaction from my wallet ID to the user walletID**.

I also pay the [gas fee](https://www.investopedia.com/terms/g/gas-ethereum.asp) using my wallet automatically. My server **can access my wallet using my wallet**’**s private key.**

When a transaction is successful, the user will get a notification and the token will appear in his wallet.

## Deploy our token to the Polygon network 🕸

Using Ethereum network is expensive when it comes to pay gas fee. That’s one of the reasons we decided to go for [Polygon Matic](https://polygon.technology/).

Polygon is also a part of the blockchain network. However, the cost to operate is well cheaper than on Ethereum.

On [localhost](http://localhost) I was using a [Testnet network](https://academy.bit2me.com/en/what-is-testnet/). A fake network, that I set up with [HardhatJs](https://hardhat.org/).

I now needed to push my ERC-20 token to Polygon network.

I used again HardhatJs in order to deal with this.

## Security concerns 🔒

When it comes to Web3 and Blockchain, I had to make sure that my setup was safe 😀

By safe I mean:

- I don’t want bots to be able to make thousands of transactions.
- I don’t want people to use my wallet ;)

This is what I did for this app:

- I stored the wallet private key on the environment global variables of my server.
- That wallet contains only a few Ethers. Enough to pay a few months of gas fee
- That wallet contains only 1% of the tokens we created.
- A user cannot get multiple reward tokens for the same type of reward. For example, the type of reward was « set-up-profile-reward ».
- Only logged users will get a reward.
- We verify that the user is the right one by signing the bearer token. We stored the signature of that bearer token on the server.

This is how that process looks:


![Screen Shot 2022-02-04 at 2.23.45 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643955843672/_TiW5WCma.png)

### What’s Next?

I’m planning in the future, to release Saas App using Web3 and to accept more freelance contract using that technology.

👉 You can **[follow me there](https://twitter.com/devvnomad)** on Twitter, as I continue to document my journey.