@dynamic-labs/sdk-react-core 0.18.0-RC.14 → 0.18.0-RC.15

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

@@ -23,7 +23,7 @@ var api = require('../../../data/api.cjs');
 require('@dynamic-labs/multi-wallet');
 var shouldManuallyReconnectOnRefresh = require('../../functions/shouldManuallyReconnectOnRefresh/shouldManuallyReconnectOnRefresh.cjs');
 
-const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, }) => {
+const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, onUnlink, }) => {
     const [connectedWalletsInfo, setConnectedWalletsInfo, removeConnectedWalletsInfo,] = useLocalStorage.useLocalStorage(localStorage.CONNECTED_WALLETS_INFO, []);
     const getNextIdAvailable = React.useCallback((currentWallets) => {
         const existingIds = currentWallets.map(({ id }) => id);
@@ -43,17 +43,27 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
         if (!walletConnector) {
             return null;
         }
-        return {
+        const connectedWalletInfo = {
             address: connectedWallet.walletPublicKey,
             chain: connectedWallet.chain,
             connected: true,
             connector: walletConnector,
             id: connectedWallet.id,
+            network: connectedWallet.network,
         };
+        return connectedWalletInfo;
     })
         .filter((wc) => wc !== null), [connectedWalletsInfo, wallets]);
+    const updateConnectedWalletById = React.useCallback((walletId, connectedWalletConnectorObject) => {
+        setConnectedWalletsInfo((currentWallets) => currentWallets.map((currentWallet) => {
+            if (currentWallet.id === walletId) {
+                return Object.assign(Object.assign({}, currentWallet), connectedWalletConnectorObject);
+            }
+            return currentWallet;
+        }));
+    }, [setConnectedWalletsInfo]);
     const connectedWallet = connectedWallets[0] || null;
-    const setConnectedStates = React.useCallback((walletConnector, address, chain) => {
+    const setConnectedStates = React.useCallback((walletConnector, address, chain, walletConnectorNetwork) => {
         setConnectedWalletsInfo((currentWallets) => {
             const existingWalletIndex = currentWallets.findIndex((currentWallet) => currentWallet.name === walletConnector.name);
             const exists = currentWallets.some((currentWallet) => currentWallet.walletPublicKey === address);
@@ -75,6 +85,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
                     chain,
                     id: `connect-only-wallet-${getNextIdAvailable(currentWallets)}`,
                     name: walletConnector.name,
+                    network: walletConnectorNetwork,
                     provider: getWalletProvider.getWalletProvider(walletConnector),
                     walletPublicKey: address,
                 },
@@ -89,9 +100,10 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             }
             const connectedAccounts = yield walletConnector.getConnectedAccounts();
             const result = connectedAccounts.filter((account) => walletConnectorCore.isSameAddress(account, address, chain));
+            const walletNetwork = yield walletConnector.getNetwork();
             if (result.length > 0) {
                 walletConnector.connect();
-                setConnectedStates(walletConnector, address, chain);
+                setConnectedStates(walletConnector, address, chain, walletNetwork);
             }
             else {
                 removeConnectedWalletsInfo();
@@ -111,12 +123,13 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             throw error;
         }
         const chain = walletConnector.connectedChain || '';
+        const walletConnectorNetwork = yield walletConnector.getNetwork();
         // when we connect first wallet, it should be set as a primary wallet
         const shouldSetPrimaryWalletId = authMode === 'connect-only' && !primaryWalletId;
         if (shouldSetPrimaryWalletId) {
             setPrimaryWalletId(`connect-only-wallet-${getNextIdAvailable(connectedWalletsInfo)}`);
         }
-        setConnectedStates(walletConnector, publicWalletAddress, chain);
+        setConnectedStates(walletConnector, publicWalletAddress, chain, walletConnectorNetwork);
         if (shouldSkipCreatingVisit) {
             return publicWalletAddress;
         }
@@ -139,6 +152,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             clearPrimaryWalletId();
         }
         setConnectedWalletsInfo(filteredWallets);
+        onUnlink === null || onUnlink === void 0 ? void 0 : onUnlink(walletId, filteredWallets);
     };
     const getConnectedWalletById = React.useCallback((walletId) => connectedWallets.find((wallet) => wallet.id === walletId), [connectedWallets]);
     return {
@@ -150,6 +164,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
         getConnectedWalletById,
         removeConnectedWalletsInfo,
         unlinkConnectedWallet,
+        updateConnectedWalletById,
     };
 };
 

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

@@ -6,6 +6,7 @@ export type ConnectedWalletConnectorType = {
     provider: string;
     walletPublicKey: string;
     id: string;
+    network?: string | number;
 };
 type Props = {
     authMode: AuthModeType;
@@ -15,15 +16,17 @@ type Props = {
     primaryWalletId: string | undefined;
     setPrimaryWalletId: (walletId: string) => void;
     wallets: WalletOption[];
+    onUnlink?: (walletId: string, connectedWalletsInfo: ConnectedWalletConnectorType[]) => void;
 };
-export declare const useConnectWallet: ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, }: Props) => {
+export declare const useConnectWallet: ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, onUnlink, }: Props) => {
     connectWallet: (walletConnector: WalletConnector, fetchPublicAddressOpts?: FetchPublicAddressOpts) => Promise<string>;
     connectWalletByAddressAndChain: (name: string, address: string, chain: Chain) => Promise<void>;
     connectedWallet: Wallet;
     connectedWallets: Wallet[];
-    connectedWalletsInfo: [] | ConnectedWalletConnectorType[];
+    connectedWalletsInfo: ConnectedWalletConnectorType[] | [];
     getConnectedWalletById: (walletId: string) => Wallet | undefined;
     removeConnectedWalletsInfo: () => void;
     unlinkConnectedWallet: (walletId: string) => void;
+    updateConnectedWalletById: (walletId: string, connectedWalletConnectorObject: Partial<ConnectedWalletConnectorType>) => void;
 };
 export {};

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

