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

package/CHANGELOG.md

@@ -1,15 +1,40 @@
 
+## [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)
+
+
+### ⚠ BREAKING CHANGES
+
+* displayTermsOfService prop set to false breaks message verfication (#2751)
+
+### Features
+
+* send wagmi settings from wagmi connector ([#2791](https://github.com/dynamic-labs/DynamicAuth/issues/2791)) ([#2800](https://github.com/dynamic-labs/DynamicAuth/issues/2800)) ([5b65605](https://github.com/dynamic-labs/DynamicAuth/commit/5b656059361a48de57e01ad2dd81de0bc9b2c7e8))
+
+
+### Bug Fixes
+
+* always call onBeforeConnectSuccess callback when wallet state changes ([#2786](https://github.com/dynamic-labs/DynamicAuth/issues/2786)) ([e2eaef3](https://github.com/dynamic-labs/DynamicAuth/commit/e2eaef3da1f80cdc7dc21e902e9c033e581242d2))
+* displayTermsOfService prop set to false breaks message verfication ([#2751](https://github.com/dynamic-labs/DynamicAuth/issues/2751)) ([6433732](https://github.com/dynamic-labs/DynamicAuth/commit/6433732fac87d641f2475d19ef743ac31130274f))
+* ensure auto-redirect back to dapp after message signing ([#2783](https://github.com/dynamic-labs/DynamicAuth/issues/2783)) ([dba4664](https://github.com/dynamic-labs/DynamicAuth/commit/dba466473ecc2afd808cdae0fd9023d38676b01f))
+* use css.supports only when available ([#2802](https://github.com/dynamic-labs/DynamicAuth/issues/2802)) ([7651898](https://github.com/dynamic-labs/DynamicAuth/commit/76518982a97e728ab65549f37f55b537eed4e890))
+
 ## [0.18.0-RC.25](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-RC.24...v0.18.0-RC.25) (2023-08-01)
 
 
 ### ⚠ BREAKING CHANGES
 
-* displayTermsOfService prop set to false breaks message verfication (#2790)
+* displayTermsOfService prop set to false breaks message verfication (#2751)
 
 ### Bug Fixes
 
-* always call onBeforeConnectSuccess callback when wallet state ch… ([#2792](https://github.com/dynamic-labs/DynamicAuth/issues/2792)) ([ecc6a7b](https://github.com/dynamic-labs/DynamicAuth/commit/ecc6a7bf3cbee2720860294561ff8dea03d1936e)), closes [#2786](https://github.com/dynamic-labs/DynamicAuth/issues/2786)
-* displayTermsOfService prop set to false breaks message verfication ([#2790](https://github.com/dynamic-labs/DynamicAuth/issues/2790)) ([816e276](https://github.com/dynamic-labs/DynamicAuth/commit/816e276827ac6a89e6ab49afcca00705a07b2ad2)), closes [#2751](https://github.com/dynamic-labs/DynamicAuth/issues/2751)
+* always call onBeforeConnectSuccess callback when wallet state changes ([#2786](https://github.com/dynamic-labs/DynamicAuth/issues/2786)) ([e2eaef3](https://github.com/dynamic-labs/DynamicAuth/commit/e2eaef3da1f80cdc7dc21e902e9c033e581242d2))
+* displayTermsOfService prop set to false breaks message verfication ([#2751](https://github.com/dynamic-labs/DynamicAuth/issues/2751)) ([6433732](https://github.com/dynamic-labs/DynamicAuth/commit/6433732fac87d641f2475d19ef743ac31130274f))
 * ensure auto-redirect back to dapp after message signing ([#2783](https://github.com/dynamic-labs/DynamicAuth/issues/2783)) ([dba4664](https://github.com/dynamic-labs/DynamicAuth/commit/dba466473ecc2afd808cdae0fd9023d38676b01f))
 
 ## [0.18.0-RC.24](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-RC.23...v0.18.0-RC.24) (2023-08-01)

package/package.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.18.0-RC.25";
+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.25";
+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.25",
+  "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.25",
-    "@dynamic-labs/multi-wallet": "0.18.0-RC.25",
-    "@dynamic-labs/rpc-providers": "0.18.0-RC.25",
-    "@dynamic-labs/types": "0.18.0-RC.25",
-    "@dynamic-labs/utils": "0.18.0-RC.25",
-    "@dynamic-labs/wallet-book": "0.18.0-RC.25",
-    "@dynamic-labs/wallet-connector-core": "0.18.0-RC.25"
+    "@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/context/DynamicContext/DynamicContext.cjs

@@ -359,6 +359,11 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
         setIsVerificationInProgress,
         user,
     });
+    const sendWagmiSettings = (settings) => {
+        api.sendDynamicProps(environmentId, {
+            dynamicWagmiSettings: settings.dynamicWagmiSettings,
+        });
+    };
     const clearStatesOnBackClick = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         setDesktopUri('');
         // Clear verification flag but dont require it to be set
@@ -465,6 +470,7 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
             secondaryWallets,
             selectedWalletConnector,
             selectedWalletWithAction,
+            sendWagmiSettings,
             setAuthMode,
             setAuthorizationViewDisplayOrder,
             setBridgeChainToConnect,

package/src/lib/context/DynamicContext/DynamicContext.js

@@ -27,7 +27,7 @@ import { useFetchProjectSettings } from '../../utils/hooks/useFetchProjectSettin
 import { useFetchNonce } from '../../utils/hooks/useFetchNonce/useFetchNonce.js';
 import { useWallets } from '../../utils/hooks/useWallets/useWallets.js';
 import { useWalletConnectors } from '../../utils/hooks/useWalletConnectors/useWalletConnectors.js';
-import { revokeSession } from '../../data/api.js';
+import { revokeSession, sendDynamicProps } from '../../data/api.js';
 import '@dynamic-labs/multi-wallet';
 import { getAuthToken } from '../../utils/functions/getAuthToken/getAuthToken.js';
 import '@dynamic-labs/sdk-api';
@@ -355,6 +355,11 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
         setIsVerificationInProgress,
         user,
     });
+    const sendWagmiSettings = (settings) => {
+        sendDynamicProps(environmentId, {
+            dynamicWagmiSettings: settings.dynamicWagmiSettings,
+        });
+    };
     const clearStatesOnBackClick = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         setDesktopUri('');
         // Clear verification flag but dont require it to be set
@@ -461,6 +466,7 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
             secondaryWallets,
             selectedWalletConnector,
             selectedWalletWithAction,
+            sendWagmiSettings,
             setAuthMode,
             setAuthorizationViewDisplayOrder,
             setBridgeChainToConnect,

package/src/lib/context/DynamicContext/types/index.d.ts

@@ -59,6 +59,9 @@ export interface IDynamicContext {
     isSingleWalletAccount: boolean;
     loadingNetwork: boolean;
     loginWithEmail: boolean;
+    sendWagmiSettings: (settings: {
+        dynamicWagmiSettings?: object;
+    }) => void;
     multiWallet: boolean;
     multiWalletWidgetState: MultiWalletWidgetState;
     network: number | string | undefined;

package/src/lib/context/DynamicContext/useDynamicContext.cjs

@@ -11,7 +11,7 @@ const useDynamicContext = () => {
     if (context === undefined) {
         throw new Error('useDynamicContext must be used within a DynamicContextProvider');
     }
-    const { accountSwitchState, authMode, authToken, awaitingSignatureState, connectedWallets, getNameService, handleLogOut, handleUnlinkWallet, isAuthenticated, isFullyConnected, isVerificationInProgress, linkedWallets, loadingNetwork, loginWithEmail, multiWalletWidgetState, network, networkConfigurations, qrcodeUri, rpcProviders, sdkHasLoaded, secondaryWallets, setLogInWithEmail, setMultiWalletWidgetState, setNetwork, setPrimaryWallet, setShowAuthFlow, setShowDynamicUserProfile, setShowQrcodeModal, shadowDOMEnabled, showAuthFlow, showQrcodeModal, user, walletConnector, wallets, walletsByChain, walletsToConnectByChain, primaryWallet, } = context;
+    const { accountSwitchState, authMode, authToken, awaitingSignatureState, connectedWallets, getNameService, handleLogOut, handleUnlinkWallet, isAuthenticated, isFullyConnected, isVerificationInProgress, linkedWallets, loadingNetwork, loginWithEmail, multiWalletWidgetState, network, networkConfigurations, qrcodeUri, rpcProviders, sdkHasLoaded, secondaryWallets, setLogInWithEmail, setMultiWalletWidgetState, setNetwork, setPrimaryWallet, setShowAuthFlow, setShowDynamicUserProfile, setShowQrcodeModal, shadowDOMEnabled, showAuthFlow, showQrcodeModal, user, walletConnector, wallets, walletsByChain, walletsToConnectByChain, primaryWallet, setShowBridgeWidget, sendWagmiSettings, } = context;
     return {
         accountSwitchState,
         authMode,
@@ -35,11 +35,13 @@ const useDynamicContext = () => {
         rpcProviders,
         sdkHasLoaded,
         secondaryWallets,
+        sendWagmiSettings,
         setLogInWithEmail,
         setMultiWalletWidgetState,
         setNetwork,
         setPrimaryWallet,
         setShowAuthFlow,
+        setShowBridgeWidget,
         setShowDynamicUserProfile,
         setShowQrcodeModal,
         shadowDOMEnabled,

package/src/lib/context/DynamicContext/useDynamicContext.d.ts

@@ -1,3 +1,3 @@
 import { IDynamicContext } from './types';
-export type UseDynamicContext = Pick<IDynamicContext, 'accountSwitchState' | 'authMode' | 'authToken' | 'awaitingSignatureState' | 'connectedWallets' | 'getNameService' | 'handleLogOut' | 'handleUnlinkWallet' | 'isAuthenticated' | 'isFullyConnected' | 'isVerificationInProgress' | 'linkedWallets' | 'loadingNetwork' | 'loginWithEmail' | 'multiWalletWidgetState' | 'network' | 'networkConfigurations' | 'primaryWallet' | 'qrcodeUri' | 'rpcProviders' | 'sdkHasLoaded' | 'secondaryWallets' | 'setLogInWithEmail' | 'setMultiWalletWidgetState' | 'setNetwork' | 'setPrimaryWallet' | 'setShowAuthFlow' | 'setShowDynamicUserProfile' | 'setShowQrcodeModal' | 'shadowDOMEnabled' | 'showAuthFlow' | 'showQrcodeModal' | 'user' | 'walletConnector' | 'wallets' | 'walletsByChain' | 'walletsToConnectByChain'>;
+export type UseDynamicContext = Pick<IDynamicContext, 'accountSwitchState' | 'authMode' | 'authToken' | 'awaitingSignatureState' | 'connectedWallets' | 'getNameService' | 'handleLogOut' | 'handleUnlinkWallet' | 'isAuthenticated' | 'isFullyConnected' | 'isVerificationInProgress' | 'linkedWallets' | 'loadingNetwork' | 'loginWithEmail' | 'multiWalletWidgetState' | 'network' | 'networkConfigurations' | 'primaryWallet' | 'qrcodeUri' | 'rpcProviders' | 'sdkHasLoaded' | 'secondaryWallets' | 'setLogInWithEmail' | 'setMultiWalletWidgetState' | 'setNetwork' | 'setPrimaryWallet' | 'setShowAuthFlow' | 'setShowDynamicUserProfile' | 'setShowQrcodeModal' | 'shadowDOMEnabled' | 'showAuthFlow' | 'showQrcodeModal' | 'user' | 'walletConnector' | 'wallets' | 'walletsByChain' | 'walletsToConnectByChain' | 'setShowBridgeWidget' | 'sendWagmiSettings'>;
 export declare const useDynamicContext: () => UseDynamicContext;

package/src/lib/context/DynamicContext/useDynamicContext.js

@@ -7,7 +7,7 @@ const useDynamicContext = () => {
     if (context === undefined) {
         throw new Error('useDynamicContext must be used within a DynamicContextProvider');
     }
-    const { accountSwitchState, authMode, authToken, awaitingSignatureState, connectedWallets, getNameService, handleLogOut, handleUnlinkWallet, isAuthenticated, isFullyConnected, isVerificationInProgress, linkedWallets, loadingNetwork, loginWithEmail, multiWalletWidgetState, network, networkConfigurations, qrcodeUri, rpcProviders, sdkHasLoaded, secondaryWallets, setLogInWithEmail, setMultiWalletWidgetState, setNetwork, setPrimaryWallet, setShowAuthFlow, setShowDynamicUserProfile, setShowQrcodeModal, shadowDOMEnabled, showAuthFlow, showQrcodeModal, user, walletConnector, wallets, walletsByChain, walletsToConnectByChain, primaryWallet, } = context;
+    const { accountSwitchState, authMode, authToken, awaitingSignatureState, connectedWallets, getNameService, handleLogOut, handleUnlinkWallet, isAuthenticated, isFullyConnected, isVerificationInProgress, linkedWallets, loadingNetwork, loginWithEmail, multiWalletWidgetState, network, networkConfigurations, qrcodeUri, rpcProviders, sdkHasLoaded, secondaryWallets, setLogInWithEmail, setMultiWalletWidgetState, setNetwork, setPrimaryWallet, setShowAuthFlow, setShowDynamicUserProfile, setShowQrcodeModal, shadowDOMEnabled, showAuthFlow, showQrcodeModal, user, walletConnector, wallets, walletsByChain, walletsToConnectByChain, primaryWallet, setShowBridgeWidget, sendWagmiSettings, } = context;
     return {
         accountSwitchState,
         authMode,
@@ -31,11 +31,13 @@ const useDynamicContext = () => {
         rpcProviders,
         sdkHasLoaded,
         secondaryWallets,
+        sendWagmiSettings,
         setLogInWithEmail,
         setMultiWalletWidgetState,
         setNetwork,
         setPrimaryWallet,
         setShowAuthFlow,
+        setShowBridgeWidget,
         setShowDynamicUserProfile,
         setShowQrcodeModal,
         shadowDOMEnabled,

package/src/lib/data/api.cjs

@@ -383,13 +383,15 @@ const getOnrampProviders = ({ chain, environmentId, networkId, token, walletAddr
 const sendDynamicProps = (environmentId, settingsToSend) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
     try {
         const { dynamicContextProps, dynamicWagmiSettings } = settingsToSend;
-        yield sdkApi().logDynamicSdkSettings({
-            environmentId,
-            sdkSettingsRequest: {
-                dynamicContextProps,
-                dynamicWagmiSettings,
-            },
-        });
+        if (dynamicContextProps || dynamicWagmiSettings) {
+            yield sdkApi().logDynamicSdkSettings({
+                environmentId,
+                sdkSettingsRequest: {
+                    dynamicContextProps,
+                    dynamicWagmiSettings,
+                },
+            });
+        }
     }
     catch (e) {
         logger.logger.error(e);

package/src/lib/data/api.js

@@ -379,13 +379,15 @@ const getOnrampProviders = ({ chain, environmentId, networkId, token, walletAddr
 const sendDynamicProps = (environmentId, settingsToSend) => __awaiter(void 0, void 0, void 0, function* () {
     try {
         const { dynamicContextProps, dynamicWagmiSettings } = settingsToSend;
-        yield sdkApi().logDynamicSdkSettings({
-            environmentId,
-            sdkSettingsRequest: {
-                dynamicContextProps,
-                dynamicWagmiSettings,
-            },
-        });
+        if (dynamicContextProps || dynamicWagmiSettings) {
+            yield sdkApi().logDynamicSdkSettings({
+                environmentId,
+                sdkSettingsRequest: {
+                    dynamicContextProps,
+                    dynamicWagmiSettings,
+                },
+            });
+        }
     }
     catch (e) {
         logger.error(e);

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* () {