@dynamic-labs/sdk-react-core 0.19.0-alpha.0 → 0.19.0-alpha.1

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

@@ -16,8 +16,8 @@ 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);
@@ -39,31 +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;
         }
-        const seen = new Set();
-        addPrimaryWalletEventListeners(seen);
-        addSecondaryWalletEventListeners(seen);
-        return () => {
-            primaryWallet.connector.teardownEventListeners();
-            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;
             }
-        };
-        // 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
-        orderedSecondaryWalletAddresses(secondaryWallets).join(),
-        selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
-        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.isInitialized,
-    ]);
+        }
+        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...
@@ -86,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,8 +12,8 @@ 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);
@@ -35,31 +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;
         }
-        const seen = new Set();
-        addPrimaryWalletEventListeners(seen);
-        addSecondaryWalletEventListeners(seen);
-        return () => {
-            primaryWallet.connector.teardownEventListeners();
-            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;
             }
-        };
-        // 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
-        orderedSecondaryWalletAddresses(secondaryWallets).join(),
-        selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
-        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.isInitialized,
-    ]);
+        }
+        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...
@@ -82,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,

package/src/lib/views/AccountExistsView/AccountExistsView.cjs

@@ -39,7 +39,7 @@ require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 var useMutation = require('../../utils/hooks/useMutation/useMutation.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
-var useGetSocialIcon = require('../../utils/hooks/useGetSocialIcon/useGetSocialIcon.cjs');
+var useFindSocialIcon = require('../../utils/hooks/useFindSocialIcon/useFindSocialIcon.cjs');
 var IconListTile = require('../../components/IconListTile/IconListTile.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
@@ -55,7 +55,7 @@ const AccountExistsView = () => {
     const { existentAccountData } = AccountExistsContext.useAccountExistsContext();
     const { email, embeddedSocialSigninProvider } = existentAccountData || {};
     const { socialProvider, setSocialProvider, socialWalletConnector } = SocialRedirectContext.useSocialRedirectContext();
-    const getSocialIcon = useGetSocialIcon.useGetSocialIcon();
+    const findSocialIcon = useFindSocialIcon.useFindSocialIcon();
     const { mutate: handleNewLoging } = useMutation.useMutation(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         setSocialProvider(embeddedSocialSigninProvider);
         yield (socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.endSession());
@@ -67,7 +67,7 @@ const AccountExistsView = () => {
             : '. Please log in with your email.';
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["It looks like an account already exists using ", jsxRuntime.jsx("strong", { children: email }), '', messageTrail] }));
     };
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'account-exists__container' }, { children: [jsxRuntime.jsx(iconic.UserProfileIcon, { className: 'account-exists__image' }), jsxRuntime.jsxs("div", Object.assign({ className: 'account-exists__main' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'account-exists__content' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'account-exists__content--secondary' }, { children: renderFullMessage() })) })), embeddedSocialSigninProvider ? (jsxRuntime.jsxs(IconListTile.IconListTile, Object.assign({ dataTestId: `inline-${embeddedSocialSigninProvider}`, onClick: () => handleNewLoging(), className: 'social-sign-in--tile' }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: getSocialIcon(embeddedSocialSigninProvider), isSpinning: socialProvider === embeddedSocialSigninProvider, iconSize: 32 }), jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with", ' ', capitalize.capitalize(embeddedSocialSigninProvider === null || embeddedSocialSigninProvider === void 0 ? void 0 : embeddedSocialSigninProvider.toString())] }))] }), embeddedSocialSigninProvider)) : (jsxRuntime.jsx(LoginWithEmailForm.LoginWithEmailForm, {}))] }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'account-exists__container' }, { children: [jsxRuntime.jsx(iconic.UserProfileIcon, { className: 'account-exists__image' }), jsxRuntime.jsxs("div", Object.assign({ className: 'account-exists__main' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'account-exists__content' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'account-exists__content--secondary' }, { children: renderFullMessage() })) })), embeddedSocialSigninProvider ? (jsxRuntime.jsxs(IconListTile.IconListTile, Object.assign({ dataTestId: `inline-${embeddedSocialSigninProvider}`, onClick: () => handleNewLoging(), className: 'social-sign-in--tile' }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: findSocialIcon(embeddedSocialSigninProvider), isSpinning: socialProvider === embeddedSocialSigninProvider, iconSize: 32 }), jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with", ' ', capitalize.capitalize(embeddedSocialSigninProvider === null || embeddedSocialSigninProvider === void 0 ? void 0 : embeddedSocialSigninProvider.toString())] }))] }), embeddedSocialSigninProvider)) : (jsxRuntime.jsx(LoginWithEmailForm.LoginWithEmailForm, {}))] }))] })));
 };
 
 exports.AccountExistsView = AccountExistsView;

