update snackbar

package.json

@@ -18,11 +18,11 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@ethereum-attestation-service/eas-sdk": "^2.5.0",
+    "@ethereum-attestation-service/eas-sdk": "^2.2.0",
     "@fontsource/inter": "^5.0.19",
     "@fontsource/roboto": "^5.0.13",
-    "@lit-protocol/lit-node-client": "^6.4.0",
-    "@lit-protocol/types": "^6.4.0",
+    "@lit-protocol/lit-node-client": "^5.1.0",
+    "@lit-protocol/types": "^2.2.39",
     "@mui/icons-material": "^5.16.0",
     "@mui/material": "^5.16.0",
     "@rainbow-me/rainbowkit": "^2.1.3",

src/components/shared/CustomSnackbar.tsx

@@ -1,5 +1,4 @@
-import { Snackbar, Alert } from '@mui/material';
-
+import { Snackbar, Alert, AlertTitle, Link, Box } from '@mui/material';
 import useSnackbarStore from '../../store/useSnackbarStore';
 
 /**
@@ -16,18 +15,31 @@ export const CustomSnackbar = (): JSX.Element => {
       anchorOrigin={
         options?.position || { vertical: 'bottom', horizontal: 'right' }
       }
-      autoHideDuration={options?.duration}
+      autoHideDuration={options?.duration ?? 3000}
       open={open}
       onClose={closeSnackbar}
     >
       <Alert
         severity={options?.severity || 'info'}
-        sx={{ width: '100%' }}
+        sx={{ width: '100%', display: 'flex', alignItems: 'center' }}
         variant="filled"
         onClose={closeSnackbar}
+        icon={options?.icon}
+        aria-live="assertive"
       >
-        {message}
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <Box>
+            <AlertTitle>{message}</AlertTitle>
+            {options?.linkText && options?.linkUrl && (
+              <Link href={options.linkUrl} color="inherit" underline="always">
+                {options.linkText}
+              </Link>
+            )}
+          </Box>
+        </Box>
       </Alert>
     </Snackbar>
   );
 };
+
+export default CustomSnackbar;

src/store/useSnackbarStore.ts

@@ -13,6 +13,9 @@ interface SnackbarOptions {
   severity?: 'success' | 'error' | 'warning' | 'info';
   duration?: number;
   position?: SnackbarOrigin;
+  icon?: React.ReactNode;
+  linkText?: string;
+  linkUrl?: string;
 }
 
 const useSnackbarStore = create<SnackbarState>((set) => ({