Update ZK balances in real-time after auto-minting and receiving
invisible-college
TypeScript, Javscript, React, web3, ethjs
## Background
This is a *front-end development* 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. It requires knowledge of Solidity events and how to combine them with React, using some existing web3 JS reactive framework. We currently use `ethjs`, which is very low-level, and am open to re-tooling to `ethers` if there is a significantly better `ethers-react` dev experience.
You can view the current demo-in-progress at https://zk-transfer.netlify.com
Democracy.js is a project of the Invisible College, a distributed research lab that welcomes collaboration and is offering paid apprenticeships for our existing projects or stipends for you to develop your own projects. Currently, we're looking for people who enjoy any of the following:
* implementing and designing new Ethereum node software that distributes and incentives partial state or stateless storage between "mini" nodes
* adding other kinds of cryptocurrency wallets to Democracy, including Layer 2 projects like Lightning Network, especially for cross-chain atomic swap
* performing UX and design research for web3 usability, specifically for private trading
* using Whisper, Secure Scuttlebutt, or other distributed private messengers to coordinate online cryptographic actions
## Description
Currently, after a page is refreshed, it receives 10 units of AAA automatically minted.
However, one has to watch the web console for the message "Minting successful".
This task is to automatically update the ZK balances, using whatever web3 / Javascript / React / responsive web technology of your choice, whenever the numbers are updated on the blockchain.
You may wish to investigate the `web3.js` library, in particular its facility to respond to Solidity events. Solidity events are emitted by AZTEC contracts upon successful minting, and upon transferring.
### Minting and Viewing
As background for this task, you can practice minting 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. listen for the Solidity event "updateMintAmount", and update balances when it's received
2. listen for the Solidity event "logNotes", and update balances when it's received
## Programmatic Access
The [Democracy API is documented here](https://democracy.js.org/jsdocs/index.html), as part of an ever-evolving process.
To complete this task, you'll have access to the `demo` API symbol both at runtime, when you open up `https://zk-transfer.netlify.com` and get a webconsole:
```
> demo
{utils: {…}, LOGGER: a.Logger, initFS: ƒ, get: ƒ, set: ƒ, …}
initFS: ƒ (t)
utils: {DB_DIR: "db", OUTS_DIR: "compileOutputs", FLATS_DIR: "sourcesFlattened", SOURCES_DIR: "contracts", COMPILES_DIR: "compiles", …}
LOGGER: a.Logger {enabled: Array(2), prefix: "demo", getConfig: ƒ, out: ƒ, printMsgs: ƒ, …}
get: ƒ (t,e)
set: ƒ (t,e,r)
config: {DB_URL: "https://ganache.arcology.nyc:7001", ETH_URL: "https://rinkeby.infura.io/v3/590812d0023e4798aba2a764c477f504", SHH_URL: "ws://eth.arcology.nyc:8546", DB_NAMESPACE: "rinkeby", GAS_PRICE: 5, …}
eth: p {options: {…}, log: ƒ, web3_clientVersion: ƒ, web3_sha3: ƒ, net_version: ƒ, …}
fs: {initialize: ƒ, _toUnixTimestamp: ƒ, getRootFS: ƒ, rename: ƒ, renameSync: ƒ, …}
path: ƒ t()
process: {_events: {…}, _maxListeners: undefined, startTime: 1586302936723, _cwd: "/", platform: "browser", …}
processGlobal: {_events: {…}, _maxListeners: undefined, startTime: 1586302936723, _cwd: "/", platform: "browser", …}
buffer: {INSPECT_MAX_BYTES: 50, kMaxLength: 2147483647, Buffer: ƒ, SlowBuffer: ƒ}
bufferGlobal: ƒ t(t,e,r)
contract: {isCompile: ƒ, isContract: ƒ, getInputsToBuild: ƒ, isLink: ƒ, isDeploy: ƒ, …}
keys: {keythereum: {…}, PARAMS: {…}, randombytes: ƒ, Buffer: ƒ, create: ƒ, …}
tx: {getGasEstimate: ƒ, getABIObjectByName: ƒ, getMethodCallData: ƒ, createRawTx: ƒ, sendSignedTxFromArgs: ƒ, …}
transform: {Transform: ƒ, convertMapArgs: ƒ, createTransform: ƒ, createInitialTransform: ƒ, isSubset: ƒ, …}
immutable: Module {…}
chai: {version: "4.2.0", util: {…}, config: {…}, AssertionError: ƒ, use: ƒ, …}
secp256k1: {ec: l, curve: u, accountFromPrivateKey: ƒ, generateAccount: ƒ, randomPoint: ƒ, …}
toWei: ƒ (t,e)
assert: ƒ (e,n)
init: ƒ (e)
clientInit: ƒ ()
prepareCachedWallet: ƒ (e)
prepareErasePassword: ƒ (e)
prepareUpdateWhileCached: ƒ (e)
relockErasePassword: ƒ ()
fundWallet: ƒ (e)
chainId: "4"
thisAddress: "0x0dfFebf3DEF921fAda593b3D4eE7330C76D6Dc7F"
thisSignerEth: p {options: {…}, log: ƒ, web3_clientVersion: ƒ, web3_sha3: ƒ, net_version: ƒ, …}
erasePasswordTime: 1586402952685
erasePasswordCallback: ƒ ()
erasePasswordTimeoutId: 45
updateCallback: ƒ (t)
updateIntervalId: 46
thisPublicKey: "0x04a64b176f5b25387ac60d60a5e80b015aba87c73d6e80bdaa3bfbac9ece798b7dab48bc0e66c5828d686b26ba17cd6acd0011c33866a488668bca490d7aec1f47"
__proto__: Object
```
and programmatically in React / Typescript, after it has been initialized in the top-level App component and populated through all child components via properties:
https://github.com/invisible-college/democracy/blob/master/packages/zk-transfer-web/src/App.tsx#L33
## Detailed Solidity Events
### `updateMintAmount`
When a new note is minted, it has a unique note hash which is emitted with this Solidity event.
https://github.com/AztecProtocol/AZTEC/blob/aztec.js%400.9.1/packages/protocol/contracts/ERC1724/ZkAssetMintable.sol#L65
You can filter and listen for this event, using deployed ZK token contracts and their ABIs (on Rinkeby) available here:
https://ganache.arcology.nyc:7001/api/deploys/4/ZkAssetMintable-deployABC
which is available in the `zk-transfer-web` code as an Immutable.js object here
https://github.com/invisible-college/democracy/blob/master/packages/zk-transfer-web/src/App.tsx#L46-L50
You'll need to write code that listens for this event from a Rinkeby ethereum node, such as the Infura node that is available in Democracy at:
```
> demo.eth
```
### Receiving confidential notes
When a user receives a new confidential note, the deployed contracts emit a `CreateNote` event with its unique noteHash, owner, and other metadata
https://github.com/AztecProtocol/AZTEC/blob/aztec.js%400.9.1/packages/protocol/contracts/ERC1724/ZkAsset.sol#L322
## 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 ⛰
