feat: convert balance units

package.json

@@ -83,7 +83,7 @@
     "create-redux-form": "^0.1.2",
     "ethjs": "^0.3.3",
     "history": "^4.7.2",
-    "kleros-api": "^0.16.0",
+    "kleros-api": "^0.17.0",
     "lessdux": "^0.7.3",
     "normalize.css": "^7.0.0",
     "react": "^16.2.0",

src/actions/arbitrator.js

@@ -21,25 +21,22 @@ export const arbitratorData = {
 
 // PNK Balance
 export const fetchPNKBalance = () => ({ type: PNKBalance.FETCH })
-export const buyPNK = formData => ({
+export const buyPNK = amount => ({
   type: PNKBalance.BUY,
-  payload: { amount: formData.amount }
+  payload: { amount }
 })
-export const activatePNK = formData => ({
+export const activatePNK = amount => ({
   type: PNKBalance.ACTIVATE,
-  payload: { amount: formData.amount }
+  payload: { amount }
 })
-export const transferPNK = formData => ({
+export const transferPNK = amount => ({
   type: PNKBalance.TRANSFER,
-  payload: { amount: formData.amount }
+  payload: { amount }
+})
+export const withdrawPNK = amount => ({
+  type: PNKBalance.WITHDRAW,
+  payload: { amount }
 })
-export const withdrawPNK = formData => {
-  console.log(1)
-  return {
-    type: PNKBalance.WITHDRAW,
-    payload: { amount: formData.amount }
-  }
-}
 
 // Arbitrator Data
 export const fetchArbitratorData = () => ({ type: arbitratorData.FETCH })

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

@@ -4,6 +4,7 @@ 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'
@@ -120,7 +121,7 @@ class Details extends Component {
                     parameters={chainViewConstants.KLEROS_POC_DISPUTES_PARAMS(
                       disputeID
                     )}
-                  >{`${arbitrationFee} ETH`}</ChainData>
+                  >{`${weiBNToDecimalString(arbitrationFee)} ETH`}</ChainData>
                 )
               }
             ])}

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

@@ -4,6 +4,7 @@ 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 * as chainViewConstants from '../../../../constants/chain-view'
 
@@ -57,7 +58,9 @@ const Ruling = ({
             <h5 className="Ruling-outcome-netPNK-label">
               {won ? 'Received ' : 'Lost '}
             </h5>
-            <h4 className="Ruling-outcome-netPNK-label">{netPNK} PNK</h4>
+            <h4 className="Ruling-outcome-netPNK-label">
+              {weiBNToDecimalString(netPNK)} PNK
+            </h4>
           </div>
         </div>
       )}
@@ -113,7 +116,7 @@ const Ruling = ({
                       }`}
                     >
                       {won ? '+' : '-'}
-                      {netPNK}
+                      {weiBNToDecimalString(netPNK)}
                     </span>
                   )
                 }

src/containers/dispute/index.js

@@ -52,20 +52,20 @@ class Dispute extends PureComponent {
   handleVoteButtonClick = ({ currentTarget: { id } }) => {
     const { dispute, voteOnDispute } = this.props
     voteOnDispute(
-      dispute.data.disputeId,
+      dispute.data.disputeID,
       dispute.data.appealJuror[dispute.data.latestAppealForJuror].draws,
       id
     )
   }
 
   handleRepartitionButtonClick = () => {
     const { dispute, repartitionTokens } = this.props
-    repartitionTokens(dispute.data.disputeId)
+    repartitionTokens(dispute.data.disputeID)
   }
 
   handleExecuteButtonClick = () => {
     const { dispute, executeRuling } = this.props
-    executeRuling(dispute.data.disputeId)
+    executeRuling(dispute.data.disputeID)
   }
 
   render() {
@@ -97,7 +97,7 @@ class Dispute extends PureComponent {
                           <h3>
                             Decision Summary for "
                             {dispute.data.metaEvidence.title}
-                            ", Case #{dispute.data.disputeId}
+                            ", Case #{dispute.data.disputeID}
                           </h3>
                         </div>
                         <hr />
@@ -114,7 +114,7 @@ class Dispute extends PureComponent {
                         arbitrableContractAddress={
                           dispute.data.arbitrableContractAddress
                         }
-                        disputeID={dispute.data.disputeId}
+                        disputeID={dispute.data.disputeID}
                         metaEvidence={dispute.data.metaEvidence}
                       />
                     )
@@ -132,7 +132,7 @@ class Dispute extends PureComponent {
                               arbitrableContractAddress={
                                 dispute.data.arbitrableContractAddress
                               }
-                              disputeID={dispute.data.disputeId}
+                              disputeID={dispute.data.disputeID}
                               appealNumber={e.appealNumber}
                               metaEvidence={dispute.data.metaEvidence}
                             />
@@ -170,7 +170,7 @@ class Dispute extends PureComponent {
                                 dispute.data.appealJuror[e.appealNumber]
                                   .jurorRuling
                               }
-                              disputeID={dispute.data.disputeId}
+                              disputeID={dispute.data.disputeID}
                               appeals={dispute.data.numberOfAppeals}
                               appealNumber={e.appealNumber}
                               metaEvidence={dispute.data.metaEvidence}

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

@@ -10,11 +10,11 @@ import * as chainViewConstants from '../../../../constants/chain-view'
 import './case-name-cell.css'
 
 const CaseNameCell = ({
-  original: { disputeId, arbitrableContractAddress, title }
+  original: { disputeID, arbitrableContractAddress, title }
 }) => (
   <div className="CaseNameCell">
     <Identicon seed={arbitrableContractAddress} size={12} />
-    <Link to={`/cases/${disputeId}`}>
+    <Link to={`/cases/${disputeID}`}>
       <div className="CaseNameCell-title">
         <h5>{title}</h5>
         <small>
@@ -23,11 +23,11 @@ const CaseNameCell = ({
             contractAddress={ARBITRATOR_ADDRESS}
             functionSignature={chainViewConstants.KLEROS_POC_DISPUTES_SIG}
             parameters={chainViewConstants.KLEROS_POC_DISPUTES_PARAMS(
-              disputeId
+              disputeID
             )}
             style={{ display: 'block', height: '100%', width: '100%' }}
           >
-            Case #{disputeId}
+            Case #{disputeID}
           </ChainData>
         </small>
       </div>
@@ -37,7 +37,7 @@ const CaseNameCell = ({
 
 CaseNameCell.propTypes = {
   original: PropTypes.shape({
-    disputeId: PropTypes.string.isRequired,
+    disputeID: PropTypes.string.isRequired,
     arbitrableContractAddress: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired
   }).isRequired

src/containers/disputes/components/disputes-table/index.js

@@ -9,8 +9,8 @@ import CaseNameCell from '../case-name-cell'
 const columns = [
   {
     show: false,
-    accessor: 'disputeId',
-    id: 'disputeId'
+    accessor: 'disputeID',
+    id: 'disputeID'
   },
   {
     Header: 'Case Name',
@@ -50,7 +50,7 @@ const DisputesTable = ({ disputes }) => (
         desc: false
       },
       {
-        id: 'disputeId',
+        id: 'disputeID',
         desc: true
       }
     ]}

src/containers/disputes/index.js

@@ -25,8 +25,8 @@ class Disputes extends PureComponent {
   }
 
   componentDidMount() {
-    const { fetchDisputes } = this.props
-    fetchDisputes()
+    const { fetchDisputes, disputes } = this.props
+    if (disputes && !disputes.data) fetchDisputes()
   }
 
   componentDidUpdate() {

src/containers/home/index.js

@@ -20,6 +20,7 @@ import NotificationCard from '../../components/notification-card'
 import DisputeCard from '../../components/dispute-card'
 import Slider from '../../components/slider'
 import { dateToString } from '../../utils/date'
+import { weiBNToDecimalString, decimalStringToWeiBN } from '../../utils/number'
 import { camelToTitleCase } from '../../utils/string'
 import * as arbitratorConstants from '../../constants/arbitrator'
 import * as chainViewConstants from '../../constants/chain-view'
@@ -94,8 +95,9 @@ class Home extends PureComponent {
 
   handleActivatePNKFormSubmit = formData => {
     const { activatePNK } = this.props
+    const { amount } = formData
     toastr.removeByType('message')
-    activatePNK(formData)
+    activatePNK(decimalStringToWeiBN(amount).toString())
   }
 
   handleActivatePNKFormButtonClick = () => {
@@ -109,10 +111,14 @@ class Home extends PureComponent {
   validateActivatePNKForm = values => {
     const { arbitratorData } = this.props
     const errors = {}
-    if (arbitratorData.data.minActivatedToken > values.amount)
-      errors.amount = `You must deposit a minimum of ${
+    if (
+      arbitratorData.data.minActivatedToken.greaterThan(
+        decimalStringToWeiBN(values.amount, 'ether')
+      )
+    )
+      errors.amount = `You must deposit a minimum of ${decimalStringToWeiBN(
         arbitratorData.data.minActivatedToken
-      } PNK.`
+      ).toString()} PNK.`
     return errors
   }
 
@@ -126,7 +132,12 @@ class Home extends PureComponent {
           <div>
             <ActivatePNKForm
               onSubmit={this.handleActivatePNKFormSubmit}
-              initialValues={{ amount: PNKBalance.data.tokenBalance }}
+              initialValues={{
+                amount: weiBNToDecimalString(
+                  PNKBalance.data.tokenBalance,
+                  'ether'
+                )
+              }}
               validate={this.validateActivatePNKForm}
             />
             <Button
@@ -159,7 +170,7 @@ class Home extends PureComponent {
 
     return (
       <div className="Home">
-        <h4>Welcome to Kleros' Juror Dashboard!</h4>
+        <h4>{"Welcome to Kleros' Juror Dashboard!"}</h4>
         <RenderIf
           resource={arbitratorData}
           loading={'...'}
@@ -195,7 +206,8 @@ class Home extends PureComponent {
                             accounts.data[0]
                           )}
                         >
-                          {PNKBalance.data.tokenBalance} PNK
+                          {weiBNToDecimalString(PNKBalance.data.tokenBalance)}{' '}
+                          PNK
                         </ChainData>
                       </h6>
                     )
@@ -232,8 +244,8 @@ class Home extends PureComponent {
                   <div className="Home-stats-block-content">
                     <BalancePieChart
                       type="activated"
-                      balance={PNKBalance.data.activatedTokens}
-                      total={PNKBalance.data.tokenBalance}
+                      balance={PNKBalance.data.activatedTokens.toNumber()}
+                      total={PNKBalance.data.tokenBalance.toNumber()}
                       size={80}
                     />
                     <div className="Home-stats-block-content-header">
@@ -282,7 +294,10 @@ class Home extends PureComponent {
                             accounts.data[0]
                           )}
                         >
-                          {PNKBalance.data.activatedTokens} PNK
+                          {weiBNToDecimalString(
+                            PNKBalance.data.activatedTokens
+                          )}{' '}
+                          PNK
                         </ChainData>
                       </h6>
                     </div>
@@ -304,8 +319,8 @@ class Home extends PureComponent {
                   <div className="Home-stats-block-content">
                     <BalancePieChart
                       type="locked"
-                      balance={PNKBalance.data.lockedTokens}
-                      total={PNKBalance.data.tokenBalance}
+                      balance={PNKBalance.data.lockedTokens.toNumber()}
+                      total={PNKBalance.data.tokenBalance.toNumber()}
                       size={80}
                     />
                     <div className="Home-stats-block-content-header">
@@ -321,7 +336,8 @@ class Home extends PureComponent {
                             accounts.data[0]
                           )}
                         >
-                          {PNKBalance.data.lockedTokens} PNK
+                          {weiBNToDecimalString(PNKBalance.data.lockedTokens)}{' '}
+                          PNK
                         </ChainData>
                       </h6>
                     </div>
@@ -345,9 +361,9 @@ class Home extends PureComponent {
                 <div key={n._id} className="Home-cardList-card">
                   <NotificationCard
                     id={n._id}
-                    disputeID={n.data.disputeId}
+                    disputeID={n.data.disputeID}
                     message={n.message}
-                    to={`/cases/${n.data.disputeId}`}
+                    to={`/cases/${n.data.disputeID}`}
                     onDismissClick={this.handleNotificationCardDismissClick}
                   />
                 </div>
@@ -367,13 +383,13 @@ class Home extends PureComponent {
               pendingActions.data &&
               pendingActions.data.map(p => (
                 <div
-                  key={p.message + p.data.disputeId}
+                  key={p.message + p.data.disputeID}
                   className="Home-cardList-card"
                 >
                   <DisputeCard
                     status={0}
                     subcourt="GENERAL COURT"
-                    disputeID={p.data.disputeId}
+                    disputeID={p.data.disputeID}
                     date={new Date()}
                     title={p.message}
                   />