No funded issue found.
Check out the Issue Explorer
Be the OSS Funding you wish to see in the world.
Looking to fund some work? You can submit a new Funded Issue here .
Time left
Opened
Issue Type
Workers Auto Approve
Project Type
Time Commitment
Experience Level
Permissions
Accepted
Reserved For
Implement zero-knowledge mockup as a static React page
invisible-college
JavaScript, HTML, react, typescript, css, front-end, web3, netlify, static
## 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.
Setup your profile
Tell us a little about you:
Skills
No results found for [[search]] .
Type to search skills..
Bio Required
[[totalcharacter]] / 240
Are you currently looking for work?
[[ option.string ]]
Next
Setup your profile
Our tools are based on the principles of earn (💰), learn (📖), and meet (💬).
Select the ones you are interested in. You can change it later in your settings.
I'm also an organization manager looking for a great community.
Back
Next
Save
Enable your organization profile
Gitcoin products can help grow community around your brand. Create your tribe, events, and incentivize your community with bounties. Announce new and upcoming events using townsquare. Find top-quality hackers and fund them to work with you on a grant.
These are the organizations you own. If you don't see your organization here please be sure that information is public on your GitHub profile. Gitcoin will sync this information for you.
Select the products you are interested in:
Out of the box you will receive Tribes Lite for your organization. Please provide us with a contact email:
Email
Back
Save
