gitcoinco / grants-stack

Round Manager & Grant Explorer & Project Builder of the Grants Protocol

grants-round

This repository contains packages needed for a user to

• Create & Manage Rounds
• Explore available Rounds
• Vote for Projects within a Round

Project Maintained via : turborepo Package manager : pnpm

Packages

• round-manager: React application for managing rounds
• grant-explorer: React application for exploring the grants ecosystem
• builder: React application for managing projects
• common: components and functionality that is shared between projects
• eslint-config-gitcoin: common eslint config for all grants stack projects
• verify-env: a utility package and a webpack plugin for verifying the environment of an app during build

.
├── .github                     # github specific configuration
├── packages                    # individual frontends and related packages
├── package.json                # root package configuration
├── docs                        # documentation
└── README.md

Development

We welcome external contributions. Please make sure to familiarize yourself with the Contribution Guidelines.

To contribute to this project, fork the repo and follow the instructions at DEV.md

Hosting

All the apps are hosted on Vercel. Preview links get created automatically for PRs. Commits to main get deployed to production automatically.

grants-stack's Issues

Test story

User Story:
As a
I want to
So that

Acceptance Criteria
GIVEN
WHEN
THEN

Product & Design Links:

Tech Details:

Open Questions:

Notes/Assumptions:

doc: add contract interaction diagram

feat: add deploy script for GrantRoundImplementation

Add in the ability to deploy the GrantRoundImplmentation via a script onto testnet

Deploy round with form

User Story:
As a round operator
I want to deploy my round with my form configuration
So that users of the protocol can see what my application requires

Acceptance Criteria
GIVEN that I am on the Create Round flow step 2 (configure application form)
WHEN I hit the "Deploy" button
THEN my round is deployed with the application configuration

GIVEN that I am looking at my round contract on Etherscan
WHEN I call a function
THEN I can see the schema for my application form

Product & Design Links:

• Story-specific screen
• Full flow in Figma

Tech Details:

Open Questions:

Notes/Assumptions:

Make questions optional

User Story:
As a round operator
I want to make some application questions optional
So that I can tailor the application to what I need

Acceptance Criteria
GIVEN that I am on the Create Round flow step 2 (application form configuration)
WHEN I hit the "Optional" toggle beneath a question
THEN the question is marked as optional

GIVEN that I am on the Create Round flow step 2 (application form configuration) and have marked at least question as Optional
WHEN I hit the "Deploy" button
THEN the round is deployed with the question marked as optional

Product & Design Links:

• Story-specific screen
• Full flow in Figma

Tech Details:

Open Questions:

Notes/Assumptions:

[UI] Style Landing / wallet connect page

Overview
Update the landing page of Round Manager to the MVP UI (see Figma link below)

Details
Reference the "Landing" screen in RM wireframes

Create and view program

User Story:
As a round operator
I want to create and manage my grant program
So that I can have multiple grant rounds associated with my community

Acceptance Criteria
GIVEN that I am on the Round Manager landing page AND have connected my wallet
WHEN I click on "Create Grant Program"
THEN I am taken to the Program Creation form

GIVEN that I am on the Program Creation form
WHEN I look at the page
THEN I see a text field that says "Program name"
AND a text field to "Add operator wallet"
AND a button to "Add another operator wallet"
AND a button that says "save"

GIVEN that I am on the Program Creation form
WHEN I click on "Add another operator wallet"
THEN I see another text field below the current operator wallet field
AND I still see the "Add another operator wallet" button

GIVEN that I am on the Program Creation form AND have entered in a name and at least one operator wallet
WHEN I click on "Save"
THEN the program is created
AND I am redirected to the Round Manager landing page
AND I see my new program listed under "My Programs"
AND I see the button to "Create Grant Program"

GIVEN that I am connected to the Round Manager landing page and have an associated grant
WHEN I click on the grant
THEN I am brought to the Program Details page

GIVEN that I am on a Program Details page
WHEN I look at the page
THEN I see the Program's name
AND a list of associated wallets
AND a button that says "back"

