remove context from withdraw card add observable

add ref field to VaultEvent model

app/actions/vaultEvents.js

@@ -1,6 +1,6 @@
 import { Q } from '@nozbe/watermelondb'
 import database from '../db'
-import { ALL_EVENTS, getAllVaultEvents } from '../utils/events'
+import { getAllVaultEvents } from '../utils/events'
 
 const vaultCollection = database.collections.get('vault_events')
 export const addEvent = async data => {
@@ -16,6 +16,7 @@ export const addEvent = async data => {
   })
 }
 
+const hexToDecimal = hex => Number(parseInt(hex, 16))
 export const batchAddEvents = async events => {
   const batch = events.map(e => {
     return vaultCollection.prepareCreate(lpEvent => {
@@ -24,6 +25,7 @@ export const batchAddEvents = async events => {
       lpEvent.address = address
       lpEvent.event = event
       lpEvent.blockNumber = blockNumber
+      lpEvent.ref = hexToDecimal(returnValues.ref)
       lpEvent.returnValues = returnValues
     })
   })

app/components/table/WithdrawCard.jsx

@@ -1,4 +1,7 @@
 import React, { useState, useEffect } from 'react'
+import withObservables from '@nozbe/with-observables'
+import { Q } from '@nozbe/watermelondb'
+import { withDatabase } from '@nozbe/watermelondb/DatabaseProvider'
 import PropTypes from 'prop-types'
 import { Formik } from 'formik'
 import { withStyles } from '@material-ui/core/styles'
@@ -15,7 +18,6 @@ import LiquidPledging from 'Embark/contracts/LiquidPledging'
 import LPVault from 'Embark/contracts/LPVault'
 import { getTokenLabel } from '../../utils/currencies'
 import { toWei } from '../../utils/conversions'
-import { FundingContext } from '../../context'
 
 const { withdraw } = LiquidPledging.methods
 const { confirmPayment } = LPVault.methods
@@ -40,7 +42,7 @@ const styles = {
   }
 }
 
-function Withdraw({ clearRowData, classes, rowData }) {
+function Withdraw({ clearRowData, classes, rowData, authorizedPayment }) {
   const [show, setShow] = useState(null)
   const [rowId, setRowId] = useState(rowData.pledgeId)
 
@@ -60,84 +62,86 @@ function Withdraw({ clearRowData, classes, rowData }) {
     setTimeout(() => { clearRowData() }, 500)
   }
 
-  const isPaying = rowData[7] === "1"
+  const isPaying = rowData.pledgeState === 'Paying'
   return (
-    <FundingContext.Consumer>
-      {({ authorizedPayments }) =>
-        <Formik
-          initialValues={{}}
-          onSubmit={async (values, { setSubmitting, resetForm, setStatus }) => {
-            const { amount } = values
-            const paymentId = isPaying ? authorizedPayments.find(r => r.ref === rowData.id)['idPayment'] : rowData.pledgeId
-            const args = isPaying ? [paymentId] : [paymentId, toWei(amount)]
-            const sendFn = isPaying ? confirmPayment : withdraw
-            try {
-              const toSend = sendFn(...args);
-              const estimateGas = await toSend.estimateGas();
-              toSend.send({ gas: estimateGas + 1000 })
-                    .then(res => {
-                      console.log({res})
-                    })
-                    .catch(e => {
-                      console.log({e})
-                    })
-                    .finally(() => {
-                      close()
-                    })
-            } catch (error) {
-              console.log(error)
-            }
-          }}
-          >
-          {({
-            values,
-            errors,
-            touched,
-            handleChange,
-            handleBlur,
-            handleSubmit,
-            setFieldValue,
-            setStatus,
-            status
-          }) => (
-            <Collapse in={show}>
-              <form autoComplete="off" onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', marginBottom: '0px' }}>
-                <Card className={classes.card} elevation={0}>
-                  <CardContent>
-                    <Typography variant="h6" component="h2">
-                      {`${isPaying ? 'Confirm' : ''} Withdraw${isPaying ? 'al' : ''} ${values.amount || ''}  ${values.amount ? getTokenLabel(rowData[6]) : ''} from Pledge ${rowData.pledgeId}`}
-                    </Typography>
-                    {!isPaying && <TextField
-                                    className={classes.amount}
-                                    id="amount"
-                                    name="amount"
-                                    label="Amount"
-                                    placeholder="Amount"
-                                    margin="normal"
-                                    variant="outlined"
-                                    onChange={handleChange}
-                                    onBlur={handleBlur}
-                                    value={values.amount || ''}
-                    />}
-                  </CardContent>
-                  <CardActions>
-                    <Button size="large" onClick={close}>Cancel</Button>
-                    <Button size="large" color="primary" type="submit">{isPaying ? 'Confirm' : 'Withdraw'}</Button>
-                  </CardActions>
-                </Card>
-              </form>
-            </Collapse>
-          )}
-        </Formik>
-      }
-    </FundingContext.Consumer>
+    <Formik
+      initialValues={{}}
+      onSubmit={async (values, { setSubmitting, resetForm, setStatus }) => {
+        const { amount } = values
+        const paymentId = isPaying ? authorizedPayment[0]['returnValues']['idPayment'] : rowData.pledgeId
+        const args = isPaying ? [paymentId] : [paymentId, toWei(amount)]
+        const sendFn = isPaying ? confirmPayment : withdraw
+        try {
+          const toSend = sendFn(...args)
+          const estimateGas = await toSend.estimateGas()
+          toSend.send({ gas: estimateGas + 1000 })
+                                          .then(res => {
+                                            console.log({res})
+                                          })
+                                          .catch(e => {
+                                            console.log({e})
+                                          })
+                                          .finally(() => {
+                                            close()
+                                          })
+        } catch (error) {
+          console.log(error)
+        }
+      }}
+    >
+      {({
+        values,
+        errors,
+        touched,
+        handleChange,
+        handleBlur,
+        handleSubmit,
+        setFieldValue,
+        setStatus,
+        status
+      }) => (
+        <Collapse in={show}>
+          <form autoComplete="off" onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', marginBottom: '0px' }}>
+            <Card className={classes.card} elevation={0}>
+              <CardContent>
+                <Typography variant="h6" component="h2">
+                  {`${isPaying ? 'Confirm' : ''} Withdraw${isPaying ? 'al' : ''} ${values.amount || ''}  ${values.amount ? getTokenLabel(rowData[6]) : ''} from Pledge ${rowData.pledgeId}`}
+                </Typography>
+                {!isPaying && <TextField
+                                className={classes.amount}
+                                id="amount"
+                                name="amount"
+                                label="Amount"
+                                placeholder="Amount"
+                                margin="normal"
+                                variant="outlined"
+                                onChange={handleChange}
+                                onBlur={handleBlur}
+                                value={values.amount || ''}
+                />}
+              </CardContent>
+              <CardActions>
+                <Button size="large" onClick={close}>Cancel</Button>
+                <Button size="large" color="primary" type="submit">{isPaying ? 'Confirm' : 'Withdraw'}</Button>
+              </CardActions>
+            </Card>
+          </form>
+        </Collapse>
+      )}
+    </Formik>
   )
 }
 
 Withdraw.propTypes = {
   classes: PropTypes.object.isRequired,
   rowData: PropTypes.object.isRequired,
-  clearRowData: PropTypes.func.isRequired
+  clearRowData: PropTypes.func.isRequired,
+  authorizedPayment: PropTypes.array.isRequired
 }
 
-export default withStyles(styles)(Withdraw)
+const styledWithdraw = withStyles(styles)(Withdraw)
+export default withDatabase(withObservables(['rowData'], ({ database, rowData }) => ({
+  authorizedPayment : database.collections.get('vault_events').query(
+    Q.where('ref', rowData.pledgeId)
+  ).observe()
+}))(styledWithdraw))

app/model/schema.js

@@ -20,6 +20,7 @@ export default appSchema({
         { name: 'address', type: 'string' },
         { name: 'event', type: 'string', isIndexed: true },
         { name: 'block_number', type: 'number', isIndexed: true },
+        { name: 'ref', type: 'number', isIndexed: true },
         { name : 'return_values', type: 'string', isOptional: true }
       ]
     }),

app/model/vaultEvent.js

@@ -14,6 +14,8 @@ export default class VaultEvent extends Model {
 
   @field('block_number') blockNumber
 
+  @field('ref') ref
+
   @json('return_values', sanitizeValues) returnValues
 
   @action async addEvent(data) {