poap-xyz/poap-vote-v2

🗳️A sybil-resistant voting engine for anyone to run polls using Ethereum and POAP

POAP Vote

A sybil-resistant voting engine for anyone to run polls using Ethereum and POAP.

Visit www.poap.vote to view, create, and vote in Polls.

Development

POAP is a clean client/server web app with a dash of web3.

Frontend

The frontend is built with VUE and the Quasar framework. It leverages web3 for message signing, authenticating polls & votes to Ethereum accounts. Checkout the frontend README to get setup.

Backend

The backend is built with node.js and Express and backed by a Postgres database for storing poll and vote data.. Checkout the backend README to get setup.

Contributions

Contributions are welcome! Simply fork the project, create a new branch from master, and open a PR. Before opening a PR, rebase your branch to master to ensure a fast forward merge is possible.

poap-vote-v2's Issues

Should description field be required when creating a poll?

Right now the server requires a description field, but the frontend does not. My thinking for not requiring the description field was because it's possible to have a self-explanatory poll title that does not need to be expanded upon.

ethers.js or web3.js?

We should be consistent and make sure we're using the same library on the frontend and backend.

I typically use ethers and I'm using that on the frontend right now, but can easily switch to web3 if you're more comfortable with that.

Fix end_date of poll creation

The timestamp passed from the frontend to the backend is a unix timestamp, i.e. in seconds. But JavaScript dates use milliseconds. When creating a poll, the end date sent by the frontend needs to be multiplied by 1000 to convert to milliseconds. Since it currently is not converted, all end dates are currently at some time on 1970-01-10

Option To Display Votes By Unique Account

By default the Results page should show votes by token weight. Below poll options list there should be a small link or button element that says "Show Results By Accounts".

• Clicking the link should toggle the results summary to display results by the number of unique accounts that voted
• Instead of "$N Votes" the text should say "$N Unique Accounts"
• Below the poll results, a small red disclaimer should read "WARNING: Account weighted results are vulnerable to sybil attack, as individuals holding multiple POAP tokens can send them to other accounts."
• Below the disclaimer, the link/button element which was used to toggle should now read "Show Results By Token". Clicking the element should return the results page to its normal UI

Question: Do we want to use a URL parameter for this option, such that a user linking or bookmarking the page in the "By Accounts" state will be able to preserve it

Poll Form + Signing Proof Of Concept

An initial iteration of the Create Poll screen, with associated field inputs, plus the ability to:

• Hash the collective data that represents the poll
• Sign an EIP-712 message with this hash via web3 enabled browser

Create Poll

• Requires web3 connection to pull address
• After connection, show form with the following fields
  • Poll Title
  • Poll Description
  • Poll Options
  • Valid POAP Event Tokens - Some kind of searchable/auto-completing drop down style control, after adding one, click “+” to add N more with “x” to remove as well
  • Start Date
    *End Date
• Sign Button brings up MetaMask to sign attestation
• Submit button becomes clickable only after signature
• Posts to endpoint and then displays errors or redirects to new poll page

Poll Details Screen

Displays poll from fancy_id url parameter by fetching data from /api/polls/:fancy_id

• Shows all Poll fields, i.e. title, description, etc...
• Displays clickable icon images for qualifying events, which link to POAP app page
• Show all options & current vote totals (fetching vote via /api/votes/:fancy_id and counting the number of tokens)
• Button to optionally "Connect Web3 To Vote"
• After connected, use user's address + POAP api to display qualifying tokens they hold, i.e. vote weight
• Allow user to select an option & click "Sign" to bring up MetaMask and sign
• After signing, "Submit" button allows user to post data to endpoint, displays errors or "Vote Submitted Successfully"

POST the following data to /api/votes/:fancy_id

       {
            voter_account: "0xDeaDbeefdEAdbeefdEadbEEFdeadbeEFdEaDbeeF",
            token_ids: [10, 2, 27],
            poll_option_id: 1,
        }

Validate And Store Vote Signature

• Validate the vote attestation is correct
• Store the attestation
• Return the attestation from votes endpoint

Setup Backend Project Structure

Split Poll Detail Page Into Cast & Results Page

The goal of this change is to decrease the information density and complexity of the poll detail page for the users.

The existing Poll Details page shows results from the vote and also gives the user the ability to vote. We want to split this into two separate pages. The Cast page should have a URL like poap.vote/:poll_id/cast and the Results page should have a URL like poap.vote/:poll_id/results where poll_id is the numerical unique identifier for this particular poll.

Cast Page

