Currently, when ACE.setProof fails for, e.g. confidentialMint (on Rinkeby), this error doesn't propagate up through ethjs and cause Democracy to halt, passing on the error to the user.

Therefore, Democracy pipeline proceeds, and saves the generated ZK assets to the REST server, even though they are not verified and committed on-chain:
https://rinkeby.etherscan.io/address/0x99b6764486816e5937e435c2c3dd80b935ef6410

This task is to discover why these errors don't propagate, and to wait until a corresponding event appears in the logs before returning.

Related tasks:

• what are best practices for testing on Rinkeby?
• how to detect whether a token / ACE is a valid deploy, by checking all the prooftypes.

we need web3 and config

Work-in-progress

We are still scoping out this issue as a team.
Ask in Gitter channel if you are interested in working on it.

Currently we handle configurations and secrets inconsistently.
Sometimes they are saved in .env which is committed into version control for ease-of-use with CircleCI / testing.

Sometimes we save a default .env.sample file and ask a user to rename it to .env with their secrets, before running.

These are the webpack errors in demo-webify

ERROR in ./exports/api.js
Module not found: Error: Can't resolve 'bufferGlobal' in '/Users/ppham/src/democracy-0.4.9/packages/webify/exports'
 @ ./exports/api.js 83:19-42
 @ multi ./exports/api.js
                                                                                      
ERROR in /Users/ppham/src/democracy-0.4.9/node_modules/dotenv/lib/main.js
Module not found: Error: Can't resolve 'fs' in '/Users/ppham/src/democracy-0.4.9/node_modules/dotenv/lib'
 @ /Users/ppham/src/democracy-0.4.9/node_modules/dotenv/lib/main.js 24:9-22           
 @ ./exports/api.js
 @ multi ./exports/api.js
                                               
ERROR in ../contract/src/contractsManager.js
Module not found: Error: Can't resolve 'fs' in '/Users/ppham/src/democracy-0.4.9/packages/contract/src'
 @ ../contract/src/contractsManager.js 9:9-22               
 @ ../contract/index.js                                                    
 @ ./exports/api.js
 @ multi ./exports/api.js         
                                             
ERROR in ../contract/src/buildsManager.js
Module not found: Error: Can't resolve 'fs' in '/Users/ppham/src/democracy-0.4.9/packages/contract/src'
 @ ../contract/src/buildsManager.js 21:9-22                     
 @ ../contract/index.js
 @ ./exports/api.js                 
 @ multi ./exports/api.js       
                          
ERROR in ../utils/src/db.js            
Module not found: Error: Can't resolve 'fs' in '/Users/ppham/src/democracy-0.4.9/packages/utils/src'
 @ ../utils/src/db.js 13:9-22
 @ ../utils/index.js                       
 @ ./exports/api.js
 @ multi ./exports/api.js                                        

ERROR in ../utils/src/utils.js                                                        
Module not found: Error: Can't resolve 'fs' in '/Users/ppham/src/democracy-0.4.9/packages/utils/src'
 @ ../utils/src/utils.js 5:9-22
 @ ../utils/index.js
 @ ./exports/api.js
 @ multi ./exports/api.js

ERROR in ./exports/api.js
Module not found: Error: Can't resolve 'fs' in '/Users/ppham/src/democracy-0.4.9/packages/webify/exports'
 @ ./exports/api.js 78:9-22
 @ multi ./exports/api.js

ERROR in ./exports/api.js
Module not found: Error: Can't resolve 'processGlobal' in '/Users/ppham/src/democracy-0.4.9/packages/webify/exports'
 @ ./exports/api.js 81:20-44
 @ multi ./exports/api.js

A logo for what?

Typed transform pipelines are one way for Ethereum users to coordinate with each other off-chain and manage zero-knowledge assets, before committing to on-chain actions in a minimal way. I'm using them for private trading, and they can also be used for private voting, and to make an interactive REPL in about 20 lines of code!

I'd like a visually memorable logo to use at the top of a demo page that will let people play around with pipelines in the safety of their browser.

Read more here:
https://medium.com/@cryptogoth/typed-transform-pipelines-for-zero-knowledge-trading-72aaf1274003

How

How to work on this bounty:

1. Fork this repo. Submit a PR with an SVG logo in the images directory.
2. I'll pay out 100 DAI (SAI) to anyone who reads through the above and puts in an effort to make an original and worked through design (can be multiple winners)

Creative Guidelines