GIVEN that I am on a Program Details page
WHEN I click "back"
THEN I am taken to the Round Manager landing page

Product & Design Links:
Steel Thread mocks

Tech Details:

Open Questions:

Notes/Assumptions:

chore: enable deploy env on PR to make it easier to test

• Explore fleek to see how PR can be deployed on review env
• Enable env to turn up only PR against main branch

Add IPFS action/reducer

• Implement the IPFS actions & reducer
• Write a sample page where you can upload a simple JSON data to ipfs via a button click
• Also add code where given a IPFS hash , you are able to retrieve the data and prase it and print it on the same screen

feat: add deploy script for createGround to test if creation works

Create and view grant round (backend)

This is for the backend elements of deploying a contract. The front-end components live in #7

User Story:
As a round operator
I want to create and publish a grant round
So that I can have a container for distributing my matching funds

Acceptance Criteria
GIVEN that I am on the Program Details page and have not created a round
WHEN I look at the page
THEN I see a heading that says "My rounds"
AND a button that says "create round"

GIVEN that I am on the Program Details page
WHEN I click on the button that says "create round"
THEN I am taken to the Round Creation form

GIVEN that I am on the Round Creation form
WHEN I look at the page
THEN I see a text field called "Round Name"
AND I see a date field called "Round Start Date"
AND I see a date field called "Round End Date"
AND I see a button called "Deploy Round"

GIVEN that I am on the Round Creation form and have filled out all the fields
WHEN I click on "Deploy Round"
THEN my round is saved to IPFS
AND my round is deployed to Goerli
AND I am redirected to the Program Details page

GIVEN that I am on the Program Details page and have deployed a round
WHEN I look at the page
THEN I see a list of the program's rounds under "My Rounds"
AND I see a button to "Create Round"

GIVEN that I am on the Program Details page and have deployed a round
WHEN I click on a round in the list
THEN I am taken to that round's Round Details page

GIVEN that I am on the Round Details page
WHEN I look at the page
THEN I see the round's name
AND I see the round's start and end dates
AND I see a button that says "Back"

GIVEN that I am on the Round Details page
WHEN I click "Back"
THEN I am brought to the parent Program Details page

Product & Design Links:
Steel Thread mocks

Tech Details:

Open Questions:

Notes/Assumptions:

Add drop-down form builder

User Story:
As a round operator
I want to select my application questions via a drop-down menu
So that my form creation is more efficient

Acceptance Criteria
GIVEN that I am on the Create Round flow step 2 (application form configuration)
WHEN I load the page
THEN I only see the Default Information questions
AND I see a drop-down menu to select additional questions

GIVEN that I am on the Create Round flow step 2 (application form configuration)
WHEN I click on a question in the drop-down menu
THEN that question is added to my application form with the "optional" toggle unchecked

Product & Design Links:

• Story-specific screen
• Full flow in Figma

Tech Details:

Open Questions:

Notes/Assumptions:

Create information design for application

Overview
We need to turn the Application Flow map into actionable designs to unblock development work. To do that, Product/Design need to align with GH Product/Design on information design for the applications.

Acceptance Criteria

• Product information design for applications, including which pieces are "standard", "custom", and data types

spike: explore subgraph

Description

This task involves exploring subgraph and understanding the flow!
This task can be marked completed -> once a sample subgraph can built and hosted on thegraph

Follow up task would be to create the subgraph package and allow fetching created Programs / Round operators

Base repo setup for Grant Explorer

User Story:
As a
I want to
So that

Acceptance Criteria
GIVEN
WHEN
THEN

Product & Design Links:

Tech Details:

Open Questions:

Notes/Assumptions:

Create nav bar

Overview

• Create nav component
• Update program button in nav

feat: implement subgraph to for program contract

Description

All the queries would have to be supported in the subgraphs being built.

• fetch all programs created
• fetch all programs by a given a program operator
• fetch all operators in a given program

View round states on Grant Explorer

User Story:
As a grant owner
I want to see what phase a grant round is in
So that I know what I can do with that round

