@dynamic-labs/sdk-react-core 0.18.0-RC.26 → 0.18.0-RC.27

package/CHANGELOG.md

@@ -1,4 +1,10 @@
 
+## [0.18.0-RC.27](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-RC.26...v0.18.0-RC.27) (2023-08-03)
+
+### Bug Fixes
+
+* fixes circular dependency issues on usePromise
+
 ## [0.18.0-RC.26](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-RC.24...v0.18.0-RC.26) (2023-08-02)
 
 

package/package.cjs

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

package/package.js

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

package/package.json

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

package/src/lib/components/NetworkPicker/NetworkPicker.cjs

@@ -53,7 +53,7 @@ const NetworkPicker = ({ activeClassName = '', buttonClassName = '', checkboxCla
     const pickerRef = React.useRef(null);
     const [newNetworkId, setNewNetworkId] = React.useState(undefined);
     const { loadingNetwork, network, setNetwork } = useInternalDynamicContext.useInternalDynamicContext();
-    const { data: supportedWalletNetworks } = usePromise.usePromise(() => connector === null || connector === void 0 ? void 0 : connector.getSupportedNetworks(), [network]);
+    const { data: supportedWalletNetworks } = usePromise.usePromise(() => connector === null || connector === void 0 ? void 0 : connector.getSupportedNetworks(), { deps: [network] });
     const shouldAllowOpenDropdown = isNetworkUnsupported.isNetworkUnsupported(network, evmNetworks) || (evmNetworks === null || evmNetworks === void 0 ? void 0 : evmNetworks.length) > 1;
     // Ref to anchor popper to
     const anchorRef = React.useRef(null);

package/src/lib/components/NetworkPicker/NetworkPicker.js

@@ -49,7 +49,7 @@ const NetworkPicker = ({ activeClassName = '', buttonClassName = '', checkboxCla
     const pickerRef = useRef(null);
     const [newNetworkId, setNewNetworkId] = useState(undefined);
     const { loadingNetwork, network, setNetwork } = useInternalDynamicContext();
-    const { data: supportedWalletNetworks } = usePromise(() => connector === null || connector === void 0 ? void 0 : connector.getSupportedNetworks(), [network]);
+    const { data: supportedWalletNetworks } = usePromise(() => connector === null || connector === void 0 ? void 0 : connector.getSupportedNetworks(), { deps: [network] });
     const shouldAllowOpenDropdown = isNetworkUnsupported(network, evmNetworks) || (evmNetworks === null || evmNetworks === void 0 ? void 0 : evmNetworks.length) > 1;
     // Ref to anchor popper to
     const anchorRef = useRef(null);

package/src/lib/components/UserAddress/UserAddress.cjs

@@ -51,7 +51,7 @@ const UserAddress = ({ userProfile, walletConnector }) => {
     var _a;
     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;
     const nameService = useFetchNameService.useFetchNameService(walletAddress);
-    const { data: walletConnectorAddress } = usePromise.usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.fetchPublicAddress(), [], {
+    const { data: walletConnectorAddress } = usePromise.usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.fetchPublicAddress(), {
         enabled: !userProfile && Boolean(walletConnector),
     });
     return (jsxRuntime.jsxs("div", Object.assign({ className: 'user-address__container' }, { children: [jsxRuntime.jsx(StatusDot.StatusDot, { variant: 'green', containerClassName: 'user-address__status-dot' }), (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'numbers_big', color: 'primary', className: 'user-address' }, { children: nameService.name })), jsxRuntime.jsx("div", { className: 'dynamic-widget-wallet-header__seperator' }), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'numbers_medium', color: 'secondary', className: 'user-address' }, { children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) }))] })) : (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'numbers_big', color: 'primary', className: 'user-address' }, { children: shortenWalletAddress.shortenWalletAddress(walletAddress || walletConnectorAddress, 4, 4) })))] })));

package/src/lib/components/UserAddress/UserAddress.js

