diff --git a/app/components/PledgesTable.jsx b/app/components/PledgesTable.jsx index bfea3f6..91c59ae 100644 --- a/app/components/PledgesTable.jsx +++ b/app/components/PledgesTable.jsx @@ -5,6 +5,7 @@ import { withDatabase } from '@nozbe/watermelondb/DatabaseProvider' import { toEther } from '../utils/conversions' import { getTokenLabel } from '../utils/currencies' import TransferDialog from './TransferDialog' +import TransferCard from './table/TransferCard' import WithdrawCard from './table/WithdrawCard' const convertToHours = seconds => seconds / 60 / 60 @@ -76,10 +77,6 @@ class PledgesTable extends Component { const { data, row, rowData } = this.state return ( - - {!rowData &&
} - {rowData && } + {!rowData &&
} + {rowData && } + {row && } ) } diff --git a/app/components/table/CardStyles.js b/app/components/table/CardStyles.js index 7f469f4..1cabd46 100644 --- a/app/components/table/CardStyles.js +++ b/app/components/table/CardStyles.js @@ -8,6 +8,9 @@ const styles = { borderBottom: '1px solid lightgray', backgroundColor: indigo[50] }, + container: { + height: '35%' + }, bullet: { display: 'inline-block', margin: '0 2px', diff --git a/app/components/table/TransferCard.jsx b/app/components/table/TransferCard.jsx new file mode 100644 index 0000000..3ccb67f --- /dev/null +++ b/app/components/table/TransferCard.jsx @@ -0,0 +1,143 @@ +import React, { useState, useEffect } from 'react' +import { withStyles } from '@material-ui/core/styles' +import { Formik } from 'formik' +import LiquidPledging from 'Embark/contracts/LiquidPledging' +import Button from '@material-ui/core/Button' +import Typography from '@material-ui/core/Typography' +import TextField from '@material-ui/core/TextField' +import Card from '@material-ui/core/Card' +import CardActions from '@material-ui/core/CardActions' +import CardContent from '@material-ui/core/CardContent' +import Collapse from '@material-ui/core/Collapse' +import { getTokenLabel } from '../../utils/currencies' +import { toWei } from '../../utils/conversions' +import styles from './CardStyles' + +const { transfer } = LiquidPledging.methods + +function TransferCard({ row, handleClose, classes }) { + const [show, setShow] = useState(null) + + useEffect(() => { + setShow(true) + }, []) + + const close = () => { + setShow(false) + setTimeout(() => { handleClose() }, 500) + } + + return ( + { + const { pledgeId, pledge } = row + const { idSender, amount, idReceiver } = values + const args = [idSender, pledgeId, toWei(amount.toString()), idReceiver] + const toSend = transfer(...args) + const estimatedGas = await toSend.estimateGas() + + toSend + .send({gas: estimatedGas + 1000}) + .then(async res => { + console.log({res}) + const { events: { Transfer } } = res + if (Array.isArray(Transfer)) { + Transfer.forEach(async t => { + const { to, amount } = t.returnValues + await pledge.transferTo(to, amount) + }) + } else { + const { to, amount } = Transfer.returnValues + await pledge.transferTo(to, amount) + } + }) + .catch(e => { + console.log({e}) + }) + .finally(() => { + close() + resetForm() + }) + }} + > + {({ + values, + errors, + touched, + handleChange, + handleBlur, + handleSubmit, + submitForm, + setFieldValue, + setStatus, + status + }) => ( + +
+ + + Transfer Funds + + {`Transfer ${values.amount || ''} ${values.amount && row ? getTokenLabel(row.pledge.token) : ''} from Pledge ${row.pledgeId} ${values.idReceiver ? 'to Giver/Delegate/Project' : ''} ${values.idReceiver || ''}`} + + + + + + + + + + +
+
+ )} +
+ ) +} + +export default withStyles(styles)(TransferCard)