From dcddaa323e8b5721b6bbcc2940683b9ff9187164 Mon Sep 17 00:00:00 2001
From: Jennifer Echenim <echenimjennifer@gmail.com>
Date: Mon, 11 Dec 2023 16:59:52 +0400
Subject: [PATCH] remove listener for account change

---
 .../src/components/layouts/footer.tsx         |  8 ++++
 .../src/components/modules/home/connected.tsx |  9 +----
 .../components/providers/wallet-provider.tsx  | 39 +++++++------------
 3 files changed, 22 insertions(+), 34 deletions(-)

diff --git a/tools/walletextension/frontend/src/components/layouts/footer.tsx b/tools/walletextension/frontend/src/components/layouts/footer.tsx
index 8cc2f0de75..946b321758 100644
--- a/tools/walletextension/frontend/src/components/layouts/footer.tsx
+++ b/tools/walletextension/frontend/src/components/layouts/footer.tsx
@@ -5,8 +5,11 @@ import {
   TwitterLogoIcon,
   DiscordLogoIcon,
 } from "@radix-ui/react-icons";
+import { useWalletConnection } from "../providers/wallet-provider";
 
 export default function Footer() {
+  const { version } = useWalletConnection();
+
   return (
     <div className="border-t px-2">
       <div className="flex h-16 items-center px-4">
@@ -33,6 +36,11 @@ export default function Footer() {
             <DiscordLogoIcon />
           </a>
         </div>
+        <div className="flex-1 flex items-center justify-center">
+          <h3 className="text-sm text-muted-foreground">
+            Version: {version || "Unknown"}
+          </h3>
+        </div>
         <div className="flex items-center space-x-4">
           <Link
             href="/docs/privacy"
diff --git a/tools/walletextension/frontend/src/components/modules/home/connected.tsx b/tools/walletextension/frontend/src/components/modules/home/connected.tsx
index 39bb850b64..1238595a92 100644
--- a/tools/walletextension/frontend/src/components/modules/home/connected.tsx
+++ b/tools/walletextension/frontend/src/components/modules/home/connected.tsx
@@ -16,8 +16,7 @@ import { socialLinks } from "../../../lib/constants";
 import { Skeleton } from "../../ui/skeleton";
 
 const Connected = () => {
-  const { accounts, connectAccount, version, revokeAccounts } =
-    useWalletConnection();
+  const { accounts, connectAccount, revokeAccounts } = useWalletConnection();
 
   return (
     <>
@@ -84,12 +83,6 @@ const Connected = () => {
           )}
         </TableBody>
       </Table>
-
-      <div className="mt-8">
-        <h3 className="text-sm text-muted-foreground">
-          Version: {version || "Unknown"}
-        </h3>
-      </div>
     </>
   );
 };
diff --git a/tools/walletextension/frontend/src/components/providers/wallet-provider.tsx b/tools/walletextension/frontend/src/components/providers/wallet-provider.tsx
index c7a507c374..2210b49183 100644
--- a/tools/walletextension/frontend/src/components/providers/wallet-provider.tsx
+++ b/tools/walletextension/frontend/src/components/providers/wallet-provider.tsx
@@ -43,40 +43,22 @@ export const WalletConnectionProvider = ({
   const [accounts, setAccounts] = useState<Account[] | null>(null);
   const [provider, setProvider] = useState({} as ethers.providers.Web3Provider);
 
-  useEffect(() => {
-    initialize();
-    ethereum.on("accountsChanged", handleAccountsChanged);
-
-    return () => {
-      ethereum.removeListener("accountsChanged", handleAccountsChanged);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const handleAccountsChanged = async () => {
-    if (!ethereum) {
-      return;
-    }
-    const status = await ethService.isUserConnectedToTenChain(token);
-    await fetchUserAccounts();
-    setWalletConnected(status);
-  };
-
   const initialize = async () => {
-    if (!ethereum) {
-      showToast(
-        ToastType.DESTRUCTIVE,
-        "Please install Metamask to connect your wallet."
-      );
-      return;
-    }
     try {
+      if (!ethereum) {
+        showToast(
+          ToastType.DESTRUCTIVE,
+          "Please install Metamask to connect your wallet."
+        );
+        return;
+      }
       const providerInstance = new ethers.providers.Web3Provider(ethereum);
       setProvider(providerInstance);
       await ethService.checkIfMetamaskIsLoaded(providerInstance);
 
       const fetchedToken = await getToken(providerInstance);
       setToken(fetchedToken);
+
       const status = await ethService.isUserConnectedToTenChain(fetchedToken);
       setWalletConnected(status);
 
@@ -179,6 +161,11 @@ export const WalletConnectionProvider = ({
     }
   };
 
+  useEffect(() => {
+    initialize();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const walletConnectionContextValue: WalletConnectionContextType = {
     walletConnected,
     accounts,