fix: clear awaiting confirmation notifications

src/hooks/messages/useSafeMessageNotifications.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import { SafeMessageStatus } from '@safe-global/safe-gateway-typescript-sdk'
 import type { SafeMessageListItem } from '@safe-global/safe-gateway-typescript-sdk'
 
@@ -80,6 +80,7 @@ const useSafeMessageNotifications = () => {
   const notifications = useAppSelector(selectNotifications)
   const chain = useCurrentChain()
   const safeAddress = useSafeAddress()
+  const notifiedAwaitingMessageHashes = useRef<Array<string>>([])
 
   const msgsNeedingConfirmation = useMemo(() => {
     if (!page?.results) {
@@ -95,21 +96,25 @@ const useSafeMessageNotifications = () => {
     }
 
     const messageHash = msgsNeedingConfirmation[0].messageHash
-    const hasNotified = notifications.some(({ groupKey }) => groupKey === messageHash)
-
-    if (!hasNotified) {
-      dispatch(
-        showNotification({
-          variant: 'info',
-          message: 'A message requires your confirmation.',
-          link: {
-            href: `${AppRoutes.transactions.messages}?safe=${chain?.shortName}:${safeAddress}`,
-            title: 'View messages',
-          },
-          groupKey: messageHash,
-        }),
-      )
+    const hasNotified = notifiedAwaitingMessageHashes.current.includes(messageHash)
+
+    if (hasNotified) {
+      return
     }
+
+    dispatch(
+      showNotification({
+        variant: 'info',
+        message: 'A message requires your confirmation.',
+        link: {
+          href: `${AppRoutes.transactions.messages}?safe=${chain?.shortName}:${safeAddress}`,
+          title: 'View messages',
+        },
+        groupKey: messageHash,
+      }),
+    )
+
+    notifiedAwaitingMessageHashes.current.push(messageHash)
   }, [dispatch, isOwner, notifications, msgsNeedingConfirmation, chain?.shortName, safeAddress])
 }
 

src/hooks/useTxNotifications.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import { formatError } from '@/utils/formatters'
 import type { LinkProps } from 'next/link'
 import { selectNotifications, showNotification } from '@/store/notificationsSlice'
@@ -110,6 +110,7 @@ const useTxNotifications = (): void => {
   const pendingTxs = useAppSelector(selectPendingTxs)
   const notifications = useAppSelector(selectNotifications)
   const wallet = useWallet()
+  const notifiedAwaitingTxIds = useRef<Array<string>>([])
 
   const txsAwaitingConfirmation = useMemo(() => {
     if (!page?.results) {
@@ -130,18 +131,22 @@ const useTxNotifications = (): void => {
     }
 
     const txId = txsAwaitingConfirmation[0].transaction.id
-    const hasNotified = notifications.some(({ groupKey }) => groupKey === txId)
-
-    if (!hasNotified) {
-      dispatch(
-        showNotification({
-          variant: 'info',
-          message: 'A transaction requires your confirmation.',
-          link: chain && getTxLink(txId, chain, safeAddress),
-          groupKey: txId,
-        }),
-      )
+    const hasNotified = notifiedAwaitingTxIds.current.includes(txId)
+
+    if (hasNotified) {
+      return
     }
+
+    dispatch(
+      showNotification({
+        variant: 'info',
+        message: 'A transaction requires your confirmation.',
+        link: chain && getTxLink(txId, chain, safeAddress),
+        groupKey: txId,
+      }),
+    )
+
+    notifiedAwaitingTxIds.current.push(txId)
   }, [chain, dispatch, isOwner, notifications, safeAddress, txsAwaitingConfirmation])
 }