package/src/lib/views/AccountExistsView/AccountExistsView.js

@@ -35,7 +35,7 @@ import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import { useMutation } from '../../utils/hooks/useMutation/useMutation.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
-import { useGetSocialIcon } from '../../utils/hooks/useGetSocialIcon/useGetSocialIcon.js';
+import { useFindSocialIcon } from '../../utils/hooks/useFindSocialIcon/useFindSocialIcon.js';
 import { IconListTile } from '../../components/IconListTile/IconListTile.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
@@ -51,7 +51,7 @@ const AccountExistsView = () => {
     const { existentAccountData } = useAccountExistsContext();
     const { email, embeddedSocialSigninProvider } = existentAccountData || {};
     const { socialProvider, setSocialProvider, socialWalletConnector } = useSocialRedirectContext();
-    const getSocialIcon = useGetSocialIcon();
+    const findSocialIcon = useFindSocialIcon();
     const { mutate: handleNewLoging } = useMutation(() => __awaiter(void 0, void 0, void 0, function* () {
         setSocialProvider(embeddedSocialSigninProvider);
         yield (socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.endSession());
@@ -63,7 +63,7 @@ const AccountExistsView = () => {
             : '. Please log in with your email.';
         return (jsxs(Fragment, { children: ["It looks like an account already exists using ", jsx("strong", { children: email }), '', messageTrail] }));
     };
-    return (jsxs("div", Object.assign({ className: 'account-exists__container' }, { children: [jsx(UserProfileIcon, { className: 'account-exists__image' }), jsxs("div", Object.assign({ className: 'account-exists__main' }, { children: [jsx("div", Object.assign({ className: 'account-exists__content' }, { children: jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'account-exists__content--secondary' }, { children: renderFullMessage() })) })), embeddedSocialSigninProvider ? (jsxs(IconListTile, Object.assign({ dataTestId: `inline-${embeddedSocialSigninProvider}`, onClick: () => handleNewLoging(), className: 'social-sign-in--tile' }, { children: [jsx(IconWithSpinner, { Icon: getSocialIcon(embeddedSocialSigninProvider), isSpinning: socialProvider === embeddedSocialSigninProvider, iconSize: 32 }), jsxs(Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with", ' ', capitalize(embeddedSocialSigninProvider === null || embeddedSocialSigninProvider === void 0 ? void 0 : embeddedSocialSigninProvider.toString())] }))] }), embeddedSocialSigninProvider)) : (jsx(LoginWithEmailForm, {}))] }))] })));
+    return (jsxs("div", Object.assign({ className: 'account-exists__container' }, { children: [jsx(UserProfileIcon, { className: 'account-exists__image' }), jsxs("div", Object.assign({ className: 'account-exists__main' }, { children: [jsx("div", Object.assign({ className: 'account-exists__content' }, { children: jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'account-exists__content--secondary' }, { children: renderFullMessage() })) })), embeddedSocialSigninProvider ? (jsxs(IconListTile, Object.assign({ dataTestId: `inline-${embeddedSocialSigninProvider}`, onClick: () => handleNewLoging(), className: 'social-sign-in--tile' }, { children: [jsx(IconWithSpinner, { Icon: findSocialIcon(embeddedSocialSigninProvider), isSpinning: socialProvider === embeddedSocialSigninProvider, iconSize: 32 }), jsxs(Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with", ' ', capitalize(embeddedSocialSigninProvider === null || embeddedSocialSigninProvider === void 0 ? void 0 : embeddedSocialSigninProvider.toString())] }))] }), embeddedSocialSigninProvider)) : (jsx(LoginWithEmailForm, {}))] }))] })));
 };
 
 export { AccountExistsView };

package/src/lib/views/CollectUserDataView/UserDataFields/index.cjs

@@ -41,6 +41,7 @@ require('../../../components/Alert/Alert.cjs');
 require('../../../context/MockContext/MockContext.cjs');
 require('../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var Tooltip = require('../../../components/Tooltip/Tooltip.cjs');
 require('../../../components/Popper/Popper/Popper.cjs');
 require('../../../components/Popper/PopperContext/PopperContext.cjs');
 require('yup');
@@ -63,6 +64,9 @@ const UserDataFields = ({ errors, policiesConsentInnerComponentArray, fields, to
         else if (name === 'policiesConsent') {
             return (jsxRuntime.jsx("div", Object.assign({ role: 'group', "aria-labelledby": 'checkbox-group', className: 'user-data-fields__checkbox-container' }, { children: policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.map((component, index) => (jsxRuntime.jsxs("div", Object.assign({ className: 'user-data-fields__consent-checkbox' }, { children: [jsxRuntime.jsx(formik.Field, { as: Checkbox.Checkbox, id: `policiesConsent_${index}`, name: 'policiesConsentArray', type: 'checkbox', value: `${index}` }, `policiesConsent_${index}`), jsxRuntime.jsx("label", Object.assign({ htmlFor: `policiesConsent_${index}`, className: 'user-data-fields__checkbox-label' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: component })) }))] }), `policiesConsent_${index}`))) }), 'policiesConsentGroup'));
         }
+        else if (name === 'email' && !enabled) {
+            return (jsxRuntime.jsx(Tooltip.Tooltip, Object.assign({ content: 'This email is tied to your wallet so cannot be updated', className: 'user-data-fields__tooltip' }, { children: jsxRuntime.jsx(formik.Field, { disabled: true, as: Input.Input, type: type, id: name, name: name, label: label }, name) }), 'disabled-email-tooltip'));
+        }
         else {
             return (jsxRuntime.jsx(formik.Field, { disabled: !enabled, as: Input.Input, type: type, id: name, name: name, label: label, optional: enabled && !required, error: errors[name] && touched[name], message: touched[name] && getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name]) }, name));
         }

package/src/lib/views/CollectUserDataView/UserDataFields/index.js

@@ -37,6 +37,7 @@ import '../../../components/Alert/Alert.js';
 import '../../../context/MockContext/MockContext.js';
 import '../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { Tooltip } from '../../../components/Tooltip/Tooltip.js';
 import '../../../components/Popper/Popper/Popper.js';
 import '../../../components/Popper/PopperContext/PopperContext.js';
 import 'yup';
@@ -59,6 +60,9 @@ const UserDataFields = ({ errors, policiesConsentInnerComponentArray, fields, to
         else if (name === 'policiesConsent') {
             return (jsx("div", Object.assign({ role: 'group', "aria-labelledby": 'checkbox-group', className: 'user-data-fields__checkbox-container' }, { children: policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.map((component, index) => (jsxs("div", Object.assign({ className: 'user-data-fields__consent-checkbox' }, { children: [jsx(Field, { as: Checkbox, id: `policiesConsent_${index}`, name: 'policiesConsentArray', type: 'checkbox', value: `${index}` }, `policiesConsent_${index}`), jsx("label", Object.assign({ htmlFor: `policiesConsent_${index}`, className: 'user-data-fields__checkbox-label' }, { children: jsx(Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: component })) }))] }), `policiesConsent_${index}`))) }), 'policiesConsentGroup'));
         }
+        else if (name === 'email' && !enabled) {
+            return (jsx(Tooltip, Object.assign({ content: 'This email is tied to your wallet so cannot be updated', className: 'user-data-fields__tooltip' }, { children: jsx(Field, { disabled: true, as: Input, type: type, id: name, name: name, label: label }, name) }), 'disabled-email-tooltip'));
+        }
         else {
             return (jsx(Field, { disabled: !enabled, as: Input, type: type, id: name, name: name, label: label, optional: enabled && !required, error: errors[name] && touched[name], message: touched[name] && getDisplayErrorMessage(label, errors[name]) }, name));
         }