@@ -19,7 +19,7 @@ import { createVisit } from '../../../data/api.js';
 import '@dynamic-labs/multi-wallet';
 import { shouldManuallyReconnectOnRefresh } from '../../functions/shouldManuallyReconnectOnRefresh/shouldManuallyReconnectOnRefresh.js';
 
-const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, }) => {
+const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, onUnlink, }) => {
     const [connectedWalletsInfo, setConnectedWalletsInfo, removeConnectedWalletsInfo,] = useLocalStorage(CONNECTED_WALLETS_INFO, []);
     const getNextIdAvailable = useCallback((currentWallets) => {
         const existingIds = currentWallets.map(({ id }) => id);
@@ -39,17 +39,27 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
         if (!walletConnector) {
             return null;
         }
-        return {
+        const connectedWalletInfo = {
             address: connectedWallet.walletPublicKey,
             chain: connectedWallet.chain,
             connected: true,
             connector: walletConnector,
             id: connectedWallet.id,
+            network: connectedWallet.network,
         };
+        return connectedWalletInfo;
     })
         .filter((wc) => wc !== null), [connectedWalletsInfo, wallets]);
+    const updateConnectedWalletById = useCallback((walletId, connectedWalletConnectorObject) => {
+        setConnectedWalletsInfo((currentWallets) => currentWallets.map((currentWallet) => {
+            if (currentWallet.id === walletId) {
+                return Object.assign(Object.assign({}, currentWallet), connectedWalletConnectorObject);
+            }
+            return currentWallet;
+        }));
+    }, [setConnectedWalletsInfo]);
     const connectedWallet = connectedWallets[0] || null;
-    const setConnectedStates = useCallback((walletConnector, address, chain) => {
+    const setConnectedStates = useCallback((walletConnector, address, chain, walletConnectorNetwork) => {
         setConnectedWalletsInfo((currentWallets) => {
             const existingWalletIndex = currentWallets.findIndex((currentWallet) => currentWallet.name === walletConnector.name);
             const exists = currentWallets.some((currentWallet) => currentWallet.walletPublicKey === address);
@@ -71,6 +81,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
                     chain,
                     id: `connect-only-wallet-${getNextIdAvailable(currentWallets)}`,
                     name: walletConnector.name,
+                    network: walletConnectorNetwork,
                     provider: getWalletProvider(walletConnector),
                     walletPublicKey: address,
                 },
@@ -85,9 +96,10 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             }
             const connectedAccounts = yield walletConnector.getConnectedAccounts();
             const result = connectedAccounts.filter((account) => isSameAddress(account, address, chain));
+            const walletNetwork = yield walletConnector.getNetwork();
             if (result.length > 0) {
                 walletConnector.connect();
-                setConnectedStates(walletConnector, address, chain);
+                setConnectedStates(walletConnector, address, chain, walletNetwork);
             }
             else {
                 removeConnectedWalletsInfo();
@@ -107,12 +119,13 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             throw error;
         }
         const chain = walletConnector.connectedChain || '';
+        const walletConnectorNetwork = yield walletConnector.getNetwork();
         // when we connect first wallet, it should be set as a primary wallet
         const shouldSetPrimaryWalletId = authMode === 'connect-only' && !primaryWalletId;
         if (shouldSetPrimaryWalletId) {
             setPrimaryWalletId(`connect-only-wallet-${getNextIdAvailable(connectedWalletsInfo)}`);
         }
-        setConnectedStates(walletConnector, publicWalletAddress, chain);
+        setConnectedStates(walletConnector, publicWalletAddress, chain, walletConnectorNetwork);
         if (shouldSkipCreatingVisit) {
             return publicWalletAddress;
         }
@@ -135,6 +148,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             clearPrimaryWalletId();
         }
         setConnectedWalletsInfo(filteredWallets);
+        onUnlink === null || onUnlink === void 0 ? void 0 : onUnlink(walletId, filteredWallets);
     };
     const getConnectedWalletById = useCallback((walletId) => connectedWallets.find((wallet) => wallet.id === walletId), [connectedWallets]);
     return {
@@ -146,6 +160,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
         getConnectedWalletById,
         removeConnectedWalletsInfo,
         unlinkConnectedWallet,
+        updateConnectedWalletById,
     };
 };
 

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

@@ -2,27 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../../../../../_virtual/_tslib.cjs');
-var React = require('react');
+var usePromise = require('../usePromise/usePromise.cjs');
 
 const useConnectedAccountWallet = (connector, secondaryWallets) => {
-    const [wallet, setWallet] = React.useState();
-    React.useEffect(() => {
-        const getConnectedAccounts = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const { data: wallet } = usePromise.usePromise(() => {
+        if (!connector) {
+            return;
+        }
+        return connector
+            .getConnectedAccounts()
+            .then((connectedAccounts) => secondaryWallets.find((secondaryWallet) => {
             var _a;
-            if (!connector) {
-                setWallet(undefined);
-                return;
-            }
-            const connectedAccounts = (_a = (yield connector.getConnectedAccounts())) !== null && _a !== void 0 ? _a : [];
-            const connectedWallet = secondaryWallets.find((secondaryWallet) => {
-                var _a;
-                return secondaryWallet.address.toLowerCase() ===
-                    ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase());
-            });
-            setWallet(connectedWallet);
-        });
-        getConnectedAccounts();
+            return secondaryWallet.address.toLowerCase() ===
+                ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+        }));
     }, [connector, secondaryWallets]);
     return wallet;
 };

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

@@ -1,24 +1,17 @@
-import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useState, useEffect } from 'react';
+import { usePromise } from '../usePromise/usePromise.js';
 
 const useConnectedAccountWallet = (connector, secondaryWallets) => {
-    const [wallet, setWallet] = useState();
-    useEffect(() => {
-        const getConnectedAccounts = () => __awaiter(void 0, void 0, void 0, function* () {
+    const { data: wallet } = usePromise(() => {
+        if (!connector) {
+            return;
+        }
+        return connector
+            .getConnectedAccounts()
+            .then((connectedAccounts) => secondaryWallets.find((secondaryWallet) => {
             var _a;
-            if (!connector) {
-                setWallet(undefined);
-                return;
-            }
-            const connectedAccounts = (_a = (yield connector.getConnectedAccounts())) !== null && _a !== void 0 ? _a : [];
-            const connectedWallet = secondaryWallets.find((secondaryWallet) => {
-                var _a;
-                return secondaryWallet.address.toLowerCase() ===
-                    ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase());
-            });
-            setWallet(connectedWallet);
-        });
-        getConnectedAccounts();
+            return secondaryWallet.address.toLowerCase() ===
+                ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+        }));
     }, [connector, secondaryWallets]);
     return wallet;
 };

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

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

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

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const useEventListener = (eventName, handler) => {
+    // Create a ref that stores handler
+    const savedHandler = React.useRef(handler);
+    React.useEffect(() => {
+        // Define the listening target
+        const targetElement = window;
+        if (!(targetElement && targetElement.addEventListener))
+            return;
+        // Create event listener that calls handler function stored in ref
+        const listener = (event) => savedHandler.current(event);
+        targetElement.addEventListener(eventName, listener);
+        // Remove event listener on cleanup
+        return () => {
+            targetElement.removeEventListener(eventName, listener);
+        };
+    }, [eventName]);
+};
+
+exports.useEventListener = useEventListener;

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

@@ -0,0 +1 @@
+export declare const useEventListener: (eventName: string, handler: (event: Event) => Promise<void> | void) => void;

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

@@ -0,0 +1,21 @@
+import { useRef, useEffect } from 'react';
+
+const useEventListener = (eventName, handler) => {
+    // Create a ref that stores handler
+    const savedHandler = useRef(handler);
+    useEffect(() => {
+        // Define the listening target
+        const targetElement = window;
+        if (!(targetElement && targetElement.addEventListener))
+            return;
+        // Create event listener that calls handler function stored in ref
+        const listener = (event) => savedHandler.current(event);
+        targetElement.addEventListener(eventName, listener);
+        // Remove event listener on cleanup
+        return () => {
+            targetElement.removeEventListener(eventName, listener);
+        };
+    }, [eventName]);
+};
+
+export { useEventListener };

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

@@ -4,17 +4,47 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../../_virtual/_tslib.cjs');
 var React = require('react');
+require('@dynamic-labs/sdk-api');
+var logger = require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('react/jsx-runtime');
+require('../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../constants/colors.cjs');
+require('../../../shared/utils/classes/storage/localStorage.cjs');
+require('ethers');
+require('../../../shared/consts/index.cjs');
 
+/**
+ * usePromise hook
+ *
+ * A React hook to handle promises and fetching data, providing the ability to track loading, data, and error state.
+ *
+ * @template T The type of data returned from the fetcher function.
+ * @template E The type of error returned from the fetcher function.
+ *
+ * @param {() => T | Promise<T>} fetcher - A function that returns a value or a promise.
+ * @param {DependencyList} [deps = []] - Dependency list for the hook to react to changes and refetch.
+ * @param {UsePromiseOptions} [options = { enabled: true }] - Options to configure the hook's behavior.
+ *
+ * @returns {PromiseState<T, E>} - Object containing the hook state, including data, error, and loading status.
+ */
 const usePromise = (fetcher, deps = [], options = {
     enabled: true,
 }) => {
+    // Convert the dependency list to a string representation for comparison (useful for useEffect dependencies)
+    const key = JSON.stringify(deps);
     const [state, setState] = React.useState({
-        active: false,
+        isLoading: true,
     });
-    const fetch = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        setState({
-            active: true,
-        });
+    /**
+     * Fetch data from the fetcher function.
+     * @param {Function} onData - Callback function to handle successful data retrieval.
+     * @param {Function} onError - Callback function to handle errors during data retrieval.
+     */
+    const fetch = ({ onData, onError, }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         try {
             let data;
             const fetchData = fetcher();
@@ -24,24 +54,47 @@ const usePromise = (fetcher, deps = [], options = {
             else {
                 data = fetchData;
             }
-            setState({
-                active: false,
-                data,
-            });
+            onData(data);
         }
         catch (error) {
-            setState({
-                active: false,
-                error: error,
-            });
+            logger.logger.error(error);
+            onError(error);
         }
-    }), [setState, fetcher]);
+    });
     React.useEffect(() => {
-        if (options.enabled) {
-            fetch();
+        if (!options.enabled)
+            return;
+        // Flag to track if the another fetch has been triggered before the current one has completed
+        let isInvalid = false;
+        if (!state.isLoading) {
+            setState({
+                isLoading: true,
+            });
         }
-    }, deps);
-    return Object.assign(Object.assign({}, state), { isLoading: state.active });
+        fetch({
+            onData: (data) => {
+                if (isInvalid)
+                    return;
+                setState({
+                    data,
+                    isLoading: false,
+                });
+            },
+            onError: (error) => {
+                if (isInvalid)
+                    return;
+                setState({
+                    error,
+                    isLoading: false,
+                });
+            },
+        });
+        return () => {
+            isInvalid = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [key, options.enabled]);
+    return Object.assign(Object.assign({}, state), { isLoading: state.isLoading });
 };
 
 exports.usePromise = usePromise;

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

