@dynamic-labs/sdk-react-core 3.0.0-alpha.34 → 3.0.0-alpha.36

package/src/lib/utils/functions/index.d.ts

@@ -79,3 +79,4 @@ export * from './getSupportedCountriesForVerificationFromProjectSettings';
 export * from './getDefaultCountriesIfEmpty';
 export * from './logVerboseTroubleshootingMessage';
 export * from './getPlatformForConnector';
+export * from './isValidMfaRecoveryCode';

package/src/lib/utils/functions/isValidMfaRecoveryCode/index.d.ts

@@ -0,0 +1 @@
+export { isValidMfaRecoveryCode } from './isValidMfaRecoveryCode';

package/src/lib/utils/functions/isValidMfaRecoveryCode/isValidMfaRecoveryCode.cjs

@@ -0,0 +1,11 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const isValidMfaRecoveryCode = (text) => {
+    const regex = /^[a-zA-Z0-9]{10}$/;
+    return regex.test(text);
+};
+
+exports.isValidMfaRecoveryCode = isValidMfaRecoveryCode;

package/src/lib/utils/functions/isValidMfaRecoveryCode/isValidMfaRecoveryCode.d.ts

@@ -0,0 +1 @@
+export declare const isValidMfaRecoveryCode: (text: string) => boolean;

package/src/lib/utils/functions/isValidMfaRecoveryCode/isValidMfaRecoveryCode.js

@@ -0,0 +1,7 @@
+'use client'
+const isValidMfaRecoveryCode = (text) => {
+    const regex = /^[a-zA-Z0-9]{10}$/;
+    return regex.test(text);
+};
+
+export { isValidMfaRecoveryCode };

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

