diff --git a/src/components/LoadAccountMenu.tsx b/src/components/LoadAccountMenu.tsx
index 6b9f969d..c6d4b560 100644
--- a/src/components/LoadAccountMenu.tsx
+++ b/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,
diff --git a/src/components/Navbar/LoadMyKeysComponent.tsx b/src/components/Navbar/LoadMyKeysComponent.tsx
index f5b01f9f..aebacf9b 100644
--- a/src/components/Navbar/LoadMyKeysComponent.tsx
+++ b/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
diff --git a/src/components/Navbar/LoadSaveKeysComponent.tsx b/src/components/Navbar/LoadSaveKeysComponent.tsx
index 31eec0c7..5d2ad993 100644
--- a/src/components/Navbar/LoadSaveKeysComponent.tsx
+++ b/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
diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx
index e0d69b2f..9fffba62 100644
--- a/src/components/Notification.tsx
+++ b/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',
+ },
+ }}
>
-
- {notificationMessage}
-
+
+ {notificationTitle && (
+ {notificationTitle}
+ )}
+
+ {notificationMessage}
+
+
)}
>
diff --git a/src/redux/slices/app-config.ts b/src/redux/slices/app-config.ts
index 9b5caab6..4aebf46d 100644
--- a/src/redux/slices/app-config.ts
+++ b/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
diff --git a/src/views/wallet/WalletApp.tsx b/src/views/wallet/WalletApp.tsx
index 81913c36..f3714040 100644
--- a/src/views/wallet/WalletApp.tsx
+++ b/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))