@@ -3,4 +3,18 @@ import { PromiseState } from './usePromise.types';
 export type UsePromiseOptions = {
     enabled?: boolean;
 };
+/**
+ * usePromise hook
+ *
+ * A React hook to handle promises and fetching data, providing the ability to track loading, data, and error state.
+ *
+ * @template T The type of data returned from the fetcher function.
+ * @template E The type of error returned from the fetcher function.
+ *
+ * @param {() => T | Promise<T>} fetcher - A function that returns a value or a promise.
+ * @param {DependencyList} [deps = []] - Dependency list for the hook to react to changes and refetch.
+ * @param {UsePromiseOptions} [options = { enabled: true }] - Options to configure the hook's behavior.
+ *
+ * @returns {PromiseState<T, E>} - Object containing the hook state, including data, error, and loading status.
+ */
 export declare const usePromise: <T = unknown, E = unknown>(fetcher: () => T | Promise<T>, deps?: DependencyList, options?: UsePromiseOptions) => PromiseState<T, E>;

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

@@ -1,16 +1,46 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import '@dynamic-labs/sdk-api';
+import { logger } from '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
+import '../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../constants/colors.js';
+import '../../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import '../../../shared/consts/index.js';
 
+/**
+ * usePromise hook
+ *
+ * A React hook to handle promises and fetching data, providing the ability to track loading, data, and error state.
+ *
+ * @template T The type of data returned from the fetcher function.
+ * @template E The type of error returned from the fetcher function.
+ *
+ * @param {() => T | Promise<T>} fetcher - A function that returns a value or a promise.
+ * @param {DependencyList} [deps = []] - Dependency list for the hook to react to changes and refetch.
+ * @param {UsePromiseOptions} [options = { enabled: true }] - Options to configure the hook's behavior.
+ *
+ * @returns {PromiseState<T, E>} - Object containing the hook state, including data, error, and loading status.
+ */
 const usePromise = (fetcher, deps = [], options = {
     enabled: true,
 }) => {
+    // Convert the dependency list to a string representation for comparison (useful for useEffect dependencies)
+    const key = JSON.stringify(deps);
     const [state, setState] = useState({
-        active: false,
+        isLoading: true,
     });
-    const fetch = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        setState({
-            active: true,
-        });
+    /**
+     * Fetch data from the fetcher function.
+     * @param {Function} onData - Callback function to handle successful data retrieval.
+     * @param {Function} onError - Callback function to handle errors during data retrieval.
+     */
+    const fetch = ({ onData, onError, }) => __awaiter(void 0, void 0, void 0, function* () {
         try {
             let data;
             const fetchData = fetcher();
@@ -20,24 +50,47 @@ const usePromise = (fetcher, deps = [], options = {
             else {
                 data = fetchData;
             }
-            setState({
-                active: false,
-                data,
-            });
+            onData(data);
         }
         catch (error) {
-            setState({
-                active: false,
-                error: error,
-            });
+            logger.error(error);
+            onError(error);
         }
-    }), [setState, fetcher]);
+    });
     useEffect(() => {
-        if (options.enabled) {
-            fetch();
+        if (!options.enabled)
+            return;
+        // Flag to track if the another fetch has been triggered before the current one has completed
+        let isInvalid = false;
+        if (!state.isLoading) {
+            setState({
+                isLoading: true,
+            });
         }
-    }, deps);
-    return Object.assign(Object.assign({}, state), { isLoading: state.active });
+        fetch({
+            onData: (data) => {
+                if (isInvalid)
+                    return;
+                setState({
+                    data,
+                    isLoading: false,
+                });
+            },
+            onError: (error) => {
+                if (isInvalid)
+                    return;
+                setState({
+                    error,
+                    isLoading: false,
+                });
+            },
+        });
+        return () => {
+            isInvalid = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [key, options.enabled]);
+    return Object.assign(Object.assign({}, state), { isLoading: state.isLoading });
 };
 
 export { usePromise };