Acceptance Criteria
GIVEN that I am on a round's grant explorer
WHEN the date is on or after the application start date and before the round start date
THEN I see the "Application Period" state of Grant explorer (see steel thread mocks)

GIVEN that I am on a round's grant explorer and am shown the "Application Period" state
WHEN I click on the "apply now" button
THEN Grant Hub is opened in a new tab

GIVEN that I am on the round's grant explorer
WHEN the date is on or after the round start date and before the round end date
THEN I am shown the "Live Period" state of Grant explorer

GIVEN that I am on the round's grant explorer
WHEN the date is before the application start date or after the round end date
THEN I am shown the "closed period" state of grant explorer

Product & Design Links:
Grant Explorer steel thread mocks

Tech Details:

Open Questions:

Notes/Assumptions:

See grant round applications

User Story:
As a round operator
I want to view grants that have applied to my round
So that I can decide which grants applications to accept

Acceptance Criteria
GIVEN that I am on the Round Details page
WHEN I look at the page
THEN I see a button that says "Review applications"

GIVEN that I am on the Round Details page
WHEN I click on "Review applications"
THEN I am brought to the Application Review page

GIVEN that I am on the Application Review page
WHEN I look at the page
THEN I see a heading that says "Applications Received"
AND a button that says "Back"

GIVEN that I am on the Application Review page
WHEN I click on the button that says "Back"
THEN I am brought to the parent round's Round Details page

Product & Design Links:
Steel Thread mocks

Tech Details:

Open Questions:

Notes/Assumptions:

feat: ProgramFactory Contract

Description

The goal here is to design and implement a simple factory pattern to allow

• creating ProgramFactory
• emitting event on creationProgramImplementation
• create Program by making a clone of the ProgramImplementation contract

The factory can be non-upgradable for now and we can look to make this upgradeable in the future

The PR should also contain example + documentation to explain the newly added contracts

feat: wire in etherscan verification for contracts

Description

Ensure all contracts which are deployable can be verified on etherscan

chore: move Round contracts into its folder to keep structure consistent

Aditya to populate context

chore: switch ProgramFactory to use Proxy Pattern

Description

• explore proxy pattern on Program to make an upgradeable contract
• introduce dummy upgradable contract
• add documentation on how to go about this
  This PR would show how we can rely on Proxy for program factory.
  Once we focus on test coverage -> we can consider implementing the proxy pattern for Grant Factory as well

Further details on what the proxy does can be found in the readme file.
For now this does not change the behavior on how program are created / deployed

chore: add debugger for contract scripts in vscode

While we run hardhat scripts to deploy / update contract.
Having a means to debug and explore values during execution is useful.
This ticket requires creating a launch.json file to enable running scripts in debug mode via vscode

[UI] Update New Program creation form styling

Overview
Update the New Program form to MVP styling

Details
Change over this page (see screenshot) to use this styling

feat: add script to deploy Program Factory

Description

Write up a script to deploy ProgramFactory.
This would be a one-time setup ideally.
Ensure documentation is added and contracts are deployed via script on test network

how do i run the repo locally?

would be great to get these instructions in the readme.

Spike: Investigate form builder packages

Timebox to 2 hours

Overview
What's the goal

Details
Say more

Add UI + Application Period End Dates to Round Creation form

User Stories
As a round operator
I want to specify an application period end date
So that grant applicants know when the application period closes

Acceptance Criteria
GIVEN that I am on the Round Creation Form
WHEN I look the page
THEN I am able to specify an end date for the application period

• this ticket also includes the scope for updating the round creation form to use the new MVP styling seen here

Create multi-step form

Overview
What's the goal

Details
Say more

Implement Gitcoin Design System

Tech Details:

Using TailwindCSS preflight configuration and theming, implement Typography and Color sections of the Gitcoin design system

https://tailwindcss.com/docs/preflight
https://tailwindcss.com/docs/theme

Product & Design Links:

Gitcoin Design System: https://www.figma.com/file/JTzaUKVxnGEmlaD3L8KsSm/Gitcoin-Design-System?node-id=1736%3A0

Open Questions:

