@dynamic-labs/sdk-react-core 2.1.0-alpha.15 → 2.1.0-alpha.16

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

@@ -1,4 +1,4 @@
-export { AUTH_TOKEN, AUTH_MIN_TOKEN, AUTH_ONBOARDING_TOKEN, AUTH_USER, LAST_USED_WALLET, NETWORKS_STORAGE_KEY, NONCE_STORAGE_KEY, PRIMARY_WALLET_ID, THEME, WALLET_PICKER_SEARCH_KEY, AUTH_MODE, PHANTOM_SIGNATURE_STATE, } from './localStorage';
+export { AUTH_TOKEN, AUTH_MIN_TOKEN, AUTH_ONBOARDING_TOKEN, STORE_STORAGE_KEY, LAST_USED_WALLET, NETWORKS_STORAGE_KEY, NONCE_STORAGE_KEY, PRIMARY_WALLET_ID, THEME, WALLET_PICKER_SEARCH_KEY, AUTH_MODE, PHANTOM_SIGNATURE_STATE, } from './localStorage';
 export { BASE_LIGHT_1, BASE_LIGHT_2, BASE_LIGHT_3, BASE_LIGHT_4, BASE_LIGHT_5, BASE_DARK_5, TEXT_LIGHT_PRIMARY, TEXT_LIGHT_SECONDARY, TEXT_LIGHT_TERTIARY, TEXT_LIGHT_LINK, CONNECTION_LIGHT_GREEN, CONNECTION_LIGHT_ORANGE, ERROR_LIGHT_1, ERROR_LIGHT_2, OVERLAY_LIGHT, HOVER_LIGHT, LOADING_ANIMATION_GRADIENT_LIGHT, BASE_DARK_1, BASE_DARK_2, BASE_DARK_3, BASE_DARK_4, DYNAMIC_CONNECT_BUTTON_BACKGROUND, DYNAMIC_CONNECT_BUTTON_BORDER, DYNAMIC_CONNECT_BUTTON_COLOR, TEXT_DARK_PRIMARY, TEXT_DARK_SECONDARY, TEXT_DARK_TERTIARY, TEXT_DARK_LINK, BRAND_HOVER, BRAND_PRIMARY, BRAND_SECONDARY, CONNECTION_DARK_GREEN, CONNECTION_DARK_ORANGE, ERROR_DARK_1, ERROR_DARK_2, OVERLAY_DARK, HOVER_DARK, LOADING_ANIMATION_GRADIENT_DARK, SHADOW_DOWN_1, SHADOW_DOWN_2, SHADOW_DOWN_3, SHADOW_UP_1, BRAND_HOVER_COLOR, BRAND_PRIMARY_COLOR, BRAND_SECONDARY_COLOR, } from './colors';
 export { BORDER_SQUARE, BORDER_ROUNDED, BORDER_RADIUS } from './theme';
 export { TITLE, BODY_NORMAL, BODY_SMALL, BODY_MINI, BUTTON_PRIMARY, BUTTON_SECONDARY, NUMBERS_BIG, NUMBERS_MEDIUM, } from './typography';

package/src/lib/utils/constants/localStorage.cjs

@@ -6,7 +6,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const AUTH_TOKEN = 'dynamic_authentication_token';
 const AUTH_MIN_TOKEN = 'dynamic_min_authentication_token';
 const AUTH_ONBOARDING_TOKEN = 'dynamic_onboarding_authentication_token';
-const AUTH_USER = 'dynamic_authenticated_user';
 const LAST_USED_WALLET = 'dynamic_last_used_wallet';
 const NETWORKS_STORAGE_KEY = 'dynamic_networks';
 const NONCE_STORAGE_KEY = 'dynamic_nonce';
@@ -27,12 +26,12 @@ const PHONE_INPUT_DEFAULT_COUNTRY = 'dynamic_phone_input_default_country';
  * Used to identify the purpose of a signature after phantom redirects back to the app in mobile
  */
 const PHANTOM_SIGNATURE_STATE = 'phantom_verification_type';
+const STORE_STORAGE_KEY = 'dynamic_store';
 
 exports.AUTH_MIN_TOKEN = AUTH_MIN_TOKEN;
 exports.AUTH_MODE = AUTH_MODE;
 exports.AUTH_ONBOARDING_TOKEN = AUTH_ONBOARDING_TOKEN;
 exports.AUTH_TOKEN = AUTH_TOKEN;
-exports.AUTH_USER = AUTH_USER;
 exports.BRIDGE_ONBOARDING_COMPLETED = BRIDGE_ONBOARDING_COMPLETED;
 exports.CONNECTED_WALLETS_INFO = CONNECTED_WALLETS_INFO;
 exports.CONNECTED_WALLET_NAME_SERVICE = CONNECTED_WALLET_NAME_SERVICE;
@@ -47,5 +46,6 @@ exports.PHANTOM_SIGNATURE_STATE = PHANTOM_SIGNATURE_STATE;
 exports.PHONE_INPUT_DEFAULT_COUNTRY = PHONE_INPUT_DEFAULT_COUNTRY;
 exports.PRIMARY_WALLET_ID = PRIMARY_WALLET_ID;
 exports.PROJECT_SETTINGS_STORAGE_KEY = PROJECT_SETTINGS_STORAGE_KEY;
