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))