@dynamic-labs/sdk-react-core 4.25.4 → 4.25.6

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

@@ -85,7 +85,6 @@ import '../../../views/ExchangeWhitelistWarning/ExchangeWhitelistWarning.js';
 import '../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import '../../../context/FooterAnimationContext/index.js';
 import '../../../views/MfaChooseDeviceView/getMfaOptions/getMfaOptions.js';
-import { useMfa } from '../useMfa/useMfa.js';
 import '../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../store/state/sendBalances.js';
 import '../../../store/state/connectorsInitializing/connectorsInitializing.js';
@@ -98,6 +97,7 @@ import '../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFun
 import '../../../../index.js';
 import '../../../store/state/tokenBalances.js';
 import '../../../store/state/multichainBalances.js';
+import { usePromptMfaAuth } from '../usePromptMfaAuth/usePromptMfaAuth.js';
 import '../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
 
@@ -106,8 +106,8 @@ import { useInternalDynamicContext } from '../../../context/DynamicContext/useDy
  */
 const useSyncMfaFlow = ({ handler: headlessHandler, } = {}) => {
     const { setShowAuthFlow, userWithMissingInfo, sdkHasLoaded } = useInternalDynamicContext();
-    const { pushView, clearStackAndPush } = useViewContext();
-    const { getUserDevices } = useMfa();
+    const promptMfaAuth = usePromptMfaAuth();
+    const { clearStackAndPush } = useViewContext();
     // this is used to make sure we only trigger the effect once
     const triggered = useRef(false);
     useInternalDynamicEvents('logout', () => {
@@ -146,23 +146,15 @@ const useSyncMfaFlow = ({ handler: headlessHandler, } = {}) => {
          */
         setShowAuthFlow(true);
         if ((_a = userWithMissingInfo.scope) === null || _a === void 0 ? void 0 : _a.includes('requiresAdditionalAuth')) {
-            getUserDevices().then((devices) => {
-                if (devices.length === 0) {
-                    pushView('mfa-choose-device');
-                }
-                else {
-                    pushView('mfa-verification');
-                }
-            });
+            promptMfaAuth();
         }
         else {
             clearStackAndPush('mfa-display-backup-codes');
         }
     }, [
-        getUserDevices,
+        promptMfaAuth,
         sdkHasLoaded,
         setShowAuthFlow,
-        pushView,
         userWithMissingInfo,
         headlessHandler,
         clearStackAndPush,

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

@@ -141,12 +141,12 @@ const useVerifyWallet = ({ displaySiweStatement, environmentId, projectSettings,
             walletConnector,
             walletProvider,
         });
-        if (shouldRegisterSessionKeysOnSignin()) {
+        if (shouldRegisterSessionKeysOnSignin() && verifyOnly) {
             const keypair = yield generateSessionKey();
             verifyArgs.sessionPublicKey = keypair.publicKey;
         }
         let verifyResponse;
-        if (!user || !multiWalletEnabled) {
+        if (!user) {
             verifyResponse = wallets.verifyWallet(environmentId, Object.assign(Object.assign({}, verifyArgs), { captchaToken,
                 oauth }));
         }

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

@@ -137,12 +137,12 @@ const useVerifyWallet = ({ displaySiweStatement, environmentId, projectSettings,
             walletConnector,
             walletProvider,
         });
-        if (shouldRegisterSessionKeysOnSignin()) {
+        if (shouldRegisterSessionKeysOnSignin() && verifyOnly) {
             const keypair = yield generateSessionKey();
             verifyArgs.sessionPublicKey = keypair.publicKey;
         }
         let verifyResponse;
-        if (!user || !multiWalletEnabled) {
+        if (!user) {
             verifyResponse = verifyWallet(environmentId, Object.assign(Object.assign({}, verifyArgs), { captchaToken,
                 oauth }));
         }

package/src/lib/views/EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView.cjs

@@ -199,13 +199,18 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
                     wallet: wallet,
                 });
             }
-            catch (_j) {
+            catch (err) {
                 if (walletConnectorCore.isSessionKeyCompatibleWalletConnector(wallet === null || wallet === void 0 ? void 0 : wallet.connector) &&
                     ((_f = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _f === void 0 ? void 0 : _f.removeSessionKeys)) {
                     yield ((_g = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _g === void 0 ? void 0 : _g.removeSessionKeys());
                     yield ((_h = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _h === void 0 ? void 0 : _h.createOrRestoreSession({
                         ignoreRestore: true,
                     }));
+                    logger.logger.error('[TK - removeSessionKeys] failed to perform revealEmbeddedWalletKey activity', {
+                        address: wallet === null || wallet === void 0 ? void 0 : wallet.address,
+                        err,
+                        userId: user === null || user === void 0 ? void 0 : user.userId,
+                    });
                 }
                 return turnkeyExport.exportCredential({
                     address: exportPrivateKey ? wallet === null || wallet === void 0 ? void 0 : wallet.address : undefined,

package/src/lib/views/EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView.js

@@ -195,13 +195,18 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
                     wallet: wallet,
                 });
             }
-            catch (_j) {
+            catch (err) {
                 if (isSessionKeyCompatibleWalletConnector(wallet === null || wallet === void 0 ? void 0 : wallet.connector) &&
                     ((_f = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _f === void 0 ? void 0 : _f.removeSessionKeys)) {
                     yield ((_g = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _g === void 0 ? void 0 : _g.removeSessionKeys());
                     yield ((_h = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _h === void 0 ? void 0 : _h.createOrRestoreSession({
                         ignoreRestore: true,
                     }));
+                    logger.error('[TK - removeSessionKeys] failed to perform revealEmbeddedWalletKey activity', {
+                        address: wallet === null || wallet === void 0 ? void 0 : wallet.address,
+                        err,
+                        userId: user === null || user === void 0 ? void 0 : user.userId,
+                    });
                 }
                 return exportCredential({
                     address: exportPrivateKey ? wallet === null || wallet === void 0 ? void 0 : wallet.address : undefined,

package/src/lib/views/MfaChooseDeviceView/MfaChooseDeviceView.cjs

@@ -108,7 +108,7 @@ require('../../components/IsBrowser/IsBrowser.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 
-const MfaChooseDeviceView = ({ isInitialSetup = true, }) => {
+const MfaChooseDeviceView = ({ isInitialSetup = true, createMfaToken = false, }) => {
     const { handleLogOut } = useDynamicContext.useDynamicContext();
     const { t } = reactI18next.useTranslation();
     const { pushView } = ViewContext.useViewContext();
@@ -118,7 +118,9 @@ const MfaChooseDeviceView = ({ isInitialSetup = true, }) => {
             pushView('passkey-setup');
             return;
         }
-        pushView('passkey-confirm');
+        pushView('passkey-confirm', {
+            createMfaToken,
+        });
     };
     const handleTotpClick = () => {
         if (isInitialSetup) {
@@ -129,6 +131,7 @@ const MfaChooseDeviceView = ({ isInitialSetup = true, }) => {
             return;
         }
         pushView('mfa-verification', {
+            createMfaToken,
             isInitialSetup,
             showBackButton: true,
             type: sdkApiCore.MFADeviceType.Totp,

package/src/lib/views/MfaChooseDeviceView/MfaChooseDeviceView.d.ts

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 export type MfaChooseDeviceViewProps = {
     isInitialSetup?: boolean;
+    createMfaToken?: boolean;
 };
 export declare const MfaChooseDeviceView: FC<MfaChooseDeviceViewProps>;

package/src/lib/views/MfaChooseDeviceView/MfaChooseDeviceView.js

@@ -104,7 +104,7 @@ import '../../components/IsBrowser/IsBrowser.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 
-const MfaChooseDeviceView = ({ isInitialSetup = true, }) => {
+const MfaChooseDeviceView = ({ isInitialSetup = true, createMfaToken = false, }) => {
     const { handleLogOut } = useDynamicContext();
     const { t } = useTranslation();
     const { pushView } = useViewContext();
@@ -114,7 +114,9 @@ const MfaChooseDeviceView = ({ isInitialSetup = true, }) => {
             pushView('passkey-setup');
             return;
         }
-        pushView('passkey-confirm');
+        pushView('passkey-confirm', {
+            createMfaToken,
+        });
     };
     const handleTotpClick = () => {
         if (isInitialSetup) {
@@ -125,6 +127,7 @@ const MfaChooseDeviceView = ({ isInitialSetup = true, }) => {
             return;
         }
         pushView('mfa-verification', {
+            createMfaToken,
             isInitialSetup,
             showBackButton: true,
             type: MFADeviceType.Totp,

package/src/lib/views/MfaVerificationView/MfaVerificationView.cjs

@@ -107,14 +107,26 @@ require('../../components/IsBrowser/IsBrowser.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 
-const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = false, deviceId, }) => {
+const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = false, createMfaToken = false, deviceId, }) => {
     const { t } = reactI18next.useTranslation();
     const { clearStackAndPush, pushView, goBack, canGoBack } = ViewContext.useViewContext();
     const { authenticateDevice } = useMfa.useMfa();
     const [code, setCode] = React.useState('');
     const [error, setError] = React.useState();
     const [isRateLimited, setIsRateLimited] = React.useState(false);
-    const { data: mfaToken, isLoading } = usePromise.usePromise(() => authenticateDevice({ code, deviceId, type }), {
+    const { data: mfaToken, isLoading } = usePromise.usePromise(() => {
+        const createMfaTokenOptions = createMfaToken
+            ? {
+                singleUse: true,
+            }
+            : undefined;
+        return authenticateDevice({
+            code,
+            createMfaToken: createMfaTokenOptions,
+            deviceId,
+            type,
+        });
+    }, {
         deps: [code],
         enabled: (code === null || code === void 0 ? void 0 : code.length) === 6,
         initialData: undefined,
@@ -143,7 +155,10 @@ const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = fa
         setCode(code);
     };
     const onClickBack = canGoBack && showBackButton ? goBack : undefined;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { MainIcon: passwordHero.ReactComponent, error: error, isLoading: isLoading, onPinComplete: onSubmit, isValid: Boolean(mfaToken), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body'), onClickBack: onClickBack, disabled: isRateLimited }), !isInitialSetup && (jsxRuntime.jsx("div", { className: 'mfa-verification-view__choose-another-method', children: jsxRuntime.jsx(TextButton.TextButton, { className: 'mfa-verification-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', { isInitialSetup }), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { MainIcon: passwordHero.ReactComponent, error: error, isLoading: isLoading, onPinComplete: onSubmit, isValid: Boolean(mfaToken), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body'), onClickBack: onClickBack, disabled: isRateLimited }), !isInitialSetup && (jsxRuntime.jsx("div", { className: 'mfa-verification-view__choose-another-method', children: jsxRuntime.jsx(TextButton.TextButton, { className: 'mfa-verification-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', {
+                        createMfaToken,
+                        isInitialSetup,
+                    }), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) }))] }));
 };
 
 exports.MfaVerificationView = MfaVerificationView;

package/src/lib/views/MfaVerificationView/MfaVerificationView.d.ts

@@ -5,5 +5,6 @@ export type MfaVerificationViewProps = {
     type?: MFADeviceType;
     isInitialSetup?: boolean;
     showBackButton?: boolean;
+    createMfaToken?: boolean;
 };
-export declare const MfaVerificationView: ({ type, isInitialSetup, showBackButton, deviceId, }: MfaVerificationViewProps) => JSX.Element;
+export declare const MfaVerificationView: ({ type, isInitialSetup, showBackButton, createMfaToken, deviceId, }: MfaVerificationViewProps) => JSX.Element;

package/src/lib/views/MfaVerificationView/MfaVerificationView.js

@@ -103,14 +103,26 @@ import '../../components/IsBrowser/IsBrowser.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 
-const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = false, deviceId, }) => {
+const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = false, createMfaToken = false, deviceId, }) => {
     const { t } = useTranslation();
     const { clearStackAndPush, pushView, goBack, canGoBack } = useViewContext();
     const { authenticateDevice } = useMfa();
     const [code, setCode] = useState('');
     const [error, setError] = useState();
     const [isRateLimited, setIsRateLimited] = useState(false);
-    const { data: mfaToken, isLoading } = usePromise(() => authenticateDevice({ code, deviceId, type }), {
+    const { data: mfaToken, isLoading } = usePromise(() => {
+        const createMfaTokenOptions = createMfaToken
+            ? {
+                singleUse: true,
+            }
+            : undefined;
+        return authenticateDevice({
+            code,
+            createMfaToken: createMfaTokenOptions,
+            deviceId,
+            type,
+        });
+    }, {
         deps: [code],
         enabled: (code === null || code === void 0 ? void 0 : code.length) === 6,
         initialData: undefined,
@@ -139,7 +151,10 @@ const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = fa
         setCode(code);
     };
     const onClickBack = canGoBack && showBackButton ? goBack : undefined;
-    return (jsxs(Fragment, { children: [jsx(OTPVerificationView, { MainIcon: SvgPasswordHero, error: error, isLoading: isLoading, onPinComplete: onSubmit, isValid: Boolean(mfaToken), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body'), onClickBack: onClickBack, disabled: isRateLimited }), !isInitialSetup && (jsx("div", { className: 'mfa-verification-view__choose-another-method', children: jsx(TextButton, { className: 'mfa-verification-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', { isInitialSetup }), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) }))] }));
+    return (jsxs(Fragment, { children: [jsx(OTPVerificationView, { MainIcon: SvgPasswordHero, error: error, isLoading: isLoading, onPinComplete: onSubmit, isValid: Boolean(mfaToken), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body'), onClickBack: onClickBack, disabled: isRateLimited }), !isInitialSetup && (jsx("div", { className: 'mfa-verification-view__choose-another-method', children: jsx(TextButton, { className: 'mfa-verification-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', {
+                        createMfaToken,
+                        isInitialSetup,
+                    }), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) }))] }));
 };
 
 export { MfaVerificationView };

package/src/lib/views/Passkey/ConfirmPasskeyView/ConfirmPasskeyView.cjs

@@ -111,13 +111,25 @@ require('../../../components/IsBrowser/IsBrowser.cjs');
 require('../../../components/Popper/Popper/Popper.cjs');
 require('../../../components/Popper/PopperContext/PopperContext.cjs');
 
-const ConfirmPasskeyView = () => {
+const ConfirmPasskeyView = ({ createMfaToken = false, }) => {
     const { t } = reactI18next.useTranslation();
     const { pushView } = ViewContext.useViewContext();
     const authenticatePasskeyMFA = useAuthenticatePasskeyMFA.useAuthenticatePasskeyMFA();
-    const { error, isLoading } = usePromise.usePromise(authenticatePasskeyMFA);
+    const { error, isLoading } = usePromise.usePromise(() => {
+        const createMfaTokenOptions = createMfaToken
+            ? {
+                singleUse: true,
+            }
+            : undefined;
+        return authenticatePasskeyMFA({
+            createMfaToken: createMfaTokenOptions,
+        });
+    });
     const errorMessage = useGetPasskeyErrorMessage.useGetPasskeyErrorMessage(error);
-    return (jsxRuntime.jsxs("div", { className: classNames.classNames('confirm-passkey-view'), children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { alignContent: 'bottom', children: jsxRuntime.jsx("div", { className: 'confirm-passkey-view__header', children: jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'confirm-passkey-view__title', copykey: 'dyn_mfa.confirm_passkey_view.title', children: t('dyn_mfa.confirm_passkey_view.title') }) }) }), jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', messageKey: errorMessage, className: 'confirm-passkey-view__header-banner' }), jsxRuntime.jsxs("div", { className: classNames.classNames('confirm-passkey-view__content'), children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: fingerprint.ReactComponent, iconSize: 96, isSpinning: isLoading, treatAsFunctionComponent: true }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: classNames.classNames('confirm-passkey-view__description'), copykey: 'dyn_mfa.confirm_passkey_view.description', children: t('dyn_mfa.confirm_passkey_view.description') })] }), jsxRuntime.jsx("div", { className: 'confirm-passkey-view__choose-another-method', children: jsxRuntime.jsx(TextButton.TextButton, { className: 'confirm-passkey-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', { isInitialSetup: false }), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) })] }));
+    return (jsxRuntime.jsxs("div", { className: classNames.classNames('confirm-passkey-view'), children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { alignContent: 'bottom', children: jsxRuntime.jsx("div", { className: 'confirm-passkey-view__header', children: jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'confirm-passkey-view__title', copykey: 'dyn_mfa.confirm_passkey_view.title', children: t('dyn_mfa.confirm_passkey_view.title') }) }) }), jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', messageKey: errorMessage, className: 'confirm-passkey-view__header-banner' }), jsxRuntime.jsxs("div", { className: classNames.classNames('confirm-passkey-view__content'), children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: fingerprint.ReactComponent, iconSize: 96, isSpinning: isLoading, treatAsFunctionComponent: true }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: classNames.classNames('confirm-passkey-view__description'), copykey: 'dyn_mfa.confirm_passkey_view.description', children: t('dyn_mfa.confirm_passkey_view.description') })] }), jsxRuntime.jsx("div", { className: 'confirm-passkey-view__choose-another-method', children: jsxRuntime.jsx(TextButton.TextButton, { className: 'confirm-passkey-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', {
+                        createMfaToken,
+                        isInitialSetup: false,
+                    }), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) })] }));
 };
 
 exports.ConfirmPasskeyView = ConfirmPasskeyView;

package/src/lib/views/Passkey/ConfirmPasskeyView/ConfirmPasskeyView.d.ts

@@ -1,2 +1,6 @@
 /// <reference types="react" />
-export declare const ConfirmPasskeyView: () => JSX.Element;
+type ConfirmPasskeyViewProps = {
+    createMfaToken?: boolean;
+};
+export declare const ConfirmPasskeyView: ({ createMfaToken, }: ConfirmPasskeyViewProps) => JSX.Element;
+export {};

package/src/lib/views/Passkey/ConfirmPasskeyView/ConfirmPasskeyView.js

@@ -107,13 +107,25 @@ import '../../../components/IsBrowser/IsBrowser.js';
 import '../../../components/Popper/Popper/Popper.js';
 import '../../../components/Popper/PopperContext/PopperContext.js';
 
-const ConfirmPasskeyView = () => {
+const ConfirmPasskeyView = ({ createMfaToken = false, }) => {
     const { t } = useTranslation();
     const { pushView } = useViewContext();
     const authenticatePasskeyMFA = useAuthenticatePasskeyMFA();
-    const { error, isLoading } = usePromise(authenticatePasskeyMFA);
+    const { error, isLoading } = usePromise(() => {
+        const createMfaTokenOptions = createMfaToken
+            ? {
+                singleUse: true,
+            }
+            : undefined;
+        return authenticatePasskeyMFA({
+            createMfaToken: createMfaTokenOptions,
+        });
+    });
     const errorMessage = useGetPasskeyErrorMessage(error);
-    return (jsxs("div", { className: classNames('confirm-passkey-view'), children: [jsx(ModalHeader, { alignContent: 'bottom', children: jsx("div", { className: 'confirm-passkey-view__header', children: jsx(Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'confirm-passkey-view__title', copykey: 'dyn_mfa.confirm_passkey_view.title', children: t('dyn_mfa.confirm_passkey_view.title') }) }) }), jsx(ModalHeaderBanner, { type: 'error', messageKey: errorMessage, className: 'confirm-passkey-view__header-banner' }), jsxs("div", { className: classNames('confirm-passkey-view__content'), children: [jsx(IconWithSpinner, { Icon: SvgFingerprint, iconSize: 96, isSpinning: isLoading, treatAsFunctionComponent: true }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: classNames('confirm-passkey-view__description'), copykey: 'dyn_mfa.confirm_passkey_view.description', children: t('dyn_mfa.confirm_passkey_view.description') })] }), jsx("div", { className: 'confirm-passkey-view__choose-another-method', children: jsx(TextButton, { className: 'confirm-passkey-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', { isInitialSetup: false }), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) })] }));
+    return (jsxs("div", { className: classNames('confirm-passkey-view'), children: [jsx(ModalHeader, { alignContent: 'bottom', children: jsx("div", { className: 'confirm-passkey-view__header', children: jsx(Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'confirm-passkey-view__title', copykey: 'dyn_mfa.confirm_passkey_view.title', children: t('dyn_mfa.confirm_passkey_view.title') }) }) }), jsx(ModalHeaderBanner, { type: 'error', messageKey: errorMessage, className: 'confirm-passkey-view__header-banner' }), jsxs("div", { className: classNames('confirm-passkey-view__content'), children: [jsx(IconWithSpinner, { Icon: SvgFingerprint, iconSize: 96, isSpinning: isLoading, treatAsFunctionComponent: true }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: classNames('confirm-passkey-view__description'), copykey: 'dyn_mfa.confirm_passkey_view.description', children: t('dyn_mfa.confirm_passkey_view.description') })] }), jsx("div", { className: 'confirm-passkey-view__choose-another-method', children: jsx(TextButton, { className: 'confirm-passkey-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', {
+                        createMfaToken,
+                        isInitialSetup: false,
+                    }), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) })] }));
 };
 
 export { ConfirmPasskeyView };

package/src/lib/views/Passkey/SetupPasskeyView/SetupPasskeyView.cjs

@@ -3,8 +3,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _tslib = require('../../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var reactI18next = require('react-i18next');
+var sdkApiCore = require('@dynamic-labs/sdk-api-core');
 var classNames = require('../../../utils/functions/classNames/classNames.cjs');
 require('../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
 require('react');
@@ -12,8 +14,6 @@ var arrowLeft = require('../../../shared/assets/arrow-left.cjs');
 var fingerprint = require('../../../shared/assets/fingerprint.cjs');
 require('@dynamic-labs/iconic');
 var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
-require('../../../../../_virtual/_tslib.cjs');
-require('@dynamic-labs/sdk-api-core');
 require('../../../shared/logger.cjs');
 require('@dynamic-labs/wallet-connector-core');
 require('@dynamic-labs/wallet-book');
@@ -26,6 +26,7 @@ require('../../../events/dynamicEvents.cjs');
 require('../../../context/DynamicContext/DynamicContext.cjs');
 require('../../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
 require('../../../store/state/authMode/authMode.cjs');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
 require('../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
@@ -114,9 +115,20 @@ require('../../../components/Popper/PopperContext/PopperContext.cjs');
 
 const SetupPasskeyView = () => {
     const { t } = reactI18next.useTranslation();
-    const { pushView, goBack, canGoBack } = ViewContext.useViewContext();
+    const { clearStackAndPush, pushView, goBack, canGoBack } = ViewContext.useViewContext();
+    const { setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
     const registerPasskey = useRegisterPasskey.useRegisterPasskey();
-    const { error, isLoading } = usePromise.usePromise(registerPasskey);
+    const { error, isLoading } = usePromise.usePromise(registerPasskey, {
+        initialData: undefined,
+        onResolve: (verifyResponse) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            if ((verifyResponse === null || verifyResponse === void 0 ? void 0 : verifyResponse.user.mfaBackupCodeAcknowledgement) ===
+                sdkApiCore.MfaBackupCodeAcknowledgement.Pending) {
+                clearStackAndPush('mfa-display-backup-codes');
+                return;
+            }
+            setShowAuthFlow(false);
+        }),
+    });
     const errorMessage = useGetPasskeyErrorMessage.useGetPasskeyErrorMessage(error);
     const backButton = canGoBack && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: goBack, "data-testid": 'back-button', children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }));
     return (jsxRuntime.jsxs("div", { className: classNames.classNames('setup-passkey-view'), children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { alignContent: 'bottom', leading: backButton, children: jsxRuntime.jsx("div", { className: 'setup-passkey-view__header', children: jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'setup-passkey-view__title', copykey: 'dyn_mfa.setup_passkey_view.title', children: t('dyn_mfa.setup_passkey_view.title') }) }) }), jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', messageKey: errorMessage, className: 'setup-passkey-view__header-banner' }), jsxRuntime.jsxs("div", { className: classNames.classNames('setup-passkey-view__content'), children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: fingerprint.ReactComponent, iconSize: 96, isSpinning: isLoading, treatAsFunctionComponent: true }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: classNames.classNames('setup-passkey-view__description'), copykey: 'dyn_mfa.setup_passkey_view.description', children: t('dyn_mfa.setup_passkey_view.description') })] }), jsxRuntime.jsx("div", { className: 'setup-passkey-view__choose-another-method', children: jsxRuntime.jsx(TextButton.TextButton, { className: 'setup-passkey-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', { isInitialSetup: true }), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) })] }));

package/src/lib/views/Passkey/SetupPasskeyView/SetupPasskeyView.js

@@ -1,6 +1,8 @@
 'use client'
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useTranslation } from 'react-i18next';
+import { MfaBackupCodeAcknowledgement } from '@dynamic-labs/sdk-api-core';
 import { classNames } from '../../../utils/functions/classNames/classNames.js';
 import '../../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import 'react';
@@ -8,8 +10,6 @@ import { ReactComponent as SvgArrowLeft } from '../../../shared/assets/arrow-lef
 import { ReactComponent as SvgFingerprint } from '../../../shared/assets/fingerprint.js';
 import '@dynamic-labs/iconic';
 import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
-import '../../../../../_virtual/_tslib.js';
-import '@dynamic-labs/sdk-api-core';
 import '../../../shared/logger.js';
 import '@dynamic-labs/wallet-connector-core';
 import '@dynamic-labs/wallet-book';
@@ -22,6 +22,7 @@ import '../../../events/dynamicEvents.js';
 import '../../../context/DynamicContext/DynamicContext.js';
 import '../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
 import '../../../store/state/authMode/authMode.js';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
 import '../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
@@ -110,9 +111,20 @@ import '../../../components/Popper/PopperContext/PopperContext.js';
 
 const SetupPasskeyView = () => {
     const { t } = useTranslation();
-    const { pushView, goBack, canGoBack } = useViewContext();
+    const { clearStackAndPush, pushView, goBack, canGoBack } = useViewContext();
+    const { setShowAuthFlow } = useInternalDynamicContext();
     const registerPasskey = useRegisterPasskey();
-    const { error, isLoading } = usePromise(registerPasskey);
+    const { error, isLoading } = usePromise(registerPasskey, {
+        initialData: undefined,
+        onResolve: (verifyResponse) => __awaiter(void 0, void 0, void 0, function* () {
+            if ((verifyResponse === null || verifyResponse === void 0 ? void 0 : verifyResponse.user.mfaBackupCodeAcknowledgement) ===
+                MfaBackupCodeAcknowledgement.Pending) {
+                clearStackAndPush('mfa-display-backup-codes');
+                return;
+            }
+            setShowAuthFlow(false);
+        }),
+    });
     const errorMessage = useGetPasskeyErrorMessage(error);
     const backButton = canGoBack && (jsx(IconButton, { type: 'button', onClick: goBack, "data-testid": 'back-button', children: jsx(SvgArrowLeft, {}) }));
     return (jsxs("div", { className: classNames('setup-passkey-view'), children: [jsx(ModalHeader, { alignContent: 'bottom', leading: backButton, children: jsx("div", { className: 'setup-passkey-view__header', children: jsx(Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'setup-passkey-view__title', copykey: 'dyn_mfa.setup_passkey_view.title', children: t('dyn_mfa.setup_passkey_view.title') }) }) }), jsx(ModalHeaderBanner, { type: 'error', messageKey: errorMessage, className: 'setup-passkey-view__header-banner' }), jsxs("div", { className: classNames('setup-passkey-view__content'), children: [jsx(IconWithSpinner, { Icon: SvgFingerprint, iconSize: 96, isSpinning: isLoading, treatAsFunctionComponent: true }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: classNames('setup-passkey-view__description'), copykey: 'dyn_mfa.setup_passkey_view.description', children: t('dyn_mfa.setup_passkey_view.description') })] }), jsx("div", { className: 'setup-passkey-view__choose-another-method', children: jsx(TextButton, { className: 'setup-passkey-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', { isInitialSetup: true }), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) })] }));

package/src/lib/views/viewToComponentMap.d.ts

@@ -56,7 +56,7 @@ export declare const viewToComponentMap: {
         uri: string;
         secret: string;
     }) => JSX.Element;
-    'mfa-verification': ({ type, isInitialSetup, showBackButton, deviceId, }: import("./MfaVerificationView").MfaVerificationViewProps) => JSX.Element;
+    'mfa-verification': ({ type, isInitialSetup, showBackButton, createMfaToken, deviceId, }: import("./MfaVerificationView").MfaVerificationViewProps) => JSX.Element;
     'mobile-wallet-redirect-view': import("react").FC<{
         onRetry: VoidFunction;
         connector?: import("dist/packages/wallet-connector-core/src").WalletConnector | undefined;
@@ -68,7 +68,9 @@ export declare const viewToComponentMap: {
     'network-not-supported-manual': import("react").FC;
     'no-access': () => JSX.Element;
     'no-qr-not-installed': () => JSX.Element | null;
-    'passkey-confirm': () => JSX.Element;
+    'passkey-confirm': ({ createMfaToken, }: {
+        createMfaToken?: boolean | undefined;
+    }) => JSX.Element;
     'passkey-intro': import("react").FC<{
         chains?: import("@dynamic-labs/sdk-api-core").EmbeddedWalletChainEnum[] | undefined;
     }>;

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

@@ -4,10 +4,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var reactI18next = require('react-i18next');
 var walletBook = require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
 require('../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
-require('react-i18next');
 require('react');
 require('@dynamic-labs/iconic');
 require('../../../../context/ViewContext/ViewContext.cjs');
@@ -109,7 +109,12 @@ require('react-focus-lock');
 
 const PendingAccountSwitchToLinkContent = () => {
     const { selectedWalletConnector } = useInternalDynamicContext.useInternalDynamicContext();
-    return (jsxRuntime.jsx(DefaultPromptModal.DefaultPromptLayout, { dataTestId: 'pending-account-switch', icon: jsxRuntime.jsx(walletBook.WalletIcon, { icon: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.metadata.icon, walletKey: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.key }), title: `Wallet is already linked, switch wallet in ${selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name}`, children: jsxRuntime.jsxs(Typography.Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content', children: ["To link a new wallet, open", ' ', jsxRuntime.jsx(Typography.Typography, { as: 'span', weight: 'medium', color: 'primary', children: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name }), ' ', "and switch to the account you want to link."] }) }));
+    const { t } = reactI18next.useTranslation();
+    return (jsxRuntime.jsx(DefaultPromptModal.DefaultPromptLayout, { dataTestId: 'pending-account-switch', icon: jsxRuntime.jsx(walletBook.WalletIcon, { icon: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.metadata.icon, walletKey: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.key }), title: t('dyn_pending_account_switch_to_link.title', {
+            walletName: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
+        }), children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content', copykey: 'dyn_pending_account_switch_to_link.description', children: t('dyn_pending_account_switch_to_link.description', {
+                walletName: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
+            }) }) }));
 };
 const PendingAccountSwitchToLinkWidgetPortal = () => (jsxRuntime.jsx(WidgetPortal.WidgetPortal, { onClose: useCloseMultiWalletPrompt.useCloseMultiWalletPrompt(), children: jsxRuntime.jsx(PendingAccountSwitchToLinkContent, {}) }));
 const PendingAccountSwitchToLinkModal = () => (jsxRuntime.jsx(PromptModal.PromptModal, { onClose: useCloseMultiWalletPrompt.useCloseMultiWalletPrompt(), children: jsxRuntime.jsx(PendingAccountSwitchToLinkContent, {}) }));

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

@@ -1,9 +1,9 @@
 'use client'
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
 import { WalletIcon } from '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';
 import '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
-import 'react-i18next';
 import 'react';
 import '@dynamic-labs/iconic';
 import '../../../../context/ViewContext/ViewContext.js';
@@ -105,7 +105,12 @@ import 'react-focus-lock';
 
 const PendingAccountSwitchToLinkContent = () => {
     const { selectedWalletConnector } = useInternalDynamicContext();
-    return (jsx(DefaultPromptLayout, { dataTestId: 'pending-account-switch', icon: jsx(WalletIcon, { icon: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.metadata.icon, walletKey: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.key }), title: `Wallet is already linked, switch wallet in ${selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name}`, children: jsxs(Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content', children: ["To link a new wallet, open", ' ', jsx(Typography, { as: 'span', weight: 'medium', color: 'primary', children: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name }), ' ', "and switch to the account you want to link."] }) }));
+    const { t } = useTranslation();
+    return (jsx(DefaultPromptLayout, { dataTestId: 'pending-account-switch', icon: jsx(WalletIcon, { icon: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.metadata.icon, walletKey: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.key }), title: t('dyn_pending_account_switch_to_link.title', {
+            walletName: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
+        }), children: jsx(Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content', copykey: 'dyn_pending_account_switch_to_link.description', children: t('dyn_pending_account_switch_to_link.description', {
+                walletName: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
+            }) }) }));
 };
 const PendingAccountSwitchToLinkWidgetPortal = () => (jsx(WidgetPortal, { onClose: useCloseMultiWalletPrompt(), children: jsx(PendingAccountSwitchToLinkContent, {}) }));
 const PendingAccountSwitchToLinkModal = () => (jsx(PromptModal, { onClose: useCloseMultiWalletPrompt(), children: jsx(PendingAccountSwitchToLinkContent, {}) }));