@dynamic-labs/sdk-react-core 0.18.0-beta.29 → 0.18.0-beta.30

package/CHANGELOG.md

@@ -1,4 +1,10 @@
 
+## [0.18.0-beta.30](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-beta.29...v0.18.0-beta.30) (2023-08-04)
+
+### Bug Fixes
+
+* add improves to wallet events handling
+
 ## [0.18.0-beta.29](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-beta.28...v0.18.0-beta.29) (2023-08-03)
 
 

package/package.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.18.0-beta.29";
+var version = "0.18.0-beta.30";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.23",

package/package.js

@@ -1,4 +1,4 @@
-var version = "0.18.0-beta.29";
+var version = "0.18.0-beta.30";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.23",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "0.18.0-beta.29",
+  "version": "0.18.0-beta.30",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -16,13 +16,14 @@
     "formik": "2.2.9",
     "qrcode": "1.5.1",
     "ethers": "5.7.2",
-    "@dynamic-labs/logger": "0.18.0-beta.29",
-    "@dynamic-labs/multi-wallet": "0.18.0-beta.29",
-    "@dynamic-labs/rpc-providers": "0.18.0-beta.29",
-    "@dynamic-labs/types": "0.18.0-beta.29",
-    "@dynamic-labs/utils": "0.18.0-beta.29",
-    "@dynamic-labs/wallet-book": "0.18.0-beta.29",
-    "@dynamic-labs/wallet-connector-core": "0.18.0-beta.29"
+    "@dynamic-labs/logger": "0.18.0-beta.30",
+    "@dynamic-labs/multi-wallet": "0.18.0-beta.30",
+    "@dynamic-labs/rpc-providers": "0.18.0-beta.30",
+    "@dynamic-labs/types": "0.18.0-beta.30",
+    "@dynamic-labs/utils": "0.18.0-beta.30",
+    "@dynamic-labs/wallet-book": "0.18.0-beta.30",
+    "@dynamic-labs/wallet-connector-core": "0.18.0-beta.30",
+    "eventemitter3": "5.0.1"
   },
   "devDependencies": {
     "semver": "7.3.8"

package/src/lib/utils/hooks/index.d.ts

@@ -30,3 +30,4 @@ export { useInterval } from './useInterval/useInterval';
 export { useCountdown } from './useCountdown/useCountdown';
 export { useValidateSession } from './useValidateSession';
 export { useEventListener } from './useEventListener';
+export { useWalletConnectorEvent } from './useWalletConnectorEvent';

package/src/lib/utils/hooks/useWalletConnectorEvent/index.d.ts

@@ -0,0 +1 @@
+export { useWalletConnectorEvent } from './useWalletConnectorEvent';

package/src/lib/utils/hooks/useWalletConnectorEvent/useWalletConnectorEvent.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs');
+
+const useWalletConnectorEvent = (eventEmitters, eventName, handler) => {
+    const callbackRef = React.useRef(handler);
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+        callbackRef.current = handler;
+    }, [handler]);
+    React.useEffect(() => {
+        if (!eventEmitters)
+            return;
+        const eventEmittersArray = Array.isArray(eventEmitters)
+            ? eventEmitters
+            : [eventEmitters];
+        /**
+         * Initialize the event listeners for the wallet connectors
+         * to ensure they were initialized before listening to events
+         *
+         * This will be removed when all wallets are migrated to
+         * use the event emitter "emit" method
+         *
+         * Ticket todo - QNTM-88
+         */
+        eventEmittersArray.forEach((connector) => connector.initEventListener());
+        const uniqueEventEmitters = Array.from(new Set(eventEmittersArray));
+        const unsubscribeCallbacks = uniqueEventEmitters.map((emitter) => {
+            const callback = (...args) => {
+                callbackRef.current(emitter, ...args);
+            };
+            emitter.on(eventName, callback);
+            return () => emitter.off(eventName, callback);
+        });
+        return () => unsubscribeCallbacks.forEach((unsubscribe) => unsubscribe());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [eventEmitters, eventName]);
+};
+
+exports.useWalletConnectorEvent = useWalletConnectorEvent;

package/src/lib/utils/hooks/useWalletConnectorEvent/useWalletConnectorEvent.d.ts

