kleros/kleros-juror-front

The front end for Kleros jurors.

Kleros Juror Front

Get Started

1. Clone this repo.
2. Install and set up the MetaMask chrome extension.
3. Configure MetaMask on the Kovan Test Network.
4. Run yarn to install dependencies and then yarn start to start the dev server.

Scripts

• yarn run prettify - Apply prettier to the entire project.
• yarn run lint:scss - Lint the entire project's .scss files.
• yarn run lint:js - Lint the entire project's .js files.
• yarn run lint:scss --fix - Fix fixable linting errors in .scss files.
• yarn run lint:js --fix - Fix fixable linting errors in .js files.
• yarn run lint - Lint the entire project's .scss and .js files.
• 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

Storybook Storyshots for components and jest integration tests for containers.

kleros-juror-front's Issues

Add case number to Decision Summary page

In this page:

https://drive.google.com/open?id=1DfGrrZLa3f_CeoqjCRzu4efyT7FwDuQa

Here we should add the case number for the user to quickly identify which case he’s ruling.

It should say: Decision Summary for “Doges on Trial” Case #X

Small tweaks in Token Interface - Transfer PNK

https://drive.google.com/open?id=170k4QcirutBURFF3pNkeHdZ4bV8mM_Qi

Instead of TRANSFER TOKENS it should read TRANSFER PNK

And the button should be smaller.

Change font and font size

JUROR FRONT should have the same font and font size that DOGE FRONT.

Token Values Validation

=> minimumDeposit
<= contractBalance
<= withdrawablePNK

Change background color

In JUROR FRONT let's use the same background color than in DOGE FRONT.

Prefill the amont of tokens to deposit with the maximum possible.

X button to dismiss notification not working

When I tap on the X, the notification should disappear. But now I tap on the X and nothing happens.

https://drive.google.com/open?id=1cev-Fx1LCQ52DLGZLNaknZLXXWYvCcKt

Wrong error: When you try to send more than what you have

It displays a connection unstable message instead of showing that you try to withdraw more than what you have.

No title or description on evidence

Evidence in a dispute displays who submitted it and the provides the link but there is no title or description

Notification listener in service worker

Put notification listener in it's own worker so that the main interface doesn't get bogged down

Tie shows `Party B Wins` instead of `No Decision`

Sort dispute table by deadline

Put a '+' symbol

Show minimum deposit

In the deposit pop up, show the minimum amount to deposit.

Typo in Kleros Dashboard

https://drive.google.com/open?id=1UOwR_iHL62ut4qtLpdXAbnneCRZf2ASe

There's a typo here: "Welcome to Kleros's Juror Dashboard!"

Should say: "Welcome to Kleros' Juror Dashboard!"

In the token tab replace "activated" by "deposited"

Add "No arbitrator on network" screen

similar to "unlock MetaMask"

When opening a dispute you voted on show what you voted

Rename "arbitrator" to "Kleros"

"In order to deposit PNK in a session you must transfer PNK to the arbitrator contract. You may withdraw your tokens at any time as long as you have not activated PNK in the current session."

A lot of contracts can be arbitrator contracts, to be more specific we can replac "arbitrator" to "Kleros".

Update notifications

When you get arbitration fee. It should say that "You have been awarded an XX.XXX ETH arbitration fee." instead of "Juror has been awarded arbitration fee".
For token redistribution say "You have won/lost XXXX PNK due to token redistribution."

Duplicate notification in juror panel

https://drive.google.com/open?id=1cev-Fx1LCQ52DLGZLNaknZLXXWYvCcKt

See that I got 2 notifications about the exact same event of “Dispute 60: Tokens have been redistributed”.

I should only get one notification for this.

Hov over explanation in "Deposited"

https://drive.google.com/open?id=1y6IB-YRmqccy2TBxOZsBEm91BFQShlIc

We should add some explanation about what "Deposited" means.

"This is the amount of PNK you deposited to be drawn as juror".

We could also add some extra explainer to educate users about how Kleros works. Something like: "The higher the amount of PNK you deposit, the higher your chances of being drawn as juror".

Remove black dots on the left

https://drive.google.com/open?id=1e-_wyUFzdduEmPNaOcyLUuvoQcrBJssM

We should remove the black dots on the left. They don't have any function.

Activate Tokens popup should disappear after submitting

Currently the activate tokens popup stays there until the user presses cancel. Instead it should hide after the user has pushed submit or once the tx has been submitted

Deadlines are not displayed on disputes table

All dispute deadlines are currently 'None' in the table

Rename Welcome Message in Kleros Juror Dashboard

https://drive.google.com/open?id=1hz2g_hiIh8iWheMPM7w0aa6sewe0VplP

Let's write: "Welcome to Kleros Juror Dashboard!"

Small Tweaks in Token Interface - Withdraw PNK

https://drive.google.com/open?id=1TcUVcw9S_PCSnYgRgg6dz5jzkSyoJytd

The button should read WITHDRAW PNK

And it should be smaller.

Add withdraw PNK

Should not show the possibility to withdraw PNK when not possible.

Move "session" and "period" in the home tab.

Give better gas estimation for transfer to contract

Currently, the interface asks to put more than 6 000 000 gas. We can change it to 200000

