How I made a Web3 app to reward my community with tokens

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.

I made one million token supplies and decided to lock half of it using a time lock contract.

Locking tokens is for purpose to give trust 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)

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 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 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.

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

On localhost I was using a Testnet network. A fake network, that I set up with HardhatJs.

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:

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 on Twitter, as I continue to document my journey.