@@ -0,0 +1,12 @@
+import { WalletConnector, WalletConnectorEventTypes } from '@dynamic-labs/wallet-connector-core';
+/**
+ * This type is a copy of the ArgumentMap type from eventemitter3 package.
+ * Is used extract the arguments from a event type.
+ * Then we can use the arguments to reconstruct the callback we want
+ */
+type ArgumentMap<T extends object> = {
+    [K in keyof T]: T[K] extends (...args: any[]) => void ? Parameters<T[K]> : T[K] extends any[] ? T[K] : any[];
+};
+type EventArg<Event extends keyof WalletConnectorEventTypes> = ArgumentMap<WalletConnectorEventTypes>[Extract<Event, keyof WalletConnectorEventTypes>];
+export declare const useWalletConnectorEvent: <Event_1 extends keyof WalletConnectorEventTypes = keyof WalletConnectorEventTypes>(eventEmitters: WalletConnector | WalletConnector[] | undefined, eventName: Event_1, handler: (connector: WalletConnector, ...args: EventArg<Event_1>) => void) => void;
+export {};

package/src/lib/utils/hooks/useWalletConnectorEvent/useWalletConnectorEvent.js

@@ -0,0 +1,38 @@
+import { useRef, useEffect } from 'react';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
+
+const useWalletConnectorEvent = (eventEmitters, eventName, handler) => {
+    const callbackRef = useRef(handler);
+    useIsomorphicLayoutEffect(() => {
+        callbackRef.current = handler;
+    }, [handler]);
+    useEffect(() => {
+        if (!eventEmitters)
+            return;
+        const eventEmittersArray = Array.isArray(eventEmitters)
+            ? eventEmitters
+            : [eventEmitters];
+        /**
+         * Initialize the event listeners for the wallet connectors
+         * to ensure they were initialized before listening to events
+         *
+         * This will be removed when all wallets are migrated to
+         * use the event emitter "emit" method
+         *
+         * Ticket todo - QNTM-88
+         */
+        eventEmittersArray.forEach((connector) => connector.initEventListener());
+        const uniqueEventEmitters = Array.from(new Set(eventEmittersArray));
+        const unsubscribeCallbacks = uniqueEventEmitters.map((emitter) => {
+            const callback = (...args) => {
+                callbackRef.current(emitter, ...args);
+            };
+            emitter.on(eventName, callback);
+            return () => emitter.off(eventName, callback);
+        });
+        return () => unsubscribeCallbacks.forEach((unsubscribe) => unsubscribe());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [eventEmitters, eventName]);
+};
+
+export { useWalletConnectorEvent };

package/src/lib/utils/hooks/useWalletConnectors/useWalletConnectors.cjs

@@ -44,6 +44,18 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: a
         }
         return connectedWallets;
     }, [authMode, connectedWallets, linkedWallets, user, onboardingOnlyJwt]);
+    /**
+     * This useEffect is temporary.
+     * While the wallet connectors don't use the event emitter, we need to manually
+     * initialize the bridge between the old event listeners and the new event emitter.
+     * When the wallet connectors are migrated to the new event emitter, there will be no
+     * need to initialize or teardown event listeners, then we can remove this useEffect.
+     * @todo remove this useEffect
+     * Ticket todo - QNTM-88
+     */
+    React.useEffect(() => walletsBasedOnAuthMode.forEach((wallet) => {
+        wallet.connector.initEventListener();
+    }), [walletsBasedOnAuthMode]);
     const { connectedWalletMap, computeConnectedStateForWallets, didConnectedStateLoad, } = useWalletsConnectionState.useWalletsConnectionState(walletsBasedOnAuthMode);
     const wallets = React.useMemo(() => walletsBasedOnAuthMode.map((wallet) => (Object.assign(Object.assign({}, wallet), { connected: Boolean(connectedWalletMap[wallet.id]) }))), [connectedWalletMap, walletsBasedOnAuthMode]);
     React.useEffect(() => {

package/src/lib/utils/hooks/useWalletConnectors/useWalletConnectors.js

@@ -40,6 +40,18 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: a
         }
         return connectedWallets;
     }, [authMode, connectedWallets, linkedWallets, user, onboardingOnlyJwt]);