package/src/lib/views/EmailConfirmationWaitingView/EmailConfirmationWaitingView.cjs

@@ -58,7 +58,7 @@ const EmailConfirmationWaitingView = () => {
         setView('login-with-email-or-wallet');
         clearStatesOnBackClick();
     }), [setView, emailConnector, clearStatesOnBackClick]);
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'email-confirmation-waiting-view' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__header-icon' }, { children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: true }) })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'email-confirmation-waiting-view__title' }, { children: "Confirm your email" })), jsxRuntime.jsxs(Typography.Typography, Object.assign({ weight: 'regular', variant: 'body_normal', color: 'secondary' }, { children: ["We\u2019ve sent a verification email to", ' '] })), jsxRuntime.jsxs("div", Object.assign({ className: 'email-confirmation-waiting-view__email-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'medium', as: 'span' }, { children: emailConnector === null || emailConnector === void 0 ? void 0 : emailConnector.email })), jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: onClickResetEmail, className: 'email-confirmation-waiting-view__edit-icon-button', "data-testid": 'email-confirmation-waiting-view__edit-button' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary' }, { children: jsxRuntime.jsx(pencilAltIcon.ReactComponent, {}) })) }))] })), jsxRuntime.jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__note' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'regular', variant: 'body_small', color: 'secondary' }, { children: "Note: it might take a few seconds to proceed after clicking the link in your email" })) })), jsxRuntime.jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__powered_by_dynamic_footer' }, { children: jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'email-confirmation-waiting-view' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__header-icon' }, { children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: true }) })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'email-confirmation-waiting-view__title' }, { children: "Confirm your email" })), jsxRuntime.jsxs(Typography.Typography, Object.assign({ weight: 'regular', variant: 'body_normal', color: 'secondary' }, { children: ["We\u2019ve sent a verification email to", ' '] })), jsxRuntime.jsxs("div", Object.assign({ className: 'email-confirmation-waiting-view__email-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'medium', as: 'span' }, { children: emailConnector === null || emailConnector === void 0 ? void 0 : emailConnector.email })), jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: onClickResetEmail, className: 'email-confirmation-waiting-view__edit-icon-button', "data-testid": 'email-confirmation-waiting-view__edit-button' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary' }, { children: jsxRuntime.jsx(pencilAltIcon.ReactComponent, {}) })) }))] })), jsxRuntime.jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__note' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'regular', variant: 'body_small', color: 'secondary' }, { children: "Note: it might take a few seconds to proceed after clicking the link in your email" })) })), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'email-confirmation-waiting-view__powered_by_dynamic_footer' })] })));
 };
 
 exports.EmailConfirmationWaitingView = EmailConfirmationWaitingView;

