poap-xyz / poap-vote-v2 Goto Github PK
View Code? Open in Web Editor NEW🗳️A sybil-resistant voting engine for anyone to run polls using Ethereum and POAP
Home Page: https://poap.vote
🗳️A sybil-resistant voting engine for anyone to run polls using Ethereum and POAP
Home Page: https://poap.vote
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.
Implement data validations & derivations server side as appropriate for endpoint submissions, excluding attestation signatures.
Displays poll from fancy_id
url parameter by fetching data from /api/polls/:fancy_id
/api/votes/:fancy_id
and counting the number of tokens)POST
the following data to /api/votes/:fancy_id
{
voter_account: "0xDeaDbeefdEAdbeefdEadbEEFdeadbeEFdEaDbeeF",
token_ids: [10, 2, 27],
poll_option_id: 1,
}
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:
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.
This is a continuation of issues not closed by #19, which are:
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 PRRight 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.
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!
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.
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:
Afterwards, implement tests to make sure the form works properly. Need to figure out the best way to test signing with MetaMask.
@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
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.
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".
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
URLs should use numerical indices rather than fancy ids derived from titles.
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.
Consume the data created in #4 via a POST
call to /polls
, then validate the signature and account and return status response.
Social Sharing Previews for links to poll results pages should show
Example:
Might show something like:
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
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.
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
Current
New
The new approach helps speed things up for users who are just going directly to a poll page
Here are few minor UX mechanics we ought to add to the Create Poll screen:
Use the following library for wallet connection:
https://github.com/Web3Modal/web3modal
Enable only standard injected web3 & walletconnect options
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.
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
An initial iteration of the Create Poll screen, with associated field inputs, plus the ability to:
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.".
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.