+    /**
+     * This useEffect is temporary.
+     * While the wallet connectors don't use the event emitter, we need to manually
+     * initialize the bridge between the old event listeners and the new event emitter.
+     * When the wallet connectors are migrated to the new event emitter, there will be no
+     * need to initialize or teardown event listeners, then we can remove this useEffect.
+     * @todo remove this useEffect
+     * Ticket todo - QNTM-88
+     */
+    useEffect(() => walletsBasedOnAuthMode.forEach((wallet) => {
+        wallet.connector.initEventListener();
+    }), [walletsBasedOnAuthMode]);
     const { connectedWalletMap, computeConnectedStateForWallets, didConnectedStateLoad, } = useWalletsConnectionState(walletsBasedOnAuthMode);
     const wallets = useMemo(() => walletsBasedOnAuthMode.map((wallet) => (Object.assign(Object.assign({}, wallet), { connected: Boolean(connectedWalletMap[wallet.id]) }))), [connectedWalletMap, walletsBasedOnAuthMode]);
     useEffect(() => {

package/src/lib/utils/hooks/useWalletEventListeners/useWalletEventListeners.cjs

@@ -16,12 +16,11 @@ require('../../constants/colors.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../../shared/consts/index.cjs');
+var useWalletConnectorEvent = require('../useWalletConnectorEvent/useWalletConnectorEvent.cjs');
 
-const orderedSecondaryWalletAddresses = (wallets) => wallets.map((wallet) => wallet.address).sort();
 const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnector, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, }) => {
     const [loadingNetwork, setLoadingNetwork] = React.useState(true);
     const [network, setNetwork] = React.useState(undefined);
-    const seen = new Set();
     React.useEffect(() => {
         const fetchNetwork = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
             try {
@@ -40,36 +39,100 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         });
         fetchNetwork();
     }, [primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id]);
