Code Monkey home page Code Monkey logo

op-retropgf3-discovery-voting's Introduction

Retroactive Public Goods Funding (RPGF) Voting Experience

Purpose

Badgeholders (voters in RetroPGF) need to be able to discover and vote on nominated projects. A good voting experience is core to supporting the work of badgeholders and ensuring an accurate RetroPGF process. This build seeks to empower badgeholders to find projects of various disciplines that have produced meaningful impact in the ecosystem that deserve to be promoted with funding.

Features of this build

  • Searchable, filterable and sortable view of all projects
  • Sign in with your wallet to see your allocation of votes
  • Ability to allocate to projects in any quantity within your limit
  • Badgeholders can create curated project lists with advised allocations to help raise awareness of projects in a self-defined grouping
  • Searchable, filterable and sortable view of all curated lists
  • Final ballot review before submission
  • Ability to share your submission on social media

Guiding insights and materials

Technology

๐Ÿ— Scaffold-ETH 2

Popular front end tool, Scaffold-ETH 2 has been used for it's easily forkable components designed with interacting with onchain data in mind. Built using NextJS, RainbowKit, Hardhat, Wagmi, and Typescript. Scaffold-ETH 2 Repo

MongoDB

For all the data housing needs to make project discovery and list curation as seamless and friction-free as possible.

Getting set up with the project

Requirements

Before you begin, you need to install the following tools:

Quickstart

To get started with this project, follow the steps below:

  1. Clone this repo & install dependencies
git clone https://github.com/scaffold-eth/OP-RetroPGF3-Discovery-Voting.git
cd OP-RetroPGF3-Discovery-Voting
yarn install
  1. Copy the .env.example file and change name to .env.local. Set the MONGO_URI to the database you are using.

  2. In the terminal, start your the project:

yarn start

Visit your app on: http://localhost:3000.

Deploying to Vercel

Hint: We recommend connecting your GitHub repo to Vercel (through the Vercel UI) so it gets automatically deployed when pushing to main.

If you want to deploy directly from the CLI, run yarn vercel and follow the steps to deploy to Vercel. Once you log in (email, github, etc), the default options should work. It'll give you a public URL.

If you want to redeploy to the same production URL you can run yarn vercel --prod. If you omit the --prod flag it will deploy it to a preview/test URL.

Make sure to check the values of your Scaffold Configuration before deploying your NextJS App.

Scaffold App Configuration

You can configure different settings for your dapp at packages/nextjs/scaffold.config.ts.

export type ScaffoldConfig = {
  targetNetwork: chains.Chain;
  pollingInterval: number;
  alchemyApiKey: string;
  walletConnectProjectId: string;
  onlyLocalBurnerWallet: boolean;
  walletAutoConnect: boolean;
  // your dapp custom config, eg:
  // tokenIcon : string;
};

The configuration parameters are described below, make sure to update the values according to your needs:

  • targetNetwork
    Sets the blockchain network where your dapp is deployed. Use values from wagmi/chains.

  • pollingInterval
    The interval in milliseconds at which your front-end application polls the RPC servers for fresh data. Note that this setting does not affect the local network.

  • alchemyApiKey
    Default Alchemy API key from Scaffold ETH 2 for local testing purposes.
    It's recommended to obtain your own API key from the Alchemy Dashboard and store it in an environment variable: NEXT_PUBLIC_ALCHEMY_API_KEY at \packages\nextjs\.env.local file.

  • walletConnectProjectId
    WalletConnect's default project ID from Scaffold ETH 2 for local testing purposes. It's recommended to obtain your own project ID from the WalletConnect website and store it in an environment variable: NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID at \packages\nextjs\.env.local file.

  • onlyLocalBurnerWallet
    Controls the networks where the Burner Wallet feature is available. This feature provides a lightweight wallet for users.

    • true => Use Burner Wallet only on hardhat network.
    • false => Use Burner Wallet on all networks.
  • walletAutoConnect
    Set it to true to activate automatic wallet connection behavior:

    • If the user was connected into a wallet before, on page reload it reconnects automatically.
    • If user is not connected to any wallet, on reload, it connects to the burner wallet if it is enabled for the current network. See onlyLocalBurnerWallet

You can extend this configuration file, adding new parameters that you need to use across your dapp (make sure you update the above type ScaffoldConfig):

  tokenIcon: "๐Ÿ’Ž",

To use the values from the ScaffoldConfig in any other file of your application, you first need to import it in those files:

import scaffoldConfig from "~~/scaffold.config";

A multitude of more detailed information related to Scaffold-ETH 2 can be found at the Scaffold-ETH 2 Repo

Contributing to OP-RetroPGF3-Discovery-Voting

We welcome contributions to OP-RetroPGF3-Discovery-Voting!

Please see CONTRIBUTING.MD for more information and guidelines for contributing to OP-RetroPGF3-Discovery-Voting.

op-retropgf3-discovery-voting's People

Contributors

blahkheart avatar ceeriil avatar chirag018 avatar dependabot[bot] avatar electrone901 avatar emudoteth avatar escottalexander avatar gotnoshoeson avatar ifechukwudaniel avatar kcpele avatar luloxi avatar technophile-04 avatar zakgriffith avatar

Stargazers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.