Fix flashing banner for errored messages

src/features/deliveryStatus/useMessageDeliveryStatus.ts

@@ -1,13 +1,15 @@
 import { useQuery } from '@tanstack/react-query';
-import { logger } from 'ethers';
+import { useEffect } from 'react';
+import { toast } from 'react-toastify';
 
 import { Message, MessageStatus } from '../../types';
+import { logger } from '../../utils/logger';
 
 import type { MessageDeliveryStatusResponse } from './types';
 
 export function useMessageDeliveryStatus(message: Message, isReady: boolean) {
   const serializedMessage = JSON.stringify(message);
-  return useQuery(
+  const queryResult = useQuery(
     ['messageProcessTx', serializedMessage, isReady],
     async () => {
       if (!isReady || !message || message.status === MessageStatus.Delivered) return null;
@@ -29,4 +31,14 @@ export function useMessageDeliveryStatus(message: Message, isReady: boolean) {
     },
     { retry: false },
   );
+
+  // Show toast on error
+  const error = queryResult.error;
+  useEffect(() => {
+    if (error) {
+      logger.error('Error fetching delivery status', error);
+      toast.error(`${error}`);
+    }
+  }, [error]);
+  return queryResult;
 }

src/features/messages/MessageDetails.tsx

@@ -54,10 +54,7 @@ export function MessageDetails({ messageId }: { messageId: string }) {
   } = message;
   const isIcaMsg = isIcaMessage(message);
 
-  const { data: deliveryStatusResponse, error: deliveryStatusError } = useMessageDeliveryStatus(
-    message,
-    isMessageFound,
-  );
+  const { data: deliveryStatusResponse } = useMessageDeliveryStatus(message, isMessageFound);
 
   let resolvedDestTx = destTransaction;
   let resolvedMsgStatus = status;
@@ -86,14 +83,10 @@ export function MessageDetails({ messageId }: { messageId: string }) {
     } else {
       setBanner('');
     }
-
-    if (deliveryStatusError) {
-      logger.error('Error fetching delivery status', deliveryStatusError);
-      toast.error(`${deliveryStatusError}`);
-    }
-
+  }, [error, isFetching, resolvedMsgStatus, isMessageFound, setBanner]);
+  useEffect(() => {
     return () => setBanner('');
-  }, [error, deliveryStatusError, isFetching, resolvedMsgStatus, isMessageFound, setBanner]);
+  }, [setBanner]);
 
   const reExecutor = useCallback(() => {
     if (!isMessageFound || resolvedMsgStatus !== MessageStatus.Delivered) {