-    React.useEffect(() => {
+    useWalletConnectorEvent.useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'disconnect', () => {
+        logger.logger.debug('primary wallet disconnect');
+        handleLogOut();
+    });
+    useWalletConnectorEvent.useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'chainChange', (_, { chain }) => {
+        logger.logger.debug('primary wallet chain change', { chain });
         if (!primaryWallet) {
             return;
         }
-        addPrimaryWalletEventListeners(seen);
-        return () => {
-            primaryWallet.connector.teardownEventListeners();
-        };
-        // justification: we don't want to setup event listeners more than needed
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        user,
-        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address,
-        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id,
-        multiWalletWidgetState,
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
-        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.isInitialized,
-    ]);
-    React.useEffect(() => {
-        addSecondaryWalletEventListeners(seen);
-        return () => {
-            for (const wallet of secondaryWallets) {
-                wallet.connector.teardownEventListeners();
+        refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
+        // https://linear.app/dynamic-labs/issue/QNTM-84/breaking-change-rename-network-to-primarywalletnetwork
+        if (primaryWallet.chain === 'starknet') {
+            setNetwork(chain);
+        }
+        else {
+            setNetwork(parseInt(chain));
+        }
+    });
+    useWalletConnectorEvent.useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'accountChange', (_, { accounts }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        logger.logger.debug('primary wallet account change', {
+            accounts,
+        });
+        // change the api here
+        if (!primaryWallet)
+            return;
+        const [newAddress] = accounts;
+        const newWallet = secondaryWallets.find((wallet) => walletConnectorCore.isSameAddress(wallet.address, newAddress, wallet.chain));
+        if (authMode === 'connect-only') {
+            refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
+            return;
+        }
+        if (walletConnectorCore.isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain)) {
+            setMultiWalletWidgetState('idle');
+        }
+        else if (!multiWallet) {
+            yield handleLogOut();
+            return;
+        }
+        else if (multiWalletWidgetState === 'awaiting_account_switch') {
+            handleAccountChangeWhenAwaitingAccountSwitch(true, newAddress);
+        }
+        else if (multiWalletWidgetState === 'idle' && newWallet) {
+            setPrimaryWalletId(newWallet.id);
+        }
+        else if (multiWalletWidgetState === 'idle' && !newWallet) {
+            if (user) {
+                setMultiWalletWidgetState('detected_new_wallet');
+                setSelectedWalletConnector(primaryWallet.connector);
+                yield computeConnectedStateForWallets();
+                return;
             }
-        };
-    }, [
-        multiWalletWidgetState,
-        orderedSecondaryWalletAddresses(secondaryWallets).join(),
-    ]);
+        }
+        else {
+            logger.logger.error(`Unexpected multiWalletWidgetState (${multiWalletWidgetState}) and onAccountChange combination. Resetting state to idle.`);
+            setMultiWalletWidgetState('idle');
+        }
+        yield computeConnectedStateForWallets();
+    }));
+    const uniqueNonPrimaryWallets = React.useMemo(() => {
+        const primaryConnector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
+        const secondaryConnectors = secondaryWallets.map(({ connector }) => connector);
+        const allWalletConnectors = new Set([
+            ...secondaryConnectors,
+            primaryConnector,
+            selectedWalletConnector,
+        ].filter((connector) => Boolean(connector)));
+        if (primaryConnector) {
+            allWalletConnectors.delete(primaryConnector);
+        }
+        return Array.from(allWalletConnectors);
+    }, [secondaryWallets, selectedWalletConnector, primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector]);
+    useWalletConnectorEvent.useWalletConnectorEvent(uniqueNonPrimaryWallets, 'accountChange', () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        logger.logger.debug('secondary wallet account change');
+        if (authMode === 'connect-only' && secondaryWallets.length) {
+            refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
+            return;
+        }
+        if (multiWalletWidgetState === 'awaiting_account_switch') {
+            handleAccountChangeWhenAwaitingAccountSwitch(false, (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address) || '');
+        }
+        yield computeConnectedStateForWallets();
+    }));
+    useWalletConnectorEvent.useWalletConnectorEvent(uniqueNonPrimaryWallets, 'chainChange', () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        logger.logger.debug('secondary wallet chain change');
+        // We should pass the proper walletId here
+        if (!secondaryWallets.length) {
+            return;
+        }
+        refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
+    }));
+    useWalletConnectorEvent.useWalletConnectorEvent(uniqueNonPrimaryWallets, 'disconnect', () => {
+        logger.logger.debug('secondary wallet disconnect');
+        computeConnectedStateForWallets();
+    });
     const handleAccountChangeWhenAwaitingAccountSwitch = React.useCallback((isPrimaryWallet, newAddress) => {
         const linkedSecondaryWallet = secondaryWallets.find((wallet) => walletConnectorCore.isSameAddress(wallet.address, newAddress, wallet.chain));
         // this means the user is linking a new account, so we need proof of ownership...
@@ -92,120 +155,6 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         setSelectedWalletWithAction,
         setPrimaryWalletId,
     ]);
