feat: cashing out for each peer and single page accounting (#69)

* refactor: simplified accounting, removed cashing out

* feat: load uncashed amounts for all pears that have settlement

* feat: added cashout button

* refactor: changed accounting to work with current version of bee

* chore: addressed PR review comments

* chore: simplified the uncashed expression in balance table

src/components/CashoutModal.tsx

@@ -1,6 +1,5 @@
 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'
@@ -11,10 +10,15 @@ import { Snackbar, Container, CircularProgress } from '@material-ui/core'
 import { beeDebugApi } from '../services/bee'
 
 import EthereumAddress from './EthereumAddress'
+import { fromBZZbaseUnit } from '../utils'
 
-export default function DepositModal(): ReactElement {
+interface Props {
+  peerId: string
+  uncashedAmount: number
+}
+
+export default function DepositModal({ peerId, uncashedAmount }: Props): 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)
@@ -67,32 +71,33 @@ export default function DepositModal(): ReactElement {
       <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 />
-          </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', overflowWrap: 'break-word' }}>
+            {loadingCashout && (
+              <>
+                <span>
+                  Cashing out <strong>{fromBZZbaseUnit(uncashedAmount).toFixed(7)}</strong> from Peer{' '}
+                  <strong>{peerId}</strong>. Please wait...
+                </span>
+                <Container style={{ textAlign: 'center', padding: '50px' }}>
+                  <CircularProgress />
+                </Container>
+              </>
+            )}
+            {!loadingCashout && (
+              <span>
+                Are you sure you want to cashout <strong>{fromBZZbaseUnit(uncashedAmount).toFixed(7)} BZZ</strong> from
+                Peer <strong>{peerId}</strong>?
+              </span>
+            )}
+          </DialogContentText>
+        </DialogContent>
         <DialogActions>
           <Button onClick={handleClose} color="primary">
             Cancel
           </Button>
-          <Button onClick={handleCashout} color="primary">
-            Cashout
+          <Button onClick={handleCashout} color="primary" disabled={loadingCashout}>
+            Yes Cashout
           </Button>
         </DialogActions>
       </Dialog>