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

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/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/useOnlyConnectedMode/useOnlyConnectedMode.d.ts

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

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/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;

package/src/lib/widgets/DynamicWidget/views/ManageMfaWidgetView/ManageMfaWidgetView.js

@@ -23,6 +23,7 @@ import '../../../../shared/utils/classes/storage/localStorage.js';
 import '../../../../shared/utils/classes/storage/sessionStorage.js';
 import { useEffectOnce } from '../../../../shared/utils/hooks/useEffectOnce/useEffectOnce.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';
@@ -71,7 +72,7 @@ import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import { MfaDeviceTileSkeleton } from '../../../../components/MfaDeviceTileSkeleton/MfaDeviceTileSkeleton.js';
 import { UserDeviceTile } from './components/UserDeviceTile.js';
-import { sortAndNameDevices } from './components/utils/sort.js';
+import { sortDevices } from './components/utils/sort.js';
 import '../../../../../polyfills.js';
 import '../../../../context/ErrorBoundary/ErrorBoundaryBase.js';
 import '../../../../context/ErrorBoundary/ErrorBoundaryContext.js';
@@ -97,32 +98,45 @@ import '../../../../components/InlineWidget/InlineWidget.js';
 import 'qrcode';
 
 const ManageMfaWidgetView = () => {
+    var _a;
     const [userDevices, setUserDevices] = useState([]);
+    const [mfaMethod, setMfaMethod] = useState();
     const [loading, setLoading] = useState(false);
     const { setDynamicWidgetView } = useWidgetContext();
-    const { setShowMfaQRCode } = useDynamicModals();
+    const { setShowMfaQRCode, setShowOTPVerification } = useDynamicModals();
     const { getUserDevices, deleteUserDevice } = useMfa();
     const { t } = useTranslation();
+    const { projectSettings } = 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 = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         setLoading(true);
         const devices = yield getUserDevices();
         // set the user devices with the default device first
-        setUserDevices(sortAndNameDevices(devices));
+        setUserDevices(sortDevices(devices));
         setLoading(false);
     }), [getUserDevices]);
     // re-fetch devices when a new device is added