Show token balance and the amount we can withdraw in Tokens interface

Notification listener won't be initialized if user isn't on the homepage

The notification saga waits for notifications to be fetched before starting the event listener. If a user refreshes the page or navigates directly to a page where notifications are not being loaded the notification listener will never initialize.

kleros-juror-front/src/sagas/notification.js

Line 25 in c056d52

while (yield take(notificationActions.notifications.FETCH)) {

Better structure for the "ruling section".

https://drive.google.com/open?id=1AG6v7jzLVBMtNG0LcoIVKtxpjBuFHbfr

This could be a bit complicated to implement before the launch, but if we can't do it now, we could do it a bit later.

Does the Image Show a Doge?

The decision of the jury was NO. The PROSECUTOR won the case.

You voted for the SUBMITTER.
Juror 2 voted for the PROSECUTOR.
Juror 3 voted for the PROSECUTOR.

Your vote was INCOHERENT with the majority. As a result, you lost X PNK.

(Here we could add some link saying "How is this calculated?” This could link to a Medium post explaining that).

Hov over explainer for available PNK in juror dashboard

https://drive.google.com/open?id=1hz2g_hiIh8iWheMPM7w0aa6sewe0VplP

Where it says 1010 PNK, let's add a hov over explaining what this means: "This is the amount of PNK available for you deposit in the court".

Remove the upper left bar

On some browsers, there is an upper left sliding bar which can't be used. We need to remove it.

Wording improvement: replace "Disputes" by "Cases"

https://drive.google.com/open?id=1ugTGfHgYg5loDsJA3imw5_DuzmB7vrkj

Replace the word "Disputes" by "Cases"

Fix the issues found out in the video

• Should not display dispute if selected.
• The amount lost should be in PNK and not in 1e-18 PNK.
• Notifications should refer to the dispute ID.
• I don't understand why we just see 1 vote for partyB. We should have 3 right?
• We need to see that the party gets the ETH.
• Replace "activate" by "deposit".

Remove Chain View

This is doing some strange bouncing on the right.
Most users would not know what it is. Eventually it could be an option, but for now it's lowering the UX.

Make smaller window for Deposit PNK

https://drive.google.com/open?id=1x_IKlYuVz1qXEyAf1AyuwTwS-CBp510P

In this window, the user will only write a short number. Let's make it smaller.

Remove double scroll bar from decision summary screen

https://drive.google.com/open?id=1hZXke0pp0VhAwDeSluV0BhJeLDzK29qM

There are 2 vertical scroll bars in the decision summary screen. We should remove the one on the left. Users should use the bar on the right to scroll.

Remove file name

https://drive.google.com/open?id=1mtPA_Q1lrLlyb-Xz1r4PCegMBIyrtdiL

We should remove the name of the file (https://staging-doges-on-trial). It’s not necessary to show that. From the point of view of the user, it looks like an error.

Prefill the deposit and withdraw with the maximum amount to deposit or withdraw

Hov over explanation in "Locked"

https://drive.google.com/open?id=1tHVN_9tCqAdHBkAwc-38Xx4NhARJ6Bdj

We need to add some explanation about what Locked means: "This is the amount of PNK that are locked waiting for the case to be ruled".

Users should get feedback on calls that are rejected by estimateGas

An example is trying to activate tokens when you have none. You can still input the amount and push submit and then nothing happens. I would assume because estimateGas stops the API from making the call but there is no feedback for the user so it just looks like it isn't working.

Improve iteration

To avoid iterating everytime on all the disputes.
Look at those events:
https://github.com/kleros/kleros/blob/master/contracts/KlerosPOC.sol#L534
https://github.com/kleros/kleros-interaction/blob/master/contracts/standard/arbitration/Arbitrator.sol#L61

raised within a session timeframe.
From them we can get a list of disputeID and only look at those.

Style changes in dispute list

Some changes for the dispute list:
https://drive.google.com/open?id=10JQ9rE1J-t441NSgYkZRDqiTYQNCnpcv

• Replace the dispute number (eg. #60) by “Case #60”

In the deadline date, instead of “28.7 at 10:16 pm” I prefer to have the format July 28th at 10:16 pm.

Some countries (like US) use MM/DD format. Others use DD/MM. I think that putting the month name makes it more clear for users from every country.

• Can we replace the name of the subcourt from “General Court” to “Doge Court”?

Change in wording: Party A vs. Party B

https://drive.google.com/open?id=1AG6v7jzLVBMtNG0LcoIVKtxpjBuFHbfr

I think it's better to replace "Party A" by "Submitter" and "Party B" by "Prosecutor" to make it coherent with the words we are using in the pilot.

Deposited pie blue area

https://drive.google.com/open?id=1y6IB-YRmqccy2TBxOZsBEm91BFQShlIc

Now, the “amount of blue” in the pie represents the percentage of PNK the user deposited in the subcourt out of his total PNK holdings. I think that this is a bit confusing.

Maybe the pie should only have 2 states:

-Empty (no PNK were deposited)
-Full (PNK were deposited)

Change wording "Activate" for "Deposit"

https://drive.google.com/open?id=1vo2N7M8KhTgQMQerKOb9dERPa26Ccixz

Here it says "activate tokens". We should change it for "deposit tokens".