added two different behaviours for donation button in sidebar and snackbar

web/src/components/Donate/DonateDialog.js

@@ -0,0 +1,38 @@
+import ListItem from '@material-ui/core/ListItem'
+import Dialog from '@material-ui/core/Dialog'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import DialogContent from '@material-ui/core/DialogContent'
+import DialogActions from '@material-ui/core/DialogActions'
+import List from '@material-ui/core/List'
+import ButtonGroup from '@material-ui/core/ButtonGroup'
+import Button from '@material-ui/core/Button'
+
+const donateFrame =
+    '<iframe src="https://yoomoney.ru/quickpay/shop-widget?writer=seller&targets=TorrServer Donate&targets-hint=&default-sum=200&button-text=14&payment-type-choice=on&mobile-payment-type-choice=on&comment=on&hint=&successURL=&quickpay=shop&account=410013733697114" width="100%" height="302" frameborder="0" allowtransparency="true" scrolling="no"></iframe>'
+
+export default function DonateDialog ({ onClose }) {
+  return (
+      <Dialog open onClose={onClose} aria-labelledby="form-dialog-title" fullWidth>
+          <DialogTitle id="form-dialog-title">Donate</DialogTitle>
+          <DialogContent>
+              <List>
+                  <ListItem>
+                      <ButtonGroup variant="outlined" color="primary" aria-label="contained primary button group">
+                          <Button onClick={() => window.open('https://www.paypal.com/paypalme/yourok', '_blank')}>PayPal</Button>
+                          <Button onClick={() => window.open('https://yoomoney.ru/to/410013733697114', '_blank')}>Yandex.Money</Button>
+                      </ButtonGroup>
+                  </ListItem>
+                  <ListItem>
+                      <div dangerouslySetInnerHTML={{ __html: donateFrame }} />
+                  </ListItem>
+              </List>
+          </DialogContent>
+
+          <DialogActions>
+              <Button onClick={onClose} color="primary" variant="outlined">
+                  Ok
+              </Button>
+          </DialogActions>
+      </Dialog>
+  )
+}

web/src/components/Donate/index.js

@@ -0,0 +1,48 @@
+import { useState } from 'react'
+import Button from '@material-ui/core/Button'
+import Snackbar from '@material-ui/core/Snackbar'
+import IconButton from '@material-ui/core/IconButton'
+import CreditCardIcon from '@material-ui/icons/CreditCard'
+import CloseIcon from '@material-ui/icons/Close'
+import DonateDialog from './DonateDialog'
+
+export default function DonateSnackbar() {
+    const [open, setOpen] = useState(false)
+    const [snackbarOpen, setSnackbarOpen] = useState(true)
+
+    const disableSnackbar = () => {
+        setSnackbarOpen(false)
+        localStorage.setItem('snackbarIsClosed', true)
+    }
+
+    return (
+        <>
+            {open && <DonateDialog onClose={() => setOpen(false)} />}
+
+            <Snackbar
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'center',
+                }}
+                open={snackbarOpen}
+                onClose={disableSnackbar}
+                message="Donate?"
+                action={
+                    <>
+                        <Button style={{ marginRight: '10px' }} color="secondary" size="small" onClick={() => {
+                            setOpen(true)
+                            disableSnackbar()
+                        }}>
+                            <CreditCardIcon style={{ marginRight: '10px' }} fontSize="small" />
+                            Support
+                        </Button>
+
+                        <IconButton size="small" aria-label="close" color="inherit" onClick={disableSnackbar}>
+                            <CloseIcon fontSize="small" />
+                        </IconButton>
+                    </>
+                }
+            />
+        </>
+    )
+}