+exports.STORE_STORAGE_KEY = STORE_STORAGE_KEY;
 exports.WAGMI_LAST_SESSION_SETTINGS = WAGMI_LAST_SESSION_SETTINGS;
 exports.WALLET_PICKER_SEARCH_KEY = WALLET_PICKER_SEARCH_KEY;

package/src/lib/utils/constants/localStorage.d.ts

@@ -1,7 +1,6 @@
 export declare const AUTH_TOKEN = "dynamic_authentication_token";
 export declare const AUTH_MIN_TOKEN = "dynamic_min_authentication_token";
 export declare const AUTH_ONBOARDING_TOKEN = "dynamic_onboarding_authentication_token";
-export declare const AUTH_USER = "dynamic_authenticated_user";
 export declare const LAST_USED_WALLET = "dynamic_last_used_wallet";
 export declare const NETWORKS_STORAGE_KEY = "dynamic_networks";
 export declare const NONCE_STORAGE_KEY = "dynamic_nonce";
@@ -32,3 +31,4 @@ export type PhantomSignatureState = {
  * Used to identify the purpose of a signature after phantom redirects back to the app in mobile
  */
 export declare const PHANTOM_SIGNATURE_STATE = "phantom_verification_type";
+export declare const STORE_STORAGE_KEY = "dynamic_store";

package/src/lib/utils/constants/localStorage.js

@@ -2,7 +2,6 @@
 const AUTH_TOKEN = 'dynamic_authentication_token';
 const AUTH_MIN_TOKEN = 'dynamic_min_authentication_token';
 const AUTH_ONBOARDING_TOKEN = 'dynamic_onboarding_authentication_token';
-const AUTH_USER = 'dynamic_authenticated_user';
 const LAST_USED_WALLET = 'dynamic_last_used_wallet';
 const NETWORKS_STORAGE_KEY = 'dynamic_networks';
 const NONCE_STORAGE_KEY = 'dynamic_nonce';
@@ -23,5 +22,6 @@ const PHONE_INPUT_DEFAULT_COUNTRY = 'dynamic_phone_input_default_country';
  * Used to identify the purpose of a signature after phantom redirects back to the app in mobile
  */
 const PHANTOM_SIGNATURE_STATE = 'phantom_verification_type';
+const STORE_STORAGE_KEY = 'dynamic_store';
 
-export { AUTH_MIN_TOKEN, AUTH_MODE, AUTH_ONBOARDING_TOKEN, AUTH_TOKEN, AUTH_USER, BRIDGE_ONBOARDING_COMPLETED, CONNECTED_WALLETS_INFO, CONNECTED_WALLET_NAME_SERVICE, DYNAMIC_CONTEXT_LAST_SESSION_SETTINGS, EMBEDDED_WALLET_SECURE_BANNER, EMBEDDED_WALLET_SESSION_SETTINGS, LAST_USED_WALLET, NETWORKS_STORAGE_KEY, NEWTOWEB3_WALLET_EXTENSION_FLAG_KEY, NONCE_STORAGE_KEY, PHANTOM_SIGNATURE_STATE, PHONE_INPUT_DEFAULT_COUNTRY, PRIMARY_WALLET_ID, PROJECT_SETTINGS_STORAGE_KEY, WAGMI_LAST_SESSION_SETTINGS, WALLET_PICKER_SEARCH_KEY };
+export { AUTH_MIN_TOKEN, AUTH_MODE, AUTH_ONBOARDING_TOKEN, AUTH_TOKEN, BRIDGE_ONBOARDING_COMPLETED, CONNECTED_WALLETS_INFO, CONNECTED_WALLET_NAME_SERVICE, DYNAMIC_CONTEXT_LAST_SESSION_SETTINGS, EMBEDDED_WALLET_SECURE_BANNER, EMBEDDED_WALLET_SESSION_SETTINGS, LAST_USED_WALLET, NETWORKS_STORAGE_KEY, NEWTOWEB3_WALLET_EXTENSION_FLAG_KEY, NONCE_STORAGE_KEY, PHANTOM_SIGNATURE_STATE, PHONE_INPUT_DEFAULT_COUNTRY, PRIMARY_WALLET_ID, PROJECT_SETTINGS_STORAGE_KEY, STORE_STORAGE_KEY, WAGMI_LAST_SESSION_SETTINGS, WALLET_PICKER_SEARCH_KEY };

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

@@ -0,0 +1,15 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const downloadFile = (fileName, content) => {
+    const element = document.createElement('a');
+    const file = new Blob([content], { type: 'text/plain' });
+    element.href = URL.createObjectURL(file);
+    element.download = fileName;
+    document.body.appendChild(element);
+    element.click();
+};
+
+exports.downloadFile = downloadFile;

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

@@ -0,0 +1 @@
+export declare const downloadFile: (fileName: string, content: string) => void;

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

@@ -0,0 +1,11 @@
+'use client'
+const downloadFile = (fileName, content) => {
+    const element = document.createElement('a');
+    const file = new Blob([content], { type: 'text/plain' });
+    element.href = URL.createObjectURL(file);
+    element.download = fileName;
+    document.body.appendChild(element);
+    element.click();
+};
+
+export { downloadFile };

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

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

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

@@ -74,3 +74,4 @@ export * from './hasEmbeddedWallet';
 export * from './getEmbeddedWalletAuthHandler';
 export * from './getEmbeddedWalletSessionExpiration';
 export * from './serializeWalletConnectors';
+export * from './downloadFile';

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

@@ -168,7 +168,8 @@ const useAuthLayoutChecks = () => {
             view.type === 'farcaster-connect-view' ||
             view.type === 'merge-user-accounts' ||
             view.type === 'merge-user-accounts-conflicts' ||
-            view.type === 'mfa-verification');
+            view.type === 'mfa-verification' ||
+            view.type === 'mfa-display-backup-codes');
     const showCloseButton = view.type !== 'login-with-email-or-wallet-full-wallet-list' &&
         view.type !== 'login-with-email-verification' &&
         view.type !== 'login-with-sms-verification' &&
