From 1d6b5d25bd36bc2db208fbb90b92b4c1a4e82af2 Mon Sep 17 00:00:00 2001
From: Aaron Cook <aaron@safe.global>
Date: Tue, 10 Oct 2023 15:16:07 +0200
Subject: [PATCH] fix: clear awaiting confirmation notifications (#2588)

* fix: clear awaiting confirmation notifications

* fix: clear notifications for messages
---
 .../messages/useSafeMessageNotifications.ts   | 35 +++++++++++--------
 src/hooks/useTxNotifications.ts               | 29 ++++++++-------
 2 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/src/hooks/messages/useSafeMessageNotifications.ts b/src/hooks/messages/useSafeMessageNotifications.ts
index 0b5ded008f..6d1c11230a 100644
--- a/src/hooks/messages/useSafeMessageNotifications.ts
+++ b/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])
 }
 
diff --git a/src/hooks/useTxNotifications.ts b/src/hooks/useTxNotifications.ts
index a2f1e12e3e..cf3924fb37 100644
--- a/src/hooks/useTxNotifications.ts
+++ b/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])
 }