@dynamic-labs/sdk-react-core 3.0.0-alpha.46 → 3.0.0-alpha.48

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

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var sdkApiCore = require('@dynamic-labs/sdk-api-core');
+var utils = require('@dynamic-labs/utils');
 require('@dynamic-labs/store');
 require('../../constants/colors.cjs');
 require('../../constants/values.cjs');
@@ -16,7 +17,6 @@ require('react');
 require('@dynamic-labs/wallet-book');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('../../../shared/utils/classes/storage/sessionStorage.cjs');
-require('@dynamic-labs/utils');
 require('../../../shared/consts/index.cjs');
 var projectSettingsActions = require('../../../store/actions/projectSettingsActions/projectSettingsActions.cjs');
 require('../../../../../_virtual/_tslib.cjs');
@@ -91,6 +91,13 @@ require('../../../context/ReinitializeContext/ReinitializeContextProvider.cjs');
 
 const isCookieEnabled = () => {
     var _a, _b, _c, _d;
+    /**
+     * There is no cookie on native mobile applications
+     * so this feature must be disabled for native mobile
+     */
+    if (utils.PlatformService.isNativeMobile) {
+        return false;
+    }
     const securitySettings = (_b = (_a = projectSettingsActions.getProjectSettings()) === null || _a === void 0 ? void 0 : _a.settings) === null || _b === void 0 ? void 0 : _b.security;
     if (!securitySettings)
         return false;

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

@@ -1,5 +1,6 @@
 'use client'
 import { AuthStorageEnum } from '@dynamic-labs/sdk-api-core';
+import { PlatformService } from '@dynamic-labs/utils';
 import '@dynamic-labs/store';
 import '../../constants/colors.js';
 import '../../constants/values.js';
@@ -12,7 +13,6 @@ import 'react';
 import '@dynamic-labs/wallet-book';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import '../../../shared/utils/classes/storage/sessionStorage.js';
-import '@dynamic-labs/utils';
 import '../../../shared/consts/index.js';
 import { getProjectSettings } from '../../../store/actions/projectSettingsActions/projectSettingsActions.js';
 import '../../../../../_virtual/_tslib.js';
@@ -87,6 +87,13 @@ import '../../../context/ReinitializeContext/ReinitializeContextProvider.js';
 
 const isCookieEnabled = () => {
     var _a, _b, _c, _d;
+    /**
+     * There is no cookie on native mobile applications
+     * so this feature must be disabled for native mobile
+     */
+    if (PlatformService.isNativeMobile) {
+        return false;
+    }
     const securitySettings = (_b = (_a = getProjectSettings()) === null || _a === void 0 ? void 0 : _a.settings) === null || _b === void 0 ? void 0 : _b.security;
     if (!securitySettings)
         return false;

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

@@ -60,6 +60,6 @@ export { useSyncEmbeddedWalletFlow } from './useSyncEmbeddedWalletFlow';
 export { useSyncOnboardingFlow } from './useSyncOnboardingFlow';
 export { useExternalAuth } from './useExternalAuth';
 export { useRefreshUser } from './useRefreshUser';
-export { useSelectWalletOption } from './useSelectWalletOption';
+export { useWalletOptions } from './useWalletOptions';
 export { useResetCookieLocalStorage } from './useResetCookieLocalStorage';
 export { useSyncMfaFlow } from './useSyncMfaFlow';

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

@@ -17,6 +17,7 @@ require('../../constants/colors.cjs');
 require('../../constants/values.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('../../../shared/utils/classes/storage/sessionStorage.cjs');
+var hasPendingRequirements = require('../../../shared/utils/functions/hasPendingRequirements/hasPendingRequirements.cjs');
 require('../../../shared/consts/index.cjs');
 require('../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/multi-wallet');
@@ -109,7 +110,9 @@ const useExternalAuth = () => {
                 externalJwt,
             });
             setCallback('authSuccess');
-            setShowAuthFlow(false);
+            if (userProfile && !hasPendingRequirements.hasPendingRequirements(userProfile)) {
+                setShowAuthFlow(false);
+            }
             return userProfile;
         }
         catch (e) {

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

@@ -13,6 +13,7 @@ import '../../constants/colors.js';
 import '../../constants/values.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import '../../../shared/utils/classes/storage/sessionStorage.js';
+import { hasPendingRequirements } from '../../../shared/utils/functions/hasPendingRequirements/hasPendingRequirements.js';
 import '../../../shared/consts/index.js';
 import '../../../config/ApiEndpoint.js';
 import '@dynamic-labs/multi-wallet';
@@ -105,7 +106,9 @@ const useExternalAuth = () => {
                 externalJwt,
             });
             setCallback('authSuccess');
-            setShowAuthFlow(false);
+            if (userProfile && !hasPendingRequirements(userProfile)) {
+                setShowAuthFlow(false);
+            }
             return userProfile;
         }
         catch (e) {

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

@@ -112,12 +112,13 @@ const useMfa = () => {
             mfaDeviceId: deviceId,
         });
     });
