@dynamic-labs/sdk-react-core 1.0.0-alpha.6 → 1.0.0-alpha.8

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

@@ -19,10 +19,12 @@ require('../../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 var isProgrammableNetworkSwitchSupported = require('../../functions/isProgrammableNetworkSwitchSupported/isProgrammableNetworkSwitchSupported.cjs');
 var isSupportedNetwork = require('../../functions/isSupportedNetwork/isSupportedNetwork.cjs');
+var useIsLoggedIn = require('../useIsLoggedIn/useIsLoggedIn.cjs');
 
 const useConnectedWalletsNetworkValidation = () => {
-    const { connectedWallets, selectedWalletConnector, setSelectedWalletConnectorKey, setShowAuthFlow, showAuthFlow, bridgeChainsToConnect, sdkHasLoaded, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { connectedWallets, selectedWalletConnector, setSelectedWalletConnectorKey, setShowAuthFlow, bridgeChainsToConnect, sdkHasLoaded, } = useInternalDynamicContext.useInternalDynamicContext();
     const { setView } = ViewContext.useViewContext();
+    const isLoggedIn = useIsLoggedIn.useIsLoggedIn();
     React.useEffect(() => {
         /**
          * This check was added to prevent the "wrong network" modal from appearing
@@ -33,7 +35,7 @@ const useConnectedWalletsNetworkValidation = () => {
          * extra popup because handleLogOut flips sdkHasLoaded to false, so on the
          * next render it will already be false.
          */
-        if (!sdkHasLoaded) {
+        if (!sdkHasLoaded || !isLoggedIn) {
             return;
         }
         const connectedWalletsWithInvalidNetwork = connectedWallets.filter((connectedWallet) => {
@@ -57,14 +59,10 @@ const useConnectedWalletsNetworkValidation = () => {
             const networkNotSupportedView = isProgrammableNetworkSwitchSupported.isProgrammableNetworkSwitchSupported(connectedWalletWithInvalidNetwork.connector)
                 ? 'network-not-supported'
                 : 'network-not-supported-manual';
-            if (!showAuthFlow) {
-                setShowAuthFlow(true);
-            }
+            // Doesn't rerender if it's already true
+            setShowAuthFlow(true);
             setView(networkNotSupportedView);
         }
-        // we need it to remove 'showAuthFlow' property. we don't want to react to it,
-        // because closing modal on network switch causes it to re-open
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         sdkHasLoaded,
         connectedWallets,
@@ -73,6 +71,7 @@ const useConnectedWalletsNetworkValidation = () => {
         setShowAuthFlow,
         setView,
         bridgeChainsToConnect,
+        isLoggedIn,
     ]);
 };
 

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

@@ -15,10 +15,12 @@ import '../../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import { isProgrammableNetworkSwitchSupported } from '../../functions/isProgrammableNetworkSwitchSupported/isProgrammableNetworkSwitchSupported.js';
 import { isSupportedNetwork } from '../../functions/isSupportedNetwork/isSupportedNetwork.js';
+import { useIsLoggedIn } from '../useIsLoggedIn/useIsLoggedIn.js';
 
 const useConnectedWalletsNetworkValidation = () => {
-    const { connectedWallets, selectedWalletConnector, setSelectedWalletConnectorKey, setShowAuthFlow, showAuthFlow, bridgeChainsToConnect, sdkHasLoaded, } = useInternalDynamicContext();
+    const { connectedWallets, selectedWalletConnector, setSelectedWalletConnectorKey, setShowAuthFlow, bridgeChainsToConnect, sdkHasLoaded, } = useInternalDynamicContext();
     const { setView } = useViewContext();
+    const isLoggedIn = useIsLoggedIn();
     useEffect(() => {
         /**
          * This check was added to prevent the "wrong network" modal from appearing
@@ -29,7 +31,7 @@ const useConnectedWalletsNetworkValidation = () => {
          * extra popup because handleLogOut flips sdkHasLoaded to false, so on the
          * next render it will already be false.
          */
-        if (!sdkHasLoaded) {
+        if (!sdkHasLoaded || !isLoggedIn) {
             return;
         }
         const connectedWalletsWithInvalidNetwork = connectedWallets.filter((connectedWallet) => {
@@ -53,14 +55,10 @@ const useConnectedWalletsNetworkValidation = () => {
             const networkNotSupportedView = isProgrammableNetworkSwitchSupported(connectedWalletWithInvalidNetwork.connector)
                 ? 'network-not-supported'
                 : 'network-not-supported-manual';
-            if (!showAuthFlow) {
-                setShowAuthFlow(true);
-            }
+            // Doesn't rerender if it's already true
+            setShowAuthFlow(true);
             setView(networkNotSupportedView);
         }
-        // we need it to remove 'showAuthFlow' property. we don't want to react to it,
-        // because closing modal on network switch causes it to re-open
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         sdkHasLoaded,
         connectedWallets,
@@ -69,6 +67,7 @@ const useConnectedWalletsNetworkValidation = () => {
         setShowAuthFlow,
         setView,
         bridgeChainsToConnect,
+        isLoggedIn,
     ]);
 };
 

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

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

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

@@ -0,0 +1,83 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.cjs');
+var createEmbeddedWalletWithPasskey = require('../../../views/Passkey/utils/createEmbeddedWalletWithPasskey/createEmbeddedWalletWithPasskey.cjs');
+var findPasskeyEmailWalletConnector = require('../../../views/Passkey/utils/findPasskeyEmailWalletConnector/findPasskeyEmailWalletConnector.cjs');
+var createPregeneratedWallet = require('../../../views/Passkey/utils/createPregeneratedWallet/createPregeneratedWallet.cjs');
+var createUserProfile = require('../../functions/createUserProfile/createUserProfile.cjs');
+require('@dynamic-labs/sdk-api');
+var logger = require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('react/jsx-runtime');
+require('../../../context/ViewContext/ViewContext.cjs');
+require('react');
+require('@dynamic-labs/wallet-book');
+require('../../constants/colors.cjs');
+require('../../../shared/utils/classes/storage/localStorage.cjs');
+require('viem');
+require('@dynamic-labs/utils');
+require('../../../shared/consts/index.cjs');
+require('@dynamic-labs/multi-wallet');
+var index = require('../../functions/storeAuthToken/index.cjs');
+var smartWallet = require('../useWalletConnectors/utils/smartWallet/smartWallet.cjs');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
+var useMutation = require('../useMutation/useMutation.cjs');
+
+const useCreateDynamicEmbeddedWalletMutation = () => {
+    const { setPrimaryWalletId, internalEvents, setCallback, setUser, user, setShowAuthFlow, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { mutate: createDynamicEmbeddedWalletMutation, isLoading, error, } = useMutation.useMutation(({ authToken, decodedJwt, environmentId, wallets, withAuthenticator, }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const createEmbeddedWalletMethodToUse = withAuthenticator
+            ? createEmbeddedWalletWithPasskey.createEmbeddedWalletWithPasskey
+            : createPregeneratedWallet.createPregeneratedWallet;
+        const { embeddedWalletVerifiedCredential, jwt, decodedJwt: updatedDecodedJwt, walletConnector, } = yield createEmbeddedWalletMethodToUse({
+            authToken,
+            environmentId,
+            user: user !== null && user !== void 0 ? user : createUserProfile.createUserProfile(decodedJwt),
+            walletConnector: findPasskeyEmailWalletConnector.findPasskeyEmailWalletConnector(wallets),
+        });
+        const passkeyWallet = {
+            address: (yield walletConnector.fetchPublicAddress()) || '',
+            chain: walletConnector.connectedChain || '',
+            connected: true,
+            connector: walletConnector,
+            id: embeddedWalletVerifiedCredential.id,
+        };
+        internalEvents.current.emit('embeddedWalletCreated', passkeyWallet);
+        const smartWallet$1 = smartWallet.findSmartWallet(embeddedWalletVerifiedCredential, updatedDecodedJwt.verifiedCredentials);
+        if (smartWallet$1) {
+            yield smartWallet.initializeSmartWallet({
+                account: smartWallet$1,
+                verifiedCredentials: updatedDecodedJwt.verifiedCredentials,
+                walletOptions: wallets,
+            });
+            setPrimaryWalletId(smartWallet$1.id);
+        }
+        else {
+            setPrimaryWalletId(embeddedWalletVerifiedCredential.id);
+        }
+        index.storeAuthToken(jwt);
+        setUser(createUserProfile.createUserProfile(updatedDecodedJwt));
+        setShowAuthFlow(false);
+        const turnkeyVerifiedCredentials = (_a = updatedDecodedJwt === null || updatedDecodedJwt === void 0 ? void 0 : updatedDecodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'));
+        setCallback('embeddedWalletCreated', {
+            email: (turnkeyVerifiedCredentials === null || turnkeyVerifiedCredentials === void 0 ? void 0 : turnkeyVerifiedCredentials.email) || '',
+            verifiedCredential: turnkeyVerifiedCredentials,
+        });
+    }), {
+        onFailure: (err) => {
+            logger.logger.error('Failed to create embedded wallet', err);
+            internalEvents.current.emit('embeddedWalletFailed', err);
+        },
+    });
+    return {
+        createDynamicEmbeddedWalletMutation,
+        error,
+        isLoading,
+    };
+};
+
+exports.useCreateDynamicEmbeddedWalletMutation = useCreateDynamicEmbeddedWalletMutation;

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

@@ -0,0 +1,15 @@
+import { DynamicJwt } from '@dynamic-labs/sdk-api';
+import { WalletOption } from '../../../shared';
+type MutationProps = {
+    authToken: string | undefined;
+    environmentId: string;
+    wallets: WalletOption[];
+    decodedJwt: DynamicJwt;
+    withAuthenticator: boolean;
+};
+export declare const useCreateDynamicEmbeddedWalletMutation: () => {
+    createDynamicEmbeddedWalletMutation: (variables: MutationProps) => void;
+    error: unknown;
+    isLoading: boolean;
+};
+export {};

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

@@ -0,0 +1,79 @@
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
+import { createEmbeddedWalletWithPasskey } from '../../../views/Passkey/utils/createEmbeddedWalletWithPasskey/createEmbeddedWalletWithPasskey.js';
+import { findPasskeyEmailWalletConnector } from '../../../views/Passkey/utils/findPasskeyEmailWalletConnector/findPasskeyEmailWalletConnector.js';
+import { createPregeneratedWallet } from '../../../views/Passkey/utils/createPregeneratedWallet/createPregeneratedWallet.js';
+import { createUserProfile } from '../../functions/createUserProfile/createUserProfile.js';
+import '@dynamic-labs/sdk-api';
+import { logger } from '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
+import '../../../context/ViewContext/ViewContext.js';
+import 'react';
+import '@dynamic-labs/wallet-book';
+import '../../constants/colors.js';
+import '../../../shared/utils/classes/storage/localStorage.js';
+import 'viem';
+import '@dynamic-labs/utils';
+import '../../../shared/consts/index.js';
+import '@dynamic-labs/multi-wallet';
+import { storeAuthToken } from '../../functions/storeAuthToken/index.js';
+import { findSmartWallet, initializeSmartWallet } from '../useWalletConnectors/utils/smartWallet/smartWallet.js';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
+import { useMutation } from '../useMutation/useMutation.js';
+
+const useCreateDynamicEmbeddedWalletMutation = () => {
+    const { setPrimaryWalletId, internalEvents, setCallback, setUser, user, setShowAuthFlow, } = useInternalDynamicContext();
+    const { mutate: createDynamicEmbeddedWalletMutation, isLoading, error, } = useMutation(({ authToken, decodedJwt, environmentId, wallets, withAuthenticator, }) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const createEmbeddedWalletMethodToUse = withAuthenticator
+            ? createEmbeddedWalletWithPasskey
+            : createPregeneratedWallet;
+        const { embeddedWalletVerifiedCredential, jwt, decodedJwt: updatedDecodedJwt, walletConnector, } = yield createEmbeddedWalletMethodToUse({
+            authToken,
+            environmentId,
+            user: user !== null && user !== void 0 ? user : createUserProfile(decodedJwt),
+            walletConnector: findPasskeyEmailWalletConnector(wallets),
+        });
+        const passkeyWallet = {
+            address: (yield walletConnector.fetchPublicAddress()) || '',
+            chain: walletConnector.connectedChain || '',
+            connected: true,
+            connector: walletConnector,
+            id: embeddedWalletVerifiedCredential.id,
+        };
+        internalEvents.current.emit('embeddedWalletCreated', passkeyWallet);
+        const smartWallet = findSmartWallet(embeddedWalletVerifiedCredential, updatedDecodedJwt.verifiedCredentials);
+        if (smartWallet) {
+            yield initializeSmartWallet({
+                account: smartWallet,
+                verifiedCredentials: updatedDecodedJwt.verifiedCredentials,
+                walletOptions: wallets,
+            });
+            setPrimaryWalletId(smartWallet.id);
+        }
+        else {
+            setPrimaryWalletId(embeddedWalletVerifiedCredential.id);
+        }
+        storeAuthToken(jwt);
+        setUser(createUserProfile(updatedDecodedJwt));
+        setShowAuthFlow(false);
+        const turnkeyVerifiedCredentials = (_a = updatedDecodedJwt === null || updatedDecodedJwt === void 0 ? void 0 : updatedDecodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'));
+        setCallback('embeddedWalletCreated', {
+            email: (turnkeyVerifiedCredentials === null || turnkeyVerifiedCredentials === void 0 ? void 0 : turnkeyVerifiedCredentials.email) || '',
+            verifiedCredential: turnkeyVerifiedCredentials,
+        });
+    }), {
+        onFailure: (err) => {
+            logger.error('Failed to create embedded wallet', err);
+            internalEvents.current.emit('embeddedWalletFailed', err);
+        },
+    });
+    return {
+        createDynamicEmbeddedWalletMutation,
+        error,
+        isLoading,
+    };
+};
+
+export { useCreateDynamicEmbeddedWalletMutation };

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

@@ -5,9 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var reactI18next = require('react-i18next');
 var iconic = require('@dynamic-labs/iconic');
+var useIsTurnkeyWallet = require('../useIsTurnkeyWallet/useIsTurnkeyWallet.cjs');
 
 const useDynamicLayoutData = ({ view, authMode, }) => {
     const { t } = reactI18next.useTranslation();
+    const { isTurnkeyWalletWithoutAuthenticator } = useIsTurnkeyWallet.useIsTurnkeyWallet();
     if (view === 'no-access') {
         const headerData = {
             heading: t('dyn_no_access.title'),
@@ -67,13 +69,19 @@ const useDynamicLayoutData = ({ view, authMode, }) => {
             heading: 'Update Network',
         },
         'passkey-recovery-bundle': {
-            heading: t('dyn_passkey_recovery.code.title'),
+            heading: isTurnkeyWalletWithoutAuthenticator
+                ? t('dyn_passkey_secure_modal.code.title')
+                : t('dyn_passkey_recovery.code.title'),
         },
         'passkey-recovery-complete': {
-            heading: t('dyn_passkey_recovery.complete.title'),
+            heading: isTurnkeyWalletWithoutAuthenticator
+                ? t('dyn_passkey_secure_modal.complete.title')
+                : t('dyn_passkey_recovery.complete.title'),
         },
         'passkey-recovery-start': {
-            heading: t('dyn_passkey_recovery.start.title'),
+            heading: isTurnkeyWalletWithoutAuthenticator
+                ? t('dyn_passkey_secure_modal.start.title')
+                : t('dyn_passkey_recovery.start.title'),
         },
         'pending-connect': {
             heading: t('dyn_login.connect_wallet.title'),

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

@@ -1,9 +1,11 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useTranslation } from 'react-i18next';
 import { WalletConnectIcon } from '@dynamic-labs/iconic';
+import { useIsTurnkeyWallet } from '../useIsTurnkeyWallet/useIsTurnkeyWallet.js';
 
 const useDynamicLayoutData = ({ view, authMode, }) => {
     const { t } = useTranslation();
+    const { isTurnkeyWalletWithoutAuthenticator } = useIsTurnkeyWallet();
     if (view === 'no-access') {
         const headerData = {
             heading: t('dyn_no_access.title'),
@@ -63,13 +65,19 @@ const useDynamicLayoutData = ({ view, authMode, }) => {
             heading: 'Update Network',
         },
         'passkey-recovery-bundle': {
-            heading: t('dyn_passkey_recovery.code.title'),
+            heading: isTurnkeyWalletWithoutAuthenticator
+                ? t('dyn_passkey_secure_modal.code.title')
+                : t('dyn_passkey_recovery.code.title'),
         },
         'passkey-recovery-complete': {
-            heading: t('dyn_passkey_recovery.complete.title'),
+            heading: isTurnkeyWalletWithoutAuthenticator
+                ? t('dyn_passkey_secure_modal.complete.title')
+                : t('dyn_passkey_recovery.complete.title'),
         },
         'passkey-recovery-start': {
-            heading: t('dyn_passkey_recovery.start.title'),
+            heading: isTurnkeyWalletWithoutAuthenticator
+                ? t('dyn_passkey_secure_modal.start.title')
+                : t('dyn_passkey_recovery.start.title'),
         },
         'pending-connect': {
             heading: t('dyn_login.connect_wallet.title'),

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

@@ -26,11 +26,13 @@ var getUserWalletsFromVerifiedCredentials = require('../../functions/getUserWall
 var isEmbeddedWalletPresent = require('../../functions/isEmbeddedWalletPresent/isEmbeddedWalletPresent.cjs');
 var isTurnkeyEnabled = require('../../functions/isTurnkeyEnabled/isTurnkeyEnabled.cjs');
 var smartWallet = require('../useWalletConnectors/utils/smartWallet/smartWallet.cjs');
+var useCreateDynamicEmbeddedWalletMutation = require('../useCreateDynamicEmbeddedWalletMutation/useCreateDynamicEmbeddedWalletMutation.cjs');
 
 // Hook exposed to customers and used internally to trigger embedded wallet creation
 const useEmbeddedWallet = () => {
-    const { projectSettings, onboardingOnlyJwt, setPrimaryWalletId, wallets, internalSetShowAuthFlow, internalEvents, primaryWallet, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { projectSettings, onboardingOnlyJwt, setPrimaryWalletId, wallets, internalSetShowAuthFlow, internalEvents, primaryWallet, environmentId, } = useInternalDynamicContext.useInternalDynamicContext();
     const { setView } = ViewContext.useViewContext();
+    const { createDynamicEmbeddedWalletMutation } = useCreateDynamicEmbeddedWalletMutation.useCreateDynamicEmbeddedWalletMutation();
     const userHasEmbeddedWallet = () => {
         var _a;
         const jwt = (_a = getAuthToken.getAuthToken()) !== null && _a !== void 0 ? _a : onboardingOnlyJwt;
@@ -39,36 +41,25 @@ const useEmbeddedWallet = () => {
         }
         return isEmbeddedWalletPresent.isEmbeddedWalletPresent(jwt);
     };
-    const createEmbeddedWallet = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _a;
-        const jwt = (_a = getAuthToken.getAuthToken()) !== null && _a !== void 0 ? _a : onboardingOnlyJwt;
-        if (!jwt) {
-            throw new Error('User is not logged in');
-        }
-        if (!isTurnkeyEnabled.isTurnkeyEnabled(projectSettings)) {
-            throw new Error('Passkey embedded wallet is not enabled. Go to the dashboard and make sure to have both Turnkey/Passkey Embedded wallets and at least one EVM network enabled. Also, check if EthereumWalletConnectors is in the  DynamicContextProvider > settings > walletConnectors.');
-        }
-        const userWaletsCredentials = getUserWalletsFromVerifiedCredentials.getUserWalletsFromVerifiedCredentials(jwt);
-        // if user doesn't have a wallet yet, show the passkey view to create an embedded wallet
-        if (!(userWaletsCredentials === null || userWaletsCredentials === void 0 ? void 0 : userWaletsCredentials.length)) {
-            return startEmbeddedWalletCreationFlow();
-        }
-        internalSetShowAuthFlow(false);
-        const embeddedWalletVerifiedCredential = findEmbeddedWalletFromVerifiedCredentials.findEmbeddedWalletFromVerifiedCredentials(jwt);
-        // if user logged in with MM for example, just continue the flow
-        if (!embeddedWalletVerifiedCredential) {
-            return Promise.resolve(primaryWallet);
-        }
-        // if user already has embedded wallet, returns it
-        return returnEmbeddedWallet(jwt, embeddedWalletVerifiedCredential);
+    const startPregeneratedWalletCreationFlow = React.useCallback((jwt, decodedJwt) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        createDynamicEmbeddedWalletMutation({
+            authToken: jwt,
+            decodedJwt,
+            environmentId,
+            wallets,
+            withAuthenticator: false,
+        });
+        internalSetShowAuthFlow(false); // close email otp pin modal
+        return new Promise((resolve, reject) => {
+            internalEvents.current.once('embeddedWalletCreated', (wallet) => resolve(wallet));
+            internalEvents.current.once('embeddedWalletFailed', (error) => reject(error));
+        });
     }), [
-        internalEvents,
-        internalSetShowAuthFlow,
-        onboardingOnlyJwt,
-        projectSettings,
-        setPrimaryWalletId,
-        setView,
+        createDynamicEmbeddedWalletMutation,
+        environmentId,
         wallets,
+        internalSetShowAuthFlow,
+        internalEvents,
     ]);
     const startEmbeddedWalletCreationFlow = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         internalSetShowAuthFlow(true);
@@ -88,12 +79,12 @@ const useEmbeddedWallet = () => {
         });
     });
     const returnEmbeddedWallet = (jwt, embeddedWalletVerifiedCredential) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _b, _c, _d;
+        var _a, _b, _c;
         const decodedJwt = decodeJwt.decodeJwt(jwt);
         const turnkeyWallet = findTurnkeyWallet.findTurnkeyWallet(wallets);
         // if user already has embedded wallet, set it as primary wallet
         if (decodedJwt) {
-            (_b = turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) === null || _b === void 0 ? void 0 : _b.setVerifiedCredentials(decodedJwt.verifiedCredentials);
+            (_a = turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) === null || _a === void 0 ? void 0 : _a.setVerifiedCredentials(decodedJwt.verifiedCredentials);
             const smartWallet$1 = smartWallet.findSmartWallet(embeddedWalletVerifiedCredential, decodedJwt.verifiedCredentials);
             if (smartWallet$1) {
                 yield smartWallet.initializeSmartWallet({
@@ -108,14 +99,47 @@ const useEmbeddedWallet = () => {
             }
         }
         const passkeyWallet = {
-            address: (yield ((_c = turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) === null || _c === void 0 ? void 0 : _c.fetchPublicAddress())) || '',
-            chain: ((_d = turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) === null || _d === void 0 ? void 0 : _d.connectedChain) || '',
+            address: (yield ((_b = turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) === null || _b === void 0 ? void 0 : _b.fetchPublicAddress())) || '',
+            chain: ((_c = turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) === null || _c === void 0 ? void 0 : _c.connectedChain) || '',
             connected: true,
             connector: (turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) || {},
             id: embeddedWalletVerifiedCredential.id,
         };
         return Promise.resolve(passkeyWallet);
     });
+    const createEmbeddedWallet = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        var _d, _e, _f;
+        const jwt = (_d = getAuthToken.getAuthToken()) !== null && _d !== void 0 ? _d : onboardingOnlyJwt;
+        const decodedJwt = decodeJwt.decodeJwt(jwt);
+        if (!jwt || !decodedJwt) {
+            throw new Error('User is not logged in');
+        }
+        if (!isTurnkeyEnabled.isTurnkeyEnabled(projectSettings)) {
+            throw new Error('Passkey embedded wallet is not enabled. Go to the dashboard and make sure to have both Turnkey/Passkey Embedded wallets and at least one EVM network enabled. Also, check if EthereumWalletConnectors is in the  DynamicContextProvider > settings > walletConnectors.');
+        }
+        const userWaletsCredentials = getUserWalletsFromVerifiedCredentials.getUserWalletsFromVerifiedCredentials(jwt);
+        // if user doesn't have a wallet yet, show the passkey view to create an embedded wallet
+        if (!(userWaletsCredentials === null || userWaletsCredentials === void 0 ? void 0 : userWaletsCredentials.length)) {
+            if (((_f = (_e = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.embeddedWalletSecurityMethods) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0) === 0) {
+                return startPregeneratedWalletCreationFlow(jwt, decodedJwt);
+            }
+            return startEmbeddedWalletCreationFlow();
+        }
+        internalSetShowAuthFlow(false);
+        const embeddedWalletVerifiedCredential = findEmbeddedWalletFromVerifiedCredentials.findEmbeddedWalletFromVerifiedCredentials(jwt);
+        // if user logged in with MM for example, just continue the flow
+        if (!embeddedWalletVerifiedCredential) {
+            return Promise.resolve(primaryWallet);
+        }
+        // if user already has embedded wallet, returns it
+        return returnEmbeddedWallet(jwt, embeddedWalletVerifiedCredential);
+    }), [
+        internalSetShowAuthFlow,
+        onboardingOnlyJwt,
+        projectSettings,
+        startPregeneratedWalletCreationFlow,
+        primaryWallet,
+    ]);
     return {
         createEmbeddedWallet,
         userHasEmbeddedWallet,

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

@@ -1,5 +1,5 @@
 import { Wallet } from '../../../shared';
 export declare const useEmbeddedWallet: () => {
-    readonly createEmbeddedWallet: () => Promise<Wallet>;
+    readonly createEmbeddedWallet: () => Promise<Wallet | undefined>;
     readonly userHasEmbeddedWallet: () => boolean;
 };

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

@@ -22,11 +22,13 @@ import { getUserWalletsFromVerifiedCredentials } from '../../functions/getUserWa
 import { isEmbeddedWalletPresent } from '../../functions/isEmbeddedWalletPresent/isEmbeddedWalletPresent.js';
 import { isTurnkeyEnabled } from '../../functions/isTurnkeyEnabled/isTurnkeyEnabled.js';
 import { findSmartWallet, initializeSmartWallet } from '../useWalletConnectors/utils/smartWallet/smartWallet.js';
+import { useCreateDynamicEmbeddedWalletMutation } from '../useCreateDynamicEmbeddedWalletMutation/useCreateDynamicEmbeddedWalletMutation.js';
 
 // Hook exposed to customers and used internally to trigger embedded wallet creation
 const useEmbeddedWallet = () => {
-    const { projectSettings, onboardingOnlyJwt, setPrimaryWalletId, wallets, internalSetShowAuthFlow, internalEvents, primaryWallet, } = useInternalDynamicContext();
+    const { projectSettings, onboardingOnlyJwt, setPrimaryWalletId, wallets, internalSetShowAuthFlow, internalEvents, primaryWallet, environmentId, } = useInternalDynamicContext();
     const { setView } = useViewContext();
+    const { createDynamicEmbeddedWalletMutation } = useCreateDynamicEmbeddedWalletMutation();
     const userHasEmbeddedWallet = () => {
         var _a;
         const jwt = (_a = getAuthToken()) !== null && _a !== void 0 ? _a : onboardingOnlyJwt;
@@ -35,36 +37,25 @@ const useEmbeddedWallet = () => {
         }
         return isEmbeddedWalletPresent(jwt);
     };
-    const createEmbeddedWallet = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
-        const jwt = (_a = getAuthToken()) !== null && _a !== void 0 ? _a : onboardingOnlyJwt;
-        if (!jwt) {
-            throw new Error('User is not logged in');
-        }
-        if (!isTurnkeyEnabled(projectSettings)) {
-            throw new Error('Passkey embedded wallet is not enabled. Go to the dashboard and make sure to have both Turnkey/Passkey Embedded wallets and at least one EVM network enabled. Also, check if EthereumWalletConnectors is in the  DynamicContextProvider > settings > walletConnectors.');
-        }
-        const userWaletsCredentials = getUserWalletsFromVerifiedCredentials(jwt);
-        // if user doesn't have a wallet yet, show the passkey view to create an embedded wallet
-        if (!(userWaletsCredentials === null || userWaletsCredentials === void 0 ? void 0 : userWaletsCredentials.length)) {
-            return startEmbeddedWalletCreationFlow();
-        }
-        internalSetShowAuthFlow(false);
-        const embeddedWalletVerifiedCredential = findEmbeddedWalletFromVerifiedCredentials(jwt);
-        // if user logged in with MM for example, just continue the flow
-        if (!embeddedWalletVerifiedCredential) {
-            return Promise.resolve(primaryWallet);
-        }
-        // if user already has embedded wallet, returns it
-        return returnEmbeddedWallet(jwt, embeddedWalletVerifiedCredential);
+    const startPregeneratedWalletCreationFlow = useCallback((jwt, decodedJwt) => __awaiter(void 0, void 0, void 0, function* () {
+        createDynamicEmbeddedWalletMutation({
+            authToken: jwt,
+            decodedJwt,
+            environmentId,
+            wallets,
+            withAuthenticator: false,
+        });
+        internalSetShowAuthFlow(false); // close email otp pin modal
+        return new Promise((resolve, reject) => {
+            internalEvents.current.once('embeddedWalletCreated', (wallet) => resolve(wallet));
+            internalEvents.current.once('embeddedWalletFailed', (error) => reject(error));
+        });
     }), [
-        internalEvents,
-        internalSetShowAuthFlow,
-        onboardingOnlyJwt,
-        projectSettings,
-        setPrimaryWalletId,
-        setView,
+        createDynamicEmbeddedWalletMutation,
+        environmentId,
         wallets,
+        internalSetShowAuthFlow,
+        internalEvents,
     ]);
     const startEmbeddedWalletCreationFlow = () => __awaiter(void 0, void 0, void 0, function* () {
         internalSetShowAuthFlow(true);
@@ -84,12 +75,12 @@ const useEmbeddedWallet = () => {
         });
     });
     const returnEmbeddedWallet = (jwt, embeddedWalletVerifiedCredential) => __awaiter(void 0, void 0, void 0, function* () {
-        var _b, _c, _d;
+        var _a, _b, _c;
         const decodedJwt = decodeJwt(jwt);
         const turnkeyWallet = findTurnkeyWallet(wallets);
         // if user already has embedded wallet, set it as primary wallet
         if (decodedJwt) {
-            (_b = turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) === null || _b === void 0 ? void 0 : _b.setVerifiedCredentials(decodedJwt.verifiedCredentials);
+            (_a = turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) === null || _a === void 0 ? void 0 : _a.setVerifiedCredentials(decodedJwt.verifiedCredentials);
             const smartWallet = findSmartWallet(embeddedWalletVerifiedCredential, decodedJwt.verifiedCredentials);
             if (smartWallet) {
                 yield initializeSmartWallet({
@@ -104,14 +95,47 @@ const useEmbeddedWallet = () => {
             }
         }
         const passkeyWallet = {
-            address: (yield ((_c = turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) === null || _c === void 0 ? void 0 : _c.fetchPublicAddress())) || '',
-            chain: ((_d = turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) === null || _d === void 0 ? void 0 : _d.connectedChain) || '',
+            address: (yield ((_b = turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) === null || _b === void 0 ? void 0 : _b.fetchPublicAddress())) || '',
+            chain: ((_c = turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) === null || _c === void 0 ? void 0 : _c.connectedChain) || '',
             connected: true,
             connector: (turnkeyWallet === null || turnkeyWallet === void 0 ? void 0 : turnkeyWallet.walletConnector) || {},
             id: embeddedWalletVerifiedCredential.id,
         };
         return Promise.resolve(passkeyWallet);
     });
+    const createEmbeddedWallet = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _d, _e, _f;
+        const jwt = (_d = getAuthToken()) !== null && _d !== void 0 ? _d : onboardingOnlyJwt;
+        const decodedJwt = decodeJwt(jwt);
+        if (!jwt || !decodedJwt) {
+            throw new Error('User is not logged in');
+        }
+        if (!isTurnkeyEnabled(projectSettings)) {
+            throw new Error('Passkey embedded wallet is not enabled. Go to the dashboard and make sure to have both Turnkey/Passkey Embedded wallets and at least one EVM network enabled. Also, check if EthereumWalletConnectors is in the  DynamicContextProvider > settings > walletConnectors.');
+        }
+        const userWaletsCredentials = getUserWalletsFromVerifiedCredentials(jwt);
+        // if user doesn't have a wallet yet, show the passkey view to create an embedded wallet
+        if (!(userWaletsCredentials === null || userWaletsCredentials === void 0 ? void 0 : userWaletsCredentials.length)) {
+            if (((_f = (_e = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.embeddedWalletSecurityMethods) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0) === 0) {
+                return startPregeneratedWalletCreationFlow(jwt, decodedJwt);
+            }
+            return startEmbeddedWalletCreationFlow();
+        }
+        internalSetShowAuthFlow(false);
+        const embeddedWalletVerifiedCredential = findEmbeddedWalletFromVerifiedCredentials(jwt);
+        // if user logged in with MM for example, just continue the flow
+        if (!embeddedWalletVerifiedCredential) {
+            return Promise.resolve(primaryWallet);
+        }
+        // if user already has embedded wallet, returns it
+        return returnEmbeddedWallet(jwt, embeddedWalletVerifiedCredential);
+    }), [
+        internalSetShowAuthFlow,
+        onboardingOnlyJwt,
+        projectSettings,
+        startPregeneratedWalletCreationFlow,
+        primaryWallet,
+    ]);
     return {
         createEmbeddedWallet,
         userHasEmbeddedWallet,

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

@@ -7,6 +7,7 @@ var React = require('react');
 const useEventListener = (eventName, handler) => {
     // Create a ref that stores handler
     const savedHandler = React.useRef(handler);
+    savedHandler.current = handler;
     React.useEffect(() => {
         // Define the listening target
         const targetElement = window;
@@ -19,7 +20,7 @@ const useEventListener = (eventName, handler) => {
         return () => {
             targetElement.removeEventListener(eventName, listener);
         };
-    }, [eventName]);
+    }, [eventName, handler]);
 };
 
 exports.useEventListener = useEventListener;