@dynamic-labs/sdk-react-core 4.32.1-preview.0 → 4.32.1

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

@@ -22,7 +22,7 @@ import '@dynamic-labs/multi-wallet';
 import 'react-international-phone';
 import '../../../store/state/nonce/nonce.js';
 import '@dynamic-labs-sdk/client/core';
-import '../../../client/client.js';
+import { useDynamicClient } from '../../../client/client.js';
 import '@dynamic-labs-sdk/client';
 import '../../../config/ApiEndpoint.js';
 import '../../../store/state/projectSettings/projectSettings.js';
@@ -105,6 +105,7 @@ const usePromptMfaAuth = () => {
     const { pushView } = useViewContext();
     const getUserMfaMethods = useGetUserMfaMethods();
     const authenticatePasskeyMFA = useAuthenticatePasskeyMFA();
+    const dynamicClient = useDynamicClient();
     const promptMfaAuth = useCallback((props) => __awaiter(void 0, void 0, void 0, function* () {
         const methods = yield getUserMfaMethods();
         const allMethods = [
@@ -141,17 +142,47 @@ const usePromptMfaAuth = () => {
                     authenticatePasskeyPromise,
                     createMfaToken: props === null || props === void 0 ? void 0 : props.createMfaToken,
                 });
-                break;
+                // Return the promise so callers can await MFA completion
+                return authenticatePasskeyPromise;
             }
-            case MFADeviceType.Totp:
+            case MFADeviceType.Totp: {
                 pushView('mfa-verification', {
                     createMfaToken: props === null || props === void 0 ? void 0 : props.createMfaToken,
                 });
-                break;
+                // Return a promise that resolves when mfaToken becomes available
+                return new Promise((resolve, reject) => {
+                    const maxAttempts = 50; // Maximum number of retry attempts
+                    const initialDelay = 100; // Initial delay in milliseconds
+                    const maxDelay = 5000; // Maximum delay between retries
+                    let attempts = 0;
+                    const checkForToken = () => {
+                        attempts++;
+                        const mfaToken = dynamicClient === null || dynamicClient === void 0 ? void 0 : dynamicClient.mfaToken;
+                        if (mfaToken) {
+                            resolve(mfaToken);
+                        }
+                        else if (attempts >= maxAttempts) {
+                            reject(new Error('MFA token not available after maximum retry attempts'));
+                        }
+                        else {
+                            // Exponential backoff with a maximum delay
+                            const delay = Math.min(initialDelay * Math.pow(1.5, attempts - 1), maxDelay);
+                            setTimeout(checkForToken, delay);
+                        }
+                    };
+                    checkForToken();
+                });
+            }
             default:
                 throw new Error('Error determining MFA method to use');
         }
-    }), [authenticatePasskeyMFA, getUserMfaMethods, pushView, setShowAuthFlow]);
+    }), [
+        authenticatePasskeyMFA,
+        dynamicClient === null || dynamicClient === void 0 ? void 0 : dynamicClient.mfaToken,
+        getUserMfaMethods,
+        pushView,
+        setShowAuthFlow,
+    ]);
     return promptMfaAuth;
 };
 

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

