remove listener for account change

ten-protocol · Dec 11, 2023 · dcddaa3 · dcddaa3
1 parent 4eb837e
commit dcddaa3
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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,