Feat/display evidence from standard

package.json

@@ -82,9 +82,10 @@
     "@kleros/archon": "^0.3.0",
     "@typeform/embed": "^0.5.12",
     "create-redux-form": "^0.1.2",
+    "eth-archon": "^0.2.0",
     "ethjs": "^0.3.3",
     "history": "^4.7.2",
-    "kleros-api": "^0.17.3",
+    "kleros-api-2": "^0.19.9",
     "lessdux": "^0.7.3",
     "normalize.css": "^7.0.0",
     "react": "^16.2.0",

src/bootstrap/dapp-api.js

@@ -1,5 +1,6 @@
 import Eth from 'ethjs'
-import { Kleros } from 'kleros-api'
+import { Kleros } from 'kleros-api-2' // FIXME NPM hack
+import Archon from '@kleros/archon'
 
 import * as ethConstants from '../constants/eth'
 
@@ -31,6 +32,8 @@ const initializeKleros = async () => {
   kleros = new Kleros(eth.currentProvider, STORE_PROVIDER, ARBITRATOR_ADDRESS)
 }
 
+const archon = new Archon(eth.currentProvider)
+
 const ETHAddressRegExpCaptureGroup = '(0x[a-fA-F0-9]{40})'
 const ETHAddressRegExp = /0x[a-fA-F0-9]{40}/
 const strictETHAddressRegExp = /^0x[a-fA-F0-9]{40}$/
