feat(dispute): add description as text box in dispute details

src/components/truncated-text-box/index.js

@@ -0,0 +1,38 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+
+import './truncated-text-box.css'
+
+export default class TruncatedTextBox extends PureComponent {
+  static propTypes = {
+    // State
+    text: PropTypes.string.isRequired,
+    maxWords: PropTypes.number.isRequired
+  }
+
+  state = { truncated: true }
+
+  toggleMore = () =>
+    this.setState(prevState => ({ truncated: !prevState.truncated }))
+
+  render() {
+    const { text, maxWords } = this.props
+    const { truncated } = this.state
+
+    const words = text.split(' ')
+    return (
+      <div className="TruncatedTextBox">
+        <p>
+          {truncated && words.length > maxWords
+            ? words.slice(0, maxWords).join(' ')
+            : text}
+        </p>
+        {words.length > maxWords && (
+          <div className="TruncatedTextBox-actionDiv" onClick={this.toggleMore}>
+            Show {truncated ? 'More ∧' : 'Less ∨'}
+          </div>
+        )}
+      </div>
+    )
+  }
+}

src/components/truncated-text-box/truncated-text-box.scss

@@ -0,0 +1,10 @@
+@import '../../styles/_colors.scss';
+
+/* @define TruncatedTextBox */
+.TruncatedTextBox {
+  &-actionDiv {
+    color: $info;
+    font-size: 14px;
+    user-select: none;
+  }
+}

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

@@ -5,6 +5,7 @@ import { ChainData } from '../../../../chainstrap'
 import { ARBITRATOR_ADDRESS } from '../../../../bootstrap/dapp-api'
 import { dateToString } from '../../../../utils/date'
 import LabelValueGroup from '../../../../components/label-value-group'
+import TruncatedTextBox from '../../../../components/truncated-text-box'
 import * as chainViewConstants from '../../../../constants/chain-view'
 
 import './details.css'
@@ -16,7 +17,8 @@ const Details = ({
   arbitrationFee,
   arbitrableContractAddress,
   disputeID,
-  appealNumber
+  appealNumber,
+  description
 }) => (
   <div className="Details">
     <small>
@@ -73,6 +75,9 @@ const Details = ({
       ]}
     />
     <hr />
+    <h4>Contract Description</h4>
+    <TruncatedTextBox text={description} maxWords={200} />
+    <hr />
   </div>
 )
 
@@ -84,7 +89,8 @@ Details.propTypes = {
   arbitrationFee: PropTypes.number.isRequired,
   arbitrableContractAddress: PropTypes.string.isRequired,
   disputeID: PropTypes.number.isRequired,
-  appealNumber: PropTypes.number.isRequired
+  appealNumber: PropTypes.number.isRequired,
+  description: PropTypes.string.isRequired
 }
 
 export default Details

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

@@ -52,59 +52,63 @@ const Ruling = ({
         </div>
       )}
       <LabelValueGroup
-        items={[
-          {
-            label: 'Votes for Party A',
-            value: (
-              <ChainData
-                contractName={chainViewConstants.KLEROS_POC_NAME}
-                contractAddress={ARBITRATOR_ADDRESS}
-                functionSignature={
-                  chainViewConstants.KLEROS_POC_GET_VOTE_COUNT_SIG
+        items={
+          inProgress
+            ? []
+            : [
+                {
+                  label: 'Votes for Party A',
+                  value: (
+                    <ChainData
+                      contractName={chainViewConstants.KLEROS_POC_NAME}
+                      contractAddress={ARBITRATOR_ADDRESS}
+                      functionSignature={
+                        chainViewConstants.KLEROS_POC_GET_VOTE_COUNT_SIG
+                      }
+                      parameters={chainViewConstants.KLEROS_POC_GET_VOTE_COUNT_PARAMS(
+                        disputeID,
+                        appeals,
+                        1
+                      )}
+                    >
+                      {votesForPartyA}
+                    </ChainData>
+                  )
+                },
+                {
+                  label: 'Votes for Party B',
+                  value: (
+                    <ChainData
+                      contractName={chainViewConstants.KLEROS_POC_NAME}
+                      contractAddress={ARBITRATOR_ADDRESS}
+                      functionSignature={
+                        chainViewConstants.KLEROS_POC_GET_VOTE_COUNT_SIG
+                      }
+                      parameters={chainViewConstants.KLEROS_POC_GET_VOTE_COUNT_PARAMS(
+                        disputeID,
+                        appeals,
+                        2
+                      )}
+                    >
+                      {votesForPartyB}
+                    </ChainData>
+                  )
+                },
+                {
+                  label: 'PNK Redistribution',
+                  value: (
+                    <span
+                      className={`Ruling-netPNK Ruling-netPNK--${
+                        won ? 'positive' : 'negative'
+                      }`}
+                    >
+                      {won ? '+' : '-'}
+                      {netPNK}
+                    </span>
+                  )
                 }
-                parameters={chainViewConstants.KLEROS_POC_GET_VOTE_COUNT_PARAMS(
-                  disputeID,
-                  appeals,
-                  1
-                )}
-              >
-                {votesForPartyA}
-              </ChainData>
-            )
-          },
-          {
-            label: 'Votes for Party B',
-            value: (
-              <ChainData
-                contractName={chainViewConstants.KLEROS_POC_NAME}
-                contractAddress={ARBITRATOR_ADDRESS}
-                functionSignature={
-                  chainViewConstants.KLEROS_POC_GET_VOTE_COUNT_SIG
-                }
-                parameters={chainViewConstants.KLEROS_POC_GET_VOTE_COUNT_PARAMS(
-                  disputeID,
-                  appeals,
-                  2
-                )}
-              >
-                {votesForPartyB}
-              </ChainData>
-            )
-          },
-          {
-            label: 'PNK Redistribution',
-            value: (
-              <span
-                className={`Ruling-netPNK Ruling-netPNK--${
-                  won ? 'positive' : 'negative'
-                }`}
-              >
-                {won ? '+' : '-'}
-                {netPNK}
-              </span>
-            )
-          }
-        ]}
+              ]
+        }
       />
       <hr />
     </div>

src/containers/dispute/index.js

@@ -94,9 +94,7 @@ class Dispute extends PureComponent {
                             size={12}
                             className="Dispute-header-title-identicon"
                           />
-                          <h3>
-                            Decision Summary for "{dispute.data.description}"
-                          </h3>
+                          <h3>Decision Summary for "{dispute.data.title}"</h3>
                         </div>
                         <hr />
                       </div>
@@ -115,6 +113,7 @@ class Dispute extends PureComponent {
                           dispute.data.arbitrableContractAddress
                         }
                         disputeID={dispute.data.disputeId}
+                        description={dispute.data.description}
                       />
                     )
                   },

