User tutorial of OAK’s hackathon winning Quadratic Funding dApp

Hey OAK community members,

As mentioned in our last article, OAK Network won the 1st prize of the Polkadot hackathon in July.

Today we are going to walk you through our hackathon project, a web application for the Quadratic Funding pallet sponsored by Web3 Foundation Open Grant.

Basically, the web dApp provides a neat user interface for developers to easily create grant submission, and for users to view the ongoing and the past grants, as well as to participate by donating OAK token.

Our marketing manager Leah has created a Youtube video for the user walk-through below.

1. Background of the project

For a detailed explanation of Quadratic Funding, please refer to:

OAK Network won the Web3 Fund to establish a quadratic voting module

For developer tutorial of the Quadratic Funding pallet, please check out:

[Tutorial]Developer walk-through for Polkadot quadratic funding pallet

Quadratic Fuding dApp demo URL:
https://polkagrant.com/

2. Product walk-through

First, please go to https://polkagrant.com/ in your browser for the demo website.

The landing page of the demo website https://polkagrant.com

Click “Connect a Wallet” at the top right corner to read wallets from the polkadot{.js} extension. For how to create a wallet, please refer to the article below:

[Tutorial] Get OAK test tokens with Polkadot.js extension

The wallet selection pop-up modal

After selecting a wallet address, the “Connect a Wallet” button is now replaced by the wallet address. Clicking on the address will allow you to re-select a wallet.

Now, as the below screenshot shown you can choose the past and the current campaigns of the Quadratic Funding. Each campaign lasts for a month and usually will have 6–8 grants in one round.

Selecting different campaign using the dropdown button

Clicking on a project from the list leads to the Project Detail page, where users can get information about the project such as description, creator, created datetime, voting received, matched funds, and etc.

Now we’re going to show you how to participate in the funding. First, users need to enter the number of tokens in the input box, and the frontend calculation will show an estimate of the matching funds.

The top half of the Project Detail page

After confirming the number of tokens and the matching funds, click on the “Participate” button. Once clicked, a Polkadot.js extension window will show up to ask for confirmation, and signing password. Once signed, the pop-ups on the top right corner will notify user about the pending state, and the confirmation of the outgoing transaction.

The Polkadot.js pop-up asking for confirmation and the signature

Besides, the Project Detail page also shows the project’s creator, social media links, participation history, and team members.

Bottom half of the Project Detail page showing Social Media, history, and team members

At the bottom of the page, users can also check the messages left by all users, contributors of the project, and relevant transactions.

Comments, Contributors and Transactions at the bottom

3. Create a Quadratic Funding grant

Now let us return to the polkagrant.com landing page to create a grant for our own project. Click on “Create a Grant” in the top nav menu.

Click on “Create a Grant” button on the top

Now we are navigated to the application form for the Quadratic Funding grant. Fill in your project information based on the questions.

The first question of the Quadratic Funding questionnaire

Project Name
The name of your project

Project Description
The long text description of your project

Project Website
The website URL, if there’s any

Team Members
Team members of the project

Twitter Handle
The project’s official Twitter handle

Github URL
The official GitHub URL of the project

Region
Select the area of the team

External Funding Information
Explain the current funding situation of the project

Pick a category
Infrastructure, utility, blockchain, smart contract or anything else

If you have followed through, congratulations! So far you have created a Quadratic Funding grant for your project. Share it with your coworker and friends. A great journey awaits!

Thanks for reading!

Stay tuned for further information about the OAK Network here on Medium, Twitter and LinkedIn, as well as in our Discord Server!

Please check out our engineering and growth job openings, contact partner@oak.tech for partnerships, or contact@oak.tech for any general inquiries.