adding in context for mui toast custom

packages/web/components/footer/index.tsx

@@ -1,14 +1,16 @@
 import FullMottoLogo from "../../../components/logo/fullMotto";
-import toast from "react-hot-toast";
 import { useCallback } from "react";
+import useNirvanaToast from "../providers/toastProvider";
 
 const contactEmailAddress = "[email protected]";
 
 export default function Footer() {
+  const toast = useNirvanaToast();
+
   const copyToClipboard = useCallback(() => {
     navigator.clipboard.writeText(contactEmailAddress);
 
-    toast.success("copied to clipboard");
+    toast.handleOpen("success", "copied to clipboard");
   }, []);
 
   return (

packages/web/components/providers/toastProvider.tsx

@@ -0,0 +1,65 @@
+import MuiAlert, { AlertProps } from "@mui/material/Alert";
+import React, { useState } from "react";
+
+import { AlertColor } from "@mui/material";
+import Snackbar from "@mui/material/Snackbar";
+import { useContext } from "react";
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  props,
+  ref
+) {
+  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
+});
+
+interface context {
+  handleOpen: (severity: AlertColor, message: string) => void;
+}
+
+const NirvanaToastContext = React.createContext<context>({
+  handleOpen: (
+    severity: AlertColor = "success",
+    message: string = "Success"
+  ) => {},
+});
+
+export const NirvanaToastProvider: React.FC = ({ children }) => {
+  const [open, setOpen] = useState<boolean>(false);
+
+  const [severity, setSeverity] = useState<AlertColor>("success");
+  const [message, setMessage] = useState<string>("Success");
+
+  const handleOpen = (
+    severity: AlertColor = "success",
+    message: string = "Success"
+  ) => {
+    // set severity + message first
+    setSeverity(severity);
+    setMessage(message);
+
+    // show the alert
+    setOpen(true);
+  };
+
+  const handleClose = () => setOpen(false);
+
+  const value = {
+    handleOpen,
+  };
+
+  return (
+    <NirvanaToastContext.Provider value={value}>
+      <Snackbar open={open} autoHideDuration={3000} onClose={handleClose}>
+        <Alert onClose={handleClose} severity={severity} sx={{ width: "100%" }}>
+          {message}
+        </Alert>
+      </Snackbar>
+
+      {children}
+    </NirvanaToastContext.Provider>
+  );
+};
+
+export default function useNirvanaToast() {
+  return useContext(NirvanaToastContext);
+}

packages/web/package.json

@@ -13,7 +13,6 @@
     "next": "12.1.4",
     "react": "18.0.0",
     "react-dom": "18.0.0",
-    "react-hot-toast": "^2.2.0",
     "react-icons": "^4.3.1"
   },
   "devDependencies": {

packages/web/pages/_app.tsx

@@ -2,8 +2,8 @@ import "../styles/globals.css";
 
 import type { AppProps } from "next/app";
 import Head from "next/head";
+import { NirvanaToastProvider } from "../components/providers/toastProvider";
 import React from "react";
-import { Toaster } from "react-hot-toast";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
@@ -25,9 +25,11 @@ function MyApp({ Component, pageProps }: AppProps) {
         />
       </Head>
 
-      <main className="min-h-screen min-w-screen bg-zinc-700 flex flex-col">
+      <NirvanaToastProvider>
-        <Component {...pageProps} />
+        <main className="min-h-screen min-w-screen bg-zinc-700 flex flex-col">
-      </main>
+          <Component {...pageProps} />
+        </main>
+      </NirvanaToastProvider>
     </>
   );
 }