@dynamic-labs/sdk-react-core 0.17.0-RC.15 → 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/useVerifyWallet/useVerifyWallet.cjs

@@ -40,7 +40,7 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
     // We need this boolean for the part of the logic where we already persisted a new authToken,
     // and need to distinguish between logic for verify or linking.
     const verifyOnly = !authToken;
-    const generateJWT = (walletConnector, walletProvider, fetchPublicAddressOpts, publicWalletAddress, captchaToken) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const generateJWT = (walletConnector, walletProvider, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         let Jwt;
         const nonce = consumeNonce();
         if (nonce === undefined)
@@ -56,7 +56,8 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
             walletProvider,
         });
         if (authToken === undefined || !multiWalletEnabled) {
-            Jwt = yield api.verifyWallet(environmentId, Object.assign(Object.assign({}, verifyArgs), { captchaToken }));
+            Jwt = yield api.verifyWallet(environmentId, Object.assign(Object.assign({}, verifyArgs), { captchaToken,
+                oauth }));
         }
         else {
             Jwt = yield api.linkWallet(environmentId, verifyArgs, authToken);
@@ -119,7 +120,7 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
             setErrorMessage(e.code);
         }
     };
-    return ({ walletConnector, fetchPublicAddressOpts, publicWalletAddress, captchaToken, }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    return ({ walletConnector, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth, }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const walletProvider = getWalletProvider.getWalletProvider(walletConnector);
         const network = yield walletConnector.getNetwork();
         const _isSupportedNetwork = isSupportedNetwork.isSupportedNetwork({
@@ -127,7 +128,7 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
             walletConnector,
         });
         try {
-            const Jwt = yield generateJWT(walletConnector, walletProvider, fetchPublicAddressOpts, publicWalletAddress, captchaToken);
+            const Jwt = yield generateJWT(walletConnector, walletProvider, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth);
             const decodedJwt = decodeJwt.decodeJwt(Jwt);
             if (decodedJwt === undefined)
                 throw new utils.DynamicError('Invalid token!');

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

@@ -5,5 +5,5 @@ type UseVerifyWalletArgs = VerifyProps & ProjectSettingsProps & {
     displayTermsOfService: boolean;
     setIsSingleWalletAccount: Dispatch<SetStateAction<boolean>>;
 };
-export declare const useVerifyWallet: ({ consumeNonce, displayTermsOfService, environmentId, projectSettings, setIsSingleWalletAccount, }: UseVerifyWalletArgs) => ({ walletConnector, fetchPublicAddressOpts, publicWalletAddress, captchaToken, }: VerifyCallbackArgs) => Promise<void>;
+export declare const useVerifyWallet: ({ consumeNonce, displayTermsOfService, environmentId, projectSettings, setIsSingleWalletAccount, }: UseVerifyWalletArgs) => ({ walletConnector, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth, }: VerifyCallbackArgs) => Promise<void>;
 export {};

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

@@ -36,7 +36,7 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
     // We need this boolean for the part of the logic where we already persisted a new authToken,
     // and need to distinguish between logic for verify or linking.
     const verifyOnly = !authToken;
-    const generateJWT = (walletConnector, walletProvider, fetchPublicAddressOpts, publicWalletAddress, captchaToken) => __awaiter(void 0, void 0, void 0, function* () {
+    const generateJWT = (walletConnector, walletProvider, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth) => __awaiter(void 0, void 0, void 0, function* () {
         let Jwt;
         const nonce = consumeNonce();
         if (nonce === undefined)
@@ -52,7 +52,8 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
             walletProvider,
         });
         if (authToken === undefined || !multiWalletEnabled) {
-            Jwt = yield verifyWallet(environmentId, Object.assign(Object.assign({}, verifyArgs), { captchaToken }));
+            Jwt = yield verifyWallet(environmentId, Object.assign(Object.assign({}, verifyArgs), { captchaToken,
+                oauth }));
         }
         else {
             Jwt = yield linkWallet(environmentId, verifyArgs, authToken);
@@ -115,7 +116,7 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
             setErrorMessage(e.code);
         }
     };
-    return ({ walletConnector, fetchPublicAddressOpts, publicWalletAddress, captchaToken, }) => __awaiter(void 0, void 0, void 0, function* () {
+    return ({ walletConnector, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth, }) => __awaiter(void 0, void 0, void 0, function* () {
         const walletProvider = getWalletProvider(walletConnector);
         const network = yield walletConnector.getNetwork();
         const _isSupportedNetwork = isSupportedNetwork({
@@ -123,7 +124,7 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
             walletConnector,
         });
         try {
-            const Jwt = yield generateJWT(walletConnector, walletProvider, fetchPublicAddressOpts, publicWalletAddress, captchaToken);
+            const Jwt = yield generateJWT(walletConnector, walletProvider, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth);
             const decodedJwt = decodeJwt(Jwt);
             if (decodedJwt === undefined)
                 throw new DynamicError('Invalid token!');

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/context/DynamicWidgetContext.cjs

@@ -58,12 +58,12 @@ const DynamicWidgetContextProvider = ({ children, }) => {
                 setDynamicWidgetView(initialView);
             }, 200);
         }
-    }, [showDynamicUserProfile]);
+    }, [initialView, showDynamicUserProfile]);
     // set correct initial view once isKYCEnabled and isMultiWalletEnabled values are correctly set
     // *isKYCEnabled is always false when the context initializes, so the initial view is set to index
     React.useEffect(() => {
         setDynamicWidgetView(initialView);
-    }, [isKYCEnabled, isMultiWalletEnabled]);
+    }, [initialView, isKYCEnabled, isMultiWalletEnabled]);
     const value = React.useMemo(() => ({
         availableWalletsContainerRef,
         dynamicWidgetView,

package/src/lib/widgets/DynamicWidget/context/DynamicWidgetContext.js

@@ -54,12 +54,12 @@ const DynamicWidgetContextProvider = ({ children, }) => {
                 setDynamicWidgetView(initialView);
             }, 200);
         }
-    }, [showDynamicUserProfile]);
+    }, [initialView, showDynamicUserProfile]);
     // set correct initial view once isKYCEnabled and isMultiWalletEnabled values are correctly set
     // *isKYCEnabled is always false when the context initializes, so the initial view is set to index
     useEffect(() => {
         setDynamicWidgetView(initialView);
-    }, [isKYCEnabled, isMultiWalletEnabled]);
+    }, [initialView, isKYCEnabled, isMultiWalletEnabled]);
     const value = useMemo(() => ({
         availableWalletsContainerRef,
         dynamicWidgetView,