skunkworks icon indicating copy to clipboard operation
skunkworks copied to clipboard

quadraticfunding.wtf - an in browser QF/QV tool for demonstrating the power of QF/QV

Open owocki opened this issue 5 years ago • 43 comments

inputs: a bunch of recipients, with rows of inputs for the contributions they receive also a "total matching pool" input a calculation button that calculates the QF match for each grant

owocki avatar Jul 27 '20 13:07 owocki

Screen Shot 2020-07-27 at 7 13 50 AM Screen Shot 2020-07-27 at 7 13 55 AM Screen Shot 2020-07-27 at 7 13 53 AM

owocki avatar Jul 27 '20 13:07 owocki

https://twitter.com/owocki/status/1287738521529094145

owocki avatar Jul 27 '20 13:07 owocki

I can build this out tonight—did you have any preference of how it looks beyond just the boxes provided?

I was thinking two boxes: one on left, one on right (top/bottom on mobile). Users can add unlimited number of projects by hitting a button, and then add unlimited number of contribution amounts into each projects row.

I'll manage the state of the first box and just dynamically change the state of the second (QF fund distribution) after.

Anish-Agnihotri avatar Jul 27 '20 14:07 Anish-Agnihotri

@Anish-Agnihotri that'd be great :)

I can build this out tonight—did you have any preference of how it looks beyond just the boxes provided?

awesome!

no preference really; just keep it simple :)

I was thinking two boxes: one on left, one on right (top/bottom on mobile). Users can add unlimited number of projects by hitting a button, and then add unlimited number of contribution amounts into each projects row.

sounds good

I'll manage the state of the first box and just dynamically change the state of the second (QF fund distribution) after.

great!


im stoked on this! want me to purchase a domain so we can host it + show it off to people?:

owocki avatar Jul 27 '20 17:07 owocki

also lmk how much ETH u want for this!

we can put a "built by @Anish-Agnihotri with <3, funded / conceived by gitcoin" in the footer so we can get social cred for it

owocki avatar Jul 27 '20 17:07 owocki

Sure, domain would be sweet. Dw about the ETH, this will be a nice fun side-project.

I'll get started tonight after work and spin up a repo and then send you a link once I've got something up. Should have at least an MVP up by EOD, early tomorrow morning.

Anish-Agnihotri avatar Jul 27 '20 18:07 Anish-Agnihotri

Got started building this tonight. Here's the completed front-end framing. Let me know your initial thoughts.

Tomorrow I'll write up the React functions to get the Add/Remove grant buttons, and quadratic funding calculations working. After which, this will be good to go.

Anish-Agnihotri avatar Jul 28 '20 02:07 Anish-Agnihotri

nice! comments below:

  1. how do i add multiple funding amounts per grant? comma delimited?
  2. each grant doesnt need a match amount until after the 'calculate' button is clicked
  3. thers a few other little things; but otherwise its directionally correct

owocki avatar Jul 28 '20 03:07 owocki

Hey hey!

Sorry, had a busy week and was unable to push out changes a few days ago.

Just finished up some stuff here. Please check it out now here.

To answer your comments:

  1. How do I add multiple funding amounts per grant? Just type in the amount and hit enter—it'll create a new object.
  2. Each grant doesn't need a match amount till after calculate: I made it work real-time, so if you type in the numbers you'll see the match amounts update with every new value added/removed. I thought it would be more interactive this way, lmk your thoughts.

There are only a few more things left so lmk any feedback you have and I can add that to the list. The remaining things I have to work on are:

  1. The grant funding amount input field is a little squeezed on mobile devices. I need to clean up the CSS for this.
  2. The grant funding amount input field does not let you type in duplicate amounts. For example, you can type in 100, 200, 300, but you cannot type in 100, 100, 200, because the 100 is duplicated. Need to figure this out, since realistically, multiple individuals can submit same sized grant funding.

LMK! ✌️

Anish-Agnihotri avatar Aug 02 '20 01:08 Anish-Agnihotri

seems great so far. i just fired it off to two collaborators who may have some more feedback ;)

Two proposals

Copy

Quadratic Funding proposes a mechanism of quadratic voting to fund public goods. Gitcoin hosts crowdfund matching rounds built atop Quadratic Funding that help fund grants supporting Ethereum research, infrastructure, and resources in general as a public good.

  1. Pls remove this text and put