• The cast page should always display the Title, End Date, Description, & Poll Creator address
• If the poll is past its end date, the page should show a message stating, "This poll has closed and votes can no longer be cast." There should be a button that says "View Final Result" which redirects the user to corresponding Results page
• If the user has not connected their wallet, the cast page should display a message that says, "Voting requires a connected web3 wallet" and a button that says "Connect Wallet to Vote"
• If the user has connected web3, the page should show the valid tokens UI, listing the valid tokens and highlighting the ones owned by the user
• If the user does not own any of the polls valid tokens, the page should display a message that says "You do not hold any tokens qualified to vote in this poll" and display a button that says "View Current Results" which redirects them to the Results page
• If the user does own qualifying tokens, the page should display a message that says "Your weighted vote is $N tokens"
  • The UI should display the poll options as radio buttons & display a button that says "Submit Vote"
  • Upon voting, the user should be directed to the polls Results page

Results Page

• The results page should always display the Title, End Date, Description, and Poll Creator address
• The results page should always display the Poll Options and their current vote totals
• The results page should show a message that says "Token holders from $N different events are qualified to vote in this poll. Learn More." where "Learn More" is styled as a link.
• Clicking the Learn More "link" should immediately expand the "Valid Events" portion of the UI, which lists the valid events in small cards, as currently implemented. None of the cards should be greyed out.
• If the poll is completed, it should show a message stating "The voting period for this poll has ended and results are final."
• If the poll is ongoing, it should show a button saying "Vote In This Poll" which takes the user to the corresponding Cast page

Setup Frontend Project Structure

Setup Proper Staging Deployment Using Patricio's Azure Account

• VPS (w/ static IP?)
• Separate database service
• DNS config for staging (coordinate w/ Patricio)
• nginx config for frontend/backend
• script to automate deployment steps
• Get SSL certificate for frontend
• Figure out Database SSL
• Autostart processes when the VPS restarts
• Build DB migration into deployment script
• Maintenance page

Handle closing web3modal dialog

@apbendi Just adding this in as well since it only will take a few minutes.

Reference: WalletConnect/web3modal#150

Prior to that fix the page would just hang if a user closed the web3modal dialog without connecting a wallet

Investigate Feasibility: Social Sharing Previews

Social Sharing Previews for links to poll results pages should show

• Poll Title
• Winning Or Leading Option
• Winning Or Leading Option Vote Percentage By Token Weight

Example:

Might show something like:

POAP VOTE

Devcon IV Location
Buenos Aires (83%)

Note: The feasibility needs investigation here. Social previews are generated from header metadata. How easily can we populate this dynamically? It may be prohibitively difficult without a costly architecture change. We will investigate this

Add Static Content For Social Sharing

We are not doing dynamic content in social media previews, per #39, but we will want to display some nice static content. We want the POAP logo, plus the title "POAP Vote" and the preview sentence "A sybil-resistant voting engine for anyone to run polls using Ethereum and POAP.".

Remove Blocknative & Connect To Web3 Via window.ethereum

Change how polls are loaded

Current

• All polls are loaded when app loads
• Votes are loaded when visiting a poll's detail page

New

• All polls are loaded when user visits home page
• Poll details and votes are loaded when visiting a poll's detail page

The new approach helps speed things up for users who are just going directly to a poll page

Production Checklist

• Use Helmet
• Enable Compression
• Rate Limiting Via Express Slowdown

Non-Signature Servside Validations & Derivations

Implement data validations & derivations server side as appropriate for endpoint submissions, excluding attestation signatures.

Validations

• Validation of all required fields on create
• Validating correctly formed Ethereum accounts
• Validating end date is in the future
• Validating at least two poll options are provided
• Validating existence of event ids
• Validating ownership of voting token ids
• Validate all token qualifying tokens are voting
• Validating the qualification of voting tokens to vote in this poll
• Validate no tokens have already voted in this poll
• Validate this account has not already voted in this poll
• Validating the poll option belongs to the poll being voted on
• Validating Database read/writes & returning error on failure
• Validating no poll with the identical attestation currently exists (to mitigate replay)

Derivations

• Deriving the start date + date cast from "now"
• Deriving the fancy id from the title + existing conflicts

Refresh Vote Totals After User Submits A Vote

Changing 'contents' field of a Poll Option Doesn't Change Signature

Go to the Create Poll page and enter a bunch of data. Sign it, and observe the signature in the console. Change the text of one poll option, but don't change anything else about the submission. Re-submit and re-sign the data, observing the signature in the console. It will be the same. Bizarre!

Highlight eligible polls on polls screen if user is logged in

Improvement upon #13

Implementation wise, another idea would be to sort both sections such that eligible polls show up first, with some visual element, like a tag that says eligible or something displayed on the card.

