kleros / court

The Kleros court user interface.
https://court.kleros.io
MIT License
21 stars 18 forks source link

Access Case Variables in custom Display Interface #197

Open sneaker1 opened 3 years ago

sneaker1 commented 3 years ago

Hello,

i have created a custom Display Interface for kleros arbitration with our dApp. In the custom Display Interface i need to have access to the case Variables like disputeID and arbitrable contract address.

In the evidence Standard (https://github.com/ethereum/EIPs/issues/1497) at the end there is an example for the implementation of the Evidence Display Interface (https://github.com/kleros/kleros-juror-front/blob/cca73c85c8532115d64c8a2cbb2844f1ce4edcc1/src/components/iframes/doges-on-trial-evidence/index.js). There the variables are retrieved by using onmessage and postMessage.

But this seems to be outdated. I couldn't receive the message like that.

I couldn't find anything with postMessage in the code for the court. So i think this is not implemented. Can you please implement that?

Regards Sneaker

hbarcelos commented 3 years ago

The way this is currently handled at Kleros Court is by passing those parameters in the search portion of the URL when accessing the Evidence Display.

Here's the relevant part of the code that does that: https://github.com/kleros/court/blob/107d58cf1db201525223e734059cca24ae51152b/src/components/case-details-card.js#L565-L579

Roughly: it gets the evidenceDisplayInterfaceURI value from the MetaEvidence and pass the parameters as a URL-encoded JSON-stringified object as the src attribute of an <iframe>:

const iframeSrc = `https://myevidencedisplay.com/?${encodeURIComponent(JSON.stringify({ disputeID, arbitrableContractAddress, arbitratorContractAddress }))}`

You'll have something like this:

https://myevidencedisplay.com?{"arbitrableContractAddress":"0x00..0000","arbitratorContractAddress":"0x11..1111","disputeID":0}

You can find and example of this parameter being consumed here.

The code above is React-centric, but it boils down to:

// .slice(1) is to remove the `?` character from the search
const queryString = decodeURIComponent(window.location.search).slice(1);
const { disputeID, arbitrableContractAddress, arbitratorContractAddress } = JSON.parse(queryString);

Unfortunately we don't plan add support to an alternative method in the near future.

Please let me know if we can help you make it work with the current state of affairs.