Quadartatic Funding is the mathematically optimal way to fund public goods in a democratic community.
[image of quadratic funding formula, from  my preso, linked below]
[Quadratic Funding Paper (PDF)](https://arxiv.org/pdf/1809.06421.pdf) | Made with <3 by @Anish-Agnihotri & @owocki  (link to our twitter's)

instead

  1. Pls remove the title "Quadratic Funding" and put the logo from my "WTF is QF" preso there instead! (see below)

Design

Can you copy the logo & color scheme & quadratic Funding formula from this google presentation and skin the dApp with the graphics from the preso? the preso is dope, and skinning the dapp with some of these gfx will make it dope.

https://docs.google.com/presentation/d/1fSLh0uBWiOTVIDwhzhcphNstQ01loESzme0N1HCWxZ4/edit#slide=id.g892493500a_0_775

Payment

Can I send you some ETH to open source the code? Awesome work so far!

owocki avatar Aug 02 '20 02:08 owocki

btw this is useful for exporting from google presos https://www.softwarehow.com/extract-images-google-slides/

owocki avatar Aug 02 '20 02:08 owocki

Sweet!

Just pushed the new version here.

Changes

  • [X] Changed copy to what you provided.
  • [X] Changed design, inspired by the logo/color schemes/formula found in the Google presentation.
  • [X] Fixed mobile responsiveness.
  • [X] Added meta tags to make site look dope in Twitter posts.
  • [X] Optimized the images from the presentation to make the side load quicker.
  • [X] Open-sourced the code here.

To-do

  • [ ] Fix unique requirement for grant funding amounts. This isn't a make-or-break bug because everything works, you just can't select two grant contributions of the identical denomination (i.e. 10 and 10, instead of 10, 10.1). This is a core problem with the react-select package I'm using for the field, so I'm going to have to dig in more to fix this at the package level. Regardless, I've made it explicit that values need to be unique in the front-end copy, so shouldn't be a breaking issue, just nicer to have it fixed.
  • [ ] Copy for dark section with heuristic charts. These looked cool so I added them in, but idk what copy you want here. Lmk if you have like a blurb for the three in mind and I can add that, OR I can remove this section out.
  • [ ] Domain. Lmk if you had a domain in mind, and either you/I can grab it. Once we do that, I'll have to add it to Vercel and redeploy so that all the links update.

Please feel free to lmk any and all feedback :)!

Anish-Agnihotri avatar Aug 02 '20 17:08 Anish-Agnihotri

looks great!

feedback

uniqure requiremnt; i know its a hair issue, but its pretty annoying to not be able to enter the same number twice. it makes the site feel buggy. any workarounds, such as "if new entered input is already in the list, just add 0.01 to it and try again" recursively, available for us?

domain - ill proibably host the site on qf.gitcoin.co - what DNS records should i put in thee to get that?

color scheme - can we marry the color scheme of the preso with the "remove grant" and "add grant" buttons?

header - can we change the header to make it clearer. hows this?

Quadratic Funding Paper (PDF) by @glenweyl & @vitalikbuterin 
This calculator made with <3 by @_anishagnihotri & @owocki

For the landscape section


Header: What if you could program support for public goods into your monetary system?
private goods incentive landscape + public goods incentive landscape = (stacked charts on top of each other)

