Implement zero-knowledge mockup as a static React page

[learner-long-life]

Background

Zero-knowledge assets are a way to transfer ownership of a private asset (the amount and participant addresses can be secret) on a public blockchain. In this case, Ethereum is the blockchain, and AZTEC is the zero-knowledge technology built on top of it. There are two kinds of assets on Ethereum: public tokens, called ERC20, and a newer, private kind, called ERC1724.

This project will be launched later in December 2019 as a web demo to let people interact first-hand with zero-knowledge assets in their browser. This will allow people to gain some intuition and experience with zero-knowledge assets.

This task is to implement a mockup from a previous issue #36 as a static page hosted on Netlify using React and react-scripts, using placeholder elements. User interactivity will be present to advance between the steps of the workflow, but blockchain interaction will be added in a separate, later issue.

The mockup and interactions

Click through the following mockups to familiarize yourself with the process.

This interactive mockup (Mockup #1) contains the main look and interaction https://www.figma.com/file/eiVedZmhOLoHh4WAQgleTQ/Confidential-Transfer-Demo-Copy

Clicking the play button in upper-left corner will take you through the clickable interactive mockup.

and this one (Mockup #2) contains a third status column which includes a tx history. https://www.figma.com/file/KEV19jwlvgd3m9lexQx9KL/Confidential-Transfer-Demo?node-id=0%3A1

The following interactions should be handled in your implementation (slight differences from the mockups), starting with mockup 1

• Clicking on the name "satoshi buterin" should turn it into an editable blank, which is saved into localStorage and persisted across refreshes, when you press "Enter"
• Step 1 is initially enabled and Step 2 is grayed out.
• In Step 1, each token has a non-editable amount next to it which is the user's current balance in that token. When the mouse pointer hovers over a token row, a second, editable text input appears and lets the user enter in an amount to send, which is range limited between 1 and the balance, in integer amounts. A right-arrow icon also appears just for that row.
• Pressing enter or clicking the right arrow advances to Step 2 (disables / grays out Step 1)
• Hoving over the list of names in Step 2 causes a paper airplane icon to appear next to a name and enable it (black text). All other names are disabled / grayed out.
• Clicking on a name row or its icon advances to the last column (from Mockup 2), which shows a spinner icon or animation for 5 seconds, then randomly reports a successful or failed tx for now (it currently won't send anything to the blockchain), changing to a static icon of a green checkmark or a red X.
• That's it! When you've finished this part, we have a great start for our web demo and can add blockchain interaction in the next bounty.

Technologies to use

• HTML5 / CSS
• Typescript / React
• Netlify

within those constraints, any library you like can be used. Try to keep dependencies minimal and file sizes of the final build small.

How to work on this bounty:

Apply to work for this bounty on Gitcoin (for now) and send a short message mentioning bounties or other websites you've worked on that are React-based static sites hosted on Netlify or similar services.

Only a single submission and bounty payout will be issued, so timeliness and frequent communication are appreciated to get feedback and discuss ideas.

Fork this repo and use react-scripts to create a new Typescript package in the directory democracy/packages/zk-transfer-web.

When you're done with your implementation, deploy it to Netlify, with scripts that create a static build and then serve it (react-scripts build)

Submit a pull request on github of your fork, and include a link to your netlify deployed site.

Ask questions, make suggestions, have fun

Check-ins on this github thread are appreciated to ask for feedback, make suggestions, or just share progress and celebrate successes.

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

This issue now has a funding of 0.518 ETH (75.03 USD @ $144.84/ETH) attached to it as part of the invisible-college fund.

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
  • Want to chip in? Add your own contribution here.
  • Questions? Checkout Gitcoin Help or the Gitcoin Slack
  • $94,010.57 more funded OSS Work available on the Gitcoin Issue Explorer

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

Work has been started.

These users each claimed they can complete the work by 4 weeks from now. Please review their action plans below:

1) owonwo has been approved to start work.

Fork the repository. Understand the codebase. Implement the UI and Interactions as expected. Deploy to my netlify account.

Learn more on the Gitcoin Issue Details page.

[learner-long-life]

hi @owonwo can you provide links to your past work online, preferrably deployed as websites? Thanks.

[owonwo]

https://www.yourex.io/ https://peexo-witty-rabbit.now.sh/ https://cateyes-web.owonwo.now.sh/

[owonwo]

Thank you @cryptogoth. But I the link to the first mockup doesn't work, it says 404.

[learner-long-life]

Thanks @owonwo impressive work and very similar to what's needed for this task, you're cleared to start. Oops about the figma link, I'll ask the original designer @seichris to make the document public. Another thing: the bounty deadline got recorded incorrectly somehow, but I'd like to complete the work by next Thursday, not one month from now. Hope that works for you as well.

[owonwo]

I'll be more certain when I see the first mockup. Thanks @cryptogoth

[learner-long-life]

@owonwo can you try this link to the editable Figma, and request access? https://www.figma.com/file/46KvltxYaEXPazXweqQIEV/Confidential-Transfer-Demo?node-id=31%3A2

[owonwo]

Still shows 404.

[learner-long-life]

Hmm... strange. Can you send me your email address and I'll invite you to the Figma? You can delete it from this github thread afterwards. You'll need to create Figma account if you don't have one already in order to view the mockup.

[learner-long-life]

Okay I think I have a publicly viewable link now https://www.figma.com/file/eiVedZmhOLoHh4WAQgleTQ/Confidential-Transfer-Demo-Copy

Please try again. I'll add your email as well.

[learner-long-life]

You can click the "Play" button in the top right to view the interactive click-through demo.

[owonwo]

Ok.

[seichris]

@cryptogoth @owonwo The link to the original file should be accessible again https://www.figma.com/file/46KvltxYaEXPazXweqQIEV/Confidential-Transfer-Demo?node-id=31%3A2

[learner-long-life]

Thanks Chris, I was able to make a copy as well.

On Dec 13, 2019, 1:03 PM, at 1:03 PM, Chris Seifert notifications@github.com wrote:

@cryptogoth @owonwo The link to the original file should be accessible again https://www.figma.com/file/46KvltxYaEXPazXweqQIEV/Confidential-Transfer-Demo?node-id=31%3A2

-- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/invisible-college/democracy/issues/39#issuecomment-565544920

[owonwo]

@cryptogoth I didn't find the Inter font on google. So I downloaded it for local use, hope that's fine with you?

[learner-long-life]

hi @owonwo that's ok, we can substitute a similar, freely available font in the final implementation. Don't worry about it for now.

[owonwo]

Do these represent images or just a badge? If it's a badge is it allowed to only contain 3 chars? @cryptogoth

[learner-long-life]

It's meant to be text with a circular border, like with CSS border radius for maximum rounded corners of an HTML element. Thanks for asking. They are between 2 and 4 characters, but almost always 3 characters, and you can assume it's 3 for now

On Dec 17, 2019, 6:17 PM, at 6:17 PM, Joseph Owonvwon notifications@github.com wrote:

Do these represent images or just a badge? If it's a badge is it allowed to only contain 3 chars?

-- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/invisible-college/democracy/issues/39#issuecomment-566792613

[owonwo]

@cryptogoth Thoughts Please: https://vigilant-wiles-4b7d39.netlify.com/

[learner-long-life]

Wonderful @owonwo it is very true to the mockup, and the switch from Step 1 to Step 2 focuses attention in the right way. I like the "James Cameron" name, nice Avatar ref :)

How did you feel about the experience of coding this up? Was there anything you thought could be more effective for the user in this interaction, or anything from the mockup or bounty description that could be more clear for you?

Some requested changes: 1) when you hover over a particular token's row (you shouldn't have to click on it), and the total next to it changes to an arrow, all the other arrows for other tokens should disappear, and the total amount should be displayed again.

