scaffold-eth / op-retropgf3-discovery-voting

Create the voting and discovery process for OP retroactive public goods funding for badgeholders

🏗 Scaffold-ETH

🚨🚨 This repository has been archived and is now read-only 🚨🚨

You are still welcome to fork and use as a template but no more changes will be made to this repository.

🎖 Scaffold-ETH 2 is the latest version, we recommend you fork: https://github.com/scaffold-eth/scaffold-eth-2

---

everything you need to build on Ethereum! 🚀

🧪 Quickly experiment with Solidity using a frontend that adapts to your smart contract:

🏄‍♂️ Quick Start

Prerequisites: Node (v18 LTS) plus Yarn (v1.x) and Git

🚨 If you are using a version < v18 you will need to remove openssl-legacy-provider from the start script in package.json

1️⃣ clone/fork 🏗 scaffold-eth:

git clone https://github.com/scaffold-eth/scaffold-eth.git

2️⃣ install and start your 👷‍ Hardhat chain:

cd scaffold-eth
yarn install
yarn chain

3️⃣ in a second terminal window, start your 📱 frontend:

🚨 if your contracts are not deployed to localhost, you will need to update the default network in App.jsx to match your default network in hardhat-config.js.

cd scaffold-eth
yarn start

4️⃣ in a third terminal window, 🛰 deploy your contract:

🚨 if you are not deploying to localhost, you will need to run yarn generate first and then fund the deployer account. To view account balances, run yarn account. You will also need to update hardhat-config.js with the correct default network.

cd scaffold-eth
yarn deploy

🔏 Edit your smart contract YourContract.sol in packages/hardhat/contracts

📝 Edit your frontend App.jsx in packages/react-app/src

💼 Edit your deployment scripts in packages/hardhat/deploy

📱 Open http://localhost:3000 to see the app