@@ -47,7 +47,7 @@ const UserAddress = ({ userProfile, walletConnector }) => {
     var _a;
     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;
     const nameService = useFetchNameService(walletAddress);
-    const { data: walletConnectorAddress } = usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.fetchPublicAddress(), [], {
+    const { data: walletConnectorAddress } = usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.fetchPublicAddress(), {
         enabled: !userProfile && Boolean(walletConnector),
     });
     return (jsxs("div", Object.assign({ className: 'user-address__container' }, { children: [jsx(StatusDot, { variant: 'green', containerClassName: 'user-address__status-dot' }), (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ variant: 'numbers_big', color: 'primary', className: 'user-address' }, { children: nameService.name })), jsx("div", { className: 'dynamic-widget-wallet-header__seperator' }), jsx(Typography, Object.assign({ variant: 'numbers_medium', color: 'secondary', className: 'user-address' }, { children: shortenWalletAddress(walletAddress, 3, 3) }))] })) : (jsx(Typography, Object.assign({ variant: 'numbers_big', color: 'primary', className: 'user-address' }, { children: shortenWalletAddress(walletAddress || walletConnectorAddress, 4, 4) })))] })));

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

@@ -4,20 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var usePromise = require('../usePromise/usePromise.cjs');
 
-const useConnectedAccountWallet = (connector, secondaryWallets) => {
-    const { data: wallet } = usePromise.usePromise(() => {
-        if (!connector) {
-            return;
-        }
-        return connector
-            .getConnectedAccounts()
-            .then((connectedAccounts) => secondaryWallets.find((secondaryWallet) => {
-            var _a;
-            return secondaryWallet.address.toLowerCase() ===
-                ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase());
-        }));
-    }, [connector, secondaryWallets]);
-    return wallet;
-};
+const useConnectedAccountWallet = (connector, secondaryWallets) => usePromise.usePromise(() => {
+    if (!connector) {
+        return;
+    }
+    return connector
+        .getConnectedAccounts()
+        .then((connectedAccounts) => secondaryWallets.find((secondaryWallet) => {
+        var _a;
+        return secondaryWallet.address.toLowerCase() ===
+            ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+    }));
+}, { deps: [connector, secondaryWallets] });
 
 exports.useConnectedAccountWallet = useConnectedAccountWallet;

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

@@ -1,2 +1,2 @@
 import { Wallet, WalletConnector } from '../../../..';
-export declare const useConnectedAccountWallet: (connector: WalletConnector | undefined, secondaryWallets: Wallet[]) => Wallet | undefined;
+export declare const useConnectedAccountWallet: (connector: WalletConnector | undefined, secondaryWallets: Wallet[]) => import("../usePromise").PromiseState<Wallet | undefined, Error>;

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

@@ -1,19 +1,16 @@
 import { usePromise } from '../usePromise/usePromise.js';
 
