feat(dispute): implement dispute-detail-page

* feat(components): implement Anchored List for dispute page

* feat(components): smooth-scroll and stacking in Anchored List

* feat(dispute): implement dispute/appeal details

* feat(dispute): implement evidence

* feat(dispute): implement ruling

* feat(ruling): hover over blocks

* docs: fix JSDoc tags

* refactor: clean up some comments

* feat(anchored-list): extend PureComponent

* ci(scripts): add kleros-js-scripts

* fix(dependencies): update kleros-js-scripts

* feat(env): new arbitrator

* feat(env): another arbitrator

* feat(arbitrator): activate PNK action and saga

* feat(arbitrator): activate PNK

* fix(dependencies): update broken version of kleros-api

* feat(disputes): show list of disputes and navigate to details page

* feat(dispute): pull in live data to dispute detail page

.env

@@ -1,7 +1,7 @@
 # Development
 REACT_APP_DEV_ETHEREUM_PROVIDER=http://localhost:8545
 REACT_APP_DEV_STORE_PROVIDER=https://kleros.in
-REACT_APP_DEV_ARBITRATOR_ADDRESS=0xA2D6CC4eCec4B1189F61dF4dD0a4FE06dfad0dEc
+REACT_APP_DEV_ARBITRATOR_ADDRESS=0x0efb8f034c82d37cc2fc37a5411ba280753c4545
 
 # Production
 REACT_APP_PROD_ETHEREUM_PROVIDER=<provider>

.gitignore

@@ -1,7 +1,5 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
-# Environment Variables
-
 # Dependencies
 /node_modules/
 

.storybook/config.js

@@ -1,22 +1,24 @@
-import React from 'react'
-import { configure, addDecorator } from '@storybook/react'
+import { addDecorator, configure } from '@storybook/react'
 import { host } from 'storybook-host'
+import React from 'react'
 import { combineReducers, applyMiddleware, createStore } from 'redux'
 import { Provider } from 'react-redux'
-import ReduxToastr, { reducer as toastr } from 'react-redux-toastr'
 import { MemoryRouter } from 'react-router-dom'
+import ReduxToastr, { reducer as toastr } from 'react-redux-toastr'
 
 import GlobalComponents from '../src/bootstrap/global-components'
 
 import '../src/bootstrap/app.css'
 
+// Storybook Host
 addDecorator(
   host({
     title: 'Kleros UI-Kit',
     align: 'center middle'
   })
 )
 
