refactor: Wallet Connection Bug Fix (#503, Issue #105)

- Add Starknet event listeners (accountsChanged, networkChanged) to useWeb3Wallet hook
- Ensure both MetaMask and Starknet wallet providers have proper event handling
- Gracefully handle Starknet wallets that may not support .on()/.off() methods
- Add unit test for Starknet accountsChanged event disconnection behavior
- All 9 wallet tests passing with no regressions

Author: Muyideen-js

src/hooks/__tests__/useWeb3Wallet.test.ts

@@ -155,4 +155,35 @@ describe('useWeb3Wallet', () => {
     expect(result.current.provider).toBe('starknet');
     expect(result.current.address).toBe('0xstarkaddress');
   });
+
+  it('should update Starknet connection state when Starknet accountsChanged event is fired', async () => {
+    let mockAccountListener: ((accounts: string[]) => void) | null = null;
+    mockStarknet.on.mockImplementation((event: string, callback: any) => {
+      if (event === 'accountsChanged') {
+        mockAccountListener = callback;
+      }
+    });
+
+    mockStarknet.enable.mockResolvedValue(['0xstarkaddress']);
+
+    const { result } = renderHook(() => useWeb3Wallet());
+
+    // Connect to Starknet
+    await act(async () => {
+      await result.current.connect('starknet');
+    });
+
+    expect(result.current.provider).toBe('starknet');
+    expect(result.current.address).toBe('0xstarkaddress');
+
+    // Trigger accountsChanged event on Starknet with empty accounts
+    await act(async () => {
+      if (mockAccountListener) {
+        mockAccountListener([]);
+      }
+    });
+
+    expect(result.current.isConnected).toBe(false);
+    expect(result.current.address).toBeNull();
+  });
 });

src/hooks/useWeb3Wallet.ts

@@ -379,31 +379,62 @@ export function useWeb3Wallet() {
    */
   useEffect(() => {
     if (typeof window === 'undefined') return;
-    if (state.provider !== 'metamask') return;
 
-    const ethereum = (window as Window & { ethereum?: any }).ethereum;
-    if (!ethereum) return;
+    if (state.provider === 'metamask') {
+      const ethereum = (window as Window & { ethereum?: any }).ethereum;
+      if (!ethereum) return;
 
-    const handleAccountsChanged = (accounts: string[]) => {
-      if (accounts.length === 0) {
-        disconnect();
-      } else if (accounts[0] !== state.address) {
-        setState((prev) => ({ ...prev, address: accounts[0] }));
-      }
-    };
+      const handleAccountsChanged = (accounts: string[]) => {
+        if (accounts.length === 0) {
+          disconnect();
+        } else if (accounts[0] !== state.address) {
+          setState((prev) => ({ ...prev, address: accounts[0] }));
+        }
+      };
 
-    const handleChainChanged = (chainId: string) => {
-      setState((prev) => ({ ...prev, chainId }));
-      window.location.reload(); // Reload on chain change to update contract references
-    };
+      const handleChainChanged = (chainId: string) => {
+        setState((prev) => ({ ...prev, chainId }));
+        window.location.reload(); // Reload on chain change to update contract references
+      };
 
-    ethereum.on('accountsChanged', handleAccountsChanged);
-    ethereum.on('chainChanged', handleChainChanged);
+      ethereum.on('accountsChanged', handleAccountsChanged);
+      ethereum.on('chainChanged', handleChainChanged);
 
-    return () => {
-      ethereum.removeListener('accountsChanged', handleAccountsChanged);
-      ethereum.removeListener('chainChanged', handleChainChanged);
-    };
+      return () => {
+        ethereum.removeListener('accountsChanged', handleAccountsChanged);
+        ethereum.removeListener('chainChanged', handleChainChanged);
+      };
+    } else if (state.provider === 'starknet') {
+      const starknet = (window as Window & { starknet?: any }).starknet;
+      if (!starknet) return;
+
+      const handleAccountsChanged = (accounts: string[]) => {
+        if (accounts.length === 0) {
+          disconnect();
+        } else if (accounts[0] !== state.address) {
+          setState((prev) => ({ ...prev, address: accounts[0] }));
+        }
+      };
+
+      const handleNetworkChanged = () => {
+        window.location.reload(); // Reload on network change to update contract references
+      };
+
+      if (typeof starknet.on === 'function') {
+        starknet.on('accountsChanged', handleAccountsChanged);
+        starknet.on('networkChanged', handleNetworkChanged);
+      }
+
+      return () => {
+        if (typeof starknet.off === 'function') {
+          starknet.off('accountsChanged', handleAccountsChanged);
+          starknet.off('networkChanged', handleNetworkChanged);
+        } else if (typeof starknet.removeListener === 'function') {
+          starknet.removeListener('accountsChanged', handleAccountsChanged);
+          starknet.removeListener('networkChanged', handleNetworkChanged);
+        }
+      };
+    }
   }, [state.address, state.provider, disconnect]);
 
   return {