add Transfer dialog

app/components/CreateFunding.jsx

@@ -53,7 +53,7 @@ const CreateFunding = ({ refreshTable }) => (
        setStatus,
        status
     }) => (
-      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column' }}>
+      <form autoComplete="off" onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column' }}>
         <TextField
           id="funderId"
           name="funderId"

app/components/PledgesTable.jsx

@@ -1,7 +1,8 @@
-import React, { Fragment, memo } from 'react'
+import React, { Fragment, PureComponent } from 'react'
 import MaterialTable from 'material-table'
 import { toEther } from '../utils/conversions'
 import { getTokenLabel } from '../utils/currencies'
+import TransferDialog from './TransferDialog'
 
 const convertToHours = seconds => seconds / 60 / 60
 const projectText = project => project === '0' ? 'N/A' : project
@@ -12,22 +13,51 @@ const formatField = field => ({
   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>
-)
+class PledgesTable extends PureComponent {
+  state = {
+    row: false,
+  }
 
-export default memo(PledgesTable)
+  handleClickOpen = row => {
+    this.setState({ row });
+  }
+
+  handleClose = () => {
+    this.setState({ row: false });
+  }
+
+  render() {
+    const { data } = this.props
+    const { row } = this.state
+    return (
+      <Fragment>
+        <TransferDialog row={row} handleClose={this.handleClose} />
+        <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"
+          actions={[
+            {
+              icon: 'compare_arrows',
+              tooltip: 'Transfer funds',
+              onClick: (event, rowData) => {
+                this.handleClickOpen(rowData)
+                console.log({event, rowData})
+              }
+            }
+          ]}
+        />
+      </Fragment>
+    )
+  }
+}
+
+export default PledgesTable

app/components/TransferDialog.jsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import Button from '@material-ui/core/Button'
+import TextField from '@material-ui/core/TextField'
+import Dialog from '@material-ui/core/Dialog'
+import DialogActions from '@material-ui/core/DialogActions'
+import DialogContent from '@material-ui/core/DialogContent'
+import DialogContentText from '@material-ui/core/DialogContentText'
+import DialogTitle from '@material-ui/core/DialogTitle'
+
+const TransferDialog = ({ row, handleClose }) => {
+  return (
+    <div>
+      <Dialog
+        open={!!row}
+        onClose={handleClose}
+        aria-labelledby="form-dialog-title"
+      >
+        <DialogTitle id="form-dialog-title">{`Transfer Funds from Pledge ${row.id}`}</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            Transfer funds between pledges
+          </DialogContentText>
+          <TextField
+            autoFocus
+            margin="normal"
+            id="amount"
+            name="amount"
+            label="Amount to transfer"
+            placeholder="Amount to transfer"
+            variant="outlined"
+            type="number"
+            autoComplete="off"
+            fullWidth
+          />
+          <TextField
+            autoFocus
+            margin="normal"
+            id="idReceiver"
+            name="idReceiver"
+            label="Receiver of funds"
+            placeholder="Receiver of funds"
+            variant="outlined"
+            helperText="Destination of the amount, can be a Giver/Project sending to a Giver, a Delegate or a Project; a Delegate sending to another Delegate, or a Delegate pre-commiting it to a Project"
+            autoComplete="off"
+            fullWidth
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} color="primary">
+            Cancel
+          </Button>
+          <Button onClick={handleClose} color="primary">
+            Subscribe
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  )
+}
+
+export default TransferDialog

app/utils/pledges.js

@@ -11,7 +11,6 @@ export const formatPledge = async (pledgePromise, idx) => {
 
 export const getAllPledges = async (start = 1) => {
   const numPledges = await numberOfPledges().call()
-  console.log({numPledges})
   const pledges = []
   for (let i = start; i <= numPledges; i++) {
     pledges.push(getPledge(i).call())