Fixed an issue where notification goes missing in GUI (#2623)

* Fixed an issue where notification goes missing in GUI

* Fixed lint errors

* Fixed notification count mismatch

* Fixed an issue where electron\'s push notification shows invalid offer

Author: ChiaMineJP

packages/gui/src/components/notification/NotificationsDropdown.tsx

@@ -4,7 +4,7 @@ import { Trans } from '@lingui/macro';
 import { Badge, Box, Button } from '@mui/material';
 import React from 'react';
 
-import useNotifications from '../../hooks/useNotifications';
+import useValidNotifications from '../../hooks/useValidNotifications';
 
 import NotificationsMenu from './NotificationsMenu';
 
@@ -21,7 +21,7 @@ const buttonStyle = (theme) => ({
 });
 
 export default function NotificationsDropdown() {
-  const { unseenCount, setAsSeen } = useNotifications();
+  const { unseenCount, setAsSeen } = useValidNotifications();
 
   return (
     <DropdownBase>

packages/gui/src/components/notification/NotificationsProvider.tsx

@@ -4,7 +4,7 @@ import {
   useLocalStorage,
 } from '@chia-network/api-react';
 import { orderBy } from 'lodash';
-import React, { useMemo, useEffect, useCallback, createContext, type ReactNode } from 'react';
+import React, { useMemo, useCallback, createContext, type ReactNode } from 'react';
 
 import type Notification from '../../@types/Notification';
 import useBlockchainNotifications from '../../hooks/useBlockchainNotifications';
@@ -21,7 +21,7 @@ export const NotificationsContext = createContext<
       isLoading: boolean;
       error?: Error;
 
-      unseenCount: number;
+      seenAt: number | undefined;
       setAsSeen: () => void;
 
       areNotificationsEnabled: boolean;
@@ -31,6 +31,8 @@ export const NotificationsContext = createContext<
 
       showNotification: (notification: Notification) => void;
       deleteNotification: (notificationId: string) => void;
+
+      showPushNotifications: (targetNotifications: Notification[]) => void;
     }
   | undefined
 >(undefined);
@@ -114,44 +116,40 @@ export default function NotificationsProvider(props: NotificationsProviderProps)
     return orderBy(list, ['timestamp'], ['desc']);
   }, [triggeredNotificationsByCurrentFingerprint, blockchainNotifications]);
 