That is, only one arrow should be displayed at a time.

2) When you change to Step 2, can you make all of the Step 1 column grayed out and unclickable / unfocusable?

3) Finally, can you add a third column, to display transaction success / failure messages? They can also just be static text for now. As in the rightmost part of this mockup

[owonwo]

Wonderful @owonwo it is very true to the mockup, and the switch from Step 1 to Step 2 focuses attention in the right way. I like the "James Cameron" name, nice Avatar ref :)

How did you feel about the experience of coding this up? Was there anything you thought could be more effective for the user in this interaction, or anything from the mockup or bounty description that could be more clear for you?

Some requested changes:

1. when you _hover_ over a particular token's row (you shouldn't have to click on it), and the total next to it changes to an arrow, all the other arrows for other tokens should disappear, and the total amount should be displayed again.

That is, only one arrow should be displayed at a time.

1. When you change to Step 2, can you make all of the Step 1 column grayed out and unclickable / unfocusable?

2. Finally, can you add a third column, to display transaction success / failure messages? They can also just be static text for now. As in the rightmost part of this mockup

I don't understand the 3 index. @cryptogoth Where does it apply?

[learner-long-life]

@owonwo sorry i meant to include this second mockup, which was in the original bounty description, but further down https://www.figma.com/file/KEV19jwlvgd3m9lexQx9KL/Confidential-Transfer-Demo?node-id=0%3A1

