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": "^17.0.2",
-    "react-dom": "18.0.0",
+    "react-dom": "^17.0.2",
-    "react-icons": "^4.3.1"
+    "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">
-        <main className="min-h-screen min-w-screen bg-zinc-700 flex flex-col">
+        <Component {...pageProps} />
-          <Component {...pageProps} />
+      </main>
-        </main>
+
-      </NirvanaToastProvider>
+      <ToastContainer
+        position="bottom-left"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+      />
     </>
   );
 }

yarn.lock

@@ -7211,14 +7211,6 @@ rcedit@^3.0.1:
   dependencies:
     cross-spawn-windows-exe "^1.1.0"
 
-[email protected]:
-  version "18.0.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0.tgz#26b88534f8f1dbb80853e1eabe752f24100d8023"
-  integrity sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==
-  dependencies:
-    loose-envify "^1.1.0"
-    scheduler "^0.21.0"
-
 react-dom@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@@ -7266,6 +7258,13 @@ react-query@^3.34.16:
     broadcast-channel "^3.4.1"
     match-sorter "^6.0.2"
 
+react-toastify@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-8.2.0.tgz#ef7d56bdfdc6272ca6b228368ab564721c3a3244"
+  integrity sha512-Pg2Ju7NngAamarFvLwqrFomJ57u/Ay6i6zfLurt/qPynWkAkOthu6vxfqYpJCyNhHRhR4hu7+bySSeWWJu6PAg==
+  dependencies:
+    clsx "^1.1.1"
+
 react-transition-group@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
@@ -7276,13 +7275,6 @@ react-transition-group@^4.4.2:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-[email protected]:
-  version "18.0.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96"
-  integrity sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==
-  dependencies:
-    loose-envify "^1.1.0"
-
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -7619,13 +7611,6 @@ scheduler@^0.20.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-scheduler@^0.21.0:
-  version "0.21.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
-  integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
-  dependencies:
-    loose-envify "^1.1.0"
-
 [email protected]:
   version "2.7.0"
   resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz"