colonyportal / colonyportal

A frontend for Colony - with GitHub integration

Colony Portal

A new frontend for colony that has GitHub integration.

Setup

$ npm install  

Running

$ npm start  

Running W/ Test Colony

$ npm run create:testColony  
$ npm start  

Build

$ npm run build  

Prettier

$ npm run prettier  

Generate test colony

$ npm run create:testColony  

Submission

• We have hardcoded the test colony's owner and repo on the frontend for the MVP. In the future, this information will be retrieved from a smart contract

colonyportal's Issues

Make it possible to submit work for task

Make it possible to submit completed work for a task.
submitTaskDeliverable.send({ taskId, deliverableHash }, options), i.e. the output of the work performed for task.

Vertical Slice Checklist

• Example Colony
• Login To Colony
• (MVP) See Basics of the Colony [domains, users + rep?, tasks, something]
• (MVP) See Basics of a Domain [task list]
• GitHub Auth W/ Domain's Repo
• Select 'Import Issues From GitHub'
• (MVP) See / Filter Issues From GitHub [select repo at least]
• Select A Issue To Convert To Colony Task
• Generate Tasks From Issues
  • Documented here #12
• Modify Task & Add It
• IPFS Content
• The rest of the task life cycle in colony....
  • Documented here #12

Display submitted work on the task list

Show the work that has been submitted for tasks on the task list.

Create Local Test Colony From Config Files

Support creating a local colony for developing against from a config file, instead of scripting against the colony API.

I think the part of this that offers the most value is to be able to serialize and deserialze a colony, blockchain -> json file.

That way, in the future if we encounter errors with specific colony configurations, we can say "serializecolony.exe 0xsdlksdfelkj34l234lk234 > colony.config". That way if we want to build the dapp around this specific colony configuration for testing reasons, we can just spawn this up locally and test against it.

Not sure if this is needed when we can always just reference the live colony, or when we can script up a test colony that looks like the one we're seeing using the colonyJS API.

UI Flow Diagram V1

From @JordanEllis6809 on June 11, 2018 4:47

• Colony Login First
• Domain Selection
• GitHub Login
• Task Selection + Import Data
• Modify Task List Before Upload
• Upload To Colony
• ...

Copied from original issue: JingyuZ/GithubColony#10

Make it possible to finalize tasks

Make it possible to finalize tasks.
finalizeTask.send({ taskId }, options): finalize a task so that no further changes are allowed to task

Create the submission document

You can use submissions/exampleProject.md as a template if you like.

UI: GitHub Task Importing

Github Task Importer

migrated from JingyuZ/GithubColony#11 (some how script doesn't work for this one)

Allow the user, once logged in, to select a list of issues from GitHub that they want to bring into colony.

This task is dependent on the generic task creation functionality.

Being able to finish a task and claim payout

I read white paper really quick trying to find the corresponding content, but I think reading colony JS API is better to understand the flow.

Here are the steps I think we need to include to finish a task:

1. getTaskPayout.call({ taskId, role, token }) can give us how many tokens will be paid to corresponding roles (evaluator, manager, worker). I'm thinking we can show this in task details/task index page.
2. finalizeTask.send({ taskId }, options): finalize a task so that no further changes are allowed to task
3. submitTaskDeliverable.send({ taskId, deliverableHash }, options), i.e. the output of the work performed for task
4. claimPayout.send({ taskId, role, token }, options):
   Claims the payout for token denomination for work completed in task taskId by contributor with role role. This step has to happen after the task is finalized.

Bulk Task Upload

From @JordanEllis6809 on June 11, 2018 5:0

• Support bulk task uploading through a single transaction..

Copied from original issue: JingyuZ/GithubColony#14

Add Open Source License

Users should be able to log out

From @JingyuZ on June 15, 2018 0:9

We added log in button to web app, but users should be able to log out.

Copied from original issue: JingyuZ/GithubColony#21

