@dynamic-labs/sdk-react-core 1.1.0-alpha.0 → 1.1.0-alpha.1

package/src/lib/utils/hooks/events/types.d.ts

@@ -0,0 +1,14 @@
+type EventTypes = Record<string, (...args: any[]) => any>;
+/**
+ * This type is a copy of the ArgumentMap type from eventemitter3 package.
+ * Is used extract the arguments from a event type.
+ * Then we can use the arguments to reconstruct the callback we want
+ */
+export type ArgumentMap<T extends EventTypes> = {
+    [key in keyof T]: Parameters<T[key]>;
+};
+/**
+ * Maps the event to its callback's arguments
+ */
+export type EventArgs<T extends EventTypes, Event extends keyof T> = ArgumentMap<T>[Extract<Event, keyof T>];
+export {};

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

@@ -0,0 +1 @@
+export * from './useDynamicEvents';

package/src/lib/utils/hooks/events/useDynamicEvents/useDynamicEvents.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var dynamicEvents = require('../../../../events/dynamicEvents.cjs');
+
+/** Allows us to subscribe to all dynamicEvents with a hook, even the internal ones */
+const useInternalDynamicEvents = (event, listener) => {
+    const handler = React.useRef(listener);
+    handler.current = listener;
+    React.useEffect(() => {
+        const callback = (...args) => handler.current(...args);
+        dynamicEvents.dynamicEvents.on(event, callback);
+        return () => {
+            dynamicEvents.dynamicEvents.off(event, callback);
+        };
+    }, [event]);
+};
+
+exports.useInternalDynamicEvents = useInternalDynamicEvents;

package/src/lib/utils/hooks/events/useDynamicEvents/useDynamicEvents.d.ts

@@ -0,0 +1,8 @@
+import { DynamicEvents } from '../../../../events';
+import { EventArgs } from '../types';
+type DynamicEventListener<E extends keyof DynamicEvents> = (...args: EventArgs<DynamicEvents, E>) => void;
+/** Allows us to subscribe to all dynamicEvents with a hook, even the internal ones */
+export declare const useInternalDynamicEvents: <E extends keyof DynamicEvents>(event: E, listener: DynamicEventListener<E>) => void;
+/** Allows subscribing to dynamic events directly inside components with a hook */
+export declare const useDynamicEvents: <E extends "emailVerificationResult" | "embeddedWalletCreated" | "logout">(event: E, listener: DynamicEventListener<E>) => void;
+export {};

package/src/lib/utils/hooks/events/useDynamicEvents/useDynamicEvents.js

@@ -0,0 +1,17 @@
+import { useRef, useEffect } from 'react';
+import { dynamicEvents } from '../../../../events/dynamicEvents.js';
+
+/** Allows us to subscribe to all dynamicEvents with a hook, even the internal ones */
+const useInternalDynamicEvents = (event, listener) => {
+    const handler = useRef(listener);
+    handler.current = listener;
+    useEffect(() => {
+        const callback = (...args) => handler.current(...args);
+        dynamicEvents.on(event, callback);
+        return () => {
+            dynamicEvents.off(event, callback);
+        };
+    }, [event]);
+};
+
+export { useInternalDynamicEvents };

package/src/lib/utils/hooks/{useWalletConnectorEvent → events/useWalletConnectorEvent}/useWalletConnectorEvent.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Hook for handling events from a WalletConnector or an array of WalletConnectors.
  * This hook allows you to specify an event to listen to and a handler function that will be called

package/src/lib/utils/hooks/{useWalletConnectorEvent → events/useWalletConnectorEvent}/useWalletConnectorEvent.d.ts

@@ -1,13 +1,5 @@
 import { WalletConnector, WalletConnectorEventTypes } from '@dynamic-labs/wallet-connector-core';
