@dynamic-labs/sdk-react-core 4.66.0 → 4.67.1

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

@@ -12,40 +12,70 @@ export type VerifyOtpParams = {
 export type VerifyWalletParams = {
     requestedScopes?: TokenScope[];
 };
+export type VerifyPasskeyMfaParams = {
+    requestedScopes?: TokenScope[];
+};
+export type VerifyTotpMfaParams = {
+    code: string;
+    deviceId?: string;
+    requestedScopes?: TokenScope[];
+};
+export type VerifyRecoveryCodeParams = {
+    code: string;
+    requestedScopes?: TokenScope[];
+};
+export type IsStepUpRequiredParams = {
+    scope: TokenScope;
+};
 export type UseStepUpAuthenticationParams = {
     credentialId?: string;
 };
 export type UseStepUpAuthenticationReturn = {
+    isStepUpRequired: (params: IsStepUpRequiredParams) => boolean;
+    promptMfa: (props?: PromptMfaParams) => Promise<string | undefined>;
     resetState: () => void;
     sendOtp: () => Promise<OTPVerification | null>;
     state: StepUpAuthenticationState;
     verifyOtp: (params: VerifyOtpParams) => Promise<VerifyResponse | null>;
+    verifyPasskeyMfa: (params: VerifyPasskeyMfaParams) => Promise<VerifyResponse | null>;
+    verifyRecoveryCode: (params: VerifyRecoveryCodeParams) => Promise<VerifyResponse | null>;
+    verifyTotpMfa: (params: VerifyTotpMfaParams) => Promise<VerifyResponse | null>;
     verifyWallet: (params: VerifyWalletParams) => Promise<void>;
 };
+export type PromptMfaParams = {
+    createMfaToken?: boolean;
+    requestedScopes?: TokenScope[];
+};
 /**
- * Perform step-up authentication for an already-authenticated user via OTP.
+ * Perform step-up authentication for an already-authenticated user.
  *
- * Automatically selects the first sign-in enabled email or SMS credential on
- * the user, or targets a specific credential when `credentialId` is provided.
+ * Supports multiple verification methods:
+ * - **OTP** (email/SMS): `sendOtp()` then `verifyOtp()`
+ * - **Wallet**: `verifyWallet()` for wallet signature verification
+ * - **Passkey MFA**: `verifyPasskeyMfa()` for passkey-based MFA
+ * - **TOTP MFA**: `verifyTotpMfa()` for authenticator app codes
  *
- * @param params.credentialId - Optional id of a specific verified credential to
- *   use. Must be an email or SMS credential. Defaults to the first sign-in
- *   enabled email or SMS credential on the authenticated user.
+ * For OTP and wallet methods, automatically selects the first sign-in enabled
+ * credential, or targets a specific one when `credentialId` is provided.
  *
- * @returns `sendOtp` – sends the OTP to the resolved credential.
- * @returns `verifyOtp` – verifies the OTP code supplied by the user.
- * @returns `state` – current loading / error / otpVerification state.
- * @returns `resetState` – resets state back to its initial value.
+ * @param params.credentialId - Optional id of a specific verified credential or
+ *   wallet to use. For OTP, must be an email or SMS credential. Defaults to the
+ *   first sign-in enabled email or SMS credential on the authenticated user.
  *
  * @example
  * ```tsx
- * const { sendOtp, verifyOtp, state } = useStepUpAuthentication();
- *
- * // Step 1: send OTP
+ * // OTP flow
+ * const { sendOtp, verifyOtp } = useStepUpAuthentication();
  * await sendOtp();
+ * const result = await verifyOtp({ verificationToken: '123456', requestedScopes: ['wallet:export'] });
+ *
+ * // Passkey MFA flow
+ * const { verifyPasskeyMfa } = useStepUpAuthentication();
+ * const result = await verifyPasskeyMfa({ requestedScopes: ['wallet:export'] });
  *
- * // Step 2: after the user enters the code
- * const result = await verifyOtp({ verificationToken: '123456' });
+ * // TOTP MFA flow
+ * const { verifyTotpMfa } = useStepUpAuthentication();
+ * const result = await verifyTotpMfa({ code: '123456', requestedScopes: ['wallet:export'] });
  * ```
  */
 export declare const useStepUpAuthentication: ({ credentialId, }?: UseStepUpAuthenticationParams) => UseStepUpAuthenticationReturn;

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

@@ -1,18 +1,18 @@
 'use client'
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { useState, useRef, useCallback } from 'react';
-import { verifyOTP, sendEmailOTP, supportedCountries, sendSmsOTP } from '@dynamic-labs-sdk/client';
-import { JwtVerifiedCredentialFormatEnum } from '@dynamic-labs/sdk-api-core';
+import { verifyOTP, authenticatePasskeyMFA, authenticateTotpMfaDevice, authenticateMfaRecoveryCode, onEvent, sendEmailOTP, supportedCountries, sendSmsOTP } from '@dynamic-labs-sdk/client';
+import { MFADeviceType, JwtVerifiedCredentialFormatEnum } from '@dynamic-labs/sdk-api-core';
+import { DeferredPromise } from '@dynamic-labs/utils';
 import '@dynamic-labs-sdk/client/core';
-import '../../../client/client.js';
+import { useDynamicClient } from '../../../client/client.js';
 import '../../../config/ApiEndpoint.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import 'react/jsx-runtime';
-import '../../../context/ViewContext/ViewContext.js';
+import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
 import { logger } from '../../../shared/logger.js';
 import '@dynamic-labs/wallet-book';
-import '@dynamic-labs/utils';
 import '../../constants/colors.js';
 import '../../constants/values.js';
 import '../../../shared/consts/index.js';
@@ -20,14 +20,92 @@ import '@dynamic-labs/multi-wallet';
 import 'react-international-phone';
 import '../../../store/state/nonce/nonce.js';
 import '@dynamic-labs/locale';
-import '../../../store/state/dynamicContextProps/dynamicContextProps.js';
+import { useEnvironmentId } from '../../../store/state/dynamicContextProps/dynamicContextProps.js';
 import '../../../store/state/primaryWalletId/primaryWalletId.js';
 import '../../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
 import '../../functions/getWaasAddressTypeLabel/getWaasAddressTypeLabel.js';
-import '../../../events/dynamicEvents.js';
+import { dynamicEvents } from '../../../events/dynamicEvents.js';
 import { useUser } from '../../../client/extension/user/useUser/useUser.js';
+import { hasElevatedAccessToken } from '../../../client/extension/functions/hasElevatedAccessToken/hasElevatedAccessToken.js';
+import '../../../context/DynamicContext/DynamicContext.js';
+import '../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
 import { useConnectAndSign } from '../authenticationHooks/useConnectAndSign/useConnectAndSign.js';
+import '../../../context/ErrorContext/ErrorContext.js';
+import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../context/AccountExistsContext/AccountExistsContext.js';
 import { useInternalUserWallets } from '../../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../../store/state/authMode/authMode.js';
+import '../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../context/VerificationContext/VerificationContext.js';
+import 'react-dom';
+import '../../functions/compareChains/compareChains.js';
+import '../../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.js';
+import '../../../context/ThemeContext/ThemeContext.js';
+import '../useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import 'bs58';
+import '@dynamic-labs/types';
+import '../../../context/SocialRedirectContext/SocialRedirectContext.js';
+import '../../../context/LoadingContext/LoadingContext.js';
+import '../../../context/WalletContext/WalletContext.js';
+import '../useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
+import 'yup';
+import '../../../context/MockContext/MockContext.js';
+import '../../../views/CollectUserDataView/useFields.js';
+import '../../../context/FieldsStateContext/FieldsStateContext.js';
+import '../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '@dynamic-labs/rpc-providers';
+import '../../../store/state/walletOptions/walletOptions.js';
+import 'react-i18next';
+import '../../../components/Accordion/components/AccordionItem/AccordionItem.js';
+import '../../../components/Alert/Alert.js';
+import '../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../components/IconButton/IconButton.js';
+import '../../../components/InlineWidget/InlineWidget.js';
+import '../../../components/Input/Input.js';
+import '../../../components/IsBrowser/IsBrowser.js';
+import '../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../components/OverlayCard/OverlayCard.js';
+import '../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../../../components/Popper/Popper/Popper.js';
+import '../../../components/Popper/PopperContext/PopperContext.js';
+import 'react-focus-lock';
+import 'qrcode';
+import 'formik';
+import '../useSubdomainCheck/useSubdomainCheck.js';
+import '../../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../useWalletBackup/useWalletBackup.js';
+import '../useWalletBackup/types.js';
+import '../useWalletBackup/cloudProviders.js';
+import '../../../context/IpConfigurationContext/IpConfigurationContext.js';
+import '../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
+import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '@hcaptcha/react-hcaptcha';
+import '../../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.js';
+import '../../../views/ExchangeWhitelistWarning/ExchangeWhitelistWarning.js';
+import '../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
+import '../../../context/FooterAnimationContext/index.js';
+import '../../../views/MfaChooseDeviceView/useGetMfaOptions/useGetMfaOptions.js';
+import '../../../context/PasskeyContext/PasskeyContext.js';
+import '../../../context/OnrampContext/OnrampContext.js';
+import '../../../store/state/sendBalances.js';
+import '../../../store/state/connectorsInitializing/connectorsInitializing.js';
+import '../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
+import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import '../../../views/TransactionConfirmationView/TransactionConfirmationView.js';
+import '../../../widgets/DynamicWidget/components/PasskeyCard/PasskeyCard.js';
+import '../../../widgets/DynamicWidget/views/CryptoComOnramp/CryptoComOnramp.js';
+import '../../../../index.js';
+import '../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.js';
+import '../../../store/state/tokenBalances.js';
+import '../../../store/state/multichainBalances.js';
+import { useGetUserMfaMethods } from '../useGetUserMfaMethods/useGetUserMfaMethods.js';
+import { useAuthenticatePasskeyMFA } from '../useAuthenticatePasskeyMFA/useAuthenticatePasskeyMFA.js';
+import '../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
 
 const INITIAL_STATE = {
     error: null,
@@ -68,47 +146,60 @@ const dispatchOtp = (credential) => __awaiter(void 0, void 0, void 0, function*
         : sendSmsOtp(credential);
 });
 /**
- * Perform step-up authentication for an already-authenticated user via OTP.
+ * Perform step-up authentication for an already-authenticated user.
  *
- * Automatically selects the first sign-in enabled email or SMS credential on
- * the user, or targets a specific credential when `credentialId` is provided.
+ * Supports multiple verification methods:
+ * - **OTP** (email/SMS): `sendOtp()` then `verifyOtp()`
+ * - **Wallet**: `verifyWallet()` for wallet signature verification
+ * - **Passkey MFA**: `verifyPasskeyMfa()` for passkey-based MFA
+ * - **TOTP MFA**: `verifyTotpMfa()` for authenticator app codes
  *
- * @param params.credentialId - Optional id of a specific verified credential to
- *   use. Must be an email or SMS credential. Defaults to the first sign-in
- *   enabled email or SMS credential on the authenticated user.
+ * For OTP and wallet methods, automatically selects the first sign-in enabled
+ * credential, or targets a specific one when `credentialId` is provided.
  *
- * @returns `sendOtp` – sends the OTP to the resolved credential.
- * @returns `verifyOtp` – verifies the OTP code supplied by the user.
- * @returns `state` – current loading / error / otpVerification state.
- * @returns `resetState` – resets state back to its initial value.
+ * @param params.credentialId - Optional id of a specific verified credential or
+ *   wallet to use. For OTP, must be an email or SMS credential. Defaults to the
+ *   first sign-in enabled email or SMS credential on the authenticated user.
  *
  * @example
  * ```tsx
- * const { sendOtp, verifyOtp, state } = useStepUpAuthentication();
- *
- * // Step 1: send OTP
+ * // OTP flow
+ * const { sendOtp, verifyOtp } = useStepUpAuthentication();
  * await sendOtp();
+ * const result = await verifyOtp({ verificationToken: '123456', requestedScopes: ['wallet:export'] });
+ *
+ * // Passkey MFA flow
+ * const { verifyPasskeyMfa } = useStepUpAuthentication();
+ * const result = await verifyPasskeyMfa({ requestedScopes: ['wallet:export'] });
  *
- * // Step 2: after the user enters the code
- * const result = await verifyOtp({ verificationToken: '123456' });
+ * // TOTP MFA flow
+ * const { verifyTotpMfa } = useStepUpAuthentication();
+ * const result = await verifyTotpMfa({ code: '123456', requestedScopes: ['wallet:export'] });
  * ```
  */
 const useStepUpAuthentication = ({ credentialId, } = {}) => {
     const user = useUser();
+    const environmentId = useEnvironmentId();
     const [state, setState] = useState(INITIAL_STATE);
     const connectAndSign = useConnectAndSign();
     const { userWallets } = useInternalUserWallets();
+    const { setShowAuthFlow } = useInternalDynamicContext();
+    const { pushView } = useViewContext();
+    const getUserMfaMethods = useGetUserMfaMethods();
+    const authenticatePasskeyMFA$1 = useAuthenticatePasskeyMFA();
+    const dynamicClient = useDynamicClient();
     // Ref keeps the latest otpVerification available inside the verifyOtp
     // callback without creating a stale closure over state.
     const otpVerificationRef = useRef(null);
+    const isStepUpRequired = useCallback(({ scope }) => !hasElevatedAccessToken(scope), []);
     const resetState = useCallback(() => {
         otpVerificationRef.current = null;
         setState(INITIAL_STATE);
     }, []);
     const setError = useCallback((errorMessage) => {
         setState((prev) => (Object.assign(Object.assign({}, prev), { error: errorMessage, isLoading: false })));
-        logger.error(errorMessage);
-    }, []);
+        logger.error(errorMessage, { environmentId, userId: user === null || user === void 0 ? void 0 : user.id });
+    }, [environmentId, user === null || user === void 0 ? void 0 : user.id]);
     const sendOtp = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         const credentials = user === null || user === void 0 ? void 0 : user.verifiedCredentials;
         if (!(credentials === null || credentials === void 0 ? void 0 : credentials.length)) {
@@ -134,10 +225,20 @@ const useStepUpAuthentication = ({ credentialId, } = {}) => {
         catch (error) {
             const errorMessage = error instanceof Error ? error.message : 'Failed to send OTP';
             setState((prev) => (Object.assign(Object.assign({}, prev), { error: errorMessage, isLoading: false })));
-            logger.error('Failed to send OTP for step-up authentication', { error });
+            logger.error('Failed to send OTP for step-up authentication', {
+                environmentId,
+                error,
+                userId: user === null || user === void 0 ? void 0 : user.id,
+            });
             return null;
         }
-    }), [credentialId, setError, user === null || user === void 0 ? void 0 : user.verifiedCredentials]);
+    }), [
+        credentialId,
+        environmentId,
+        setError,
+        user === null || user === void 0 ? void 0 : user.id,
+        user === null || user === void 0 ? void 0 : user.verifiedCredentials,
+    ]);
     const verifyOtp = useCallback((_a) => __awaiter(void 0, [_a], void 0, function* ({ requestedScopes, verificationToken, }) {
         const otpVerification = otpVerificationRef.current;
         if (!otpVerification) {
@@ -158,11 +259,13 @@ const useStepUpAuthentication = ({ credentialId, } = {}) => {
             const errorMessage = error instanceof Error ? error.message : 'Failed to verify OTP';
             setState((prev) => (Object.assign(Object.assign({}, prev), { error: errorMessage, isLoading: false })));
             logger.error('Failed to verify OTP for step-up authentication', {
+                environmentId,
                 error,
+                userId: user === null || user === void 0 ? void 0 : user.id,
             });
             return null;
         }
-    }), [setError]);
+    }), [environmentId, setError, user === null || user === void 0 ? void 0 : user.id]);
     const verifyWallet = useCallback((_b) => __awaiter(void 0, [_b], void 0, function* ({ requestedScopes }) {
         setState((prev) => (Object.assign(Object.assign({}, prev), { error: null, isLoading: true })));
         const wallet = userWallets.find((w) => w.id === credentialId);
@@ -183,11 +286,158 @@ const useStepUpAuthentication = ({ credentialId, } = {}) => {
                 : 'Failed to verify wallet for step-up authentication';
             setState((prev) => (Object.assign(Object.assign({}, prev), { error: errorMessage, isLoading: false })));
             logger.error('Failed to verify wallet for step-up authentication', {
+                environmentId,
                 error,
+                userId: user === null || user === void 0 ? void 0 : user.id,
+            });
+        }
+    }), [connectAndSign, credentialId, environmentId, setError, user, userWallets]);
+    const verifyPasskeyMfa = useCallback((_c) => __awaiter(void 0, [_c], void 0, function* ({ requestedScopes, }) {
+        setState((prev) => (Object.assign(Object.assign({}, prev), { error: null, isLoading: true })));
+        try {
+            const response = yield authenticatePasskeyMFA({
+                requestedScopes,
+            });
+            setState((prev) => (Object.assign(Object.assign({}, prev), { error: null, isLoading: false })));
+            return response;
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error
+                ? error.message
+                : 'Failed to authenticate passkey for step-up authentication';
+            setState((prev) => (Object.assign(Object.assign({}, prev), { error: errorMessage, isLoading: false })));
+            logger.error('Failed to authenticate passkey for step-up authentication', { environmentId, error, userId: user === null || user === void 0 ? void 0 : user.id });
+            return null;
+        }
+    }), [environmentId, user]);
+    const verifyTotpMfa = useCallback((_d) => __awaiter(void 0, [_d], void 0, function* ({ code, deviceId, requestedScopes, }) {
+        setState((prev) => (Object.assign(Object.assign({}, prev), { error: null, isLoading: true })));
+        try {
+            const response = yield authenticateTotpMfaDevice({
+                code,
+                deviceId,
+                requestedScopes,
+            });
+            setState((prev) => (Object.assign(Object.assign({}, prev), { error: null, isLoading: false })));
+            return response;
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error
+                ? error.message
+                : 'Failed to authenticate TOTP device for step-up authentication';
+            setState((prev) => (Object.assign(Object.assign({}, prev), { error: errorMessage, isLoading: false })));
+            logger.error('Failed to authenticate TOTP device for step-up authentication', { environmentId, error, userId: user === null || user === void 0 ? void 0 : user.id });
+            return null;
+        }
+    }), [environmentId, user]);
+    const verifyRecoveryCode = useCallback((_e) => __awaiter(void 0, [_e], void 0, function* ({ code, requestedScopes, }) {
+        setState((prev) => (Object.assign(Object.assign({}, prev), { error: null, isLoading: true })));
+        try {
+            const response = yield authenticateMfaRecoveryCode({
+                code,
+                requestedScopes,
             });
+            setState((prev) => (Object.assign(Object.assign({}, prev), { error: null, isLoading: false })));
+            return response;
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error
+                ? error.message
+                : 'Failed to authenticate recovery code for step-up authentication';
+            setState((prev) => (Object.assign(Object.assign({}, prev), { error: errorMessage, isLoading: false })));
+            logger.error('Failed to authenticate recovery code for step-up authentication', { environmentId, error, userId: user === null || user === void 0 ? void 0 : user.id });
+            return null;
+        }
+    }), [environmentId, user]);
+    const promptMfa = useCallback((props) => __awaiter(void 0, void 0, void 0, function* () {
+        var _f;
+        const methods = yield getUserMfaMethods();
+        const allMethods = [
+            ...methods.passkeys.map((passkey) => (Object.assign(Object.assign({}, passkey), { type: MFADeviceType.Passkey }))),
+            ...methods.devices.map((device) => (Object.assign(Object.assign({}, device), { type: MFADeviceType.Totp }))),
+        ];
+        if (!methods.userHasVerifiedMfaMethods || allMethods.length === 0) {
+            setShowAuthFlow(true);
+            pushView('mfa-choose-device', {
+                createMfaToken: props === null || props === void 0 ? void 0 : props.createMfaToken,
+                requestedScopes: props === null || props === void 0 ? void 0 : props.requestedScopes,
+            });
+            return;
+        }
+        const lastCreatedMethod = allMethods.reduce((a, b) => {
+            if (!a)
+                return b;
+            if (!b)
+                return a;
+            if (a.createdAt && b.createdAt) {
+                return a.createdAt >= b.createdAt ? a : b;
+            }
+            if (b.createdAt) {
+                return b;
+            }
+            return a;
+        }, allMethods[0]);
+        switch (lastCreatedMethod.type) {
+            case MFADeviceType.Passkey: {
+                const createMfaTokenOptions = (props === null || props === void 0 ? void 0 : props.createMfaToken)
+                    ? { singleUse: true }
+                    : undefined;
+                const authenticatePasskeyPromise = authenticatePasskeyMFA$1({
+                    createMfaToken: createMfaTokenOptions,
+                    requestedScopes: props === null || props === void 0 ? void 0 : props.requestedScopes,
+                });
+                setShowAuthFlow(true);
+                pushView('passkey-confirm', {
+                    authenticatePasskeyPromise,
+                    createMfaToken: props === null || props === void 0 ? void 0 : props.createMfaToken,
+                    requestedScopes: props === null || props === void 0 ? void 0 : props.requestedScopes,
+                });
+                return authenticatePasskeyPromise;
+            }
+            case MFADeviceType.Totp: {
+                if ((dynamicClient === null || dynamicClient === void 0 ? void 0 : dynamicClient.mfaToken) && !((_f = props === null || props === void 0 ? void 0 : props.requestedScopes) === null || _f === void 0 ? void 0 : _f.length)) {
+                    return dynamicClient === null || dynamicClient === void 0 ? void 0 : dynamicClient.mfaToken;
+                }
+                const deferred = new DeferredPromise();
+                setShowAuthFlow(true);
+                pushView('mfa-verification', {
+                    createMfaToken: props === null || props === void 0 ? void 0 : props.createMfaToken,
+                    requestedScopes: props === null || props === void 0 ? void 0 : props.requestedScopes,
+                });
+                const mfaCompletionSuccessOff = onEvent({
+                    event: 'mfaCompletionSuccess',
+                    listener: ({ mfaToken }) => deferred.resolve(mfaToken),
+                }, dynamicClient);
+                const onAuthFlowCloseHandler = () => deferred.reject(new Error('MFA view closed'));
+                dynamicEvents.on('authFlowClose', onAuthFlowCloseHandler);
+                deferred.promise.finally(() => {
+                    mfaCompletionSuccessOff();
+                    dynamicEvents.off('authFlowClose', onAuthFlowCloseHandler);
+                });
+                return deferred.promise;
+            }
+            default:
+                throw new Error('Error determining MFA method to use');
         }
-    }), [connectAndSign, credentialId, setError, userWallets]);
-    return { resetState, sendOtp, state, verifyOtp, verifyWallet };
+    }), [
+        authenticatePasskeyMFA$1,
+        dynamicClient,
+        getUserMfaMethods,
+        pushView,
+        setShowAuthFlow,
+    ]);
+    return {
+        isStepUpRequired,
+        promptMfa,
+        resetState,
+        sendOtp,
+        state,
+        verifyOtp,
+        verifyPasskeyMfa,
+        verifyRecoveryCode,
+        verifyTotpMfa,
+        verifyWallet,
+    };
 };
 
 export { useStepUpAuthentication };

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

