Show what users are online using darkchat-client
invisible-college
CSS, TypeScript, HTML, react, Matrix
This task is a cooperative bounty reserved for @owonwo and one other developer who would like to pair program / livecode and learn about ZK asset programming and Democracy.
Please log into our Matrix channel and chat with us throughout your work process and please ask questions.
Use Typescript (3.9.x is the latest) for this and all future tasks.
We are happy to discuss the reasons for Typescript, as well as optimal tools in your favorite text editor to give you linting, auto-complete, and other nice features.
## 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, when two users wish to transfer confidential assets from one to the other, they must use some other side channel (slack, signal, etc.) to exchange credentials, which include their Ethereum address and their AZTEC public key. To improve this exchange, we are allowing clients (via the `zk-transfer-web` UI) to discover each other by sending and listening to a public Matrix channel called `#invisible-college/zk-transfer-web` on the `matrix.org` homeserver. (This has already been created).
In this task, the `zk-transfer-web` code will be modified to broadcast the following information to the public channel as a JSON string (the data is just an example, the actual value should be those generated / cached in localStorage).
```
address: 0x6f38461e067426e5858aBD2610C22bCb35128Bf5
aztecPublicKey: 0x0469c4458218ee0c4c08a8a047d3d480d0ffe5be1fc2308273b74d65c1776e2257e7b6cfd3028163293532740040f096cc989a4e34d5ae958edb6e1b93abf46e37
userName: 'Boring Wozniak' // jk Wozniak is not boring
avatar: `:heart:` // user avatar, use the same code to translate from text to emoji display
```
This task also includes listening to the public channel, and for every incoming message from another user, updating the second column (recipients list) in `zk-transfer-web`. This is currently a static list of hard-coded fake recipients.
This task will require learning `matrix-react-sdk`, the official SDK for building embeddable web interfaces to Matrix chats, to integrate this data into the existing `zk-transfer-web`, matching its current design.
## 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 the following parts, described in more detail below:
1. learn [`matrix-react-sdk`](https://github.com/matrix-org/matrix-react-sdk)
2. include it into `zk-transfer-web` to broadcast the current user's address, aztecPublicKey, and userName.
3. change the recipients list (Column 2) to be dynamically updatable (users added and removed)
4. listen for broadcasts of other users in part #2, incorporate this info into your part #3 by updating the now dynamic recipients list, and re-broadcast from #2
These are just high-level goals. The actual details of the design and implementation are up to your creativity and taste as an engineer.
### How to Work on This Task
Set up an appointment with @cryptogoth at https://calend.ly/paulpham to meet and greet, set up your dev environment, and get welcomed to the Democracy team!
Create a branch off of master in the main repo (do not fork the repo and work on the fork. This prevents others from collaborating with you).
```
git checkout -b issue-42
```
### Subtask 1: Learn `matrix-react-sdk`
Go to the repo at https://github.com/matrix-org/matrix-react-sdk, try to find some example projects and deploy.
Create a subdirectory called
```
~/democracy > lerna create matrix-example
```
and accept the defaults.
This is now an empty NPM project, which you are free to create a Matrix React example from scratch.
Feel free to use `create-react-app` with Typescript.
Your goal in this part is to write a web UI that
1. when the page loads, joins some public channel and sends a test message.
2. subscribes to the same channel, and when a second instance loads in a second tab, receives the test message of that second instance
To do this, you'll need to implement the concept of an identity for a web user, that is unique and knowable from Matrix chat messages.
One possible approach:
If it's possible to programmatically create a new identity, and possibly a password / secret, without the use of an email address. This is a common use case for bots. Later on, the client code in `zk-transfer-web` can create and cache this password / identity on behalf of every user, and we can add it to the ethereum private key as a secret encrypted and stored with `demo-keys`
Create a new Netlify app, copying the `zk-transfer-web` app, but loading the react app in `matrix-react` instead.
https://app.netlify.com/sites/zk-transfer/deploys
You may need to request to join our Netlify team if you are not a member already.
Commit and push your changes.
When you push your branch, it should create a Netlify preview deploy which you can share with everyone.
If you haven't done so, please check in on the channel and let us celebrate with you.
Create a PR, comparing `master` to branch `issue-42`, and request a review from @cryptogoth and @owonwo .
Work with us to discuss any comments and resolve any issues before moving on. (We won't merge to `master` until the very end of subtask 4).
Success, sub-task 1 !
You may then proceed to subtask 2.
### Subtask 2: Broadcast `this` user's `address`, `aztecPublicKey`, and `userName`
Once the goals in the previous part are complete, your goal in this subtask as to include `matrix-react-sdk` into `zk-transfer-web`, create / read Matrix user credentials, log in and join the public channel / room [#invisible-college/zk-transfer-web](https://matrix.to/#/!qpyrmBDlPNgMcOdaYk:matrix.org?via=matrix.org).
Your goal is to broadcast to the channel once, when the page / wallet finishes loading, a JSON string in the following format
```
{
"address": "0x6f38461e067426e5858aBD2610C22bCb35128Bf5",
"aztecPublicKey": "0x0469c4458218ee0c4c08a8a047d3d480d0ffe5be1fc2308273b74d65c1776e2257e7b6cfd3028163293532740040f096cc989a4e34d5ae958edb6e1b93abf46e37",
"userName": "Boring Wozniak",
"avatar": ":heart:"
}
```
The first two are available as `demo.thisAddress` and `demo.thisPublicKey` when the Democracy wallet finishes loading on the page. You'll need to dig around the existing source code to figure out where the username and emoji (avatar) are stored.
Log into the channel [#invisible-college/zk-transfer-web](https://matrix.to/#/!qpyrmBDlPNgMcOdaYk:matrix.org?via=matrix.org) yourself to see if you can see this message above, after a page loads.
Commit and push your changes, and verify that you can see your changes on a public Netlify preview deploy.
If you haven't been doing so, please check in on the channel and we will oo and aa at your demo.
Your new changes will be reflected in your PR.
Work with us to discuss any comments and resolve any issues before moving on. (We won't merge to `master` until the very end of subtask 4).
Success, sub-task 2 !
You may then proceed to subtask 3.
### Subtask 3: Change the recipient's list to be dynamic
The recipients list in Column 2 is currently static. Add the ability to add and remove recipients, which will be called every time a new broadcast message is received on the public channel in the previous subtask.
A recipient has visible parts, that should be rendered in their React component (avatar and username), and the hover / tooltip should be their Ethereum address and AZTEC public key. Programmatically, the Ethereum address and AZTEC public key from the selected user should be available for a future goal (confidential transfers to a dynamic recipient).
Now when you first load the page, it should be empty.
Demonstrate that your dynamic recipients list works by responding to a user click on some React component (like the list itself) that will add the current user to the recipients list. This is only for testing, in the final version, users will not be able to send tokens to themselves (as this is a waste of gas).
Commit and push your changes, and verify that you can see your changes on a public Netlify preview deploy.
If you haven't done so, please check in on the channel and show off your hacker skills.
Your new changes will be reflected in your PR.
Work with us to discuss any comments and resolve any issues before moving on. (We won't merge to `master` until the very end of subtask 4).
Success, subtask 3!
You may then process to subtask 4.
### Subtask 4: Add online users to the recipients list, and re-broadcast
Now it's time to put all the parts together.
Using your dynamic recipients list in subtask 3, subscribe to the public channel in subtask 2 and listen to the broadcast messages of all connected users. For each message (or in a batch if possible), update the dynamic recipients list, and then re-broadcast the current user's information to the channel, so that new users who have just joined can be aware of us (the current user) and add us to their recipients list.
When you load the page in two different tabs, after the wallets load, you should see the user of one tab appear in the recipients list of the other tab.
Commit and push your changes, verify that it builds on Netlify and passes CircleCI, then load the preview deploy.
If you haven't done so, please check in on the channel and we will shower you with feedback and emojis.
Your new changes will be reflected in your PR.
Work with us to discuss any comments and resolve any issues before moving on. (We won't merge to `master` until the very end of subtask 4).
Success, subtask 4 and the whole task!
Whew, that was a lot. We look forward to pair programming with you, and welcome to the team.