@@ -251,6 +251,7 @@ const useSocialAccounts = () => {
     }) {
         return connectSocialAccount({
             authMode: 'signin',
+            isHeadlessSocialSignIn: true,
             payingWithDynamic,
             provider,
             redirectUrl,

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

@@ -247,6 +247,7 @@ const useSocialAccounts = () => {
     }) {
         return connectSocialAccount({
             authMode: 'signin',
+            isHeadlessSocialSignIn: true,
             payingWithDynamic,
             provider,
             redirectUrl,

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

@@ -372,7 +372,7 @@ const useSocialAuth = ({ onSettled, onError, onFarcasterUrl, }) => {
         shouldRegisterSessionKeysOnSignin,
         signInAccount,
     ]);
-    const connectSocialAccount = React.useCallback((_d) => _tslib.__awaiter(void 0, [_d], void 0, function* ({ authMode, provider, validator, captchaToken, triggerFundFromExchangeOnSuccess, payingWithDynamic, redirectUrl, telegramAuthToken, showWidgetAfterConnection, }) {
+    const connectSocialAccount = React.useCallback((_d) => _tslib.__awaiter(void 0, [_d], void 0, function* ({ authMode, provider, validator, captchaToken, isHeadlessSocialSignIn, payingWithDynamic, triggerFundFromExchangeOnSuccess, redirectUrl, telegramAuthToken, showWidgetAfterConnection, }) {
         var _e, _f;
         clearError();
         setIsProcessing(true);
@@ -405,6 +405,7 @@ const useSocialAuth = ({ onSettled, onError, onFarcasterUrl, }) => {
         socialStorage.setSocialStorageFor(provider, {
             captchaToken,
             codeVerifier: usingPkce ? verifier : undefined,
+            isHeadlessSocialSignIn,
             mode: authMode,
             payingWithDynamic,
             showWidgetAfterConnection,

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

@@ -18,6 +18,8 @@ export type ConnectSocialAccountProps = {
     showWidgetAfterConnection?: boolean;
     triggerFundFromExchangeOnSuccess?: ExchangeKeyEnum;
     payingWithDynamic?: PayWithDynamicProps;
+    /** marks the flow as initiated by headless sign-in API */
+    isHeadlessSocialSignIn?: boolean;
 };
 export declare const useSocialAuth: ({ onSettled, onError, onFarcasterUrl, }: UseSocialAuthProps) => {
     readonly checkValidProvider: (provider: ProviderEnum, authMode: SocialAuthMode) => boolean;

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

@@ -368,7 +368,7 @@ const useSocialAuth = ({ onSettled, onError, onFarcasterUrl, }) => {
         shouldRegisterSessionKeysOnSignin,
         signInAccount,
     ]);
-    const connectSocialAccount = useCallback((_d) => __awaiter(void 0, [_d], void 0, function* ({ authMode, provider, validator, captchaToken, triggerFundFromExchangeOnSuccess, payingWithDynamic, redirectUrl, telegramAuthToken, showWidgetAfterConnection, }) {
+    const connectSocialAccount = useCallback((_d) => __awaiter(void 0, [_d], void 0, function* ({ authMode, provider, validator, captchaToken, isHeadlessSocialSignIn, payingWithDynamic, triggerFundFromExchangeOnSuccess, redirectUrl, telegramAuthToken, showWidgetAfterConnection, }) {
         var _e, _f;
         clearError();
         setIsProcessing(true);
@@ -401,6 +401,7 @@ const useSocialAuth = ({ onSettled, onError, onFarcasterUrl, }) => {
         setSocialStorageFor(provider, {
             captchaToken,
             codeVerifier: usingPkce ? verifier : undefined,
+            isHeadlessSocialSignIn,
             mode: authMode,
             payingWithDynamic,
             showWidgetAfterConnection,

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

@@ -25,7 +25,7 @@ require('../../../shared/consts/index.cjs');
 require('../../../store/state/nonce/nonce.cjs');
 var projectSettings = require('../../../store/state/projectSettings/projectSettings.cjs');
 require('../../../locale/locale.cjs');
-require('../../../store/state/dynamicContextProps/dynamicContextProps.cjs');
+var dynamicContextProps = require('../../../store/state/dynamicContextProps/dynamicContextProps.cjs');
 require('../../../store/state/primaryWalletId/primaryWalletId.cjs');
 require('../../../store/state/connectedWalletsInfo/connectedWalletsInfo.cjs');
 require('../../../events/dynamicEvents.cjs');
@@ -45,6 +45,7 @@ require('../../functions/compareChains/compareChains.cjs');
 require('../../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.cjs');
 require('../../../context/ThemeContext/ThemeContext.cjs');
 require('../useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
+var useMutation = require('../useMutation/useMutation.cjs');
 require('bs58');
 require('@dynamic-labs/types');
 require('../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
@@ -105,63 +106,134 @@ require('../../../store/state/multichainBalances.cjs');
 require('../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 var useInternalDynamicContext = require('../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
 
-const useSyncDynamicWaas = () => {
-    const { primaryWallet, setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
-    const { loading: globalLoading } = LoadingContext.useLoadingContext();
-    const { clearStackAndPush } = ViewContext.useViewContext();
-    const user = useOnboardingCompleteUser.useOnboardingCompleteUserProfile();
+// Validate if all required conditions are met for wallet creation
+const useWalletCreationValidation = () => {
+    const user = useOnboardingCompleteUser.useOnboardingCompleteUser();
     const projectSettings$1 = projectSettings.useProjectSettings();
     const walletConnectorOptions = walletOptions.useWalletConnectorOptions();
-    const { createWalletAccount, needsAutoCreateWalletChains } = useDynamicWaas.useDynamicWaas();
+    const { loading: globalLoading } = LoadingContext.useLoadingContext();
+    return React.useCallback(() => {
+        // Check if user is properly authenticated
+        const hasUser = Boolean(user && client.getDynamicClient().user);
+        if (!hasUser) {
+            return { isValid: false, reason: 'User not authenticated' };
+        }
+        if (!projectSettings$1) {
+            return { isValid: false, reason: 'Project settings not loaded' };
+        }
+        if (!walletConnectorOptions.length) {
+            return { isValid: false, reason: 'No wallet connectors available' };
+        }
+        if (globalLoading) {
+            return { isValid: false, reason: 'Authentication in progress' };
+        }
+        return { isValid: true };
+    }, [user, projectSettings$1, walletConnectorOptions, globalLoading]);
+};
+// Manage wallet creation with proper error handling
+const useWalletCreation = () => {
+    const { setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
+    const { clearStackAndPush } = ViewContext.useViewContext();
+    const { createWalletAccount } = useDynamicWaas.useDynamicWaas();
+    const user = useOnboardingCompleteUser.useOnboardingCompleteUser();
+    const environmentId = dynamicContextProps.useEnvironmentId();
+    return useMutation.useMutation((chains) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        const startTime = Date.now();
+        // Log wallet creation initiation to DataDog
+        logger.logger.instrument('Auto wallet creation initiated', {
+            chainCount: chains.length,
+            chains: chains.join(','),
+            environmentId,
+            key: 'auto_wallet_creation_initiated',
+            time: 0,
+            userId: user === null || user === void 0 ? void 0 : user.id,
+        });
+        try {
+            yield createWalletAccount(chains);
+            const duration = Date.now() - startTime;
+            // Log successful wallet creation to DataDog
+            logger.logger.instrument('Auto wallet creation successful', {
+                chainCount: chains.length,
+                chains: chains.join(','),
+                environmentId,
+                key: 'auto_wallet_creation_success',
+                time: duration,
+                userId: user === null || user === void 0 ? void 0 : user.id,
+            });
+        }
+        catch (error) {
+            const duration = Date.now() - startTime;
+            // Log failed wallet creation to DataDog
+            logger.logger.instrument('Auto wallet creation failed', {
+                chainCount: chains.length,
+                chains: chains.join(','),
+                environmentId,
+                error: error instanceof Error ? error.message : 'Unknown error',
+                key: 'auto_wallet_creation_failed',
+                time: duration,
+                userId: user === null || user === void 0 ? void 0 : user.id,
+            });
+            throw error;
+        }
+    }), {
+        onFailure: (error) => {
+            logger.logger.error('Error creating dynamic waas wallet', error);
+            setShowAuthFlow(true);
+            clearStackAndPush('backup-unsuccessful');
+        },
+    });
+};
+/**
+ * Hook that synchronizes Dynamic WaaS wallet creation based on user state and configuration.
+ *
+ * This hook automatically creates embedded wallets for enabled chains when:
+ * - User is authenticated and onboarding is complete
+ * - Project settings allow automatic wallet creation
+ * - Required chains don't already have wallets
+ * - No authentication is currently in progress
+ *
+ * The hook ensures wallet creation only happens once per session until logout.
+ */
+const useSyncDynamicWaas = () => {
+    const { needsAutoCreateWalletChains } = useDynamicWaas.useDynamicWaas();
+    const validateWalletCreation = useWalletCreationValidation();
+    const { mutate: createWallets, isLoading: isCreatingWallets } = useWalletCreation();
     const triggeredCreate = React.useRef(false);
+    // Reset the trigger flag on logout
     useDynamicEvents.useInternalDynamicEvents('logout', () => {
         triggeredCreate.current = false;
     });
-    // this is used to trigger createWalletAccount
-    // ** It must be an useEffect because some of the dependencies are async
-    React.useEffect(() => {
-        // Explanation: if the user just logged out, the user from the hook might still be set
-        // but the client will be null.
-        // And if the user is not onboarding complete yet, the hook won't be set even though the client.user is set.
-        // This is why we check for the user AND the client.user.
-        const hasUser = Boolean(user && client.getDynamicClient().user);
-        const syncDynamicWaas = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-            try {
-                triggeredCreate.current = true;
-                if (needsAutoCreateWalletChains &&
-                    needsAutoCreateWalletChains.length > 0) {
-                    yield createWalletAccount(needsAutoCreateWalletChains);
-                }
-            }
-            catch (error) {
-                logger.logger.error('Error creating dynamic waas wallet', error);
-                setShowAuthFlow(true);
-                clearStackAndPush('backup-unsuccessful');
-            }
-        });
-        const shouldSyncCreateWallet = needsAutoCreateWalletChains &&
-            needsAutoCreateWalletChains.length > 0 &&
-            !triggeredCreate.current;
-        if (!shouldSyncCreateWallet ||
-            !hasUser ||
-            !projectSettings$1 ||
-            !walletConnectorOptions.length || // no connectors to use for the embedded wallet
-            globalLoading // this will be true if auth is in progress
-        ) {
+    // Determine if wallet creation should be triggered
+    const shouldCreateWallets = React.useCallback(() => {
+        if (triggeredCreate.current || isCreatingWallets) {
+            return false;
+        }
+        if (!(needsAutoCreateWalletChains === null || needsAutoCreateWalletChains === void 0 ? void 0 : needsAutoCreateWalletChains.length)) {
+            return false;
+        }
+        const validation = validateWalletCreation();
+        return validation.isValid;
+    }, [needsAutoCreateWalletChains, validateWalletCreation, isCreatingWallets]);
+    // Handle the wallet creation process
+    const handleWalletCreation = React.useCallback(() => {
+        if (!shouldCreateWallets() || !needsAutoCreateWalletChains) {
             return;
         }
-        syncDynamicWaas();
-    }, [
-        user,
-        projectSettings$1,
-        walletConnectorOptions,
-        globalLoading,
-        setShowAuthFlow,
-        createWalletAccount,
-        primaryWallet,
-        needsAutoCreateWalletChains,
-        clearStackAndPush,
-    ]);
+        logger.logger.debug('Auto wallet creation triggered', {
+            chainCount: needsAutoCreateWalletChains.length,
+            chains: needsAutoCreateWalletChains,
+        });
+        // Call the mutation - it handles its own async logic and error handling
+        createWallets(needsAutoCreateWalletChains);
+        // Set the flag immediately to prevent duplicate calls
+        triggeredCreate.current = true;
+    }, [shouldCreateWallets, needsAutoCreateWalletChains, createWallets]);
+    // Effect to trigger wallet creation when conditions are met
+    React.useEffect(() => {
+        if (shouldCreateWallets()) {
+            handleWalletCreation();
+        }
+    }, [shouldCreateWallets, handleWalletCreation]);
 };
 
 exports.useSyncDynamicWaas = useSyncDynamicWaas;

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

@@ -1 +1,12 @@
+/**
+ * Hook that synchronizes Dynamic WaaS wallet creation based on user state and configuration.
+ *
+ * This hook automatically creates embedded wallets for enabled chains when:
+ * - User is authenticated and onboarding is complete
+ * - Project settings allow automatic wallet creation
+ * - Required chains don't already have wallets
+ * - No authentication is currently in progress
+ *
+ * The hook ensures wallet creation only happens once per session until logout.
+ */
 export declare const useSyncDynamicWaas: () => void;

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

@@ -1,6 +1,6 @@
 'use client'
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useRef, useEffect } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 import { getDynamicClient } from '../../../client/client.js';
 import '@dynamic-labs-sdk/client/core';
 import '@dynamic-labs/sdk-api-core';
@@ -21,11 +21,11 @@ import '../../../shared/consts/index.js';
 import '../../../store/state/nonce/nonce.js';
 import { useProjectSettings } from '../../../store/state/projectSettings/projectSettings.js';
 import '../../../locale/locale.js';
-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 '../../../events/dynamicEvents.js';
-import { useOnboardingCompleteUserProfile } from '../../../client/extension/user/useOnboardingCompleteUser/useOnboardingCompleteUser.js';
+import { useOnboardingCompleteUser } from '../../../client/extension/user/useOnboardingCompleteUser/useOnboardingCompleteUser.js';
 import '../../../context/DynamicContext/DynamicContext.js';
 import '../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
 import { useInternalDynamicEvents } from '../events/useDynamicEvents/useDynamicEvents.js';
@@ -41,6 +41,7 @@ import '../../functions/compareChains/compareChains.js';
 import '../../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.js';
 import '../../../context/ThemeContext/ThemeContext.js';
 import '../useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import { useMutation } from '../useMutation/useMutation.js';
 import 'bs58';
 import '@dynamic-labs/types';
 import '../../../context/SocialRedirectContext/SocialRedirectContext.js';
@@ -101,63 +102,134 @@ import '../../../store/state/multichainBalances.js';
 import '../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
 
-const useSyncDynamicWaas = () => {
-    const { primaryWallet, setShowAuthFlow } = useInternalDynamicContext();
-    const { loading: globalLoading } = useLoadingContext();
-    const { clearStackAndPush } = useViewContext();
-    const user = useOnboardingCompleteUserProfile();
+// Validate if all required conditions are met for wallet creation
+const useWalletCreationValidation = () => {
+    const user = useOnboardingCompleteUser();
     const projectSettings = useProjectSettings();
     const walletConnectorOptions = useWalletConnectorOptions();
-    const { createWalletAccount, needsAutoCreateWalletChains } = useDynamicWaas();
+    const { loading: globalLoading } = useLoadingContext();
+    return useCallback(() => {
+        // Check if user is properly authenticated
+        const hasUser = Boolean(user && getDynamicClient().user);
+        if (!hasUser) {
+            return { isValid: false, reason: 'User not authenticated' };
+        }
+        if (!projectSettings) {
+            return { isValid: false, reason: 'Project settings not loaded' };
+        }
+        if (!walletConnectorOptions.length) {
+            return { isValid: false, reason: 'No wallet connectors available' };
+        }
+        if (globalLoading) {
+            return { isValid: false, reason: 'Authentication in progress' };
+        }
+        return { isValid: true };
+    }, [user, projectSettings, walletConnectorOptions, globalLoading]);
+};
+// Manage wallet creation with proper error handling
+const useWalletCreation = () => {
+    const { setShowAuthFlow } = useInternalDynamicContext();
+    const { clearStackAndPush } = useViewContext();
+    const { createWalletAccount } = useDynamicWaas();
+    const user = useOnboardingCompleteUser();
+    const environmentId = useEnvironmentId();
+    return useMutation((chains) => __awaiter(void 0, void 0, void 0, function* () {
+        const startTime = Date.now();
+        // Log wallet creation initiation to DataDog
+        logger.instrument('Auto wallet creation initiated', {
+            chainCount: chains.length,
+            chains: chains.join(','),
+            environmentId,
+            key: 'auto_wallet_creation_initiated',
+            time: 0,
+            userId: user === null || user === void 0 ? void 0 : user.id,
+        });
+        try {
+            yield createWalletAccount(chains);
+            const duration = Date.now() - startTime;
+            // Log successful wallet creation to DataDog
+            logger.instrument('Auto wallet creation successful', {
+                chainCount: chains.length,
+                chains: chains.join(','),
+                environmentId,
+                key: 'auto_wallet_creation_success',
+                time: duration,
+                userId: user === null || user === void 0 ? void 0 : user.id,
+            });
+        }
+        catch (error) {
+            const duration = Date.now() - startTime;
+            // Log failed wallet creation to DataDog
+            logger.instrument('Auto wallet creation failed', {
+                chainCount: chains.length,
+                chains: chains.join(','),
+                environmentId,
+                error: error instanceof Error ? error.message : 'Unknown error',
+                key: 'auto_wallet_creation_failed',
+                time: duration,
+                userId: user === null || user === void 0 ? void 0 : user.id,
+            });
+            throw error;
+        }
+    }), {
+        onFailure: (error) => {
+            logger.error('Error creating dynamic waas wallet', error);
+            setShowAuthFlow(true);
+            clearStackAndPush('backup-unsuccessful');
+        },
+    });
+};
+/**
+ * Hook that synchronizes Dynamic WaaS wallet creation based on user state and configuration.
+ *
+ * This hook automatically creates embedded wallets for enabled chains when:
+ * - User is authenticated and onboarding is complete
+ * - Project settings allow automatic wallet creation
+ * - Required chains don't already have wallets
+ * - No authentication is currently in progress
+ *
+ * The hook ensures wallet creation only happens once per session until logout.
+ */
+const useSyncDynamicWaas = () => {
+    const { needsAutoCreateWalletChains } = useDynamicWaas();
+    const validateWalletCreation = useWalletCreationValidation();
+    const { mutate: createWallets, isLoading: isCreatingWallets } = useWalletCreation();
     const triggeredCreate = useRef(false);
+    // Reset the trigger flag on logout
     useInternalDynamicEvents('logout', () => {
         triggeredCreate.current = false;
     });
-    // this is used to trigger createWalletAccount
-    // ** It must be an useEffect because some of the dependencies are async
-    useEffect(() => {
-        // Explanation: if the user just logged out, the user from the hook might still be set
-        // but the client will be null.
-        // And if the user is not onboarding complete yet, the hook won't be set even though the client.user is set.
-        // This is why we check for the user AND the client.user.
-        const hasUser = Boolean(user && getDynamicClient().user);
-        const syncDynamicWaas = () => __awaiter(void 0, void 0, void 0, function* () {
-            try {
-                triggeredCreate.current = true;
-                if (needsAutoCreateWalletChains &&
-                    needsAutoCreateWalletChains.length > 0) {
-                    yield createWalletAccount(needsAutoCreateWalletChains);
-                }
-            }
-            catch (error) {
-                logger.error('Error creating dynamic waas wallet', error);
-                setShowAuthFlow(true);
-                clearStackAndPush('backup-unsuccessful');
-            }
-        });
-        const shouldSyncCreateWallet = needsAutoCreateWalletChains &&
-            needsAutoCreateWalletChains.length > 0 &&
-            !triggeredCreate.current;
-        if (!shouldSyncCreateWallet ||
-            !hasUser ||
-            !projectSettings ||
-            !walletConnectorOptions.length || // no connectors to use for the embedded wallet
-            globalLoading // this will be true if auth is in progress
-        ) {
+    // Determine if wallet creation should be triggered
+    const shouldCreateWallets = useCallback(() => {
+        if (triggeredCreate.current || isCreatingWallets) {
+            return false;
+        }
+        if (!(needsAutoCreateWalletChains === null || needsAutoCreateWalletChains === void 0 ? void 0 : needsAutoCreateWalletChains.length)) {
+            return false;
+        }
+        const validation = validateWalletCreation();
+        return validation.isValid;
+    }, [needsAutoCreateWalletChains, validateWalletCreation, isCreatingWallets]);
+    // Handle the wallet creation process
+    const handleWalletCreation = useCallback(() => {
+        if (!shouldCreateWallets() || !needsAutoCreateWalletChains) {
             return;
         }
-        syncDynamicWaas();
-    }, [
-        user,
-        projectSettings,
-        walletConnectorOptions,
-        globalLoading,
-        setShowAuthFlow,
-        createWalletAccount,
-        primaryWallet,
-        needsAutoCreateWalletChains,
-        clearStackAndPush,
-    ]);
+        logger.debug('Auto wallet creation triggered', {
+            chainCount: needsAutoCreateWalletChains.length,
+            chains: needsAutoCreateWalletChains,
+        });
+        // Call the mutation - it handles its own async logic and error handling
+        createWallets(needsAutoCreateWalletChains);
+        // Set the flag immediately to prevent duplicate calls
+        triggeredCreate.current = true;
+    }, [shouldCreateWallets, needsAutoCreateWalletChains, createWallets]);
+    // Effect to trigger wallet creation when conditions are met
+    useEffect(() => {
+        if (shouldCreateWallets()) {
+            handleWalletCreation();
+        }
+    }, [shouldCreateWallets, handleWalletCreation]);
 };
 
 export { useSyncDynamicWaas };

package/src/lib/widgets/DynamicWidget/components/PasskeyCard/PasskeyCard.cjs

@@ -8,10 +8,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactI18next = require('react-i18next');
 var iconic = require('@dynamic-labs/iconic');
+var sdkApiCore = require('@dynamic-labs/sdk-api-core');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
-require('@dynamic-labs/sdk-api-core');
 require('../../../../shared/logger.cjs');
 require('@dynamic-labs/wallet-connector-core');
 var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
@@ -104,9 +104,11 @@ require('../../../../../index.cjs');
 require('../../views/ReceiveWalletFunds/ReceiveWalletFunds.cjs');
 require('../../../../store/state/tokenBalances.cjs');
 require('../../../../store/state/multichainBalances.cjs');
+var usePromptMfaAuth = require('../../../../utils/hooks/usePromptMfaAuth/usePromptMfaAuth.cjs');
 require('../../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 var useDeletePasskey = require('../../../../utils/hooks/useDeletePasskey/useDeletePasskey.cjs');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
+var isMfaMethodEnabled = require('../../../../utils/functions/isMfaMethodEnabled/isMfaMethodEnabled.cjs');
 
 const mapPasskeyProviderToIcon = {
     android: jsxRuntime.jsx(iconic.AndroidIcon, {}),
@@ -125,6 +127,7 @@ const PasskeyCard = ({ passkey, onUpdate }) => {
     const { pushView } = ViewContext.useViewContext();
     const { setPasskey, setPasskeyIcon } = PasskeyContext.usePasskeyContext();
     const deletePasskey = useDeletePasskey.useDeletePasskey();
+    const promptMfaAuth = usePromptMfaAuth.usePromptMfaAuth();
     const menuOptions = [
         {
             Icon: null,
@@ -140,6 +143,10 @@ const PasskeyCard = ({ passkey, onUpdate }) => {
         {
             Icon: null,
             callback: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+                const isMfaRequired = isMfaMethodEnabled.isMfaMethodEnabled(sdkApiCore.MFADeviceType.Passkey);
+                if (isMfaRequired) {
+                    yield promptMfaAuth({ createMfaToken: true });
+                }
                 yield deletePasskey(passkey.id);
                 onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate();
             }),

package/src/lib/widgets/DynamicWidget/components/PasskeyCard/PasskeyCard.js

@@ -4,10 +4,10 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AndroidIcon, BraveIcon, ChromeIcon, EdgeIcon, FirefoxIcon, AppleIcon, OperaIcon, SafariIcon } from '@dynamic-labs/iconic';
+import { MFADeviceType } from '@dynamic-labs/sdk-api-core';
 import { Typography } from '../../../../components/Typography/Typography.js';
 import '../../../../context/DynamicContext/DynamicContext.js';
 import '../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
-import '@dynamic-labs/sdk-api-core';
 import '../../../../shared/logger.js';
 import '@dynamic-labs/wallet-connector-core';
 import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
@@ -100,9 +100,11 @@ import '../../../../../index.js';
 import '../../views/ReceiveWalletFunds/ReceiveWalletFunds.js';
 import '../../../../store/state/tokenBalances.js';
 import '../../../../store/state/multichainBalances.js';
+import { usePromptMfaAuth } from '../../../../utils/hooks/usePromptMfaAuth/usePromptMfaAuth.js';
 import '../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import { useDeletePasskey } from '../../../../utils/hooks/useDeletePasskey/useDeletePasskey.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
+import { isMfaMethodEnabled } from '../../../../utils/functions/isMfaMethodEnabled/isMfaMethodEnabled.js';
 
 const mapPasskeyProviderToIcon = {
     android: jsx(AndroidIcon, {}),
@@ -121,6 +123,7 @@ const PasskeyCard = ({ passkey, onUpdate }) => {
     const { pushView } = useViewContext();
     const { setPasskey, setPasskeyIcon } = usePasskeyContext();
     const deletePasskey = useDeletePasskey();
+    const promptMfaAuth = usePromptMfaAuth();
     const menuOptions = [
         {
             Icon: null,
@@ -136,6 +139,10 @@ const PasskeyCard = ({ passkey, onUpdate }) => {
         {
             Icon: null,
             callback: () => __awaiter(void 0, void 0, void 0, function* () {
+                const isMfaRequired = isMfaMethodEnabled(MFADeviceType.Passkey);
+                if (isMfaRequired) {
+                    yield promptMfaAuth({ createMfaToken: true });
+                }
                 yield deletePasskey(passkey.id);
                 onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate();
             }),