add form control to Transfer Dialog

app/components/TransferDialog.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Formik } from 'formik'
 import Button from '@material-ui/core/Button'
 import TextField from '@material-ui/core/TextField'
 import Dialog from '@material-ui/core/Dialog'
@@ -6,19 +7,36 @@ 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'
+import { getTokenLabel } from '../utils/currencies'
 
-const TransferDialog = ({ row, handleClose }) => {
+const TransferDialog = ({ row, handleClose }) => (
-  return (
+  <Formik
-    <div>
+    initialValues={{}}
+    onSubmit={async (values, { setSubmitting, resetForm, setStatus }) => {
+      //TODO add submit handling using transfer from LiquidPledgingMock
+    }}
+  >
+    {({
+       values,
+       errors,
+       touched,
+       handleChange,
+       handleBlur,
+       handleSubmit,
+       setFieldValue,
+       setStatus,
+       status
+    }) => (
+      <form onSubmit={handleSubmit}>
         <Dialog
           open={!!row}
           onClose={handleClose}
           aria-labelledby="form-dialog-title"
         >
-        <DialogTitle id="form-dialog-title">{`Transfer Funds from Pledge ${row.id}`}</DialogTitle>
+          <DialogTitle id="form-dialog-title">Transfer Funds</DialogTitle>
           <DialogContent>
             <DialogContentText>
-            Transfer funds between pledges
+              {`Transfer ${values.amount || ''}  ${values.amount ? getTokenLabel(row[6]) : ''} from Pledge ${row.id} ${values.idReceiver ? 'to' : ''} ${values.idReceiver || ''}`}
             </DialogContentText>
             <TextField
               autoFocus
@@ -31,6 +49,9 @@ const TransferDialog = ({ row, handleClose }) => {
               type="number"
               autoComplete="off"
               fullWidth
+              onChange={handleChange}
+              onBlur={handleBlur}
+              value={values.amount || ''}
             />
             <TextField
               autoFocus
@@ -43,19 +64,23 @@ const TransferDialog = ({ row, handleClose }) => {
               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
+              onChange={handleChange}
+              onBlur={handleBlur}
+              value={values.idReceiver || ''}
             />
           </DialogContent>
           <DialogActions>
             <Button onClick={handleClose} color="primary">
               Cancel
             </Button>
-          <Button onClick={handleClose} color="primary">
+            <Button onClick={handleClose} color="primary" type="submit">
               Subscribe
             </Button>
           </DialogActions>
         </Dialog>
-    </div>
+      </form>
+    )}
+  </Formik>
 )
-}
 
 export default TransferDialog