Use global snackbar provider

src/context/WalletConnectContext.tsx

@@ -8,7 +8,7 @@ import React, {
   useCallback,
   useRef,
 } from "react";
-import { SnackbarProvider, enqueueSnackbar } from "notistack";
+import { enqueueSnackbar } from "notistack";
 import { useNavigate } from "react-router-dom";
 
 import SignClient from "@walletconnect/sign-client";
@@ -160,7 +160,6 @@ export const WalletConnectProvider = ({
       >
         {children}
       </walletConnectContext.Provider>
-      <SnackbarProvider />
     </>
   );
 };

src/index.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { Buffer } from "buffer";
+import { closeSnackbar, SnackbarProvider } from 'notistack';
+
+import CloseIcon from '@mui/icons-material/Close';
+import { IconButton } from '@mui/material';
+
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
@@ -8,11 +13,25 @@ import reportWebVitals from './reportWebVitals';
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
+
+function SnackbarCloseButton({ key } : any) {
+
+  return (
+    <IconButton onClick={() => closeSnackbar(key)}>
+      <CloseIcon color='action'/>
+    </IconButton>
+  );
+}
+
 // Reference: https://github.com/vitejs/vite/discussions/2785#discussion-3298776
 globalThis.Buffer = Buffer;
 root.render(
   <React.StrictMode>
+    <SnackbarProvider
+      action={key => <SnackbarCloseButton key={key} />}
+    >
       <App />
+    </SnackbarProvider>
   </React.StrictMode>
 );
 

src/pages/OnboardingSuccess.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { SnackbarProvider, enqueueSnackbar } from "notistack";
+import { enqueueSnackbar } from "notistack";
 import { useLocation } from "react-router-dom";
 
 import { Box, Typography } from "@mui/material";
@@ -114,7 +114,6 @@ const OnboardingSuccess = () => {
           onMessage={messageHandler}
         />
       )}
-      <SnackbarProvider />
     </Box>
   );
 };

src/pages/SignWithCosmos.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import { SnackbarProvider, enqueueSnackbar } from "notistack";
+import { enqueueSnackbar } from "notistack";
 
 import { Box, Card, CardContent, Grid, Typography } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton/LoadingButton";
@@ -205,7 +205,6 @@ const SignWithCosmos = () => {
           Send transaction
         </LoadingButton>
       </Box>
-      <SnackbarProvider />
     </Box>
   );
 };

src/pages/SignWithNitroKey.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useMemo, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { SnackbarProvider, enqueueSnackbar } from "notistack";
+import { enqueueSnackbar } from "notistack";
 import canonicalStringify from "canonical-json";
 
 import {
@@ -136,7 +136,6 @@ const SignWithNitroKey = () => {
               Sign using Nitro key
             </LoadingButton>
           </Box>
-          <SnackbarProvider />
         </Box>
       ) : (
         <>Loading...</>