Refactor notification Component

src/components/LoadAccountMenu.tsx

@@ -24,8 +24,8 @@ export const LoadAccountMenu = (props: {
     const ref = useRef(null)
     const dispatch = useAppDispatch()
     const setAccount = account => dispatch(updateAccount(account))
-    const dispatchNotification = ({ message, type }) =>
-        dispatch(updateNotificationStatus({ message, severity: type }))
+    const dispatchNotification = ({ message, type, title }) =>
+        dispatch(updateNotificationStatus({ message, severity: type, title }))
     useEffectOnce(() => {
         mountAccountMenu(ref.current, {
             ...props,

src/components/Navbar/LoadMyKeysComponent.tsx

@@ -41,8 +41,8 @@ const LoadMyKeysComponent = () => {
     const ref = useRef(null)
     const dispatch = useAppDispatch()
 
-    const dispatchNotification = ({ message, type }) =>
-        dispatch(updateNotificationStatus({ message, severity: type }))
+    const dispatchNotification = ({ message, type, title }) =>
+        dispatch(updateNotificationStatus({ message, severity: type, title }))
     useEffectOnce(() => {
         mountKyesComponent(ref.current, { dispatchNotification })
     }) // eslint-disable-line react-hooks/exhaustive-deps

src/components/Navbar/LoadSaveKeysComponent.tsx

@@ -8,8 +8,8 @@ const LoadSaveKeysComponent = () => {
     const ref = useRef(null)
     const dispatch = useAppDispatch()
     const setAccount = account => dispatch(updateAccount(account))
-    const dispatchNotification = ({ message, type }) =>
-        dispatch(updateNotificationStatus({ message, severity: type }))
+    const dispatchNotification = ({ message, type, title }) =>
+        dispatch(updateNotificationStatus({ message, severity: type, title }))
     useEffectOnce(() => {
         mountSaveKyesButton(ref.current, { dispatchNotification, setAccount })
     }) // eslint-disable-line react-hooks/exhaustive-deps

src/components/Notification.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react'
-import { Alert, Snackbar } from '@mui/material'
+import { Alert, Box, Snackbar, Typography } from '@mui/material'
 import Slide, { SlideProps } from '@mui/material/Slide'
 import { useAppDispatch, useAppSelector } from '../hooks/reduxHooks'
 import {
     getNotificationMessage,
     getNotificationSeverity,
     getNotificationStatus,
+    getNotificationTitle,
     updateNotificationStatus,
 } from '../redux/slices/app-config'
 
@@ -18,6 +19,7 @@ function TransitionUp(props: TransitionProps) {
 export default function Notifications() {
     const notificationStatus = useAppSelector(getNotificationStatus)
     const notificationMessage = useAppSelector(getNotificationMessage)
+    const notificationTitle = useAppSelector(getNotificationTitle)
     const notificationSeverity = useAppSelector(getNotificationSeverity)
     const [open, setOpen] = useState(false)
     const dispatch = useAppDispatch()
@@ -46,11 +48,38 @@ export default function Notifications() {
                     TransitionComponent={transition}
                     key={transition ? transition.name : ''}
                     autoHideDuration={5000}
-                    sx={{ top: { xs: '69px !important', md: '72px !important' } }}
+                    sx={{
+                        top: {
+                            xs: '69px !important',
+                            md: '72px !important',
+                        },
+                    }}
                 >
-                    <Alert severity={notificationSeverity} sx={{ borderRadius: '12px' }}>
-                        {notificationMessage}
-                    </Alert>
+                    <Box
+                        sx={{
+                            padding: '6px 16px',
+                            backgroundColor: 'rgb(6, 12, 5)',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            borderRadius: '12px',
+                            border: '1px solid rgba(145, 158, 171, 0.24)',
+                        }}
+                    >
+                        {notificationTitle && (
+                            <Typography variant="h6">{notificationTitle}</Typography>
+                        )}
+                        <Alert
+                            severity={notificationSeverity}
+                            sx={{
+                                borderRadius: '0px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                borderWidth: 0,
+                            }}
+                        >
+                            <Typography>{notificationMessage}</Typography>
+                        </Alert>
+                    </Box>
                 </Snackbar>
             )}
         </>

src/redux/slices/app-config.ts

@@ -8,6 +8,7 @@ interface InitialStateAppConfigType {
     status: Status
     notificationStatus: boolean
     notificationMessage: string
+    notificationTitle: string
     notificationSeverity: NotificationSeverityType
     isAuth: boolean
     walletStore: any
@@ -23,6 +24,7 @@ let initialState: InitialStateAppConfigType = {
     notificationStatus: false,
     notificationSeverity: 'success',
     notificationMessage: '',
+    notificationTitle: '',
     account: null,
     showButton: false,
 }
@@ -50,6 +52,8 @@ const appConfigSlice = createSlice({
             if (payload && payload.severity) {
                 state.notificationSeverity = state.notificationStatus ? payload.severity : ''
                 state.notificationMessage = state.notificationStatus ? payload.message : ''
+                state.notificationTitle =
+                    state.notificationStatus && payload.title ? payload.title : ''
             }
         },
         updateShowButton(state) {
@@ -76,6 +80,9 @@ export const getNotificationStatus = (state: RootState) => state.appConfig.notif
 //select notification message
 export const getNotificationMessage = (state: RootState) => state.appConfig.notificationMessage
 
+//select notification message
+export const getNotificationTitle = (state: RootState) => state.appConfig.notificationTitle
+
 //select notification severity
 export const getNotificationSeverity = (state: RootState) => state.appConfig.notificationSeverity
 

src/views/wallet/WalletApp.tsx

@@ -19,8 +19,8 @@ const LoadWallet = () => {
     const ref = useRef(null)
     const navigate = useNavigate()
 
-    const dispatchNotification = ({ message, type }) =>
-        dispatch(updateNotificationStatus({ message, severity: type }))
+    const dispatchNotification = ({ message, type, title }) =>
+        dispatch(updateNotificationStatus({ message, severity: type, title }))
     const setAccount = account => dispatch(updateAccount(account))
     useEffect(() => {
         dispatch(updateValues(updateStore))