Improve frontend test coverage of Q-Select components and signing

This is a continuation of issues not closed by #19, which are:

1. There are some problems testing q-select dropdown components with Cypress. As a result I have not yet figured out how to fully test the filling out/verifying of the form. Details here
2. The "connect wallet" functionality is faked by setting the providers, signers, and userAddress to 0x. This just tricks the UI into thinking there is a wallet connected to show the form. Mocking a web3 provider was a bit tricky and not completed in the above PR

Add more realistic poll data to migrations

Could you write a migration script (I believe a migrations script is the correct place) that seeds the database with a handful of more realistic looking polls, titles, and dates. Some without descriptions, some with end dates that have passed, some that have a lot of valid event IDs, etc.

When I currently send a request to the API, it returns data from the poapvote database—just want to confirm this is the correct one (as opposed to poapvote_test)

This will help with developing the front end and seeing how things look.

Remove Fancy IDs

URLs should use numerical indices rather than fancy ids derived from titles.

Clean poll UI/UX + Implement tests

I think it makes sense to do these two things as one PR since it prevents us from having to re-write the tests once the UI changes

Issues to fix in polling form:

• Validate all fields
• Only let form be submitted once all fields are valid
• Improve time selection. Use HH:MM AM/PM dropdowns with minute dropdown in 5 minute increments?
• Improve event selection. Break this out into a pop-up box that lets you search.
• Add ability to delete options

Afterwards, implement tests to make sure the form works properly. Need to figure out the best way to test signing with MetaMask.

Inconsistent theming

Noticed that the theming does not match other POAP webpages. Poap.fun seems to be more consistent with the other pages' theming.

UI Delay Realizing Poll Is Past End Date

Viewing the home page, if a completed poll is showing, it will first display with the word "remaining" below the end date. After about 1 second the end date disappears.

Similarly, on the poll detail page of a completed poll, it also shows bot the word "remaining" below the date, along with the "Connect Wallet To Vote" button under the "Valid Events" section. After about 1 second, both of these disappear as well.

Use Web3Modal For Wallet Connection

Use the following library for wallet connection:

https://github.com/Web3Modal/web3modal

Enable only standard injected web3 & walletconnect options

Minor Create Poll Screen UX Mechanics

Here are few minor UX mechanics we ought to add to the Create Poll screen:

• Limit the number of Poll Options to 20. Don't show or grey out the "Add Option" button after 20 is reached. (I chose 20 as an arbitrary limit, but it seems reasonable to me).
• Limit the title to 256 characters. Show a small indicator underneath the input with "23 / 256" or something similar
• Limit the description to 4,000 character, show indicator below input.
• Limit the end date selection in the calendar to at least one day in the future

Backend Poll Post Endpoint To Process Signed Message

Consume the data created in #4 via a POST call to /polls, then validate the signature and account and return status response.

Initial Polls List On Main Screen

We want the main screen to list polls fetched from GET /api/polls in an aesthetic way. Clicking the cards would take you to the yet-unimplemented Poll Details screen.

My initial thoughts:

• Two sections, first "Active Polls", second "Completed Polls"
• Some kind of scrollable card like interface that displays at a minimum:
  • Title
  • Polltaker account (truncated addr with blockie?)
  • Time left (for active) or date ended (for completed)
  • Abbreviated description (capped at some number of characters)

Feel free to take some license with this. Leverage whatever components we have from quasar or other off the shelf libraries to reduce dev time. Goal is to get something simple that works so we can get feedback and iterate.

README Updates

• Add a backend setup readme
• Add a main repo readme
• Add license

Set Up Frontend Production Build Task

Delete branches after merge?

Repository management question—we have quite a few merged branches still hanging around here, do you want to delete them? With the rebase approach, you kind of lose evidence of a branch + merge in the commit history, so I can understand keeping them around for that reason. But the evidence lives in the PR history anyway, so I can also understand deleting them.

Create Data Models & Migrations

Support Tally Ho wallet

Community owned and operated wallet: https://www.tally.cash

Discussed in Discord

Once WalletConnect/web3modal#389 is merged and released, need to update the web3modal version required in package.json

Display Indication Of Server Error On All Pages

If the server returns a response outside of the 200 range, display an error message of some kind. Perhaps a red status bar or something similar? Check the response body for an error field. If that is present, display it. Otherwise, display a generic message like "Something went wrong, please try again."

Note, this applies for GET and POST requests and will be a repeated pattern for all endpoints/pages. One easy way to trigger an error when creating a Poll right now would be to submit with a title greater than 256 chars.