🚨📡 To deploy to a public domain, use yarn surge. You will need to have a surge account and have the surge CLI installed. There is also the option to deploy to IPFS using yarn ipfs and yarn s3 to deploy to an AWS bucket 🪣 There are scripts in the packages/react-app/src/scripts folder to help with this.`

📚 Documentation

Documentation, tutorials, challenges, and many more resources, visit: docs.scaffoldeth.io

🍦 Other Flavors

• scaffold-eth-typescript
• scaffold-eth-tailwind
• scaffold-nextjs
• scaffold-chakra
• Scaffold-ETH x Buildbear
• eth-hooks
• eth-components
• scaffold-eth-expo
• scaffold-eth-truffle

🔭 Learning Solidity

📕 Read the docs: https://docs.soliditylang.org

📚 Go through each topic from solidity by example editing YourContract.sol in 🏗 scaffold-eth

• Primitive Data Types
• Mappings
• Structs
• Modifiers
• Events
• Inheritance
• Payable
• Fallback

📧 Learn the Solidity globals and units

🛠 Buidl

Check out all the active branches, open issues, and join/fund the 🏰 BuidlGuidl!

• 🚤 Follow the full Ethereum Speed Run

• 🎟 Create your first NFT

• 🥩 Build a staking smart contract

• 🏵 Deploy a token and vendor

• 🎫 Extend the NFT example to make a "buyer mints" marketplace

• 🎲 Learn about commit/reveal

• ✍️ Learn how ecrecover works

• 👩‍👩‍👧‍👧 Build a multi-sig that uses off-chain signatures

• ⏳ Extend the multi-sig to stream ETH

• ⚖️ Learn how a simple DEX works

• 🦍 Ape into learning!

💌 P.S.

🌍 You need an RPC key for testnets and production deployments, create an Alchemy account and replace the value of ALCHEMY_KEY = xxx in packages/react-app/src/constants.js with your new key.

📣 Make sure you update the InfuraID before you go to production. Huge thanks to Infura for our special account that fields 7m req/day!

🏃💨 Speedrun Ethereum

Register as a builder here and start on some of the challenges and build a portfolio.

💬 Support Chat

Join the telegram support chat 💬 or buidlguidl discord to ask questions and find others building with 🏗 scaffold-eth!

---

🙏 Please check out our Gitcoin grant too!

Automated with Gitpod

op-retropgf3-discovery-voting's Issues

HandleAddBallot is not defined

On edit distribution after adding to the ballot, while clicking on save => the error pops up

Reference: #52

Unexpected behavior when using filters

When using the filters on the project page it appears that the number in each filter is only displaying the count of the projects on that page alone, not all pages. When clicking in, it will also only display the projects on that current page that match the criteria. This is happening in both the grid and list views of projects. These filters should always show the total number of projects that fit the criteria, and push them all into as few pages as possible when clicking, instead of leaving the projects on the page where they were initially displayed.

View Ballot Button Function

Clicking the view ballot button should drop users off on the review ballot view.

Remove View Ballot page scrollbar

Let's remove the scroll bar from the View Ballot page and just have the projects added in a long vertical list. They can scroll their browser down to get to them all.

Current view:

Need a way to get back to all projects when using category filters

Once a user clicks one of the top category filters, there is no way to go back to show all projects other than clicking the Projects tab again. Once you click a filter, lets make it so if you click it again, it deselects the filter and once again shows all projects.

My Ballot page needs a 'Submit Ballot' button to submit

We need the ability for the user to submit their ballot from the My Ballot page.

Edit Distribution modal number input

The number input is a little janky in that it doesn't allow you to backspace without appending a mandatory 0 which doesn't go away when you add a whole number. One solution is to add a onChange function that parses the input to a more usual look and feel before updating the state.

Projects pagination limit

use-real-data branch

In the project page, we now have a much larger number of projects which is causing the pagination system to extend too far. This is occurring in both the grid and horizontal views.

Let's limit the visible number pages at any time to 5 or so. Also up for discussion are buttons to jump to the very beginning or end.

When using the Edit Distribution modal, the distributions doesn't actually update and any number is allowed.

Is there an existing issue for this?

• I have looked through the existing issues

Current Behavior

When using the Edit Distribution modal, any number is allowed to be set as the new distribution, even if it is higher than their remaining distribution. Then after saving the distribution, it doesn't actually save it as seen in the video.

(I also ran into the Edit Distribution modal randomly disappearing when I tried to highlight and delete the 0, but that will be another Issue after testing)

Expected Behavior

No response

Steps To Reproduce

No response

Anything else?

No response

In the wide view, projects are not links or clickable

In this view of the projects

each project is not clickable in any way. These should be links the each project's page like it is in the grid view.

View shift when changing categories (and scroll bar appears)

There is a jarring shift when you change between a category that has many items and one that has few due to the scroll bar appearing/disappearing on the right of the view. This shifts the projects view and some items in the header slightly.

Allow decimal places in the allocation.

When allocating votes via the distribution modal, we need to allow for decimal places. 2 decimal places should be sufficient.

Projects in grid view need a border

The project cards in the grid view need a border like they have in the list view

Grid view:

List view:

Request - Op Allocated Link

Let's have this thing:

Link to this Edit Distribution modal:

Background color adjustment

Currently the color for the background throughout the site is not #ffffff as it should be. Is this something we can adjust in the tailwind config?

Remove some padding/margins from View Ballot page, make list page look the same.

To fit more projects in, let's lessen the padding/margins (Whatever is used here) on each project in the View Ballot page so more can be seen on one page. Here is how it currently looks:

But this would look a little sleeker and easier on the eyes:

Then the view when you've clicked into a list, that page needs to have the same sizing/spacing as the above changes. This should also be implemented into the "Edit Distribution" page when you are updating the distribution of a pre-existing List. Same with the modal after clicking Add To Ballot from when you've clicked into a list.

Current List:

Current "Edit Distribution" when editing the distribution of a list before adding it to your own ballot:

A good place to go to get an idea of the correct sizing/spacing is this view from the OP Figma:

Summary of changes:

• View Ballot page spacing/size updates
• Clicked into a list view spacing/size updates
• List view - Edit Distribution spacing/size updates
• List view - Add To Ballot spacing/size updates

Easier editing of allocation in My Ballot page

Currently editing the allocation on the My Ballot page requires clicking the three dot icon, then hitting edit, then changing the value and saving. Lets make that easier and use an input and delete button just like how we do it in the List edit distribution page.

Current My Ballot page:

Easier solution(But no need to include the greyed out, previous, distribution like in this List screenshot):

The input should be auto populated with the current allocation and also check for any allocations higher than the max. If they do type in a bigger number than allowed we should limit the number in the input and maybe even give them a warning message similar to the one in this modal:

Edit Distribution modal disappears when highlighting

If you use the cursor to highlight the text in the Edit Distribution modal, the entire thing disappears. Clicking in and hitting backspace does not have the same effect. Highlighting was the only way I could reproduce this bug. This only occurs for me in Chrome. It works as intended in Forefox.

Dark Mode Issues

The background isn't updating when switching to dark made, causing quite a few items to become invisible.

Also the current tab's text color needs to change when in dark mode as it is also very hard to see.

Pagination shouldn't shift right when on last page.

As seen here when getting to the last page the pagination system shifts to the right when the Next button disappears. That causes some confusion. The other buttons should stay located in the same spot even when on the last page and the Next button is gone.

Button test hidden in dark mode.

Is there an existing issue for this?

• I have looked through the existing issues

Current Behavior

The text after expanding the three-dot button in the project view doesn't not appear in dark mode.

Expected Behavior

No response

Steps To Reproduce

No response

Anything else?

No response

List view needs truncated for long descriptions.

The description of a list needs truncated while in the horizontal view in the same way the projects list does it.

List horizontal:

Project horizontal:

Shuffle is shuffling categories as well

The categories should not be shuffling when using the Shuffle button in the project view. Happens in both grid and list views of projects.

Pagination Functionality

Currently the pagination looks great but doesn't work. We want to add logic that makes pagination only appear when needed and then when clicked takes the user to more paginated results.

View Ballot & Address buttons in Firefox Browser

When using Firefox, the View Ballot and Address button padding are not displaying the same way as other browsers. Here is whatI see using Firefox:

Here is what it looks like (correct) in Chrome:

Also the capitalization should be updated to be consistent between light and dark mode. I don't have a preference between "View Ballot" or "VIEW BALLOT", but they should be the same.

Ballot Review

Ballot page needs to look like designs.

Currently it looks like this:

A UI component does exist that fits the design but it will need to be integrated with any functionality on the current ballot page.

Liked Projects Tab

Currently "Liked" projects are not displaying in the Liked tab. Is it possible to implement that now, or do we have to wait until we get OP's information. If we can do it now, let's do.

The shuffle button in the Liked tab doesn't seem to have any effect (Although it's tough to test with just two). Let's implement a list shuffling like in the projects page.

Three dot button stays after editing distribution.

Is there an existing issue for this?

• I have looked through the existing issues

Current Behavior

In the project view, the three dot button pop-up stays there even after clicking a button and changing the distribution. This pop-up should hide as soon a button is pressed in it's menu.

Expected Behavior

No response

Steps To Reproduce

No response

Anything else?

No response

Dark mode issues with Edit Distribution and Add List To Ballot modals

We need to fix the dark mode version of these two modals.

Edit Distribution:

Add List To Ballot:

Vote allocation modal auto closes when highlighting text

The distributions modal will close when highlighting the number in the field, and letting off the mouse when the cursor is off the modal. This is happening in Chrome and Brave, but not in Firefox. If you let off the click with the mouse cursor still on the modal or use backspace to delete, it works as intended. This happens when both using the Add To Ballot or Edit Distribution buttons.

The expected behavior it that the modal should stay open, even when you quickly highlight the text and finish with the cursor outside the modal.

Another good addition for this would be to set the focus in the input when this modal opens, so the user doesn't have to click in to edit the number.

Documentation/Readme update

Update the Readme file to make it easy for the other developers to walk in easily.

cc: @escottalexander @ZakGriffith @emudoteth

Allocation Issues

There are a handful of bugs that exist when using the project page to allocate votes.

On the pop-up modal when clicking Edit Distribution, then typing a non-number, the field will display NaN. You can delete out the NaN and continue, but if you leave the NaN and click Save, the main allocation bar fills up and displays a NaN. NaN is also displayed on the OP Allocated area of the project page. If you edit distribution again and choose a regular number, then allocated votes returns to normal.

When adding a project to the ballot, then choosing any number (other than 1), the votes will appear in the red allocation bar, but the red Op Allocated section will display a 1. Then clicking back into the Edit Distribution button also shows a 1.

Similar to the above, the modal for the Add To Ballot and Edit Distribution needs to be locked to only allow the max allocation. In our case that is 100. There is very sporadic behavior if numbers higher than 100 are entered. It should allow a max of (current allocated votes + number entered in modal).

Request - Larger link on project card

It would be handy if this entire card was the link to the project page instead of just the project title.

The only caveat is that this little section:

should not be part of the link but instead just highlight that filter like here:

Suggested Projects no longer populates

This was populating as of a few PRs ago. Not sure what changed.

Mobile View Dark Mode Button

Currently when viewing on mobile, the switch to dark mode button (In the three line nav menu button) is just a blank bubble. That should be the real dark mode logo like the other. Let's also decrease the space between the light/dark buttons and the address.

Light mode project cards need a border.

The project cards in light mode don't look right with no border. They should be updated to be more similar to the projects tab in the Figma file:

https://www.figma.com/file/LLwuijWZJC6bhmgE284VFB/%5BVit%5D---RetroPGF---Voting-(Copy)?type=design&node-id=630-64825&mode=design&t=r8H6KXEoE0ldH7nX-0

Here is what I am currently seeing:

But they should be more like:

Dark mode text when adding to ballot.

This sentence is too dark when in dark mode and adding a project to the ballot:

It should be the same font color as the Adding Project To Ballot text that comes right before it in that sequence.

Need consistent height and limits for Lists

We should have a consistent height when displaying lists of different description lengths. Let's also put a max character limit on the List name, description, and impact inputs.

Project views need the project image and icon.

This one is related a bit to Issue #123

Currently all project views use the same Orbiter Finance image and icon. Since we now have a good project image and icon to play with in the Ospace Project(The BuidlGuidl website image and icon), we should get that same image and icon from the project grid view implemented in the view when you click into a project.

My Ballot/View Ballot page needs a 'Submit Ballot' button to submit

Remove grid, list, and shuffle buttons from View Ballot page

The grid view, list view, vertical divider line, and shuffle buttons can be removed from the View Ballot page as they are not necessary.

List View Issues

In the Lists tab, the width of the cards in the grid view is now too narrow when on a wider screen.

Remove the vertical line to the right of the Liked button as it is a divider but there is nothing to it's right side.

If the user has no "liked" lists yet, lets display some text saying that. Something like "You have not liked any lists yet" as the current view looks off.

The All tab might also need "There are no lists yet" if there are no Lists yet created, but I can't test that.

Add Add To Ballot / X OP Allocated button to project card

For those who don't need to click into a project to learn about it, it would be helpful to have the Add To Ballot / X OP Allocated button right on the project card and list view of the the project.

Edit distribution on project page

Currently if you click the edit distribution button it opens a modal that does not inherit the project details and is also not editable.

Let's fix that.

Overall background should be white

The background to all pages should be white like in the OP Figma seen here:

There may be some extra items with this (Like adding borders to projects on the project grid view page) if necessary.

Pages that I have noticed that need updated are 👍

• Projects tab
• Lists tab
• View when you click into a project
• View when you click into a list
• View Ballot/My Ballot page

Add To Ballot Button on Project Page

Currently when you click this button it adds the project with 0 OP allocated. The correct workflow will open this modal (which exists already but isn't functional)

Countdown timer

Currently this is just fixed text. Add countdown functionality. This will be a fixed date that we can set either in the database or hardcoded but perhaps as a first pass we could arbitrarily set a date a month in the future so we can demonstrate the countdown working.

Project card images and icon updates

The image on the BuidlGuidl card is too big and makes the card huge, let's just use the top part of the image so it ends up being the size of the other blank cards. So it would just show this part:

All icons should be forced to have the same width and height. That way when someone is entering a project, they can upload any square image and it will scale it down to fit and be the same size as the rest. So this icon here should have the same height and width, along with all other icons:

For now, since time is a factor, let's reuse the buidlguidl image and icon for every project.

Once more note is that the list view of the projects should get the icons as well. Currently they are all set to the walletConnect logo.

Spacing is different on YOUR BALLOT and the main content panes between the Projects and Lists tabs

These should be consistent for both tabs.

Site icon

Currently there is no icon for the site. Lets ask Jonas what should be used here and implement. Maybe a tiny OP symbol?