Call to actions, below the landscapes:
Click here to read more about experiments with quadratic funding (link to https://vitalik.ca/general/2020/07/21/round6.html ) | Play with Gitcoin Grants (link to https://gitcoin.co/grants Q)

advanced feedback

feel free to rip off even more content form the preso and put it on the site if you have the cycles. i think the content about what public goods are + why they are important, and the explainer about how QF solves the free rider problem, would be good to put on there (but i think the feedback in the first section is more urgent)

i'd also like to see a giant counter that shows off how much $$$ has been distributed with QF so far is, and what projects have done that work. so

gitcoin grants - $2.3mm (link to gitcoin.co/grants) downtown stimulus logo - $38k (link to downtownstimulus.com) add your project (link to email [email protected])

owocki avatar Aug 02 '20 18:08 owocki

Perfect, ty for feedback. Just hopped in and fixed most of the issues.

  • [X] Unique requirement with grant input duplicating. I migrated away from react-select and found another package that would allow us to duplicate input. Good to go now.
  • [X] Color scheme. Yep, fixed the button colors.
  • [X] Updated the header copy to what you provided. Definitely cleaner now.
  • [X] Updated the landscape section to the new format you suggested.
  • [x] Domain sounds good to me. I'm going to need you to add a CNAME record with the name qf.gitcoin.co and the value cname.vercel-dns.com. Lmk once you've done that and I'll redeploy.

Advanced feedback

I can probably push out most of these changes today. I'm going to be busy in the weekdays, so can probably push out the cycles rn and get this good to go. I'll drop another comment when these are added in.

Site is now live with new changes!

Anish-Agnihotri avatar Aug 02 '20 19:08 Anish-Agnihotri

Just pushed out the new changes, which include a new giant counter + project contribution showcase for quadratic funding amount.

Next up: public goods intro + free rider problem content. Could you point me to which slide numbers discuss those specifically, so I can rip content from them?

Anish-Agnihotri avatar Aug 02 '20 21:08 Anish-Agnihotri

some more feedback 0. DNS -I set "Qf.gitcoin.co" to cname to your subdomain.

  1. DESIGN - can we change the background color of the "QUADRATIC FUNDING IMPACT" secdtion so it doesnt visually blend with the calculator?
  2. COPY - can we change "What if you could program support for public goods into your monetary system?" to "What if you could program support for public goods into your community?"
  3. COPY - can we change "Private goods incentive landscape + Public goods incentive landscape =" into "Our goal is to align incentives between private goods & public goods"
  4. COPY - Can we change the page title to "WTF is QF?" with a "WTF is" text right above the animated QF gif up top? Can we change the page title to "WTF is Quadratic Funding?" also?
  5. COPY - Can we add a title/explainer to the calculator section?
    H1 - "The secret behind QF" H2 - "It's the math ™️" P text - " A matching pool is raised, and then a crowdfund campaign is matched according to the QF algorithm:
  • num contributors matters more than amount funded.
  • this pushes power to the eges, away from whales & other central power brokers.
  • this creates more democracy in public goods funding decisions! 🦄

Want to see the math in action? Use the calculator below: 👇👇👇 " 6. Can we add credits to the designers below the credits for owocki/anish/glen/vitalik? "Design by http://gitcoin.co/guistf and http://gitcoin.co/octavian" Same style as the owocki/anish/glen /vitalik copy pls.

btw if you share the source code i can probably just make many of thse changes myself! :)

  1. slide 24 has the 2x2 box showing public goods vs private goods matrix on it. i'd like to add it under the header "Using Markets to create impact" H2 - "Public goods are good."
  2. the slider on slide 25 is pretty dope. this can be put under a header "Our secret to getting past the "free rider problem"" H2 - "Up to 100x matching multipliers on $1 crowdfund contributions" P - When a project gets popular enough, some pretty amazing matching multiples can be offered. This reinforces the incentive structure of QF as a fundamentally-democratic institution.

Pls tell me where to send you some ETH btw!

owocki avatar Aug 02 '20 22:08 owocki

@Anish-Agnihotri can you also add the following google analytics code pls

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-102304388-4"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-102304388-4');
</script>

owocki avatar Aug 02 '20 22:08 owocki

Yep, just made all the minor changes. Check it out and lmk more feedback! Still have to add the content from Slide 24/25 which I'll add in ~an hour; gonna go for a quick run.

Open sourced it this morning, but happy to make changes for another couple of hours, haha, to get this to the finish line.

Pls tell me where to send you some ETH btw!

anishagnihotri.eth, BUT:

Dw about the ETH, this will be a nice fun side-project.

save ur gas fees boss

Anish-Agnihotri avatar Aug 02 '20 23:08 Anish-Agnihotri

Looks good so far. I want to launch this tomorrow.

Will keep an eye out for the slide 24/25 stuff

On Sun, Aug 2, 2020 at 5:50 PM Anish Agnihotri [email protected] wrote:

Yep, just made all the minor changes. Check it out https://qf.gitcoin.co and lmk more feedback! Still have to add the content from Slide 24/25 which I'll add in ~an hour; gonna go for a quick run.

Open sourced https://github.com/anish-agnihotri/quadratic-funding it this morning, but happy to make changes for another couple of hours, haha, to get this to the finish line.

