feat: add snackbar (#492)

* feat: snackbar for error messages

Author: Manuel Gellfart

src/App.tsx

@@ -8,6 +8,7 @@ import { Unsubscribe } from "redux";
 import { CSVForm } from "./components/CSVForm";
 import { FAQModal } from "./components/FAQModal";
 import { Loading } from "./components/Loading";
+import { MessageSnackbar } from "./components/MessageSnackbar";
 import { Summary } from "./components/Summary";
 import { TransactionStatusScreen } from "./components/TransactionStatusScreen";
 import { useTokenList } from "./hooks/token";
@@ -106,7 +107,7 @@ const App: React.FC = () => {
                 </Grid>
 
                 {!pendingTx && (
-                  <Card sx={{ padding: 2, mt: 3 }}>
+                  <Card sx={{ padding: 2 }}>
                     <CSVForm />
                   </Card>
                 )}
@@ -115,24 +116,24 @@ const App: React.FC = () => {
                   {pendingTx ? (
                     <TransactionStatusScreen tx={pendingTx} reset={() => setPendingTx(undefined)} />
                   ) : (
-                    <Button
-                      variant="contained"
-                      style={{ alignSelf: "flex-start", marginTop: 16, marginBottom: 16 }}
-                      size="stretched"
-                      color={messages.length === 0 ? "primary" : "error"}
-                      onClick={submitTx}
-                      disabled={parsing || transfers.length + collectibleTransfers.length === 0}
-                    >
-                      {parsing ? (
-                        <>
-                          <CircularProgress size="small" color="secondary" /> Parsing
-                        </>
-                      ) : messages.length === 0 ? (
-                        "Submit"
-                      ) : (
-                        "Submit with errors"
-                      )}
-                    </Button>
+                    <Box display="flex" alignItems="center" gap={1}>
+                      <Button
+                        variant="contained"
+                        sx={{ alignSelf: "flex-start", display: "flex", marginTop: 2, marginBottom: 2, gap: 1 }}
+                        size="stretched"
+                        color={messages.length === 0 ? "primary" : "error"}
+                        onClick={submitTx}
+                        disabled={parsing || transfers.length + collectibleTransfers.length === 0}
+                      >
+                        {parsing && (
+                          <>
+                            <CircularProgress size={24} color="primary" /> Parsing
+                          </>
+                        )}
+                        {messages.length === 0 ? "Submit" : "Submit with errors"}
+                      </Button>
+                      <MessageSnackbar />
+                    </Box>
                   )}
                 </Card>
               </Box>

src/components/Header.tsx

@@ -0,0 +1,79 @@
+import CloseIcon from "@mui/icons-material/Close";
+import ErrorIcon from "@mui/icons-material/Error";
+import { Alert, Box, IconButton, LinearProgress, Snackbar } from "@mui/material";
+import { useEffect, useState } from "react";
+import { selectMessages } from "src/stores/slices/messageSlice";
+import { useAppSelector } from "src/stores/store";
+
+const HIDE_TIME = 7_000;
+
+export const MessageSnackbar = () => {
+  const messages = useAppSelector(selectMessages);
+
+  const [open, setOpen] = useState(false);
+  const [timeLeft, setTimeLeft] = useState(0);
+
+  useEffect(() => {
+    let timer: NodeJS.Timer | undefined = undefined;
+    if (messages.messages.length > 0) {
+      setOpen(true);
+      setTimeLeft(HIDE_TIME);
+      timer = setInterval(() => {
+        setTimeLeft((previousTime) => {
+          if (previousTime === 100) {
+            return 0;
+          }
+          return previousTime - 100;
+        });
+      }, 100);
+    }
+    return () => clearInterval(timer);
+  }, [messages.messages]);
+
+  const onClose = () => {
+    setOpen(false);
+  };
+
+  const onOpen = () => {
+    setTimeLeft(HIDE_TIME - 100);
+    setOpen(true);
+  };
+
+  return (
+    <>
+      {messages.messages.length > 0 ? (
+        <div>
+          <IconButton size="small" aria-label="close" color="error" disabled={open} onClick={onOpen}>
+            <ErrorIcon fontSize="medium" />
+          </IconButton>
+        </div>
+      ) : null}
+      <Snackbar
+        open={open}
+        anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
+        autoHideDuration={HIDE_TIME}
+        onClose={onClose}
+        action={
+          <IconButton size="small" aria-label="close" color="inherit" onClick={onClose}>
+            <CloseIcon fontSize="small" />
+          </IconButton>
+        }
+      >
+        <Box>
+          <LinearProgress
+            variant="determinate"
+            value={100 * (timeLeft / HIDE_TIME)}
+            sx={{
+              borderRadius: "6px",
+            }}
+          />
+          {messages.messages.map((message, idx) => (
+            <Alert key={idx} severity={message.severity}>
+              {message.message}
+            </Alert>
+          ))}
+        </Box>
+      </Snackbar>
+    </>
+  );
+};

src/components/MessageSnackbar.tsx

@@ -1,6 +1,8 @@
 import { AlertColor } from "@mui/material";
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
+import { RootState } from "../store";
+
 export type CodeWarning = {
   message: string;
   severity: string;
@@ -37,15 +39,11 @@ export const messageSlice = createSlice({
     removeMessage: (state, action: PayloadAction<Message>) => {
       state.messages = state.messages.filter((message) => message.message !== action.payload.message);
     },
-    hideMessages: (state) => {
-      state.showMessages = false;
-    },
-    toggleMessages: (state) => {
-      state.showMessages = !state.showMessages;
-    },
   },
 });
 
-export const { setMessages, setCodeWarnings, removeMessage, hideMessages, toggleMessages } = messageSlice.actions;
+export const { setMessages, setCodeWarnings, removeMessage } = messageSlice.actions;
+
+export const selectMessages = ({ messages }: RootState) => messages;
 
 export default messageSlice.reducer;