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

devvnomad

Romain @devvnomad

Posted on February 15, 2022

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 wallets 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:

Screen Shot 2022-02-04 at 2.23.45 PM.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 on Twitter, as I continue to document my journey.

💖 💪 🙅 🚩
devvnomad
Romain @devvnomad

Posted on February 15, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

What was your win this week?
weeklyretro What was your win this week?

November 29, 2024

Where GitOps Meets ClickOps
devops Where GitOps Meets ClickOps

November 29, 2024

How to Use KitOps with MLflow
beginners How to Use KitOps with MLflow

November 29, 2024