Access Case Variables in custom Display Interface

[sneaker1]

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 (ethereum/EIPs#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]

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:

court/src/components/case-details-card.js

Lines 565 to 579 in 107d58c

	<StyledIFrame
	frameBorder="0"
	src={`${metaEvidence.metaEvidenceJSON.evidenceDisplayInterfaceURI.replace(
	/^\/ipfs\//,
	"https://ipfs.kleros.io/ipfs/"
	)}?${encodeURIComponent(
	JSON.stringify({
	arbitrableContractAddress: dispute.arbitrated,
	arbitratorContractAddress: KlerosLiquid.address,
	disputeID: ID,
	})
	)}`}
	title="MetaEvidence Display"
	height={metaEvidence.metaEvidenceJSON.evidenceDisplayHeight || "215px"}
	/>

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.