-    const addPrimaryWalletEventListeners = React.useCallback((seen) => {
-        if (!primaryWallet) {
-            return;
-        }
-        seen.add(primaryWallet.connector.name);
-        primaryWallet.connector.setupEventListeners({
-            onAccountChange: (accounts) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                const [newAddress] = accounts;
-                const newWallet = secondaryWallets.find((wallet) => walletConnectorCore.isSameAddress(wallet.address, newAddress, wallet.chain));
-                if (authMode === 'connect-only') {
-                    refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
-                    return;
-                }
-                if (walletConnectorCore.isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain)) {
-                    setMultiWalletWidgetState('idle');
-                }
-                else if (!multiWallet) {
-                    yield handleLogOut();
-                    return;
-                }
-                else if (multiWalletWidgetState === 'awaiting_account_switch') {
-                    handleAccountChangeWhenAwaitingAccountSwitch(true, newAddress);
-                }
-                else if (multiWalletWidgetState === 'idle' && newWallet) {
-                    setPrimaryWalletId(newWallet.id);
-                }
-                else if (multiWalletWidgetState === 'idle' && !newWallet) {
-                    if (user) {
-                        setMultiWalletWidgetState('detected_new_wallet');
-                        setSelectedWalletConnector(primaryWallet.connector);
-                        yield computeConnectedStateForWallets();
-                        return;
-                    }
-                }
-                else {
-                    logger.logger.error(`Unexpected multiWalletWidgetState (${multiWalletWidgetState}) and onAccountChange combination. Resetting state to idle.`);
-                    setMultiWalletWidgetState('idle');
-                }
-                yield computeConnectedStateForWallets();
-            }),
-            onChainChange: (chain) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                if (!primaryWallet) {
-                    return;
-                }
-                refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
-                // https://linear.app/dynamic-labs/issue/QNTM-84/breaking-change-rename-network-to-primarywalletnetwork
-                if (primaryWallet.chain === 'starknet') {
-                    setNetwork(chain);
-                }
-                else {
-                    setNetwork(parseInt(chain));
-                }
-            }),
-            onDisconnect: handleLogOut,
-        });
-    }, [
-        authMode,
-        primaryWallet,
-        setMultiWalletWidgetState,
-        multiWallet,
-        user,
-        computeConnectedStateForWallets,
-        handleLogOut,
-        multiWalletWidgetState,
-        secondaryWallets,
-        setSelectedWalletConnector,
-        handleAccountChangeWhenAwaitingAccountSwitch,
-        setPrimaryWalletId,
-        refreshConnectedWallet,
-    ]);
-    const addSecondaryWalletEventListeners = React.useCallback((seen) => {
-        const secondaryListeners = {
-            onAccountChange: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                if (authMode === 'connect-only' && secondaryWallets.length) {
-                    refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
-                    return;
-                }
-                if (multiWalletWidgetState === 'awaiting_account_switch') {
-                    handleAccountChangeWhenAwaitingAccountSwitch(false, (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address) || '');
-                }
-                yield computeConnectedStateForWallets();
-            }),
-            onChainChange: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                // We should pass the proper walletId here
-                if (!secondaryWallets.length) {
-                    return;
-                }
-                refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
-            }),
-            onDisconnect: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                yield computeConnectedStateForWallets();
-            }),
-        };
-        if (selectedWalletConnector && !seen.has(selectedWalletConnector.name)) {
-            seen.add(selectedWalletConnector.name);
-            selectedWalletConnector.setupEventListeners(secondaryListeners);
-        }
-        for (const wallet of secondaryWallets) {
-            if (seen.has(wallet.connector.name)) {
-                continue;
-            }
-            seen.add(wallet.connector.name);
-            wallet.connector.setupEventListeners(secondaryListeners);
-        }
-    }, [
-        authMode,
-        computeConnectedStateForWallets,
-        selectedWalletConnector,
-        selectedWalletWithAction,
-        handleAccountChangeWhenAwaitingAccountSwitch,
-        multiWalletWidgetState,
-        secondaryWallets,
-        refreshConnectedWallet,
-    ]);
     return {
         loadingNetwork,
         network,

package/src/lib/utils/hooks/useWalletEventListeners/useWalletEventListeners.js

@@ -1,5 +1,5 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useMemo, useCallback } from 'react';
 import { isSameAddress } from '@dynamic-labs/wallet-connector-core';
 import '@dynamic-labs/sdk-api';
 import { logger } from '../../../shared/logger.js';
@@ -12,12 +12,11 @@ import '../../constants/colors.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../../shared/consts/index.js';
+import { useWalletConnectorEvent } from '../useWalletConnectorEvent/useWalletConnectorEvent.js';
 