Make it possible to set rewards on an issue, for worker and evaluator

Make it possible to set rewards on an issue, for worker and evaluator.

This is multisig, so (if I understand this correctly) we need one person to sign it then send it to another person that also will sign it and submit it to the colony. We can probably use the Whisper protocol for this, or can we find some workaround for the MVP?

• Click set "manage task" button on a task
• Create "Manage task" UI
• Create a MultisigOperation for set payout
• Sign the operation
• Identify required signees
• Export the operation for the other party
• Publish to Whisper
• Restore the operation for the other party
• Have some UI for seeing incoming operations that need to be signed by the user
• Sign the operation (the other party)
• Send the transaction

References
setTaskWorkerPayout
setTaskEvaluatorPayout
docs-multisignature-transactions
whisper-overview

Submit the project

3. Fork and PR

When you feel ready to submit, create a new fork of the colonyHackathon repo, and add your project as a markdown file inside colonyHackathon/submissions/.

You can use submissions/exampleProject.md as a template if you like.

Be sure that your project's folder links to the repo you've been working in, and contains any other supporting materials that you want evaluated by judges (such as links to a pitch deck or demo video).

Once ready, submit via a new pull request.

Opening a Pull Request establishes your project as an "official" submission

You can open a PR before the submission deadline and continue to work, but all materials must be finalized before the end of the hackathon. Any commits to your project submission after the deadline will not be considered.

We'd also recommend referencing the issue you created in step 1 using keywords in your PR.

Submit your pull request before the submission deadline: June 24, 23:59 GMT

Improved Wallet Handling

From @JordanEllis6809 on June 13, 2018 14:49

For wallets there are a few different use cases we should support, as detailed here:
https://docs.ethers.io/ethers.js/html/api-wallet.html#creating-instances

We want to make sure we can support wallets that are cold wallets, wallets from other programs like Geth, and wallets from extensions like MetaMask.

Allow the user to choose what type of wallet they want to use with the dApp through a settings menu or something like that.

Copied from original issue: JingyuZ/GithubColony#16

Task Creation

From @JordanEllis6809 on June 11, 2018 5:0

• Create a generic interface for a "task".
• Display a list of a domain currently has.
• Allow the user to create a task and add it to the colony.

Copied from original issue: JingyuZ/GithubColony#13

Make it possible to claim payouts

Make it possible to claim payouts from a complete task.

claimPayout.send({ taskId, role, token }, options) :
Claims the payout for token denomination for work completed in task taskId by contributor with role role. This step has to happen after the task is finalized.

Retrieve task data from IPFS

When we retrieve issues, get the corresponding task data from IPFS via the specification hash. Display the task with the information from IPFS.

Support Faux Colony Data W/O Running Local Blockchain

!Precondition! Measure the performance impact of ganache-cli running on your machine. Is it worth stubbing out?

Support faux colony data w/o running a local blockchain. This would allow more light weight front-end development and faster iteration.

This can be accomplished by:

• Defining a colony in a config file. Let's call this colony1.config.
• Support creating that colony1.config on a local blockchain using colonyJS, so that the UI can pull from the local blockchain and represent that data in the UI.
• Support stubbing out the local blockchain, and just giving the UI the data that's already in the config file.

// run the UI using the colony1.config file
'npm run start:withoutChain colony1.config'

// create a local blockchain & run the UI against it
'npm run create:testColony colony1.config'
'npm start'

Set worker for a task

Make it possible to set the worker for a task.

Improved Provider Handling

From @JordanEllis6809 on June 13, 2018 14:59

Currently we're using a localhost provider. We should also be able to support MetaMask as a provider. Allowing the user to choose through a settings menu would be nice.

Others would be nice (like public full nodes, or a local node), but for the hackathon we could require MetaMask.

Here's an example implementation:
https://dev.to/yukkurisinai/using-metamask-as-web3js-provider-2do4