@@ -44,7 +47,8 @@ export {
   ETHAddressRegExp,
   strictETHAddressRegExp,
   networkID,
-  env
+  env,
+  archon
 }
 
 setTimeout(

src/components/iframes/doges-on-trial-evidence/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { ArbitrablePermissionList } from 'kleros-api/lib/contracts/implementations/arbitrable'
+import { ArbitrablePermissionList } from 'kleros-api-2/lib/contracts/implementations/arbitrable'
 
 import { eth, env } from '../../../bootstrap/dapp-api'
 import LinkBox from '../../link-box'

src/containers/dispute/components/details/index.js

@@ -1,13 +1,11 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-import { ChainData } from '../../../../chainstrap'
 import { ARBITRATOR_ADDRESS } from '../../../../bootstrap/dapp-api'
 import { dateToString } from '../../../../utils/date'
 import { weiBNToDecimalString } from '../../../../utils/number'
 import LabelValueGroup from '../../../../components/label-value-group'
 import TruncatableTextBox from '../../../../components/truncatable-text-box'
-import * as chainViewConstants from '../../../../constants/chain-view'
 import LinkBox from '../../../../components/link-box'
 
 import './details.css'
@@ -24,12 +22,16 @@ class Details extends Component {
       message.data.target === 'evidence' &&
       message.data.loaded
     ) {
-      const { metaEvidence, disputeID, arbitrableContractAddress } = this.props
+      const {
+        metaEvidenceJSON,
+        disputeID,
+        arbitrableContractAddress
+      } = this.props
 
       message.source.postMessage(
         {
           target: 'evidence',
-          metaEvidence,
+          metaEvidence: metaEvidenceJSON,
           evidence: null,
           arbitrableContractAddress,
           arbitratorAddress: ARBITRATOR_ADDRESS,
@@ -42,96 +44,61 @@ class Details extends Component {
 
   render() {
     const {
-      date,
+      createdAt,
       arbitrationFee,
-      arbitrableContractAddress,
-      disputeID,
       appealNumber,
-      metaEvidence
+      metaEvidenceJSON
     } = this.props
 
     // Default display of primary document file.
-    let fileDisplay = (
+    let fileDisplay = metaEvidenceJSON.fileURI ? (
       <div>
         <h4>File</h4>
-        <LinkBox link={metaEvidence.fileURI} />
+        <LinkBox link={metaEvidenceJSON.fileURI} />
       </div>
+    ) : (
+      <div />
     )
 
     // Use external interface to display primary document file.
-    if (metaEvidence.evidenceDisplayInterfaceURL)
+    if (metaEvidenceJSON.evidenceDisplayInterfaceURL)
       fileDisplay = (
         <iframe
           title="File Display"
-          src={metaEvidence.evidenceDisplayInterfaceURL}
+          src={metaEvidenceJSON.evidenceDisplayInterfaceURL}
           frameBorder="0"
           height="300"
         />
       )
 
     return (
       <div className="Details">
-        <small>{dateToString(date, { withTime: false })}</small>
+        <small>{dateToString(createdAt, { withTime: false })}</small>
         <h4>{appealNumber ? `Appeal #${appealNumber}` : 'Dispute'} Details</h4>
         <LabelValueGroup
-          items={Object.keys(metaEvidence.aliases)
+          items={Object.keys(metaEvidenceJSON.aliases)
             .map(address => ({
-              label: metaEvidence.aliases[address],
-              value: (
-                <ChainData
-                  contractName={chainViewConstants.ARBITRABLE_CONTRACT_NAME}
-                  contractAddress={arbitrableContractAddress}
-                  functionSignature={
-                    chainViewConstants.ARBITRABLE_CONTRACT_PARTY_A_SIG
-                  }
-                  parameters={chainViewConstants.ARBITRABLE_CONTRACT_PARTY_A_PARAMS()}
-                >
-                  {address}
-                </ChainData>
-              )
+              label: metaEvidenceJSON.aliases[address],
+              value: address
               // identiconSeed: address
             }))
             .concat([
               {
                 label: 'Dispute Category',
-                value: (
-                  <ChainData
-                    contractName={chainViewConstants.KLEROS_POC_NAME}
-                    contractAddress={ARBITRATOR_ADDRESS}
-                    functionSignature={
-                      chainViewConstants.KLEROS_POC_DISPUTES_SIG
-                    }
-                    parameters={chainViewConstants.KLEROS_POC_DISPUTES_PARAMS(
-                      disputeID
-                    )}
-                  >
-                    {metaEvidence.category}
-                  </ChainData>
-                )
+                value: metaEvidenceJSON.category
               },
               {
                 label: 'Arbitration Fee',
-                value: (
-                  <ChainData
-                    contractName={chainViewConstants.KLEROS_POC_NAME}
-                    contractAddress={ARBITRATOR_ADDRESS}
-                    functionSignature={
-                      chainViewConstants.KLEROS_POC_DISPUTES_SIG
-                    }
-                    parameters={chainViewConstants.KLEROS_POC_DISPUTES_PARAMS(
-                      disputeID
-                    )}
-                  >{`${weiBNToDecimalString(arbitrationFee)} ETH`}</ChainData>
-                )
+                value: `${weiBNToDecimalString(arbitrationFee)} ETH`
               }
             ])}
         />
         <hr />
-        {metaEvidence.description && (
+        {metaEvidenceJSON.description && (
           <div>
             <h4>Description</h4>
             <TruncatableTextBox
-              text={metaEvidence.description}
+              text={metaEvidenceJSON.description}
               maxWords={200}
             />
             <hr />
@@ -144,17 +111,17 @@ class Details extends Component {
 }
 
 Details.propTypes = {
-  date: PropTypes.instanceOf(Date).isRequired,
+  createdAt: PropTypes.instanceOf(Date).isRequired,
   arbitrationFee: PropTypes.number.isRequired,
   arbitrableContractAddress: PropTypes.string.isRequired,
   disputeID: PropTypes.number.isRequired,
   appealNumber: PropTypes.number.isRequired,
-  metaEvidence: PropTypes.shape()
+  metaEvidenceJSON: PropTypes.shape()
 }
 
 Details.defaultProps = {
   // State
-  metaEvidence: {}
+  metaEvidenceJSON: {}
 }
 
 export default Details

src/containers/dispute/components/evidence/index.js

@@ -1,71 +1,97 @@
-import React from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-import { ChainData } from '../../../../chainstrap'
+import { ARBITRATOR_ADDRESS } from '../../../../bootstrap/dapp-api'
 import { dateToString } from '../../../../utils/date'
 import LabelValueGroup from '../../../../components/label-value-group'
-import LinkBox from '../../../../components/link-box'
-import * as chainViewConstants from '../../../../constants/chain-view'
 
-const Evidence = ({
-  date,
-  partyAddress,
-  title,
-  description,
-  URL,
-  arbitrableContractAddress,
-  isPartyA
-}) => (
-  <div className="Evidence">
-    <small>{dateToString(date, { withTime: false })}</small>
-    <h4>Evidence Submitted</h4>
-    <LabelValueGroup
-      items={[
+class Evidence extends Component {
+  componentDidMount() {
+    window.addEventListener('message', this.handleFrameMessage.bind(this))
+  }
+
+  handleFrameMessage = message => {
+    if (
+      message.data &&
+      message.data.target === 'evidence' &&
+      message.data.loaded
+    ) {
+      const {
+        evidenceJSON,
+        metaEvidenceJSON,
+        arbitrableContractAddress,
+        disputeID
+      } = this.props
+
+      message.source.postMessage(
         {
-          label: 'By',
-          value: (
-            <ChainData
-              contractName={chainViewConstants.ARBITRABLE_CONTRACT_NAME}
-              contractAddress={arbitrableContractAddress}
-              functionSignature={
-                isPartyA
-                  ? chainViewConstants.ARBITRABLE_CONTRACT_PARTY_A_SIG
-                  : chainViewConstants.ARBITRABLE_CONTRACT_PARTY_B_SIG
-              }
-              parameters={(isPartyA
-                ? chainViewConstants.ARBITRABLE_CONTRACT_PARTY_A_PARAMS
-                : chainViewConstants.ARBITRABLE_CONTRACT_PARTY_B_PARAMS)()}
-            >
-              {partyAddress}
-            </ChainData>
-          ),
-          identiconSeed: partyAddress
+          target: 'evidence',
+          metaEvidence: metaEvidenceJSON,
+          evidence: evidenceJSON,
+          arbitrableContractAddress,
+          arbitratorAddress: ARBITRATOR_ADDRESS,
+          disputeID
         },
-        { label: 'Title', value: title },
-        { label: 'Description', value: description },
-        {
-          label: 'URL',
-          value: (
-            <div>
-              <LinkBox link={URL} />
-            </div>
-          )
-        }
-      ]}
-    />
-    <hr />
-  </div>
-)
+        '*'
+      )
+    }
+  }
+
+  render() {
+    const {
+      evidenceJSON,
+      submittedBy,
+      submittedAt,
+      metaEvidenceJSON
+    } = this.props
+
+    let fileDisplay = <div />
+
+    // Use external interface to display primary document file.
+    if (metaEvidenceJSON.evidenceDisplayInterfaceURL)
+      fileDisplay = (
+        <iframe
+          title="Evidence Display"
+          src={metaEvidenceJSON.evidenceDisplayInterfaceURL}
+          frameBorder="0"
+          height="300"
+        />
+      )
+
+    return (
+      <div className="Evidence">
+        <small>{dateToString(submittedAt, { withTime: false })}</small>
+        <h4>Evidence Submitted</h4>
+        <LabelValueGroup
+          items={[
+            {
+              label: 'Submitted By',
+              value: submittedBy,
+              identiconSeed: submittedBy
+            },
+            { label: 'Name', value: evidenceJSON.name },
+            { label: 'Description', value: evidenceJSON.description },
+            {
+              label: 'File',
+              value: <a href={evidenceJSON.url}>{evidenceJSON.url}</a>
+            }
+          ]}
+        />
+        <hr />
+        {fileDisplay}
+      </div>
+    )
+  }
+}
 
 Evidence.propTypes = {
   // State
-  date: PropTypes.instanceOf(Date).isRequired,
-  partyAddress: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
-  URL: PropTypes.string.isRequired,
+  evidenceJSON: PropTypes.shape().isRequired,
+  submittedBy: PropTypes.string.isRequired,
+  submittedAt: PropTypes.instanceOf(Date).isRequired,
+  metaEvidenceJSON: PropTypes.shape().isRequired,
   arbitrableContractAddress: PropTypes.string.isRequired,
-  isPartyA: PropTypes.bool.isRequired
+  disputeID: PropTypes.number.isRequired
 }
 
 export default Evidence