@@ -141,7 +141,9 @@ const useAuthLayoutChecks = () => {
         view.type !== 'create-password-view' &&
         view.type !== 'embedded-wallet-auth-choice' &&
         view.type !== 'wallet-claim-intro' &&
-        view.type !== 'passkey-recovery-add-email';
+        view.type !== 'passkey-recovery-add-email' &&
+        view.type !== 'mfa-choose-device' &&
+        view.type !== 'mfa-verification';
     const showConnectedWalletProgress = isBridgeFlow &&
         (view.type === 'wallet-list' ||
             view.type === 'qr-code' ||

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

@@ -137,7 +137,9 @@ const useAuthLayoutChecks = () => {
         view.type !== 'create-password-view' &&
         view.type !== 'embedded-wallet-auth-choice' &&
         view.type !== 'wallet-claim-intro' &&
-        view.type !== 'passkey-recovery-add-email';
+        view.type !== 'passkey-recovery-add-email' &&
+        view.type !== 'mfa-choose-device' &&
+        view.type !== 'mfa-verification';
     const showConnectedWalletProgress = isBridgeFlow &&
         (view.type === 'wallet-list' ||
             view.type === 'qr-code' ||

package/src/lib/utils/hooks/useEmbeddedWallet/index.d.ts

@@ -1,3 +1,4 @@
 export { useEmbeddedWallet } from './useEmbeddedWallet';
 export { useSecureEnclaveEmbeddedWallet } from './useSecureEnclaveEmbeddedWallet';
 export { useMPCEmbeddedWallet } from './useMPCEmbeddedWallet';
+export { EmbeddedWalletVersion } from './useSecureEnclaveEmbeddedWallet';

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

@@ -42,6 +42,7 @@ var findPrimaryEmbeddedChain = require('../../../views/Passkey/utils/findPrimary
 var WalletContext = require('../../../context/WalletContext/WalletContext.cjs');
 var useIsTurnkeyWallet = require('../useIsTurnkeyWallet/useIsTurnkeyWallet.cjs');
 var useSecureEnclaveEmbeddedWallet = require('./useSecureEnclaveEmbeddedWallet/useSecureEnclaveEmbeddedWallet.cjs');
+require('./useSecureEnclaveEmbeddedWallet/constants.cjs');
 var useMPCEmbeddedWallet = require('./useMPCEmbeddedWallet/useMPCEmbeddedWallet.cjs');
 require('../../../context/ThemeContext/ThemeContext.cjs');
 require('../useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
@@ -119,8 +120,8 @@ const useEmbeddedWallet = () => {
     const { createEmbeddedWallet: createMPCWallet, canCreateMPCWallet, createPassword, revealEmbeddedWalletKey: revealCoinbaseMPCEmbeddedWalletKey, } = useMPCEmbeddedWallet.useMPCEmbeddedWallet();
     const { createEmbeddedWallet: createTurnkeyEmbeddedWallet, createOrRestoreSession, createPasskey, revealEmbeddedWalletKey: revealTurnkeyEmbeddedWalletKey, getPasskeys, isSessionActive, sendOneTimeCode, getWalletVersion: getTurnkeyWalletVersion, } = useSecureEnclaveEmbeddedWallet.useSecureEnclaveEmbeddedWallet();
     const { isLoadingEmbeddedWallet } = WalletContext.useWalletContext();
-    const userHasEmbeddedWallet = () => hasEmbeddedWallet.hasEmbeddedWallet(user);
-    const getWalletVersion = () => {
+    const userHasEmbeddedWallet = React.useCallback(() => hasEmbeddedWallet.hasEmbeddedWallet(user), [user]);
+    const getWalletVersion = React.useCallback(() => {
         if (!user) {
             throw new utils.DynamicError(errors.USER_NOT_LOGGED_IN);
         }
@@ -131,7 +132,7 @@ const useEmbeddedWallet = () => {
             return getTurnkeyWalletVersion();
         }
         return undefined;
-    };
+    }, [getTurnkeyWalletVersion, isTurnkeyWallet, user, userHasEmbeddedWallet]);
     /**
      * Creates Dynamic embedded wallet according to the settings
      * @param chains - array of chains to create the wallet for

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

@@ -27,7 +27,7 @@ export declare const useEmbeddedWallet: () => {
     } | undefined) => Promise<import("dist/packages/wallet-connector-core/src").WebAuthnAttestation>;
     readonly createPassword: (showIntro?: boolean | undefined) => Promise<string>;
     readonly getPasskeys: () => Promise<import("@dynamic-labs/sdk-api-core").UserPasskey[]>;
-    readonly getWalletVersion: () => import("./useSecureEnclaveEmbeddedWallet/constants").EmbeddedWalletVersion | undefined;
+    readonly getWalletVersion: () => import(".").EmbeddedWalletVersion | undefined;
     readonly isLoadingEmbeddedWallet: boolean;
     readonly isSessionActive: string | boolean | undefined;
     readonly revealWalletKey: (options?: {

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

@@ -38,6 +38,7 @@ import { findPrimaryEmbeddedChain } from '../../../views/Passkey/utils/findPrima
 import { useWalletContext } from '../../../context/WalletContext/WalletContext.js';
 import { useIsTurnkeyWallet } from '../useIsTurnkeyWallet/useIsTurnkeyWallet.js';
 import { useSecureEnclaveEmbeddedWallet } from './useSecureEnclaveEmbeddedWallet/useSecureEnclaveEmbeddedWallet.js';
+import './useSecureEnclaveEmbeddedWallet/constants.js';
 import { useMPCEmbeddedWallet } from './useMPCEmbeddedWallet/useMPCEmbeddedWallet.js';
 import '../../../context/ThemeContext/ThemeContext.js';
 import '../useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
@@ -115,8 +116,8 @@ const useEmbeddedWallet = () => {
     const { createEmbeddedWallet: createMPCWallet, canCreateMPCWallet, createPassword, revealEmbeddedWalletKey: revealCoinbaseMPCEmbeddedWalletKey, } = useMPCEmbeddedWallet();
     const { createEmbeddedWallet: createTurnkeyEmbeddedWallet, createOrRestoreSession, createPasskey, revealEmbeddedWalletKey: revealTurnkeyEmbeddedWalletKey, getPasskeys, isSessionActive, sendOneTimeCode, getWalletVersion: getTurnkeyWalletVersion, } = useSecureEnclaveEmbeddedWallet();
     const { isLoadingEmbeddedWallet } = useWalletContext();
-    const userHasEmbeddedWallet = () => hasEmbeddedWallet(user);
-    const getWalletVersion = () => {
+    const userHasEmbeddedWallet = useCallback(() => hasEmbeddedWallet(user), [user]);
+    const getWalletVersion = useCallback(() => {
         if (!user) {
             throw new DynamicError(USER_NOT_LOGGED_IN);
         }
@@ -127,7 +128,7 @@ const useEmbeddedWallet = () => {
             return getTurnkeyWalletVersion();
         }
         return undefined;
-    };
+    }, [getTurnkeyWalletVersion, isTurnkeyWallet, user, userHasEmbeddedWallet]);
     /**
      * Creates Dynamic embedded wallet according to the settings
      * @param chains - array of chains to create the wallet for

package/src/lib/utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/index.d.ts

@@ -1,2 +1,3 @@
 export { useSecureEnclaveEmbeddedWallet } from './useSecureEnclaveEmbeddedWallet';
 export { useTurnkey } from './useTurnkey';
+export { EmbeddedWalletVersion } from './constants';

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

@@ -115,7 +115,7 @@ const socialProviders = [
 const providersRequiringPkce = ['twitter', 'github'];
 // Hook to handle common social auth logic (for social linking and social sign in)
 const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, }) => {
-    const { environmentId, setShowAuthFlow, projectSettings, consumeNonce, redirectUrl, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { environmentId, setShowAuthFlow, projectSettings, consumeNonce, redirectUrl: defaultRedirectUrl, } = useInternalDynamicContext.useInternalDynamicContext();
     const { setErrorMessage, setError: setContextError } = ErrorContext.useErrorContext();
     const { initAuth } = useUserAuth.useUserAuth({
         authMethod: 'social',
@@ -199,7 +199,10 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
             type: 'social',
         });
         if (provider === sdkApiCore.ProviderEnum.Farcaster)
-            return connectWithFarcaster(authMode, { captchaToken, redirectUrl });
+            return connectWithFarcaster(authMode, {
+                captchaToken,
+                redirectUrl,
+            });
         const state = randomString.randomString(32);
         const verifier = randomString.randomString(43);
         const loginUrlString = getOauthLoginUrl.getOauthLoginUrl((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _b !== void 0 ? _b : [], provider);
@@ -225,7 +228,7 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
                 oauthLoginUrl,
                 onSettled,
                 provider,
-                redirectUrl,
+                redirectUrl: redirectUrl || defaultRedirectUrl,
                 sessionTimeout,
                 setIsProcessing,
                 state,
@@ -275,13 +278,13 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
             }
         }
     });
-    const connectWithFarcaster = (authMode_1, _d) => _tslib.__awaiter(void 0, [authMode_1, _d], void 0, function* (authMode, { captchaToken, redirectUrl: redirectUrlOverride, }) {
+    const connectWithFarcaster = (authMode_1, _d) => _tslib.__awaiter(void 0, [authMode_1, _d], void 0, function* (authMode, { captchaToken, redirectUrl }) {
         const dynamicNonce = consumeNonce();
         const domain = utils.PlatformService.getHost();
         const data = yield farcaster.connect({
             domain,
             nonce: dynamicNonce,
-            redirectUrl: redirectUrlOverride !== null && redirectUrlOverride !== void 0 ? redirectUrlOverride : redirectUrl,
+            redirectUrl: redirectUrl || defaultRedirectUrl,
             siweUri: utils.PlatformService.getOrigin(),
         });
         if (!(data === null || data === void 0 ? void 0 : data.url) || !(data === null || data === void 0 ? void 0 : data.channelToken)) {

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

@@ -111,7 +111,7 @@ const socialProviders = [
 const providersRequiringPkce = ['twitter', 'github'];
 // Hook to handle common social auth logic (for social linking and social sign in)
 const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, }) => {
-    const { environmentId, setShowAuthFlow, projectSettings, consumeNonce, redirectUrl, } = useInternalDynamicContext();
+    const { environmentId, setShowAuthFlow, projectSettings, consumeNonce, redirectUrl: defaultRedirectUrl, } = useInternalDynamicContext();
     const { setErrorMessage, setError: setContextError } = useErrorContext();
     const { initAuth } = useUserAuth({
         authMethod: 'social',
@@ -195,7 +195,10 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
             type: 'social',
         });
         if (provider === ProviderEnum.Farcaster)
-            return connectWithFarcaster(authMode, { captchaToken, redirectUrl });
+            return connectWithFarcaster(authMode, {
+                captchaToken,
+                redirectUrl,
+            });
         const state = randomString(32);
         const verifier = randomString(43);
         const loginUrlString = getOauthLoginUrl((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _b !== void 0 ? _b : [], provider);
@@ -221,7 +224,7 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
                 oauthLoginUrl,
                 onSettled,
                 provider,
-                redirectUrl,
+                redirectUrl: redirectUrl || defaultRedirectUrl,
                 sessionTimeout,
                 setIsProcessing,
                 state,
@@ -271,13 +274,13 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
             }
         }
     });
-    const connectWithFarcaster = (authMode_1, _d) => __awaiter(void 0, [authMode_1, _d], void 0, function* (authMode, { captchaToken, redirectUrl: redirectUrlOverride, }) {
+    const connectWithFarcaster = (authMode_1, _d) => __awaiter(void 0, [authMode_1, _d], void 0, function* (authMode, { captchaToken, redirectUrl }) {
         const dynamicNonce = consumeNonce();
         const domain = PlatformService.getHost();
         const data = yield connect({
             domain,
             nonce: dynamicNonce,
-            redirectUrl: redirectUrlOverride !== null && redirectUrlOverride !== void 0 ? redirectUrlOverride : redirectUrl,
+            redirectUrl: redirectUrl || defaultRedirectUrl,
             siweUri: PlatformService.getOrigin(),
         });
         if (!(data === null || data === void 0 ? void 0 : data.url) || !(data === null || data === void 0 ? void 0 : data.channelToken)) {

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

@@ -19,7 +19,7 @@ require('../../../shared/utils/classes/storage/sessionStorage.cjs');
 var hasPendingMfaAction = require('../../../shared/utils/functions/hasPendingMfaAction/hasPendingMfaAction.cjs');
 require('@dynamic-labs/utils');
 require('../../../shared/consts/index.cjs');
-require('../../../events/dynamicEvents.cjs');
+var useDynamicEvents = require('../events/useDynamicEvents/useDynamicEvents.cjs');
 require('../../../../../_virtual/_tslib.cjs');
 require('../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../context/ErrorContext/ErrorContext.cjs');
@@ -31,6 +31,7 @@ require('../../../locale/locale.cjs');
 require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../../events/dynamicEvents.cjs');
 require('../../../context/VerificationContext/VerificationContext.cjs');
 require('react-dom');
 require('../../../context/WalletContext/WalletContext.cjs');
@@ -100,6 +101,9 @@ const useSyncMfaFlow = () => {
     const { getUserDevices } = useMfa.useMfa();
     // this is used to make sure we only trigger the effect once
     const triggered = React.useRef(false);
+    useDynamicEvents.useInternalDynamicEvents('logout', () => {
+        triggered.current = false;
+    });
     React.useEffect(() => {
         var _a;
         // boilterplate: we don't want to run the sync logic if the sdk hasn't finished loading,

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

@@ -15,7 +15,7 @@ import '../../../shared/utils/classes/storage/sessionStorage.js';
 import { hasPendingMfaAction } from '../../../shared/utils/functions/hasPendingMfaAction/hasPendingMfaAction.js';
 import '@dynamic-labs/utils';
 import '../../../shared/consts/index.js';
-import '../../../events/dynamicEvents.js';
+import { useInternalDynamicEvents } from '../events/useDynamicEvents/useDynamicEvents.js';
 import '../../../../../_virtual/_tslib.js';
 import '../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../context/ErrorContext/ErrorContext.js';
@@ -27,6 +27,7 @@ import '../../../locale/locale.js';
 import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../../events/dynamicEvents.js';
 import '../../../context/VerificationContext/VerificationContext.js';
 import 'react-dom';
 import '../../../context/WalletContext/WalletContext.js';
@@ -96,6 +97,9 @@ const useSyncMfaFlow = () => {
     const { getUserDevices } = useMfa();
     // this is used to make sure we only trigger the effect once
     const triggered = useRef(false);
+    useInternalDynamicEvents('logout', () => {
+        triggered.current = false;
+    });
     useEffect(() => {
         var _a;
         // boilterplate: we don't want to run the sync logic if the sdk hasn't finished loading,

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var reactI18next = require('react-i18next');
-var sdkApiCore = require('@dynamic-labs/sdk-api-core');
 require('react');
 var secureAccount = require('../../assets/secure-account.cjs');
 require('../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
@@ -14,6 +13,7 @@ require('../../events/dynamicEvents.cjs');
 require('../../../../_virtual/_tslib.cjs');
 require('@dynamic-labs/utils');
 require('../../context/DynamicContext/DynamicContext.cjs');
+require('@dynamic-labs/sdk-api-core');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
@@ -67,6 +67,7 @@ require('../../components/MenuList/Dropdown/Dropdown.cjs');
 require('formik');
 var Button = require('../../components/Button/Button.cjs');
 require('../TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
+var ModalHeader = require('../../components/ModalHeader/ModalHeader.cjs');
 require('../../components/Input/Input.cjs');
 require('../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../context/PasskeyContext/PasskeyContext.cjs');
@@ -84,6 +85,7 @@ require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('../WalletList/WalletList.cjs');
 require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
+var getMfaOptions = require('./getMfaOptions/getMfaOptions.cjs');
 require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 require('../../context/SendBalanceContext/SendBalanceContext.cjs');
 require('../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
@@ -92,21 +94,34 @@ require('../../context/ReinitializeContext/ReinitializeContextProvider.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('qrcode');
 
-const MfaChooseDeviceView = () => {
+const MfaChooseDeviceView = ({ isInitialSetup = true, }) => {
     const { t } = reactI18next.useTranslation();
     const { setView } = ViewContext.useViewContext();
-    const mfaOptions = [
-        {
-            Icon: undefined,
-            description: t('dyn_mfa.choose_device_view.authenticator_app_description'),
-            label: t('dyn_mfa.choose_device_view.authenticator_app'),
-            type: sdkApiCore.MFADeviceType.Totp,
-        },
-    ];
+    const mfaOptions = getMfaOptions.getMfaOptions(isInitialSetup);
     const handleClick = (option) => {
-        setView('mfa-secure-device', { type: option.type });
+        if (option.type === 'backupCode') {
+            setView('mfa-recovery', undefined, {
+                onBackClick: () => {
+                    setView('mfa-choose-device', { isInitialSetup: false });
+                },
+            });
+            return;
+        }
+        if (isInitialSetup) {
+            setView('mfa-secure-device', { type: option.type });
+            return;
+        }
+        setView('mfa-verification', {
+            isInitialSetup,
+            showBackButton: true,
+            type: option.type,
+        });
     };
-    return (jsxRuntime.jsxs("div", { className: 'mfa-choose-device-view__body', "data-testid": 'mfa-choose-device-view', children: [jsxRuntime.jsx(secureAccount.ReactComponent, {}), jsxRuntime.jsx(Typography.Typography, { className: 'mfa-choose-device-view__copy', variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_mfa.choose_device_view.select_options') }), mfaOptions.map((option) => (jsxRuntime.jsxs(Button.Button, { buttonClassName: 'mfa-choose-device-view__button', expanded: true, onClick: () => handleClick(option), children: [jsxRuntime.jsxs("div", { className: 'mfa-choose-device-view__button__header', children: [jsxRuntime.jsx(Typography.Typography, { children: option.label }), jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'mfa-choose-device-view__icon--rotate' })] }), jsxRuntime.jsx(Typography.Typography, { className: 'mfa-choose-device-view__button__description', color: 'secondary', children: option.description })] }, option.type)))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { alignContent: 'bottom', children: jsxRuntime.jsx("div", { className: 'otp-verification-view__status-header', children: jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title', children: isInitialSetup
+                            ? t('dyn_mfa.choose_device_view.title')
+                            : t('dyn_mfa.choose_device_view.choose_another_method') }) }) }), jsxRuntime.jsxs("div", { className: 'mfa-choose-device-view__body', "data-testid": 'mfa-choose-device-view', children: [jsxRuntime.jsx(secureAccount.ReactComponent, {}), jsxRuntime.jsx(Typography.Typography, { className: 'mfa-choose-device-view__copy', variant: 'body_normal', weight: 'regular', color: 'secondary', children: isInitialSetup
+                            ? t('dyn_mfa.choose_device_view.select_options')
+                            : t('dyn_mfa.choose_device_view.choose_another_method_description') }), mfaOptions.map((option) => (jsxRuntime.jsxs(Button.Button, { buttonClassName: 'mfa-choose-device-view__button', expanded: true, onClick: () => handleClick(option), children: [jsxRuntime.jsxs("div", { className: 'mfa-choose-device-view__button__header', children: [jsxRuntime.jsx(Typography.Typography, { copykey: option.labelKey, children: t(option.labelKey) }), jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'mfa-choose-device-view__icon--rotate' })] }), jsxRuntime.jsx(Typography.Typography, { className: 'mfa-choose-device-view__button__description', color: 'secondary', copykey: option.descriptionKey, children: t(option.descriptionKey) })] }, option.type)))] })] }));
 };
 
 exports.MfaChooseDeviceView = MfaChooseDeviceView;

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

@@ -1,2 +1,5 @@
-/// <reference types="react" />
-export declare const MfaChooseDeviceView: () => JSX.Element;
+import { FC } from 'react';
+export type MfaChooseDeviceViewProps = {
+    isInitialSetup?: boolean;
+};
+export declare const MfaChooseDeviceView: FC<MfaChooseDeviceViewProps>;

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

@@ -1,7 +1,6 @@
 'use client'
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useTranslation } from 'react-i18next';
-import { MFADeviceType } from '@dynamic-labs/sdk-api-core';
 import 'react';
 import { ReactComponent as SvgSecureAccount } from '../../assets/secure-account.js';
 import '../../components/Accordion/components/AccordionItem/AccordionItem.js';
@@ -10,6 +9,7 @@ import '../../events/dynamicEvents.js';
 import '../../../../_virtual/_tslib.js';
 import '@dynamic-labs/utils';
 import '../../context/DynamicContext/DynamicContext.js';
+import '@dynamic-labs/sdk-api-core';
 import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
@@ -63,6 +63,7 @@ import '../../components/MenuList/Dropdown/Dropdown.js';
 import 'formik';
 import { Button } from '../../components/Button/Button.js';
 import '../TransactionConfirmationView/helpers/transactionErrorMessage.js';
+import { ModalHeader } from '../../components/ModalHeader/ModalHeader.js';
 import '../../components/Input/Input.js';
 import '../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../context/PasskeyContext/PasskeyContext.js';
@@ -80,6 +81,7 @@ import '../../components/Popper/PopperContext/PopperContext.js';
 import '../WalletList/WalletList.js';
 import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
+import { getMfaOptions } from './getMfaOptions/getMfaOptions.js';
 import '../../context/IpConfigurationContext/IpConfigurationContext.js';
 import '../../context/SendBalanceContext/SendBalanceContext.js';
 import '../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
@@ -88,21 +90,34 @@ import '../../context/ReinitializeContext/ReinitializeContextProvider.js';
 import '../../components/InlineWidget/InlineWidget.js';
 import 'qrcode';
 
-const MfaChooseDeviceView = () => {
+const MfaChooseDeviceView = ({ isInitialSetup = true, }) => {
     const { t } = useTranslation();
     const { setView } = useViewContext();
-    const mfaOptions = [
-        {
-            Icon: undefined,
-            description: t('dyn_mfa.choose_device_view.authenticator_app_description'),
-            label: t('dyn_mfa.choose_device_view.authenticator_app'),
-            type: MFADeviceType.Totp,
-        },
-    ];
+    const mfaOptions = getMfaOptions(isInitialSetup);
     const handleClick = (option) => {
-        setView('mfa-secure-device', { type: option.type });
+        if (option.type === 'backupCode') {
+            setView('mfa-recovery', undefined, {
+                onBackClick: () => {
+                    setView('mfa-choose-device', { isInitialSetup: false });
+                },
+            });
+            return;
+        }
+        if (isInitialSetup) {
+            setView('mfa-secure-device', { type: option.type });
+            return;
+        }
+        setView('mfa-verification', {
+            isInitialSetup,
+            showBackButton: true,
+            type: option.type,
+        });
     };
-    return (jsxs("div", { className: 'mfa-choose-device-view__body', "data-testid": 'mfa-choose-device-view', children: [jsx(SvgSecureAccount, {}), jsx(Typography, { className: 'mfa-choose-device-view__copy', variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_mfa.choose_device_view.select_options') }), mfaOptions.map((option) => (jsxs(Button, { buttonClassName: 'mfa-choose-device-view__button', expanded: true, onClick: () => handleClick(option), children: [jsxs("div", { className: 'mfa-choose-device-view__button__header', children: [jsx(Typography, { children: option.label }), jsx(SvgChevronLeft, { className: 'mfa-choose-device-view__icon--rotate' })] }), jsx(Typography, { className: 'mfa-choose-device-view__button__description', color: 'secondary', children: option.description })] }, option.type)))] }));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { alignContent: 'bottom', children: jsx("div", { className: 'otp-verification-view__status-header', children: jsx(Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title', children: isInitialSetup
+                            ? t('dyn_mfa.choose_device_view.title')
+                            : t('dyn_mfa.choose_device_view.choose_another_method') }) }) }), jsxs("div", { className: 'mfa-choose-device-view__body', "data-testid": 'mfa-choose-device-view', children: [jsx(SvgSecureAccount, {}), jsx(Typography, { className: 'mfa-choose-device-view__copy', variant: 'body_normal', weight: 'regular', color: 'secondary', children: isInitialSetup
+                            ? t('dyn_mfa.choose_device_view.select_options')
+                            : t('dyn_mfa.choose_device_view.choose_another_method_description') }), mfaOptions.map((option) => (jsxs(Button, { buttonClassName: 'mfa-choose-device-view__button', expanded: true, onClick: () => handleClick(option), children: [jsxs("div", { className: 'mfa-choose-device-view__button__header', children: [jsx(Typography, { copykey: option.labelKey, children: t(option.labelKey) }), jsx(SvgChevronLeft, { className: 'mfa-choose-device-view__icon--rotate' })] }), jsx(Typography, { className: 'mfa-choose-device-view__button__description', color: 'secondary', copykey: option.descriptionKey, children: t(option.descriptionKey) })] }, option.type)))] })] }));
 };
 
 export { MfaChooseDeviceView };

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

@@ -0,0 +1,29 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var sdkApiCore = require('@dynamic-labs/sdk-api-core');
+
+const getMfaOptions = (isInitialSetup) => {
+    const mfaOptions = [
+        {
+            Icon: undefined,
+            descriptionKey: 'dyn_mfa.choose_device_view.authenticator_app_description',
+            labelKey: 'dyn_mfa.choose_device_view.authenticator_app',
+            type: sdkApiCore.MFADeviceType.Totp,
+        },
+    ];
+    if (!isInitialSetup) {
+        const backupCodeOption = {
+            Icon: undefined,
+            descriptionKey: 'dyn_mfa.choose_device_view.backup_code_description',
+            labelKey: 'dyn_mfa.choose_device_view.backup_code',
+            type: 'backupCode',
+        };
+        mfaOptions.push(backupCodeOption);
+    }
+    return mfaOptions;
+};
+
+exports.getMfaOptions = getMfaOptions;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { MFADeviceType } from '@dynamic-labs/sdk-api-core';
+type MFAAuthType = MFADeviceType | 'backupCode';
+export type MfaOption = {
+    Icon?: React.ReactNode;
+    descriptionKey: string;
+    labelKey: string;
+    type: MFAAuthType;
+};
+export declare const getMfaOptions: (isInitialSetup: boolean) => MfaOption[];
+export {};

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

@@ -0,0 +1,25 @@
+'use client'
+import { MFADeviceType } from '@dynamic-labs/sdk-api-core';
+
+const getMfaOptions = (isInitialSetup) => {
+    const mfaOptions = [
+        {
+            Icon: undefined,
+            descriptionKey: 'dyn_mfa.choose_device_view.authenticator_app_description',
+            labelKey: 'dyn_mfa.choose_device_view.authenticator_app',
+            type: MFADeviceType.Totp,
+        },
+    ];
+    if (!isInitialSetup) {
+        const backupCodeOption = {
+            Icon: undefined,
+            descriptionKey: 'dyn_mfa.choose_device_view.backup_code_description',
+            labelKey: 'dyn_mfa.choose_device_view.backup_code',
+            type: 'backupCode',
+        };
+        mfaOptions.push(backupCodeOption);
+    }
+    return mfaOptions;
+};
+
+export { getMfaOptions };

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

@@ -0,0 +1 @@
+export * from './getMfaOptions';

package/src/lib/views/MfaRecoveryView/MfaRecoveryView.cjs

@@ -23,6 +23,7 @@ require('../../utils/constants/values.cjs');
 require('../../shared/utils/classes/storage/localStorage.cjs');
 require('../../shared/utils/classes/storage/sessionStorage.cjs');
 require('../../shared/consts/index.cjs');
+var useInternalDynamicContext = require('../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
@@ -30,6 +31,7 @@ require('react-international-phone');
 require('../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/store');
 require('../../locale/locale.cjs');
+var isValidMfaRecoveryCode = require('../../utils/functions/isValidMfaRecoveryCode/isValidMfaRecoveryCode.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../context/UserWalletsContext/UserWalletsContext.cjs');
@@ -86,7 +88,6 @@ require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/Secondar
 require('@hcaptcha/react-hcaptcha');
 var useMfa = require('../../utils/hooks/useMfa/useMfa.cjs');
 require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
-var validateMfaRecoveryCode = require('../../utils/functions/validateMfaRecoveryCode/validateMfaRecoveryCode.cjs');
 require('../../context/SendBalanceContext/SendBalanceContext.cjs');
 require('../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
 require('../../context/ConnectWithOtpContext/constants.cjs');
@@ -96,36 +97,35 @@ require('../../components/InlineWidget/InlineWidget.cjs');
 require('qrcode');
 
 const MfaRecoveryView = () => {
+    var _a;
     const { t } = reactI18next.useTranslation();
+    const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
     const { authRecoveryCode } = useMfa.useMfa();
     const [code, setCode] = React.useState('');
-    const [isValid, setIsValid] = React.useState(false);
+    const [isLoading, setIsLoading] = React.useState(false);
     const [error, setError] = React.useState('');
-    const openHelp = () => undefined;
+    const supportEmail = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general) === null || _a === void 0 ? void 0 : _a.supportEmail;
     const handleRecovery = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         if (!code) {
-            setIsValid(false);
             return;
         }
         try {
+            setIsLoading(true);
             yield authRecoveryCode(code);
         }
         catch (e) {
             setError(e.message || 'Something went wrong');
         }
+        finally {
+            setIsLoading(false);
+        }
     });
     const handleCodeChanged = (event) => {
         const inputCode = event.target.value;
         setCode(inputCode);
-        if (validateMfaRecoveryCode.validateMfaRecoveryCode(inputCode)) {
-            setIsValid(true);
-        }
-        else {
-            setIsValid(false);
-            setError('');
-        }
+        setError('');
     };
-    return (jsxRuntime.jsxs("div", { className: 'mfa-recovery-view', children: [error && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: error }), !error && !isValid && (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: MfaRecoveryIcon.MfaRecoveryScreenIcon, isSpinning: !error && !isValid, iconSize: 96 })), jsxRuntime.jsx("div", { className: 'mfa-recovery-view__body', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_mfa.recovery_view.body') }) }), jsxRuntime.jsxs("div", { className: 'mfa-recovery-view__actions', children: [jsxRuntime.jsx(Input.Input, { id: 'mfa-recovery-input', "data-testid": 'mfa-recovery-input', label: t('dyn_mfa.recovery_view.input_label'), onChange: handleCodeChanged, value: code }), jsxRuntime.jsx(Button.Button, { expanded: true, buttonVariant: 'brand-primary', disabled: !isValid, onClick: handleRecovery, dataTestId: 'mfa-recovery-submit', children: jsxRuntime.jsx(Typography.Typography, { children: t('dyn_mfa.recovery_view.button_label') }) })] }), jsxRuntime.jsxs("div", { className: 'mfa-recovery-view__get-help', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: t('dyn_mfa.recovery_view.get_help.description') }), jsxRuntime.jsx("button", { onClick: openHelp, children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'link', children: t('dyn_mfa.recovery_view.get_help.button_label') }) })] })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [error && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: error }), jsxRuntime.jsxs("div", { className: 'mfa-recovery-view', children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: MfaRecoveryIcon.MfaRecoveryScreenIcon, isSpinning: isLoading, iconSize: 96 }), jsxRuntime.jsx("div", { className: 'mfa-recovery-view__body', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_mfa.recovery_view.body') }) }), jsxRuntime.jsxs("div", { className: 'mfa-recovery-view__actions', children: [jsxRuntime.jsx(Input.Input, { id: 'mfa-recovery-input', "data-testid": 'mfa-recovery-input', label: t('dyn_mfa.recovery_view.input_label'), onChange: handleCodeChanged, value: code }), jsxRuntime.jsx(Button.Button, { expanded: true, buttonVariant: 'brand-primary', disabled: isLoading || !isValidMfaRecoveryCode.isValidMfaRecoveryCode(code), onClick: handleRecovery, dataTestId: 'mfa-recovery-submit', children: jsxRuntime.jsx(Typography.Typography, { children: t('dyn_mfa.recovery_view.button_label') }) })] }), supportEmail && (jsxRuntime.jsxs("div", { className: 'mfa-recovery-view__get-help', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: t('dyn_mfa.recovery_view.get_help.description') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'link', children: jsxRuntime.jsx("a", { href: `mailto:${supportEmail}`, children: t('dyn_mfa.recovery_view.get_help.button_label') }) })] }))] })] }));
 };
 
 exports.MfaRecoveryView = MfaRecoveryView;