add pledges table

app/components/PledgesTable.jsx

@@ -0,0 +1,33 @@
+import React, { Fragment, memo } from 'react'
+import MaterialTable from 'material-table'
+import { toEther } from '../utils/conversions'
+import { getTokenLabel } from '../utils/currencies'
+
+const convertToHours = seconds => seconds / 60 / 60
+const projectText = project => project === '0' ? 'N/A' : project
+const formatField = field => ({
+  ...field,
+  commitTime: convertToHours(field.commitTime),
+  amount: toEther(field.amount),
+  token: getTokenLabel(field.token),
+  intendedProject: projectText(field.intendedProject)
+})
+const PledgesTable = ({ data }) => (
+  <Fragment>
+    <MaterialTable
+      columns={[
+        { title: 'Pledge Id', field: 'id', type: 'numeric' },
+        { title: 'Owner', field: 'owner' },
+        { title: 'Amount Funded', field: 'amount', type: 'numeric' },
+        { title: 'Token', field: 'token' },
+        { title: 'Commit Time', field: 'commitTime', type: 'numeric' },
+        { title: 'Number of Delegates', field: 'nDelegates', type: 'numeric' },
+        { title: 'Intended Project', field: 'intendedProject' },
+      ]}
+      data={data.map(formatField)}
+      title="Pledges"
+    />
+  </Fragment>
+)
+
+export default memo(PledgesTable)

app/dapp.js

@@ -7,9 +7,11 @@ import Divider from '@material-ui/core/Divider';
 import Button from '@material-ui/core/Button';
 import AddFunder from './components/AddFunder';
 import CreateFunding from './components/CreateFunding';
-import FunderProfilesTable from './components/FunderProfilesTable.jsx'
+import FunderProfilesTable from './components/FunderProfilesTable'
+import PledgesTable from './components/PledgesTable'
 import { initVaultAndLP, vaultPledgingNeedsInit, standardTokenApproval, getLpAllowance } from './utils/initialize'
 import { getProfileEvents, formatFundProfileEvent } from './utils/events';
+import { getAllPledges } from './utils/pledges';
 
 const { getNetworkType } = web3.eth.net;
 
@@ -26,12 +28,14 @@ class App extends React.Component {
         const needsInit = await vaultPledgingNeedsInit()
         const lpAllowance = await getLpAllowance()
         const fundProfiles = await getProfileEvents()
+        const allPledges = await getAllPledges()
         this.setState({
           network,
           environment,
           needsInit: needsInit === 0,
           lpAllowance,
-          fundProfiles
+          fundProfiles,
+          allPledges
         })
       });
     });
@@ -49,10 +53,11 @@ class App extends React.Component {
   }
 
   render() {
-    const { needsInit, lpAllowance, fundProfiles } = this.state;
+    const { needsInit, lpAllowance, fundProfiles, allPledges } = this.state;
     const { appendFundProfile } = this;
     return (
       <div>
+        {allPledges && <PledgesTable data={allPledges} />}
         {fundProfiles && <FunderProfilesTable data={fundProfiles} />}
         <AddFunder appendFundProfile={appendFundProfile} />
         <Divider variant="middle" />

app/utils/conversions.js

@@ -0,0 +1,3 @@
+import web3 from 'Embark/web3'
+
+export const toEther = amount => web3.utils.fromWei(amount, 'ether')

app/utils/pledges.js

@@ -0,0 +1,28 @@
+import LiquidPledgingMock from 'Embark/contracts/LiquidPledgingMock'
+
+// amount: "21000000000000000000"
+// commitTime: "0"
+// intendedProject: "0"
+// nDelegates: "1"
+// oldPledge: "0"
+// owner: "4"
+// pledgeState: "0"
+// token: "0x10Aa1c9C2ad79b240Dc612cd2c0c0f5513bAfF28"
+
+const { getPledgeAdmin, numberOfPledges, getPledge } = LiquidPledgingMock.methods
+export const formatPledge = async (pledgePromise, idx) => {
+  const pledge = await pledgePromise
+  return {
+    ...pledge,
+    id: idx
+  }
+}
+
+export const getAllPledges = async () => {
+  const numPledges = await numberOfPledges().call()
+  const pledges = []
+  for (let i = 0; i <= numPledges; i++) {
+    pledges.push(getPledge(i).call())
+  }
+  return Promise.all(pledges.map(formatPledge))
+}