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

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

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

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

@@ -97,9 +97,7 @@ const useWalletConnectors = ({ authToken, wallets: availableWallets, multiWallet
         const connectedAccounts = yield newWallet.connector.getConnectedAccounts();
         return { connectedAccounts, newWallet };
     }), [wallets]);
-    const checkIfAccountChangeIsRequired = React.useCallback((primaryWallet, newPrimaryWallet) => {
-        if (!primaryWallet)
-            return;
+    const checkIfAccountChangeIsRequired = React.useCallback((primaryWallet, newPrimaryWallet, connectedAccounts) => {
         /**
          * we need to check multiWalletWidgetState here because `setPrimaryWallet` currently gets
          * called twice: once when the user clicks "make active" and once when the user performs
@@ -107,8 +105,12 @@ const useWalletConnectors = ({ authToken, wallets: availableWallets, multiWallet
          * (https://github.com/dynamic-labs/DynamicAuth/pull/550) is merged, since setting the
          * primary wallet will be simpler, so we won't need to call `setPrimaryWallet` twice.
          */
-        return (multiWalletWidgetState === 'idle' &&
-            isSameWalletName.isSameWalletName(newPrimaryWallet.connector.name, primaryWallet.connector.name));
+        if (!primaryWallet || multiWalletWidgetState !== 'idle')
+            return;
+        const accountIsNotConnectedInSecondaryWallet = connectedAccounts &&
+            !connectedAccounts.find((connectedAccount) => connectedAccount.toLowerCase() ===
+                newPrimaryWallet.address.toLowerCase());
+        return (isSameWalletName.isSameWalletName(newPrimaryWallet.connector.name, primaryWallet.connector.name) || accountIsNotConnectedInSecondaryWallet);
     }, [multiWalletWidgetState]);
     const checkIfShowQrCodeModal = React.useCallback((wallet) => !wallet.connector.isInstalledOnBrowser() &&
         !wallet.connector.canConnectViaCustodialService, []);
@@ -123,7 +125,8 @@ const useWalletConnectors = ({ authToken, wallets: availableWallets, multiWallet
             return;
         const primaryWallet = getPrimaryWallet();
         if (checkIfAccountChangeIsRequired(primaryWallet, newPrimaryWallet)) {
-            setMultiWalletWidgetState('awaiting_account_switch', 'switching_primary');
+            yield newPrimaryWallet.connector.connect();
+            setPrimaryWalletId(walletId);
             return;
         }
         if (!connectedAccounts.length) {
@@ -146,6 +149,15 @@ const useWalletConnectors = ({ authToken, wallets: availableWallets, multiWallet
                 setQrcodeUri(uri);
             }),
         });
+        /**
+         * need to check for connected account again for wallets that disconnect on refresh
+         *  and only reconnect upon fetching public address above
+         */
+        const updatedConnectedAccounts = yield newPrimaryWallet.connector.getConnectedAccounts();
+        if (checkIfAccountChangeIsRequired(primaryWallet, newPrimaryWallet, updatedConnectedAccounts)) {
+            setMultiWalletWidgetState('awaiting_account_switch', 'switching_primary');
+            return;
+        }
         if (publicAddress) {
             setPrimaryWalletId(walletId);
             setMultiWalletWidgetState('idle');

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

@@ -93,9 +93,7 @@ const useWalletConnectors = ({ authToken, wallets: availableWallets, multiWallet
         const connectedAccounts = yield newWallet.connector.getConnectedAccounts();
         return { connectedAccounts, newWallet };
     }), [wallets]);
-    const checkIfAccountChangeIsRequired = useCallback((primaryWallet, newPrimaryWallet) => {
-        if (!primaryWallet)
-            return;
+    const checkIfAccountChangeIsRequired = useCallback((primaryWallet, newPrimaryWallet, connectedAccounts) => {
         /**
          * we need to check multiWalletWidgetState here because `setPrimaryWallet` currently gets
          * called twice: once when the user clicks "make active" and once when the user performs
@@ -103,8 +101,12 @@ const useWalletConnectors = ({ authToken, wallets: availableWallets, multiWallet
          * (https://github.com/dynamic-labs/DynamicAuth/pull/550) is merged, since setting the
          * primary wallet will be simpler, so we won't need to call `setPrimaryWallet` twice.
          */
-        return (multiWalletWidgetState === 'idle' &&
-            isSameWalletName(newPrimaryWallet.connector.name, primaryWallet.connector.name));
+        if (!primaryWallet || multiWalletWidgetState !== 'idle')
+            return;
+        const accountIsNotConnectedInSecondaryWallet = connectedAccounts &&
+            !connectedAccounts.find((connectedAccount) => connectedAccount.toLowerCase() ===
+                newPrimaryWallet.address.toLowerCase());
+        return (isSameWalletName(newPrimaryWallet.connector.name, primaryWallet.connector.name) || accountIsNotConnectedInSecondaryWallet);
     }, [multiWalletWidgetState]);
     const checkIfShowQrCodeModal = useCallback((wallet) => !wallet.connector.isInstalledOnBrowser() &&
         !wallet.connector.canConnectViaCustodialService, []);
@@ -119,7 +121,8 @@ const useWalletConnectors = ({ authToken, wallets: availableWallets, multiWallet
             return;
         const primaryWallet = getPrimaryWallet();
         if (checkIfAccountChangeIsRequired(primaryWallet, newPrimaryWallet)) {
-            setMultiWalletWidgetState('awaiting_account_switch', 'switching_primary');
+            yield newPrimaryWallet.connector.connect();
+            setPrimaryWalletId(walletId);
             return;
         }
         if (!connectedAccounts.length) {
@@ -142,6 +145,15 @@ const useWalletConnectors = ({ authToken, wallets: availableWallets, multiWallet
                 setQrcodeUri(uri);
             }),
         });
+        /**
+         * need to check for connected account again for wallets that disconnect on refresh
+         *  and only reconnect upon fetching public address above
+         */
+        const updatedConnectedAccounts = yield newPrimaryWallet.connector.getConnectedAccounts();
+        if (checkIfAccountChangeIsRequired(primaryWallet, newPrimaryWallet, updatedConnectedAccounts)) {
+            setMultiWalletWidgetState('awaiting_account_switch', 'switching_primary');
+            return;
+        }
         if (publicAddress) {
             setPrimaryWalletId(walletId);
             setMultiWalletWidgetState('idle');

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

@@ -92,6 +92,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             onAccountChange: (accounts) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
                 const [newAddress] = accounts;
                 yield computeConnectedStateForWallets();
+                const newWallet = secondaryWallets.find((wallet) => walletConnectorCore.isSameAddress(wallet.address, newAddress, wallet.chain));
                 if (walletConnectorCore.isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain)) {
                     setMultiWalletWidgetState('idle');
                 }
@@ -102,12 +103,10 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
                     handleAccountChangeWhenAwaitingAccountSwitch(true, newAddress);
                     yield computeConnectedStateForWallets();
                 }
-                else if (multiWalletWidgetState === 'idle' &&
-                    secondaryWallets.some((wallet) => walletConnectorCore.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) => walletConnectorCore.isSameAddress(wallet.address, newAddress, wallet.chain))) {
+                else if (multiWalletWidgetState === 'idle' && !newWallet) {
                     if (user) {
                         setMultiWalletWidgetState('detected_new_wallet');
                         setSelectedWalletConnector(primaryWallet.connector);

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

@@ -88,6 +88,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             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');
                 }
@@ -98,12 +99,10 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
                     handleAccountChangeWhenAwaitingAccountSwitch(true, newAddress);
                     yield computeConnectedStateForWallets();
                 }
-                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);

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

@@ -25,7 +25,7 @@ var useConnectAndSignSplitSteps = require('../authenticationHooks/useConnectAndS
 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();
@@ -108,6 +108,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

@@ -21,7 +21,7 @@ import { useConnectAndSignSplitSteps } from '../authenticationHooks/useConnectAn
 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();
@@ -104,6 +104,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/widgets/DynamicWidget/components/DynamicWidgetPrompts/DynamicWidgetPrompts.cjs

@@ -4,35 +4,45 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
-var DetectedKnownSecondaryWalletModal = require('../../prompts/DetectedKnownSecondaryWalletModal/DetectedKnownSecondaryWalletModal.cjs');
 var DetectedNewWalletModal = require('../../prompts/DetectedNewWalletModal/DetectedNewWalletModal.cjs');
 var PendingAccountSwitchModal = require('../../prompts/PendingAccountSwitchModal/PendingAccountSwitchModal.cjs');
+var PendingAccountSwitchToLinkModal = require('../../prompts/PendingAccountSwitchToLinkModal/PendingAccountSwitchToLinkModal.cjs');
 var PendingSignModal = require('../../prompts/PendingSignModal/PendingSignModal.cjs');
 var PrimaryNotConnectedModal = require('../../prompts/PrimaryNotConnectedModal/PrimaryNotConnectedModal.cjs');
 var QrCodeModalView = require('../../prompts/QrCodeModalView/QrCodeModalView.cjs');
 var UnlinkWalletPopUp = require('../../prompts/UnlinkWalletPopUp/UnlinkWalletPopUp.cjs');
 var WidgetPortal = require('../WidgetPortal/WidgetPortal.cjs');
 var NoQrNotInstalledModalView = require('../../prompts/NoQrNotInstalledModalView/NoQrNotInstalledModalView.cjs');
+var PendingConnectionModal = require('../../prompts/PendingConnectionModal/PendingConnectionModal.cjs');
 
 const mapAccountSwitchStateToPromptComponent = {
-    linking_new_wallet: PendingAccountSwitchModal.PendingAccountSwitchModal,
+    linking_new_wallet: PendingAccountSwitchToLinkModal.PendingAccountSwitchToLinkModal,
     primary_not_connected: PrimaryNotConnectedModal.PrimaryNotConnectedModal,
     switching_primary: PendingAccountSwitchModal.PendingAccountSwitchModal,
 };
 const DynamicWidgetPrompts = () => {
     var _a, _b, _c;
-    const { setDesktopUri, accountSwitchState, multiWalletWidgetState, showQrcodeModal, setShowQrcodeModal, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletWithAction, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setDesktopUri, accountSwitchState, multiWalletWidgetState, showQrcodeModal, setShowQrcodeModal, selectedWalletConnector, selectedWalletWithAction, } = useInternalDynamicContext.useInternalDynamicContext();
     const AccountSwitchModal = React.useMemo(() => {
         if (multiWalletWidgetState !== 'awaiting_account_switch')
             return null;
         return mapAccountSwitchStateToPromptComponent[accountSwitchState] || null;
     }, [accountSwitchState, multiWalletWidgetState]);
+    const AwaitingConnectionModal = React.useMemo(() => {
+        if (selectedWalletConnector &&
+            (walletConnectorCore.isEmailOTPWalletConnector(selectedWalletConnector) ||
+                walletConnectorCore.isEmailWalletConnector(selectedWalletConnector))) {
+            return PendingSignModal.PendingSignModal;
+        }
+        return PendingConnectionModal.PendingConnectionModal;
+    }, [selectedWalletConnector]);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [multiWalletWidgetState === 'awaiting_signature' && jsxRuntime.jsx(PendingSignModal.PendingSignModal, {}), AccountSwitchModal && jsxRuntime.jsx(AccountSwitchModal, {}), (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.action) === 'unlink' && (jsxRuntime.jsx(UnlinkWalletPopUp.UnlinkWalletPopUp, { walletId: (_a = selectedWalletWithAction.wallet) === null || _a === void 0 ? void 0 : _a.id })), multiWalletWidgetState === 'awaiting_connection' &&
-                (showQrcodeModal ? (jsxRuntime.jsx(WidgetPortal.WidgetPortal, Object.assign({ onBackdropClick: () => {
+                (showQrcodeModal ? (jsxRuntime.jsx(WidgetPortal.WidgetPortal, Object.assign({ showCloseButton: true, onBackdropClick: () => {
                         setShowQrcodeModal(false);
                         setDesktopUri('');
-                    } }, { children: (selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.canConnectViaQrCode) ? (jsxRuntime.jsx(QrCodeModalView.QrCodeModalView, { walletId: (_c = (_b = selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : '' })) : (jsxRuntime.jsx(NoQrNotInstalledModalView.NoQrNotInstalledModalView, {})) }))) : (jsxRuntime.jsx(PendingSignModal.PendingSignModal, {}))), multiWalletWidgetState === 'detected_known_secondary_wallet' && (jsxRuntime.jsx(DetectedKnownSecondaryWalletModal.DetectedKnownSecondaryWalletModal, { setSelectedWalletWithAction: setSelectedWalletWithAction })), multiWalletWidgetState === 'detected_new_wallet' && (jsxRuntime.jsx(DetectedNewWalletModal.DetectedNewWalletModal, {}))] }));
+                    } }, { children: (selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.canConnectViaQrCode) ? (jsxRuntime.jsx(QrCodeModalView.QrCodeModalView, { walletId: (_c = (_b = selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : '' })) : (jsxRuntime.jsx(NoQrNotInstalledModalView.NoQrNotInstalledModalView, {})) }))) : (jsxRuntime.jsx(AwaitingConnectionModal, {}))), multiWalletWidgetState === 'detected_new_wallet' && (jsxRuntime.jsx(DetectedNewWalletModal.DetectedNewWalletModal, {}))] }));
 };
 
 exports.DynamicWidgetPrompts = DynamicWidgetPrompts;

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetPrompts/DynamicWidgetPrompts.js

@@ -1,34 +1,44 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
+import { isEmailOTPWalletConnector, isEmailWalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
-import { DetectedKnownSecondaryWalletModal } from '../../prompts/DetectedKnownSecondaryWalletModal/DetectedKnownSecondaryWalletModal.js';
 import { DetectedNewWalletModal } from '../../prompts/DetectedNewWalletModal/DetectedNewWalletModal.js';
 import { PendingAccountSwitchModal } from '../../prompts/PendingAccountSwitchModal/PendingAccountSwitchModal.js';
+import { PendingAccountSwitchToLinkModal } from '../../prompts/PendingAccountSwitchToLinkModal/PendingAccountSwitchToLinkModal.js';
 import { PendingSignModal } from '../../prompts/PendingSignModal/PendingSignModal.js';
 import { PrimaryNotConnectedModal } from '../../prompts/PrimaryNotConnectedModal/PrimaryNotConnectedModal.js';
 import { QrCodeModalView } from '../../prompts/QrCodeModalView/QrCodeModalView.js';
 import { UnlinkWalletPopUp } from '../../prompts/UnlinkWalletPopUp/UnlinkWalletPopUp.js';
 import { WidgetPortal } from '../WidgetPortal/WidgetPortal.js';
 import { NoQrNotInstalledModalView } from '../../prompts/NoQrNotInstalledModalView/NoQrNotInstalledModalView.js';
+import { PendingConnectionModal } from '../../prompts/PendingConnectionModal/PendingConnectionModal.js';
 
 const mapAccountSwitchStateToPromptComponent = {
-    linking_new_wallet: PendingAccountSwitchModal,
+    linking_new_wallet: PendingAccountSwitchToLinkModal,
     primary_not_connected: PrimaryNotConnectedModal,
     switching_primary: PendingAccountSwitchModal,
 };
 const DynamicWidgetPrompts = () => {
     var _a, _b, _c;
-    const { setDesktopUri, accountSwitchState, multiWalletWidgetState, showQrcodeModal, setShowQrcodeModal, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletWithAction, } = useInternalDynamicContext();
+    const { setDesktopUri, accountSwitchState, multiWalletWidgetState, showQrcodeModal, setShowQrcodeModal, selectedWalletConnector, selectedWalletWithAction, } = useInternalDynamicContext();
     const AccountSwitchModal = useMemo(() => {
         if (multiWalletWidgetState !== 'awaiting_account_switch')
             return null;
         return mapAccountSwitchStateToPromptComponent[accountSwitchState] || null;
     }, [accountSwitchState, multiWalletWidgetState]);
+    const AwaitingConnectionModal = useMemo(() => {
+        if (selectedWalletConnector &&
+            (isEmailOTPWalletConnector(selectedWalletConnector) ||
+                isEmailWalletConnector(selectedWalletConnector))) {
+            return PendingSignModal;
+        }
+        return PendingConnectionModal;
+    }, [selectedWalletConnector]);
     return (jsxs(Fragment, { children: [multiWalletWidgetState === 'awaiting_signature' && jsx(PendingSignModal, {}), AccountSwitchModal && jsx(AccountSwitchModal, {}), (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.action) === 'unlink' && (jsx(UnlinkWalletPopUp, { walletId: (_a = selectedWalletWithAction.wallet) === null || _a === void 0 ? void 0 : _a.id })), multiWalletWidgetState === 'awaiting_connection' &&
-                (showQrcodeModal ? (jsx(WidgetPortal, Object.assign({ onBackdropClick: () => {
+                (showQrcodeModal ? (jsx(WidgetPortal, Object.assign({ showCloseButton: true, onBackdropClick: () => {
                         setShowQrcodeModal(false);
                         setDesktopUri('');
-                    } }, { children: (selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.canConnectViaQrCode) ? (jsx(QrCodeModalView, { walletId: (_c = (_b = selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : '' })) : (jsx(NoQrNotInstalledModalView, {})) }))) : (jsx(PendingSignModal, {}))), multiWalletWidgetState === 'detected_known_secondary_wallet' && (jsx(DetectedKnownSecondaryWalletModal, { setSelectedWalletWithAction: setSelectedWalletWithAction })), multiWalletWidgetState === 'detected_new_wallet' && (jsx(DetectedNewWalletModal, {}))] }));
+                    } }, { children: (selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.canConnectViaQrCode) ? (jsx(QrCodeModalView, { walletId: (_c = (_b = selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : '' })) : (jsx(NoQrNotInstalledModalView, {})) }))) : (jsx(AwaitingConnectionModal, {}))), multiWalletWidgetState === 'detected_new_wallet' && (jsx(DetectedNewWalletModal, {}))] }));
 };
 
 export { DynamicWidgetPrompts };

package/src/lib/widgets/DynamicWidget/components/Wallet/Wallet.cjs

@@ -44,7 +44,7 @@ var WalletIconWithStatus = require('../WalletIconWithStatus/WalletIconWithStatus
 
 const Wallet = ({ wallet, ens }) => {
     const { id: walletId, connector, address, connected } = wallet;
-    const { computeConnectedStateForWallets, setPrimaryWallet, setSelectedWalletConnector, setSelectedWalletWithAction, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { computeConnectedStateForWallets, setPrimaryWallet, setSelectedWalletConnector, setShowWidgetStatePopup, setSelectedWalletWithAction, } = useInternalDynamicContext.useInternalDynamicContext();
     const iconSize = 20;
     const options = [
         {
@@ -74,6 +74,7 @@ const Wallet = ({ wallet, ens }) => {
         if (connector.connectedChain === 'FLOW') {
             (_a = connector.endSession) === null || _a === void 0 ? void 0 : _a.call(connector);
         }
+        setShowWidgetStatePopup(true);
         setSelectedWalletWithAction({ action: 'select', wallet });
         setPrimaryWallet(walletId);
         computeConnectedStateForWallets();

package/src/lib/widgets/DynamicWidget/components/Wallet/Wallet.js

@@ -40,7 +40,7 @@ import { WalletIconWithStatus } from '../WalletIconWithStatus/WalletIconWithStat
 
 const Wallet = ({ wallet, ens }) => {
     const { id: walletId, connector, address, connected } = wallet;
-    const { computeConnectedStateForWallets, setPrimaryWallet, setSelectedWalletConnector, setSelectedWalletWithAction, } = useInternalDynamicContext();
+    const { computeConnectedStateForWallets, setPrimaryWallet, setSelectedWalletConnector, setShowWidgetStatePopup, setSelectedWalletWithAction, } = useInternalDynamicContext();
     const iconSize = 20;
     const options = [
         {
@@ -70,6 +70,7 @@ const Wallet = ({ wallet, ens }) => {
         if (connector.connectedChain === 'FLOW') {
             (_a = connector.endSession) === null || _a === void 0 ? void 0 : _a.call(connector);
         }
+        setShowWidgetStatePopup(true);
         setSelectedWalletWithAction({ action: 'select', wallet });
         setPrimaryWallet(walletId);
         computeConnectedStateForWallets();

package/src/lib/widgets/DynamicWidget/components/WidgetPortal/WidgetPortal.cjs

@@ -3,23 +3,55 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('react');
 var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../../../context/ViewContext/ViewContext.cjs');
+var close = require('../../../../shared/assets/close.cjs');
+require('@dynamic-labs/utils');
+require('../../../../utils/constants/colors.cjs');
+require('ethers');
+require('../../../../shared/consts/index.cjs');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('@dynamic-labs/multi-wallet');
+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/MockContext/MockContext.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var IconButton = require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/Alert/Alert.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 
-const WidgetPortal = ({ children, onBackdropClick, disablePadding, }) => {
-    const { setMultiWalletWidgetState, accountSwitchState } = useInternalDynamicContext.useInternalDynamicContext();
+const WidgetPortal = ({ children, onBackdropClick, disablePadding, showCloseButton, }) => {
+    const { accountSwitchState, setMultiWalletWidgetState, setSelectedWalletWithAction, selectedWalletWithAction, } = useInternalDynamicContext.useInternalDynamicContext();
     const handleBackdropClick = (e) => {
         e.stopPropagation();
-        if (accountSwitchState === 'primary_not_connected')
+        if (!selectedWalletWithAction &&
+            accountSwitchState === 'primary_not_connected') {
             return;
+        }
+        setSelectedWalletWithAction(null);
         setMultiWalletWidgetState('idle');
         if (!onBackdropClick)
             return;
         onBackdropClick();
     };
-    return (jsxRuntime.jsx("div", Object.assign({ className: 'widget-portal', onClick: (e) => handleBackdropClick(e), "data-testid": 'backdrop' }, { children: jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('widget-portal__container', {
+    return (jsxRuntime.jsx("div", Object.assign({ className: 'widget-portal', onClick: (e) => handleBackdropClick(e), "data-testid": 'backdrop' }, { children: jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('widget-portal__container', {
                 'widget-portal__container--no-padding': disablePadding,
-            }), onClick: (e) => e.stopPropagation() }, { children: children })) })));
+            }), onClick: (e) => e.stopPropagation() }, { children: [showCloseButton && (jsxRuntime.jsx("div", Object.assign({ className: 'widget-portal__container__header' }, { children: jsxRuntime.jsx(IconButton.IconButton, Object.assign({ className: 'widget-portal__container__close-button', onClick: (e) => handleBackdropClick(e), type: 'button', "data-testid": 'close-button' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })) }))), children] })) })));
 };
 
 exports.WidgetPortal = WidgetPortal;

package/src/lib/widgets/DynamicWidget/components/WidgetPortal/WidgetPortal.d.ts

@@ -3,6 +3,7 @@ type Props = {
     children: ReactNode;
     disablePadding?: boolean;
     onBackdropClick?: VoidFunction;
+    showCloseButton?: boolean;
 };
-export declare const WidgetPortal: ({ children, onBackdropClick, disablePadding, }: Props) => JSX.Element;
+export declare const WidgetPortal: ({ children, onBackdropClick, disablePadding, showCloseButton, }: Props) => JSX.Element;
 export {};

package/src/lib/widgets/DynamicWidget/components/WidgetPortal/WidgetPortal.js

@@ -1,21 +1,53 @@
-import { jsx } from 'react/jsx-runtime';
-import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
 import { classNames } from '../../../../utils/functions/classNames/classNames.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgClose } from '../../../../shared/assets/close.js';
+import '@dynamic-labs/utils';
+import '../../../../utils/constants/colors.js';
+import 'ethers';
+import '../../../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
+import '@dynamic-labs/multi-wallet';
+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/MockContext/MockContext.js';
+import '../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { IconButton } from '../../../../components/IconButton/IconButton.js';
+import '../../../../components/Alert/Alert.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
 
-const WidgetPortal = ({ children, onBackdropClick, disablePadding, }) => {
-    const { setMultiWalletWidgetState, accountSwitchState } = useInternalDynamicContext();
+const WidgetPortal = ({ children, onBackdropClick, disablePadding, showCloseButton, }) => {
+    const { accountSwitchState, setMultiWalletWidgetState, setSelectedWalletWithAction, selectedWalletWithAction, } = useInternalDynamicContext();
     const handleBackdropClick = (e) => {
         e.stopPropagation();
-        if (accountSwitchState === 'primary_not_connected')
+        if (!selectedWalletWithAction &&
+            accountSwitchState === 'primary_not_connected') {
             return;
+        }
+        setSelectedWalletWithAction(null);
         setMultiWalletWidgetState('idle');
         if (!onBackdropClick)
             return;
         onBackdropClick();
     };
-    return (jsx("div", Object.assign({ className: 'widget-portal', onClick: (e) => handleBackdropClick(e), "data-testid": 'backdrop' }, { children: jsx("div", Object.assign({ className: classNames('widget-portal__container', {
+    return (jsx("div", Object.assign({ className: 'widget-portal', onClick: (e) => handleBackdropClick(e), "data-testid": 'backdrop' }, { children: jsxs("div", Object.assign({ className: classNames('widget-portal__container', {
                 'widget-portal__container--no-padding': disablePadding,
-            }), onClick: (e) => e.stopPropagation() }, { children: children })) })));
+            }), onClick: (e) => e.stopPropagation() }, { children: [showCloseButton && (jsx("div", Object.assign({ className: 'widget-portal__container__header' }, { children: jsx(IconButton, Object.assign({ className: 'widget-portal__container__close-button', onClick: (e) => handleBackdropClick(e), type: 'button', "data-testid": 'close-button' }, { children: jsx(SvgClose, {}) })) }))), children] })) })));
 };
 
 export { WidgetPortal };

package/src/lib/widgets/DynamicWidget/{components/DefaultPendingSignModalContent/DefaultPendingSignModalContent.cjs → prompts/DefaultPromptModal/DefaultPromptModal.cjs}

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var utils = require('@dynamic-labs/utils');
-var walletBook = require('@dynamic-labs/wallet-book');
+var IconWithSpinner = require('../../../../components/IconWithSpinner/IconWithSpinner.cjs');
+var WidgetPortal = require('../../components/WidgetPortal/WidgetPortal.cjs');
 require('react');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
@@ -12,14 +12,15 @@ require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/utils');
 require('../../../../utils/constants/colors.cjs');
 require('ethers');
 require('../../../../shared/consts/index.cjs');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
-var pixelToRem = require('../../../../utils/functions/pixelToRem/pixelToRem.cjs');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
 require('react-dom');
 require('react-focus-lock');
 require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
@@ -31,19 +32,11 @@ require('../../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
-var Button = require('../../../../components/Button/Button.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
-var IconWithSpinner = require('../../../../components/IconWithSpinner/IconWithSpinner.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
-var helpers = require('../../helpers/helpers.cjs');
 
-const DefaultPendingSignModalContent = ({ walletConnector, onClickToSign }) => {
-    const { name = '' } = walletConnector || {};
-    const iconSize = 80;
-    const icon = (jsxRuntime.jsx(walletBook.WalletIcon, { walletName: name, style: { height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) } }));
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'default-pending-sign-modal-content__container' }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { iconSize: 80, Icon: icon, isSpinning: true }), name && (jsxRuntime.jsxs(Typography.Typography, Object.assign({ color: 'primary', className: 'default-pending-sign-modal-content__title', variant: 'body_normal', weight: 'medium' }, { children: ["Sign in with ", helpers.capitalize(name)] }))), jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary', variant: 'body_small', weight: 'medium' }, { children: "Sign the message in your wallet to approve linking this wallet to your account" })), utils.isMobile() && !(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.canConnectViaCustodialService) && (jsxRuntime.jsx(Button.Button, Object.assign({ onClick: onClickToSign }, { children: "Click to Sign" })))] })));
-};
+const DefaultPromptModal = ({ children, className = '', dataTestId = '', icon, showCloseButton = false, title, }) => (jsxRuntime.jsx(WidgetPortal.WidgetPortal, Object.assign({ showCloseButton: showCloseButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('default-prompt-modal', className), "data-testid": dataTestId }, { children: [icon && jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: icon, iconSize: 96, isSpinning: true }), jsxRuntime.jsxs("div", Object.assign({ className: 'default-prompt-modal__content' }, { children: [title && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', "data-testid": 'title' }, { children: title }))), children] }))] })) })));
 
-exports.DefaultPendingSignModalContent = DefaultPendingSignModalContent;
+exports.DefaultPromptModal = DefaultPromptModal;

package/src/lib/widgets/DynamicWidget/prompts/DefaultPromptModal/DefaultPromptModal.d.ts

@@ -0,0 +1,13 @@
+import { FC, ReactElement, ReactNode } from 'react';
+import { Iconic } from '@dynamic-labs/iconic';
+import { Icon } from '../../../../shared';
+type Props = {
+    children: ReactNode;
+    className?: string;
+    dataTestId?: string;
+    icon?: Icon | Iconic | ReactElement;
+    showCloseButton?: boolean;
+    title?: string;
+};
+export declare const DefaultPromptModal: FC<Props>;
+export {};

package/src/lib/widgets/DynamicWidget/{components/DefaultPendingSignModalContent/DefaultPendingSignModalContent.js → prompts/DefaultPromptModal/DefaultPromptModal.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { isMobile } from '@dynamic-labs/utils';
-import { WalletIcon } from '@dynamic-labs/wallet-book';
+import { IconWithSpinner } from '../../../../components/IconWithSpinner/IconWithSpinner.js';
+import { WidgetPortal } from '../../components/WidgetPortal/WidgetPortal.js';
 import 'react';
 import { Typography } from '../../../../components/Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
@@ -8,14 +8,15 @@ import '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/utils';
 import '../../../../utils/constants/colors.js';
 import 'ethers';
 import '../../../../shared/consts/index.js';
 import '../../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';
-import { pixelToRem } from '../../../../utils/functions/pixelToRem/pixelToRem.js';
 import '../../../../components/ShadowDOM/ShadowDOM.js';
 import '../../../../context/ThemeContext/ThemeContext.js';
+import { classNames } from '../../../../utils/functions/classNames/classNames.js';
 import 'react-dom';
 import 'react-focus-lock';
 import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
@@ -27,19 +28,11 @@ import '../../../../context/ErrorContext/ErrorContext.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
-import { Button } from '../../../../components/Button/Button.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
-import { IconWithSpinner } from '../../../../components/IconWithSpinner/IconWithSpinner.js';
 import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
-import { capitalize } from '../../helpers/helpers.js';
 
-const DefaultPendingSignModalContent = ({ walletConnector, onClickToSign }) => {
-    const { name = '' } = walletConnector || {};
-    const iconSize = 80;
-    const icon = (jsx(WalletIcon, { walletName: name, style: { height: pixelToRem(iconSize), width: pixelToRem(iconSize) } }));
-    return (jsxs("div", Object.assign({ className: 'default-pending-sign-modal-content__container' }, { children: [jsx(IconWithSpinner, { iconSize: 80, Icon: icon, isSpinning: true }), name && (jsxs(Typography, Object.assign({ color: 'primary', className: 'default-pending-sign-modal-content__title', variant: 'body_normal', weight: 'medium' }, { children: ["Sign in with ", capitalize(name)] }))), jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_small', weight: 'medium' }, { children: "Sign the message in your wallet to approve linking this wallet to your account" })), isMobile() && !(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.canConnectViaCustodialService) && (jsx(Button, Object.assign({ onClick: onClickToSign }, { children: "Click to Sign" })))] })));
-};
+const DefaultPromptModal = ({ children, className = '', dataTestId = '', icon, showCloseButton = false, title, }) => (jsx(WidgetPortal, Object.assign({ showCloseButton: showCloseButton }, { children: jsxs("div", Object.assign({ className: classNames('default-prompt-modal', className), "data-testid": dataTestId }, { children: [icon && jsx(IconWithSpinner, { Icon: icon, iconSize: 96, isSpinning: true }), jsxs("div", Object.assign({ className: 'default-prompt-modal__content' }, { children: [title && (jsx(Typography, Object.assign({ variant: 'title', color: 'primary', "data-testid": 'title' }, { children: title }))), children] }))] })) })));
 
-export { DefaultPendingSignModalContent };
+export { DefaultPromptModal };