@@ -178,7 +179,8 @@ const useAuthLayoutChecks = () => {
         view.type !== 'passkey-recovery-bundle' &&
         view.type !== 'rename-passkey' &&
         view.type !== 'qr-code' &&
-        view.type !== 'mfa-verification';
+        view.type !== 'mfa-verification' &&
+        view.type !== 'mfa-display-backup-codes';
     const showBackButton = view.type === 'pending-signature' ||
         view.type === 'no-qr-not-installed' ||
         view.type === 'wallet-connect-mobile-wallets-list' ||

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

@@ -164,7 +164,8 @@ const useAuthLayoutChecks = () => {
             view.type === 'farcaster-connect-view' ||
             view.type === 'merge-user-accounts' ||
             view.type === 'merge-user-accounts-conflicts' ||
-            view.type === 'mfa-verification');
+            view.type === 'mfa-verification' ||
+            view.type === 'mfa-display-backup-codes');
     const showCloseButton = view.type !== 'login-with-email-or-wallet-full-wallet-list' &&
         view.type !== 'login-with-email-verification' &&
         view.type !== 'login-with-sms-verification' &&
@@ -174,7 +175,8 @@ const useAuthLayoutChecks = () => {
         view.type !== 'passkey-recovery-bundle' &&
         view.type !== 'rename-passkey' &&
         view.type !== 'qr-code' &&
-        view.type !== 'mfa-verification';
+        view.type !== 'mfa-verification' &&
+        view.type !== 'mfa-display-backup-codes';
     const showBackButton = view.type === 'pending-signature' ||
         view.type === 'no-qr-not-installed' ||
         view.type === 'wallet-connect-mobile-wallets-list' ||

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

@@ -113,6 +113,10 @@ const useDynamicLayoutData = ({ view, authMode, }) => {
             copykey: 'dyn_mfa.choose_device_view.title',
             heading: t('dyn_mfa.choose_device_view.title'),
         },
+        'mfa-display-backup-codes': {
+            copykey: 'dyn_mfa.display_backup_codes_view.title',
+            heading: t('dyn_mfa.display_backup_codes_view.title'),
+        },
         'mfa-secure-device': {
             copykey: 'dyn_mfa.secure_device_view.title',
             heading: t('dyn_mfa.secure_device_view.title'),

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

@@ -109,6 +109,10 @@ const useDynamicLayoutData = ({ view, authMode, }) => {
             copykey: 'dyn_mfa.choose_device_view.title',
             heading: t('dyn_mfa.choose_device_view.title'),
         },
+        'mfa-display-backup-codes': {
+            copykey: 'dyn_mfa.display_backup_codes_view.title',
+            heading: t('dyn_mfa.display_backup_codes_view.title'),
+        },
         'mfa-secure-device': {
             copykey: 'dyn_mfa.secure_device_view.title',
             heading: t('dyn_mfa.secure_device_view.title'),

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

@@ -20,8 +20,12 @@ var localStorage = require('../../../shared/utils/classes/storage/localStorage.c
 require('@dynamic-labs/utils');
 require('../../../shared/consts/index.cjs');
 var handleUnlinkHelper = require('../../functions/handleUnlinkHelper/handleUnlinkHelper.cjs');
+var userActions = require('../../../store/actions/userActions/userActions.cjs');
+require('zustand');
+require('zustand/middleware');
+require('zustand/react/shallow');
 
-const useHandleUnlinkWallet = ({ verifiedCredentials, environmentId, primaryWalletId, secondaryWallets, setUser, }) => {
+const useHandleUnlinkWallet = ({ verifiedCredentials, environmentId, primaryWalletId, secondaryWallets, }) => {
     const { removedWalletsIds } = UserWalletsContext.useInternalUserWallets();
     const callback = React.useCallback((walletId) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         var _a;
@@ -43,7 +47,7 @@ const useHandleUnlinkWallet = ({ verifiedCredentials, environmentId, primaryWall
             walletId,
         });
         if (newUser) {
-            setUser(newUser);
+            userActions.setUser(newUser);
         }
         const wallet = secondaryWallets.find((w) => w.id === walletId);
         const numberOfLinkedWallets = verifiedCredentials.filter((account) => account.walletName === ((wallet === null || wallet === void 0 ? void 0 : wallet.connector.key) || '')).length;
@@ -56,7 +60,6 @@ const useHandleUnlinkWallet = ({ verifiedCredentials, environmentId, primaryWall
         primaryWalletId,
         environmentId,
         secondaryWallets,
-        setUser,
         verifiedCredentials,
         removedWalletsIds,
     ]);

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

@@ -1,13 +1,10 @@
-import { Dispatch, SetStateAction } from 'react';
 import { JwtVerifiedCredential } from '@dynamic-labs/sdk-api-core';
-import { UserProfile } from '@dynamic-labs/types';
 import { Wallet } from '../../../shared';
 type UseHandleUnlinkProps = {
     environmentId: string;
     primaryWalletId: string | undefined;
     secondaryWallets: Wallet[];
-    setUser: Dispatch<SetStateAction<UserProfile | undefined>>;
     verifiedCredentials: JwtVerifiedCredential[];
 };
-export declare const useHandleUnlinkWallet: ({ verifiedCredentials, environmentId, primaryWalletId, secondaryWallets, setUser, }: UseHandleUnlinkProps) => (walletId: string) => Promise<void>;
+export declare const useHandleUnlinkWallet: ({ verifiedCredentials, environmentId, primaryWalletId, secondaryWallets, }: UseHandleUnlinkProps) => (walletId: string) => Promise<void>;
 export {};

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

@@ -16,8 +16,12 @@ import { LocalStorage } from '../../../shared/utils/classes/storage/localStorage
 import '@dynamic-labs/utils';
 import '../../../shared/consts/index.js';
 import { handleUnlinkHelper } from '../../functions/handleUnlinkHelper/handleUnlinkHelper.js';
+import { setUser } from '../../../store/actions/userActions/userActions.js';
+import 'zustand';
+import 'zustand/middleware';
+import 'zustand/react/shallow';
 
-const useHandleUnlinkWallet = ({ verifiedCredentials, environmentId, primaryWalletId, secondaryWallets, setUser, }) => {
+const useHandleUnlinkWallet = ({ verifiedCredentials, environmentId, primaryWalletId, secondaryWallets, }) => {
     const { removedWalletsIds } = useInternalUserWallets();
     const callback = useCallback((walletId) => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
@@ -52,7 +56,6 @@ const useHandleUnlinkWallet = ({ verifiedCredentials, environmentId, primaryWall
         primaryWalletId,
         environmentId,
         secondaryWallets,
-        setUser,
         verifiedCredentials,
         removedWalletsIds,
     ]);

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

@@ -28,8 +28,12 @@ require('../../../config/ApiEndpoint.cjs');
 require('../../../locale/locale.cjs');
 var wallets = require('../../../data/api/wallets/wallets.cjs');
 var updateJWTAndCreateUserProfile = require('../../functions/updateJWTAndCreateUserProfile/updateJWTAndCreateUserProfile.cjs');
+var userActions = require('../../../store/actions/userActions/userActions.cjs');
+require('zustand');
+require('zustand/middleware');
+require('zustand/react/shallow');
 
-const usePrimaryWalletId = ({ minAuthToken, environmentId, setUser, }) => {
+const usePrimaryWalletId = ({ minAuthToken, environmentId }) => {
     const [primaryWalletId, setPrimaryWalletIdState, clearPrimaryWalletId] = useLocalStorage.useLocalStorage(localStorage.PRIMARY_WALLET_ID, undefined, primaryWalletIdValidator.primaryWalletIdValidator);
     const setPrimaryWalletId = React.useCallback((walletId) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         setPrimaryWalletIdState(walletId);
@@ -37,7 +41,7 @@ const usePrimaryWalletId = ({ minAuthToken, environmentId, setUser, }) => {
             const response = yield wallets.storeSelectedWallet({ environmentId, walletId });
             // only update userProfile, authToken, and minAuthToken when response is valid from storeSelectedWallet
             if (response) {
-                setUser(updateJWTAndCreateUserProfile.updateJWTAndCreateUserProfile(response.jwt, response.minifiedJwt));
+                userActions.setUser(updateJWTAndCreateUserProfile.updateJWTAndCreateUserProfile(response.jwt, response.minifiedJwt));
             }
         }
     }), [setPrimaryWalletIdState]);

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

@@ -1,11 +1,8 @@
-import { Dispatch, SetStateAction } from 'react';
-import { UserProfile } from '@dynamic-labs/types';
 type Props = {
-    setUser: Dispatch<SetStateAction<UserProfile | undefined>>;
     environmentId: string;
     minAuthToken: string | undefined;
 };
-export declare const usePrimaryWalletId: ({ minAuthToken, environmentId, setUser, }: Props) => {
+export declare const usePrimaryWalletId: ({ minAuthToken, environmentId }: Props) => {
     clearPrimaryWalletId: () => void;
     primaryWalletId: string | undefined;
     setPrimaryWalletId: (walletId: string) => Promise<void>;

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

@@ -24,8 +24,12 @@ import '../../../config/ApiEndpoint.js';
 import '../../../locale/locale.js';
 import { storeSelectedWallet } from '../../../data/api/wallets/wallets.js';
 import { updateJWTAndCreateUserProfile } from '../../functions/updateJWTAndCreateUserProfile/updateJWTAndCreateUserProfile.js';
+import { setUser } from '../../../store/actions/userActions/userActions.js';
+import 'zustand';
+import 'zustand/middleware';
+import 'zustand/react/shallow';
 
-const usePrimaryWalletId = ({ minAuthToken, environmentId, setUser, }) => {
+const usePrimaryWalletId = ({ minAuthToken, environmentId }) => {
     const [primaryWalletId, setPrimaryWalletIdState, clearPrimaryWalletId] = useLocalStorage(PRIMARY_WALLET_ID, undefined, primaryWalletIdValidator);
     const setPrimaryWalletId = useCallback((walletId) => __awaiter(void 0, void 0, void 0, function* () {
         setPrimaryWalletIdState(walletId);

package/src/lib/views/CreatePasswordView/SavePasswordStep/SavePasswordStep.cjs

@@ -33,6 +33,7 @@ require('viem');
 require('viem/chains');
 require('../../../config/ApiEndpoint.cjs');
 require('../../../locale/locale.cjs');
+var downloadFile = require('../../../utils/functions/downloadFile/downloadFile.cjs');
 require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../../context/UserWalletsContext/UserWalletsContext.cjs');
@@ -99,22 +100,16 @@ const SavePasswordStep = ({ password, error, isLoading, onSave, onBack, onClose,
         e.preventDefault();
         onSave();
     });
-    const handleDownloadFile = (e) => {
-        e.preventDefault();
-        const element = document.createElement('a');
-        const file = new Blob([password], { type: 'text/plain' });
-        element.href = URL.createObjectURL(file);
-        element.download = 'dynamic-wallet-recovery.txt';
-        document.body.appendChild(element);
-        element.click();
-    };
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, trailing: closeButton, children: jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', copykey: 'dyn_save_password.title', children: t('dyn_save_password.title') }) }), jsxRuntime.jsx("div", { className: 'save-password-view', children: jsxRuntime.jsxs("form", { className: 'save-password-view__body', "data-testid": 'save-password-form', onSubmit: handleSavePassword, children: [jsxRuntime.jsx("div", { className: 'save-password-view__body__icon', children: jsxRuntime.jsx(savePasswordHero.ReactComponent, {}) }), jsxRuntime.jsx("div", { className: 'save-password-view__body__icon', children: jsxRuntime.jsx(Badge.Badge, { text: t('dyn_save_password.badge_text'), className: 'save-password-view__body__badge', copykey: 'dyn_save_password.badge_text' }) }), jsxRuntime.jsxs("div", { className: 'save-password-view__body__description', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_save_password.description', children: t('dyn_save_password.description') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', copykey: 'dyn_save_password.description', children: t('dyn_save_password.warning') })] }), error && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: error }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Input.Input, { id: 'password', placeholder: t('dyn_save_password.password_input.placeholder'), type: inputType, suffix: inputSuffix, disabled: true, label: t('dyn_save_password.password_input.label'), value: password, autoFocus: true, copykey: 'dyn_save_password.password_input' }) }), jsxRuntime.jsxs("div", { className: 'save-password-view__actions', children: [jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'save-password-copy', buttonPadding: 'small', buttonVariant: 'primary', onClick: (e) => {
                                         e.preventDefault();
                                         helpers.copyToClipboard(password);
                                         setIsCopied(true);
                                     }, startSlot: jsxRuntime.jsx(copy.ReactComponent, {}), expanded: true, copykey: 'dyn_save_password.copy_button', children: isCopied
                                         ? t('dyn_save_password.copy_button.copied')
-                                        : t('dyn_save_password.copy_button.copy') }), jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'save-password-download', buttonPadding: 'small', buttonVariant: 'primary', onClick: handleDownloadFile, startSlot: jsxRuntime.jsx(download.ReactComponent, {}), expanded: true, copykey: 'dyn_save_password.download_button', children: t('dyn_save_password.download_button') })] }), jsxRuntime.jsx("div", { className: 'save-password-view__body__confirm-card', children: jsxRuntime.jsxs("button", { className: 'save-password-view__body__card__acknowledgement', onClick: (e) => {
+                                        : t('dyn_save_password.copy_button.copy') }), jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'save-password-download', buttonPadding: 'small', buttonVariant: 'primary', onClick: (e) => {
+                                        e.preventDefault();
+                                        downloadFile.downloadFile('wallet-recovery.txt', password);
+                                    }, startSlot: jsxRuntime.jsx(download.ReactComponent, {}), expanded: true, copykey: 'dyn_save_password.download_button', children: t('dyn_save_password.download_button') })] }), jsxRuntime.jsx("div", { className: 'save-password-view__body__confirm-card', children: jsxRuntime.jsxs("button", { className: 'save-password-view__body__card__acknowledgement', onClick: (e) => {
                                     e.stopPropagation();
                                     setAcknowledgement(!acknowledgement);
                                 }, type: 'button', children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Checkbox.Checkbox, { checked: acknowledgement, onChange: (e) => {

package/src/lib/views/CreatePasswordView/SavePasswordStep/SavePasswordStep.js

@@ -29,6 +29,7 @@ import 'viem';
 import 'viem/chains';
 import '../../../config/ApiEndpoint.js';
 import '../../../locale/locale.js';
+import { downloadFile } from '../../../utils/functions/downloadFile/downloadFile.js';
 import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../../context/UserWalletsContext/UserWalletsContext.js';
@@ -95,22 +96,16 @@ const SavePasswordStep = ({ password, error, isLoading, onSave, onBack, onClose,
         e.preventDefault();
         onSave();
     });
-    const handleDownloadFile = (e) => {
-        e.preventDefault();
-        const element = document.createElement('a');
-        const file = new Blob([password], { type: 'text/plain' });
-        element.href = URL.createObjectURL(file);
-        element.download = 'dynamic-wallet-recovery.txt';
-        document.body.appendChild(element);
-        element.click();
-    };
     return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, trailing: closeButton, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', copykey: 'dyn_save_password.title', children: t('dyn_save_password.title') }) }), jsx("div", { className: 'save-password-view', children: jsxs("form", { className: 'save-password-view__body', "data-testid": 'save-password-form', onSubmit: handleSavePassword, children: [jsx("div", { className: 'save-password-view__body__icon', children: jsx(SvgSavePasswordHero, {}) }), jsx("div", { className: 'save-password-view__body__icon', children: jsx(Badge, { text: t('dyn_save_password.badge_text'), className: 'save-password-view__body__badge', copykey: 'dyn_save_password.badge_text' }) }), jsxs("div", { className: 'save-password-view__body__description', children: [jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_save_password.description', children: t('dyn_save_password.description') }), jsx(Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', copykey: 'dyn_save_password.description', children: t('dyn_save_password.warning') })] }), error && jsx(ErrorContainer, { children: error }), jsx("div", { children: jsx(Input, { id: 'password', placeholder: t('dyn_save_password.password_input.placeholder'), type: inputType, suffix: inputSuffix, disabled: true, label: t('dyn_save_password.password_input.label'), value: password, autoFocus: true, copykey: 'dyn_save_password.password_input' }) }), jsxs("div", { className: 'save-password-view__actions', children: [jsx(TypographyButton, { dataTestId: 'save-password-copy', buttonPadding: 'small', buttonVariant: 'primary', onClick: (e) => {
                                         e.preventDefault();
                                         copyToClipboard(password);
                                         setIsCopied(true);
                                     }, startSlot: jsx(SvgCopy, {}), expanded: true, copykey: 'dyn_save_password.copy_button', children: isCopied
                                         ? t('dyn_save_password.copy_button.copied')
-                                        : t('dyn_save_password.copy_button.copy') }), jsx(TypographyButton, { dataTestId: 'save-password-download', buttonPadding: 'small', buttonVariant: 'primary', onClick: handleDownloadFile, startSlot: jsx(SvgDownload, {}), expanded: true, copykey: 'dyn_save_password.download_button', children: t('dyn_save_password.download_button') })] }), jsx("div", { className: 'save-password-view__body__confirm-card', children: jsxs("button", { className: 'save-password-view__body__card__acknowledgement', onClick: (e) => {
+                                        : t('dyn_save_password.copy_button.copy') }), jsx(TypographyButton, { dataTestId: 'save-password-download', buttonPadding: 'small', buttonVariant: 'primary', onClick: (e) => {
+                                        e.preventDefault();
+                                        downloadFile('wallet-recovery.txt', password);
+                                    }, startSlot: jsx(SvgDownload, {}), expanded: true, copykey: 'dyn_save_password.download_button', children: t('dyn_save_password.download_button') })] }), jsx("div", { className: 'save-password-view__body__confirm-card', children: jsxs("button", { className: 'save-password-view__body__card__acknowledgement', onClick: (e) => {
                                     e.stopPropagation();
                                     setAcknowledgement(!acknowledgement);
                                 }, type: 'button', children: [jsx("div", { children: jsx(Checkbox, { checked: acknowledgement, onChange: (e) => {

package/src/lib/views/MfaDisplayBackupCodesView/MfaDisplayBackupCodesView.cjs

@@ -0,0 +1,111 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+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');
+require('../../context/ViewContext/ViewContext.cjs');
+var copy = require('../../shared/assets/copy.cjs');
+var download = require('../../shared/assets/download.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../utils/constants/colors.cjs');
+require('../../utils/constants/values.cjs');
+require('../../shared/utils/classes/storage/localStorage.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');
+require('react-international-phone');
+require('viem');
+require('viem/chains');
+require('../../config/ApiEndpoint.cjs');
+require('../../locale/locale.cjs');
+var downloadFile = require('../../utils/functions/downloadFile/downloadFile.cjs');
+require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../context/VerificationContext/VerificationContext.cjs');
+require('react-dom');
+require('../../context/WalletContext/WalletContext.cjs');
+var usePromise = require('../../utils/hooks/usePromise/usePromise.cjs');
+require('../../context/ThemeContext/ThemeContext.cjs');
+require('@dynamic-labs/types');
+require('../../context/LoadingContext/LoadingContext.cjs');
+require('yup');
+require('../../context/MockContext/MockContext.cjs');
+require('../../context/FieldsStateContext/FieldsStateContext.cjs');
+require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('@dynamic-labs/rpc-providers');
+var Typography = require('../../components/Typography/Typography.cjs');
+require('../../context/FooterAnimationContext/index.cjs');
+require('../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
+require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
+require('../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('react-focus-lock');
+var Icon = require('../../components/Icon/Icon.cjs');
+require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+require('../../components/IconButton/IconButton.cjs');
+require('../../components/MenuList/Dropdown/Dropdown.cjs');
+require('formik');
+var TypographyButton = require('../../components/TypographyButton/TypographyButton.cjs');
+require('../TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
+var spinner = require('../../components/Spinner/spinner.cjs');
+var Alert = require('../../components/Alert/Alert.cjs');
+require('../../components/Input/Input.cjs');
+require('../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../context/PasskeyContext/PasskeyContext.cjs');
+require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+var useMfa = require('../../utils/hooks/useMfa/useMfa.cjs');
+var Checkbox = require('../../components/Checkbox/Checkbox.cjs');
+var CopyButton = require('../../components/CopyButton/CopyButton.cjs');
+require('../../components/InlineWidget/InlineWidget.cjs');
+require('../../components/IsBrowser/IsBrowser.cjs');
+require('../../components/Popper/Popper/Popper.cjs');
+require('../../components/Popper/PopperContext/PopperContext.cjs');
+require('qrcode');
+require('../WalletList/WalletList.cjs');
+require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('@hcaptcha/react-hcaptcha');
+require('../LoginView/sections/PhoneNumberSignInSection/PhoneNumberSignInSection.cjs');
+
+const MfaDisplayBackupCodesView = () => {
+    const { setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
+    const [acknowledgement, setAcknowledgement] = React.useState(false);
+    const { t } = reactI18next.useTranslation();
+    const { getRecoveryCodes } = useMfa.useMfa();
+    const { data: codes, isLoading } = usePromise.usePromise(() => getRecoveryCodes());
+    const codesAsString = (codes || []).join('\n');
+    return (jsxRuntime.jsxs("div", { className: 'mfa-display-backup-codes-view__body', "data-testid": 'mfa-display-backup-codes-view', children: [jsxRuntime.jsx(Typography.Typography, { className: 'mfa-display-backup-codes-view__copy', variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_mfa.display_backup_codes_view.body') }), jsxRuntime.jsx(Alert.Alert, { variant: 'warning', copykey: 'dyn_mfa.display_backup_codes_view.warning', className: 'mfa-display-backup-codes-view__warning', children: t('dyn_mfa.display_backup_codes_view.warning') }), isLoading ? (jsxRuntime.jsx(spinner.Spinner, { className: 'mfa-display-backup-codes-view__loading-spinner' })) : (jsxRuntime.jsxs("div", { className: 'mfa-display-backup-codes-view__codes', children: [codes === null || codes === void 0 ? void 0 : codes.map((code, index) => (jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'mfa-display-backup-codes-view__code', children: code }, index))), jsxRuntime.jsxs("div", { className: 'mfa-display-backup-codes-view__actions', children: [jsxRuntime.jsx(CopyButton.CopyButton, { variant: 'button', textToCopy: codesAsString, copykey: 'dyn_mfa.display_backup_codes_view.copy_all', startSlot: 
+                                // eslint-disable-next-line react/jsx-wrap-multilines
+                                jsxRuntime.jsx(Icon.Icon, { size: 'mini', color: 'text-tertiary', children: jsxRuntime.jsx(copy.ReactComponent, {}) }), children: t('dyn_mfa.display_backup_codes_view.copy_all') }), jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'download-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: (e) => {
+                                    e.preventDefault();
+                                    downloadFile.downloadFile('mfa-backup-codes.txt', codesAsString);
+                                }, startSlot: jsxRuntime.jsx(download.ReactComponent, {}), expanded: true, copykey: 'dyn_mfa.display_backup_codes_view.download', children: t('dyn_mfa.display_backup_codes_view.download') })] })] })), jsxRuntime.jsxs("div", { className: 'mfa-display-backup-codes-view__complete', children: [jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonClassName: 'mfa-display-backup-codes-view__acknowledgement', dataTestId: 'ack-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: () => setAcknowledgement(!acknowledgement), startSlot: 
+                        // eslint-disable-next-line react/jsx-wrap-multilines
+                        jsxRuntime.jsx(Checkbox.Checkbox, { checked: acknowledgement, onChange: () => {
+                                setAcknowledgement(!acknowledgement);
+                            }, className: 'mfa-display-backup-codes-view__acknowledgement__checkbox' }), expanded: true, typographyProps: {
+                            color: 'secondary',
+                        }, copykey: 'dyn_mfa.display_backup_codes_view.checkbox', children: t('dyn_mfa.display_backup_codes_view.checkbox') }), jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'complete-button', buttonPadding: 'large', buttonVariant: 'brand-primary', typographyProps: {
+                            color: 'inherit',
+                        }, disabled: !acknowledgement, expanded: true, copykey: 'dyn_mfa.display_backup_codes_view.complete', onClick: () => setShowAuthFlow(false), children: t('dyn_mfa.display_backup_codes_view.complete') })] })] }));
+};
+
+exports.MfaDisplayBackupCodesView = MfaDisplayBackupCodesView;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const MfaDisplayBackupCodesView: () => JSX.Element;

package/src/lib/views/MfaDisplayBackupCodesView/MfaDisplayBackupCodesView.js

@@ -0,0 +1,107 @@
+'use client'
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+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';
+import '../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgCopy } from '../../shared/assets/copy.js';
+import { ReactComponent as SvgDownload } from '../../shared/assets/download.js';
+import '@dynamic-labs/wallet-book';
+import '../../utils/constants/colors.js';
+import '../../utils/constants/values.js';
+import '../../shared/utils/classes/storage/localStorage.js';
+import '../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../context/ErrorContext/ErrorContext.js';
+import '@dynamic-labs/multi-wallet';
+import 'react-international-phone';
+import 'viem';
+import 'viem/chains';
+import '../../config/ApiEndpoint.js';
+import '../../locale/locale.js';
+import { downloadFile } from '../../utils/functions/downloadFile/downloadFile.js';
+import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../context/VerificationContext/VerificationContext.js';
+import 'react-dom';
+import '../../context/WalletContext/WalletContext.js';
+import { usePromise } from '../../utils/hooks/usePromise/usePromise.js';
+import '../../context/ThemeContext/ThemeContext.js';
+import '@dynamic-labs/types';
+import '../../context/LoadingContext/LoadingContext.js';
+import 'yup';
+import '../../context/MockContext/MockContext.js';
+import '../../context/FieldsStateContext/FieldsStateContext.js';
+import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '@dynamic-labs/rpc-providers';
+import { Typography } from '../../components/Typography/Typography.js';
+import '../../context/FooterAnimationContext/index.js';
+import '../../components/ShadowDOM/ShadowDOM.js';
+import '../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
+import '../../context/SocialRedirectContext/SocialRedirectContext.js';
+import '../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import 'react-focus-lock';
+import { Icon } from '../../components/Icon/Icon.js';
+import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../../components/IconButton/IconButton.js';
+import '../../components/MenuList/Dropdown/Dropdown.js';
+import 'formik';
+import { TypographyButton } from '../../components/TypographyButton/TypographyButton.js';
+import '../TransactionConfirmationView/helpers/transactionErrorMessage.js';
+import { Spinner } from '../../components/Spinner/spinner.js';
+import { Alert } from '../../components/Alert/Alert.js';
+import '../../components/Input/Input.js';
+import '../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../../context/PasskeyContext/PasskeyContext.js';
+import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import { useMfa } from '../../utils/hooks/useMfa/useMfa.js';
+import { Checkbox } from '../../components/Checkbox/Checkbox.js';
+import { CopyButton } from '../../components/CopyButton/CopyButton.js';
+import '../../components/InlineWidget/InlineWidget.js';
+import '../../components/IsBrowser/IsBrowser.js';
+import '../../components/Popper/Popper/Popper.js';
+import '../../components/Popper/PopperContext/PopperContext.js';
+import 'qrcode';
+import '../WalletList/WalletList.js';
+import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '@hcaptcha/react-hcaptcha';
+import '../LoginView/sections/PhoneNumberSignInSection/PhoneNumberSignInSection.js';
+
+const MfaDisplayBackupCodesView = () => {
+    const { setShowAuthFlow } = useInternalDynamicContext();
+    const [acknowledgement, setAcknowledgement] = useState(false);
+    const { t } = useTranslation();
+    const { getRecoveryCodes } = useMfa();
+    const { data: codes, isLoading } = usePromise(() => getRecoveryCodes());
+    const codesAsString = (codes || []).join('\n');
+    return (jsxs("div", { className: 'mfa-display-backup-codes-view__body', "data-testid": 'mfa-display-backup-codes-view', children: [jsx(Typography, { className: 'mfa-display-backup-codes-view__copy', variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_mfa.display_backup_codes_view.body') }), jsx(Alert, { variant: 'warning', copykey: 'dyn_mfa.display_backup_codes_view.warning', className: 'mfa-display-backup-codes-view__warning', children: t('dyn_mfa.display_backup_codes_view.warning') }), isLoading ? (jsx(Spinner, { className: 'mfa-display-backup-codes-view__loading-spinner' })) : (jsxs("div", { className: 'mfa-display-backup-codes-view__codes', children: [codes === null || codes === void 0 ? void 0 : codes.map((code, index) => (jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'mfa-display-backup-codes-view__code', children: code }, index))), jsxs("div", { className: 'mfa-display-backup-codes-view__actions', children: [jsx(CopyButton, { variant: 'button', textToCopy: codesAsString, copykey: 'dyn_mfa.display_backup_codes_view.copy_all', startSlot: 
+                                // eslint-disable-next-line react/jsx-wrap-multilines
+                                jsx(Icon, { size: 'mini', color: 'text-tertiary', children: jsx(SvgCopy, {}) }), children: t('dyn_mfa.display_backup_codes_view.copy_all') }), jsx(TypographyButton, { dataTestId: 'download-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: (e) => {
+                                    e.preventDefault();
+                                    downloadFile('mfa-backup-codes.txt', codesAsString);
+                                }, startSlot: jsx(SvgDownload, {}), expanded: true, copykey: 'dyn_mfa.display_backup_codes_view.download', children: t('dyn_mfa.display_backup_codes_view.download') })] })] })), jsxs("div", { className: 'mfa-display-backup-codes-view__complete', children: [jsx(TypographyButton, { buttonClassName: 'mfa-display-backup-codes-view__acknowledgement', dataTestId: 'ack-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: () => setAcknowledgement(!acknowledgement), startSlot: 
+                        // eslint-disable-next-line react/jsx-wrap-multilines
+                        jsx(Checkbox, { checked: acknowledgement, onChange: () => {
+                                setAcknowledgement(!acknowledgement);
+                            }, className: 'mfa-display-backup-codes-view__acknowledgement__checkbox' }), expanded: true, typographyProps: {
+                            color: 'secondary',
+                        }, copykey: 'dyn_mfa.display_backup_codes_view.checkbox', children: t('dyn_mfa.display_backup_codes_view.checkbox') }), jsx(TypographyButton, { dataTestId: 'complete-button', buttonPadding: 'large', buttonVariant: 'brand-primary', typographyProps: {
+                            color: 'inherit',
+                        }, disabled: !acknowledgement, expanded: true, copykey: 'dyn_mfa.display_backup_codes_view.complete', onClick: () => setShowAuthFlow(false), children: t('dyn_mfa.display_backup_codes_view.complete') })] })] }));
+};
+
+export { MfaDisplayBackupCodesView };