1. A lot of Ethereum art has thick outlines, high contrast colors (usually white and black and pastels) and is more clipart / robotic themed. I'd like something more humanistic, with more solid or grainy textures and warmer color palettes.

2. Oil / petroleum pipelines are not a flattering comparison, but any other kind of conduit or road, or retro-futuristic pneumatic tubes transporting people or goods is cool. Are there even other kinds of pipelines in the world, pumping other kinds of liquids? Surprises are welcome.
3. We still love the Ethereum logo and welcome incorporating it in some way.

rather than nested then's

How to Work on This Task

Working on this task requires the following steps

• Introduce yourself in our gitter channel! 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 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 ⛰

Background

This task is part of a larger project to create an interactive web demo / playground for users to learn about zero-knowledge assets and gain intuition about them by directly transacting with the contracts on-chain.

You can view a demo-in-progress at https://zk-transfer.netlify.com

This Task

This is a project management meta-issue: you will be reading the high-level requirements of this mockup in a previous design issue #36 and the main mockup:

https://www.figma.com/file/KEV19jwlvgd3m9lexQx9KL/Confidential-Transfer-Demo?node-id=0%3A1

Based on the difference between this mockup and the current demo https://zk-transfer.netlify.com,
you'll be asked to carve out a small, well-specified front-end development task similar to #43 or #41 .