It goes to the right of Step 2.

[owonwo]

Ok. I've updated the link @cryptogoth

[learner-long-life]

Thanks @owonwo the arrow / amount interaction works great, and I'll move the remaining changes I requested to the next bounty. I can tell you put a lot of work into this one. We can call this task done as soon as you create a pull request and add your source code to the repo.

[owonwo]

Which branch should i make a PR to? @cryptogoth

[learner-long-life]

@owonwo you can create your own branch. you might have to fork the repo first, commit your files to the fork/branch, then you can create a PR against that. Hope that makes sense.

[owonwo]

@owonwo you can create your own branch. you might have to fork the repo first, commit your files to the fork/branch, then you can create a PR against that. Hope that makes sense.

I tried. It didn't work @cryptogoth

[owonwo]

You could create an orphan branch so I can pull it there instead. 😅

[learner-long-life]

@owonwo sorry to hear about the troubles. Did you try forking first? This is an example of another PR created by another gitcoin contributor https://github.com/invisible-college/democracy/pull/34

[owonwo]

I have made the PR @cryptogoth . #40

[owonwo]

@cryptogoth I have seen the merge. So what happens next?

[learner-long-life]

Thanks @owonwo I took a look at your source code, and everything builds and runs cleanly locally. Nice use of tailwinds and the abstraction into React components, I especially liked the use of fade and a CSS style to enable/disable cards, and the hover interaction of the token amounts.

Some minor notes, in case you are interested in future bounties

• you can commit the changes to the master branch of your forked repo, and create the PR relative to master on this repo as well.
• no need to commit the build directory, as this can be generated.

Great work! I'll go ahead and complete the bounty on Gitcoin, and I'd like to tip you for such a quick turnaround.

[learner-long-life]

If you'd like to give any feedback, I'm curious to know what it was like to work on the bounty so I can improve future tasks. Specifically:

• how many hours did it take you total, if you counted?
• what would have made it easier or more enjoyable to work on?
• if you were to use the page yourself, what improvements to the design or usability would make it more clear to the user what's going on?

[owonwo]

how many hours did it take you total, if you counted? For the development period i spent:

• about 24hours for the design
• about 43hours converting to components.

what would have made it easier or more enjoyable to work on? The first was fine. The second lacked a prototype. So I guessed the flow. Otherwise, I would have planned the structure in a better way.

if you were to use the page yourself, what improvements to the design or usability would make it more clear to the user what's going on? Trying in some animations perhaps.

[gitcoinbot]

⚡️ A tip worth 0.65000 ETH (82.34 USD @ $126.68/ETH) has been granted to @owonwo for this issue from @cryptogoth. ⚡️

Nice work @owonwo! To redeem your tip, login to Gitcoin at https://gitcoin.co/explorer and select 'Claim Tip' from dropdown menu in the top right, or check your email for a link to the tip redemption page.

• $68225.62 in Funded OSS Work Available at: https://gitcoin.co/explorer
• Incentivize contributions to your repo: Send a Tip or Fund a PR
• No Email? Get help on the Gitcoin Slack

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

This Bounty has been completed.

Additional Tips for this Bounty:

• cryptogoth tipped 0.6500 ETH worth 82.34 USD to owonwo.

---

• Learn more on the Gitcoin Issue Details page
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $68,225.62 more funded OSS Work available on the Gitcoin Issue Explorer

[learner-long-life]

Thank you @owonwo it was a pleasure to see your work this time. I'll invite you to any related future bounties, and look forward to it again.