-  const showPushNotifications = useCallback(() => {
-    // if fingerprint is not set then we can't show push notifications (user is not logged in)
-    if (!globalNotifications || !pushNotifications || isLoadingServices || !fingerprint) {
-      return;
-    }
+  const showPushNotifications = useCallback(
+    (targetNotifications: Notification[]) => {
+      // if fingerprint is not set then we can't show push notifications (user is not logged in)
+      if (!globalNotifications || !pushNotifications || isLoadingServices || !fingerprint) {
+        return;
+      }
 
-    setLastPushNotificationTimestamp((prevLastPushNotificationTimestamp = 0) => {
-      const firstUnseenNotification = notifications.find(
-        (notification) => notification.timestamp > prevLastPushNotificationTimestamp,
-      );
+      setLastPushNotificationTimestamp((prevLastPushNotificationTimestamp = 0) => {
+        const firstUnseenNotification = targetNotifications.find(
+          (notification) => notification.timestamp > prevLastPushNotificationTimestamp,
+        );
 
-      if (!firstUnseenNotification) {
-        return prevLastPushNotificationTimestamp;
-      }
+        if (!firstUnseenNotification) {
+          return prevLastPushNotificationTimestamp;
+        }
 
-      const { title, body } = pushNotificationStringsForNotificationType(firstUnseenNotification);
+        const { title, body } = pushNotificationStringsForNotificationType(firstUnseenNotification);
 
-      showPushNotification({
-        title,
-        body,
-      });
+        showPushNotification({
+          title,
+          body,
+        });
 
-      return firstUnseenNotification.timestamp;
-    });
-  }, [
-    globalNotifications,
-    pushNotifications,
-    isLoadingServices,
-    setLastPushNotificationTimestamp,
-    notifications,
-    showPushNotification,
-    fingerprint,
-  ]);
-
-  const unseenCount = useMemo(
-    () =>
-      seenAt ? notifications.filter((notification) => notification.timestamp > seenAt).length : notifications.length,
-    [seenAt, notifications],
+        return firstUnseenNotification.timestamp;
+      });
+    },
+    [
+      globalNotifications,
+      pushNotifications,
+      isLoadingServices,
+      setLastPushNotificationTimestamp,
+      showPushNotification,
+      fingerprint,
+    ],
   );
 
   const setAsSeen = useCallback(() => {
@@ -183,19 +181,15 @@ export default function NotificationsProvider(props: NotificationsProviderProps)
     [setTriggeredNotifications, deleteNotification],
   );
 
-  useEffect(() => {
-    showPushNotifications();
-  }, [showPushNotifications]);
-
   const contextValue = useMemo(
     () => ({
       // base state
       notifications,
       isLoading,
       error,
       // seen
-      unseenCount,
       setAsSeen,
+      seenAt,
       // settings
       areNotificationsEnabled: globalNotifications,
       setNotificationsEnabled: setGlobalNotifications,
@@ -204,14 +198,16 @@ export default function NotificationsProvider(props: NotificationsProviderProps)
 
       showNotification,
       deleteNotification: handleDeleteNotification,
+
+      showPushNotifications,
     }),
     [
       notifications,
       isLoading,
       error,
 
-      unseenCount,
       setAsSeen,
+      seenAt,
 
       globalNotifications,
       setGlobalNotifications,
@@ -220,6 +216,8 @@ export default function NotificationsProvider(props: NotificationsProviderProps)
 
       showNotification,
       handleDeleteNotification,
+
+      showPushNotifications,
     ],
   );
 

packages/gui/src/electron/main.tsx

@@ -14,14 +14,14 @@ import {
 import fs from 'fs';
 import path from 'path';
 import url from 'url';
-import sanitizeFilename from 'sanitize-filename';
 
 import { initialize, enable } from '@electron/remote/main';
 import axios from 'axios';
 import windowStateKeeper from 'electron-window-state';
 import React from 'react';
 // import os from 'os';
 import ReactDOMServer from 'react-dom/server';
+import sanitizeFilename from 'sanitize-filename';
 import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
 import isURL from 'validator/es/lib/isURL';
 
@@ -32,7 +32,6 @@ import AppIcon from '../assets/img/chia64x64.png';
 import About from '../components/about/About';
 import { i18n } from '../config/locales';
 import chiaEnvironment, { chiaInit } from '../util/chiaEnvironment';
-import downloadFile from './utils/downloadFile';
 import loadConfig, { checkConfigFileExists } from '../util/loadConfig';
 import manageDaemonLifetime from '../util/manageDaemonLifetime';
 import { setUserDataDir } from '../util/userData';
@@ -41,6 +40,7 @@ import CacheManager from './CacheManager';
 import { readAddressBook, saveAddressBook } from './addressBook';
 import installDevTools from './installDevTools.dev';
 import { readPrefs, savePrefs, migratePrefs } from './prefs';
+import downloadFile from './utils/downloadFile';
 
 /**
  * Open the given external protocol URL in the desktop's default manner.
@@ -330,6 +330,15 @@ if (ensureSingleInstance() && ensureCorrectEnvironment()) {
 
         const { folder, tasks } = options;
 
+        const handleDownloadProgress = (progress: any, downloadUrl: string, index: number, total: number) => {
+          mainWindow?.webContents.send('multipleDownloadProgress', {
+            progress,
+            url: downloadUrl,
+            index,
+            total,
+          });
+        };
+
         for (let i = 0; i < tasks.length; i++) {
           const { url: downloadUrl, filename } = tasks[i];
 
@@ -344,14 +353,7 @@ if (ensureSingleInstance() && ensureCorrectEnvironment()) {
             const filePath = path.join(folder, sanitizedFilename);
 
             await downloadFile(downloadUrl, filePath, {
-              onProgress: (progress) => {
-                mainWindow?.webContents.send('multipleDownloadProgress', {
-                  progress,
-                  url: downloadUrl,
-                  index: i,
-                  total: tasks.length,
-                });
-              },
+              onProgress: (progress) => handleDownloadProgress(progress, downloadUrl, i, tasks.length),
             });
 
             const fileStats = await fs.promises.stat(filePath);

packages/gui/src/electron/utils/downloadFile.ts

@@ -4,6 +4,7 @@ import { promises as fs, createWriteStream, type WriteStream } from 'fs';
 import debug from 'debug';
 
 import type Headers from '../../@types/Headers';
+
 import fileExists from './fileExists';
 
 const log = debug('chia-gui:downloadFile');

packages/gui/src/hooks/useBlockchainNotifications.tsx

@@ -76,7 +76,7 @@ export default function useBlockchainNotifications() {
           blockchainNotificationsList.map(async (notification): Promise<Notification | null> => {
             try {
               const { id, message: hexMessage, height } = notification;
-              const message = hexMessage ? Buffer.from(hexMessage, 'hex').toString() : '';
+              const message = hexMessage ? Buffer.from(hexMessage.replace(/^0x/, ''), 'hex').toString() : '';
               if (!message) {
                 throw new Error('Notification has not message');
               }

packages/gui/src/hooks/useValidNotifications.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 
 import type Notification from '../@types/Notification';
 import type OfferState from '../@types/OfferState';
@@ -32,11 +32,16 @@ function filterNotifications(notifications: Notification[], getOffer: (offerId:
 }
 
 export default function useValidNotifications() {
-  const { notifications, ...rest } = useNotifications();
+  const { notifications, seenAt, showPushNotifications, ...rest } = useNotifications();
   const { getOffer, subscribeToChanges } = useOffers();
 
   const [validNotifications, setValidNotifications] = useState(() => filterNotifications(notifications, getOffer));
 
+  const unseenCount = useMemo(
+    () => (seenAt ? validNotifications.filter((n) => n.timestamp > seenAt).length : validNotifications.length),
+    [seenAt, validNotifications],
+  );
+
   useEffect(() => {
     setValidNotifications(filterNotifications(notifications, getOffer));
   }, [notifications, getOffer]);
@@ -58,8 +63,13 @@ export default function useValidNotifications() {
     };
   }, [getOffer, notifications, subscribeToChanges]);
 
+  useEffect(() => {
+    showPushNotifications(validNotifications);
+  }, [showPushNotifications, validNotifications]);
+
   return {
     notifications: validNotifications,
+    unseenCount,
     ...rest,
   };
 }

packages/wallets/src/components/WalletHistory.tsx

@@ -385,8 +385,9 @@ export default function WalletHistory(props: Props) {
 
       const memoValues = memos ? Object.values(memos) : [];
 
-      const memoValuesDecoded = memoValues.map((memoHex) => {
+      const memoValuesDecoded = memoValues.map((mv) => {
         try {
+          const memoHex = (mv as string).replace(/^0x/, '');
           const buf = Buffer.from(memoHex, 'hex');
           const decodedValue = buf.toString('utf8');
           const bufCheck = Buffer.from(decodedValue, 'utf8');
@@ -396,7 +397,7 @@ export default function WalletHistory(props: Props) {
 
           return decodedValue;
         } catch (error: any) {
-          return memoHex;
+          return mv;
         }
       });