-    const deleteUserDevice = (deviceId) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const deleteUserDevice = (deviceId, mfaAuthToken) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         if (!verifiedUser) {
             throw new Error(errors.USER_NOT_LOGGED_IN);
         }
         yield mfa.deleteMfaDevice({
             environmentId,
+            mfaAuthToken,
             mfaDeviceId: deviceId,
         });
     });

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

@@ -7,7 +7,7 @@ export declare const useMfa: () => {
     }>;
     readonly authDevice: (code: string, type?: MFADeviceType, deviceId?: string) => Promise<boolean>;
     readonly authRecoveryCode: (code: string) => Promise<boolean>;
-    readonly deleteUserDevice: (deviceId: string) => Promise<void>;
+    readonly deleteUserDevice: (deviceId: string, mfaAuthToken: string) => Promise<void>;
     readonly getRecoveryCodes: (generateNewCodes?: boolean) => Promise<string[]>;
     readonly getUserDevices: () => Promise<MFADevice[]>;
     readonly updateUserDevice: (deviceId: string) => Promise<void>;

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

@@ -108,12 +108,13 @@ const useMfa = () => {
             mfaDeviceId: deviceId,
         });
     });
-    const deleteUserDevice = (deviceId) => __awaiter(void 0, void 0, void 0, function* () {
+    const deleteUserDevice = (deviceId, mfaAuthToken) => __awaiter(void 0, void 0, void 0, function* () {
         if (!verifiedUser) {
             throw new Error(USER_NOT_LOGGED_IN);
         }
         yield deleteMfaDevice({
             environmentId,
+            mfaAuthToken,
             mfaDeviceId: deviceId,
         });
     });

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

@@ -228,29 +228,23 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
             oauthLoginUrl.searchParams.set('code_challenge_method', 'S256');
         }
         const isMobile = utils.isMobile();
-        const effectiveRedirectUrl = redirectUrl !== null && redirectUrl !== void 0 ? redirectUrl : defaultRedirectUrl;
         try {
             const authCode = yield utils.Oauth2Service.getOauthCode({
                 apiProvider: getProviderByType.getProviderByType((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _c !== void 0 ? _c : [], provider),
                 getOAuthResultFromApi: () => oauth.getOAuthResult(environmentId, provider, {
                     state,
                 }),
-                initWebAuth: () => {
-                    // When we set the redirectUrl, the backend gives preference to a redirect
-                    // experience, which is only desired for mobile
-                    const mobileRedirectUrl = effectiveRedirectUrl || window.location.href;
-                    return oauth.initAuth(environmentId, provider, {
-                        redirectUrl: isMobile
-                            ? removeDynamicOauthParamsFromUrl(mobileRedirectUrl)
-                            : undefined,
-                        state,
-                    });
-                },
+                initWebAuth: ({ redirectUrl } = {}) => oauth.initAuth(environmentId, provider, {
+                    redirectUrl: redirectUrl
+                        ? removeDynamicOauthParamsFromUrl(redirectUrl)
+                        : undefined,
+                    state,
+                }),
                 isMobile,
                 oauthLoginUrl,
                 onSettled,
                 provider,
-                redirectUrl: effectiveRedirectUrl,
+                redirectUrl: redirectUrl !== null && redirectUrl !== void 0 ? redirectUrl : defaultRedirectUrl,
                 sessionTimeout,
                 setIsProcessing,
                 state,

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

@@ -224,29 +224,23 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
             oauthLoginUrl.searchParams.set('code_challenge_method', 'S256');
         }
         const isMobile$1 = isMobile();
-        const effectiveRedirectUrl = redirectUrl !== null && redirectUrl !== void 0 ? redirectUrl : defaultRedirectUrl;
         try {
             const authCode = yield Oauth2Service.getOauthCode({
                 apiProvider: getProviderByType((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _c !== void 0 ? _c : [], provider),
                 getOAuthResultFromApi: () => getOAuthResult(environmentId, provider, {
                     state,
                 }),
-                initWebAuth: () => {
-                    // When we set the redirectUrl, the backend gives preference to a redirect
-                    // experience, which is only desired for mobile
-                    const mobileRedirectUrl = effectiveRedirectUrl || window.location.href;
-                    return initAuth(environmentId, provider, {
-                        redirectUrl: isMobile$1
-                            ? removeDynamicOauthParamsFromUrl(mobileRedirectUrl)
-                            : undefined,
-                        state,
-                    });
-                },
+                initWebAuth: ({ redirectUrl } = {}) => initAuth(environmentId, provider, {
+                    redirectUrl: redirectUrl
+                        ? removeDynamicOauthParamsFromUrl(redirectUrl)
+                        : undefined,
+                    state,
+                }),
                 isMobile: isMobile$1,
                 oauthLoginUrl,
                 onSettled,
                 provider,
-                redirectUrl: effectiveRedirectUrl,
+                redirectUrl: redirectUrl !== null && redirectUrl !== void 0 ? redirectUrl : defaultRedirectUrl,
                 sessionTimeout,
                 setIsProcessing,
                 state,

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

@@ -166,7 +166,8 @@ const useUserAuth = ({ authMethod, }) => {
     });
     const handleAuthError = (error, { options = {}, onError, }) => {
         var _a;
-        if (error instanceof utils.MfaInvalidOtpError) {
+        if (error instanceof utils.MfaInvalidOtpError ||
+            error instanceof utils.MfaRateLimitedError) {
             throw error;
         }
         // these get caught in onboarding form and handled there

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

@@ -1,6 +1,6 @@
 'use client'
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { DynamicError, MfaInvalidOtpError, EmailAlreadyExistsError, CustomFieldNotUniqueError, UsernameAlreadyExistsError, TooManyEmailVerificationsError, InvalidPhoneNumberError, NoAccessError, AccountExistsError, SandboxMaximumThresholdReachedError, UserHasAccountWithEmailError, sleep } from '@dynamic-labs/utils';
+import { DynamicError, MfaInvalidOtpError, MfaRateLimitedError, EmailAlreadyExistsError, CustomFieldNotUniqueError, UsernameAlreadyExistsError, TooManyEmailVerificationsError, InvalidPhoneNumberError, NoAccessError, AccountExistsError, SandboxMaximumThresholdReachedError, UserHasAccountWithEmailError, sleep } from '@dynamic-labs/utils';
 import { MfaBackupCodeAcknowledgement } from '@dynamic-labs/sdk-api-core';
 import { useAccountExistsContext } from '../../../context/AccountExistsContext/AccountExistsContext.js';
 import 'react';
@@ -162,7 +162,8 @@ const useUserAuth = ({ authMethod, }) => {
     });
     const handleAuthError = (error, { options = {}, onError, }) => {
         var _a;
-        if (error instanceof MfaInvalidOtpError) {
+        if (error instanceof MfaInvalidOtpError ||
+            error instanceof MfaRateLimitedError) {
             throw error;
         }
         // these get caught in onboarding form and handled there

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

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

package/src/lib/utils/hooks/{useSelectWalletOption/useSelectWalletOption.cjs → useWalletOptions/useWalletOptions.cjs}

@@ -4,10 +4,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../../_virtual/_tslib.cjs');
+var React = require('react');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 var walletBook = require('@dynamic-labs/wallet-book');
 var utils = require('@dynamic-labs/utils');
-require('react');
 require('../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/sdk-api-core');
 require('../../../shared/logger.cjs');
@@ -93,16 +93,42 @@ require('../../../context/ConnectWithOtpContext/constants.cjs');
 require('../../../context/ReinitializeContext/ReinitializeContextProvider.cjs');
 var useInternalDynamicContext = require('../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 
-const useSelectWalletOption = () => {
+const embeddedWalletsKeys = [
+    'magicemailotp',
+    'magiclink',
+    'magicsocial',
+    'turnkey',
+    'turnkeyhd',
+    'coinbasempc',
+    'zerodev',
+];
+const useWalletOptions = () => {
     const { walletConnectorOptions, setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
     const { walletBook: walletBook$1 } = walletBook.useWalletBookContext();
     const { setView } = ViewContext.useViewContext();
     const { navigateToWalletGroup } = WalletGroupContext.useWalletGroupContext();
     const { handleWalletItemClick } = useWalletItemActions.useWalletItemActions();
+    const walletOptions = React.useMemo(() => {
+        var _a;
+        return (_a = walletConnectorOptions === null || walletConnectorOptions === void 0 ? void 0 : walletConnectorOptions.filter((option) => !embeddedWalletsKeys.includes(option.walletConnector.key)).map((option) => {
+            const groupName = option.group
+                ? walletBook.getWalletGroup(walletBook$1, option.group).name
+                : undefined;
+            return {
+                group: option.group,
+                groupName,
+                key: option.walletConnector.key,
+                name: option.name,
+            };
+        })) !== null && _a !== void 0 ? _a : [];
+    }, [walletBook$1, walletConnectorOptions]);
     const selectWalletOption = (walletKey) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const group = groupWalletOptions.groupWalletOptions(walletBook$1, walletConnectorOptions);
         const walletOption = group.find((wallet) => wallet.key === walletKey);
-        logVerboseTroubleshootingMessage.logVerboseTroubleshootingMessage('[useSelectWalletOption] selectWalletOption', { walletKey, walletOption: walletOption === null || walletOption === void 0 ? void 0 : walletOption.key });
+        logVerboseTroubleshootingMessage.logVerboseTroubleshootingMessage('[useWalletOptions] selectWalletOption', {
+            walletKey,
+            walletOption: walletOption === null || walletOption === void 0 ? void 0 : walletOption.key,
+        });
         if (!walletOption) {
             throw new utils.DynamicError('Invalid wallet option key provided.');
         }
@@ -123,7 +149,8 @@ const useSelectWalletOption = () => {
     });
     return {
         selectWalletOption,
+        walletOptions,
     };
 };
 
-exports.useSelectWalletOption = useSelectWalletOption;
+exports.useWalletOptions = useWalletOptions;

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

@@ -0,0 +1,9 @@
+export declare const useWalletOptions: () => {
+    selectWalletOption: (walletKey: string) => Promise<void>;
+    walletOptions: {
+        group: string | undefined;
+        groupName: string | undefined;
+        key: string;
+        name: string;
+    }[];
+};

package/src/lib/utils/hooks/{useSelectWalletOption/useSelectWalletOption.js → useWalletOptions/useWalletOptions.js}

@@ -1,9 +1,9 @@
 'use client'
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
+import { useMemo } from 'react';
 import { isHardwareWalletConnector } from '@dynamic-labs/wallet-connector-core';
-import { useWalletBookContext } from '@dynamic-labs/wallet-book';
+import { useWalletBookContext, getWalletGroup } from '@dynamic-labs/wallet-book';
 import { DynamicError } from '@dynamic-labs/utils';
-import 'react';
 import '../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/sdk-api-core';
 import '../../../shared/logger.js';
@@ -89,16 +89,42 @@ import '../../../context/ConnectWithOtpContext/constants.js';
 import '../../../context/ReinitializeContext/ReinitializeContextProvider.js';
 import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 
-const useSelectWalletOption = () => {
+const embeddedWalletsKeys = [
+    'magicemailotp',
+    'magiclink',
+    'magicsocial',
+    'turnkey',
+    'turnkeyhd',
+    'coinbasempc',
+    'zerodev',
+];
+const useWalletOptions = () => {
     const { walletConnectorOptions, setShowAuthFlow } = useInternalDynamicContext();
     const { walletBook } = useWalletBookContext();
     const { setView } = useViewContext();
     const { navigateToWalletGroup } = useWalletGroupContext();
     const { handleWalletItemClick } = useWalletItemActions();
+    const walletOptions = useMemo(() => {
+        var _a;
+        return (_a = walletConnectorOptions === null || walletConnectorOptions === void 0 ? void 0 : walletConnectorOptions.filter((option) => !embeddedWalletsKeys.includes(option.walletConnector.key)).map((option) => {
+            const groupName = option.group
+                ? getWalletGroup(walletBook, option.group).name
+                : undefined;
+            return {
+                group: option.group,
+                groupName,
+                key: option.walletConnector.key,
+                name: option.name,
+            };
+        })) !== null && _a !== void 0 ? _a : [];
+    }, [walletBook, walletConnectorOptions]);
     const selectWalletOption = (walletKey) => __awaiter(void 0, void 0, void 0, function* () {
         const group = groupWalletOptions(walletBook, walletConnectorOptions);
         const walletOption = group.find((wallet) => wallet.key === walletKey);
-        logVerboseTroubleshootingMessage('[useSelectWalletOption] selectWalletOption', { walletKey, walletOption: walletOption === null || walletOption === void 0 ? void 0 : walletOption.key });
+        logVerboseTroubleshootingMessage('[useWalletOptions] selectWalletOption', {
+            walletKey,
+            walletOption: walletOption === null || walletOption === void 0 ? void 0 : walletOption.key,
+        });
         if (!walletOption) {
             throw new DynamicError('Invalid wallet option key provided.');
         }
@@ -119,7 +145,8 @@ const useSelectWalletOption = () => {
     });
     return {
         selectWalletOption,
+        walletOptions,
     };
 };
 
-export { useSelectWalletOption };
+export { useWalletOptions };

package/src/lib/views/CollectUserDataView/CollectUserDataView.cjs

@@ -107,15 +107,16 @@ const CollectUserDataView = () => {
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = React.useState(false);
     const nameService = useFetchNameService.useFetchNameService();
     const { t } = reactI18next.useTranslation();
-    if (!walletConnector || !userWithMissingInfo) {
+    if (!userWithMissingInfo) {
         return null;
     }
-    const evmNetworks = walletConnector.evmNetworks || [];
+    const evmNetworks = (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.evmNetworks) || [];
     const _isSupportedNetwork = !network || isSupportedNetwork.isSupportedNetwork({ network, walletConnector });
+    const shouldDisplayWrongNetworkState = !_isSupportedNetwork && Boolean(walletConnector);
     const walletAddress = (_a = userWithMissingInfo === null || userWithMissingInfo === void 0 ? void 0 : userWithMissingInfo.verifiedCredentials.find((verifiedCredential) => verifiedCredential.id === userWithMissingInfo.lastVerifiedCredentialId)) === null || _a === void 0 ? void 0 : _a.address;
-    return (jsxRuntime.jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__network-container', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { iconSize: 28 })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) })] }), jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' })] }), onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', copykey: 'dyn_collect_user_data.not_supported_network.error_message', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxRuntime.jsxs("div", { className: classNames.classNames('collect-user-data__form', {
-                    'collect-user-data__form--error': !_isSupportedNetwork,
-                }), children: [jsxRuntime.jsx("div", { className: 'collect-user-data__success-icon', children: jsxRuntime.jsx(Icon.Icon, { color: 'text-primary', size: 'large', children: jsxRuntime.jsx(checkConnection.ReactComponent, {}) }) }), jsxRuntime.jsx(OnboardingUserDataForm.OnboardingUserDataForm, { disableSubmit: !_isSupportedNetwork, userProfile: userWithMissingInfo, children: !_isSupportedNetwork ? (jsxRuntime.jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.not_supported_network.title', children: t('dyn_collect_user_data.not_supported_network.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_collect_user_data.not_supported_network.description', children: t('dyn_collect_user_data.not_supported_network.description') })] })) : (jsxRuntime.jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.greeting', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
+    return (jsxRuntime.jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__network-container', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { iconSize: 28 })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) })] }), walletConnector && (jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' }))] }), onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), shouldDisplayWrongNetworkState && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', copykey: 'dyn_collect_user_data.not_supported_network.error_message', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxRuntime.jsxs("div", { className: classNames.classNames('collect-user-data__form', {
+                    'collect-user-data__form--error': shouldDisplayWrongNetworkState,
+                }), children: [jsxRuntime.jsx("div", { className: 'collect-user-data__success-icon', children: jsxRuntime.jsx(Icon.Icon, { color: 'text-primary', size: 'large', children: jsxRuntime.jsx(checkConnection.ReactComponent, {}) }) }), jsxRuntime.jsx(OnboardingUserDataForm.OnboardingUserDataForm, { disableSubmit: shouldDisplayWrongNetworkState, userProfile: userWithMissingInfo, children: shouldDisplayWrongNetworkState ? (jsxRuntime.jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.not_supported_network.title', children: t('dyn_collect_user_data.not_supported_network.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_collect_user_data.not_supported_network.description', children: t('dyn_collect_user_data.not_supported_network.description') })] })) : (jsxRuntime.jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.greeting', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
                                         t('dyn_collect_user_data.greeting', { appName }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_collect_user_data.description', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||
                                         t('dyn_collect_user_data.description') })] })) }), jsxRuntime.jsx(TextButton.TextButton, { className: 'collect-user-data__log-out', onClick: handleLogOut, copykey: 'dyn_collect_user_data.log_out_button', children: t('dyn_collect_user_data.log_out_button') })] })] }));
 };