package/src/lib/views/EmailConfirmationWaitingView/EmailConfirmationWaitingView.js

@@ -54,7 +54,7 @@ const EmailConfirmationWaitingView = () => {
         setView('login-with-email-or-wallet');
         clearStatesOnBackClick();
     }), [setView, emailConnector, clearStatesOnBackClick]);
-    return (jsxs("div", Object.assign({ className: 'email-confirmation-waiting-view' }, { children: [jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__header-icon' }, { children: jsx(IconWithSpinner, { Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: true }) })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'email-confirmation-waiting-view__title' }, { children: "Confirm your email" })), jsxs(Typography, Object.assign({ weight: 'regular', variant: 'body_normal', color: 'secondary' }, { children: ["We\u2019ve sent a verification email to", ' '] })), jsxs("div", Object.assign({ className: 'email-confirmation-waiting-view__email-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'medium', as: 'span' }, { children: emailConnector === null || emailConnector === void 0 ? void 0 : emailConnector.email })), jsx(IconButton, Object.assign({ onClick: onClickResetEmail, className: 'email-confirmation-waiting-view__edit-icon-button', "data-testid": 'email-confirmation-waiting-view__edit-button' }, { children: jsx(Icon, Object.assign({ color: 'text-tertiary' }, { children: jsx(SvgPencilAltIcon, {}) })) }))] })), jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__note' }, { children: jsx(Typography, Object.assign({ weight: 'regular', variant: 'body_small', color: 'secondary' }, { children: "Note: it might take a few seconds to proceed after clicking the link in your email" })) })), jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__powered_by_dynamic_footer' }, { children: jsx(PoweredByDynamic, {}) }))] })));
+    return (jsxs("div", Object.assign({ className: 'email-confirmation-waiting-view' }, { children: [jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__header-icon' }, { children: jsx(IconWithSpinner, { Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: true }) })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'email-confirmation-waiting-view__title' }, { children: "Confirm your email" })), jsxs(Typography, Object.assign({ weight: 'regular', variant: 'body_normal', color: 'secondary' }, { children: ["We\u2019ve sent a verification email to", ' '] })), jsxs("div", Object.assign({ className: 'email-confirmation-waiting-view__email-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'medium', as: 'span' }, { children: emailConnector === null || emailConnector === void 0 ? void 0 : emailConnector.email })), jsx(IconButton, Object.assign({ onClick: onClickResetEmail, className: 'email-confirmation-waiting-view__edit-icon-button', "data-testid": 'email-confirmation-waiting-view__edit-button' }, { children: jsx(Icon, Object.assign({ color: 'text-tertiary' }, { children: jsx(SvgPencilAltIcon, {}) })) }))] })), jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__note' }, { children: jsx(Typography, Object.assign({ weight: 'regular', variant: 'body_small', color: 'secondary' }, { children: "Note: it might take a few seconds to proceed after clicking the link in your email" })) })), jsx(PoweredByDynamic, { classNameRoot: 'email-confirmation-waiting-view__powered_by_dynamic_footer' })] })));
 };
 
 export { EmailConfirmationWaitingView };