-    useDynamicEvents('mfaCompletionSuccess', () => getDevices());
+    useDynamicEvents('mfaCompletionSuccess', (_b) => __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) => __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(() => {
         getDevices();
     });
     const backButton = (jsx(IconButton, { type: 'button', onClick: () => setDynamicWidgetView('settings'), "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
-    return (jsxs("div", { className: 'manage-mfa-widget-view', children: [jsx(ModalHeader, { leading: backButton, children: jsx("div", { className: 'send-balance-page-layout__header-content', children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_manage_mfa.title', children: t('dyn_manage_mfa.title') }) }) }), jsxs("div", { className: 'manage-mfa-widget-view__scroll-container', children: [loading && jsx(MfaDeviceTileSkeleton, {}), !loading && userDevices.length === 0 && (jsx(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) => (jsx(UserDeviceTile, { userDevice: device, index: index, deleteDevice: deleteDevice }, device.id)))] }), userDevices.length > 0 || (jsx("div", { className: 'manage-mfa-widget-view__add-mfa-button-container', children: jsx(TypographyButton, { buttonClassName: 'manage-mfa-widget-view__add-mfa-button-container__button', onClick: () => setShowMfaQRCode(true), copykey: 'dyn_manage_mfa.add_mfa_button', startSlot: jsx(SvgAdd, {}), children: t('dyn_manage_mfa.add_mfa_button') }) }))] }));
+    return (jsxs("div", { className: 'manage-mfa-widget-view', children: [jsx(ModalHeader, { leading: backButton, children: jsx("div", { className: 'send-balance-page-layout__header-content', children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_manage_mfa.title', children: t('dyn_manage_mfa.title') }) }) }), jsxs("div", { className: 'manage-mfa-widget-view__scroll-container', children: [loading && jsx(MfaDeviceTileSkeleton, {}), !loading && userDevices.length === 0 && (jsx(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) => (jsx(UserDeviceTile, { isMfaRequired: isMfaRequired, userDevice: device, index: index, deleteDevice: deleteDevice }, device.id)))] }), userDevices.length > 0 || (jsx("div", { className: 'manage-mfa-widget-view__add-mfa-button-container', children: jsx(TypographyButton, { buttonClassName: 'manage-mfa-widget-view__add-mfa-button-container__button', onClick: () => setShowMfaQRCode(true), copykey: 'dyn_manage_mfa.add_mfa_button', startSlot: jsx(SvgAdd, {}), children: t('dyn_manage_mfa.add_mfa_button') }) }))] }));
 };
 
 export { ManageMfaWidgetView };

package/src/lib/widgets/DynamicWidget/views/ManageMfaWidgetView/components/UserDeviceTile.cjs

@@ -83,7 +83,6 @@ require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../../views/WalletList/WalletList.cjs');
 require('../../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
-var Badge = require('../../../../../components/Badge/Badge.cjs');
 require('../../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 require('../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../../../context/SendBalanceContext/SendBalanceContext.cjs');
@@ -93,7 +92,7 @@ require('../../../../../context/ReinitializeContext/ReinitializeContextProvider.
 require('../../../../../components/InlineWidget/InlineWidget.cjs');
 require('qrcode');
 
-const UserDeviceTile = ({ userDevice, deleteDevice, }) => {
+const UserDeviceTile = ({ userDevice, deleteDevice, isMfaRequired, }) => {
     const optionsMenu = [
         {
             Icon: null,
@@ -102,10 +101,10 @@ const UserDeviceTile = ({ userDevice, deleteDevice, }) => {
         },
     ];
     const timeSinceCreated = userDevice.verifiedAt && getTimeSince.getTimeSince(new Date(userDevice.verifiedAt));
-    return (jsxRuntime.jsxs("div", { className: 'manage-mfa-widget-view__list-tile', children: [jsxRuntime.jsx(authenticator.ReactComponent, { className: 'manage-mfa-widget-view__list-tile__icon' }), jsxRuntime.jsxs("div", { className: 'manage-mfa-widget-view__list-tile__details', children: [jsxRuntime.jsxs("div", { className: 'manage-mfa-widget-view__list-tile__details__title', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: userDevice.alias || 'Authenticator App' }), userDevice._default && jsxRuntime.jsx(Badge.Badge, { text: 'Default' })] }), timeSinceCreated && (jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', color: 'secondary', children: ["Created ", timeSinceCreated.value, " ", timeSinceCreated.unit, " ago"] }))] }), jsxRuntime.jsx("div", { style: {
+    return (jsxRuntime.jsxs("div", { className: 'manage-mfa-widget-view__list-tile', children: [jsxRuntime.jsx(authenticator.ReactComponent, { className: 'manage-mfa-widget-view__list-tile__icon' }), jsxRuntime.jsxs("div", { className: 'manage-mfa-widget-view__list-tile__details', children: [jsxRuntime.jsx("div", { className: 'manage-mfa-widget-view__list-tile__details__title', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: userDevice.alias || 'Authenticator App' }) }), timeSinceCreated && (jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', color: 'secondary', children: ["Created ", timeSinceCreated.value, " ", timeSinceCreated.unit, " ago"] }))] }), isMfaRequired || (jsxRuntime.jsx("div", { style: {
                     cursor: 'pointer',
                     display: 'flex',
-                }, children: jsxRuntime.jsx(DotsMenu.DotsMenu, { direction: 'left', "data-testid": 'dots-menu', options: optionsMenu, buttonClassName: 'manage-mfa-widget-view__list-tile__dots-menu', buttonClassNameWithOpenMenu: 'manage-mfa-widget-view__list-tile__dots-menu' }) })] }, userDevice.id));
+                }, children: jsxRuntime.jsx(DotsMenu.DotsMenu, { direction: 'left', "data-testid": 'dots-menu', options: optionsMenu, buttonClassName: 'manage-mfa-widget-view__list-tile__dots-menu', buttonClassNameWithOpenMenu: 'manage-mfa-widget-view__list-tile__dots-menu' }) }))] }, userDevice.id));
 };
 
 exports.UserDeviceTile = UserDeviceTile;

package/src/lib/widgets/DynamicWidget/views/ManageMfaWidgetView/components/UserDeviceTile.d.ts

@@ -4,5 +4,6 @@ export type UserDeviceTileProps = {
     userDevice: MFADevice;
     index: number;
     deleteDevice: (id: string) => void;
+    isMfaRequired: boolean;
 };
-export declare const UserDeviceTile: ({ userDevice, deleteDevice, }: UserDeviceTileProps) => JSX.Element;
+export declare const UserDeviceTile: ({ userDevice, deleteDevice, isMfaRequired, }: UserDeviceTileProps) => JSX.Element;

package/src/lib/widgets/DynamicWidget/views/ManageMfaWidgetView/components/UserDeviceTile.js

@@ -79,7 +79,6 @@ import '../../../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../../../views/WalletList/WalletList.js';
 import '../../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
-import { Badge } from '../../../../../components/Badge/Badge.js';
 import '../../../../../context/IpConfigurationContext/IpConfigurationContext.js';
 import '../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../../context/SendBalanceContext/SendBalanceContext.js';
@@ -89,7 +88,7 @@ import '../../../../../context/ReinitializeContext/ReinitializeContextProvider.j
 import '../../../../../components/InlineWidget/InlineWidget.js';
 import 'qrcode';
 
-const UserDeviceTile = ({ userDevice, deleteDevice, }) => {
+const UserDeviceTile = ({ userDevice, deleteDevice, isMfaRequired, }) => {
     const optionsMenu = [
         {
             Icon: null,
@@ -98,10 +97,10 @@ const UserDeviceTile = ({ userDevice, deleteDevice, }) => {
         },
     ];
     const timeSinceCreated = userDevice.verifiedAt && getTimeSince(new Date(userDevice.verifiedAt));
-    return (jsxs("div", { className: 'manage-mfa-widget-view__list-tile', children: [jsx(SvgAuthenticator, { className: 'manage-mfa-widget-view__list-tile__icon' }), jsxs("div", { className: 'manage-mfa-widget-view__list-tile__details', children: [jsxs("div", { className: 'manage-mfa-widget-view__list-tile__details__title', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', children: userDevice.alias || 'Authenticator App' }), userDevice._default && jsx(Badge, { text: 'Default' })] }), timeSinceCreated && (jsxs(Typography, { variant: 'body_small', color: 'secondary', children: ["Created ", timeSinceCreated.value, " ", timeSinceCreated.unit, " ago"] }))] }), jsx("div", { style: {
+    return (jsxs("div", { className: 'manage-mfa-widget-view__list-tile', children: [jsx(SvgAuthenticator, { className: 'manage-mfa-widget-view__list-tile__icon' }), jsxs("div", { className: 'manage-mfa-widget-view__list-tile__details', children: [jsx("div", { className: 'manage-mfa-widget-view__list-tile__details__title', children: jsx(Typography, { variant: 'body_normal', color: 'primary', children: userDevice.alias || 'Authenticator App' }) }), timeSinceCreated && (jsxs(Typography, { variant: 'body_small', color: 'secondary', children: ["Created ", timeSinceCreated.value, " ", timeSinceCreated.unit, " ago"] }))] }), isMfaRequired || (jsx("div", { style: {
                     cursor: 'pointer',
                     display: 'flex',
-                }, children: jsx(DotsMenu, { direction: 'left', "data-testid": 'dots-menu', options: optionsMenu, buttonClassName: 'manage-mfa-widget-view__list-tile__dots-menu', buttonClassNameWithOpenMenu: 'manage-mfa-widget-view__list-tile__dots-menu' }) })] }, userDevice.id));
+                }, children: jsx(DotsMenu, { direction: 'left', "data-testid": 'dots-menu', options: optionsMenu, buttonClassName: 'manage-mfa-widget-view__list-tile__dots-menu', buttonClassNameWithOpenMenu: 'manage-mfa-widget-view__list-tile__dots-menu' }) }))] }, userDevice.id));
 };
 
 export { UserDeviceTile };

package/src/lib/widgets/DynamicWidget/views/ManageMfaWidgetView/components/utils/sort.cjs

@@ -10,14 +10,8 @@ const sortDevicesByVerifiedDateDesc = (a, b) => {
     const dateB = b.verifiedAt ? new Date(b.verifiedAt).getTime() : 0;
     return dateA - dateB;
 };
-const sortAndNameDevices = (devices) => devices
-    .sort(sortDevicesByVerifiedDateDesc)
-    .map((device, index) => {
-    device.alias = device.alias || `Authenticator App ${index + 1}`;
-    return device;
-})
-    .sort(sortDevicesByDefault);
+const sortDevices = (devices) => devices.sort(sortDevicesByVerifiedDateDesc).sort(sortDevicesByDefault);
 
-exports.sortAndNameDevices = sortAndNameDevices;
+exports.sortDevices = sortDevices;
 exports.sortDevicesByDefault = sortDevicesByDefault;
 exports.sortDevicesByVerifiedDateDesc = sortDevicesByVerifiedDateDesc;