It's called a meta-issue because it's an issue (assigned to you) that will create another issue (that you'll assign to a dev from Gitcoin).

You will be given a budget of 25 DAI, which I'll contribute to the bounty and send you the fees for. I'll ask you to post a new bounty on Gitcoin, approve workers who apply for the task, discuss with them and me the completion of the task in Gitter or on this thread, and then finally sign off, pay out the bounty, and rate the developer.

You don't have to do any coding or design yourself, only understanding how they work together, how to communicate with and support a developer, and how to create and manage bounties is a key skill.

If successful, this task will repeat, until the project is complete.

How to Work on this Task

• Join our gitter and say hi. Let's talk about your ideas for an issue / bounty, send links to your previous project, and I'll work with you to create a two-sentence proposal. We'll use #43 or #41 as examples.

• Apply to work on this Gitcoin bounty, and I'll accept.

• Once you're approved, create the issue at https://github.com/invisible-college/democracy/issues
  You can use the text of #43 or #41 as a boilerplate.

• Submit a link to your new issue on Gitcoin, and I'll review and work together with you to shape it.

• When we're happy, you'll create a new Gitcoin bounty for your new issue and I'll fund it with 25 DAI, with a deadline of one week from now. We'll invite some previous developers.

• You'll review workers who apply, and we'll accept one together, giving first dibs to previous developers who have successfully completed a bounty. We'll ask that developer to join us on Gitter.

• As the deadline approaches, you'll request updates and feedback from the developer, and I'll be available on Gitter to help unblock or answer questions.

• When the bounty is finish, you'll pay out the developer bounty on Gitcoin, and then I'll pay out this bounty to you. Looking forward to working with you.

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, 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! 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 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 ⛰

Description

Zero-knowledge assets are a way to transfer ownership of a private asset (the amount transferred is secret) on a public blockchain (in this case Ethereum is the blockchain, and AZTEC is the zero-knowledge technology built on top of it). There are two kinds of assets on Ethereum (public tokens, sometimes called ERC20, and a newer, private kind, called ERC1724). Don't think of these assets as just money or shares of stock; for this demo it could be shares of a building or a co-op, a commodity like sheep or bales marijuana, trees in a rainforest, hours of someone's time.

This mockup will eventually be launched as a web demo to let people interact first-hand with zero-knowledge assets in their browser, on Rinkeby/Goerli testnets first, to gain some intuition and experience. It is meant to convey these values

• modern / minimalist
• stylish
• trustworthy & predictable, but not stuffy
• private (in the sense that the values viewable in your browser are not viewable by anyone else, not even the server)

Although dynamic user effects are described below, your mockups will just be static 2D visual layouts in Figma, with start/end views and a description for the engineer on how any elements will transition.

This particular bounty is meant to ideate and produce at least three different mockups, from as original or independent views as possible, that can then be narrowed down and implemented in separate (code / implementation) bounties in React and launched on Netlify or some other static site.

User interaction and Features Targets

The first draft mockup is here:
https://www.figma.com/file/mDwfpNj5OC4pw68tujfOma/Confidential-Transfer-Demo

Read it with the comments (speech bubble icon) turned on to get an idea of the scope, but don't be tied to anything else (typeface, size, placement, ordering).

The different elements of the UX are:

1. When the page loads, the user gets wallet auto-created for them and a randomly chosen avatar icon. There is a link to the Etherscan page for their account.
2. Their balances of a few fixed tokens (ERC20 and ERC1724) are shown. They are minted new ERC1724 tokens, and their balances shown going up the correct amount. (there should be sound effect, which is muted by default, but a button somewhere to unmute for future refreshes)
3. Other online users at the same time (including a fixed "robot" user) can be selected as recipients. The user selects an amount of one token and clicks to start a "send" action.
4. Some kind of spinner icon begins, with a link to the corresponding tx on Etherscan.
5. When tx succeeds, another sound effect plays, their balance decreases, and the Etherscan link / spinner disappears.
6. If tx fails, a button / link is shown for them to try again, and the Etherscan link / spinner disappears.
7. Any incoming transactions from other users also increases the balance, and a notice appears describing which user sent the transfer, how long ago, and a link to Etherscan tx page.

How to work on this bounty:

Apply to work for this bounty on Gitcoin (for now) and send a short message mentioning any relevant bounties or online portfolios you've worked on, including links, your general design approach, and how you plan to handle some of the specific interactions above.

Fork this Figma, and implement your work in it
https://www.figma.com/file/mDwfpNj5OC4pw68tujfOma/Confidential-Transfer-Demo

I'll pay out $75 of equivalent ETH (or DAI as preferred) to each submission from anyone who reads through the above and sends in an original, worked through design (can be multiple winners). Please post your Figma links into the Github issue at least once as you work to receive feedback. I'll give you the go-ahead if your approach is significantly different enough from previous submissions, and if so, you can submit and be awarded multiple times before the deadline is up.

Creative Guidelines

Full bleed artwork or photography in a restrained way (sidebar, banner) can be used, but no parallax effects or gigantic hero images. The user interaction / token minting and transfers should be the focus. Don't worry about responsive / mobile layouts.

Display / header typefaces should be on the angular / geometric / slab serif side, neither too futuristic nor too traditional, but paired with any body face that complements well. Display header text can be images if you'd like to use fonts on your computer that are not available online for free. No specific guidelines on color scheme.

You may enjoy this browser extension that lets you explore Google Fonts / color schemes in your New Tabs: https://palettab.com/

Despite the first draft above, all three cooperating projects (AZTEC, RealBlocks, Democracy) should be treated as equal importance and appear at the bottom in a smaller form.

You can make use of the AZTEC and RealBlocks logos from their respective websites:
https://aztecprotocol.com
https://realblocks.com

and also any part of this image as a logo for Democracy.js.

Have fun 🎉 and even the guidelines above can be wiggled if you have a good reason or a strong 💪 concept. Ask questions or not, thanks for reading this far, and look forward to seeing some new creations appear.

with expected failure, using chai-as-promised pattern.

which is currently run as
npm run lint

Reduce the error count to 0 from

_ 395 problems (395 errors, 0 warnings)
  3 errors and 0 warnings potentially fixable with the `--fix` option.

These are currently embedded in aztec-web and need to be usable in other projects.

   const deployedFunc = async (contractName, options) => {
      return await deployed({
        contractName, options, bm: this.props.bm, signerEth: this.state.signerEth
      })  
    }   

    const minedTxFunc = async (method, argList, options) => {
      console.log('MinedTx from address', this.state.address)
      const _options = Map({ from: this.state.address, gas: '6700000' })
          .merge(options).toJS()
      console.log('_options', JSON.stringify(_options))
      // NOTE: We rely on `deployed` being called above to prepare the
      // associated signer.
      const signerEth = this.props.wallet.signersMap[this.state.address]
      console.log('deployerEth.address', JSON.stringify(_options))
      const txHash = await method(...argList, _options)
      return untilTxMined({ txHash, eth: signerEth })
    }   

Currently nyc is instrumented to run as
npm run cov
and produces the following output.

There are some errors to remove, as well as improving code coverage below closer to 100%.

----------------------------|----------|----------|----------|----------|-------------------|

Currently it is error prone when confidentially minting ZK tokens.
The last minted total can be lost or decoupled from the current deploy, necessitating de-deployed the ZK token contract and re-minting.

This will not suffice in a production setting, although for now, when users load the demo, it's okay-ish for their balances to be reset to zero.

This will need a more thought-out plan or an administrative web interface that will let ZK token owners see the last total notes minted and their tx hashes, so that we can query (e.g. from Infura) the mintee note hash fro the EVM log.

Background

This is a design task that is part of a web demo to let people experiment with and develop intuition about zero-knowledge assets. 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
• 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

You can view our current ZK transfer demo-in-progress at:
https://zk-transfer.netlify.com

We welcome collaboration, discussion, and learning together. Please join our gitter channel and ask questions throughout working on this task.

Description

Your job is to combine two previous mockups, specifically the box that displays transaction statuses, which include minting of new assets (this occurs automatically):

The rightmost two columns of this demo represent different modes, one for a successfully mined tx and one for failure.

https://www.figma.com/file/KEV19jwlvgd3m9lexQx9KL/Confidential-Transfer-Demo?node-id=0%3A1

These should be reworked to match the style of the existing demo, and added to this mockup as a third column, to the right of Step 2 (Recipient List)

https://www.figma.com/file/46KvltxYaEXPazXweqQIEV/Confidential-Transfer-Demo?node-id=31%3A2

The mockup should be animated for adding new tx's (adding a newest tx is on bottom, older tx's get shifted upward in a scrollbox view) and waiting for a tx to be mined.

