67p / kredits-web Goto Github PK

Kredits Web UI

JavaScript 62.79% HTML 2.38% Handlebars 24.02% SCSS 10.81%

kosmos kredits emberjs rsk

kredits-web's Introduction

Kredits Web

This is the main Web UI for Kosmos Kredits. It provides an overview of contributors and contributions, as well as the community's budget, expenses, and reimbursements.

It is an unhosted Web app, fetching all data from Rootstock and IPFS, and caching it in the browser's local database. As such, you can run the app directly from the /release directory on any Web server that can serve static assets.

Development

Prerequisites

You will need the following things properly installed on your computer.

Git
Node.js (with npm)
Ember CLI
Google Chrome (only for running tests)

Installation

git clone [email protected]:67P/kredits-web.git this repository
cd kredits-web
npm install

Building/running for development

npm start - by default Kredits Web connects to the Rootstock testnet network
Visit the app at http://localhost:4200.
Visit the tests at http://localhost:4200/tests.

See working with locally deployed contracts for details on how to develop with locally deployed contracts.

Code generators

Make use of the many generators for code, try ember help generate for more details

Running tests

ember test
ember test --server

Linting

npm run lint:hbs
npm run lint:js
npm run lint:js -- --fix

Building

ember build (development)
npm run build (production)

Deploying

(You need collaborator permissions on the 5apps Deploy project.)

npm run deploy

Working with locally deployed contracts

The smart contracts and their JavaScript wrapper library are developed in the kredits-contracts repo/package.

You can run kredits-web on your machine, against a local, simulated blockchain. kredits-contracts contains all the tools to start and set up such a simulated network, as well as to deploy the Kredits smart contracts to it.

These are the basic steps to get up and running:

1. IPFS

Run a local IPFS deamon.

Make sure CORS headers are configured. See IPFS for more info.
ipfs daemon

2. kredits-contracts

