From 95eefc96300d6ebe3fbf0574e1eb8d6c45ee4297 Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Thu, 10 Feb 2022 22:00:34 +0530
Subject: [PATCH] Adding check for transaction.id in
 useTransactionEventFragment hook (#13587)

---
 ui/hooks/useTransactionEventFragment.js | 23 ++++++++++-------------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/ui/hooks/useTransactionEventFragment.js b/ui/hooks/useTransactionEventFragment.js
index 21ea11e6b..992d7625b 100644
--- a/ui/hooks/useTransactionEventFragment.js
+++ b/ui/hooks/useTransactionEventFragment.js
@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 import { useSelector } from 'react-redux';
 
 import { useGasFeeContext } from '../contexts/gasFee';
@@ -18,23 +18,20 @@ export const useTransactionEventFragment = () => {
     }),
   );
 
-  useEffect(() => {
-    if (!fragment && transaction) {
-      createTransactionEventFragment(
-        transaction.id,
-        TRANSACTION_EVENTS.APPROVED,
-      );
-    }
-  }, [fragment, transaction]);
-
   const updateTransactionEventFragment = useCallback(
-    (params) => {
-      if (!transaction) {
+    async (params) => {
+      if (!transaction || !transaction.id) {
         return;
       }
+      if (!fragment) {
+        await createTransactionEventFragment(
+          transaction.id,
+          TRANSACTION_EVENTS.APPROVED,
+        );
+      }
       updateEventFragment(`transaction-added-${transaction.id}`, params);
     },
-    [transaction],
+    [fragment, transaction],
   );
 
   return {