-const orderedSecondaryWalletAddresses = (wallets) => wallets.map((wallet) => wallet.address).sort();
 const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnector, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, }) => {
     const [loadingNetwork, setLoadingNetwork] = useState(true);
     const [network, setNetwork] = useState(undefined);
-    const seen = new Set();
     useEffect(() => {
         const fetchNetwork = () => __awaiter(void 0, void 0, void 0, function* () {
             try {
@@ -36,36 +35,100 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         });
         fetchNetwork();
     }, [primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id]);
-    useEffect(() => {
+    useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'disconnect', () => {
+        logger.debug('primary wallet disconnect');
+        handleLogOut();
+    });
+    useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'chainChange', (_, { chain }) => {
+        logger.debug('primary wallet chain change', { chain });
         if (!primaryWallet) {
             return;
         }
-        addPrimaryWalletEventListeners(seen);
-        return () => {
-            primaryWallet.connector.teardownEventListeners();
-        };
-        // justification: we don't want to setup event listeners more than needed
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        user,
-        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address,
-        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id,
-        multiWalletWidgetState,
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
-        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.isInitialized,
-    ]);
-    useEffect(() => {
-        addSecondaryWalletEventListeners(seen);
-        return () => {
-            for (const wallet of secondaryWallets) {
-                wallet.connector.teardownEventListeners();
+        refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
+        // https://linear.app/dynamic-labs/issue/QNTM-84/breaking-change-rename-network-to-primarywalletnetwork
+        if (primaryWallet.chain === 'starknet') {
+            setNetwork(chain);
+        }
+        else {
+            setNetwork(parseInt(chain));
+        }
+    });
+    useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'accountChange', (_, { accounts }) => __awaiter(void 0, void 0, void 0, function* () {
+        logger.debug('primary wallet account change', {
+            accounts,
+        });
+        // change the api here
+        if (!primaryWallet)
+            return;
+        const [newAddress] = accounts;
+        const newWallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain));
+        if (authMode === 'connect-only') {
+            refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
+            return;
+        }
+        if (isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain)) {
+            setMultiWalletWidgetState('idle');
+        }
+        else if (!multiWallet) {
+            yield handleLogOut();
+            return;
+        }
+        else if (multiWalletWidgetState === 'awaiting_account_switch') {
+            handleAccountChangeWhenAwaitingAccountSwitch(true, newAddress);
+        }
+        else if (multiWalletWidgetState === 'idle' && newWallet) {
+            setPrimaryWalletId(newWallet.id);
+        }
+        else if (multiWalletWidgetState === 'idle' && !newWallet) {
+            if (user) {
+                setMultiWalletWidgetState('detected_new_wallet');
+                setSelectedWalletConnector(primaryWallet.connector);
+                yield computeConnectedStateForWallets();
+                return;
             }
-        };
-    }, [
-        multiWalletWidgetState,
-        orderedSecondaryWalletAddresses(secondaryWallets).join(),
-    ]);
+        }
+        else {
+            logger.error(`Unexpected multiWalletWidgetState (${multiWalletWidgetState}) and onAccountChange combination. Resetting state to idle.`);
+            setMultiWalletWidgetState('idle');
+        }
+        yield computeConnectedStateForWallets();
+    }));
+    const uniqueNonPrimaryWallets = useMemo(() => {
+        const primaryConnector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
+        const secondaryConnectors = secondaryWallets.map(({ connector }) => connector);
+        const allWalletConnectors = new Set([
+            ...secondaryConnectors,
+            primaryConnector,
+            selectedWalletConnector,
+        ].filter((connector) => Boolean(connector)));
+        if (primaryConnector) {
+            allWalletConnectors.delete(primaryConnector);
+        }
+        return Array.from(allWalletConnectors);
+    }, [secondaryWallets, selectedWalletConnector, primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector]);
+    useWalletConnectorEvent(uniqueNonPrimaryWallets, 'accountChange', () => __awaiter(void 0, void 0, void 0, function* () {
+        logger.debug('secondary wallet account change');
+        if (authMode === 'connect-only' && secondaryWallets.length) {
+            refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
+            return;
+        }
+        if (multiWalletWidgetState === 'awaiting_account_switch') {
+            handleAccountChangeWhenAwaitingAccountSwitch(false, (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address) || '');
+        }
+        yield computeConnectedStateForWallets();
+    }));
+    useWalletConnectorEvent(uniqueNonPrimaryWallets, 'chainChange', () => __awaiter(void 0, void 0, void 0, function* () {
+        logger.debug('secondary wallet chain change');
+        // We should pass the proper walletId here
+        if (!secondaryWallets.length) {
+            return;
+        }
+        refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
+    }));
+    useWalletConnectorEvent(uniqueNonPrimaryWallets, 'disconnect', () => {
+        logger.debug('secondary wallet disconnect');
+        computeConnectedStateForWallets();
+    });
     const handleAccountChangeWhenAwaitingAccountSwitch = useCallback((isPrimaryWallet, newAddress) => {
         const linkedSecondaryWallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain));
         // this means the user is linking a new account, so we need proof of ownership...
@@ -88,120 +151,6 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         setSelectedWalletWithAction,
         setPrimaryWalletId,
     ]);
