Show what users are online using darkchat-client

learner-long-life commented 4 years ago

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:

learn matrix-react-sdk
include it into zk-transfer-web to broadcast the current user's address, aztecPublicKey, and userName.
change the recipients list (Column 2) to be dynamically updatable (users added and removed)
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

when the page loads, joins some public channel and sends a test message.
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.

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 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.

mrarashel commented 4 years ago

Excellent project

learner-long-life commented 4 years ago

thanks for your interest @mrarashel

gitcoinbot commented 4 years ago

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

Work has been started.

These users each claimed they can complete the work by 3 days, 8 hours from now. Please review their action plans below:

1) shad-k has been approved to start work.

I'm already adept with TS, CSS, HTML and React. This would be a fun task for me to learn more about this project

Learn more on the Gitcoin Issue Details page.

learner-long-life commented 4 years ago

thanks for applying.

@sebastiantf please set up a time to pair set up your dev environment with me at https://calend.ly/paulpham , you're approved to start work.

@shad-k we can use more Typescript experience in the future, please stay in touch.

learner-long-life commented 4 years ago

@sebastiantf also please join us in our public dev channel to get started when you're ready, either on Gitter or Element (they are bridged) https://gitter.im/invisible-college/democracy https://matrix.to/#/!mJYqcDFJMycvtLUUgk:matrix.org?via=matrix.org

Cheers and welcome! :wave:

learner-long-life commented 4 years ago

@sebastiantf i've set up an AWS VM with the right development environment at gdsoumya.arcology.nyc To get access when you're ready, just send me your SSH public key. It's in the file ~/.ssh/id_rsa.pub or ~/.ssh/id_ecdsa.pub, and if it doesn't exist, I recommend creating it with ECDSA

ssh-keygen -t ecdsa

and press enter to accept all the defaults and empty passphrase.

Then copy us the contents of your public key in chat, and we'll get you access to the machine.

gitcoinbot commented 4 years ago

@sebastiantf 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!

[x] reminder (3 days)
[ ] escalation to mods (6 days)

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

gitcoinbot commented 4 years ago

@sebastiantf 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!

[x] reminder (3 days)
[ ] escalation to mods (6 days)

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

sebastiantf commented 4 years ago

On it @gitcoinbot

learner-long-life commented 4 years ago

@owonwo @sebastiantf created a preliminary PR at #83

It creates a client using the invisible-bot password account, joins the room #invisible-college/zk-transfer-web (which you should join as well in Element / Matrix), and sends a "Hello World" message. You can run it in matrix-react-demo with

node userAccount.js

We have our own matrix server running on https://cryptogoth.arcology.nyc, which you can use for creating new dapp accounts (see the commented out parts of userAccount.js). Our next step is to join the same room with those accounts, whose user IDs should be of the form @zk/0xethereumaddress:cryptogoth.arcology.nyc, and send "Hello World" messages as well.

Let me know if you want to pair program on this, or have questions about how to finish Subtask 1 described above. This subtask should only take us one or two more days, then I'd like to move onto Subtask 2.

Let's keep conversation here until it's ready for code review, then we'll move conversation over to the PR.

gitcoinbot commented 4 years ago

@sebastiantf 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!

[x] reminder (3 days)
[ ] escalation to mods (6 days)

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

sebastiantf commented 4 years ago

Yes @gitcoinbot

learner-long-life commented 4 years ago

Hi @sebastiantf please join the gitter or matrix chat to discuss task progress in the next day, if youre still interested in working on this task.

On Aug 25, 2020, 12:15 PM, at 12:15 PM, Sebastian T F notifications@github.com wrote:

Yes @gitcoinbot

-- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/invisible-college/democracy/issues/42#issuecomment-680124434

learner-long-life commented 4 years ago

@owonwo darkchat-client is now ready and waiting for you to use with React/typescript! We won't be using matrix-js-sdk anymore, as it is not really designed for use with dapp clients and is still more heavyweight than our custom solution.

You can see an example of darkchat-client here: https://github.com/gdsoumya/distributed_chat/blob/master/packages/web/src/App.tsx

which is used on the live demo here: https://darkchat.netlify.app

Let us know if you have any questions in the chat or here.

gitcoinbot commented 4 years ago

@shad-k 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!

[x] reminder (3 days)
[ ] escalation to mods (6 days)

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

shad-k commented 4 years ago

@cryptogoth You've recently approved me to work on this, but reading the comments it seems the majority of the work has been completed. Could you tell me what do you want me to work on?

learner-long-life commented 4 years ago

hi @shad-k I would say the work is only 1/4 complete. We have the private chat / coordination library ready, and would still appreciate feedback on using that. You can read my comments to @owonwo above. He appears to be away from internet access, but I and @gdsoumya are here to help answer any questions.

The next step is Subtask 2, which is using darkchat-client to broadcast and receive the appropriate JSON payload described above. Does that make sense or sound doable?

learner-long-life commented 4 years ago

Also, I know it's been several weeks, so I appreciate the fast response. Let me know if you're still available and interested in working on this task.

gitcoinbot commented 4 years ago

@shad-k 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!

[x] reminder (3 days)
[ ] escalation to mods (6 days)

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

gitcoinbot commented 4 years ago

@shad-k 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!

[x] reminder (3 days)
[ ] escalation to mods (6 days)

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

gitcoinbot commented 4 years ago

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

@shad-k due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

[x] reminder (3 days)
[x] escalation to mods (6 days)

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

gitcoinbot commented 4 years ago

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

@shad-k due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

[x] reminder (3 days)
[x] escalation to mods (6 days)

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

shad-k commented 4 years ago

Hi, sorry couldn't pick this up because of other commitments. I am not very sure of my availability over the next couple of days, please feel free to assign this to someone else.

gitcoinbot commented 4 years ago

@shad-k 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!

[x] reminder (3 days)
[ ] escalation to mods (6 days)

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

gitcoinbot commented 4 years ago

@shad-k 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!

[x] reminder (3 days)
[ ] escalation to mods (6 days)

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

gitcoinbot commented 4 years ago

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

@shad-k due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

[x] reminder (3 days)
[x] escalation to mods (6 days)

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

Arcology-Builders / democracy