From 51db0e8434c26d13b2a9f05c75450b0c8ab19abc Mon Sep 17 00:00:00 2001
From: Jennifer Echenim <echenimjennifer@gmail.com>
Date: Thu, 15 Aug 2024 06:47:50 +0400
Subject: [PATCH] Fix balance fetching bug and remove unused code

---
 .../src/components/modules/bridge/index.tsx   | 28 +++++++++++--------
 .../modules/bridge/transfer-to-section.tsx    |  1 +
 .../bridge/frontend/src/hooks/useContract.ts  |  1 +
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx b/contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx
index 7f2e373ecc..0cdce44cf4 100644
--- a/contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx
+++ b/contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx
@@ -164,33 +164,37 @@ export default function Dashboard() {
   }, [address]);
 
   React.useEffect(() => {
-    const fetchTokenBalance = async (token: Token) => {
+    const fetchTokenBalance = async () => {
+      if (!token || !address) return;
+
       setLoading(true);
       try {
-        const balance = token.isNative
+        const selectedToken = tokens.find((t: Token) => t.value === token);
+        if (!selectedToken) return;
+
+        const balance = selectedToken.isNative
           ? await getNativeBalance(address)
-          : await getTokenBalance(token.address, address);
+          : await getTokenBalance(selectedToken.address, address);
+
         setFromTokenBalance(balance);
       } catch (error) {
-        console.error(error);
+        console.error("Failed to fetch balance:", error);
       } finally {
         setLoading(false);
       }
     };
 
+    fetchTokenBalance();
+
     intervalId.current = setInterval(() => {
-      if (token) {
-        const selectedToken = tokens.find((t: Token) => t.value === token);
-        if (selectedToken) {
-          fetchTokenBalance(selectedToken);
-        }
-      }
+      fetchTokenBalance();
     }, balancePollingInterval);
 
     return () => {
-      clearInterval(intervalId.current);
+      if (intervalId.current) {
+        clearInterval(intervalId.current);
+      }
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     fromChain,
     token,
diff --git a/contracts/src/bridge/frontend/src/components/modules/bridge/transfer-to-section.tsx b/contracts/src/bridge/frontend/src/components/modules/bridge/transfer-to-section.tsx
index 2d37bedecd..f201e36b79 100644
--- a/contracts/src/bridge/frontend/src/components/modules/bridge/transfer-to-section.tsx
+++ b/contracts/src/bridge/frontend/src/components/modules/bridge/transfer-to-section.tsx
@@ -73,6 +73,7 @@ export const TransferToSection = ({
     } finally {
       setIsEstimating(false);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [receiver, form, estimateGas]);
 
   useEffect(() => {
diff --git a/contracts/src/bridge/frontend/src/hooks/useContract.ts b/contracts/src/bridge/frontend/src/hooks/useContract.ts
index 00d9b132d8..0203864eda 100644
--- a/contracts/src/bridge/frontend/src/hooks/useContract.ts
+++ b/contracts/src/bridge/frontend/src/hooks/useContract.ts
@@ -71,6 +71,7 @@ export const useContract = () => {
 
   useEffect(() => {
     initializeContracts();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [memoizedConfig, provider, isL1ToL2, signer, setContractState]);
 
   const sendNative = async (receiver: string, value: string) => {