Designs that we admire, for their cleanness and simplicity,
are MakerDAO's Oasis and Uniswap.

How to Work on This Task

Fork this Figma and make your changes to it:
https://www.figma.com/file/46KvltxYaEXPazXweqQIEV/Confidential-Transfer-Demo?node-id=31%3A2

When you're ready for feedback, page a link to your new figma in the Github issue.
We'll work through any issues or design wrinkles together, and when we're both happy, you'll submit the Figma URL into the Gitcoin bounty.

We look forward to working with you.

Use Case 1:
bind all subsequent calls to use a test network, so we don't have to manually call getNetwork and get its net_version

Use Case 2:
bind all subsequent calls to operate on a particular contract i.e. TestLibrary

Currently in demo-utils, there are 20 errors that cannot be fixed automatically.

Clone the repo, bootstrap all the packages, then make sure yarn lint:fix runs without errors.

git clone ...
cd democracy
lerna bootstrap
cd packages/utils
yarn lint:fix

You can create a branch off of master, push your changes there, and create a pull request off of their for a code review from me.

Background

This task is part of a larger project to create an interactive web demo / playground for users to learn about zero-knowledge assets and gain intuition about them by directly transacting with the contracts on-chain.

Task Description and Examples

A static demo, created with react-scripts, not connected to the blockchain, is currently running on:
https://vigilant-wiles-4b7d39.netlify.com/

with source code in this directory:
https://github.com/invisible-college/democracy/tree/master/packages/zk-transfer-web

Your task has three parts:

1. restore any screen name from localStorage.
2. if none is found, add Docker-style random screennames to the auto-created Ethereum address for each user, save to localStorage

Restore Screenname from localStorage

In the path

localStorage.getItem(`demo/{demo.chainId}/thisScreenName`)

