feat: various UI improvements (#36)

* fix: content offset

When the appbar was changed to a `div` the content became offset, this fixes that.

* style: make display of cheques table more readable

* style: restyle sidebar

* fix: content overflow

* chore: split theme into separate file

* feat: show ethereum transaction link for cashout

* feat: make cashout link to etherscan transaction

Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>

src/components/CashoutModal.tsx

@@ -6,16 +6,18 @@ 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 } from '@material-ui/core';
+import { Snackbar, Container, CircularProgress } from '@material-ui/core';
 
 import { beeDebugApi } from '../services/bee';
 
-export default function DepositModal() {
-  const [open, setOpen] = React.useState(false);
-  const [peerId, setPeerId] = React.useState('');
+import EthereumAddress from './EthereumAddress';
 
-  const [showToast, setToastVisibility] = React.useState(false);
-  const [toastContent, setToastContent] = React.useState('');
+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);
 
   const handleClickOpen = () => {
     setOpen(true);
@@ -27,20 +29,31 @@ export default function DepositModal() {
 
   const handleCashout = () => {
     if (peerId) {
+        setLoadingCashout(true)
         beeDebugApi.chequebook.peerCashout(peerId)
         .then(res => {
             setOpen(false);
-            handleToast(`Successfully cashed out cheque. Transaction ${res.data.transactionHash}`)
+            handleToast(<span>Successfully cashed out cheque. Transaction 
+              <EthereumAddress
+              hideBlockie
+              transaction
+              address={res.data.transactionHash}
+              network={'goerli'}
+              />
+            </span>)
         })
         .catch(error => {
-            handleToast('Error with cashout')
+          handleToast(<span>Error with cashout</span>)
+        })
+        .finally(() => {
+          setLoadingCashout(false)
         })
     } else {
-        handleToast('Peer Id invalid')
+        handleToast(<span>Peer Id invalid</span>)
     }
   };
 
-  const handleToast = (text: string) => {
+  const handleToast = (text: JSX.Element) => {
     setToastContent(text)
     setToastVisibility(true);
     setTimeout(
@@ -61,6 +74,11 @@ export default function DepositModal() {
         />
       <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.
@@ -74,7 +92,7 @@ export default function DepositModal() {
             fullWidth
             onChange={(e) => setPeerId(e.target.value)}
           />
-        </DialogContent>
+        </DialogContent>}
         <DialogActions>
           <Button onClick={handleClose} color="primary">
             Cancel

src/components/SideBar.tsx

@@ -68,6 +68,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     activeSideBarItem: {
       borderLeft: '4px solid #dd7700',
+      backgroundColor: 'inherit !important'
     },
     toolbar: theme.mixins.toolbar,
   }),