replace TransferDialog with TransferCard

This commit is contained in:
Barry Gitarts 2019-02-08 21:58:37 -05:00 committed by Barry G
parent 8b3221b818
commit afbe538949
3 changed files with 150 additions and 6 deletions

View File

@ -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 (
<Fragment>
<TransferDialog
row={row}
handleClose={this.handleClose}
/>
<MaterialTable
columns={[
{ title: 'Pledge Id', field: 'pledgeId', type: 'numeric' },
@ -115,8 +112,9 @@ class PledgesTable extends Component {
}
]}
/>
{!rowData && <div/>}
{rowData && <WithdrawCard rowData={rowData} clearRowData={this.clearRowData} />}
{!rowData && <div/>}
{rowData && <WithdrawCard rowData={rowData} clearRowData={this.clearRowData} />}
{row && <TransferCard row={row} handleClose={this.handleClose} />}
</Fragment>
)
}

View File

@ -8,6 +8,9 @@ const styles = {
borderBottom: '1px solid lightgray',
backgroundColor: indigo[50]
},
container: {
height: '35%'
},
bullet: {
display: 'inline-block',
margin: '0 2px',

View File

@ -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 (
<Formik
initialValues={{}}
onSubmit={async (values, { setSubmitting, resetForm, setStatus }) => {
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
}) => (
<Collapse in={show} classes={{ wrapper: classes.container }}>
<form onSubmit={handleSubmit} autoComplete="off">
<Card className={classes.card} elevation={0}>
<CardContent>
<Typography variant="h6" component="h2">Transfer Funds</Typography>
<Typography variant="subheading">
{`Transfer ${values.amount || ''} ${values.amount && row ? getTokenLabel(row.pledge.token) : ''} from Pledge ${row.pledgeId} ${values.idReceiver ? 'to Giver/Delegate/Project' : ''} ${values.idReceiver || ''}`}
</Typography>
<TextField
autoFocus
margin="normal"
id="amount"
name="amount"
label="Amount to transfer"
placeholder="Amount to transfer"
variant="outlined"
autoComplete="off"
fullWidth
onChange={handleChange}
onBlur={handleBlur}
value={values.amount || ''}
/>
<TextField
margin="normal"
id="idSender"
name="idSender"
label="Profile Id to send from"
placeholder="Profile Id to send from"
variant="outlined"
type="number"
autoComplete="off"
fullWidth
onChange={handleChange}
onBlur={handleBlur}
value={values.idSender || ''}
/>
<TextField
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
onChange={handleChange}
onBlur={handleBlur}
value={values.idReceiver || ''}
/>
<CardActions>
<Button onClick={close} color="primary">
Cancel
</Button>
<Button onClick={submitForm} color="primary" type="submit">
Transfer
</Button>
</CardActions>
</CardContent>
</Card>
</form>
</Collapse>
)}
</Formik>
)
}
export default withStyles(styles)(TransferCard)