if it is non-null, should be the screen name from any previously stored session. Use this value to populate the screenname in the header (currently it's the static string "Jame Cameron")

The value of chainId can be read from the global symbol demo.chainId after await demo.clientInit() is called.

Random Screennames

If no previous screen name is found / restored in the previous section, a
a new random screen name should be generated, using this algorithm from the Docker random name generator

Then save this new screen name with

localStorage.setItem(`demo/${demo.chainId}/thisScreenName`)

There does not need to be any relationship between the screen name and the auto-created address. (That is, it's okay if the screen name gets erased, and the user gets a different random screen name for the same Ethereum address upon page refresh).

How to Work on This Task

Fork this repo. Clone and install Lerna bootstrap dependencies following the instructions on the main page:

https://github.com/invisible-college/democracy#get-the-source-code-to-experiment-and-run-tests

Make your changes in the zk-transfer-web package, and then you can auto-rebuild the page and serve it using react-scripts start or similar commands.

Host your work-in-progress on Netlify and post that link in this thread as you work for feedback, help, and collaboration. For Netlify you may find the following helpful:

Build commands

lerna bootstrap
cd packages/zk-transfer-web
react-scripts build

Build directory

packages/zk-transfer-web

Create a pull request against your forked repo (master branch) onto this repo (master branch), and commit and push your source code there as you work.

When it's ready, I'll merge from that PR onto the master branch, and ask you to turn over ownership of the Netlify instance to the Democracy.js team. Looking forward to working with you on this project.

This task is a cooperative bounty reserved for @owonwo and one other developer who would like to pair and learn about ZK asset programming and Democracy.

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 after a user gets ZK notes, they would like to transfer some or all of them to another user (a recipient) when the list of online users in a confidential way: no one looking at the public blockchain will be able to tell the amount of the transfer. That's the main purpose of this project, confidential transfer. As an easier first step, we will allow a user to transfer any of their existing ZK token balances to a single, fixed recipient: the Rinkeby token owner at address with credentials:

address: 0x6f38461e067426e5858aBD2610C22bCb35128Bf5
aztecPublicKey: 0x0469c4458218ee0c4c08a8a047d3d480d0ffe5be1fc2308273b74d65c1776e2257e7b6cfd3028163293532740040f096cc989a4e34d5ae958edb6e1b93abf46e37
password: 652c22d2630960a3825d9bc92354c82ea76f895d62f2ca160223db48c5e69f26

This transfer should occur whenever the user clicks on the right-arrow next to any ZK token balance, as shown in this screenshot.

The amount of the transfer is whatever is typed into the blank, as highlighted in this screenshot.

This task also includes a few cosmetic and UX changes to the way the ZK token balances currently work.

Minting and Viewing

As background for this task, you should remind yourself how to mint 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. implement UI when the cursor hovers over a ZK token row
2. implement UI when the user types a value into the blank.
3. implement confidential transfer when the user clicks on the right-arrow (transfer) button

UI Behavior When Hovering over ZK Token Row

If a ZK token row has zero balance, the text input should not appear (regardless of whether it is being hovered over or not.

If a ZK token row has a greater-than-zero balance, only when a user hovers over that row should a text input appear. The total balance should continue to be displayed (and not hidden, as it is currently). As it behaves now, it is automatically populated with the maximum amount (the total balance) of the token, which is correct, so this behavior should be kept.

UI Behavior When Typing a Value

On each keystroke, the value in the text input should be validated.
If it's less than or equal to zero, or greater than the available token balance, the right arrow transfer button should be grayed out / disabled / unclickable.
Otherwise, the right arrow button should be clickable and enabled.

Confidential Transfer

Here's an example of code that transfers a configurable value of ZK note when a button is pushed in React that you may find helpful.

https://github.com/invisible-college/democracy/blob/master/packages/aztec-web/src/token.jsx#L161

You can test it out in-person by going to https://aztec-web.netlify.com , minting yourself some notes, and then transferring some of them to a recipient. You may need to add a recipient to the Address Book, again following the minting instructions in issue #45 .

When the user clicks on the right arrow transfer button, you should initiate a confidential transfer by calling cx function, just as in the example above, with parameters taken from the transfer value text input, and a single fixed recipient

How to Work on This Task

Working on this task requires the following steps

• Introduce yourself in our gitter channel! 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 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 ⛰

outputs, keys, src, config, and a bin that symlinks to scripts or js

Background

Zero-knowledge assets are a way to transfer ownership of a private asset (the amount and participant addresses can be secret) on a public blockchain. In this case, Ethereum is the blockchain, and AZTEC is the zero-knowledge technology built on top of it. There are two kinds of assets on Ethereum: public tokens, called ERC20, and a newer, private kind, called ERC1724.

This project will be launched later in December 2019 as a web demo to let people interact first-hand with zero-knowledge assets in their browser. This will allow people to gain some intuition and experience with zero-knowledge assets.

This task is to implement a mockup from a previous issue #36 as a static page hosted on Netlify using React and react-scripts, using placeholder elements. User interactivity will be present to advance between the steps of the workflow, but blockchain interaction will be added in a separate, later issue.

The mockup and interactions

Click through the following mockups to familiarize yourself with the process.

This interactive mockup (Mockup #1) contains the main look and interaction
https://www.figma.com/file/eiVedZmhOLoHh4WAQgleTQ/Confidential-Transfer-Demo-Copy

Clicking the play button in upper-left corner will take you through the clickable interactive mockup.

and this one (Mockup #2) contains a third status column which includes a tx history.
https://www.figma.com/file/KEV19jwlvgd3m9lexQx9KL/Confidential-Transfer-Demo?node-id=0%3A1

The following interactions should be handled in your implementation (slight differences from the mockups), starting with mockup 1

• Clicking on the name "satoshi buterin" should turn it into an editable blank, which is saved into localStorage and persisted across refreshes, when you press "Enter"
• Step 1 is initially enabled and Step 2 is grayed out.
• In Step 1, each token has a non-editable amount next to it which is the user's current balance in that token. When the mouse pointer hovers over a token row, a second, editable text input appears and lets the user enter in an amount to send, which is range limited between 1 and the balance, in integer amounts. A right-arrow icon also appears just for that row.
• Pressing enter or clicking the right arrow advances to Step 2 (disables / grays out Step 1)
• Hoving over the list of names in Step 2 causes a paper airplane icon to appear next to a name and enable it (black text). All other names are disabled / grayed out.
• Clicking on a name row or its icon advances to the last column (from Mockup 2), which shows a spinner icon or animation for 5 seconds, then randomly reports a successful or failed tx for now (it currently won't send anything to the blockchain), changing to a static icon of a green checkmark or a red X.
• That's it! When you've finished this part, we have a great start for our web demo and can add blockchain interaction in the next bounty.

Technologies to use

• HTML5 / CSS
• Typescript / React
• Netlify

within those constraints, any library you like can be used.
Try to keep dependencies minimal and file sizes of the final build small.

How to work on this bounty:

Apply to work for this bounty on Gitcoin (for now) and send a short message mentioning bounties or other websites you've worked on that are React-based static sites hosted on Netlify or similar services.

Only a single submission and bounty payout will be issued, so timeliness and frequent communication are appreciated to get feedback and discuss ideas.

Fork this repo and use react-scripts to create a new Typescript package in the directory
democracy/packages/zk-transfer-web.

When you're done with your implementation, deploy it to Netlify, with scripts that create a static build and then serve it (react-scripts build)

Submit a pull request on github of your fork, and include a link to your netlify deployed site.

Ask questions, make suggestions, have fun

Check-ins on this github thread are appreciated to ask for feedback, make suggestions, or just share progress and celebrate successes.

For example, extension .sol being swapped with .solc

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 a new user first loads the page (the majority of user experiences), they will see a zero ZK note balance, as show in the screenshot below. This is not an optimal situation, as they will probably not be sure how to receive ZK notes to experiment with, and therefore not be able to experiment transferring them to other users.

As described (and implemented) in #45 , minting (creating) new ZK notes is a very manual process that involves an administrator account, which we can publish the credentials for on the Rinkeby testnet and embed into our demo site. (A different, future task will discuss how to enable this on Mainnet).

The task for this issue is to automatically mint a new 10-value ZK note, for one of the three ZK tokens (with trading symbols 'AAA', 'BBB', or 'ABC'), every time the user refreshes the page at https://zk-transfer.netlify.com, including when the page is first loaded.

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:

1. mint a new 10-value note programmatically, using the knowledge from issue #45
2. update the balances of the ZK token with this new note, with an animation or a sound effect, whenever the note has finished minting (there is a delay)

How to Work on This Task

Working on this task requires the following steps

• Introduce yourself in our gitter channel! 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 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 and refresh the browser to see your ZK balances update.
• 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.

Editing the Source Code

Here's an example of code that mints a configurable value of ZK note when a button is pushed in React that you may find helpful.

https://github.com/invisible-college/democracy/blob/master/packages/aztec-web/src/token.jsx#L103

You can test it out in-person by going to https://aztec-web.netlify.com and following the web minting instructions in issue #45

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 ⛰

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.

The new command for interacting with smart contract methods doesn't supply the from field

[root@c9d5ebcafd2f democracy]# ./demo.js do TestUseLibrary test deployE double _def=2
Command do
arg TestUseLibrary
  <0 ContractName>=TestUseLibrary, <1 netName>=test, <2 deployId>=deployE, <3 methodName>=double, <4 args>=_def=2
Network test
Coinbase: [object Object]
Net: test
Doing TestUseLibrary.double with args [object Object]
Args '2'
(node:16242) UnhandledPromiseRejectionWarning: Error: [ethjs-query] while formatting inputs '[{"to":"0x2250c7f93e7d1644b5a10029e35144a74b900e99","data":"0xeee9720600000000000000000000000000000000000
00000000000000000000000000002"}]' for method 'sendTransaction' error: Error: [ethjs-format] object {"to":"0x2250c7f93e7d1644b5a10029e35144a74b900e99","data":"0xeee97206000000000000000000000000000000
0000000000000000000000000000000002"} must contain properties: from, data
    at Eth._callee$ (/src/democracy/node_modules/ethjs-query/lib/index.js:110:23)
    at tryCatch (/src/democracy/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/src/democracy/node_modules/regenerator-runtime/runtime.js:296:22)
    at Generator.prototype.(anonymous function) [as next] (/src/democracy/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (/src/democracy/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /src/democracy/node_modules/babel-runtime/helpers/asyncToGenerator.js:35:14
    at new Promise (<anonymous>)
    at new F (/src/democracy/node_modules/core-js/library/modules/_export.js:36:28)
    at Eth.<anonymous> (/src/democracy/node_modules/babel-runtime/helpers/asyncToGenerator.js:14:12)
    at Eth.performCall (/src/democracy/node_modules/ethjs-query/lib/index.js:141:21)

To reproduce
446 ./demo.js link TestUseLibrary test account0 link2 TestLibrary=deploy7
447 git status
448 vi src/TestUseLibrary.sol
449 ./demo.js compile TestUseLibrary.sol
450 ./demo.js link TestUseLibrary test account0 link2 TestLibrary=deploy7
451 ./demo.js link TestUseLibrary test account0 link2 TestLibrary=deploy7
452 ./demo.js link TestUseLibrary test account0 link3 TestLibrary=deploy7
453 ./demo.js deploy TestUseLibrary test link2 deployD _abc=123
454 ./demo.js deploy TestUseLibrary test link2 deployE _abc=123
455 ./demo do
456 ./demo.js do
457 ./demo.js info TestUseLibrary
458 ./demo do
459 ./demo.js do TestUseLibrary
460 ./demo.js do TestUseLibrary test deployE double _def=2

There are 7 severe vulnerabilities related to lodash/axios in demo-keys due to the dependence on web3-utils, purely for the purpose of the utility methods toWei and fromWei.

These are also provided by ethjs-unit in a probably smaller file size without this dependency. This task is to measure (webpack'd) file sizes before, switch them over, measure file sizes after, commit/push, verify vulnerabilities are gone, and publish.

Note

This bounty is reserved for @owonwo

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.

There are three kinds of transactions (tx's) that a user of ZK Transfer will need to know about, and that we should implement with this task.

• confidential sending of tokens, when a user clicks the "send" button in the demo
• confidential receiving of tokens, when a user is the recipient of someone else click their "send" button
• minting, which happens automatically when a page refreshes.

Minting is already part of the demo, but we'll have to fake transactions for confidential sending and receiving, so that we can display them. For this task, you can use a fixed fake user, "Vitalik Buterin" as both the recipient and sender of our fake tx's.

Description

This task is to implement the design created in #57
https://www.figma.com/file/buXCDgUSJicITCuiLn4a3G/zktransfers-Copy

the third column for transaction statuses. Each type of tx (mint, send, receive) could succeed or fail, so there are 6 possible displays. There is also a "transaction in progress" animation which should display while waiting for a tx to be mined, and to determine it's success / failure outcome.

The history of tx's only need to be kept while the page is loaded. If the page is refreshed, the third column can be erased and re-populated from scratch.

Two ZK tokens can be deployed for easier testing. Sending/receiving from one could always result in failure, and sending/receiving from the the other one could always result in success.

• Confidential sending: this occurs after the user presses the send button next to a token, and you can display the animation for a fixed amount of time (say 15 seconds) before converting it to a mined tx.
• Confidential receiving: this can happen randomly in the background
• Minting: this occurs after every page refresh.

Task Description and Examples

A static demo, created with react-scripts, is currently running on:
https://zk-transfer.netlify.app

In this task, you'll modify the source code in
https://github.com/invisible-college/democracy/tree/master/packages/zk-transfer-web

How to Work on This Task

Working on this task requires the following steps

• Introduce yourself in our gitter channel! 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 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 ⛰

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

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.

including renaming files in outputs from .js to .json extensions.

Background

This task is part of a larger project to create an interactive web demo / playground for users to learn about zero-knowledge assets and gain intuition about them by directly transacting with the contracts on-chain.

Task Description and Examples

A static demo, created with react-scripts, not connected to the blockchain, is currently running on:
https://vigilant-wiles-4b7d39.netlify.com/

with source code in this directory:
https://github.com/invisible-college/democracy/tree/master/packages/zk-transfer-web

Your task is to take the first step in connecting this demo to the blockchain by adding an automatically created (Rinkeby) Ethereum address in place of the static fake address: 0x291F1ic810…2BgSdifB7
and make the text a link to the corresponding Etherscan page at https://rinkeby.etherscan.io

Here is a running example of a page that will auto-create an Ethereum account in the browser (running on a private testnet) using Democracy.js
https://demo-aztec.herokuapp.com/

This is the source code of the main HTML page:
https://github.com/invisible-college/democracy/blob/master/packages/aztec-web/public/index.html

You can adapt this code, with window.NODE_ENV='RINKEBY' in your own example.

How to Work on This Task

Fork this repo. Clone and install Lerna bootstrap dependencies following the instructions on the main page:

https://github.com/invisible-college/democracy#get-the-source-code-to-experiment-and-run-tests

Make your changes in the zk-transfer-web package, and then you can auto-rebuild the page and serve it using react-scripts start or similar commands.

Host your work-in-progress on Netlify and post that link in this thread as you work for feedback, help, and collaboration. For Netlify you may find the following helpful:

Build commands

lerna bootstrap
cd packages/zk-transfer-web
react-scripts build

Build directory
packages/zk-transfer-web

Create a pull request against your forked repo (master branch) onto this repo (master branch), and commit and push your source code there as you work.

When it's ready, I'll merge from that PR onto the master branch, and ask you to turn over ownership of the Netlify instance to the Democracy.js team. Looking forward to working with you on this project.

What is this task?

We need project management help to scope out Democracy's roadmap and tasks for the next year, and also to estimate a budget. This is a highly collaborative task, and you'll expect to spend a few hours on Gitter / audio chat with us putting together our goals and various directions for this project, helping refine our vision, and ultimately publishing the roadmap online.

Who are we?

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 incentivizes partial state 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
• scalable / robust secret sharing
• using Whisper, Secure Scuttlebutt, or other distributed private messengers to coordinate online cryptographic actions

How to Apply

When applying, tell us your favorite tools for roadmapping and task management, and a link to past project roadmaps (PDFs or PNGs or links to HTML are fine). You don't need to be a coder, but coding knowledge at a high-level and previous experience is a plus.

Work-in-progress

This issue is not yet complete.

Background

This task is part of a larger project to demonstrate zero-knowledge assets in a browser.
Zero-knowledge assets can benefit from a private messaging system, such as Whisper, for direct peer-to-peer, encrypted communication which is unreadable to another other party, including any intermediate servers hosting the static site, or the Whisper server itself.

Description of the work order

• Find a way to instaure a box related to the Blockchain Network and transactions of the actual sender, when sending or receiving an amount of ERC20 token or cryptocurrency.

• The Task is to display the status of transaction success or failure, as a box with nice looking design that will fit the existing mockup . It could be a redirect to Etherscan or the Blockchain Network web site related, but the box itself need to keep track of the transaction from the user is the main goal.

• The design should allow for multiple transactions to occur but also previous transaction statuses should scroll up, to show the history of all past transactions.

Description and Examples

A static demo, created with react-scripts, not connected to the blockchain, is currently running on:
https://vigilant-wiles-4b7d39.netlify.com/

With source code in this directory:

https://github.com/invisible-college/democracy/tree/master/packages/zk-transfer-web

Your task is to take the first step in connecting this demo to the blockchain by adding an automatically created (Rinkeby) Ethereum address in place of the static fake address: 0x291F1ic810…2BgSdifB7
and make the text a link to the corresponding Etherscan page at https://rinkeby.etherscan.io

Here is a running example of a page that will auto-create an Ethereum account in the browser (running on a private testnet) using Democracy.js
https://demo-aztec.herokuapp.com/

This is the source code of the main HTML page:
https://github.com/invisible-college/democracy/blob/master/packages/aztec-web/public/index.html

You can adapt this code, with window.NODE_ENV='RINKEBY' in your own example.

How to Work on This Task

Fork this repo and clone it locally onto your computer.

https://github.com/invisible-college/democracy#get-the-source-code-to-experiment-and-run-tests

Host your work-in-progress on Netlify and post that link in this thread as you work for feedback, help, and collaboration. For Netlify you may find the following helpful:

Build commands

lerna bootstrap
cd packages/zk-transfer-web
react-scripts build
Build directory

packages/zk-transfer-web
Create a pull request against your forked repo (master branch) onto this repo (master branch), and commit and push your source code there as you work.

When it's ready, I'll merge from that PR onto the master branch and deploy your code to the Democracy.js Netlify instance. Please ask questions, and looking forward to working with you on this project.

Currently running node js/compile.js compiles all files from scratch. We can check file modification timestamps, or do some kind of immutable / verifiable builds with bazel, to speed up compilation.