-/**
- * This type is a copy of the ArgumentMap type from eventemitter3 package.
- * Is used extract the arguments from a event type.
- * Then we can use the arguments to reconstruct the callback we want
- */
-type ArgumentMap<T extends object> = {
-    [K in keyof T]: T[K] extends (...args: any[]) => void ? Parameters<T[K]> : T[K] extends any[] ? T[K] : any[];
-};
-type EventArg<Event extends keyof WalletConnectorEventTypes> = ArgumentMap<WalletConnectorEventTypes>[Extract<Event, keyof WalletConnectorEventTypes>];
+import { EventArgs } from '../types';
 /**
  * Hook for handling events from a WalletConnector or an array of WalletConnectors.
  * This hook allows you to specify an event to listen to and a handler function that will be called
@@ -40,5 +32,4 @@ type EventArg<Event extends keyof WalletConnectorEventTypes> = ArgumentMap<Walle
  *   },
  * );
  */
-export declare const useWalletConnectorEvent: <Event_1 extends keyof WalletConnectorEventTypes = keyof WalletConnectorEventTypes>(eventEmitters: WalletConnector | WalletConnector[] | undefined, eventName: Event_1, handler: (...args: [...EventArg<Event_1>, import("@dynamic-labs/wallet-connector-core").WalletConnectorCore.WalletConnector]) => void) => void;
-export {};
+export declare const useWalletConnectorEvent: <Event_1 extends keyof WalletConnectorEventTypes = keyof WalletConnectorEventTypes>(eventEmitters: WalletConnector | WalletConnector[] | undefined, eventName: Event_1, handler: (...args: [...EventArgs<WalletConnectorEventTypes, Event_1>, import("@dynamic-labs/wallet-connector-core").WalletConnectorCore.WalletConnector]) => void) => void;

package/src/lib/utils/hooks/{useWalletConnectorEvent → events/useWalletConnectorEvent}/useWalletConnectorEvent.js

@@ -1,5 +1,6 @@
 import { useRef, useEffect } from 'react';
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Hook for handling events from a WalletConnector or an array of WalletConnectors.
  * This hook allows you to specify an event to listen to and a handler function that will be called

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

@@ -1,3 +1,4 @@
+export * from './events';
 export { useAuthenticateConnectedUser } from './useAuthenticateConnectedUser';
 export { useColorSchemePreference } from './useColorSchemePreference';
 export { useConfirmationModal } from './useConfirmationModal';
@@ -7,7 +8,6 @@ export { useDefaultQrCode } from './useDefaultQrCode';
 export { useDynamicScopes } from './useDynamicScopes';
 export { useElementById } from './useElementById';
 export { useEmbeddedWallet } from './useEmbeddedWallet';
-export { useEventListener } from './useEventListener';
 export { useFetchNonce } from './useFetchNonce';
 export { useFetchProjectSettings } from './useFetchProjectSettings';
 export { useFindSocialIcon } from './useFindSocialIcon';
@@ -37,7 +37,6 @@ export * from './useUserDataForm';
 export * from './useUserUpdateRequest';
 export { useValidateSession } from './useValidateSession';
 export { useVerifyWallet } from './useVerifyWallet';
-export { useWalletConnectorEvent } from './useWalletConnectorEvent';
 export { useWalletConnectorOptions } from './useWalletConnectorOptions';
 export { useWalletConnectors } from './useWalletConnectors';
 export { useWalletItemActions } from './useWalletItemActions';

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

@@ -3,78 +3,87 @@
 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');
+var React = require('react');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
+var dynamicEvents = require('../../../events/dynamicEvents.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');
+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/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');
 