+// Integration Wrapper
 const store = createStore(
   combineReducers({
     toastr
@@ -36,4 +38,5 @@ addDecorator(story => (
   </Provider>
 ))
 
+// Configure
 configure(() => require('../stories/index.js'), module)

.storybook/webpack.config.js

@@ -4,7 +4,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.s?css$/,
+        test: /\.css$/,
         use: ['style-loader', 'css-loader']
       },
       {

CHANGELOG.md

@@ -3,4 +3,5 @@
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
 <a name="0.1.0"></a>
+
 # 0.1.0 (2018-01-21)

README.md

@@ -3,15 +3,15 @@
 </p>
 
 <p align="center">
-  <a href="https://standardjs.com"><img src="https://img.shields.io/badge/code_style-standard-brightgreen.svg" alt="JavaScript Style Guide"></a>
   <a href="https://travis-ci.org/kleros/kleros-juror-front"><img src="https://travis-ci.org/kleros/kleros-juror-front.svg?branch=master" alt="Build Status"></a>
-  <a href="https://david-dm.org/kleros/kleros-dapp-boilerplate"><img src="https://david-dm.org/kleros/kleros-juror-front.svg" alt="Dependencies"></a>
-  <a href="https://david-dm.org/kleros/kleros-dapp-boilerplate?type=dev"><img src="https://david-dm.org/kleros/kleros-dapp-boilerplate/dev-status.svg" alt="Dev Dependencies"></a>
-  <a href="https://github.com/facebook/jest"><img src="https://img.shields.io/badge/tested_with-jest-99424f.svg" alt="Tested with Jest"></a>
   <a href="https://coveralls.io/github/kleros/kleros-juror-front?branch=master"><img src="https://coveralls.io/repos/github/kleros/kleros-juror-front/badge.svg?branch=master" alt="Coverage Status"></a>
+  <a href="https://david-dm.org/kleros/kleros-juror-front"><img src="https://david-dm.org/kleros/kleros-juror-front.svg" alt="Dependencies"></a>
+  <a href="https://david-dm.org/kleros/kleros-juror-front?type=dev"><img src="https://david-dm.org/kleros/kleros-juror-front/dev-status.svg" alt="Dev Dependencies"></a>
+  <a href="https://github.com/facebook/jest"><img src="https://img.shields.io/badge/tested_with-jest-99424f.svg" alt="Tested with Jest"></a>
+  <a href="https://standardjs.com"><img src="https://img.shields.io/badge/code_style-standard-brightgreen.svg" alt="JavaScript Style Guide"></a>
+  <a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/styled_with-prettier-ff69b4.svg" alt="Styled with Prettier"></a>
   <a href="https://conventionalcommits.org"><img src="https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg" alt="Conventional Commits"></a>
   <a href="http://commitizen.github.io/cz-cli/"><img src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg" alt="Commitizen Friendly"></a>
-  <a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/styled_with-prettier-ff69b4.svg" alt="Styled with Prettier"></a>
 </p>
 
 ## Get Started
@@ -22,14 +22,14 @@
 
 ## Other Scripts
 
-* `yarn run prettify` - Applies prettier to the entire project.
-* `yarn run lint` - Lints the entire project.
-* `yarn run lint:fix` - Fixes fixable linting errors.
-* `yarn test` - Runs the jest test suites + storyshots.
-* `yarn run storybook` - Starts the storybook.
-* `yarn run cz` - Runs commitizen.
-* `yarn run build` - Creates a production build.
-* `yarn run build:analyze` - Analyzes the production build using source-map-explorer.
+* `yarn run prettify` - Apply prettier to the entire project.
+* `yarn run lint` - Lint the entire project.
+* `yarn run lint --fix` - Fix fixable linting errors.
+* `yarn test` - Run the jest test suites + storyshots.
+* `yarn run storybook` - Start the storybook.
+* `yarn run cz` - Run commitizen.
+* `yarn run build` - Create a production build.
+* `yarn run build:analyze` - Analyze the production build using source-map-explorer.
 
 ## Testing
 

package.json

@@ -7,39 +7,26 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "prettify":
-      "prettier --config ./.prettierrc --write \"./*.{js,json}\" \"./{src,.storybook,stories}/**/*.{js,json}\"",
-    "lint":
-      "eslint \"./*.js\" \"./{src,.storybook,stories}/**/*.js\" && stylelint \"./src/**/*.scss\" --syntax scss",
-    "lint:fix":
-      "eslint --fix \"./*.js\" \"./{src,.storybook,stories}/**/*.js\" && stylelint --fix \"./src/**/*.scss\" --syntax scss",
+    "prettify": "kleros-js-scripts prettify",
+    "lint": "kleros-js-scripts lint",
     "test": "react-scripts test --env=jsdom --coverage",
     "test:coveralls": "coveralls < ./coverage/lcov.info",
-    "commitmsg": "commitlint -e $GIT_PARAMS",
-    "precommit": "lint-staged && yarn run lint && yarn test",
-    "cz": "git-cz",
+    "precommit": "kleros-js-scripts precommit",
+    "commitmsg": "kleros-js-scripts commitmsg",
+    "cz": "kleros-js-scripts cz",
+    "start:scss": "yarn run build:scss && yarn run build:scss --watch",
     "start:js": "react-scripts start",
-    "start:scss":
-      "yarn run build:scss && node-sass-chokidar ./src -o ./src --watch",
     "start:storybook": "start-storybook -p 9001 -c .storybook",
-    "build:js": "react-scripts build",
+    "storybook": "npm-run-all -p start:scss start:storybook",
     "build:scss": "node-sass-chokidar ./src -o ./src",
+    "build:js": "react-scripts build",
     "start": "npm-run-all -p start:scss start:js",
     "build": "npm-run-all build:scss build:js",
-    "build:analyze": "source-map-explorer build/static/js/main.*",
-    "storybook": "npm-run-all -p start:scss start:storybook"
-  },
-  "lint-staged": {
-    "*.{js,json}": ["prettier --config ./.prettierrc --write", "git add"]
+    "build:analyze": "source-map-explorer build/static/js/main.*"
   },
   "commitlint": {
     "extends": ["@commitlint/config-conventional"]
   },
-  "config": {
-    "commitizen": {
-      "path": "@commitlint/prompt"
-    }
-  },
   "jest": {
     "collectCoverageFrom": [
       "src/**/*.js",
@@ -53,7 +40,7 @@
     "ethjs": "^0.3.3",
     "ethjs-unit": "^0.1.6",
     "history": "^4.7.2",
-    "kleros-api": "^0.0.49",
+    "kleros-api": "^0.0.55",
     "normalize.css": "^7.0.0",
     "react": "^16.2.0",
     "react-addons-css-transition-group": "^15.6.2",
@@ -70,53 +57,35 @@
     "react-tooltip": "^3.4.0",
     "redux": "^3.7.2",
     "redux-form": "^7.2.1",
-    "redux-saga": "^0.16.0"
+    "redux-saga": "^0.16.0",
+    "zenscroll": "^4.0.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^6.0.2",
-    "@commitlint/config-conventional": "^6.0.2",
-    "@commitlint/prompt": "^6.0.2",
     "@dump247/storybook-state": "^1.2.1",
     "@storybook/addon-actions": "^3.3.10",
     "@storybook/addon-storyshots": "^3.3.10",
     "@storybook/addons": "^3.3.10",
     "@storybook/react": "^3.3.10",
     "@storybook/storybook-deployer": "^2.2.0",
-    "commitizen": "^2.9.6",
     "coveralls": "^3.0.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "esdoc": "^1.0.4",
     "esdoc-ecmascript-proposal-plugin": "^1.0.0",
     "esdoc-standard-plugin": "^1.0.0",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-config-standard": "^11.0.0-beta.0",
-    "eslint-config-standard-jsx": "^4.0.2",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-node": "^5.2.1",
-    "eslint-plugin-prettier": "^2.5.0",
-    "eslint-plugin-promise": "^3.6.0",
-    "eslint-plugin-react": "^7.5.1",
-    "eslint-plugin-standard": "^3.0.1",
-    "eslint-plugin-unicorn": "^3.0.1",
+    "eslint-plugin-react": "^7.6.1",
     "ethereumjs-testrpc": "^6.0.3",
     "husky": "^0.14.3",
     "jest-enzyme": "^4.0.2",
-    "lint-staged": "^6.0.1",
+    "kleros-js-scripts": "^0.3.2",
     "node-sass-chokidar": "^0.0.3",
     "npm-run-all": "^4.1.2",
-    "prettier": "^1.10.2",
     "prop-types": "^15.6.0",
     "react-test-renderer": "^16.2.0",
     "redux-immutable-state-invariant": "^2.1.0",
     "redux-unhandled-action": "^1.3.0",
     "standard-version": "^4.3.0",
     "storybook-host": "^4.1.5",
-    "stylelint": "^8.4.0",
-    "stylelint-config-standard": "^18.0.0",
-    "stylelint-order": "^0.8.0",
-    "stylelint-scss": "^2.2.0",
-    "stylelint-selector-bem-pattern": "^2.0.0",
     "timezone-mock": "^0.0.7"
   }
 }

src/actions/arbitrator.js

@@ -5,7 +5,8 @@ import { createActions } from '../utils/redux'
 // PNK Balance
 export const PNKBalance = {
   ...createActions('$PNK$_BALANCE', { withUpdate: true }),
-  BUY: 'BUY_PNK'
+  BUY: 'BUY_PNK',
+  ACTIVATE: 'ACTIVATE_PNK'
 }
 
 // Arbitrator Data
@@ -22,6 +23,10 @@ export const buyPNK = formData => ({
   type: PNKBalance.BUY,
   payload: { amount: formData.amount }
 })
+export const activatePNK = formData => ({
+  type: PNKBalance.ACTIVATE,
+  payload: { amount: formData.amount }
+})
 
 // Arbitrator Data
 export const fetchArbitratorData = () => ({ type: arbitratorData.FETCH })

src/actions/dispute.js

@@ -4,8 +4,13 @@ import { createActions } from '../utils/redux'
 
 // Disputes
 export const disputes = createActions('DISPUTES')
+export const dispute = createActions('DISPUTE')
 
 /* Action Creators */
 
 // Disputes
 export const fetchDisputes = () => ({ type: disputes.FETCH })
+export const fetchDispute = disputeID => ({
+  type: dispute.FETCH,
+  payload: { disputeID }
+})