Display deployed ZK tokens with balances

[learner-long-life]

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.

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

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 <etheremAddress beginning with 0x> <aztecPublicKey beginning with 0x>

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 thepackages/zk-transfer-web directory, but using
these line in aztec-web, 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, 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.

[gitcoinbot]

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

---

This issue now has a funding of 25.0 DAI (25.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
• $75,385.74 more funded OSS Work available on the Gitcoin Issue Explorer

[learner-long-life]

Hi @acolytec3 thanks for applying. I liked your work on the Eth 2.0 client architecture and some gitcoin devops scripts. Can you post some examples of your past react / web3 work?

[acolytec3]

@cryptogoth see Arwen. I built it for a hackathon last year. You can see the demo app here. Most of the other web3 work I've done has been in Python and Dart (most recently).

Also, a little older but I built a very basic react-based block explorer for a personal blockchain project.

[learner-long-life]

Very cool @acolytec3 you're approved to start. Let me know if you have any questions or feedback here, or for sidechatter / talk about past / future bounties, you can join our gitter channel

[learner-long-life]

@ashline thanks for your interest. I've given the go-ahead to @acolytec3 for this task, but you are welcome to give it a go just for learning. Walk through the steps of the task until the very end, and feel free to join us in our gitter channel

I'll post more bounties in the future, and your questions will give me a better sense of what a contribution would be a good fit.

[gitcoinbot]

@acolytec3 Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• reminder (3 days)
• escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[acolytec3]

@gitcoinbot Yes, been looking at it. Will put more focus on it this weekend.

[gitcoinbot]

Issue Status: 1. Open 2. Cancelled

---

Workers have applied to start work.

These users each claimed they can complete the work by 2 weeks, 2 days ago.
Please review their action plans below:

1) owonwo has applied to start work (Funders only: approve worker | reject worker).

I've gone through it. I'll following the steps as stated and shall fix this issue. :smiles:
2) linggar155 has applied to start work (Funders only: approve worker | reject worker).

Confirm admin ,
Iwant to work

Learn more on the Gitcoin Issue Details page.

[owonwo]

@cryptogoth Should i add https://immerjs.github.io/immer/ to the project. I need to update state immutably.

[owonwo]

@cryptogoth I followed the instructions as given. Every ZK Token address returns zero notes. What do i do about it?

[owonwo]

Now am getting this error.

[learner-long-life]

@cryptogoth Should i add https://immerjs.github.io/immer/ to the project. I need to update state immutably.

Good point. You'll need to add the module immutable, which has source code here:

https://github.com/immutable-js/immutable-js

Since we use yarn in our project, you would run

yarn add immutable --save

[learner-long-life]

Merged as #49