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 UI status and animation for a simulated tx in React
invisible-college
TypeScript, HTML, CSS, react, web3
## Note
This bounty is reserved for @owonwo
## Background
This task is part of a larger project to create an interactive web demo / playground for users to learn about zero-knowledge (ZK) assets and gain intuition about them by directly transacting with the contracts on-chain.
There are three kinds of transactions (tx's) that a user of ZK Transfer will need to know about, and that we should implement with this task.
* confidential sending of tokens, when a user clicks the "send" button in the demo
* confidential receiving of tokens, when a user is the recipient of someone else click their "send" button
* minting, which happens automatically when a page refreshes.
Minting is already part of the demo, but we'll have to fake transactions for confidential sending and receiving, so that we can display them. For this task, you can use a fixed fake user, "Vitalik Buterin" as both the recipient and sender of our fake tx's.
## Description
This task is to implement the design created in #57
https://www.figma.com/file/buXCDgUSJicITCuiLn4a3G/zktransfers-Copy
the third column for transaction statuses. Each type of tx (mint, send, receive) could succeed or fail, so there are 6 possible displays. There is also a "transaction in progress" animation which should display while waiting for a tx to be mined, and to determine it's success / failure outcome.
The history of tx's only need to be kept while the page is loaded. If the page is refreshed, the third column can be erased and re-populated from scratch.
Two ZK tokens can be deployed for easier testing. Sending/receiving from one could always result in failure, and sending/receiving from the the other one could always result in success.
* Confidential sending: this occurs after the user presses the send button next to a token, and you can display the animation for a fixed amount of time (say 15 seconds) before converting it to a mined tx.
* Confidential receiving: this can happen randomly in the background
* Minting: this occurs after every page refresh.
## Task Description and Examples
A static demo, created with `react-scripts`, is currently running on:
https://zk-transfer.netlify.app
In this task, you'll modify the source code in
https://github.com/invisible-college/democracy/tree/master/packages/zk-transfer-web
## How to Work on This Task
Working on this task requires the following steps
* Introduce yourself in our [gitter channel](https://gitter.im/invisible-college/democracy)! You'll be working with me (@cryptogoth ) and @owonwo and give an update every day or two letting us know what you're thinking, what you're curious about, and asking questions if you're stuck.
* Install the [Mullvad VPN client](mullvad.net) for your OS and ask us in Gitter for the account number.
* Fork this repo, and set up your local environment with your fork using these instructions https://github.com/invisible-college/democracy#get-the-source-code-to-experiment-and-run-tests
* go through the minting example in issue #45 instructions, both web and CLI, and learn about ImmutableJS data structures which we use in this project
* test your changes locally, mint yourself some notes, transfer them to the Rinkeby admin user, and verify them at https://aztec-web.netlify.com
* Create a pull-request for this issue, and submit the URL in Gitcoin.
* I'll create a code review in your PR thread to give feedback and collaborate. When we're both happy with the result, I'll merge / close it.
### Deploying to Netlify
When you create your pull request of your fork back to the base repo, Netlify will include a preview deploy.
Looking forward to working and learning with you on this project ⛰
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
