Added toasts/snackbars

package.json

@@ -26,6 +26,7 @@
     "react-dom": "^17.0.1",
     "react-final-form": "^6.5.3",
     "react-scripts": "4.0.1",
+    "react-toastify": "^8.1.0",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

src/app/components/App.js

@@ -13,11 +13,13 @@ import Box from "@mui/material/Box";
 import Container from "@mui/material/Container";
 import Grid from "@mui/material/Grid";
 import logo from "./assets/Logo.svg";
+import { ToastWrapper } from './atoms/ToastWrapper/ToastWrapper';
 
 const App = () => {
   return (
     <UseBeaconProvider>
       <ThemeProvider theme={defaultTheme}>
+      <ToastWrapper />
         <Box
           component="main"
           sx={{

src/app/components/atoms/ToastWrapper/ToastWrapper.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import {
+  ToastContainer
+} from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+import s from './ToastWrapper.module.css';
+
+export const ToastWrapper = () => {
+  return (
+    <ToastContainer
+      autoClose={5000}
+      limit={3}
+      position="top-center"
+      className={s.notificationContainer}
+      bodyClassName={s.toastBody}
+      toastClassName={s.notification}
+      pauseOnHover
+      closeOnClick={false}
+      pauseOnFocusLoss
+    />
+  );
+};
+
+export const toastContent = (
+  children,
+) => {
+
+  return (
+    <>
+      {children}
+    </>
+  );
+};

src/app/components/atoms/ToastWrapper/ToastWrapper.module.css

@@ -0,0 +1,44 @@
+.notificationContainer {
+    position: fixed;
+    left: calc(50% - 200px);
+    width: 400px;
+    min-width: 400px;
+    transform: none;
+    padding: 0;
+    top: 88px;
+}
+
+.notification {
+  margin-bottom: 24px;
+  width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  padding: 8px;
+  box-shadow: 0px 10px 24px rgba(0, 0, 0, 0.1);
+  border-radius: 8px
+}
+
+.toastBody {
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  line-height: 1.72;
+}
+
+.icon {
+  position: absolute;
+  top: 22px;
+  display: flex;
+  align-items: center;
+  left: 16px;
+}
+
+.closeButton {
+  position: absolute;
+  top: 22px;
+  display: flex;
+  align-items: center;
+  right: 16px;
+}

src/app/components/atoms/ToastWrapper/index.js

@@ -0,0 +1 @@
+export * from './ToastWrapper'

src/app/components/hooks/handleDeploy.js

@@ -72,6 +72,7 @@ const handleDeploy = async (
       .send();
   } catch (e) {
     console.error(e);
+    throw new Error(e.message)
   } finally {
     setFetching(false);
   }

src/app/components/hooks/useUpdateHooks.js

@@ -0,0 +1,30 @@
+import { useCallback, useRef } from 'react';
+import { toast } from 'react-toastify';
+import { toastContent } from '../atoms/ToastWrapper';
+
+export default function useUpdateToast() {
+  const toastIdRef = useRef();
+
+  return useCallback(
+    ({
+      type, render, progress, autoClose = 5000, ...restOptions
+    }) => {
+      const creationFn = type && type !== 'default' ? toast[type] : toast;
+
+      const contentRender = toastContent(render);
+
+      if (toastIdRef.current && toast.isActive(toastIdRef.current)) {
+        toast.update(toastIdRef.current, {
+          render: contentRender,
+          type,
+          progress,
+          autoClose,
+          ...restOptions,
+        });
+      } else {
+        toastIdRef.current = creationFn(contentRender);
+      }
+    },
+    [],
+  );
+}

src/app/components/layout/FormBox.js

@@ -8,6 +8,7 @@ import MainButton from "../atoms/MainButton";
 import MainSelect from "../atoms/MainSelect";
 import HorizontalStack from "../atoms/HorizontalStack";
 import Stack from "@mui/material/Stack";
+import useUpdateToast from '../hooks/useUpdateHooks';
 
 const validateInput = (
   admin,
@@ -39,20 +40,34 @@ const FormBox = () => {
   const [contractDescription, setContractDescription] = useState("");
   const [tokenType, setTokenType] = useState("Basic");
   const [, setFetching] = useState(false);
+  const updateToast = useUpdateToast();
 
   const handleClick = useCallback(async () => {
     if (validateInput(admin, contractName, contractDescription, tokens)) {
-      await handleDeploy(
-        admin,
-        contractName,
-        contractDescription,
-        tokensString,
-        tokenType,
-        Tezos.wallet,
-        setFetching
-      );
+      try {
+        await handleDeploy(
+          admin,
+          contractName,
+          contractDescription,
+          tokensString,
+          tokenType,
+          Tezos.wallet,
+          setFetching
+        );
+        updateToast({
+
+          type: 'success',
+          render: `Successfully deployed!`,
+        });
+      } catch(err) {
+        updateToast({
+          type: 'error',
+          render: `${err.name}: ${err.message}`,
+        })
+      } 
     }
   }, [
+    updateToast,
     setFetching,
     Tezos.wallet,
     tokensString,