+// This hook needs to be async that's why it's not using useMutation
 const useCreateDynamicEmbeddedWalletMutation = () => {
-    const { setPrimaryWalletId, internalEvents, setCallback, setUser, user, setShowAuthFlow, } = useInternalDynamicContext.useInternalDynamicContext();
-    const { mutate: createDynamicEmbeddedWalletMutation, isLoading, error, } = useMutation.useMutation(({ authToken, decodedJwt, environmentId, walletConnectorOptions, withAuthenticator, }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const { setPrimaryWalletId, setCallback, setUser, user, internalSetShowAuthFlow, } = useInternalDynamicContext.useInternalDynamicContext();
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [error, setError] = React.useState();
+    const createDynamicEmbeddedWalletMutation = ({ authToken, decodedJwt, environmentId, walletConnectorOptions, withAuthenticator, }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         var _a, _b;
+        setIsLoading(true);
         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(walletConnectorOptions),
-        });
-        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'));
-        /** It's not authenticated if it's a turnkey wallet that still hasn't created a passkey */
-        const authenticated = Boolean((_b = turnkeyVerifiedCredentials === null || turnkeyVerifiedCredentials === void 0 ? void 0 : turnkeyVerifiedCredentials.walletProperties) === null || _b === void 0 ? void 0 : _b.isAuthenticatorAttached);
-        const passkeyWallet = {
-            address: (yield walletConnector.fetchPublicAddress()) || '',
-            authenticated,
-            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,
-                walletConnectorOptions,
+        try {
+            const { embeddedWalletVerifiedCredential, jwt, decodedJwt: updatedDecodedJwt, walletConnector, } = yield createEmbeddedWalletMethodToUse({
+                authToken,
+                environmentId,
+                user: user !== null && user !== void 0 ? user : createUserProfile.createUserProfile(decodedJwt),
+                walletConnector: findPasskeyEmailWalletConnector.findPasskeyEmailWalletConnector(walletConnectorOptions),
+            });
+            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'));
+            /** It's not authenticated if it's a turnkey wallet that still hasn't created a passkey */
+            const authenticated = Boolean((_b = turnkeyVerifiedCredentials === null || turnkeyVerifiedCredentials === void 0 ? void 0 : turnkeyVerifiedCredentials.walletProperties) === null || _b === void 0 ? void 0 : _b.isAuthenticatorAttached);
+            const passkeyWallet = {
+                address: (yield walletConnector.fetchPublicAddress()) || '',
+                authenticated,
+                chain: walletConnector.connectedChain || '',
+                connected: true,
+                connector: walletConnector,
+                id: embeddedWalletVerifiedCredential.id,
+            };
+            dynamicEvents.dynamicEvents.emit('embeddedWalletCreated', passkeyWallet);
+            const smartWallet$1 = smartWallet.findSmartWallet(embeddedWalletVerifiedCredential, updatedDecodedJwt.verifiedCredentials);
+            if (smartWallet$1) {
+                yield smartWallet.initializeSmartWallet({
+                    account: smartWallet$1,
+                    verifiedCredentials: updatedDecodedJwt.verifiedCredentials,
+                    walletConnectorOptions,
+                });
+                setPrimaryWalletId(smartWallet$1.id);
+            }
+            else {
+                setPrimaryWalletId(embeddedWalletVerifiedCredential.id);
+            }
+            index.storeAuthToken(jwt);
+            setUser(createUserProfile.createUserProfile(updatedDecodedJwt));
+            internalSetShowAuthFlow(false);
+            setCallback('embeddedWalletCreated', {
+                email: (turnkeyVerifiedCredentials === null || turnkeyVerifiedCredentials === void 0 ? void 0 : turnkeyVerifiedCredentials.email) || '',
+                verifiedCredential: turnkeyVerifiedCredentials,
             });
-            setPrimaryWalletId(smartWallet$1.id);
-        }
-        else {
-            setPrimaryWalletId(embeddedWalletVerifiedCredential.id);
         }
-        index.storeAuthToken(jwt);
-        setUser(createUserProfile.createUserProfile(updatedDecodedJwt));
-        setShowAuthFlow(false);
-        setCallback('embeddedWalletCreated', {
-            email: (turnkeyVerifiedCredentials === null || turnkeyVerifiedCredentials === void 0 ? void 0 : turnkeyVerifiedCredentials.email) || '',
-            verifiedCredential: turnkeyVerifiedCredentials,
-        });
-    }), {
-        onFailure: (err) => {
+        catch (err) {
+            setError(err);
             logger.logger.error('Failed to create embedded wallet', err);
-            internalEvents.current.emit('embeddedWalletFailed', err);
-        },
+            dynamicEvents.dynamicEvents.emit('embeddedWalletFailed', err);
+        }
+        finally {
+            setIsLoading(false);
+        }
     });
     return {
         createDynamicEmbeddedWalletMutation,

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

@@ -8,7 +8,7 @@ type MutationProps = {
     withAuthenticator: boolean;
 };
 export declare const useCreateDynamicEmbeddedWalletMutation: () => {
-    createDynamicEmbeddedWalletMutation: (variables: MutationProps) => void;
+    createDynamicEmbeddedWalletMutation: ({ authToken, decodedJwt, environmentId, walletConnectorOptions, withAuthenticator, }: MutationProps) => Promise<void>;
     error: unknown;
     isLoading: boolean;
 };

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

@@ -1,76 +1,85 @@
 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 { useState } from 'react';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
+import { dynamicEvents } from '../../../events/dynamicEvents.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 { 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/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';
 
+// This hook needs to be async that's why it's not using useMutation
 const useCreateDynamicEmbeddedWalletMutation = () => {
-    const { setPrimaryWalletId, internalEvents, setCallback, setUser, user, setShowAuthFlow, } = useInternalDynamicContext();
-    const { mutate: createDynamicEmbeddedWalletMutation, isLoading, error, } = useMutation(({ authToken, decodedJwt, environmentId, walletConnectorOptions, withAuthenticator, }) => __awaiter(void 0, void 0, void 0, function* () {
+    const { setPrimaryWalletId, setCallback, setUser, user, internalSetShowAuthFlow, } = useInternalDynamicContext();
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState();
+    const createDynamicEmbeddedWalletMutation = ({ authToken, decodedJwt, environmentId, walletConnectorOptions, withAuthenticator, }) => __awaiter(void 0, void 0, void 0, function* () {
         var _a, _b;
+        setIsLoading(true);
         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(walletConnectorOptions),
-        });
-        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'));
-        /** It's not authenticated if it's a turnkey wallet that still hasn't created a passkey */
-        const authenticated = Boolean((_b = turnkeyVerifiedCredentials === null || turnkeyVerifiedCredentials === void 0 ? void 0 : turnkeyVerifiedCredentials.walletProperties) === null || _b === void 0 ? void 0 : _b.isAuthenticatorAttached);
-        const passkeyWallet = {
-            address: (yield walletConnector.fetchPublicAddress()) || '',
-            authenticated,
-            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,
-                walletConnectorOptions,
+        try {
+            const { embeddedWalletVerifiedCredential, jwt, decodedJwt: updatedDecodedJwt, walletConnector, } = yield createEmbeddedWalletMethodToUse({
+                authToken,
+                environmentId,
+                user: user !== null && user !== void 0 ? user : createUserProfile(decodedJwt),
+                walletConnector: findPasskeyEmailWalletConnector(walletConnectorOptions),
+            });
+            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'));
+            /** It's not authenticated if it's a turnkey wallet that still hasn't created a passkey */
+            const authenticated = Boolean((_b = turnkeyVerifiedCredentials === null || turnkeyVerifiedCredentials === void 0 ? void 0 : turnkeyVerifiedCredentials.walletProperties) === null || _b === void 0 ? void 0 : _b.isAuthenticatorAttached);
+            const passkeyWallet = {
+                address: (yield walletConnector.fetchPublicAddress()) || '',
+                authenticated,
+                chain: walletConnector.connectedChain || '',
+                connected: true,
+                connector: walletConnector,
+                id: embeddedWalletVerifiedCredential.id,
+            };
+            dynamicEvents.emit('embeddedWalletCreated', passkeyWallet);
+            const smartWallet = findSmartWallet(embeddedWalletVerifiedCredential, updatedDecodedJwt.verifiedCredentials);
+            if (smartWallet) {
+                yield initializeSmartWallet({
+                    account: smartWallet,
+                    verifiedCredentials: updatedDecodedJwt.verifiedCredentials,
+                    walletConnectorOptions,
+                });
+                setPrimaryWalletId(smartWallet.id);
+            }
+            else {
+                setPrimaryWalletId(embeddedWalletVerifiedCredential.id);
+            }
+            storeAuthToken(jwt);
+            setUser(createUserProfile(updatedDecodedJwt));
+            internalSetShowAuthFlow(false);
+            setCallback('embeddedWalletCreated', {
+                email: (turnkeyVerifiedCredentials === null || turnkeyVerifiedCredentials === void 0 ? void 0 : turnkeyVerifiedCredentials.email) || '',
+                verifiedCredential: turnkeyVerifiedCredentials,
             });
-            setPrimaryWalletId(smartWallet.id);
-        }
-        else {
-            setPrimaryWalletId(embeddedWalletVerifiedCredential.id);
         }
-        storeAuthToken(jwt);
-        setUser(createUserProfile(updatedDecodedJwt));
-        setShowAuthFlow(false);
-        setCallback('embeddedWalletCreated', {
-            email: (turnkeyVerifiedCredentials === null || turnkeyVerifiedCredentials === void 0 ? void 0 : turnkeyVerifiedCredentials.email) || '',
-            verifiedCredential: turnkeyVerifiedCredentials,
-        });
-    }), {
-        onFailure: (err) => {
+        catch (err) {
+            setError(err);
             logger.error('Failed to create embedded wallet', err);
-            internalEvents.current.emit('embeddedWalletFailed', err);
-        },
+            dynamicEvents.emit('embeddedWalletFailed', err);
+        }
+        finally {
+            setIsLoading(false);
+        }
     });
     return {
         createDynamicEmbeddedWalletMutation,

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

@@ -12,101 +12,145 @@ const useDynamicLayoutData = ({ view, authMode, }) => {
     const { isTurnkeyWalletWithoutAuthenticator } = useIsTurnkeyWallet.useIsTurnkeyWallet();
     if (view === 'no-access') {
         const headerData = {
+            copykey: 'dyn_no_access.title',
             heading: t('dyn_no_access.title'),
         };
         return { headerData };
     }
     const helpHeaderMap = {
         'login-with-email-or-wallet-full-wallet-list': {
+            copykey: 'dyn_login.helper.all_wallet_list',
             heading: t('dyn_login.helper.all_wallet_list'),
         },
         'login-with-wallet-only': {
+            copykey: 'dyn_login.helper.wallet_only',
             heading: t('dyn_login.helper.wallet_only'),
         },
         'passkey-intro': {
+            copykey: 'dyn_passkey_intro.helper.title',
             heading: t('dyn_passkey_intro.helper.title'),
         },
         'pending-connect': {
+            copykey: 'dyn_login.helper.pending_connect.title',
             heading: t('dyn_login.helper.pending_connect.title'),
         },
         'pending-signature': {
+            copykey: 'dyn_login.helper.pending_signature.title',
             heading: t('dyn_login.helper.pending_signature.title'),
         },
         'pending-signature-without-back-button': {
+            copykey: 'dyn_login.helper.pending_signature_without_back_button.title',
             heading: t('dyn_login.helper.pending_signature_without_back_button.title'),
         },
         'qr-code': {
+            copykey: 'dyn_login.helper.qr_code.title',
             heading: t('dyn_login.helper.qr_code.title'),
         },
         'wallet-connect-mobile-wallets-list': {
+            copykey: 'dyn_wallet_conect.mobile.wallet_list.helper',
             heading: t('dyn_wallet_conect.mobile.wallet_list.helper'),
         },
         'wallet-list': {
+            copykey: 'dyn_wallet_list.helper',
             heading: t('dyn_wallet_list.helper'),
         },
     };
     const headerMap = {
-        'account-exists': { heading: t('dyn_account_exists.title') },
+        'account-exists': {
+            copykey: 'dyn_account_exists.title',
+            heading: t('dyn_account_exists.title'),
+        },
         'chainalysis-blocked-wallet': {
+            copykey: 'dyn_chainalysis_blocked_wallet.title',
             heading: t('dyn_chainalysis_blocked_wallet.title'),
         },
-        'login-with-email-or-wallet': { heading: t('dyn_login.title.all') },
+        'login-with-email-or-wallet': {
+            copykey: 'dyn_login.title.all',
+            heading: t('dyn_login.title.all'),
+        },
         'login-with-email-or-wallet-full-wallet-list': {
+            copykey: 'dyn_login.title.all_wallet_list',
             heading: t('dyn_login.title.all_wallet_list'),
         },
         'login-with-email-verification': {
-            heading: 'Confirm verification code',
+            copykey: 'dyn_otp_verification.title',
+            heading: t('dyn_otp_verification.title'),
         },
         'login-with-wallet-only': {
+            copykey: 'dyn_login.title.wallet_only',
             heading: t('dyn_login.title.wallet_only'),
         },
         'multi-wallet-wallet-list': {
+            copykey: authMode === 'connect-only'
+                ? 'dyn_wallet_list.title.connect'
+                : 'dyn_wallet_list.title.link',
             heading: authMode === 'connect-only'
                 ? t('dyn_wallet_list.title.connect')
                 : t('dyn_wallet_list.title.link'),
         },
         'network-not-supported': {
-            heading: 'Update Network',
+            copykey: 'dyn_network_not_supported.title',
+            heading: t('dyn_network_not_supported.title'),
         },
         'passkey-recovery-bundle': {
+            copykey: isTurnkeyWalletWithoutAuthenticator
+                ? 'dyn_passkey_secure_modal.code.title'
+                : 'dyn_passkey_recovery.code.title',
             heading: isTurnkeyWalletWithoutAuthenticator
                 ? t('dyn_passkey_secure_modal.code.title')
                 : t('dyn_passkey_recovery.code.title'),
         },
         'passkey-recovery-complete': {
+            copykey: isTurnkeyWalletWithoutAuthenticator
+                ? 'dyn_passkey_secure_modal.complete.title'
+                : 'dyn_passkey_recovery.complete.title',
             heading: isTurnkeyWalletWithoutAuthenticator
                 ? t('dyn_passkey_secure_modal.complete.title')
                 : t('dyn_passkey_recovery.complete.title'),
         },
         'passkey-recovery-start': {
+            copykey: isTurnkeyWalletWithoutAuthenticator
+                ? 'dyn_passkey_secure_modal.start.title'
+                : 'dyn_passkey_recovery.start.title',
             heading: isTurnkeyWalletWithoutAuthenticator
                 ? t('dyn_passkey_secure_modal.start.title')
                 : t('dyn_passkey_recovery.start.title'),
         },
         'pending-connect': {
+            copykey: 'dyn_login.connect_wallet.title',
             heading: t('dyn_login.connect_wallet.title'),
         },
         'pending-signature': {
+            copykey: 'dyn_login.sign_wallet.title',
             heading: t('dyn_login.sign_wallet.title'),
         },
         'qr-code': {
+            copykey: 'dyn_login.qr_code.title',
             heading: t('dyn_login.qr_code.title'),
         },
         'verify-email': {
-            heading: 'Confirm verification code',
+            copykey: 'dyn_otp_verification.title',
+            heading: t('dyn_otp_verification.title'),
         },
         'wallet-connect-mobile-wallets-list': {
+            copykey: 'dyn_wallet_conect.mobile.wallet_list.title',
             heading: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(iconic.WalletConnectIcon, { style: { height: '1.5rem', width: '1.5rem' } }), ' ', t('dyn_wallet_conect.mobile.wallet_list.title')] })),
         },
         'wallet-group': {
+            copykey: 'dyn_login.wallet_group.title',
             heading: t('dyn_login.wallet_group.title'),
         },
         'wallet-list': {
+            copykey: 'dyn_wallet_list.title.select',
             heading: t('dyn_wallet_list.title.select'),
         },
-        'wallet-sign': { heading: t('dyn_wallet_transfer.sign.title') },
+        'wallet-sign': {
+            copykey: 'dyn_wallet_transfer.sign.title',
+            heading: t('dyn_wallet_transfer.sign.title'),
+        },
         'wallet-used': {
-            heading: 'Transfer this wallet?',
+            copykey: 'dyn_wallet_link.title',
+            heading: t('dyn_wallet_link.title'),
         },
     };
     const helpHeaderData = helpHeaderMap[view];

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

@@ -3,9 +3,11 @@ import { ViewType } from '../../../context/ViewContext';
 import { AuthModeType } from '../../../shared';
 interface FooterContentProps {
     heading: string;
+    copykey: string;
 }
 interface HeaderContentProps {
     heading: string | JSX.Element;
+    copykey: string;
 }
 interface DynamicLayoutProps {
     view: ViewType;
@@ -13,6 +15,7 @@ interface DynamicLayoutProps {
 }
 export declare const useDynamicLayoutData: ({ view, authMode, }: DynamicLayoutProps) => {
     headerData: {
+        copykey: string;
         heading: string;
     };
     helpHeaderData?: undefined;