Notes/Assumptions:

feat: add in solidity coverage report

Description

Wire in hardhat coverage configuration to enable generating coverage report via package.json
This is restricted to the package/contracts folder

Remove application questions

User Story:
As a round operator
I want to be able to remove application questions
So that I don't have to gather data I don't want

Acceptance Criteria
GIVEN that I am on the Create Round flow step 2 (application form configuration)
WHEN I click on the "X" next to a question
THEN the question is removed from the form

GIVEN that I am on the Create Round flow step 2 (application form configuration) and have removed at least one question
WHEN I click on the "Deploy" button
THEN the round is deployed without the removed questions

Add dynamic custom field (Nate to update)

Product & Design Links:

• Story-specific screen
• Full flow in Figma

Tech Details:

Open Questions:

Notes/Assumptions:

feat: create new Program via script

Description

Write up script that lets you leverage the deployed Factory and Implementation -> and use that to create multiple programs on testnetwork.

Connect to Round Manager

User Story:
As a round operator
I want to connect my wallet to Round Manager
So that I can manage projects and rounds

Acceptance Criteria
GIVEN that I have not connected my wallet to Round Manager
WHEN I arrive on the landing page
THEN I see a button to "Connect wallet"

GIVEN that I have not connected my wallet to Round Manager
WHEN I click on "Connect wallet"
THEN I see options to connect my wallet (i.e. Metamask)

GIVEN that I have connected my wallet on Round Manager
WHEN I arrive on the landing page
THEN I see a heading that says "My Programs"
AND a button to "Create Grant Program"

Product & Design Links:
Steel Thread mocks

Tech Details:

Open Questions:

Notes/Assumptions:

Create schema for Round Application form

Description
As part of the Application flow, we need to give Round Operators the ability to configure the application form that they want projects to fill out. This ticket is for the engineering team to create a data schema for the MVP form questions and share with the Grant Hub team.

Acceptance Criteria
Product a schema that supports:

• questions being required or optional
• the questions included in the MVP scope here

Base setup of subgraph package

Follow-on from #48

Acceptance criteria:

• Create a graph package
• base setup implemented with dummy entities
• documentation on how to setup

feat: ProgramImplementation Contract

Description

The goal here is to design and implement a simple factory pattern to allow

• creating a Program via ProgramFactory
• enabling AccessControl

In terms of what the program should contain ->

• a list of users who can update the metaPtr
• metaPtr

note: the program contract itself should be upgradable. This should be implemented by ProgramFactory using Zepplin's initialiser contract

The PR should also contain example + documentation to explain the newly added contract

feat: add script to update GrantRoundImp in GrantRoundFactory

Description

Implement a script to update /set GrantRoundImplementation contract in GrantRoundFactory.

feat: add script to deploy program implementation

Description

• Write up script to deploy Program Implementation on testnetwork
• Add documentation
• Ensure contract is deployed + verified on testnet

[UI] Update My Programs page styling

Overview
Update the My Programs page to use the MVP UI styling

Details
Update this page (see screenshot) to use this styling

Create required application form

User Story:
As a round operator
I want to add an application form to my round
So that I can get additional information about applications

Acceptance Criteria
GIVEN that I am in the Create Round flow step 1 (details page)
WHEN I click the "next" button
THEN I am brought to the Create Round flow step 2 (application form configuration)

GIVEN that I am in the Create Round flow step 2 (application form configuration)
WHEN I look at the page
THEN I see the form with all questions
AND I can fill them with the appropriate data types

Product & Design Links:

• Story-specific screen
• Full flow in Figma

Tech Details:

Open Questions:

Notes/Assumptions:

• We will not be adding the ability to deploy/submit questions in this step —> all you can do is see the form and fill in the boxes

spike: explore implementation on review system

Would love some insights here cause this bit is the first interaction btwn the two projects in what is being built on this side

Once a round is created. Grant owners can apply to the round but I'm not clear on what the interaction here is.

• How does round explorer operator prepare list of question to be shown to the grant owner (product)

• Where does this template get stored ? ( can be store in IPFS and linked to contract)