Pls tell me where to send you some ETH btw!

anishagnihotri.eth https://etherscan.io/address/anishagnihotri.eth, BUT:

Dw about the ETH, this will be a nice fun side-project.

save ur gas fees boss

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/gitcoinco/skunkworks/issues/174#issuecomment-667741191, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAD5PCNAZOG47YK6KGAPUP3R6X3UHANCNFSM4PIX6VXA .

--

@owocki http://www.twitter.com/owocki


gitcoin is live and has generated over $5mm for Open Source Software - see our results https://gitcoin.co/results

owocki avatar Aug 03 '20 00:08 owocki

👍 pushed out the new changes with the slides

should be g2g for a launch tomorrow. lmk anymore feedback and I'll iterate on that

Anish-Agnihotri avatar Aug 03 '20 02:08 Anish-Agnihotri

@Anish-Agnihotri would it be possible to update https://qf.gitcoin.co/ with share links

a la

https://qf.gitcoin.co/?grant1=1,1,1,1&grant2=100

and have the system 0. auto-update the URL as the form is changed

  1. prefill those values & run calcs upon pageload ?

i think this would enable lots of interesting things w. people sharing links to this site

owocki avatar Aug 03 '20 19:08 owocki

Yep, I can make this happen. Add a quick Share button and retrieve values from a URL on load, if present.

Albeit, I won't have the cycles for this till later this week. But, I can knock it out nearing Friday/weekend.

Anish-Agnihotri avatar Aug 04 '20 01:08 Anish-Agnihotri

personally i think it updating on keystroke is way cooler than having an explicit "share" button as long as that doesnt cause performance issues. but defer to your expertise + timeline!

owocki avatar Aug 04 '20 14:08 owocki

Yep, that does sound cooler and I don't think it will have much impact on performance either. I'll do it that way likely tonight or tomorrow.

Should I also add in clr.fund? Do you know by chance how much they have raised via QF, or should I reach out and ask?

And, thanks so much for the ETH 😍 ! I appreciate it!

Anish-Agnihotri avatar Aug 04 '20 15:08 Anish-Agnihotri

I dont know how much they've raised. Feel free to add them in with that part just blank.

On Tue, Aug 4, 2020 at 9:02 AM Anish Agnihotri [email protected] wrote:

Yep, that does sound cooler and I don't think it will have much impact on performance either. I'll do it that way likely tonight or tomorrow.

Should I also add in clr.fund? Do you know by chance how much they have raised via QF, or should I reach out and ask?

And, thanks so much for the ETH 😍 ! I appreciate it!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/gitcoinco/skunkworks/issues/174#issuecomment-668649453, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAD5PCIH65HNNNWSHY6NTN3R7APG5ANCNFSM4PIX6VXA .

--

@owocki http://www.twitter.com/owocki


gitcoin is live and has generated over $5mm for Open Source Software - see our results https://gitcoin.co/results

owocki avatar Aug 04 '20 16:08 owocki

another thing to add is links to all the reference implementations

  • python implementation https://github.com/gitcoinco/quadratic-funding
  • javascript impelmentation (link to this project's JS implementation
  • add your own implementation (mail [email protected])

owocki avatar Aug 04 '20 17:08 owocki

alsoi just registered http://wtfisqf.com/ - i pointed it at the cname for this. can u make sure that domain is allowed on ur end too?

owocki avatar Aug 04 '20 17:08 owocki

clrfund_no_text clrfund

clr.fund is yet to distribute any funding, but has $21k in matching funds lined up for its first few rounds later this year.

auryn-macmillan avatar Aug 05 '20 00:08 auryn-macmillan

Perfect, thanks @auryn-macmillan. I'll add the logo to the site, but will leave out any specific amount distributed until later this year.

Anish-Agnihotri avatar Aug 05 '20 00:08 Anish-Agnihotri

@owocki

Going to need you to remove the CNAME and instead add an A record with the name wtfisqf.com and the value 76.76.21.21. Since this isn't a subdomain like qf.gitcoin.co, the CNAME won't work.

Also hopping in and now and making the changes with URL parameters + and reference implementations. I think I'll make a NPM package to quickly calculate CLR this weekend.

Anish-Agnihotri avatar Aug 05 '20 00:08 Anish-Agnihotri