From 5c2c61eeda7df028a8f31da1ca41a02321a0cf7c Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 24 Jan 2023 21:22:34 -0800
Subject: [PATCH] Add ToastProvider and ToastViewport

---
 components/Layout/index.scss | 15 +++++++++++++++
 pages/_app.tsx               | 10 +++++++---
 2 files changed, 22 insertions(+), 3 deletions(-)
 create mode 100644 components/Layout/index.scss

diff --git a/components/Layout/index.scss b/components/Layout/index.scss
new file mode 100644
index 00000000..b8403bc0
--- /dev/null
+++ b/components/Layout/index.scss
@@ -0,0 +1,15 @@
+.ToastViewport {
+  position: fixed;
+  bottom: 0px;
+  right: 0px;
+  display: flex;
+  flex-direction: column;
+  width: 340px;
+  max-width: 100vw;
+  z-index: 2147483647;
+  padding: 25px;
+  gap: 10px;
+  margin: 0px;
+  list-style: none;
+  outline: none;
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 66db9852..6cd24440 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -10,6 +10,7 @@ import { accountState } from '~utils/accountState'
 import setUserToken from '~utils/setUserToken'
 
 import '../styles/globals.scss'
+import { ToastProvider, Viewport } from '@radix-ui/react-toast'
 
 function MyApp({ Component, pageProps }: AppProps) {
   const accountCookie = getCookie('account')
@@ -43,9 +44,12 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <ThemeProvider>
-      <Layout>
-        <Component {...pageProps} />
-      </Layout>
+      <ToastProvider>
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
+        <Viewport className="ToastViewport" />
+      </ToastProvider>
     </ThemeProvider>
   )
 }