src/containers/disputes/components/case-name-cell/index.js

@@ -10,13 +10,13 @@ import * as chainViewConstants from '../../../../constants/chain-view'
 import './case-name-cell.css'
 
 const CaseNameCell = ({
-  original: { disputeId, arbitrableContractAddress, description }
+  original: { disputeId, arbitrableContractAddress, title }
 }) => (
   <div className="CaseNameCell">
     <Identicon seed={arbitrableContractAddress} size={12} />
     <Link to={`/disputes/${disputeId}`}>
       <div className="CaseNameCell-title">
-        <h5>{description}</h5>
+        <h5>{title}</h5>
         <small>
           <ChainData
             contractName={chainViewConstants.KLEROS_POC_NAME}
@@ -39,7 +39,7 @@ CaseNameCell.propTypes = {
   original: PropTypes.shape({
     disputeId: PropTypes.string.isRequired,
     arbitrableContractAddress: PropTypes.string.isRequired,
-    description: PropTypes.string.isRequired
+    title: PropTypes.string.isRequired
   }).isRequired
 }
 

src/containers/home/index.js

@@ -13,7 +13,6 @@ import * as notificationActions from '../../actions/notification'
 import * as arbitratorSelectors from '../../reducers/arbitrator'
 import * as arbitratorActions from '../../actions/arbitrator'
 import Icosahedron from '../../components/icosahedron'
-import LoadingBar from '../../components/loading-bar'
 import Identicon from '../../components/identicon'
 import BalancePieChart from '../../components/balance-pie-chart'
 import Button from '../../components/button'
@@ -127,7 +126,7 @@ class Home extends PureComponent {
                 </h5>
                 <RenderIf
                   resource={PNKBalance}
-                  loading={<LoadingBar />}
+                  loading={'...'}
                   done={
                     PNKBalance.data && (
                       <h6>
@@ -150,7 +149,7 @@ class Home extends PureComponent {
                 />
                 <RenderIf
                   resource={balance}
-                  loading={<LoadingBar />}
+                  loading={<Icosahedron />}
                   done={
                     <h6>
                       <ChainData
@@ -169,7 +168,7 @@ class Home extends PureComponent {
           <div className="Home-stats-block">
             <RenderIf
               resource={PNKBalance}
-              loading={<LoadingBar />}
+              loading={<Icosahedron />}
               done={
                 PNKBalance.data && (
                   <div className="Home-stats-block-content">
@@ -238,7 +237,7 @@ class Home extends PureComponent {
           <div className="Home-stats-block">
             <RenderIf
               resource={PNKBalance}
-              loading={<LoadingBar />}
+              loading={<Icosahedron />}
               done={
                 PNKBalance.data && (
                   <div className="Home-stats-block-content">

src/reducers/dispute.js

@@ -63,6 +63,7 @@ const {
     ).isRequired,
 
     // Store Data
+    title: PropTypes.string.isRequired,
     description: PropTypes.string.isRequired,
     email: PropTypes.string.isRequired,
     evidence: PropTypes.arrayOf(

src/sagas/dispute.js

@@ -110,6 +110,7 @@ function* fetchDisputes() {
 
       disputes.push({
         ...d,
+        title: arbitrableData ? arbitrableData.title : null,
         description: arbitrableData ? arbitrableData.description : null,
         deadline: disputeDeadline ? new Date(disputeDeadline) : null
       })

stories/index.js

@@ -15,4 +15,5 @@ import './status-hint'
 import './table'
 import './text-input'
 import './toast'
+import './truncated-text-box'
 import './typography'

stories/truncated-text-box.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+import TruncatedTextBox from '../src/components/truncated-text-box'
+
+storiesOf('Truncated Text Box', module)
+  .add('default', () => (
+    <TruncatedTextBox
+      text="Duis et mauris vestibulum, auctor lacus porttitor, pellentesque arcu.
+  Sed scelerisque dolor in orci luctus semper. Mauris turpis magna, congue
+  vitae sollicitudin vel, pretium nec arcu."
+      maxWords={10}
+    />
+  ))
+  .add('not exceeding max words', () => (
+    <TruncatedTextBox
+      text="Duis et mauris vestibulum, auctor lacus porttitor, pellentesque arcu.
+  Sed scelerisque dolor in orci luctus semper. Mauris turpis magna, congue
+  vitae sollicitudin vel, pretium nec arcu."
+      maxWords={100}
+    />
+  ))