Implement notifications

As an emergency fix, remove the notification menu.

⚠️⚠️⚠️Sanitize ye user input ⚠️⚠️⚠️ (XSS in action)

Related to #11

More clarity when communicating the % of original invoice, dispute, refund

Make it absolutely super clear about what's going on:

Original amount
Disputed amount
Refund / reimbursement amount

I got really confused, I wasn't sure how much money I'm disputing / agreeing to receive.

Also display the percentage of the total amount, not just the ETH value.

After sending an escrow transaction the "Send transaction" button stays there

and we can click on it again which creates a new transaction.

Remove useless withdraw button

Adding custom token defies the purpose of TCR at the cost of added complexity (feature bloat)

So my opinion (genuine honest, authentic opinion) - rather than be happy because of a new feature, I was like "OH NO", it's a cost, maintenance, complexity...

Settlement history is cut off (need to scroll but it's not obvious it is scrollable)

Display link to Etherscan as the transaction is confirming / confirmed.

As the transaction is confirming - display link to Etherscan and "confirming"
As the transaction is confirmed - display link to Etherscan and "confirmed"

Add ENS support

Allow inputting an ENS address as recipient.

Better explanation of uploading conract documents

If multiple files use .zip (or just support uploading multiple files)

One section for contracts.
One section "catch all", anything else you may want to add

Currently, it is not clear what is more important: attachment or plain text field.

I was thinking about something similar to

Use Sender/Receiver instead of Buyer/Seller

Create the footer with links to Kleros, social media, and GitHub repo to encourage more feedback and user contributions

Potentially a good idea to use consistent styling and brand identity.

Form validation - highlight which fields are preventing the form from submitting

Related to: #7 (comment)

The placeholder does not look like a placeholder and it took me while to know which fields needs updating.

xDai interface displaying wrong currency (ETH) for arbitration cost on the confirmation page

As described in the title, the currency for arbitration in the xDai environment should be xDai instead of ETH.
Here is a screenshot : https://files.slack.com/files-pri/T451BH0RE-F03GR4ZL543/image.png

@0xferit are you the right person to tag for this?

Don't show settlement history of there is no settlement

Restore button state after MetaMask transaction was cancelled

I cancel transaction on MetaMask.

Button remains spinning.

Of course I can reload the page.

Nice to have to restore initial button state.

Show status and timer for disputed cases

Show when case is expected to be finished voting. Have a link to the court page or otherwise show how to get more information on the case.

Update loading speed of the token list.

As mentioned in kleros/uniswap-frontend#12.

For uniswap.ninja, we mitigate the speed by caching the values so it won't take as long to load the second time the user visits the escrow.

Cannot use decimal with tokens - value must be an integer, hex string, BN or BigNumber instance.

Error: [number-to-bn] while converting number "0.01" to BN.js instance, error: invalid number value. Value must be an integer, hex string, BN or BigNumber instance. Note, decimals are not supported. Given value: "0.01"

[security] Hide infura endpoints

To avoid exposure to a dos attack, see https://github.com/kleros/escrow/blob/master/.env .

PS: It happened to me recently :)

MetaEvidence Token information does not match token in the contract?

Kovan:

backend.js:6 Error: MetaEvidence Token information does not match token in the contract
    at main.e9a07078.chunk.js:1
    at v (1.93be02ba.chunk.js:1)
    at Generator._invoke (1.93be02ba.chunk.js:1)
    at Generator.e.<computed> [as next] (1.93be02ba.chunk.js:1)
    at L (1.93be02ba.chunk.js:1)
    at T (1.93be02ba.chunk.js:1)

Created escrow for 0.000000000000000002 of a newly created token: https://kovan.etherscan.io/tx/0xf49fc9b327146071092f10b00f024aeaee68547fbb185abcfdfe62f3c818a1b8

Better indication in the UI about the currently logged in user

On the Invoice Summary I was wondering how do you know my receiver address:

After some thought - it's coming from MetaMask.

Display in the UI currently logged in user.

Optionally - the ability to log out.

Specify that the address should not be an exchange wallet

Otherwise they won't be able to create disputes.

Waiving should take into account what is already waived

Here, it displays a percentage of the remaining amount which acts differently from the amount display.

We should have a day separator

Currently, days and hh:mm:ss are just separated by a ":". This is quite uncommon.
We need it to work the same way as the T2CR:

If more than 2 days:
dd days, hh:mm:ss
If 1 day:
1 day, hh:mm:ss
If less than 1 day:
hh:mm:ss

Create footer with consistent Kleros branding and links to Github / Etherscan (encouraging code review and feedback)

Similar to: #18

Github repo called "kleros-front-end-web-react-reusable-components" and just add it to each and every project...

To have handy link to Etherscan + Github + Telegram + Slack + social media = massive value

Transparency. Encouraging feedback. Consistent branding.

Ticks many boxes.

When copy-paste token address, automatically prepulate other fields if known in smart contract directly

Just like Metamask is doing:

Most common use case - full reimbursement is rare and potentially catastrophic - put more common options first.

What is the most common use case?