-const useConnectedAccountWallet = (connector, secondaryWallets) => {
-    const { data: wallet } = usePromise(() => {
-        if (!connector) {
-            return;
-        }
-        return connector
-            .getConnectedAccounts()
-            .then((connectedAccounts) => secondaryWallets.find((secondaryWallet) => {
-            var _a;
-            return secondaryWallet.address.toLowerCase() ===
-                ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase());
-        }));
-    }, [connector, secondaryWallets]);
-    return wallet;
-};
+const useConnectedAccountWallet = (connector, secondaryWallets) => usePromise(() => {
+    if (!connector) {
+        return;
+    }
+    return connector
+        .getConnectedAccounts()
+        .then((connectedAccounts) => secondaryWallets.find((secondaryWallet) => {
+        var _a;
+        return secondaryWallet.address.toLowerCase() ===
+            ((_a = connectedAccounts[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+    }));
+}, { deps: [connector, secondaryWallets] });
 
 export { useConnectedAccountWallet };

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

@@ -2,7 +2,6 @@
 
 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');
@@ -16,85 +15,93 @@ require('../../constants/colors.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../../shared/consts/index.cjs');
+var resolveFetcher = require('./utils/resolveFetcher/resolveFetcher.cjs');
+var createReducer = require('./utils/createReducer/createReducer.cjs');
 
 /**
- * usePromise hook
+ * Custom hook for handling promises and fetching data.
+ * @template T - The type of the data returned by the promise.
+ * @template E - The type of the error thrown by the promise.
+ * @param {() => T | Promise<T>} fetcher - A function that returns the data or a promise that resolves to the data.
+ * @param {UsePromiseOptions<T, E>} [options={}] - Options for the hook.
+ * @param {number} [options.retries] - The number of times to retry the fetch in case of failure.
+ * @param {T} [options.initialData] - The initial data the hook will use until the promise is resolved.
+ * @param {DependencyList} [options.deps=[]] - An array of dependencies for the hook.
+ * @param {boolean} [options.enabled] - Flag indicating whether the fetch should be enabled or not.
+ * @param {(data: T) => void} [options.onResolve] - Callback to be called when the fetch is resolved successfully.
+ * @param {(error: E) => void} [options.onReject] - Callback to be called when the fetch is rejected with an error.
+ * @returns {PromiseState<T, E>} - The state object containing the data, error, and loading status.
+ * @example
+ * // Example usage with a simple fetcher function
+ * const fetcher = fetch('https://api.example.com/data');
  *
- * A React hook to handle promises and fetching data, providing the ability to track loading, data, and error state.
+ * const MyComponent = () => {
+ *  const { data, isLoading, error } = usePromise(fetcher);
  *
- * @template T The type of data returned from the fetcher function.
- * @template E The type of error returned from the fetcher function.
+ *  if (isLoading) {
+ *    return <div>Loading...</div>;
+ *  }
  *
- * @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.
+ *  if (error) {
+ *    return <div>Error: {error.message}</div>;
+ *  }
  *
- * @returns {PromiseState<T, E>} - Object containing the hook state, including data, error, and loading status.
+ * return <div>Data: {data}</div>;
+ * };
  */
-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({
+const usePromise = (fetcher, options) => {
+    const lastCallTimestamp = React.useRef(new Date().getTime());
+    const { deps = [], initialData = undefined, enabled = true, retries = 0, onReject = () => { }, onResolve = () => { }, } = options || {};
+    const [state, dispatch] = React.useReducer(createReducer.createReducer(), {
+        data: initialData,
         isLoading: 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();
-            if (fetchData instanceof Promise) {
-                data = yield fetchData;
-            }
-            else {
-                data = fetchData;
-            }
-            onData(data);
-        }
-        catch (error) {
-            logger.logger.error(error);
-            onError(error);
+    const callback = React.useCallback(() => {
+        const callTimestamp = new Date().getTime();
+        const diffFromLastCall = callTimestamp - lastCallTimestamp.current;
+        if (diffFromLastCall < 5) {
+            logger.logger.warn('usePromise: Fetcher function was called too soon. Please make sure you are not calling the fetcher function inside a loop or a synchronous function.', deps);
         }
-    });
-    React.useEffect(() => {
-        if (!options.enabled)
-            return;
-        // Flag to track if the another fetch has been triggered before the current one has completed
-        let isInvalid = false;
+        lastCallTimestamp.current = callTimestamp;
         if (!state.isLoading) {
-            setState({
-                isLoading: true,
+            dispatch({
+                payload: true,
+                type: 'SET_LOADING',
             });
         }
-        fetch({
-            onData: (data) => {
-                if (isInvalid)
-                    return;
-                setState({
-                    data,
-                    isLoading: false,
+        resolveFetcher.resolveFetcher(fetcher, { retries }, (error, data) => {
+            if (callTimestamp !== lastCallTimestamp.current)
+                return;
+            if (error) {
+                logger.logger.error(error);
+                dispatch({
+                    payload: error,
+                    type: 'SET_ERROR',
                 });
-            },
-            onError: (error) => {
-                if (isInvalid)
-                    return;
-                setState({
-                    error,
-                    isLoading: false,
+                onReject === null || onReject === void 0 ? void 0 : onReject(error);
+                return;
+            }
+            if (data) {
+                dispatch({
+                    payload: data,
+                    type: 'SET_DATA',
                 });
-            },
+                onResolve === null || onResolve === void 0 ? void 0 : onResolve(data);
+                return;
+            }
+            dispatch({
+                payload: false,
+                type: 'SET_LOADING',
+            });
         });
-        return () => {
-            isInvalid = true;
-        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [key, options.enabled]);
-    return Object.assign(Object.assign({}, state), { isLoading: state.isLoading });
+    }, deps);
+    React.useEffect(() => {
+        if (enabled) {
+            callback();
+        }
+    }, [callback, enabled]);
+    return state;
 };
 
 exports.usePromise = usePromise;

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

@@ -1,20 +1,33 @@
-import { DependencyList } from 'react';
-import { PromiseState } from './usePromise.types';
-export type UsePromiseOptions = {
-    enabled?: boolean;
-};
+import { UsePromiseOptions, PromiseState } from './usePromise.types';
 /**
- * usePromise hook
+ * Custom hook for handling promises and fetching data.
+ * @template T - The type of the data returned by the promise.
+ * @template E - The type of the error thrown by the promise.
+ * @param {() => T | Promise<T>} fetcher - A function that returns the data or a promise that resolves to the data.
+ * @param {UsePromiseOptions<T, E>} [options={}] - Options for the hook.
+ * @param {number} [options.retries] - The number of times to retry the fetch in case of failure.
+ * @param {T} [options.initialData] - The initial data the hook will use until the promise is resolved.
+ * @param {DependencyList} [options.deps=[]] - An array of dependencies for the hook.
+ * @param {boolean} [options.enabled] - Flag indicating whether the fetch should be enabled or not.
+ * @param {(data: T) => void} [options.onResolve] - Callback to be called when the fetch is resolved successfully.
+ * @param {(error: E) => void} [options.onReject] - Callback to be called when the fetch is rejected with an error.
+ * @returns {PromiseState<T, E>} - The state object containing the data, error, and loading status.
+ * @example
+ * // Example usage with a simple fetcher function
+ * const fetcher = fetch('https://api.example.com/data');
  *
- * A React hook to handle promises and fetching data, providing the ability to track loading, data, and error state.
+ * const MyComponent = () => {
+ *  const { data, isLoading, error } = usePromise(fetcher);
  *
- * @template T The type of data returned from the fetcher function.
- * @template E The type of error returned from the fetcher function.
+ *  if (isLoading) {
+ *    return <div>Loading...</div>;
+ *  }
  *
- * @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.
+ *  if (error) {
+ *    return <div>Error: {error.message}</div>;
+ *  }
  *
- * @returns {PromiseState<T, E>} - Object containing the hook state, including data, error, and loading status.
+ * return <div>Data: {data}</div>;
+ * };
  */
-export declare const usePromise: <T = unknown, E = unknown>(fetcher: () => T | Promise<T>, deps?: DependencyList, options?: UsePromiseOptions) => PromiseState<T, E>;
+export declare const usePromise: <T, E = Error>(fetcher: () => T | Promise<T>, options?: UsePromiseOptions<T, E> | undefined) => PromiseState<T, E>;

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

@@ -1,5 +1,4 @@
-import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useState, useEffect } from 'react';
+import { useRef, useReducer, useCallback, useEffect } from 'react';
 import '@dynamic-labs/sdk-api';
 import { logger } from '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
@@ -12,85 +11,93 @@ import '../../constants/colors.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../../shared/consts/index.js';
+import { resolveFetcher } from './utils/resolveFetcher/resolveFetcher.js';
+import { createReducer } from './utils/createReducer/createReducer.js';
 
 /**
- * usePromise hook
+ * Custom hook for handling promises and fetching data.
+ * @template T - The type of the data returned by the promise.
+ * @template E - The type of the error thrown by the promise.
+ * @param {() => T | Promise<T>} fetcher - A function that returns the data or a promise that resolves to the data.
+ * @param {UsePromiseOptions<T, E>} [options={}] - Options for the hook.
+ * @param {number} [options.retries] - The number of times to retry the fetch in case of failure.
+ * @param {T} [options.initialData] - The initial data the hook will use until the promise is resolved.
+ * @param {DependencyList} [options.deps=[]] - An array of dependencies for the hook.
+ * @param {boolean} [options.enabled] - Flag indicating whether the fetch should be enabled or not.
+ * @param {(data: T) => void} [options.onResolve] - Callback to be called when the fetch is resolved successfully.
+ * @param {(error: E) => void} [options.onReject] - Callback to be called when the fetch is rejected with an error.
+ * @returns {PromiseState<T, E>} - The state object containing the data, error, and loading status.
+ * @example
+ * // Example usage with a simple fetcher function
+ * const fetcher = fetch('https://api.example.com/data');
  *
- * A React hook to handle promises and fetching data, providing the ability to track loading, data, and error state.
+ * const MyComponent = () => {
+ *  const { data, isLoading, error } = usePromise(fetcher);
  *
- * @template T The type of data returned from the fetcher function.
- * @template E The type of error returned from the fetcher function.
+ *  if (isLoading) {
+ *    return <div>Loading...</div>;
+ *  }
  *
- * @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.
+ *  if (error) {
+ *    return <div>Error: {error.message}</div>;
+ *  }
  *
- * @returns {PromiseState<T, E>} - Object containing the hook state, including data, error, and loading status.
+ * return <div>Data: {data}</div>;
+ * };
  */
-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({
+const usePromise = (fetcher, options) => {
+    const lastCallTimestamp = useRef(new Date().getTime());
+    const { deps = [], initialData = undefined, enabled = true, retries = 0, onReject = () => { }, onResolve = () => { }, } = options || {};
+    const [state, dispatch] = useReducer(createReducer(), {
+        data: initialData,
         isLoading: 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();
-            if (fetchData instanceof Promise) {
-                data = yield fetchData;
-            }
-            else {
-                data = fetchData;
-            }
-            onData(data);
-        }
-        catch (error) {
-            logger.error(error);
-            onError(error);
+    const callback = useCallback(() => {
+        const callTimestamp = new Date().getTime();
+        const diffFromLastCall = callTimestamp - lastCallTimestamp.current;
+        if (diffFromLastCall < 5) {
+            logger.warn('usePromise: Fetcher function was called too soon. Please make sure you are not calling the fetcher function inside a loop or a synchronous function.', deps);
         }
-    });
-    useEffect(() => {
-        if (!options.enabled)
-            return;
-        // Flag to track if the another fetch has been triggered before the current one has completed
-        let isInvalid = false;
+        lastCallTimestamp.current = callTimestamp;
         if (!state.isLoading) {
-            setState({
-                isLoading: true,
+            dispatch({
+                payload: true,
+                type: 'SET_LOADING',
             });
         }
-        fetch({
-            onData: (data) => {
-                if (isInvalid)
-                    return;
-                setState({
-                    data,
-                    isLoading: false,
+        resolveFetcher(fetcher, { retries }, (error, data) => {
+            if (callTimestamp !== lastCallTimestamp.current)
+                return;
+            if (error) {
+                logger.error(error);
+                dispatch({
+                    payload: error,
+                    type: 'SET_ERROR',
                 });
-            },
-            onError: (error) => {
-                if (isInvalid)
-                    return;
-                setState({
-                    error,
-                    isLoading: false,
+                onReject === null || onReject === void 0 ? void 0 : onReject(error);
+                return;
+            }
+            if (data) {
+                dispatch({
+                    payload: data,
+                    type: 'SET_DATA',
                 });
-            },
+                onResolve === null || onResolve === void 0 ? void 0 : onResolve(data);
+                return;
+            }
+            dispatch({
+                payload: false,
+                type: 'SET_LOADING',
+            });
         });
-        return () => {
-            isInvalid = true;
-        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [key, options.enabled]);
-    return Object.assign(Object.assign({}, state), { isLoading: state.isLoading });
+    }, deps);
+    useEffect(() => {
+        if (enabled) {
+            callback();
+        }
+    }, [callback, enabled]);
+    return state;
 };
 
 export { usePromise };

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

@@ -1,5 +1,14 @@
+import { DependencyList } from 'react';
 export type PromiseState<T, E> = {
     data?: T;
     error?: E;
     isLoading: boolean;
 };
+export type UsePromiseOptions<T, E> = {
+    deps?: DependencyList;
+    retries?: number;
+    enabled?: boolean;
+    initialData?: T;
+    onResolve?: (data: T) => void;
+    onReject?: (error: E) => void;
+};

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

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const createReducer = () => (state, action) => {
+    switch (action.type) {
+        case 'SET_DATA':
+            return Object.assign(Object.assign({}, state), { data: action.payload, isLoading: false });
+        case 'SET_ERROR':
+            return Object.assign(Object.assign({}, state), { error: action.payload, isLoading: false });
+        case 'SET_LOADING':
+            return Object.assign(Object.assign({}, state), { isLoading: action.payload });
+        default:
+            return state;
+    }
+};
+
+exports.createReducer = createReducer;

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

@@ -0,0 +1,13 @@
+import { PromiseState } from '../../usePromise.types';
+type ReducerAction<T = unknown, E = unknown> = {
+    type: 'SET_DATA';
+    payload: T;
+} | {
+    type: 'SET_ERROR';
+    payload: E;
+} | {
+    type: 'SET_LOADING';
+    payload: boolean;
+};
+export declare const createReducer: <T = unknown, E = unknown>() => (state: PromiseState<T, E>, action: ReducerAction<T, E>) => PromiseState<T, E>;
+export {};

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

@@ -0,0 +1,14 @@
+const createReducer = () => (state, action) => {
+    switch (action.type) {
+        case 'SET_DATA':
+            return Object.assign(Object.assign({}, state), { data: action.payload, isLoading: false });
+        case 'SET_ERROR':
+            return Object.assign(Object.assign({}, state), { error: action.payload, isLoading: false });
+        case 'SET_LOADING':
+            return Object.assign(Object.assign({}, state), { isLoading: action.payload });
+        default:
+            return state;
+    }
+};
+
+export { createReducer };

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

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

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

@@ -0,0 +1,2 @@
+export * from './resolveFetcher';
+export * from './createReducer';

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

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

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

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../../../_virtual/_tslib.cjs');
+
+const isPromise = (value) => value instanceof Promise;
+const resolveFetcher = (fetcher, { retries }, callback) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const totalNumberOfAttempts = retries ? retries + 1 : 1;
+    let currentAttempt = 0;
+    let data;
+    let err;
+    while (currentAttempt < totalNumberOfAttempts) {
+        currentAttempt = currentAttempt + 1;
+        try {
+            const result = fetcher();
+            if (isPromise(result)) {
+                data = yield result;
+            }
+            else {
+                data = result;
+            }
+            err = undefined;
+        }
+        catch (error) {
+            err = error;
+        }
+    }
+    callback(err, data);
+});
+
+exports.resolveFetcher = resolveFetcher;

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

@@ -0,0 +1,5 @@
+type ResolveFetcherOptions = {
+    retries?: number;
+};
+export declare const resolveFetcher: <E, T>(fetcher: () => T | Promise<T>, { retries }: ResolveFetcherOptions, callback: (err: E | undefined, data: T | undefined) => void) => Promise<void>;
+export {};

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

@@ -0,0 +1,28 @@
+import { __awaiter } from '../../../../../../../_virtual/_tslib.js';
+
+const isPromise = (value) => value instanceof Promise;
+const resolveFetcher = (fetcher, { retries }, callback) => __awaiter(void 0, void 0, void 0, function* () {
+    const totalNumberOfAttempts = retries ? retries + 1 : 1;
+    let currentAttempt = 0;
+    let data;
+    let err;
+    while (currentAttempt < totalNumberOfAttempts) {
+        currentAttempt = currentAttempt + 1;
+        try {
+            const result = fetcher();
+            if (isPromise(result)) {
+                data = yield result;
+            }
+            else {
+                data = result;
+            }
+            err = undefined;
+        }
+        catch (error) {
+            err = error;
+        }
+    }
+    callback(err, data);
+});
+
+export { resolveFetcher };

package/src/lib/views/NetworkNotSupported/NetworkNotSupported.cjs

@@ -55,7 +55,7 @@ var useApplyWalletConnectorNetwork = require('../../utils/hooks/useApplyWalletCo
 const NetworkNotSupported = () => {
     const { network, onboardingImageUrl, selectedWalletConnector: walletConnector, connectedWallets, primaryWallet, } = useInternalDynamicContext.useInternalDynamicContext();
     // Refresh selectedWalletConnector network when primaryWallet or connectedWallets updates
-    const { data: walletConnectorNetwork } = usePromise.usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), [primaryWallet, walletConnector, connectedWallets]);
+    const { data: walletConnectorNetwork } = usePromise.usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), { deps: [primaryWallet, walletConnector, connectedWallets] });
     const finishConnectAndSign = useConnectAndSign.useConnectAndSign();
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = React.useState(false);
     // Finishes auth flow when wallet switches to proper network

package/src/lib/views/NetworkNotSupported/NetworkNotSupported.js

@@ -51,7 +51,7 @@ import { useApplyWalletConnectorNetwork } from '../../utils/hooks/useApplyWallet
 const NetworkNotSupported = () => {
     const { network, onboardingImageUrl, selectedWalletConnector: walletConnector, connectedWallets, primaryWallet, } = useInternalDynamicContext();
     // Refresh selectedWalletConnector network when primaryWallet or connectedWallets updates
-    const { data: walletConnectorNetwork } = usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), [primaryWallet, walletConnector, connectedWallets]);
+    const { data: walletConnectorNetwork } = usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), { deps: [primaryWallet, walletConnector, connectedWallets] });
     const finishConnectAndSign = useConnectAndSign();
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);
     // Finishes auth flow when wallet switches to proper network

package/src/lib/views/NetworkNotSupportedSwitchManual/NetworkNotSupportedSwitchManual.cjs

@@ -56,7 +56,9 @@ const NetworkNotSupportedSwitchManual = () => {
     var _a, _b;
     const { user, selectedWalletConnector: walletConnector, connectedWallets, } = useInternalDynamicContext.useInternalDynamicContext();
     // Refresh selectedWalletConnector network when primaryWallet or connectedWallets updates
-    const { data: walletConnectorNetwork } = usePromise.usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), [walletConnector, connectedWallets]);
+    const { data: walletConnectorNetwork } = usePromise.usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), {
+        deps: [walletConnector, connectedWallets],
+    });
     const finishConnectAndSign = useConnectAndSign.useConnectAndSign();
     // Finishes auth flow when wallet switches to proper network
     React.useEffect(() => {

package/src/lib/views/NetworkNotSupportedSwitchManual/NetworkNotSupportedSwitchManual.js

@@ -52,7 +52,9 @@ const NetworkNotSupportedSwitchManual = () => {
     var _a, _b;
     const { user, selectedWalletConnector: walletConnector, connectedWallets, } = useInternalDynamicContext();
     // Refresh selectedWalletConnector network when primaryWallet or connectedWallets updates
-    const { data: walletConnectorNetwork } = usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), [walletConnector, connectedWallets]);
+    const { data: walletConnectorNetwork } = usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), {
+        deps: [walletConnector, connectedWallets],
+    });
     const finishConnectAndSign = useConnectAndSign();
     // Finishes auth flow when wallet switches to proper network
     useEffect(() => {

package/src/lib/views/SendBalanceView/SendBalanceView.cjs

@@ -59,8 +59,8 @@ const SendBalanceView = ({ initialRecipientAddress = '', initialValue, onClickBa
     if (!primaryWallet) {
         throw new utils.DynamicError('Primary wallet is not available, send balance cannot be displayed');
     }
-    const { data: balance } = usePromise.usePromise(() => primaryWallet.connector.getBalance(), [primaryWallet]);
-    const { data: provider } = usePromise.usePromise(() => primaryWallet.connector.getWeb3Provider(), [primaryWallet]);
+    const { data: balance } = usePromise.usePromise(() => primaryWallet.connector.getBalance());
+    const { data: provider } = usePromise.usePromise(() => primaryWallet.connector.getWeb3Provider());
     const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
         primaryWallet.connector.evmNetworks) ||
         [];

package/src/lib/views/SendBalanceView/SendBalanceView.js

@@ -55,8 +55,8 @@ const SendBalanceView = ({ initialRecipientAddress = '', initialValue, onClickBa
     if (!primaryWallet) {
         throw new DynamicError('Primary wallet is not available, send balance cannot be displayed');
     }
-    const { data: balance } = usePromise(() => primaryWallet.connector.getBalance(), [primaryWallet]);
-    const { data: provider } = usePromise(() => primaryWallet.connector.getWeb3Provider(), [primaryWallet]);
+    const { data: balance } = usePromise(() => primaryWallet.connector.getBalance());
+    const { data: provider } = usePromise(() => primaryWallet.connector.getWeb3Provider());
     const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
         primaryWallet.connector.evmNetworks) ||
         [];

package/src/lib/views/TransactionConfirmationView/hooks/useTransactionData/useTransactionData.cjs

@@ -54,7 +54,7 @@ const useTransactionData = ({ provider, transaction, }) => {
         // because alchemy checks the origin address funds and can return an error if
         // origin wallet has no funds for the transaction
         // https://docs.alchemy.com/reference/eth-estimategas
-        const { from } = transaction, transactionWithNoOrigin = _tslib.__rest(transaction, ["from"]);
+        const transactionWithNoOrigin = _tslib.__rest(transaction, ["from"]);
         return provider.estimateGas(transactionWithNoOrigin);
     });
     const { data: gasPrice, isLoading: isFeeDataLoading } = usePromise.usePromise(() => provider.getGasPrice());

package/src/lib/views/TransactionConfirmationView/hooks/useTransactionData/useTransactionData.js

@@ -50,7 +50,7 @@ const useTransactionData = ({ provider, transaction, }) => {
         // because alchemy checks the origin address funds and can return an error if
         // origin wallet has no funds for the transaction
         // https://docs.alchemy.com/reference/eth-estimategas
-        const { from } = transaction, transactionWithNoOrigin = __rest(transaction, ["from"]);
+        const transactionWithNoOrigin = __rest(transaction, ["from"]);
         return provider.estimateGas(transactionWithNoOrigin);
     });
     const { data: gasPrice, isLoading: isFeeDataLoading } = usePromise(() => provider.getGasPrice());

package/src/lib/widgets/DynamicWidget/prompts/PendingAccountSwitchModal/PendingAccountSwitchModal.cjs

@@ -17,7 +17,7 @@ const PendingAccountSwitchModal = () => {
     const { selectedWalletWithAction, primaryWallet, secondaryWallets } = useInternalDynamicContext.useInternalDynamicContext();
     const selectedConnector = (_a = selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet) === null || _a === void 0 ? void 0 : _a.connector;
     const isSameWallet = (selectedConnector === null || selectedConnector === void 0 ? void 0 : selectedConnector.name) === (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name);
-    const connectedWallet = useConnectedAccountWallet.useConnectedAccountWallet((_b = selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet) === null || _b === void 0 ? void 0 : _b.connector, secondaryWallets);
+    const { data: connectedWallet } = useConnectedAccountWallet.useConnectedAccountWallet((_b = selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet) === null || _b === void 0 ? void 0 : _b.connector, secondaryWallets);
     React.useEffect(() => {
         //flow client library only supports one connected wallet at any given time.
         const disconnectAndConnect = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {

package/src/lib/widgets/DynamicWidget/prompts/PendingAccountSwitchModal/PendingAccountSwitchModal.js

@@ -13,7 +13,7 @@ const PendingAccountSwitchModal = () => {
     const { selectedWalletWithAction, primaryWallet, secondaryWallets } = useInternalDynamicContext();
     const selectedConnector = (_a = selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet) === null || _a === void 0 ? void 0 : _a.connector;
     const isSameWallet = (selectedConnector === null || selectedConnector === void 0 ? void 0 : selectedConnector.name) === (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name);
-    const connectedWallet = useConnectedAccountWallet((_b = selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet) === null || _b === void 0 ? void 0 : _b.connector, secondaryWallets);
+    const { data: connectedWallet } = useConnectedAccountWallet((_b = selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet) === null || _b === void 0 ? void 0 : _b.connector, secondaryWallets);
     useEffect(() => {
         //flow client library only supports one connected wallet at any given time.
         const disconnectAndConnect = () => __awaiter(void 0, void 0, void 0, function* () {