Display deployed ZK tokens with balances
invisible-college
JavaScript, TypeScript, HTML, React, Web3
## 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.
Your task is to implement the part of the static site that is currently hard-coded to display fake balances of ZK tokens.
## Task Description and Examples
A static demo, created with `react-scripts`, not connected to the blockchain, is currently running on:
https://zk-transfer.netlify.com
After this task, you will connect this demo to read from the Rinkeby testnet.
with source code in this directory:
https://github.com/invisible-college/democracy/tree/master/packages/zk-transfer-web
Your task has two parts:
1. mint new ZK notes for one of three private tokens.
2. retrieve a list of deployed private tokens and display one row per token, with balance.
The page only has to display the correct balances when it is refreshed. In a later task, we'll add the ability to listen to changes from the blockchain and auto-update.
We also use `Immutable.js` everywhere instead of regular JSON maps and lists because of the benefits of immutability (fewer programming errors / unintended side effects, as well as the ability to see historical snapshots of data).
`immutable.List` and `immutable.Map` are available in the webpage, and on the web console, using `demo.immutable.List` and `demo.immutable.Map`.
You can read more at the [official Immutable.js documentation](https://immutable-js.github.io/immutable-js/docs/#/).
## How to Work on This Task
Working on this task requires the following steps
* Communicate about this task in this thread, and give an update about once every two days letting me know you're still interested in working on this task, and asking questions if you're stuck.
* 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
* Test that you're able to access the Rinkeby account we're providing.
* Mint new ZK notes, either from command-line or web.
* Retrieve a list of deployed private tokens, with symbols AAA, BBB, and ABC.
* Display them in React, one private token per row, with symbol and balance.
* Mint more tokens.
* See the balances updates in React.
* 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, and pay out the bounty.
These steps are described in more detail below:
### Get Balance From a Rinkeby Account
To mint new ZK notes, we've created an Ethereum account on the Rinkeby testnet for you to use, with these credentials.
```
address: 0x6f38461e067426e5858aBD2610C22bCb35128Bf5
password: 652c22d2630960a3825d9bc92354c82ea76f895d62f2ca160223db48c5e69f26
```
You'll use these below.
#### Minting Through a Website
Navigate to this page to view your balance and perform minting through a web interface: https://aztec-web.netlify.com
The source code for this page, which you may find helpful later because it shows how to work with AZTEC notes using Democracy.js, is located at https://github.com/invisible-college/democracy/tree/master/packages/aztec-web
It will take a few seconds, as Democracy.js wallet loading is currently slow. You can open the web inspector to see its progress.
In the `Login Book`, enter the credentials above and click `Retrieve`.
After a second or two, you should see this new address added, with a balance of about 2.8 ETH (rinkeby ether). If this goes to zero, you can refill it by following the instructions at the [Rinkeby faucet](https://www.rinkeby.io/#faucet)
In the `Address Book`, click the address / public key pair there, which is the auto-created Democracy.js address for you in localStorage.
In the bottom part, you'll find three tokens, with symbols `AAA`, `BBB`, and `ABC`.
In each one, you can type a number into the blank, hit `Mint`, and watch the web inspector to see it get mined.
After waiting for about 15 seconds without seeing an error, you'll know the note was created. (I know, we need better user feedback).
You can refresh the page now, and see the new notes at the bottom, under the appropriate token, drawn as colored rectangles.
#### Minting Through Command-Line
To mint through the command-line, and even create new tokens, clone the source code and set up your development environment using these instructions:
https://github.com/invisible-college/democracy#get-the-source-code-to-experiment-and-run-tests
Then run the following commands
```
cd packages/aztec-cli
NODE_ENV=RINKEBY ../../node_modules/demo-aztec-cli/scripts/mint.js ABC 10
```
You can copy the ethereum address and AZTEC public key for your Democracy.js account from the web UI above, in the `Address Book` section.
### Retrieve a List of Tokens in React
You'll perform this task in the`packages/zk-transfer-web` directory, but using
[these line in `aztec-web`](https://github.com/invisible-college/democracy/blob/master/packages/aztec-web/src/index.jsx#L37), which you can interact with using the web console at https://aztec-web.netlify.com
After Democracy.js has initialized in `zk-transfer-web`, you can explore the `demo` and `api` global symbols.
To verify that you are using Rinkeby, you can type
```
> demo.config
```
To retrieve the list of ZK tokens, access
```
> api.zkTokens
```
The result is an `Immutable.js` Map, which you can iterate using
```
api.zkTokens.forEach((v,k) => console.log(`key ${key} value ${value}`))
```
or convert to a JSON object, for easy printing on the web console
```
api.zkTokens.toJS()
```
You usually do not have to do the `.toJS` part while you are programming in React.
Its keys are *deploy names*, which all begin with `ZkAssetTradeable` (the Ethereum contract name) and end in `deployXYZ` where `XYZ` is the trading symbol of the token. To access the token information for `AAA`, you evalute
```
api.zkTokens.get('ZkAssetTradeable-deployAAA')
```
The values are also an Immutable Map, the most important one is called `deployAddress` which tells you the Ethereum address where that token is deployed. To access the `deployAddress` of token `AAA`, you evaluate:
```
> api.zkTokens.get('ZkAssetTradeable-deployAAA').get('deployAddress')
"0xFF73cDb42B2E1B53e9186F786C49B0C2a76B27a3"
```
### Retrieving ZK Notes with Democracy
The last piece of information you'll need to print out the balances of each ZK token is the list of notes.
You can use [these lines from `aztec-web`](https://github.com/invisible-college/democracy/blob/master/packages/aztec-web/src/index.jsx#L39-L47), which produce an Immutable Map at https://aztec-web.netlify.com which you can interact with using the web console.
```
api.thisAddressNotes
```
with keys being the token address, and the values being an Immutable List of notes.
For example, once you've found all the token addresses above, you can retrieve the list of notes for that token as
```
api.thisAddressNotes.get("0x28649134a58C3e18932612f0E380E9E23176392b")
```
To iterate over all the notes
```
api.thisAddressNotes.get("0x28649134a58C3e18932612f0E380E9E23176392b").map((v) => v.get('zkNoteHash')).toJS()
```
### 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 with you on this project.
