@dynamic-labs/sdk-react-core 0.17.0-RC.9 → 0.17.0

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

@@ -1,8 +1,9 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { isSameAddress } from '@dynamic-labs/wallet-connector-core';
 import '@dynamic-labs/sdk-api';
 import { logger } from '../../../shared/logger.js';
+import '../../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import 'react/jsx-runtime';
 import '../../../context/ViewContext/ViewContext.js';
@@ -12,7 +13,7 @@ import 'ethers';
 import '../../../shared/consts/index.js';
 
 const orderedSecondaryWalletAddresses = (wallets) => wallets.map((wallet) => wallet.address).sort();
-const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, setSelectedWalletConnector, setMultiWalletWidgetState, user, setPrimaryWalletId, connectWalletByAddressAndChain, }) => {
+const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnector, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, connectWalletByAddressAndChain, }) => {
     const [loadingNetwork, setLoadingNetwork] = useState(true);
     const [network, setNetwork] = useState(undefined);
     useEffect(() => {
@@ -38,39 +39,74 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             return;
         }
         const seen = new Set();
+        addPrimaryWalletEventListeners(seen);
+        addSecondaryWalletEventListeners(seen);
+        return () => {
+            primaryWallet.connector.teardownEventListeners();
+            for (const wallet of secondaryWallets) {
+                wallet.connector.teardownEventListeners();
+            }
+        };
+        // justification: we don't want to setup event listeners more than needed
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        user,
+        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address,
+        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id,
+        multiWalletWidgetState,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        orderedSecondaryWalletAddresses(secondaryWallets).join(),
+        selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
+    ]);
+    const handleAccountChangeWhenAwaitingAccountSwitch = useCallback((isPrimaryWallet, newAddress) => {
+        const linkedSecondaryWallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain));
+        // this means the user is linking a new account, so we need proof of ownership...
+        if (!linkedSecondaryWallet) {
+            setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
+            if (isPrimaryWallet && primaryWallet) {
+                setSelectedWalletConnector(primaryWallet.connector);
+            }
+            return;
+        }
+        // ...otherwise, the user is switching primary accounts betweeen the same wallet
+        setSelectedWalletWithAction(null);
+        setPrimaryWalletId(linkedSecondaryWallet.id);
+        setMultiWalletWidgetState('idle');
+    }, [
+        setMultiWalletWidgetState,
+        primaryWallet,
+        secondaryWallets,
+        setSelectedWalletConnector,
+        setSelectedWalletWithAction,
+        setPrimaryWalletId,
+    ]);
+    const addPrimaryWalletEventListeners = useCallback((seen) => {
+        if (!primaryWallet) {
+            return;
+        }
         seen.add(primaryWallet.connector.name);
         primaryWallet.connector.setupEventListeners({
             onAccountChange: (accounts) => __awaiter(void 0, void 0, void 0, function* () {
                 const [newAddress] = accounts;
-                yield computeConnectedStateForWallets();
+                const newWallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain));
                 if (isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain)) {
                     setMultiWalletWidgetState('idle');
                 }
                 else if (!multiWallet) {
                     yield handleLogOut();
+                    return;
                 }
                 else if (multiWalletWidgetState === 'awaiting_account_switch') {
-                    const linkedSecondaryWallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain));
-                    // this means the user is linking a new account, so we need proof of ownership...
-                    if (!linkedSecondaryWallet) {
-                        setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
-                        setSelectedWalletConnector(primaryWallet.connector);
-                        return;
-                    }
-                    // ...otherwise, the user is switching primary accounts betweeen the same wallet
-                    setPrimaryWalletId(linkedSecondaryWallet.id);
-                    setMultiWalletWidgetState('idle');
-                    yield computeConnectedStateForWallets();
+                    handleAccountChangeWhenAwaitingAccountSwitch(true, newAddress);
                 }
-                else if (multiWalletWidgetState === 'idle' &&
-                    secondaryWallets.some((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain))) {
-                    setMultiWalletWidgetState('detected_known_secondary_wallet');
+                else if (multiWalletWidgetState === 'idle' && newWallet) {
+                    setPrimaryWalletId(newWallet.id);
                 }
-                else if (multiWalletWidgetState === 'idle' &&
-                    !secondaryWallets.some((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain))) {
+                else if (multiWalletWidgetState === 'idle' && !newWallet) {
                     if (user) {
                         setMultiWalletWidgetState('detected_new_wallet');
                         setSelectedWalletConnector(primaryWallet.connector);
+                        yield computeConnectedStateForWallets();
                         return;
                     }
                     connectWalletByAddressAndChain(primaryWallet.connector.name, newAddress, primaryWallet.chain);
@@ -79,57 +115,57 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
                     logger.error(`Unexpected multiWalletWidgetState (${multiWalletWidgetState}) and onAccountChange combination. Resetting state to idle.`);
                     setMultiWalletWidgetState('idle');
                 }
+                yield computeConnectedStateForWallets();
             }),
             onChainChange: (chain) => __awaiter(void 0, void 0, void 0, function* () {
-                /* istanbul ignore next */
                 setNetwork(parseInt(chain));
             }),
             onDisconnect: handleLogOut,
         });
