@dynamic-labs/sdk-react-core 0.19.5 → 0.19.6

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

@@ -3,13 +3,42 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs');
 
+/**
+ * Hook for handling events from a WalletConnector or an array of WalletConnectors.
+ * This hook allows you to specify an event to listen to and a handler function that will be called
+ * whenever the event is emitted. The handler will receive the event arguments followed by the instance
+ * of the WalletConnector that emitted the event.
+ *
+ * @template Event - The type of the event to listen for, which should be a key of WalletConnectorEventTypes.
+ *
+ * @param eventEmitters - The WalletConnector instance(s) to attach the event listener to.
+ * If an array is provided, the event listener is attached to all provided connectors.
+ * @param eventName - The name of the event to listen for.
+ * @param handler - The callback function to execute when the event is emitted.
+ * The arguments to the callback are the arguments emitted with the event, followed by the WalletConnector instance
+ * that emitted the event.
+ *
+ * @returns {void} This hook does not return anything.
+ *
+ * @example
+ * // Example usage of useWalletConnectorEvent
+ * const { primaryWallet } = useDynamicContext();
+ *
+ * useWalletConnectorEvent(
+ *   primaryWallet?.connector,
+ *   'accountChange',
+ *   ({ accounts }, connector) => {
+ *     console.group('accountChange');
+ *     console.log('accounts', accounts);
+ *     console.log('connector that emitted', connector);
+ *     console.groupEnd();
+ *   },
+ * );
+ */
 const useWalletConnectorEvent = (eventEmitters, eventName, handler) => {
     const callbackRef = React.useRef(handler);
-    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
-        callbackRef.current = handler;
-    }, [handler]);
+    callbackRef.current = handler;
     React.useEffect(() => {
         if (!eventEmitters)
             return;
@@ -24,7 +53,7 @@ const useWalletConnectorEvent = (eventEmitters, eventName, handler) => {
         const uniqueEventEmitters = Array.from(new Set(eventEmittersArray));
         const unsubscribeCallbacks = uniqueEventEmitters.map((emitter) => {
             const callback = (...args) => {
-                callbackRef.current(emitter, ...args);
+                callbackRef.current(...args, emitter);
             };
             emitter.on(eventName, callback);
             return () => emitter.off(eventName, callback);

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

@@ -8,5 +8,37 @@ 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;
+/**
+ * Hook for handling events from a WalletConnector or an array of WalletConnectors.
+ * This hook allows you to specify an event to listen to and a handler function that will be called
+ * whenever the event is emitted. The handler will receive the event arguments followed by the instance
+ * of the WalletConnector that emitted the event.
+ *
+ * @template Event - The type of the event to listen for, which should be a key of WalletConnectorEventTypes.
+ *
+ * @param eventEmitters - The WalletConnector instance(s) to attach the event listener to.
+ * If an array is provided, the event listener is attached to all provided connectors.
+ * @param eventName - The name of the event to listen for.
+ * @param handler - The callback function to execute when the event is emitted.
+ * The arguments to the callback are the arguments emitted with the event, followed by the WalletConnector instance
+ * that emitted the event.
+ *
+ * @returns {void} This hook does not return anything.
+ *
+ * @example
+ * // Example usage of useWalletConnectorEvent
+ * const { primaryWallet } = useDynamicContext();
+ *
+ * useWalletConnectorEvent(
+ *   primaryWallet?.connector,
+ *   'accountChange',
+ *   ({ accounts }, connector) => {
+ *     console.group('accountChange');
+ *     console.log('accounts', accounts);
+ *     console.log('connector that emitted', connector);
+ *     console.groupEnd();
+ *   },
+ * );
+ */
+export declare const useWalletConnectorEvent: <Event_1 extends keyof WalletConnectorEventTypes = keyof WalletConnectorEventTypes>(eventEmitters: WalletConnector | WalletConnector[] | undefined, eventName: Event_1, handler: (...args: [...EventArg<Event_1>, import("@dynamic-labs/wallet-connector-core").WalletConnectorCore.WalletConnector]) => void) => void;
 export {};

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

@@ -1,11 +1,40 @@
 import { useRef, useEffect } from 'react';
-import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
 
+/**
+ * Hook for handling events from a WalletConnector or an array of WalletConnectors.
+ * This hook allows you to specify an event to listen to and a handler function that will be called
+ * whenever the event is emitted. The handler will receive the event arguments followed by the instance
+ * of the WalletConnector that emitted the event.
+ *
+ * @template Event - The type of the event to listen for, which should be a key of WalletConnectorEventTypes.
+ *
+ * @param eventEmitters - The WalletConnector instance(s) to attach the event listener to.
+ * If an array is provided, the event listener is attached to all provided connectors.
+ * @param eventName - The name of the event to listen for.
+ * @param handler - The callback function to execute when the event is emitted.
+ * The arguments to the callback are the arguments emitted with the event, followed by the WalletConnector instance
+ * that emitted the event.
+ *
+ * @returns {void} This hook does not return anything.
+ *
+ * @example
+ * // Example usage of useWalletConnectorEvent
+ * const { primaryWallet } = useDynamicContext();
+ *
+ * useWalletConnectorEvent(
+ *   primaryWallet?.connector,
+ *   'accountChange',
+ *   ({ accounts }, connector) => {
+ *     console.group('accountChange');
+ *     console.log('accounts', accounts);
+ *     console.log('connector that emitted', connector);
+ *     console.groupEnd();
+ *   },
+ * );
+ */
 const useWalletConnectorEvent = (eventEmitters, eventName, handler) => {
     const callbackRef = useRef(handler);
-    useIsomorphicLayoutEffect(() => {
-        callbackRef.current = handler;
-    }, [handler]);
+    callbackRef.current = handler;
     useEffect(() => {
         if (!eventEmitters)
             return;
@@ -20,7 +49,7 @@ const useWalletConnectorEvent = (eventEmitters, eventName, handler) => {
         const uniqueEventEmitters = Array.from(new Set(eventEmittersArray));
         const unsubscribeCallbacks = uniqueEventEmitters.map((emitter) => {
             const callback = (...args) => {
-                callbackRef.current(emitter, ...args);
+                callbackRef.current(...args, emitter);
             };
             emitter.on(eventName, callback);
             return () => emitter.off(eventName, callback);

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

@@ -43,7 +43,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         logger.logger.debug('primary wallet disconnect');
         handleLogOut();
     });
-    useWalletConnectorEvent.useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'chainChange', (_, { chain }) => {
+    useWalletConnectorEvent.useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'chainChange', ({ chain }) => {
         logger.logger.debug('primary wallet chain change', { chain });
         if (!primaryWallet) {
             return;
@@ -57,7 +57,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             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* () {
+    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,
         });
@@ -114,35 +114,36 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         }
         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* () {
+    useWalletConnectorEvent.useWalletConnectorEvent(uniqueNonPrimaryWallets, 'accountChange', (_, changedConnector) => _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);
+            const affectedWallets = secondaryWallets.filter(({ connector }) => connector.key === changedConnector.key);
+            for (const wallet of affectedWallets)
+                refreshConnectedWallet(wallet.id, wallet.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* () {
+    useWalletConnectorEvent.useWalletConnectorEvent(uniqueNonPrimaryWallets, 'chainChange', (_, changedConnector) => _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);
+        // Get all wallets with this connector
+        const affectedWallets = secondaryWallets.filter(({ connector }) => connector.key === changedConnector.key);
+        for (const wallet of affectedWallets)
+            refreshConnectedWallet(wallet.id, wallet.connector);
     }));
-    useWalletConnectorEvent.useWalletConnectorEvent(uniqueNonPrimaryWallets, 'disconnect', () => {
+    useWalletConnectorEvent.useWalletConnectorEvent(uniqueNonPrimaryWallets, 'disconnect', (affectedConnector) => {
         logger.logger.debug('secondary wallet disconnect');
         // argent sends a disconnect event when the user adds a new account
-        if (authMode === 'connect-only' &&
-            secondaryWallets.length &&
-            secondaryWallets[0].connector.key === 'argentx') {
-            refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
-            return;
+        if (authMode === 'connect-only') {
+            // Get all wallets with this connector
+            const affectedWallets = secondaryWallets.filter(({ connector }) => connector.key === affectedConnector.key);
+            for (const wallet of affectedWallets) {
+                if (wallet.connector.key === 'argentx')
+                    refreshConnectedWallet(wallet.id, wallet.connector);
+            }
         }
-        computeConnectedStateForWallets();
     });
     const handleAccountChangeWhenAwaitingAccountSwitch = React.useCallback((isPrimaryWallet, newAddress) => {
         const linkedSecondaryWallet = secondaryWallets.find((wallet) => walletConnectorCore.isSameAddress(wallet.address, newAddress, wallet.chain));

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

@@ -2,6 +2,7 @@
 import type { WalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { AuthModeType, MultiWalletWidgetState, UserProfile, Wallet, WalletWithAction } from '../../../shared';
 import { MultiWalletWidgetStateSetter } from '../multiWallet';
+import { IDynamicContext } from '../../../context/DynamicContext/types';
 export type UseWalletEventListenersArgs = {
     computeConnectedStateForWallets(): Promise<void>;
     handleLogOut(): Promise<void>;
@@ -13,7 +14,7 @@ export type UseWalletEventListenersArgs = {
     selectedWalletWithAction: WalletWithAction | null;
     setMultiWalletWidgetState: MultiWalletWidgetStateSetter;
     setPrimaryWalletId(walletId: string): void;
-    setSelectedWalletConnector(connector: WalletConnector | null): void;
+    setSelectedWalletConnector: IDynamicContext['setSelectedWalletConnector'];
     setSelectedWalletWithAction(walletWithAction: WalletWithAction | null): void;
     user: UserProfile | undefined;
     authMode: AuthModeType;

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

@@ -39,7 +39,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         logger.debug('primary wallet disconnect');
         handleLogOut();
     });
-    useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'chainChange', (_, { chain }) => {
+    useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'chainChange', ({ chain }) => {
         logger.debug('primary wallet chain change', { chain });
         if (!primaryWallet) {
             return;
@@ -53,7 +53,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             setNetwork(parseInt(chain));
         }
     });
-    useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'accountChange', (_, { accounts }) => __awaiter(void 0, void 0, void 0, function* () {
+    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,
         });
@@ -110,35 +110,36 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         }
         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* () {
+    useWalletConnectorEvent(uniqueNonPrimaryWallets, 'accountChange', (_, changedConnector) => __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);
+            const affectedWallets = secondaryWallets.filter(({ connector }) => connector.key === changedConnector.key);
+            for (const wallet of affectedWallets)
+                refreshConnectedWallet(wallet.id, wallet.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* () {
+    useWalletConnectorEvent(uniqueNonPrimaryWallets, 'chainChange', (_, changedConnector) => __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);
+        // Get all wallets with this connector
+        const affectedWallets = secondaryWallets.filter(({ connector }) => connector.key === changedConnector.key);
+        for (const wallet of affectedWallets)
+            refreshConnectedWallet(wallet.id, wallet.connector);
     }));
-    useWalletConnectorEvent(uniqueNonPrimaryWallets, 'disconnect', () => {
+    useWalletConnectorEvent(uniqueNonPrimaryWallets, 'disconnect', (affectedConnector) => {
         logger.debug('secondary wallet disconnect');
         // argent sends a disconnect event when the user adds a new account
-        if (authMode === 'connect-only' &&
-            secondaryWallets.length &&
-            secondaryWallets[0].connector.key === 'argentx') {
-            refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
-            return;
+        if (authMode === 'connect-only') {
+            // Get all wallets with this connector
+            const affectedWallets = secondaryWallets.filter(({ connector }) => connector.key === affectedConnector.key);
+            for (const wallet of affectedWallets) {
+                if (wallet.connector.key === 'argentx')
+                    refreshConnectedWallet(wallet.id, wallet.connector);
+            }
         }
-        computeConnectedStateForWallets();
     });
     const handleAccountChangeWhenAwaitingAccountSwitch = useCallback((isPrimaryWallet, newAddress) => {
         const linkedSecondaryWallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain));

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

@@ -45,6 +45,7 @@ require('../../../components/Alert/Alert.cjs');
 require('../../../components/Popper/Popper/Popper.cjs');
 require('../../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
+require('i18next');
 require('../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../../components/OverlayCard/OverlayCard.context.cjs');
@@ -54,7 +55,6 @@ require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('qrcode');
 require('../../../context/LoadingContext/LoadingContext.cjs');
-require('i18next');
 require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 require('../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');

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

@@ -41,6 +41,7 @@ import '../../../components/Alert/Alert.js';
 import '../../../components/Popper/Popper/Popper.js';
 import '../../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
+import 'i18next';
 import '../../../components/InlineWidget/InlineWidget.js';
 import '../../../components/MenuList/Dropdown/Dropdown.js';
 import '../../../components/OverlayCard/OverlayCard.context.js';
@@ -50,7 +51,6 @@ import '../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'qrcode';
 import '../../../context/LoadingContext/LoadingContext.js';
-import 'i18next';
 import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import '../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';

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

@@ -18,6 +18,8 @@ require('@dynamic-labs/utils');
 require('../../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 var isWalletConnected = require('../../functions/isWalletConnected/isWalletConnected.cjs');
+var useEventListener = require('../useEventListener/useEventListener.cjs');
+var useWalletConnectorEvent = require('../useWalletConnectorEvent/useWalletConnectorEvent.cjs');
 
 const connectedWalletStateReducer = (state, connectedWalletsMap) => {
     const isConnectedWalletsMapEmpty = Object.values(connectedWalletsMap).length === 0;
@@ -26,14 +28,23 @@ const connectedWalletStateReducer = (state, connectedWalletsMap) => {
     }
     return Object.assign(Object.assign({}, state), { connectedWalletsMap, didLoad: true });
 };
-const useWalletsConnectionState = (linkedWallets) => {
+const useWalletsConnectionState = (wallets) => {
     const [state, setState] = React.useReducer(connectedWalletStateReducer, {
         connectedWalletsMap: {},
         didLoad: false,
     });
+    const refreshKey = wallets.map(({ id }) => id).join('-');
+    const connectors = wallets.map(({ connector }) => connector);
     const lastCallTimestamp = React.useRef(0);
     const computeConnectedStateForWallets = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        if (!linkedWallets.length)
+        const connectedWalletsMap = {};
+        yield Promise.all(wallets.map((wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            connectedWalletsMap[wallet.id] = yield isWalletConnected.isWalletConnected(wallet);
+        })));
+        setState(connectedWalletsMap);
+    }), [wallets]);
+    const handleOnEventUpdate = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (!wallets.length)
             return;
         const callTimestamp = new Date().getTime();
         const diffFromLastCall = callTimestamp - lastCallTimestamp.current;
@@ -44,12 +55,25 @@ const useWalletsConnectionState = (linkedWallets) => {
             logger.logger.warn('computeConnectedStateForWallets: skipping due too many calls.');
             return;
         }
-        const connectedWalletsMap = {};
-        yield Promise.all(linkedWallets.map((wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-            connectedWalletsMap[wallet.id] = yield isWalletConnected.isWalletConnected(wallet);
-        })));
-        setState(connectedWalletsMap);
-    }), [linkedWallets, setState]);
+        computeConnectedStateForWallets();
+    }), [computeConnectedStateForWallets, wallets.length]);
+    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'accountChange', handleOnEventUpdate);
+    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'disconnect', handleOnEventUpdate);
+    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'chainChange', handleOnEventUpdate);
+    React.useEffect(() => {
+        computeConnectedStateForWallets();
+    }, 
+    /**
+     * This is using a custom key to force the useEffect to run only when a connector is
+     * added or removed from the connectors list.
+     */
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [refreshKey]);
+    /**
+     * This is a workaround to detect when the user switches to another tab/extension
+     * and then comes back to the dapp.
+     */
+    useEventListener.useEventListener('focus', computeConnectedStateForWallets);
     return {
         computeConnectedStateForWallets,
         connectedWalletMap: state.connectedWalletsMap,

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

@@ -1,5 +1,5 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useReducer, useRef, useCallback } from 'react';
+import { useReducer, useRef, useCallback, useEffect } from 'react';
 import '@dynamic-labs/sdk-api';
 import { logger } from '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
@@ -14,6 +14,8 @@ import '@dynamic-labs/utils';
 import '../../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import { isWalletConnected } from '../../functions/isWalletConnected/isWalletConnected.js';
+import { useEventListener } from '../useEventListener/useEventListener.js';
+import { useWalletConnectorEvent } from '../useWalletConnectorEvent/useWalletConnectorEvent.js';
 
 const connectedWalletStateReducer = (state, connectedWalletsMap) => {
     const isConnectedWalletsMapEmpty = Object.values(connectedWalletsMap).length === 0;
@@ -22,14 +24,23 @@ const connectedWalletStateReducer = (state, connectedWalletsMap) => {
     }
     return Object.assign(Object.assign({}, state), { connectedWalletsMap, didLoad: true });
 };
-const useWalletsConnectionState = (linkedWallets) => {
+const useWalletsConnectionState = (wallets) => {
     const [state, setState] = useReducer(connectedWalletStateReducer, {
         connectedWalletsMap: {},
         didLoad: false,
     });
+    const refreshKey = wallets.map(({ id }) => id).join('-');
+    const connectors = wallets.map(({ connector }) => connector);
     const lastCallTimestamp = useRef(0);
     const computeConnectedStateForWallets = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        if (!linkedWallets.length)
+        const connectedWalletsMap = {};
+        yield Promise.all(wallets.map((wallet) => __awaiter(void 0, void 0, void 0, function* () {
+            connectedWalletsMap[wallet.id] = yield isWalletConnected(wallet);
+        })));
+        setState(connectedWalletsMap);
+    }), [wallets]);
+    const handleOnEventUpdate = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (!wallets.length)
             return;
         const callTimestamp = new Date().getTime();
         const diffFromLastCall = callTimestamp - lastCallTimestamp.current;
@@ -40,12 +51,25 @@ const useWalletsConnectionState = (linkedWallets) => {
             logger.warn('computeConnectedStateForWallets: skipping due too many calls.');
             return;
         }
-        const connectedWalletsMap = {};
-        yield Promise.all(linkedWallets.map((wallet) => __awaiter(void 0, void 0, void 0, function* () {
-            connectedWalletsMap[wallet.id] = yield isWalletConnected(wallet);
-        })));
-        setState(connectedWalletsMap);
-    }), [linkedWallets, setState]);
+        computeConnectedStateForWallets();
+    }), [computeConnectedStateForWallets, wallets.length]);
+    useWalletConnectorEvent(connectors, 'accountChange', handleOnEventUpdate);
+    useWalletConnectorEvent(connectors, 'disconnect', handleOnEventUpdate);
+    useWalletConnectorEvent(connectors, 'chainChange', handleOnEventUpdate);
+    useEffect(() => {
+        computeConnectedStateForWallets();
+    }, 
+    /**
+     * This is using a custom key to force the useEffect to run only when a connector is
+     * added or removed from the connectors list.
+     */
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [refreshKey]);
+    /**
+     * This is a workaround to detect when the user switches to another tab/extension
+     * and then comes back to the dapp.
+     */
+    useEventListener('focus', computeConnectedStateForWallets);
     return {
         computeConnectedStateForWallets,
         connectedWalletMap: state.connectedWalletsMap,

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

@@ -83,7 +83,7 @@ const CollectUserDataView = () => {
     const evmNetworks = walletConnector.evmNetworks || [];
     const _isSupportedNetwork = !network || isSupportedNetwork.isSupportedNetwork({ network, walletConnector });
     const walletAddress = (_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.verifiedCredentials.find((verifiedCredential) => verifiedCredential.id === userProfile.lastVerifiedCredentialId)) === null || _a === void 0 ? void 0 : _a.address;
-    return (jsxRuntime.jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__network-container', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { jwt: onboardingOnlyJwt, iconSize: 28 })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) })] }), jsxRuntime.jsx(NetworkPicker.NetworkPicker, { evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' })] }), onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxRuntime.jsxs("div", { className: classNames.classNames('collect-user-data__form', {
+    return (jsxRuntime.jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__network-container', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { jwt: onboardingOnlyJwt, iconSize: 28 })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) })] }), jsxRuntime.jsx(NetworkPicker.NetworkPicker, { evmNetworks: evmNetworks, currentNetwork: network, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' })] }), onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxRuntime.jsxs("div", { className: classNames.classNames('collect-user-data__form', {
                     'collect-user-data__form--error': !_isSupportedNetwork,
                 }), children: [jsxRuntime.jsx("div", { className: 'collect-user-data__success-icon', children: jsxRuntime.jsx(Icon.Icon, { color: 'text-primary', size: 'large', children: jsxRuntime.jsx(checkConnection.ReactComponent, {}) }) }), jsxRuntime.jsx(OnboardingUserDataForm.OnboardingUserDataForm, { disableSubmit: !_isSupportedNetwork, userProfile: userProfile, children: !_isSupportedNetwork ? (jsxRuntime.jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', children: t('dyn_collect_user_data.not_supported_network.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_collect_user_data.not_supported_network.description') })] })) : (jsxRuntime.jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
                                         t('dyn_collect_user_data.greeting', { appName }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||

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

@@ -79,7 +79,7 @@ const CollectUserDataView = () => {
     const evmNetworks = walletConnector.evmNetworks || [];
     const _isSupportedNetwork = !network || isSupportedNetwork({ network, walletConnector });
     const walletAddress = (_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.verifiedCredentials.find((verifiedCredential) => verifiedCredential.id === userProfile.lastVerifiedCredentialId)) === null || _a === void 0 ? void 0 : _a.address;
-    return (jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxs("div", { className: 'collect-user-data__network-container', children: [jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsx(AuthProviderIcon, { jwt: onboardingOnlyJwt, iconSize: 28 })), jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress(walletAddress, 3, 3) })] }), jsx(NetworkPicker, { evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' })] }), onboardingImageUrl && (jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsx(ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxs("div", { className: classNames('collect-user-data__form', {
+    return (jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxs("div", { className: 'collect-user-data__network-container', children: [jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsx(AuthProviderIcon, { jwt: onboardingOnlyJwt, iconSize: 28 })), jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress(walletAddress, 3, 3) })] }), jsx(NetworkPicker, { evmNetworks: evmNetworks, currentNetwork: network, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' })] }), onboardingImageUrl && (jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsx(ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxs("div", { className: classNames('collect-user-data__form', {
                     'collect-user-data__form--error': !_isSupportedNetwork,
                 }), children: [jsx("div", { className: 'collect-user-data__success-icon', children: jsx(Icon, { color: 'text-primary', size: 'large', children: jsx(SvgCheckConnection, {}) }) }), jsx(OnboardingUserDataForm, { disableSubmit: !_isSupportedNetwork, userProfile: userProfile, children: !_isSupportedNetwork ? (jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', children: t('dyn_collect_user_data.not_supported_network.title') }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_collect_user_data.not_supported_network.description') })] })) : (jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
                                         t('dyn_collect_user_data.greeting', { appName }) }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||

package/src/lib/views/EmailWalletOTPVerificationView/EmailWalletOTPVerificationView.cjs

@@ -38,6 +38,7 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('i18next');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../components/OverlayCard/OverlayCard.context.cjs');
@@ -50,7 +51,6 @@ require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../context/EmailVerificationContext/EmailVerificationContext.cjs');
 require('qrcode');
 require('../../context/LoadingContext/LoadingContext.cjs');
-require('i18next');
 require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 require('@dynamic-labs/types');

package/src/lib/views/EmailWalletOTPVerificationView/EmailWalletOTPVerificationView.js

@@ -34,6 +34,7 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import 'i18next';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
 import '../../components/OverlayCard/OverlayCard.context.js';
@@ -46,7 +47,6 @@ import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../context/EmailVerificationContext/EmailVerificationContext.js';
 import 'qrcode';
 import '../../context/LoadingContext/LoadingContext.js';
-import 'i18next';
 import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import '@dynamic-labs/types';

package/src/lib/views/LoginView/useLoginView.cjs

@@ -142,6 +142,7 @@ const useLoginView = () => {
      * @returns SdkViewSection[]
      */
     const buildLoginSections = React.useCallback((buildOrder) => {
+        var _a;
         const loginViewSections = [];
         buildOrder === null || buildOrder === void 0 ? void 0 : buildOrder.forEach((loginItem) => {
             // Add a separator if there are sections already
@@ -162,6 +163,10 @@ const useLoginView = () => {
                 loginViewSections.push(...getWalletViewSectionDefinition());
             }
         });
+        // remove last separator
+        if (((_a = loginViewSections[loginViewSections.length - 1]) === null || _a === void 0 ? void 0 : _a.type) === 'separator') {
+            loginViewSections.pop();
+        }
         return loginViewSections;
     }, [
         applyLoginModalSettings,

package/src/lib/views/LoginView/useLoginView.js

@@ -138,6 +138,7 @@ const useLoginView = () => {
      * @returns SdkViewSection[]
      */
     const buildLoginSections = useCallback((buildOrder) => {
+        var _a;
         const loginViewSections = [];
         buildOrder === null || buildOrder === void 0 ? void 0 : buildOrder.forEach((loginItem) => {
             // Add a separator if there are sections already
@@ -158,6 +159,10 @@ const useLoginView = () => {
                 loginViewSections.push(...getWalletViewSectionDefinition());
             }
         });
+        // remove last separator
+        if (((_a = loginViewSections[loginViewSections.length - 1]) === null || _a === void 0 ? void 0 : _a.type) === 'separator') {
+            loginViewSections.pop();
+        }
         return loginViewSections;
     }, [
         applyLoginModalSettings,