package/src/lib/views/CollectUserDataView/CollectUserDataView.js

@@ -103,15 +103,16 @@ const CollectUserDataView = () => {
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);
     const nameService = useFetchNameService();
     const { t } = useTranslation();
-    if (!walletConnector || !userWithMissingInfo) {
+    if (!userWithMissingInfo) {
         return null;
     }
-    const evmNetworks = walletConnector.evmNetworks || [];
+    const evmNetworks = (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.evmNetworks) || [];
     const _isSupportedNetwork = !network || isSupportedNetwork({ network, walletConnector });
+    const shouldDisplayWrongNetworkState = !_isSupportedNetwork && Boolean(walletConnector);
     const walletAddress = (_a = userWithMissingInfo === null || userWithMissingInfo === void 0 ? void 0 : userWithMissingInfo.verifiedCredentials.find((verifiedCredential) => verifiedCredential.id === userWithMissingInfo.lastVerifiedCredentialId)) === null || _a === void 0 ? void 0 : _a.address;
-    return (jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxs("div", { className: 'collect-user-data__network-container', children: [jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsx(AuthProviderIcon, { iconSize: 28 })), jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress(walletAddress, 3, 3) })] }), jsx(NetworkPicker, { currentNetwork: network, evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' })] }), onboardingImageUrl && (jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsx(ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', copykey: 'dyn_collect_user_data.not_supported_network.error_message', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxs("div", { className: classNames('collect-user-data__form', {
-                    'collect-user-data__form--error': !_isSupportedNetwork,
-                }), children: [jsx("div", { className: 'collect-user-data__success-icon', children: jsx(Icon, { color: 'text-primary', size: 'large', children: jsx(SvgCheckConnection, {}) }) }), jsx(OnboardingUserDataForm, { disableSubmit: !_isSupportedNetwork, userProfile: userWithMissingInfo, children: !_isSupportedNetwork ? (jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.not_supported_network.title', children: t('dyn_collect_user_data.not_supported_network.title') }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_collect_user_data.not_supported_network.description', children: t('dyn_collect_user_data.not_supported_network.description') })] })) : (jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.greeting', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
+    return (jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxs("div", { className: 'collect-user-data__network-container', children: [jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsx(AuthProviderIcon, { iconSize: 28 })), jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress(walletAddress, 3, 3) })] }), walletConnector && (jsx(NetworkPicker, { currentNetwork: network, evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' }))] }), onboardingImageUrl && (jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), shouldDisplayWrongNetworkState && (jsx(ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', copykey: 'dyn_collect_user_data.not_supported_network.error_message', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxs("div", { className: classNames('collect-user-data__form', {
+                    'collect-user-data__form--error': shouldDisplayWrongNetworkState,
+                }), children: [jsx("div", { className: 'collect-user-data__success-icon', children: jsx(Icon, { color: 'text-primary', size: 'large', children: jsx(SvgCheckConnection, {}) }) }), jsx(OnboardingUserDataForm, { disableSubmit: shouldDisplayWrongNetworkState, userProfile: userWithMissingInfo, children: shouldDisplayWrongNetworkState ? (jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.not_supported_network.title', children: t('dyn_collect_user_data.not_supported_network.title') }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_collect_user_data.not_supported_network.description', children: t('dyn_collect_user_data.not_supported_network.description') })] })) : (jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.greeting', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
                                         t('dyn_collect_user_data.greeting', { appName }) }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_collect_user_data.description', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||
                                         t('dyn_collect_user_data.description') })] })) }), jsx(TextButton, { className: 'collect-user-data__log-out', onClick: handleLogOut, copykey: 'dyn_collect_user_data.log_out_button', children: t('dyn_collect_user_data.log_out_button') })] })] }));
 };

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