a) Mark work as completed
b) Remind about releasing the Escrow

(payment is in Escrow already but the automatic timeout is 2 months from now, I may want to remind them now)

Danger zone

Example from GitHub

Timeout for other party to have a sensible default value (48 hours minimum)

Show detailed breakdown in appeal screen

Possible improvements:

Show number of jurors in next round as well as total appeal costs.
Display results of previous round.

Use a factory to make one contract per token

Use some workflow similar to Uniswap.

The text of contract is erased each time you collapse the dropdown

Better explain the process, timeline and requirements of a dispute

Related to #24

Make it clear both parties have to pay

Make it clear "burden proof" is on you

It has be the guy who raises a dispute to convince jurors.

The default position is "innocent until proven guilty", it is your job to convince jurors.

EDIT

It is not clear what is the default position.

Seems like by default everyone is losing LOL...

Use the pattern 1. approve 2. transact as opposed to two simultaneous transaction with 2nd fail warning in Metamask UI

My recent tweet about 1. approve 2. transact pattern: https://twitter.com/marsxrobertson/status/1212856982933250059

It's similar to #63

I genuinely think that:

approve
transact

Is way much better...

I'm kind of an advanced user, I know that Metamask runs the transaction "as if" to estimate the gas cost, that's why it knows the token hasn't been approved (1st transaction) that's why showing in the UI that 2nd transaction is failing.

That's terrible usability.

Escrow front-end to check approval / allowance to avoid delays and excessive gas consumption

Once upon a time (15 minutes ago) I have approved Escrow to spend tokens on my behalf.

(that was transaction 1/2)

I did not complete transaction 2/2, the one that actually moves tokens because I was afraid of the warning:

15 minutes lates returning to Escrow and it asks me for approve the same thing.

Good front-end can simply query blockchain token contract and check if the Escrow has sufficient allowance.

Private Mode for the escrow.

In order to improve the privacy of contracts, we need not to put upload everything in clear on IPFS. We only need them to be uploaded once a dispute is raised.

To do so:y
When creating the transaction, the document is uploaded encrypted with the public key of the sender and receiver.
To save on storage, an encryption key is created, used to encrypt the contract. The newly created private key is encrypted with the key of the sender and of the receiver.
The uploaded file contains:
-Encrypted contract.
-Decryption key encrypted with sender Public key. Since the sender create the transaction getting its public key is easy.
-Decryption key encrypted with receiver public key. To do so, we must look at a transaction done by this address (remember that addresses are hash of the public key and this key is revealed when a transaction is signed). If the receiver hasn't made a transaction yet, the private mode is unavailable.

The evidence contains the would be IPFS address (we can compute it from the hash of the document), but the document is not sent in clear now.

When a dispute arise, both sender and receiver have a private key allowing to decrypt the encryption key. When creating a dispute, they decrypt the document and upload it to IPFS. The evidence already points to this file, so for jurors nothing changes.

Better communicate to the user the privacy implications of the blockchain - can anyone see the transaction? (getting a strange error)

First thought: everything is public on the blockchain. Need to communicate to the users about the privacy implications.

So then I visited the link as a random MetaMask user.

Getting an error:

Error: Couldn't decode bytes from ABI: 0x
    at o.formatOutputDynamicBytes [as _outputFormatter] (formatters.js:242)
    at type.js:258
    at o.decode (type.js:250)
    at index.js:330
    at Array.forEach (<anonymous>)
    at m.decodeParameters (index.js:329)
    at M.p._decodeMethodReturn (index.js:416)
    at l.outputFormatter (index.js:740)
    at l.formatOutput (index.js:167)
    at o (index.js:444)

Link to court details page in "Resolved in..." section

“Disputes will be resolved in the in Kleros” should show court policies, costs etc.

Page not loading

Sometime when loading the main page or an escrow transaction, the page doesn't load.
This seems to happen randomly and refreshing (sometimes multiple times) leads to the correct page.

It makes me thing it's due to a concurrency issue but I'm not sure.

This happens on chrome.

Restrict Invoice Contracts

Disallow non-approved Arbitrators

Need to validate inputs

Contract Description should not be optional

Make a copy button for the transaction link

For now on the create transaction page, we just have a text of the link. It's not easy to copy. We should make it a copy field with a copy button.

Are we assuming tokens from TCR have 18 decimals? (noone asked me how many they have)

Similar to #61

Adding new tokens - being asked for decimals.

Using tokens from TCR - noone is asking for decimals.

Are we making any assumptions?

There are som legitimate tokens with a different number of decimals, just lik BNB and GNT are not ERC20 BTW :)

Clear difference between New Invoice and New Transaction, better explain the flow and naming.

1. Invoice vs Transaction is not obvious

After giving it some thought and looking at arrows - invoice is ETH coming in.

2. Wording on the invoice summary is inconsistent

Verify that metaevidence schema matches (regex)

Quick Wins for the First Release

The icon looks strange there. It is also unnecessary if we already have the button on the nav bar. We can follow Plinio's design or a quicker solution would be to have some text saying "You don't have any transactions yet, <create some>."