[Human App] feat: rewrite UI notification system (#2983)

Author: adrian-oleskiewicz

packages/apps/human-app/frontend/package.json

@@ -34,6 +34,7 @@
     "lodash": "^4.17.21",
     "material-react-table": "^3.0.1",
     "mui-image": "^1.0.7",
+    "notistack": "^3.0.1",
     "query-string": "^9.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

packages/apps/human-app/frontend/src/main.tsx

@@ -19,6 +19,7 @@ import { JWTExpirationCheck } from '@/shared/contexts/jwt-expiration-check';
 import { ColorModeProvider } from '@/shared/contexts/color-mode-context';
 import { HomePageStateProvider } from '@/shared/contexts/homepage-state';
 import { RegisteredOraclesProvider } from '@/shared/contexts/registered-oracles';
+import { NotificationProvider } from '@/shared/providers/notifications-provider';
 
 const root = document.getElementById('root');
 if (!root) throw Error('root element is undefined');
@@ -35,23 +36,25 @@ createRoot(root).render(
     <ColorModeProvider>
       <CssBaseline />
       <QueryClientProvider client={queryClient}>
-        <BrowserRouter>
-          <WalletConnectProvider>
-            <HomePageStateProvider>
-              <Web3AuthProvider>
-                <AuthProvider>
-                  <DisplayModal />
-                  <JWTExpirationCheck>
-                    <RegisteredOraclesProvider>
-                      <Router />
-                    </RegisteredOraclesProvider>
-                  </JWTExpirationCheck>
-                </AuthProvider>
-              </Web3AuthProvider>
-            </HomePageStateProvider>
-            <ReactQueryDevtools client={queryClient} initialIsOpen={false} />
-          </WalletConnectProvider>
-        </BrowserRouter>
+        <NotificationProvider>
+          <BrowserRouter>
+            <WalletConnectProvider>
+              <HomePageStateProvider>
+                <Web3AuthProvider>
+                  <AuthProvider>
+                    <DisplayModal />
+                    <JWTExpirationCheck>
+                      <RegisteredOraclesProvider>
+                        <Router />
+                      </RegisteredOraclesProvider>
+                    </JWTExpirationCheck>
+                  </AuthProvider>
+                </Web3AuthProvider>
+              </HomePageStateProvider>
+              <ReactQueryDevtools client={queryClient} initialIsOpen={false} />
+            </WalletConnectProvider>
+          </BrowserRouter>
+        </NotificationProvider>
       </QueryClientProvider>
     </ColorModeProvider>
   </StrictMode>

packages/apps/human-app/frontend/src/modules/worker/components/hcaptcha-labeling/user-stats-accordion.tsx

@@ -8,7 +8,10 @@ import { useEffect } from 'react';
 import { t } from 'i18next';
 import { UserStatsDetails } from '@/modules/worker/components/hcaptcha-labeling/user-stats-details';
 import { useHCaptchaUserStats } from '@/modules/worker/services/hcaptcha-user-stats';
-import { useProtectedLayoutNotification } from '@/modules/worker/hooks/use-protected-layout-notifications';
+import {
+  TopNotificationType,
+  useNotification,
+} from '@/shared/hooks/use-notification';
 import { getErrorMessageForError } from '@/shared/errors';
 import { useColorMode } from '@/shared/hooks/use-color-mode';
 
@@ -23,13 +26,13 @@ export function UserStatsAccordion() {
     error: hcaptchaUserStatsError,
     refetch: refetchUserStats,
   } = useHCaptchaUserStats();
-  const { setTopNotification } = useProtectedLayoutNotification();
+  const { showNotification } = useNotification();
 
   useEffect(() => {
     if (isHcaptchaUserStatsError) {
-      setTopNotification({
-        type: 'warning',
-        content: getErrorMessageForError(hcaptchaUserStatsError),
+      showNotification({
+        type: TopNotificationType.WARNING,
+        message: getErrorMessageForError(hcaptchaUserStatsError),
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps -- ...

packages/apps/human-app/frontend/src/modules/worker/components/profile/profile.page.tsx

@@ -3,7 +3,10 @@ import { useEffect } from 'react';
 import { t } from 'i18next';
 import { ProfileData } from '@/modules/worker/components/profile/profile-data';
 import { ProfileActions } from '@/modules/worker/components/profile/profile-actions';
-import { useProtectedLayoutNotification } from '@/modules/worker/hooks/use-protected-layout-notifications';
+import {
+  TopNotificationType,
+  useNotification,
+} from '@/shared/hooks/use-notification';
 import { useWalletConnect } from '@/shared/hooks/use-wallet-connect';
 import { useIsMobile } from '@/shared/hooks/use-is-mobile';
 import { useAuthenticatedUser } from '@/modules/auth/hooks/use-authenticated-user';
@@ -12,16 +15,15 @@ export function WorkerProfilePage() {
   const { user } = useAuthenticatedUser();
   const isMobile = useIsMobile();
   const { isConnected } = useWalletConnect();
-  const { setTopNotification: setTopNotificationInLayout } =
-    useProtectedLayoutNotification();
+  const { showNotification } = useNotification();
 
   const setNotifications = () => {
     if (user.wallet_address) {
       return;
     }
-    setTopNotificationInLayout({
-      type: 'warning',
-      content: t('worker.profile.topNotifications.completeSteps'),
+    showNotification({
+      type: TopNotificationType.WARNING,
+      message: t('worker.profile.topNotifications.completeSteps'),
     });
   };
 

packages/apps/human-app/frontend/src/modules/worker/hooks/use-get-oracles-notifications.tsx

@@ -1,19 +1,19 @@
-import { useProtectedLayoutNotification } from '@/modules/worker/hooks/use-protected-layout-notifications';
+import {
+  TopNotificationType,
+  useNotification,
+} from '@/shared/hooks/use-notification';
 import { getErrorMessageForError } from '@/shared/errors';
-import { delay } from '@/shared/helpers/time';
 import type { ResponseError } from '@/shared/types/global.type';
 
 export function useGetOraclesNotifications() {
-  const { setTopNotification, closeNotification } =
-    useProtectedLayoutNotification();
+  const { showNotification } = useNotification();
 
-  const onError = async (error: ResponseError) => {
-    setTopNotification({
-      type: 'warning',
-      content: getErrorMessageForError(error),
+  const onError = (error: ResponseError) => {
+    showNotification({
+      type: TopNotificationType.WARNING,
+      message: getErrorMessageForError(error),
+      durationMs: 5000,
     });
-    await delay(5000);
-    closeNotification();
   };
 
   return { onError };

packages/apps/human-app/frontend/src/modules/worker/hooks/use-hcaptcha-labeling-notifications.tsx

@@ -1,30 +1,27 @@
 import { t } from 'i18next';
-import { useProtectedLayoutNotification } from '@/modules/worker/hooks/use-protected-layout-notifications';
+import {
+  TopNotificationType,
+  useNotification,
+} from '@/shared/hooks/use-notification';
 import { getErrorMessageForError } from '@/shared/errors';
-import { delay } from '@/shared/helpers/time';
 import type { ResponseError } from '@/shared/types/global.type';
 
 export function useHCaptchaLabelingNotifications() {
-  const { setTopNotification, closeNotification } =
-    useProtectedLayoutNotification();
+  const { showNotification } = useNotification();
 
-  const onSuccess = async () => {
-    setTopNotification({
-      type: 'success',
-      content: t('worker.hcaptchaLabelingStats.solvedSuccess'),
+  const onSuccess = () => {
+    showNotification({
+      type: TopNotificationType.SUCCESS,
+      message: t('worker.hcaptchaLabelingStats.solvedSuccess'),
+      durationMs: 2000,
     });
-
-    await delay(2000);
-    closeNotification();
   };
-  const onError = async (error: ResponseError) => {
-    setTopNotification({
-      type: 'warning',
-      content: getErrorMessageForError(error),
+  const onError = (error: ResponseError) => {
+    showNotification({
+      type: TopNotificationType.WARNING,
+      message: getErrorMessageForError(error),
+      durationMs: 5000,
     });
-
-    await delay(2000);
-    closeNotification();
   };
 
   return { onSuccess, onError };

packages/apps/human-app/frontend/src/modules/worker/hooks/use-jobs-notifications.tsx

@@ -1,28 +1,27 @@
 import { t } from 'i18next';
-import { useProtectedLayoutNotification } from '@/modules/worker/hooks/use-protected-layout-notifications';
+import {
+  TopNotificationType,
+  useNotification,
+} from '@/shared/hooks/use-notification';
 import { getErrorMessageForError } from '@/shared/errors';
-import { delay } from '@/shared/helpers/time';
 
 export const useJobsNotifications = () => {
-  const { setTopNotification, closeNotification } =
-    useProtectedLayoutNotification();
+  const { showNotification } = useNotification();
 
-  const onJobAssignmentSuccess = async () => {
-    setTopNotification({
-      content: t('worker.jobs.successFullyAssignedJob'),
-      type: 'success',
+  const onJobAssignmentSuccess = () => {
+    showNotification({
+      message: t('worker.jobs.successFullyAssignedJob'),
+      type: TopNotificationType.SUCCESS,
+      durationMs: 5000,
     });
-    await delay(5000);
-    closeNotification();
   };
 
-  const onJobAssignmentError = async (error: unknown) => {
-    setTopNotification({
-      content: getErrorMessageForError(error),
-      type: 'warning',
+  const onJobAssignmentError = (error: unknown) => {
+    showNotification({
+      message: getErrorMessageForError(error),
+      type: TopNotificationType.WARNING,
+      durationMs: 5000,
     });
-    await delay(5000);
-    closeNotification();
   };
 
   return { onJobAssignmentSuccess, onJobAssignmentError };

packages/apps/human-app/frontend/src/modules/worker/hooks/use-kyc-notification.tsx

@@ -1,14 +1,18 @@
-import { useProtectedLayoutNotification } from '@/modules/worker/hooks/use-protected-layout-notifications';
+import {
+  TopNotificationType,
+  useNotification,
+} from '@/shared/hooks/use-notification';
 import { getErrorMessageForError } from '@/shared/errors';
 import type { ResponseError } from '@/shared/types/global.type';
 
 export function useKycErrorNotifications() {
-  const { setTopNotification } = useProtectedLayoutNotification();
+  const { showNotification } = useNotification();
 
   return (error: ResponseError) => {
-    setTopNotification({
-      type: 'warning',
-      content: getErrorMessageForError(error),
+    showNotification({
+      type: TopNotificationType.WARNING,
+      message: getErrorMessageForError(error),
+      durationMs: 5000,
     });
   };
 }

packages/apps/human-app/frontend/src/modules/worker/hooks/use-protected-layout-notifications.tsx

@@ -1,18 +1,25 @@
-import { useProtectedLayoutNotification } from '@/modules/worker/hooks/use-protected-layout-notifications';
+import { t } from 'i18next';
+import {
+  TopNotificationType,
+  useNotification,
+} from '@/shared/hooks/use-notification';
 import { getErrorMessageForError } from '@/shared/errors';
 import type { ResponseError } from '@/shared/types/global.type';
 
 export function useRegisterAddressNotifications() {
-  const { setTopNotification, closeNotification } =
-    useProtectedLayoutNotification();
+  const { showNotification } = useNotification();
 
   const onSuccess = () => {
-    closeNotification();
+    showNotification({
+      type: TopNotificationType.SUCCESS,
+      message: t('worker.registerAddress.success'),
+    });
   };
   const onError = (error: ResponseError) => {
-    setTopNotification({
-      type: 'warning',
-      content: getErrorMessageForError(error),
+    showNotification({
+      type: TopNotificationType.WARNING,
+      message: getErrorMessageForError(error),
+      durationMs: 5000,
     });
   };