Confidential transfer to a fixed recipient

[learner-long-life]

This task is a cooperative bounty reserved for @owonwo and one other developer who would like to pair and learn about ZK asset programming and Democracy.

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.

Currently after a user gets ZK notes, they would like to transfer some or all of them to another user (a recipient) when the list of online users in a confidential way: no one looking at the public blockchain will be able to tell the amount of the transfer. That's the main purpose of this project, confidential transfer. As an easier first step, we will allow a user to transfer any of their existing ZK token balances to a single, fixed recipient: the Rinkeby token owner at address with credentials:

address: 0x6f38461e067426e5858aBD2610C22bCb35128Bf5
aztecPublicKey: 0x0469c4458218ee0c4c08a8a047d3d480d0ffe5be1fc2308273b74d65c1776e2257e7b6cfd3028163293532740040f096cc989a4e34d5ae958edb6e1b93abf46e37
password: 652c22d2630960a3825d9bc92354c82ea76f895d62f2ca160223db48c5e69f26

This transfer should occur whenever the user clicks on the right-arrow next to any ZK token balance, as shown in this screenshot.

The amount of the transfer is whatever is typed into the blank, as highlighted in this screenshot.

This task also includes a few cosmetic and UX changes to the way the ZK token balances currently work.

Minting and Viewing

As background for this task, you should remind yourself how to mint new ZK notes to yourself, using the Rinkeby admin account at https://aztec-web.netlify.com and following the web minting instructions in issue #45 .

Also, to test that the confidential transfer occurs when your work for this task is complete, you'll want to refresh https://aztec-web.netlify.com and switch to the admin account in the Address Book to see if the new ZK notes are viewable at the bottom of the screen.

Task Description and Examples

A static demo, created with react-scripts, is currently running on: https://zk-transfer.netlify.com

In this task, you'll modify the source code in https://github.com/invisible-college/democracy/tree/master/packages/zk-transfer-web

Your task has two parts, described in more detail below:

1. implement UI when the cursor hovers over a ZK token row
2. implement UI when the user types a value into the blank.
3. implement confidential transfer when the user clicks on the right-arrow (transfer) button

UI Behavior When Hovering over ZK Token Row

If a ZK token row has zero balance, the text input should not appear (regardless of whether it is being hovered over or not.

If a ZK token row has a greater-than-zero balance, only when a user hovers over that row should a text input appear. The total balance should continue to be displayed (and not hidden, as it is currently). As it behaves now, it is automatically populated with the maximum amount (the total balance) of the token, which is correct, so this behavior should be kept.

UI Behavior When Typing a Value

On each keystroke, the value in the text input should be validated. If it's less than or equal to zero, or greater than the available token balance, the right arrow transfer button should be grayed out / disabled / unclickable. Otherwise, the right arrow button should be clickable and enabled.

Confidential Transfer

Here's an example of code that transfers a configurable value of ZK note when a button is pushed in React that you may find helpful.

https://github.com/invisible-college/democracy/blob/master/packages/aztec-web/src/token.jsx#L161

You can test it out in-person by going to https://aztec-web.netlify.com , minting yourself some notes, and then transferring some of them to a recipient. You may need to add a recipient to the Address Book, again following the minting instructions in issue #45 .

When the user clicks on the right arrow transfer button, you should initiate a confidential transfer by calling cx function, just as in the example above, with parameters taken from the transfer value text input, and a single fixed recipient

How to Work on This Task

Working on this task requires the following steps

• Introduce yourself in our gitter channel! 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 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 ⛰

[learner-long-life]

This issue is reserved for you @owonwo Please accept your invite for write access to the repo, and welcome to the team! 🎊 😀

[gitcoinbot]

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

---

This issue now has a funding of 10.0 DAI (10.0 USD @ $1.0/DAI) 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
  • $83,305.18 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 1 year, 10 months ago. Please review their action plans below:

1) owonwo has been approved to start work.

I think i can give it a try. Doesn't look that difficult.

Learn more on the Gitcoin Issue Details page.

[learner-long-life]

@owonwo you have a lot of the knowledge necessary to finish this task and would be a senior developer in the pair. We'll wait for someone more junior to join this task and you can mentor / develop together. You'll both each be paid the bounty.

While you're waiting, you might be interested to take a look at this task: https://github.com/invisible-college/democracy/issues/58 where I'm reserving the role of junior developer for you, and we'll ask for a more senior developer to join and mentor you in web3 js ways.

[learner-long-life]

welcome @elliotjobmann , glad to have you on board. @owonwo has started this task, but you can catch up to him by doing the "Minting and Viewing" background above. He's currently blocked on a bug I'm working on, which you can learn more about on Gitter.

[learner-long-life]

@owonwo i'm getting a null context for Democracy in this line of MakeTransaction

  const demo: any = useContext(Democracy);

Do you have this problem as well? Do you know of a way to keep the top-level App component from rendering MakeTransaction before clientInit() is complete and a Democracy context object is populated?