-    const addPrimaryWalletEventListeners = useCallback((seen) => {
-        if (!primaryWallet) {
-            return;
-        }
-        seen.add(primaryWallet.connector.name);
-        primaryWallet.connector.setupEventListeners({
-            onAccountChange: (accounts) => __awaiter(void 0, void 0, void 0, function* () {
-                const [newAddress] = accounts;
-                const newWallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain));
-                if (authMode === 'connect-only') {
-                    refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
-                    return;
-                }
-                if (isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain)) {
-                    setMultiWalletWidgetState('idle');
-                }
-                else if (!multiWallet) {
-                    yield handleLogOut();
-                    return;
-                }
-                else if (multiWalletWidgetState === 'awaiting_account_switch') {
-                    handleAccountChangeWhenAwaitingAccountSwitch(true, newAddress);
-                }
-                else if (multiWalletWidgetState === 'idle' && newWallet) {
-                    setPrimaryWalletId(newWallet.id);
-                }
-                else if (multiWalletWidgetState === 'idle' && !newWallet) {
-                    if (user) {
-                        setMultiWalletWidgetState('detected_new_wallet');
-                        setSelectedWalletConnector(primaryWallet.connector);
-                        yield computeConnectedStateForWallets();
-                        return;
-                    }
-                }
-                else {
-                    logger.error(`Unexpected multiWalletWidgetState (${multiWalletWidgetState}) and onAccountChange combination. Resetting state to idle.`);
-                    setMultiWalletWidgetState('idle');
-                }
-                yield computeConnectedStateForWallets();
-            }),
-            onChainChange: (chain) => __awaiter(void 0, void 0, void 0, function* () {
-                if (!primaryWallet) {
-                    return;
-                }
-                refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
-                // https://linear.app/dynamic-labs/issue/QNTM-84/breaking-change-rename-network-to-primarywalletnetwork
-                if (primaryWallet.chain === 'starknet') {
-                    setNetwork(chain);
-                }
-                else {
-                    setNetwork(parseInt(chain));
-                }
-            }),
-            onDisconnect: handleLogOut,
-        });
-    }, [
-        authMode,
-        primaryWallet,
-        setMultiWalletWidgetState,
-        multiWallet,
-        user,
-        computeConnectedStateForWallets,
-        handleLogOut,
-        multiWalletWidgetState,
-        secondaryWallets,
-        setSelectedWalletConnector,
-        handleAccountChangeWhenAwaitingAccountSwitch,
-        setPrimaryWalletId,
-        refreshConnectedWallet,
-    ]);
-    const addSecondaryWalletEventListeners = useCallback((seen) => {
-        const secondaryListeners = {
-            onAccountChange: () => __awaiter(void 0, void 0, void 0, function* () {
-                if (authMode === 'connect-only' && secondaryWallets.length) {
-                    refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
-                    return;
-                }
-                if (multiWalletWidgetState === 'awaiting_account_switch') {
-                    handleAccountChangeWhenAwaitingAccountSwitch(false, (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address) || '');
-                }
-                yield computeConnectedStateForWallets();
-            }),
-            onChainChange: () => __awaiter(void 0, void 0, void 0, function* () {
-                // We should pass the proper walletId here
-                if (!secondaryWallets.length) {
-                    return;
-                }
-                refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
-            }),
-            onDisconnect: () => __awaiter(void 0, void 0, void 0, function* () {
-                yield computeConnectedStateForWallets();
-            }),
-        };
-        if (selectedWalletConnector && !seen.has(selectedWalletConnector.name)) {
-            seen.add(selectedWalletConnector.name);
-            selectedWalletConnector.setupEventListeners(secondaryListeners);
-        }
-        for (const wallet of secondaryWallets) {
-            if (seen.has(wallet.connector.name)) {
-                continue;
-            }
-            seen.add(wallet.connector.name);
-            wallet.connector.setupEventListeners(secondaryListeners);
-        }
-    }, [
-        authMode,
-        computeConnectedStateForWallets,
-        selectedWalletConnector,
-        selectedWalletWithAction,
-        handleAccountChangeWhenAwaitingAccountSwitch,
-        multiWalletWidgetState,
-        secondaryWallets,
-        refreshConnectedWallet,
-    ]);
     return {
         loadingNetwork,
         network,