@@ -50,9 +50,10 @@ const useWalletConnectorNetwork = (walletConnector, { onChange } = { onChange: (
         },
     });
     useWalletConnectorEvent.useWalletConnectorEvent(walletConnector || undefined, 'chainChange', ({ chain }) => {
-        // STARK and STELLAR use string chainIds; others use numeric
+        // STARK, STELLAR and ALEO use string chainIds; others use numeric
         const useChainAsString = (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) === 'STARK' ||
-            (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) === 'STELLAR';
+            (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) === 'STELLAR' ||
+            (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) === 'ALEO';
         const parsedChain = useChainAsString ? chain : parseInt(chain);
         setNetwork(parsedChain);
         onChange === null || onChange === void 0 ? void 0 : onChange(parsedChain);

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

@@ -46,9 +46,10 @@ const useWalletConnectorNetwork = (walletConnector, { onChange } = { onChange: (
         },
     });
     useWalletConnectorEvent(walletConnector || undefined, 'chainChange', ({ chain }) => {
-        // STARK and STELLAR use string chainIds; others use numeric
+        // STARK, STELLAR and ALEO use string chainIds; others use numeric
         const useChainAsString = (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) === 'STARK' ||
-            (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) === 'STELLAR';
+            (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) === 'STELLAR' ||
+            (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) === 'ALEO';
         const parsedChain = useChainAsString ? chain : parseInt(chain);
         setNetwork(parsedChain);
         onChange === null || onChange === void 0 ? void 0 : onChange(parsedChain);

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

@@ -114,18 +114,22 @@ require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 const UserPhoneField = ({ onChange, value: phone, onBlur, disabled, label, required, error, name, verify, }) => {
     const { selectedPhoneCountry } = FieldsStateContext.useFieldsState();
     const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
+    const initialPhoneRef = React.useRef(phone);
+    const onChangeRef = React.useRef(onChange);
+    const nameRef = React.useRef(name);
+    onChangeRef.current = onChange;
+    nameRef.current = name;
     const handleUpdate = React.useCallback(({ country, phone: newPhone }) => {
         selectedPhoneCountry.current = country;
-        if (newPhone !== phone)
-            onChange({
-                target: { name, value: newPhone },
-            });
-    }, [onChange, phone, name, selectedPhoneCountry]);
+        onChangeRef.current({
+            target: { name: nameRef.current, value: newPhone },
+        });
+    }, [selectedPhoneCountry]);
     const countries = React.useMemo(() => {
         const enabledCountries = getSupportedCountriesForVerificationFromProjectSettings.getSupportedCountriesForVerificationFromProjectSettings(projectSettings);
         return getCustomCountries.getCustomCountries(verify ? getDefaultCountriesIfEmpty.getDefaultCountriesIfEmpty(enabledCountries) : undefined);
     }, [verify, projectSettings]);
-    return (jsxRuntime.jsx(PhoneNumberField.PhoneNumberField, { countries: countries, initialPhone: phone, disabled: disabled, onUpdate: handleUpdate, onBlur: onBlur, label: label, appendRight: !disabled && !required ? (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', className: 'user-phone-field__optional-label', children: "Optional" })) : undefined, error: error }));
+    return (jsxRuntime.jsx(PhoneNumberField.PhoneNumberField, { countries: countries, initialPhone: initialPhoneRef.current, disabled: disabled, onUpdate: handleUpdate, onBlur: onBlur, label: label, appendRight: !disabled && !required ? (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', className: 'user-phone-field__optional-label', children: "Optional" })) : undefined, error: error }));
 };
 
 exports.UserPhoneField = UserPhoneField;

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

@@ -1,6 +1,6 @@
 'use client'
 import { jsx } from 'react/jsx-runtime';
-import { useCallback, useMemo } from 'react';
+import { useRef, useCallback, useMemo } from 'react';
 import '@dynamic-labs/utils';
 import '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import 'react-i18next';
@@ -110,18 +110,22 @@ import '../../../../components/Popper/PopperContext/PopperContext.js';
 const UserPhoneField = ({ onChange, value: phone, onBlur, disabled, label, required, error, name, verify, }) => {
     const { selectedPhoneCountry } = useFieldsState();
     const { projectSettings } = useInternalDynamicContext();
+    const initialPhoneRef = useRef(phone);
+    const onChangeRef = useRef(onChange);
+    const nameRef = useRef(name);
+    onChangeRef.current = onChange;
+    nameRef.current = name;
     const handleUpdate = useCallback(({ country, phone: newPhone }) => {
         selectedPhoneCountry.current = country;
-        if (newPhone !== phone)
-            onChange({
-                target: { name, value: newPhone },
-            });
-    }, [onChange, phone, name, selectedPhoneCountry]);
+        onChangeRef.current({
+            target: { name: nameRef.current, value: newPhone },
+        });
+    }, [selectedPhoneCountry]);
     const countries = useMemo(() => {
         const enabledCountries = getSupportedCountriesForVerificationFromProjectSettings(projectSettings);
         return getCustomCountries(verify ? getDefaultCountriesIfEmpty(enabledCountries) : undefined);
     }, [verify, projectSettings]);
-    return (jsx(PhoneNumberField, { countries: countries, initialPhone: phone, disabled: disabled, onUpdate: handleUpdate, onBlur: onBlur, label: label, appendRight: !disabled && !required ? (jsx(Typography, { variant: 'body_small', color: 'secondary', className: 'user-phone-field__optional-label', children: "Optional" })) : undefined, error: error }));
+    return (jsx(PhoneNumberField, { countries: countries, initialPhone: initialPhoneRef.current, disabled: disabled, onUpdate: handleUpdate, onBlur: onBlur, label: label, appendRight: !disabled && !required ? (jsx(Typography, { variant: 'body_small', color: 'secondary', className: 'user-phone-field__optional-label', children: "Optional" })) : undefined, error: error }));
 };
 
 export { UserPhoneField };

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

@@ -245,15 +245,16 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
         }
         return baseClass;
     };
-    const contentHeader = (jsxRuntime.jsxs("div", { children: [primaryWallet &&
-                isSmartWallet(primaryWallet) &&
-                !isLoading &&
-                data &&
-                !error && (jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__zerodev-warning', children: [jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__zerodev-warning__title-row', children: [jsxRuntime.jsx(info.ReactComponent, { className: 'embedded-reveal-view__zerodev-warning__icon' }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'bold', copykey: 'dyn_embedded_reveal.aa_warning.title', children: t('dyn_embedded_reveal.aa_warning.title') })] }), jsxRuntime.jsxs(Typography.Typography, { variant: 'body_normal', weight: 'regular', copykey: 'dyn_embedded_reveal.aa_warning.subtitle', children: [t('dyn_embedded_reveal.aa_warning.subtitle'), jsxRuntime.jsx("button", { onClick: () => {
-                                    setShowAuthFlow(false);
-                                    setDynamicWidgetView('send-balance');
-                                }, className: 'embedded-reveal-view__zerodev-warning__link-button', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'primary', className: 'underline', copykey: 'dyn_embedded_reveal.aa_warning.button', children: t('dyn_embedded_reveal.aa_warning.button') }) })] })] })), jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__description', children: !hasInjectedCredential && (jsxRuntime.jsx("div", { className: 'embedded-reveal-view__header', children: jsxRuntime.jsx("div", { className: 'embedded-reveal-view__header__hero', children: jsxRuntime.jsx(exportEmbeddedHero.ReactComponent, {}) }) })) })] }));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: isPromptForExport ? null : closeButton, children: jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: title }) }), jsxRuntime.jsx("div", { className: 'embedded-reveal-view', children: jsxRuntime.jsxs("div", { className: getBodyClassName(), children: [(!isWaasWallet ||
+    const isEip7702SmartWallet = Boolean(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id.endsWith('-zerodev'));
+    const isErc4337SmartWallet = Boolean(primaryWallet && isSmartWallet(primaryWallet)) &&
+        !isEip7702SmartWallet;
+    const shouldShowAaWarning = isErc4337SmartWallet && !isLoading && Boolean(data) && !error;
+    const aaWarning = shouldShowAaWarning && (jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__zerodev-warning', children: [jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__zerodev-warning__title-row', children: [jsxRuntime.jsx(info.ReactComponent, { className: 'embedded-reveal-view__zerodev-warning__icon' }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'bold', copykey: 'dyn_embedded_reveal.aa_warning.title', children: t('dyn_embedded_reveal.aa_warning.title') })] }), jsxRuntime.jsxs(Typography.Typography, { variant: 'body_normal', weight: 'regular', copykey: 'dyn_embedded_reveal.aa_warning.subtitle', children: [t('dyn_embedded_reveal.aa_warning.subtitle'), jsxRuntime.jsx("button", { onClick: () => {
+                            setShowAuthFlow(false);
+                            setDynamicWidgetView('send-balance');
+                        }, className: 'embedded-reveal-view__zerodev-warning__link-button', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'primary', className: 'underline', copykey: 'dyn_embedded_reveal.aa_warning.button', children: t('dyn_embedded_reveal.aa_warning.button') }) })] })] }));
+    const contentHeader = (jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__description', children: !hasInjectedCredential && (jsxRuntime.jsx("div", { className: 'embedded-reveal-view__header', children: jsxRuntime.jsx("div", { className: 'embedded-reveal-view__header__hero', children: jsxRuntime.jsx(exportEmbeddedHero.ReactComponent, {}) }) })) }) }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: isPromptForExport ? null : closeButton, children: jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: title }) }), jsxRuntime.jsx("div", { className: 'embedded-reveal-view', children: jsxRuntime.jsxs("div", { className: getBodyClassName(), children: [aaWarning, (!isWaasWallet ||
                             !hasInjectedCredential ||
                             title !== credentialTitle) &&
                             contentHeader, (isTurnkeyWallet || isWaasWallet) && (jsxRuntime.jsx(EmbeddedWalletExport.EmbeddedWalletExport, { wallet: wallet, isTurnkeyWallet: isTurnkeyWallet, isWaasWallet: isWaasWallet, data: data, onIframeContainerRef: setIframeContainerRef, isVisible: !title.includes('Agree') })), hasInjectedCredential ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonPadding: 'medium', buttonVariant: 'brand-primary', onClick: () => {