Run a local devchain with test data. (See kredits-contracts README for details.

Clone kredits-contracts
npm install
npm run devchain - runs a local development chain
npm run bootstrap - deploys all contracts and seeds test data
npm link - makes the kredits-contracts module linkable as kredits-contracts on your machine

3. kredits-web

With IPFS and the local devchain running, you can now link the contracts and start the Ember app:

npm link kredits-contracts - links the local kredits-contracts package (has to be done again after every npm install)
npm run start:local - runs the Ember app with WEB3_PROVIDER_URL=http://localhost:8545 set

4. Metamask network

If you want to interact with the local contracts via a Web3 wallet, switch the network to a "Custom RPC" one, with the RPC URL http://localhost:8545.

IPFS

If you haven't configured your IPFS node for CORS yet, you can do so by running the following commands:

ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["localhost:4200"]'
ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods '["PUT", "GET", "POST"]'
ipfs config --json API.HTTPHeaders.Access-Control-Allow-Credentials '["true"]'
ipfs config Addresses.Gateway /ip4/127.0.0.1/tcp/8080

kredits-web's People

Contributors

Stargazers

Watchers

Forkers

csu-anzai csu-xiao-an

kredits-web's Issues

Use external/self-sovereign identity

Can we use uport for contributor identity management?
Do we then still need metamask - is it an alternative?
https://developer.uport.me/

Support new metamask privacy mode

Seems the metamask privacy mode has become default. Which means we have to request access to the metamask accounts first using provider.enable()

"ATTENTION: In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order to view and use accounts. Please see https://medium.com/metamask/https-medium-com-metamask-breaking-change-injecting-web3-7722797916a8 for complete information and up-to-date example code"

npm link kredits-contracts fails

For local development I try to link the local kredits-contracts npm package.

after running npm link kredits-contracts starting the ember app fails with: Couldn't find preset "es2015" relative to directory "/home/bumi/src/kredits/truffle-kredits/lib/utils" while parsing file: /home/bumi/src/kredits/truffle-kredits/lib/utils/preflight.js

Here is the complete log:

kredits/kredits-web@master  » npm --version
5.6.0
kredits/kredits-web@master  » node --version
v8.11.3
kredits/kredits-web@master  » rm -rf node_modules 
kredits/kredits-web@master  » npm install
[...]
added 2375 packages in 39.877s
npm start  # works!
Build successful (37679ms) – Serving on http://localhost:4200/

# now linking kredits-contracts

npm link kredits-contracts
/home/bumi/src/kredits/kredits-web/node_modules/kredits-contracts -> /home/bumi/.node_modules/lib/node_modules/kredits-contracts -> /home/bumi/src/kredits/truffle-kredits

kredits/kredits-web@master  » npm start

> [email protected] start /home/bumi/src/kredits/kredits-web
> ember serve

Could not start watchman
Visit https://ember-cli.com/user-guide/#watchman for more info.
Build Error (CoreObject)

Couldn't find preset "es2015" relative to directory "/home/bumi/src/kredits/truffle-kredits/lib/utils" while parsing file: /home/bumi/src/kredits/truffle-kredits/lib/utils/preflight.js


Stack Trace and Error Report: /tmp/error.dump.d7a4d0f775a20c7aefb4990be84e74fd.log

tail -n 100 /tmp/error.dump.d7a4d0f775a20c7aefb4990be84e74fd.log
[...]

ERROR Summary:

  - broccoliBuilderErrorStack: Error: Couldn't find preset "es2015" relative to directory "/home/bumi/src/kredits/truffle-kredits/lib/utils" while parsing file: /home/bumi/src/kredits/truffle-kredits/lib/utils/preflight.js
    at /home/bumi/src/kredits/kredits-web/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/home/bumi/src/kredits/kredits-web/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/home/bumi/src/kredits/kredits-web/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/home/bumi/src/kredits/kredits-web/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/home/bumi/src/kredits/kredits-web/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/home/bumi/src/kredits/kredits-web/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/home/bumi/src/kredits/kredits-web/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/home/bumi/src/kredits/kredits-web/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at Babelify._flush (/home/bumi/src/kredits/kredits-web/node_modules/babelify/index.js:27:24)
  - codeFrame: Couldn't find preset "es2015" relative to directory "/home/bumi/src/kredits/truffle-kredits/lib/utils" while parsing file: /home/bumi/src/kredits/truffle-kredits/lib/utils/preflight.js
  - errorMessage: Build Canceled: Broccoli Builder ran into an error with `CoreObject` plugin. 💥
Couldn't find preset "es2015" relative to directory "/home/bumi/src/kredits/truffle-kredits/lib/utils" while parsing file: /home/bumi/src/kredits/truffle-kredits/lib/utils/preflight.js
  - errorType: Build Error
  - location:
    - column: [undefined]
    - file: [undefined]
    - line: [undefined]
    - treeDir: [undefined]
  - message: Build Canceled: Broccoli Builder ran into an error with `CoreObject` plugin. 💥
Couldn't find preset "es2015" relative to directory "/home/bumi/src/kredits/truffle-kredits/lib/utils" while parsing file: /home/bumi/src/kredits/truffle-kredits/lib/utils/preflight.js
  - name: Error
  - nodeAnnotation: ember-browserify
  - nodeName: CoreObject
  - originalErrorMessage: Couldn't find preset "es2015" relative to directory "/home/bumi/src/kredits/truffle-kredits/lib/utils" while parsing file: /home/bumi/src/kredits/truffle-kredits/lib/utils/preflight.js
  - stack: Error: Couldn't find preset "es2015" relative to directory "/home/bumi/src/kredits/truffle-kredits/lib/utils" while parsing file: /home/bumi/src/kredits/truffle-kredits/lib/utils/preflight.js
    at /home/bumi/src/kredits/kredits-web/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/home/bumi/src/kredits/kredits-web/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/home/bumi/src/kredits/kredits-web/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/home/bumi/src/kredits/kredits-web/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/home/bumi/src/kredits/kredits-web/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/home/bumi/src/kredits/kredits-web/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/home/bumi/src/kredits/kredits-web/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/home/bumi/src/kredits/kredits-web/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at Babelify._flush (/home/bumi/src/kredits/kredits-web/node_modules/babelify/index.js:27:24)

Use contribution date/time from IPFS doc in UI

Contributions should be ordered by their date/time instead of ID. And the date/time should be visible somehow (perhaps day markers between items or something).

Update Ember

We are currently using 3.1.0, at the moment the latest stable release is 3.7.0.

Veto unconfirmed contributions

Add form for adding new proposals

Fields should be able to be prefilled using query params.

Edit contributor profile

Need to be able to add sites, change address, etc.

Solution for visualizing pending data

There are many options for this, and it needs to be solved on multiple levels.

Basic requirements:

Keep/read pending status and tx info the same way for all models/records
Disable UI interactions on pending objects

Sorting is a bit broken

Even though it seemed to be working correctly when introduced, now it doesn't look correct anymore with the production data.

Error when selecting "Special" in manual contribution form

When choosing "Special" for the contribution kind, it shows "Community" as selected instead. And when trying to submit the form, it shows this error in the console:

code: 1
dataPath: "/kind"
message: "No enum match for: "special""
params:
value: ""special""
schemaPath: "/properties/kind/type"
subErrors: null

Proposal details

After #62 landed in master we should allow to expand the proposal-list/item like we do it for the contributors to get more context/details on the proposal.

Add unconfirmed kredits to toplist amounts

Ideally with a switch to hide unconfirmed kredits.

Use port 80/443 for IPFS

Currently we use port 5444 to connect to the IPFS node on ipfs.kosmos.org. Certain public wifis block such ports and thus kredits-web can not be loaded.

Can we connect to the IPFS node on port 80/443?

Move "add contributor" to seperate page/route

Doesn't need to be visible on the main page for everyone all the time.

@fsmanuel Maybe something quick for you to resolve?

Issue kredits to collaborator

Propose to issue x kredits and send to collab

[amount] [name][^] [url (reason)]

Result: proposal is open

More cleanup before we extract the kredits module

Rename our Kredits class to Organization (at least in the service set it as organization and an alias org)
Rename contributor.address to contributor.account
Rename proposal.creatorAddress to proposal.creator or proposal.creatorAccount
Use RSVP.map if we can
Resolve TODOs in kredits module and service

Load contributions from Contribution contract/storage

~~As we'll lose the proposals themselves every time we update the Kredits contract, we need to show recent/past contributions from the Token contract data instead.~~

@bumi I'm not quite sure how we can implement this. Could you provide a rough outline of we'd have to change?

Update: we're in the process of implementing ERC721 tokens for contributions, so all data will move to a Contribution contract/storage. See 67P/kredits-contracts#52

Update Ember to latest version

Contributor not showing up in toplist

Currently I am not showing up in the contributor list though I have 7500 kredits earned (and a 298 kredits balance).

I currently do not have any unconfirmed contributions.
This line makes me wonder if contributors without unconfirmed contributions get lost: https://github.com/67P/kredits-web/blob/master/app/services/kredits.js#L49

Support multiple contributions in one proposal

I think it will be useful to be able to bundle multiple contributions into one Kredits proposal in the future, in order to keep noise and voting efforts low.

My idea would be to just use the existing schema, but add an array of those objects to the IPFS document. So for Kredits-Web it's mostly implementing the rendering of those proposals/issuances.

Adjust code to contract refactoring changes

No manually created contributor IDs (currently UUID) anymore. ID/UID has been removed, contributor.id can be used from the contract data instead.
Name has been removed from contributor object in contract, all profile data lives in IPFS now.
ipfsHash has been renamed to profileHash
Finding a contributor has to be done by ID instead of address now
Proposal URL has been removed in favor of URL in IPFS contribution doc

If user brings blockchain, make sure it's the right one

Currently, with e.g. Metamask installed, and e.g. mainnet selected, the app will throw an exception about not being able to find the contract, but not tell the user anything about it. In that case, the loading indicator will just be visible indefinitely.

The app should catch that error and notify the user to make sure they have the right chain selected.

Highlighting of own username is broken

The logged in user doesn't get highlighted in the leaderboard list anymore.

Show contributor toplist from earned kredits instead of cash wallet balances

Show details for proposals

Would be nice to see what the proposal is for (e.g. the URL).

Update ethers.js to latest 4.0 version

Ethers.js is now in version 4.0 and has some (minor) breaking changes, see migration guide

I tried to update ethers.js to the latest 4.0.0 version but then running kredits-web fails with the following error:
does anyone know what that could mean? is it a problem within the ethers.js package?

kredits/kredits-web@master  » npm run start:local
npm WARN lifecycle The node binary used for scripts is /home/bumi/.nodenv/shims/node but npm is using /usr/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> [email protected] start:local /home/bumi/src/kredits/kredits-web
> NETWORK_ID=100 WEB3_PROVIDER_URL=http://localhost:7545 ember s

WARNING: Node v10.10.0 is not tested against Ember CLI on your platform. We recommend that you use the most-recent "Active LTS" version of Node.js. See https://git.io/v7S5n for details.
Could not start watchman
Visit https://ember-cli.com/user-guide/#watchman for more info.
[BABEL] Note: The code generator has deoptimised the styling of "/home/bumi/src/kredits/kredits-web/node_modules/ethers/dist/ethers.js" as it exceeds the max of "500KB".
Build Error (CoreObject)

Cannot find module './utils/properties' from '/home/bumi/src/kredits/kredits-web/node_modules/ethers/dist'


Stack Trace and Error Report: /tmp/error.dump.cd821938fea1a848b3ce2bb5f74a4cef.log
[BABEL] Note: The code generator has deoptimised the styling of "/home/bumi/src/kredits/kredits-web/node_modules/lodash/lodash.js" as it exceeds the max of "500KB".
cleaning up...

in the log:

ERROR Summary:

  - broccoliBuilderErrorStack: Error: Cannot find module './utils/properties' from '/home/bumi/src/kredits/kredits-web/node_modules/ethers/dist'
    at /home/bumi/src/kredits/kredits-web/node_modules/ember-browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:55:21
    at load (/home/bumi/src/kredits/kredits-web/node_modules/ember-browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
    at onex (/home/bumi/src/kredits/kredits-web/node_modules/ember-browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
    at /home/bumi/src/kredits/kredits-web/node_modules/ember-browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:154:21)
  - codeFrame: Cannot find module './utils/properties' from '/home/bumi/src/kredits/kredits-web/node_modules/ethers/dist'
  - errorMessage: Build Canceled: Broccoli Builder ran into an error with `CoreObject` plugin. 💥
Cannot find module './utils/properties' from '/home/bumi/src/kredits/kredits-web/node_modules/ethers/dist'

indeed there is no ./utils/properties in node_modules/ethers/dist

Errors when opening

When opening https://kredits.kosmos.org with Metamask running, I get the following errors in the console:

Disable/hide adding proposals link/form from people without wallet

Wallet unlock check not working anymore

In master, checking for an unlocked metamask wallet is currently broken: when you have Metamask enabled, and are on Kovan, but it's still locked, the app will just break with an exception saying it can't find the Contributors contract address in the registry.

Handle locked metamask

Until metamask is unlocked we can not access the user's account and make transactions.
We somehow need to handle this.
One idea would be to add an alert message to notify the user to unlock metamask.

Add collaborator

Add new collaborator account to smart contract which can hold a Kredit balance

[id (github uid for now)] [name] [address (optional)]

Later (in IPFS): [github username] [wiki username] [gitlab username]

Result: user added

Pre-fill account address in sign-up form (when possible)

Even if there's an open wallet, it currently doesn't suggest the user's account address.

Sometimes the wrong number of votes is shown

When voting for a proposal and it moves to the closed proposals section, I often see the number of votes to be "3/2 votes". After reloading the browser, it's correct again with "2/2 votes".

Right now, there also is one open proposal that shows "2/2 votes":

Prefill forms using URL query parameters

It should be possible to prefill form data by query parameters.
This allows us to dynamically make links to quickly create proposals/contributors.

We already had this feature for proposals but needs be brought back after the refactoring.

Improve README

Needs description of app, screenshot, etc.

List proposals

View open proposals from smart contract

* Proposal 1: name, amount, reason -- [+1]
* Proposal 2: name, amount, reason -- [+1]

Change messaging if metamask not installed

Now: "Loading data from Ethereum..."
Expected: instructions how to proceed

Create contributions manually

Fix race condition with user-provided web3

There's currently a race condition where sometimes (for me ~50% or more) the user-provided web3 is loaded on window, after it has been checked for in the app. Which results in the app just using its own and pretending the user doesn't have a wallet.