adding toast working with the correct downgraded react version

learned a lot about versioning and paying attention to detail when debugging

packages/web/components/footer/index.tsx

@@ -1,16 +1,14 @@
 import FullMottoLogo from "../../../components/logo/fullMotto";
+import { toast } from "react-toastify";
 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.handleOpen("success", "copied to clipboard");
+    toast.success("copied to clipboard");
   }, []);
 
   return (

packages/web/package.json

@@ -11,9 +11,10 @@
   "dependencies": {
     "@nirvana/components": "*",
     "next": "12.1.4",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
-    "react-icons": "^4.3.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
+    "react-toastify": "^8.2.0"
   },
   "devDependencies": {
     "@types/node": "17.0.23",

packages/web/pages/_app.tsx

@@ -1,9 +1,10 @@
 import "../styles/globals.css";
+import "react-toastify/dist/ReactToastify.css";
 
 import type { AppProps } from "next/app";
 import Head from "next/head";
-import { NirvanaToastProvider } from "../components/providers/toastProvider";
 import React from "react";
+import { ToastContainer } from "react-toastify";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
@@ -25,11 +26,21 @@ function MyApp({ Component, pageProps }: AppProps) {
         />
       </Head>
 
-      <NirvanaToastProvider>
-        <main className="min-h-screen min-w-screen bg-zinc-700 flex flex-col">
-          <Component {...pageProps} />
-        </main>
-      </NirvanaToastProvider>
+      <main className="min-h-screen min-w-screen bg-zinc-700 flex flex-col">
+        <Component {...pageProps} />
+      </main>
+
+      <ToastContainer
+        position="bottom-left"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+      />
     </>
   );
 }