• Once the template is available -> hub can possible consume and ask owner to fill this out.

• Where does this info get stored ? (product / engineering)

• Once we know where it is stored, how will operator (approve / reject ) grant ? How will that info be sent to grantshub

• Where do we store list of approved grants ? (I'm assuming IPFS linked to contract)

• Do we store list of reject grants? (idk)

==========

This is a black hole at the moment cause there are multiple ways we could go about this.

Onchain

• makes it easy for others to check this info
• BUT how will we store all this ?
• are we okay with each approval / reject requiring an onchain txn

Centralized

• lot of groundwork
• once setup -> easy to build BUT data is stored centrally

Integrate tailwind

• Intergrate the tailwind library into codebase like how grants-hub has done.
• Ensure the tailwind css loads on the landing page

[UI] Update Program details page styling

Overview
Update Program details page to MVP styling

Details
Change this page (see screenshot) to use this styling

Wireframes for Application review flow

User Stories
As a round operator
I want to view new, approved, and rejected grant applications
So that I can keep track of the projects that want to be part of my round

As a round operator
I want to be able to review and approve/reject grant applications
So that I can control which projects are allowed in my round.

Acceptance Criteria

feat: add deploy script for GrantRoundFactory

Add in the ability to deploy the GrantRoundFactory via a script onto testnet

Design for Create Application Form flow

User Story:
As a round operator
I want to select the questions to include in my round's application form AND indicate which questions are required / optional
So that I can gather the necessary information from project owners

Acceptance Criteria
Create designs for

• configuring the Application Form
• light deploy flow

Details
The question and field types have been documented in the Application Flow discovery document and are listed here:

• Main Point of Contact (POC) name
• POC email (email)
• POC telegram (telegram account)
• Project Name (text field)
• Project Description (text field)
• Project socials (twitter, discord, linkedin, and/or github)
• Project website (text field)
• Project Roadmap + Milestones (text field)
• Funding Request Amount ($ field)
• Budget Breakdown / Funding Allocation (text field)
• Payout wallet address
• Custom text question
  • Note: round operators can use this type to ask any question, with the response type being a text field.

Create and view grant round (front-end)

This is for the frontend elements of interacting with a deployed contract. The contract work lives in #20

User Story:
As a round operator
I want to create and publish a grant round
So that I can have a container for distributing my matching funds

Acceptance Criteria
GIVEN that I am on the Program Details page and have not created a round
WHEN I look at the page
THEN I see a heading that says "My rounds"
AND a button that says "create round"

GIVEN that I am on the Program Details page
WHEN I click on the button that says "create round"
THEN I am taken to the Round Creation form

GIVEN that I am on the Round Creation form
WHEN I look at the page
THEN I see a text field called "Round Name"
AND I see a date field called "Application Start Date"
AND I see a date field called "Round Start Date"
AND I see a date field called "Round End Date"
AND I see a button called "Deploy Round"

GIVEN that I am on the Round Creation form and have filled out all the fields
WHEN I click on "Deploy Round"
THEN my round is saved to IPFS
AND my round is deployed to Goerli
AND I am redirected to the Program Details page

GIVEN that I am on the Program Details page and have deployed a round
WHEN I look at the page
THEN I see a list of the program's rounds under "My Rounds"
AND I see a button to "Create Round"

GIVEN that I am on the Program Details page and have deployed a round
WHEN I click on a round in the list
THEN I am taken to that round's Round Details page

GIVEN that I am on the Round Details page
WHEN I look at the page
THEN I see the round's name
AND I see the round's application start date
AND I see the round's start and end dates
AND I see a button that says "Back"

GIVEN that I am on the Round Details page
WHEN I click "Back"
THEN I am brought to the parent Program Details page

Product & Design Links:
Steel Thread mocks

Tech Details:

Open Questions:

Notes/Assumptions:

Rename Vote -> VotingStrategy. GrantRound -> Round

Description

This task involves renaming the vot contracts to VotingStrategy enabling to make it clear on what the folder is / does so as to stick to given naming convention that is present