Copied from original issue: JingyuZ/GithubColony#18

Polish Github login page

This is the Github login page to be redirected into Colony Portal.

UI: Domain Task List (Domain Overview)

Display task rewards on the task list

Add task payout to the task list.

getTaskPayout.call({ taskId, role, token }) can give us how many tokens will be paid to corresponding roles (evaluator, manager, worker). I'm thinking we can show this in task details/task index page.

Make it possible for the task creator to edit the task

The task creator (manager) should be able to edit a task until it is finalized.

Display claimable payouts

Show payouts that a given user can claim. More thought on how to represent this in the UI is needed.

Research Task <-> Issue Differences (Colony to GitHub)

Document Task & Issue specific properties for Colony & GitHub respectively.

Generate An Example Colony For Testing

Auto-Deploy to IPFS

From @JordanEllis6809 on June 11, 2018 4:38

• Node app that automatically deploys and hosts our web page's built assets on IPFS.
• Node app also acts as a server, redirecting to the latest build of the app on IPFS + supports getting the IPFS hash for the root asset.
• Docker container that wraps the IPFS deploy/host app & the web page's built assets.
• VM that runs the docker container + automatically updates it.
• Docker cloud looks at this repo and automatically builds the container.
• Assets on IPFS resolve...
• The domain forwards to the server which forwards to the latest IPFS URL.

Copied from original issue: JingyuZ/GithubColony#9

Support naming skills, colonies, domains, user addresses etc

In the colony contracts, they represent entities through integers. We should figure out how we want to support adding names to these entities. A contract? A database?

UI: Dashboard (Header & Nav)

Import task from Github with detail preview

Import Task Window

This window displays all the issues you can import into the Colony Portal from Github. You can see further details, arrange by criteria and search for issues.

Improved Contract Loader Handling

From @JordanEllis6809 on June 13, 2018 14:52

Trufflepig is only for development purposes. We should try to keep this dependency out of our product code.

here's how I understand it:

• A contract deployed to the blockchain has two things, an address and an ABI (Application Binary Interface).
• The wallet needs the ABI in order to know how to form the transaction for specific methods (member functions) it wants to call on the contract.
• The loader's job is to return that ABI.
• TrufflePig is a handy loader for local development. It assumes all contracts have a unique name, so you can ask for an ABI by saying "getContract('contractName')".
• For production, when the contracts are on the network (mainnet or testnet), the loader could ask etherscan.io for the ABI of a specific public contract address.

Here's more information:
https://docs.colony.io/colonyjs/docs-loaders/

We should create a wrapper class that uses TrufflePig for development, and uses known contract address + etherscan for production. Storing the contract addresses would have to happen during a "publish"ing step to a network of choice (testnet or mainnet). The addresses could be stored and read from a config file or something like that.

Copied from original issue: JingyuZ/GithubColony#17

Set evaluator for a task

Make it possible to set the evaluator of a task.

Display that a task is finalized on the task list

Make the tasks that are finalized in the task list.

UI: Creating Task

Move interactions with Colony.js (in colony.ts) out of actions folder

From @JingyuZ on June 14, 2018 7:7

The actions, reducers, stores should be designated for redux related actions, reducers, i.e dispatch to update state and actually update state. For example setColonyAddress is only related to updating address state in component, but fetchDomainCount is a network request action.

We need to create a new folder like api or something to deal with network requests out of SPA state changes. But it's just my preference and I'm open to discussions.

Copied from original issue: JingyuZ/GithubColony#19

Impliment the design

Implement the design Patrick has come up with.

• Login

• Dashboard (Colony Basics, Tasks Per Domain)
  

• GitHub Task Importing
  

• Creating Task
  

Expose 'addSkill' in ColonyJS

Currently the skillCount only goes up by 1 if you create a colony or meta colony, and the colonyJS API doesn't expose the ColonyNetwork.sol function "addSkill".