+    }, [
+        primaryWallet,
+        setMultiWalletWidgetState,
+        multiWallet,
+        user,
+        computeConnectedStateForWallets,
+        handleLogOut,
+        connectWalletByAddressAndChain,
+        multiWalletWidgetState,
+        secondaryWallets,
+        setSelectedWalletConnector,
+        handleAccountChangeWhenAwaitingAccountSwitch,
+        setPrimaryWalletId,
+    ]);
+    const addSecondaryWalletEventListeners = useCallback((seen) => {
+        const secondaryListeners = {
+            onAccountChange: () => __awaiter(void 0, void 0, void 0, function* () {
+                if (multiWalletWidgetState === 'awaiting_account_switch') {
+                    handleAccountChangeWhenAwaitingAccountSwitch(false, (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address) || '');
+                }
+                yield computeConnectedStateForWallets();
+            }),
+            onDisconnect: () => __awaiter(void 0, void 0, void 0, function* () {
+                yield computeConnectedStateForWallets();
+            }),
+        };
         if (selectedWalletConnector && !seen.has(selectedWalletConnector.name)) {
             seen.add(selectedWalletConnector.name);
-            selectedWalletConnector.setupEventListeners({
-                onAccountChange: () => __awaiter(void 0, void 0, void 0, function* () {
-                    if (multiWalletWidgetState === 'awaiting_account_switch') {
-                        setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
-                    }
-                    yield computeConnectedStateForWallets();
-                }),
-                onDisconnect: () => __awaiter(void 0, void 0, void 0, function* () {
-                    yield computeConnectedStateForWallets();
-                }),
-            });
+            selectedWalletConnector.setupEventListeners(secondaryListeners);
         }
         for (const wallet of secondaryWallets) {
             if (seen.has(wallet.connector.name)) {
                 continue;
             }
             seen.add(wallet.connector.name);
-            wallet.connector.setupEventListeners({
-                onAccountChange: () => __awaiter(void 0, void 0, void 0, function* () {
-                    yield computeConnectedStateForWallets();
-                }),
-                onDisconnect: () => __awaiter(void 0, void 0, void 0, function* () {
-                    yield computeConnectedStateForWallets();
-                }),
-            });
+            wallet.connector.setupEventListeners(secondaryListeners);
         }
-        return () => {
-            primaryWallet.connector.teardownEventListeners();
-            for (const wallet of secondaryWallets) {
-                wallet.connector.teardownEventListeners();
-            }
-        };
-        // justification: we don't want to setup event listeners more than needed
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
-        user,
-        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address,
-        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id,
+        computeConnectedStateForWallets,
+        selectedWalletConnector,
+        selectedWalletWithAction,
+        handleAccountChangeWhenAwaitingAccountSwitch,
         multiWalletWidgetState,
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        orderedSecondaryWalletAddresses(secondaryWallets).join(),
-        selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
+        secondaryWallets,
     ]);
     return {
         loadingNetwork,

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

@@ -3,61 +3,60 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../../_virtual/_tslib.cjs');
-var React = require('react');
 var utils = require('@dynamic-labs/utils');
 var MockContext = require('../../../context/MockContext/MockContext.cjs');
 var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
 var ErrorContext = require('../../../context/ErrorContext/ErrorContext.cjs');
 var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
-require('../../constants/colors.cjs');
-require('@dynamic-labs/multi-wallet');
 require('@dynamic-labs/sdk-api');
 require('../../../shared/logger.cjs');
+require('../../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('react/jsx-runtime');
+require('react');
+require('../../constants/colors.cjs');
 require('ethers');
+require('../../../shared/consts/index.cjs');
+require('@dynamic-labs/multi-wallet');
 var requiresTwoStepAuthentication = require('../../functions/requiresTwoStepAuthentication/requiresTwoStepAuthentication.cjs');
 var useConnectAndSign = require('../authenticationHooks/useConnectAndSign/useConnectAndSign.cjs');
 require('../../../config/ApiEndpoint.cjs');
-require('../../../shared/consts/index.cjs');
+require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 var useConnectAndSignSplitSteps = require('../authenticationHooks/useConnectAndSignSplitSteps/useConnectAndSignSplitSteps.cjs');
 var isSelectedWalletAlreadyConnected = require('../../functions/isSelectedWalletAlreadyConnected/isSelectedWalletAlreadyConnected.cjs');
 
 const useWalletItemActions = () => {
-    const { setMultiWalletWidgetState, setShowAuthFlow, setSelectedWalletConnector, wallets, setQrcodeUri, setDesktopUri, user, connectedWallets, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setMultiWalletWidgetState, setShowAuthFlow, setSelectedWalletConnector, wallets, setQrcodeUri, setDesktopUri, user, connectedWallets, setIsVerifying, } = useInternalDynamicContext.useInternalDynamicContext();
     const { mockedSDK } = MockContext.useMockContext();
     const { setError } = ErrorContext.useErrorContext();
     const { setView } = ViewContext.useViewContext();
     const { onlyConnectUser } = useConnectAndSignSplitSteps.useConnectAndSignSplitSteps();
     const connectAndSignWallet = useConnectAndSign.useConnectAndSign();
-    const setWalletConnectorAndWalletColor = React.useCallback((walletConnector) => {
-        setSelectedWalletConnector(walletConnector);
-    }, [setSelectedWalletConnector]);
     const handleCustodialWalletClick = (walletConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const twoStepAuthentication = requiresTwoStepAuthentication.requiresTwoStepAuthentication(walletConnector);
         if (twoStepAuthentication) {
-            setWalletConnectorAndWalletColor(walletConnector);
+            setSelectedWalletConnector(walletConnector);
             yield onlyConnectUser({
                 walletConnector,
             });
         }
         else {
-            setWalletConnectorAndWalletColor(walletConnector);
+            setSelectedWalletConnector(walletConnector);
             setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
         }
         setView('pending-signature');
     });
     const handleMobileWalletClick = (walletConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        setWalletConnectorAndWalletColor(walletConnector);
+        setSelectedWalletConnector(walletConnector);
         onlyConnectUser({ walletConnector });
     });
     const handleInstalledExtensionClick = (walletConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        setWalletConnectorAndWalletColor(walletConnector);
+        setSelectedWalletConnector(walletConnector);
         setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
     });
     const handleUninstalledClick = (walletConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        setWalletConnectorAndWalletColor(walletConnector);
+        setSelectedWalletConnector(walletConnector);
         if (!walletConnector.canConnectViaQrCode) {
             setView('no-qr-not-installed');
         }
@@ -87,7 +86,7 @@ const useWalletItemActions = () => {
             setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
         }
         setShowAuthFlow(false);
-        setWalletConnectorAndWalletColor(walletConnector);
+        setSelectedWalletConnector(walletConnector);
     });
     const openWallet = (walletKey, handlers) => {
         const { openMobileWallet = handleMobileWalletClick, openCustodialWallet = handleCustodialWalletClick, openExtensionWallet = handleInstalledExtensionClick, } = handlers || {};
@@ -111,6 +110,7 @@ const useWalletItemActions = () => {
         if (walletConnector.connectedChain === 'FLOW') {
             yield walletConnector.endSession();
         }
+        setIsVerifying(false);
         if (isSelectedWalletAlreadyConnected.isSelectedWalletAlreadyConnected(connectedWallets, walletConnector, user) &&
             walletConnector.connectedChain !== 'FLOW') {
             // wallet is already connected

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

@@ -1,59 +1,58 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useCallback } from 'react';
 import { isMobile } from '@dynamic-labs/utils';
 import { useMockContext } from '../../../context/MockContext/MockContext.js';
 import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
 import { useErrorContext } from '../../../context/ErrorContext/ErrorContext.js';
 import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
-import '../../constants/colors.js';
-import '@dynamic-labs/multi-wallet';
 import '@dynamic-labs/sdk-api';
 import '../../../shared/logger.js';
+import '../../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import 'react/jsx-runtime';
+import 'react';
+import '../../constants/colors.js';
 import 'ethers';
+import '../../../shared/consts/index.js';
+import '@dynamic-labs/multi-wallet';
 import { requiresTwoStepAuthentication } from '../../functions/requiresTwoStepAuthentication/requiresTwoStepAuthentication.js';
 import { useConnectAndSign } from '../authenticationHooks/useConnectAndSign/useConnectAndSign.js';
 import '../../../config/ApiEndpoint.js';
-import '../../../shared/consts/index.js';
+import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import { useConnectAndSignSplitSteps } from '../authenticationHooks/useConnectAndSignSplitSteps/useConnectAndSignSplitSteps.js';
 import { isSelectedWalletAlreadyConnected } from '../../functions/isSelectedWalletAlreadyConnected/isSelectedWalletAlreadyConnected.js';
 
 const useWalletItemActions = () => {
-    const { setMultiWalletWidgetState, setShowAuthFlow, setSelectedWalletConnector, wallets, setQrcodeUri, setDesktopUri, user, connectedWallets, } = useInternalDynamicContext();
+    const { setMultiWalletWidgetState, setShowAuthFlow, setSelectedWalletConnector, wallets, setQrcodeUri, setDesktopUri, user, connectedWallets, setIsVerifying, } = useInternalDynamicContext();
     const { mockedSDK } = useMockContext();
     const { setError } = useErrorContext();
     const { setView } = useViewContext();
     const { onlyConnectUser } = useConnectAndSignSplitSteps();
     const connectAndSignWallet = useConnectAndSign();
-    const setWalletConnectorAndWalletColor = useCallback((walletConnector) => {
-        setSelectedWalletConnector(walletConnector);
-    }, [setSelectedWalletConnector]);
     const handleCustodialWalletClick = (walletConnector) => __awaiter(void 0, void 0, void 0, function* () {
         const twoStepAuthentication = requiresTwoStepAuthentication(walletConnector);
         if (twoStepAuthentication) {
-            setWalletConnectorAndWalletColor(walletConnector);
+            setSelectedWalletConnector(walletConnector);
             yield onlyConnectUser({
                 walletConnector,
             });
         }
         else {
-            setWalletConnectorAndWalletColor(walletConnector);
+            setSelectedWalletConnector(walletConnector);
             setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
         }
         setView('pending-signature');
     });
     const handleMobileWalletClick = (walletConnector) => __awaiter(void 0, void 0, void 0, function* () {
-        setWalletConnectorAndWalletColor(walletConnector);
+        setSelectedWalletConnector(walletConnector);
         onlyConnectUser({ walletConnector });
     });
     const handleInstalledExtensionClick = (walletConnector) => __awaiter(void 0, void 0, void 0, function* () {
-        setWalletConnectorAndWalletColor(walletConnector);
+        setSelectedWalletConnector(walletConnector);
         setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
     });
     const handleUninstalledClick = (walletConnector) => __awaiter(void 0, void 0, void 0, function* () {
-        setWalletConnectorAndWalletColor(walletConnector);
+        setSelectedWalletConnector(walletConnector);
         if (!walletConnector.canConnectViaQrCode) {
             setView('no-qr-not-installed');
         }
@@ -83,7 +82,7 @@ const useWalletItemActions = () => {
             setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
         }
         setShowAuthFlow(false);
-        setWalletConnectorAndWalletColor(walletConnector);
+        setSelectedWalletConnector(walletConnector);
     });
     const openWallet = (walletKey, handlers) => {
         const { openMobileWallet = handleMobileWalletClick, openCustodialWallet = handleCustodialWalletClick, openExtensionWallet = handleInstalledExtensionClick, } = handlers || {};
@@ -107,6 +106,7 @@ const useWalletItemActions = () => {
         if (walletConnector.connectedChain === 'FLOW') {
             yield walletConnector.endSession();
         }
+        setIsVerifying(false);
         if (isSelectedWalletAlreadyConnected(connectedWallets, walletConnector, user) &&
             walletConnector.connectedChain !== 'FLOW') {
             // wallet is already connected

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

@@ -7,41 +7,76 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var SignMessageConfirmationModal = require('../../../modals/SignMessageConfirmationModal/SignMessageConfirmationModal.cjs');
 var TransactionConfirmationModal = require('../../../modals/TransactionConfirmationModal/TransactionConfirmationModal.cjs');
-var useConfirmationModal = require('../useConfirmationModal/useConfirmationModal.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../../shared/logger.cjs');
+require('../../../config/LSSuffix.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/utils');
 require('../../constants/colors.cjs');
+require('ethers');
+require('../../../shared/consts/index.cjs');
+require('../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
-require('@dynamic-labs/utils');
-var getAuthToken = require('../../functions/getAuthToken/getAuthToken.cjs');
-require('@dynamic-labs/wallet-connector-core');
-require('@dynamic-labs/sdk-api');
+require('../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../context/ThemeContext/ThemeContext.cjs');
+require('react-dom');
+require('react-focus-lock');
+require('../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../../context/ErrorContext/ErrorContext.cjs');
+require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+var useConfirmationModal = require('../useConfirmationModal/useConfirmationModal.cjs');
+require('../../../context/MockContext/MockContext.cjs');
+require('../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../useUserUpdateRequest/useUserUpdateRequest.cjs');
+require('../../../components/IconButton/IconButton.cjs');
+require('../../../components/Alert/Alert.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../../components/Popper/Popper/Popper.cjs');
+require('../../../components/Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
 
 const useWalletUiUtils = ({ appLogoUrl, appName, getAppOrigin, }) => {
-    const fakeSignerRef = React.useRef('disabled');
+    const confirmationStateRef = React.useRef('enabled');
     const { modal: sendTransactionModal, open: openSendTransaction } = useConfirmationModal.useConfirmationModal({
         elementId: 'dynamic-send-transaction',
     });
     const { modal, open: openSignMessage } = useConfirmationModal.useConfirmationModal({
         elementId: 'dynamic-sign-message',
     });
+    const shouldConfirmAction = React.useCallback(() => {
+        if (confirmationStateRef.current === 'disabled') {
+            confirmationStateRef.current = 'enabled';
+            return false;
+        }
+        return true;
+    }, [confirmationStateRef]);
     const signMessage = React.useCallback(({ message, handler }) => {
-        const jwt = getAuthToken.getAuthToken();
-        if (!jwt && fakeSignerRef.current === 'enabled') {
-            fakeSignerRef.current = 'disabled';
+        if (!shouldConfirmAction()) {
             return handler(message);
         }
         return openSignMessage((resolve, reject) => (jsxRuntime.jsx(SignMessageConfirmationModal.SignMessageConfirmationModal, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: getAppOrigin(), message: message, handler: handler, onSignMessage: resolve, onReject: reject })));
-    }, [appLogoUrl, appName, getAppOrigin, openSignMessage]);
+    }, [appLogoUrl, appName, getAppOrigin, openSignMessage, shouldConfirmAction]);
     const sendTransaction = React.useCallback(({ transaction, handler, provider }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        return openSendTransaction((resolve, reject) => (jsxRuntime.jsx(TransactionConfirmationModal.TransactionConfirmationModal, { title: 'Send Transaction', appLogoUrl: appLogoUrl, appName: appName, appOrigin: getAppOrigin(), transaction: transaction, handler: handler, onTransactionResponseSuccess: resolve, onReject: reject, provider: provider })));
-    }), [appLogoUrl, appName, getAppOrigin, openSendTransaction]);
-    const enableInternalSign = React.useCallback(() => {
-        fakeSignerRef.current = 'enabled';
+        if (!shouldConfirmAction()) {
+            return handler(transaction);
+        }
+        return openSendTransaction((resolve, reject) => (jsxRuntime.jsx(TransactionConfirmationModal.TransactionConfirmationModal, { title: 'Send Transaction', transaction: transaction, handler: handler, onTransactionResponseSuccess: resolve, onReject: reject, provider: provider })));
+    }), [openSendTransaction, shouldConfirmAction]);
+    const disabledConfirmationOnce = React.useCallback(() => {
+        confirmationStateRef.current = 'disabled';
     }, []);
     const walletUiUtils = React.useMemo(() => ({
-        enableInternalSign,
+        disabledConfirmationOnce,
         sendTransaction,
         signMessage,
-    }), [signMessage, enableInternalSign, sendTransaction]);
+    }), [signMessage, disabledConfirmationOnce, sendTransaction]);
     return React.useMemo(() => [modal || sendTransactionModal, walletUiUtils], [modal, sendTransactionModal, walletUiUtils]);
 };
 

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

@@ -3,41 +3,76 @@ import { jsx } from 'react/jsx-runtime';
 import { useRef, useCallback, useMemo } from 'react';
 import { SignMessageConfirmationModal } from '../../../modals/SignMessageConfirmationModal/SignMessageConfirmationModal.js';
 import { TransactionConfirmationModal } from '../../../modals/TransactionConfirmationModal/TransactionConfirmationModal.js';
-import { useConfirmationModal } from '../useConfirmationModal/useConfirmationModal.js';
+import '@dynamic-labs/sdk-api';
+import '../../../shared/logger.js';
+import '../../../config/LSSuffix.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/utils';
 import '../../constants/colors.js';
+import 'ethers';
+import '../../../shared/consts/index.js';
+import '../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';
-import '@dynamic-labs/utils';
-import { getAuthToken } from '../../functions/getAuthToken/getAuthToken.js';
-import '@dynamic-labs/wallet-connector-core';
-import '@dynamic-labs/sdk-api';
+import '../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../context/ThemeContext/ThemeContext.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../config/ApiEndpoint.js';
+import '@dynamic-labs/rpc-providers';
+import '../../../context/ErrorContext/ErrorContext.js';
+import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import { useConfirmationModal } from '../useConfirmationModal/useConfirmationModal.js';
+import '../../../context/MockContext/MockContext.js';
+import '../../../context/CaptchaContext/CaptchaContext.js';
+import '../useUserUpdateRequest/useUserUpdateRequest.js';
+import '../../../components/IconButton/IconButton.js';
+import '../../../components/Alert/Alert.js';
+import '@dynamic-labs/wallet-book';
+import '../../../components/Popper/Popper/Popper.js';
+import '../../../components/Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
 
 const useWalletUiUtils = ({ appLogoUrl, appName, getAppOrigin, }) => {
-    const fakeSignerRef = useRef('disabled');
+    const confirmationStateRef = useRef('enabled');
     const { modal: sendTransactionModal, open: openSendTransaction } = useConfirmationModal({
         elementId: 'dynamic-send-transaction',
     });
     const { modal, open: openSignMessage } = useConfirmationModal({
         elementId: 'dynamic-sign-message',
     });
+    const shouldConfirmAction = useCallback(() => {
+        if (confirmationStateRef.current === 'disabled') {
+            confirmationStateRef.current = 'enabled';
+            return false;
+        }
+        return true;
+    }, [confirmationStateRef]);
     const signMessage = useCallback(({ message, handler }) => {
-        const jwt = getAuthToken();
-        if (!jwt && fakeSignerRef.current === 'enabled') {
-            fakeSignerRef.current = 'disabled';
+        if (!shouldConfirmAction()) {
             return handler(message);
         }
         return openSignMessage((resolve, reject) => (jsx(SignMessageConfirmationModal, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: getAppOrigin(), message: message, handler: handler, onSignMessage: resolve, onReject: reject })));
-    }, [appLogoUrl, appName, getAppOrigin, openSignMessage]);
+    }, [appLogoUrl, appName, getAppOrigin, openSignMessage, shouldConfirmAction]);
     const sendTransaction = useCallback(({ transaction, handler, provider }) => __awaiter(void 0, void 0, void 0, function* () {
-        return openSendTransaction((resolve, reject) => (jsx(TransactionConfirmationModal, { title: 'Send Transaction', appLogoUrl: appLogoUrl, appName: appName, appOrigin: getAppOrigin(), transaction: transaction, handler: handler, onTransactionResponseSuccess: resolve, onReject: reject, provider: provider })));
-    }), [appLogoUrl, appName, getAppOrigin, openSendTransaction]);
-    const enableInternalSign = useCallback(() => {
-        fakeSignerRef.current = 'enabled';
+        if (!shouldConfirmAction()) {
+            return handler(transaction);
+        }
+        return openSendTransaction((resolve, reject) => (jsx(TransactionConfirmationModal, { title: 'Send Transaction', transaction: transaction, handler: handler, onTransactionResponseSuccess: resolve, onReject: reject, provider: provider })));
+    }), [openSendTransaction, shouldConfirmAction]);
+    const disabledConfirmationOnce = useCallback(() => {
+        confirmationStateRef.current = 'disabled';
     }, []);
     const walletUiUtils = useMemo(() => ({
-        enableInternalSign,
+        disabledConfirmationOnce,
         sendTransaction,
         signMessage,
-    }), [signMessage, enableInternalSign, sendTransaction]);
+    }), [signMessage, disabledConfirmationOnce, sendTransaction]);
     return useMemo(() => [modal || sendTransactionModal, walletUiUtils], [modal, sendTransactionModal, walletUiUtils]);
 };
 

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