@@ -100,11 +100,18 @@ const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = fa
     const { authDevice } = useMfa.useMfa();
     const [code, setCode] = React.useState('');
     const [error, setError] = React.useState();
+    const [isRateLimited, setIsRateLimited] = React.useState(false);
     const { data: isValid, isLoading } = usePromise.usePromise(() => authDevice(code, type, deviceId), {
         deps: [code],
         enabled: (code === null || code === void 0 ? void 0 : code.length) === 6,
-        onReject: () => {
-            setError(new utils.DynamicError(t('dyn_mfa.otp_verification_view.error')));
+        onReject: (err) => {
+            if (err instanceof utils.MfaRateLimitedError) {
+                setIsRateLimited(true);
+                setError(new utils.DynamicError(t('dyn_mfa.otp_verification_view.rate_limit_error')));
+            }
+            else {
+                setError(new utils.DynamicError(t('dyn_mfa.otp_verification_view.error')));
+            }
         },
         onResolve: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
             const user = userActions.getUser();
@@ -128,7 +135,7 @@ const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = fa
         }
         setView('mfa-secure-device', { isInitialSetup, type });
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { MainIcon: passwordHero.ReactComponent, error: error, isLoading: isLoading, onPinComplete: onSubmit, isValid: Boolean(isValid), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body'), onClickBack: showBackButton ? onClickBack : undefined }), !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: () => setView('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(isValid), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body'), onClickBack: showBackButton ? onClickBack : undefined, 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: () => setView('mfa-choose-device', { 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.js

@@ -3,7 +3,7 @@ import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { DynamicError } from '@dynamic-labs/utils';
+import { MfaRateLimitedError, DynamicError } from '@dynamic-labs/utils';
 import { MfaBackupCodeAcknowledgement } from '@dynamic-labs/sdk-api-core';
 import '@dynamic-labs/store';
 import '../../utils/constants/colors.js';
@@ -96,11 +96,18 @@ const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = fa
     const { authDevice } = useMfa();
     const [code, setCode] = useState('');
     const [error, setError] = useState();
+    const [isRateLimited, setIsRateLimited] = useState(false);
     const { data: isValid, isLoading } = usePromise(() => authDevice(code, type, deviceId), {
         deps: [code],
         enabled: (code === null || code === void 0 ? void 0 : code.length) === 6,
-        onReject: () => {
-            setError(new DynamicError(t('dyn_mfa.otp_verification_view.error')));
+        onReject: (err) => {
+            if (err instanceof MfaRateLimitedError) {
+                setIsRateLimited(true);
+                setError(new DynamicError(t('dyn_mfa.otp_verification_view.rate_limit_error')));
+            }
+            else {
+                setError(new DynamicError(t('dyn_mfa.otp_verification_view.error')));
+            }
         },
         onResolve: () => __awaiter(void 0, void 0, void 0, function* () {
             const user = getUser();
@@ -124,7 +131,7 @@ const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = fa
         }
         setView('mfa-secure-device', { isInitialSetup, type });
     };
-    return (jsxs(Fragment, { children: [jsx(OTPVerificationView, { MainIcon: SvgPasswordHero, error: error, isLoading: isLoading, onPinComplete: onSubmit, isValid: Boolean(isValid), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body'), onClickBack: showBackButton ? onClickBack : undefined }), !isInitialSetup && (jsx("div", { className: 'mfa-verification-view__choose-another-method', children: jsx(TextButton, { className: 'mfa-verification-view__choose-another-method-button', onClick: () => setView('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(isValid), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body'), onClickBack: showBackButton ? onClickBack : undefined, disabled: isRateLimited }), !isInitialSetup && (jsx("div", { className: 'mfa-verification-view__choose-another-method', children: jsx(TextButton, { className: 'mfa-verification-view__choose-another-method-button', onClick: () => setView('mfa-choose-device', { 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/widgets/DynamicWidget/views/ManageMfaWidgetView/ManageMfaWidgetView.cjs

@@ -27,6 +27,7 @@ require('../../../../shared/utils/classes/storage/localStorage.cjs');
 require('../../../../shared/utils/classes/storage/sessionStorage.cjs');
 var useEffectOnce = require('../../../../shared/utils/hooks/useEffectOnce/useEffectOnce.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');
@@ -101,32 +102,45 @@ require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('qrcode');
 
 const ManageMfaWidgetView = () => {
+    var _a;
     const [userDevices, setUserDevices] = React.useState([]);
+    const [mfaMethod, setMfaMethod] = React.useState();
     const [loading, setLoading] = React.useState(false);
     const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
-    const { setShowMfaQRCode } = useDynamicModals.useDynamicModals();
+    const { setShowMfaQRCode, setShowOTPVerification } = useDynamicModals.useDynamicModals();
     const { getUserDevices, deleteUserDevice } = useMfa.useMfa();
     const { t } = reactI18next.useTranslation();
+    const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
+    const isMfaRequired = Boolean((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.security.mfa) === null || _a === void 0 ? void 0 : _a.required);
     const getDevices = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         setLoading(true);
         const devices = yield getUserDevices();
         // set the user devices with the default device first
-        setUserDevices(sort.sortAndNameDevices(devices));
+        setUserDevices(sort.sortDevices(devices));
         setLoading(false);
     }), [getUserDevices]);
     // re-fetch devices when a new device is added
-    useDynamicEvents.useDynamicEvents('mfaCompletionSuccess', () => getDevices());
+    useDynamicEvents.useDynamicEvents('mfaCompletionSuccess', (_b) => _tslib.__awaiter(void 0, [_b], void 0, function* ({ mfaToken }) {
+        if (mfaToken) {
+            // we now require an MFA token to delete a device which is an async operation
+            if ((mfaMethod === null || mfaMethod === void 0 ? void 0 : mfaMethod.action) === 'remove') {
+                yield deleteUserDevice(mfaMethod.params.deviceId, mfaToken);
+                setMfaMethod(undefined);
+            }
+        }
+        getDevices();
+    }));
     // delete device and then re-fetch devices
     const deleteDevice = (id) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        yield deleteUserDevice(id);
-        getDevices();
+        setMfaMethod({ action: 'remove', params: { deviceId: id } });
+        setShowOTPVerification(true);
     });
     // load devices on initial page load
     useEffectOnce.useEffectOnce(() => {
         getDevices();
     });
     const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: () => setDynamicWidgetView('settings'), "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
-    return (jsxRuntime.jsxs("div", { className: 'manage-mfa-widget-view', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx("div", { className: 'send-balance-page-layout__header-content', children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_manage_mfa.title', children: t('dyn_manage_mfa.title') }) }) }), jsxRuntime.jsxs("div", { className: 'manage-mfa-widget-view__scroll-container', children: [loading && jsxRuntime.jsx(MfaDeviceTileSkeleton.MfaDeviceTileSkeleton, {}), !loading && userDevices.length === 0 && (jsxRuntime.jsx(Typography.Typography, { className: 'manage-mfa-widget-view__no-devices', variant: 'body_normal', color: 'secondary', copykey: 'dyn_manage_mfa.no_devices', children: t('dyn_manage_mfa.no_devices') })), userDevices.map((device, index) => (jsxRuntime.jsx(UserDeviceTile.UserDeviceTile, { userDevice: device, index: index, deleteDevice: deleteDevice }, device.id)))] }), userDevices.length > 0 || (jsxRuntime.jsx("div", { className: 'manage-mfa-widget-view__add-mfa-button-container', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonClassName: 'manage-mfa-widget-view__add-mfa-button-container__button', onClick: () => setShowMfaQRCode(true), copykey: 'dyn_manage_mfa.add_mfa_button', startSlot: jsxRuntime.jsx(add.ReactComponent, {}), children: t('dyn_manage_mfa.add_mfa_button') }) }))] }));
+    return (jsxRuntime.jsxs("div", { className: 'manage-mfa-widget-view', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx("div", { className: 'send-balance-page-layout__header-content', children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_manage_mfa.title', children: t('dyn_manage_mfa.title') }) }) }), jsxRuntime.jsxs("div", { className: 'manage-mfa-widget-view__scroll-container', children: [loading && jsxRuntime.jsx(MfaDeviceTileSkeleton.MfaDeviceTileSkeleton, {}), !loading && userDevices.length === 0 && (jsxRuntime.jsx(Typography.Typography, { className: 'manage-mfa-widget-view__no-devices', variant: 'body_normal', color: 'secondary', copykey: 'dyn_manage_mfa.no_devices', children: t('dyn_manage_mfa.no_devices') })), userDevices.map((device, index) => (jsxRuntime.jsx(UserDeviceTile.UserDeviceTile, { isMfaRequired: isMfaRequired, userDevice: device, index: index, deleteDevice: deleteDevice }, device.id)))] }), userDevices.length > 0 || (jsxRuntime.jsx("div", { className: 'manage-mfa-widget-view__add-mfa-button-container', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonClassName: 'manage-mfa-widget-view__add-mfa-button-container__button', onClick: () => setShowMfaQRCode(true), copykey: 'dyn_manage_mfa.add_mfa_button', startSlot: jsxRuntime.jsx(add.ReactComponent, {}), children: t('dyn_manage_mfa.add_mfa_button') }) }))] }));
 };
 
 exports.ManageMfaWidgetView = ManageMfaWidgetView;