style: add eslint configuration and fixed linter issues (#35)
* style: add eslint configuration as per bee-js * chore: add `plugin:react/reocommended` in `.eslintrc` Co-authored-by: nugaon <50576770+nugaon@users.noreply.github.com> * chore: add `consistent` to `array-bracket-newline` as per review * style: after automatic fixes with `npm run lint` * style: fixed all linter errors * refactor: fixed all linter warnings * chore: added missing new line at end of `.prettierrc` file Co-authored-by: nugaon <50576770+nugaon@users.noreply.github.com>
This commit is contained in:
@@ -1,98 +1,92 @@
|
||||
import React from 'react';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Input from '@material-ui/core/Input';
|
||||
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';
|
||||
import { Snackbar, Container, CircularProgress } from '@material-ui/core';
|
||||
import { ReactElement, useState } from 'react'
|
||||
import Button from '@material-ui/core/Button'
|
||||
import Input from '@material-ui/core/Input'
|
||||
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'
|
||||
import { Snackbar, Container, CircularProgress } from '@material-ui/core'
|
||||
|
||||
import { beeDebugApi } from '../services/bee';
|
||||
import { beeDebugApi } from '../services/bee'
|
||||
|
||||
import EthereumAddress from './EthereumAddress';
|
||||
import EthereumAddress from './EthereumAddress'
|
||||
|
||||
export default function DepositModal() {
|
||||
const [open, setOpen] = React.useState<boolean>(false);
|
||||
const [peerId, setPeerId] = React.useState('');
|
||||
const [loadingCashout, setLoadingCashout] = React.useState<boolean>(false);
|
||||
const [showToast, setToastVisibility] = React.useState<boolean>(false);
|
||||
const [toastContent, setToastContent] = React.useState<JSX.Element | null>(null);
|
||||
export default function DepositModal(): ReactElement {
|
||||
const [open, setOpen] = useState<boolean>(false)
|
||||
const [peerId, setPeerId] = useState('')
|
||||
const [loadingCashout, setLoadingCashout] = useState<boolean>(false)
|
||||
const [showToast, setToastVisibility] = useState<boolean>(false)
|
||||
const [toastContent, setToastContent] = useState<JSX.Element | null>(null)
|
||||
|
||||
const handleClickOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
setOpen(false)
|
||||
}
|
||||
|
||||
const handleCashout = () => {
|
||||
if (peerId) {
|
||||
setLoadingCashout(true)
|
||||
beeDebugApi.chequebook.peerCashout(peerId)
|
||||
setLoadingCashout(true)
|
||||
beeDebugApi.chequebook
|
||||
.peerCashout(peerId)
|
||||
.then(res => {
|
||||
setOpen(false);
|
||||
handleToast(<span>Successfully cashed out cheque. Transaction
|
||||
<EthereumAddress
|
||||
hideBlockie
|
||||
transaction
|
||||
address={res.transactionHash}
|
||||
network={'goerli'}
|
||||
/>
|
||||
</span>)
|
||||
setOpen(false)
|
||||
handleToast(
|
||||
<span>
|
||||
Successfully cashed out cheque. Transaction
|
||||
<EthereumAddress hideBlockie transaction address={res.transactionHash} network={'goerli'} />
|
||||
</span>,
|
||||
)
|
||||
})
|
||||
.catch(error => {
|
||||
.catch(() => {
|
||||
// FIXME: handle errors more gracefully
|
||||
handleToast(<span>Error with cashout</span>)
|
||||
})
|
||||
.finally(() => {
|
||||
setLoadingCashout(false)
|
||||
})
|
||||
} else {
|
||||
handleToast(<span>Peer Id invalid</span>)
|
||||
handleToast(<span>Peer Id invalid</span>)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const handleToast = (text: JSX.Element) => {
|
||||
setToastContent(text)
|
||||
setToastVisibility(true);
|
||||
setTimeout(
|
||||
() => setToastVisibility(false),
|
||||
7000
|
||||
);
|
||||
};
|
||||
setToastVisibility(true)
|
||||
setTimeout(() => setToastVisibility(false), 7000)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button variant="contained" color="primary" onClick={handleClickOpen} style={{marginLeft:'7px'}}>
|
||||
<Button variant="contained" color="primary" onClick={handleClickOpen} style={{ marginLeft: '7px' }}>
|
||||
Cashout
|
||||
</Button>
|
||||
<Snackbar
|
||||
anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
|
||||
open={showToast}
|
||||
message={toastContent}
|
||||
/>
|
||||
<Snackbar anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={showToast} message={toastContent} />
|
||||
<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
|
||||
<DialogTitle id="form-dialog-title">Cashout Cheque</DialogTitle>
|
||||
{loadingCashout ?
|
||||
<Container style={{textAlign:'center', padding:'50px'}}>
|
||||
<CircularProgress />
|
||||
{loadingCashout ? (
|
||||
<Container style={{ textAlign: 'center', padding: '50px' }}>
|
||||
<CircularProgress />
|
||||
</Container>
|
||||
:
|
||||
<DialogContent>
|
||||
<DialogContentText style={{marginTop: '20px'}}>
|
||||
Specify the peer Id of the peer you would like to cashout.
|
||||
</DialogContentText>
|
||||
<Input
|
||||
autoFocus
|
||||
margin="dense"
|
||||
id="peerId"
|
||||
type="text"
|
||||
placeholder='Peer Id'
|
||||
fullWidth
|
||||
onChange={(e) => setPeerId(e.target.value)}
|
||||
/>
|
||||
</DialogContent>}
|
||||
) : (
|
||||
<DialogContent>
|
||||
<DialogContentText style={{ marginTop: '20px' }}>
|
||||
Specify the peer Id of the peer you would like to cashout.
|
||||
</DialogContentText>
|
||||
<Input
|
||||
autoFocus
|
||||
margin="dense"
|
||||
id="peerId"
|
||||
type="text"
|
||||
placeholder="Peer Id"
|
||||
fullWidth
|
||||
onChange={e => setPeerId(e.target.value)}
|
||||
/>
|
||||
</DialogContent>
|
||||
)}
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="primary">
|
||||
Cancel
|
||||
@@ -103,5 +97,5 @@ export default function DepositModal() {
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user