@@ -2,37 +2,43 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../../../../../_virtual/_tslib.cjs');
 var React = require('react');
 var data = require('../../../views/WalletList/data.cjs');
 
-const useWallets = ({ projectSettings, appLogoUrl, appName, networkConfigurations, walletUiUtils, }) => {
-    const [wallets, setWallets] = React.useState([]);
-    React.useEffect(() => {
-        const getWalletList = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-            if (projectSettings) {
-                const installedWallets = yield data.getInstalledWallets(projectSettings, {
-                    appLogoUrl,
-                    appName,
-                    customerApiProviders: projectSettings.providers || [],
-                    networkConfigurations,
-                    skipMemo: true,
-                    walletUiUtils,
-                });
-                const notInstalledWallets = yield data.getNotInstalledWallets(projectSettings, {
-                    appLogoUrl,
-                    appName,
-                    customerApiProviders: projectSettings.providers || [],
-                    networkConfigurations,
-                    skipMemo: true,
-                    walletUiUtils,
-                });
-                const unfilteredWallets = [...installedWallets, ...notInstalledWallets];
-                setWallets(unfilteredWallets);
-            }
+const useWallets = ({ projectSettings, appLogoUrl, appName, flowNetwork, networkConfigurations, walletUiUtils, walletConnectorsProp, }) => {
+    const wallets = React.useMemo(() => {
+        if (!projectSettings)
+            return [];
+        const installedWallets = data.getInstalledWallets(projectSettings, {
+            appLogoUrl,
+            appName,
+            customerApiProviders: projectSettings.providers || [],
+            flowNetwork,
+            networkConfigurations,
+            skipMemo: true,
+            walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
+            walletUiUtils,
         });
-        getWalletList();
-    }, [projectSettings, appLogoUrl, appName, networkConfigurations]);
+        const notInstalledWallets = data.getNotInstalledWallets(projectSettings, {
+            appLogoUrl,
+            appName,
+            customerApiProviders: projectSettings.providers || [],
+            flowNetwork,
+            networkConfigurations,
+            skipMemo: true,
+            walletConnectorsProp: walletConnectorsProp !== null && walletConnectorsProp !== void 0 ? walletConnectorsProp : [],
+            walletUiUtils,
+        });
+        return [...installedWallets, ...notInstalledWallets];
+        // Cannot include walletUiUtils in the dependency array because it will cause an infinite loop
+    }, [
+        appLogoUrl,
+        appName,
+        networkConfigurations,
+        projectSettings,
+        walletConnectorsProp,
+        flowNetwork,
+    ]);
     return { wallets };
 };