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

package/src/lib/views/Passkey/PasskeyRecovery/InitRecovery/PasskeyInitRecovery.js

@@ -9,7 +9,6 @@ import { logger } from '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
-import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
 import { ReactComponent as SvgClose } from '../../../../shared/assets/close.js';
 import { ReactComponent as SvgSignInWithEmail } from '../../../../shared/assets/sign-in-with-email.js';
 import '@dynamic-labs/wallet-book';
@@ -34,6 +33,7 @@ import '../../../../components/OverlayCard/OverlayCard.context.js';
 import '../../../../context/FooterAnimationContext/index.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/QrCodeContext/QrCodeContext.js';
+import { useIsTurnkeyWallet } from '../../../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.js';
 import { Typography } from '../../../../components/Typography/Typography.js';
 import '../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
@@ -45,11 +45,12 @@ import '../../../../context/ThemeContext/ThemeContext.js';
 import '../../../../context/LoadingContext/LoadingContext.js';
 import { Icon } from '../../../../components/Icon/Icon.js';
 import 'i18next';
-import { useWidgetContext } from '../../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import 'yup';
 import { ErrorContainer } from '../../../../components/ErrorContainer/ErrorContainer.js';
 import '../../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import '@dynamic-labs/types';
+import { useMutation } from '../../../../utils/hooks/useMutation/useMutation.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import 'formik';
@@ -59,7 +60,6 @@ import { IconButton } from '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
 import { iframeContainerId, iframeElementId } from '../constants.js';
 import '../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
-import { useMutation } from '../../../../utils/hooks/useMutation/useMutation.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import { NeedHelpSection } from '../../../../components/NeedHelpSection/NeedHelpSection.js';
@@ -70,8 +70,8 @@ import { initPasskeyRecovery } from '../../utils/passkeyRecovery/passkeyRecovery
 
 const PasskeyInitRecovery = () => {
     const { authToken, primaryWallet, environmentId, internalEvents, setShowAuthFlow, } = useInternalDynamicContext();
+    const { isTurnkeyWalletWithoutAuthenticator } = useIsTurnkeyWallet();
     const { setView } = useViewContext();
-    const { setDynamicWidgetView } = useWidgetContext();
     useElementById(iframeContainerId);
     const { t } = useTranslation();
     const { mutate: initRecovery, isLoading, error, } = useMutation(() => __awaiter(void 0, void 0, void 0, function* () {
@@ -99,13 +99,11 @@ const PasskeyInitRecovery = () => {
         return 'Something went wrong.';
     }, [error]);
     const EmailIcon = (jsx(Icon, { color: 'brand-primary', children: jsx(SvgSignInWithEmail, {}) }));
-    const handleBackClick = () => {
-        setDynamicWidgetView('manage-passkeys');
-        setShowAuthFlow(false);
-    };
+    const translationKey = isTurnkeyWalletWithoutAuthenticator
+        ? 'dyn_passkey_secure_modal'
+        : 'dyn_passkey_recovery';
     const closeButton = (jsx(IconButton, { type: 'button', onClick: () => setShowAuthFlow(false), "data-testid": 'close-button', children: jsx(SvgClose, {}) }));
-    const backButton = (jsx(IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
-    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, trailing: closeButton, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: t('dyn_passkey_recovery.start.title') }) }), jsxs("div", { className: 'passkey-recovery-view', children: [jsx(IconWithSpinner, { Icon: EmailIcon, isSpinning: isLoading, iconSize: 96 }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'passkey-recovery-view__subtitle', children: t('dyn_passkey_recovery.start.description') }), errorText && jsx(ErrorContainer, { children: errorText }), jsx("div", { className: 'passkey-recovery-view__actions', children: jsx(Button, { buttonPadding: 'large', dataTestId: 'passkey-recovery-button', onClick: () => initRecovery(), disabled: isLoading, showInternalLoading: false, children: jsx("div", { children: jsx(Typography, { children: t('dyn_passkey_recovery.start.start_button') }) }) }) }), jsx(NeedHelpSection, {})] })] }));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: closeButton, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: t(`${translationKey}.start.title`) }) }), jsxs("div", { className: 'passkey-recovery-view', children: [jsx(IconWithSpinner, { Icon: EmailIcon, isSpinning: isLoading, iconSize: 96 }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'passkey-recovery-view__subtitle', children: t(`${translationKey}.start.description`) }), errorText && jsx(ErrorContainer, { children: errorText }), jsx("div", { className: 'passkey-recovery-view__actions', children: jsx(Button, { buttonPadding: 'large', dataTestId: 'passkey-recovery-button', onClick: () => initRecovery(), disabled: isLoading, showInternalLoading: false, children: jsx("div", { children: jsx(Typography, { children: t(`${translationKey}.start.start_button`) }) }) }) }), jsx(NeedHelpSection, {})] })] }));
 };
 
 export { PasskeyInitRecovery };

package/src/lib/views/Passkey/utils/createPregeneratedWallet/createPregeneratedWallet.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../../_virtual/_tslib.cjs');
+var utils = require('@dynamic-labs/utils');
+var decodeJwt = require('../../../../shared/utils/functions/decodeJwt/decodeJwt.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('react/jsx-runtime');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('react');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../shared/utils/classes/storage/localStorage.cjs');
+require('viem');
+require('../../../../shared/consts/index.cjs');
+var api = require('../../../../data/api.cjs');
+var findEmbeddedWalletFromVerifiedCredentials = require('../../../../utils/functions/findEmbeddedWalletFromVerifiedCredentials/findEmbeddedWalletFromVerifiedCredentials.cjs');
+require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/sdk-api');
+
+const createPregeneratedWallet = ({ user, walletConnector, environmentId, authToken, }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    if (!authToken) {
+        throw new utils.DynamicError('Auth token is not defined');
+    }
+    if (!walletConnector) {
+        throw new utils.DynamicError('PasskeyWalletConnector not found');
+    }
+    if (!user) {
+        throw new utils.DynamicError('User is not defined');
+    }
+    walletConnector.setEmail(user.email);
+    const signersResponse = yield api.createTurnkeyEvmEmbeddedWallet({
+        environmentId,
+        userJwt: authToken,
+    });
+    const { jwt } = signersResponse;
+    const decodedJwt = decodeJwt.decodeJwt(jwt);
+    if (decodedJwt === undefined)
+        throw new utils.DynamicError('Invalid token!');
+    const embeddedWalletVerifiedCredential = findEmbeddedWalletFromVerifiedCredentials.findEmbeddedWalletFromVerifiedCredentials(jwt);
+    if (!embeddedWalletVerifiedCredential) {
+        throw new utils.DynamicError('EmbeddedWalletVerifiedCredential not found');
+    }
+    walletConnector.setVerifiedCredentials(decodedJwt.verifiedCredentials);
+    return {
+        decodedJwt,
+        embeddedWalletVerifiedCredential,
+        jwt,
+        walletConnector,
+    };
+});
+
+exports.createPregeneratedWallet = createPregeneratedWallet;

package/src/lib/views/Passkey/utils/createPregeneratedWallet/createPregeneratedWallet.d.ts

@@ -0,0 +1,13 @@
+import { IEmailWalletConnector, IPasskeyWalletConnector } from '@dynamic-labs/wallet-connector-core';
+import { UserProfile } from '../../../../shared';
+export declare const createPregeneratedWallet: ({ user, walletConnector, environmentId, authToken, }: {
+    authToken: string | undefined;
+    environmentId: string;
+    user: UserProfile | undefined;
+    walletConnector: (IPasskeyWalletConnector & IEmailWalletConnector) | undefined;
+}) => Promise<{
+    decodedJwt: Omit<import("@dynamic-labs/sdk-api").DynamicJwt, "jwt">;
+    embeddedWalletVerifiedCredential: import("@dynamic-labs/sdk-api").JwtVerifiedCredential;
+    jwt: string;
+    walletConnector: IPasskeyWalletConnector & IEmailWalletConnector;
+}>;

package/src/lib/views/Passkey/utils/createPregeneratedWallet/createPregeneratedWallet.js

@@ -0,0 +1,52 @@
+import { __awaiter } from '../../../../../../_virtual/_tslib.js';
+import { DynamicError } from '@dynamic-labs/utils';
+import { decodeJwt } from '../../../../shared/utils/functions/decodeJwt/decodeJwt.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
+import '../../../../context/ViewContext/ViewContext.js';
+import 'react';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/wallet-book';
+import '../../../../utils/constants/colors.js';
+import '../../../../shared/utils/classes/storage/localStorage.js';
+import 'viem';
+import '../../../../shared/consts/index.js';
+import { createTurnkeyEvmEmbeddedWallet } from '../../../../data/api.js';
+import { findEmbeddedWalletFromVerifiedCredentials } from '../../../../utils/functions/findEmbeddedWalletFromVerifiedCredentials/findEmbeddedWalletFromVerifiedCredentials.js';
+import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/sdk-api';
+
+const createPregeneratedWallet = ({ user, walletConnector, environmentId, authToken, }) => __awaiter(void 0, void 0, void 0, function* () {
+    if (!authToken) {
+        throw new DynamicError('Auth token is not defined');
+    }
+    if (!walletConnector) {
+        throw new DynamicError('PasskeyWalletConnector not found');
+    }
+    if (!user) {
+        throw new DynamicError('User is not defined');
+    }
+    walletConnector.setEmail(user.email);
+    const signersResponse = yield createTurnkeyEvmEmbeddedWallet({
+        environmentId,
+        userJwt: authToken,
+    });
+    const { jwt } = signersResponse;
+    const decodedJwt = decodeJwt(jwt);
+    if (decodedJwt === undefined)
+        throw new DynamicError('Invalid token!');
+    const embeddedWalletVerifiedCredential = findEmbeddedWalletFromVerifiedCredentials(jwt);
+    if (!embeddedWalletVerifiedCredential) {
+        throw new DynamicError('EmbeddedWalletVerifiedCredential not found');
+    }
+    walletConnector.setVerifiedCredentials(decodedJwt.verifiedCredentials);
+    return {
+        decodedJwt,
+        embeddedWalletVerifiedCredential,
+        jwt,
+        walletConnector,
+    };
+});
+
+export { createPregeneratedWallet };

package/src/lib/views/Passkey/utils/createPregeneratedWallet/index.d.ts

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

package/src/lib/views/Passkey/utils/index.d.ts

@@ -1,2 +1,3 @@
 export * from './createEmbeddedWalletWithPasskey';
 export * from './findPasskeyEmailWalletConnector';
+export * from './createPregeneratedWallet';

package/src/lib/views/TransactionConfirmationView/TransactionConfirmationView.cjs

@@ -45,6 +45,7 @@ require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
 require('formik');
 require('yup');
+var useMutation = require('../../utils/hooks/useMutation/useMutation.cjs');
 require('../../components/OverlayCard/OverlayCard.context.cjs');
 var TransactionConfirmationPageLayout = require('../../components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.cjs');
 var TransactionRow = require('../../components/TransactionConfirmationPageLayout/components/TransactionRow/TransactionRow.cjs');
@@ -70,7 +71,6 @@ var useTransactionGas = require('./hooks/useTransactionGas/useTransactionGas.cjs
 var useTransactionTotal = require('./hooks/useTransactionTotal/useTransactionTotal.cjs');
 var transactionErrorMessage = require('./helpers/transactionErrorMessage.cjs');
 require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
-var useMutation = require('../../utils/hooks/useMutation/useMutation.cjs');
 
 const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess, onClickBack, onClickClose, title, displayPoweredByDynamicFooter = false, provider, }) => {
     const { appName, appLogoUrl, primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();

package/src/lib/views/TransactionConfirmationView/TransactionConfirmationView.js

@@ -41,6 +41,7 @@ import '../../components/Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
 import 'formik';
 import 'yup';
+import { useMutation } from '../../utils/hooks/useMutation/useMutation.js';
 import '../../components/OverlayCard/OverlayCard.context.js';
 import { TransactionConfirmationPageLayout } from '../../components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.js';
 import { TransactionRow } from '../../components/TransactionConfirmationPageLayout/components/TransactionRow/TransactionRow.js';
@@ -66,7 +67,6 @@ import { useTransactionGas } from './hooks/useTransactionGas/useTransactionGas.j
 import { useTransactionTotal } from './hooks/useTransactionTotal/useTransactionTotal.js';
 import { transactionErrorMessage } from './helpers/transactionErrorMessage.js';
 import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
-import { useMutation } from '../../utils/hooks/useMutation/useMutation.js';
 
 const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess, onClickBack, onClickClose, title, displayPoweredByDynamicFooter = false, provider, }) => {
     const { appName, appLogoUrl, primaryWallet } = useInternalDynamicContext();

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

@@ -36,6 +36,7 @@ require('../../../../components/OverlayCard/OverlayCard.context.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/QrCodeContext/QrCodeContext.cjs');
+var useIsTurnkeyWallet = require('../../../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.cjs');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../DynamicWidgetHeader/DynamicWidgetHeader.cjs');
@@ -73,6 +74,7 @@ const ActiveWalletInformation = () => {
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = React.useState(false);
     const { primaryWallet, authToken, network, projectSettings, handleLogOut } = useInternalDynamicContext.useInternalDynamicContext();
     const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
+    const { isTurnkeyWalletWithoutAuthenticator } = useIsTurnkeyWallet.useIsTurnkeyWallet();
     const address = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address;
     const nameService = useFetchNameService.useFetchNameService(address);
     const { data: testnet } = usePromise.usePromise(() => isTestnet.isTestnet(primaryWallet), { deps: [network] });
@@ -113,9 +115,10 @@ const ActiveWalletInformation = () => {
     const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
         (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector).evmNetworks) ||
         [];
+    const showTestnetAlert = testnet && !isTurnkeyWalletWithoutAuthenticator;
     return (jsxRuntime.jsxs("div", { className: 'active-wallet-information-container', "data-testid": 'active-wallet-information', children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information', children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information__header', children: [jsxRuntime.jsx("div", { className: 'active-wallet-information__avatar--centered', children: (nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("div", { className: 'active-wallet-information__avatar', children: jsxRuntime.jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) })) : (jsxRuntime.jsx("div", { className: 'active-wallet-information__wallet-img', children: jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { jwt: authToken, iconSize: ICON_SIZE, showStatus: true }) })) }), jsxRuntime.jsxs("div", { className: 'active-wallet-information__details', children: [jsxRuntime.jsxs("div", { className: classNames.classNames('active-wallet-information__actions-container', {
                                             'active-wallet-information__actions-container--centered': !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
-                                        }), children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: nameService === null || nameService === void 0 ? void 0 : nameService.name }), jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'regular' : 'medium', variant: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'body_small' : 'body_normal', color: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'secondary' : 'primary', children: shortenWalletAddress.shortenWalletAddress(address, 4, 4) })] }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu' })] }), jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] })] }), testnet && (jsxRuntime.jsx(Alert.Alert, { variant: 'warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), jsxRuntime.jsxs("div", { className: 'balance-container', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', children: "Balance" }), primaryWallet && (jsxRuntime.jsx(Balance.Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] })] }));
+                                        }), children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: nameService === null || nameService === void 0 ? void 0 : nameService.name }), jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'regular' : 'medium', variant: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'body_small' : 'body_normal', color: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'secondary' : 'primary', children: shortenWalletAddress.shortenWalletAddress(address, 4, 4) })] }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu' })] }), jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] })] }), showTestnetAlert && (jsxRuntime.jsx(Alert.Alert, { variant: 'warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), jsxRuntime.jsxs("div", { className: 'balance-container', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', children: "Balance" }), primaryWallet && (jsxRuntime.jsx(Balance.Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] })] }));
 };
 
 exports.ActiveWalletInformation = ActiveWalletInformation;

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

@@ -32,6 +32,7 @@ import '../../../../components/OverlayCard/OverlayCard.context.js';
 import '../../../../context/FooterAnimationContext/index.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/QrCodeContext/QrCodeContext.js';
+import { useIsTurnkeyWallet } from '../../../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.js';
 import { Typography } from '../../../../components/Typography/Typography.js';
 import '../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../DynamicWidgetHeader/DynamicWidgetHeader.js';
@@ -69,6 +70,7 @@ const ActiveWalletInformation = () => {
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);
     const { primaryWallet, authToken, network, projectSettings, handleLogOut } = useInternalDynamicContext();
     const { setDynamicWidgetView } = useWidgetContext();
+    const { isTurnkeyWalletWithoutAuthenticator } = useIsTurnkeyWallet();
     const address = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address;
     const nameService = useFetchNameService(address);
     const { data: testnet } = usePromise(() => isTestnet(primaryWallet), { deps: [network] });
@@ -109,9 +111,10 @@ const ActiveWalletInformation = () => {
     const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
         (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector).evmNetworks) ||
         [];
+    const showTestnetAlert = testnet && !isTurnkeyWalletWithoutAuthenticator;
     return (jsxs("div", { className: 'active-wallet-information-container', "data-testid": 'active-wallet-information', children: [jsxs("div", { className: 'active-wallet-information', children: [jsxs("div", { className: 'active-wallet-information__header', children: [jsx("div", { className: 'active-wallet-information__avatar--centered', children: (nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("div", { className: 'active-wallet-information__avatar', children: jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) })) : (jsx("div", { className: 'active-wallet-information__wallet-img', children: jsx(AuthProviderIcon, { jwt: authToken, iconSize: ICON_SIZE, showStatus: true }) })) }), jsxs("div", { className: 'active-wallet-information__details', children: [jsxs("div", { className: classNames('active-wallet-information__actions-container', {
                                             'active-wallet-information__actions-container--centered': !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
-                                        }), children: [jsxs("div", { children: [jsx(Typography, { className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: nameService === null || nameService === void 0 ? void 0 : nameService.name }), jsx(Typography, { className: 'active-wallet-information__address', weight: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'regular' : 'medium', variant: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'body_small' : 'body_normal', color: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'secondary' : 'primary', children: shortenWalletAddress(address, 4, 4) })] }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu' })] }), jsx(NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] })] }), testnet && (jsx(Alert, { variant: 'warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), jsxs("div", { className: 'balance-container', children: [jsx(Typography, { color: 'secondary', variant: 'body_small', children: "Balance" }), primaryWallet && (jsx(Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] })] }));
+                                        }), children: [jsxs("div", { children: [jsx(Typography, { className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: nameService === null || nameService === void 0 ? void 0 : nameService.name }), jsx(Typography, { className: 'active-wallet-information__address', weight: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'regular' : 'medium', variant: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'body_small' : 'body_normal', color: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'secondary' : 'primary', children: shortenWalletAddress(address, 4, 4) })] }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu' })] }), jsx(NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] })] }), showTestnetAlert && (jsx(Alert, { variant: 'warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), jsxs("div", { className: 'balance-container', children: [jsx(Typography, { color: 'secondary', variant: 'body_small', children: "Balance" }), primaryWallet && (jsx(Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] })] }));
 };
 
 export { ActiveWalletInformation };

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

@@ -41,6 +41,7 @@ require('react-focus-lock');
 require('formik');
 require('yup');
 require('../../../../components/OverlayCard/OverlayCard.context.cjs');
+var PasskeyCreatedSuccessBanner = require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/QrCodeContext/QrCodeContext.cjs');
@@ -85,7 +86,7 @@ const DynamicWidgetHeader = ({ variant, }) => {
             return 'profile';
         return dynamicWidgetView;
     }, [dynamicWidgetView, isKYCEnabled, multiWallet]);
-    return (jsxRuntime.jsxs("div", { className: 'dynamic-widget-header', children: [isKYCEnabled && multiWallet && (jsxRuntime.jsx(OptionsSwitcher.OptionsSwitcher, { rootClassName: 'dynamic-widget-header__switcher', value: dynamicWidgetSwitcherOverwriteValue, options: options, onChange: (view) => setDynamicWidgetView(view) })), (dynamicWidgetSwitcherOverwriteValue === 'wallets' ||
+    return (jsxRuntime.jsxs("div", { className: 'dynamic-widget-header', children: [isKYCEnabled && multiWallet && (jsxRuntime.jsx(OptionsSwitcher.OptionsSwitcher, { rootClassName: 'dynamic-widget-header__switcher', value: dynamicWidgetSwitcherOverwriteValue, options: options, onChange: (view) => setDynamicWidgetView(view) })), jsxRuntime.jsx(PasskeyCreatedSuccessBanner.PasskeyCreatedSuccessBanner, { className: 'dynamic-widget-header__passkey-success' }), (dynamicWidgetSwitcherOverwriteValue === 'wallets' ||
                 (dynamicWidgetSwitcherOverwriteValue === 'profile' &&
                     !multiWallet)) && jsxRuntime.jsx(DynamicWidgetWalletHeader.DynamicWidgetWalletHeader, { variant: variant })] }));
 };

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

@@ -37,6 +37,7 @@ import 'react-focus-lock';
 import 'formik';
 import 'yup';
 import '../../../../components/OverlayCard/OverlayCard.context.js';
+import { PasskeyCreatedSuccessBanner } from '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../context/FooterAnimationContext/index.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/QrCodeContext/QrCodeContext.js';
@@ -77,7 +78,7 @@ const DynamicWidgetHeader = ({ variant, }) => {
             return 'profile';
         return dynamicWidgetView;
     }, [dynamicWidgetView, isKYCEnabled, multiWallet]);
-    return (jsxs("div", { className: 'dynamic-widget-header', children: [isKYCEnabled && multiWallet && (jsx(OptionsSwitcher, { rootClassName: 'dynamic-widget-header__switcher', value: dynamicWidgetSwitcherOverwriteValue, options: options, onChange: (view) => setDynamicWidgetView(view) })), (dynamicWidgetSwitcherOverwriteValue === 'wallets' ||
+    return (jsxs("div", { className: 'dynamic-widget-header', children: [isKYCEnabled && multiWallet && (jsx(OptionsSwitcher, { rootClassName: 'dynamic-widget-header__switcher', value: dynamicWidgetSwitcherOverwriteValue, options: options, onChange: (view) => setDynamicWidgetView(view) })), jsx(PasskeyCreatedSuccessBanner, { className: 'dynamic-widget-header__passkey-success' }), (dynamicWidgetSwitcherOverwriteValue === 'wallets' ||
                 (dynamicWidgetSwitcherOverwriteValue === 'profile' &&
                     !multiWallet)) && jsx(DynamicWidgetWalletHeader, { variant: variant })] }));
 };

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetWalletHeader/DynamicWidgetWalletHeader.cjs

@@ -36,6 +36,7 @@ require('../../../../../components/OverlayCard/OverlayCard.context.cjs');
 require('../../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../../context/MockContext/MockContext.cjs');
 require('../../../../../context/QrCodeContext/QrCodeContext.cjs');
+var useIsTurnkeyWallet = require('../../../../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.cjs');
 var Typography = require('../../../../../components/Typography/Typography.cjs');
 require('../../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../DynamicWidgetHeader.cjs');
@@ -56,6 +57,7 @@ require('formik');
 var Button = require('../../../../../components/Button/Button.cjs');
 require('../../../../../components/IconButton/IconButton.cjs');
 require('../../../../../components/Alert/Alert.cjs');
+var SecureTurnkeyWalletCard = require('../../../../../components/SecureTurnkeyWalletCard/SecureTurnkeyWalletCard.cjs');
 require('../../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
@@ -76,6 +78,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const DynamicWidgetWalletHeader = ({ variant, }) => {
     const { primaryWallet, user } = useInternalDynamicContext.useInternalDynamicContext();
     const { open: openSendBalanceModal } = SendBalanceContext.useSendBalance();
+    const { isTurnkeyWalletWithoutAuthenticator } = useIsTurnkeyWallet.useIsTurnkeyWallet();
     const { supportsFunding, setShowFunding, fundingEnabled } = FundingContext.useFundingContext();
     const { setDynamicWidgetView, setIsOpen } = DynamicWidgetContext.useWidgetContext();
     const isSendBalanceEnabled = React.useMemo(() => {
@@ -113,11 +116,11 @@ const DynamicWidgetWalletHeader = ({ variant, }) => {
         }
     };
     const isActionsVisible = isSendBalanceEnabled || fundingEnabled;
-    return (jsxRuntime.jsxs("div", { className: 'dynamic-widget-wallet-header', "data-testid": 'dynamic-widget-wallet-header', children: [renderWalletHeader(), primaryWallet ? (jsxRuntime.jsx("div", { "data-testid": 'primaryWalletStatus', className: 'dynamic-widget-wallet-header__wallet-info', children: isActionsVisible && (jsxRuntime.jsxs("div", { className: 'dynamic-widget-wallet-header__wallet-actions', children: [fundingEnabled && (jsxRuntime.jsx(Button.Button, { expanded: true, dataTestId: 'buy-crypto-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: () => setShowFunding(true), disabled: !supportsFunding, startSlot: 
-                            // eslint-disable-next-line react/jsx-wrap-multilines
-                            jsxRuntime.jsx(Icon.Icon, { size: 'small', color: 'text-secondary', children: jsxRuntime.jsx(add.ReactComponent, {}) }), children: "Buy" })), isSendBalanceEnabled && (jsxRuntime.jsx(Button.Button, { expanded: true, dataTestId: 'send-balance-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: handleOnClickSend, startSlot: 
-                            // eslint-disable-next-line react/jsx-wrap-multilines
-                            jsxRuntime.jsx(Icon.Icon, { size: 'small', color: 'text-secondary', children: jsxRuntime.jsx(send.ReactComponent, {}) }), children: "Send" }))] })) })) : (jsxRuntime.jsx(Typography.Typography, { className: 'dynamic-widget-wallet-header__email', variant: 'body_normal', weight: 'regular', children: renderEmailOrSocialHeader() }))] }));
+    return (jsxRuntime.jsxs("div", { className: 'dynamic-widget-wallet-header', "data-testid": 'dynamic-widget-wallet-header', children: [renderWalletHeader(), primaryWallet ? (jsxRuntime.jsxs("div", { "data-testid": 'primaryWalletStatus', className: 'dynamic-widget-wallet-header__wallet-info', children: [jsxRuntime.jsx(SecureTurnkeyWalletCard.SecureTurnkeyWalletCard, { className: 'dynamic-widget-wallet-header__wallet-info__secure-wallet' }), isActionsVisible && (jsxRuntime.jsxs("div", { className: 'dynamic-widget-wallet-header__wallet-actions', children: [fundingEnabled && (jsxRuntime.jsx(Button.Button, { expanded: true, dataTestId: 'buy-crypto-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: () => setShowFunding(true), disabled: !supportsFunding || isTurnkeyWalletWithoutAuthenticator, startSlot: 
+                                // eslint-disable-next-line react/jsx-wrap-multilines
+                                jsxRuntime.jsx(Icon.Icon, { size: 'small', color: 'text-secondary', children: jsxRuntime.jsx(add.ReactComponent, {}) }), children: "Buy" })), isSendBalanceEnabled && (jsxRuntime.jsx(Button.Button, { expanded: true, dataTestId: 'send-balance-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: handleOnClickSend, disabled: isTurnkeyWalletWithoutAuthenticator, startSlot: 
+                                // eslint-disable-next-line react/jsx-wrap-multilines
+                                jsxRuntime.jsx(Icon.Icon, { size: 'small', color: 'text-secondary', children: jsxRuntime.jsx(send.ReactComponent, {}) }), children: "Send" }))] }))] })) : (jsxRuntime.jsx(Typography.Typography, { className: 'dynamic-widget-wallet-header__email', variant: 'body_normal', weight: 'regular', children: renderEmailOrSocialHeader() }))] }));
 };
 React__default["default"].memo(DynamicWidgetWalletHeader);
 

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetWalletHeader/DynamicWidgetWalletHeader.js

@@ -32,6 +32,7 @@ import '../../../../../components/OverlayCard/OverlayCard.context.js';
 import '../../../../../context/FooterAnimationContext/index.js';
 import '../../../../../context/MockContext/MockContext.js';
 import '../../../../../context/QrCodeContext/QrCodeContext.js';
+import { useIsTurnkeyWallet } from '../../../../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.js';
 import { Typography } from '../../../../../components/Typography/Typography.js';
 import '../../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../DynamicWidgetHeader.js';
@@ -52,6 +53,7 @@ import 'formik';
 import { Button } from '../../../../../components/Button/Button.js';
 import '../../../../../components/IconButton/IconButton.js';
 import '../../../../../components/Alert/Alert.js';
+import { SecureTurnkeyWalletCard } from '../../../../../components/SecureTurnkeyWalletCard/SecureTurnkeyWalletCard.js';
 import '../../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../../components/MenuList/Dropdown/Dropdown.js';
@@ -68,6 +70,7 @@ import { UserAvatar } from '../../../../../components/UserAvatar/UserAvatar.js';
 const DynamicWidgetWalletHeader = ({ variant, }) => {
     const { primaryWallet, user } = useInternalDynamicContext();
     const { open: openSendBalanceModal } = useSendBalance();
+    const { isTurnkeyWalletWithoutAuthenticator } = useIsTurnkeyWallet();
     const { supportsFunding, setShowFunding, fundingEnabled } = useFundingContext();
     const { setDynamicWidgetView, setIsOpen } = useWidgetContext();
     const isSendBalanceEnabled = useMemo(() => {
@@ -105,11 +108,11 @@ const DynamicWidgetWalletHeader = ({ variant, }) => {
         }
     };
     const isActionsVisible = isSendBalanceEnabled || fundingEnabled;
-    return (jsxs("div", { className: 'dynamic-widget-wallet-header', "data-testid": 'dynamic-widget-wallet-header', children: [renderWalletHeader(), primaryWallet ? (jsx("div", { "data-testid": 'primaryWalletStatus', className: 'dynamic-widget-wallet-header__wallet-info', children: isActionsVisible && (jsxs("div", { className: 'dynamic-widget-wallet-header__wallet-actions', children: [fundingEnabled && (jsx(Button, { expanded: true, dataTestId: 'buy-crypto-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: () => setShowFunding(true), disabled: !supportsFunding, startSlot: 
-                            // eslint-disable-next-line react/jsx-wrap-multilines
-                            jsx(Icon, { size: 'small', color: 'text-secondary', children: jsx(SvgAdd, {}) }), children: "Buy" })), isSendBalanceEnabled && (jsx(Button, { expanded: true, dataTestId: 'send-balance-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: handleOnClickSend, startSlot: 
-                            // eslint-disable-next-line react/jsx-wrap-multilines
-                            jsx(Icon, { size: 'small', color: 'text-secondary', children: jsx(SvgSend, {}) }), children: "Send" }))] })) })) : (jsx(Typography, { className: 'dynamic-widget-wallet-header__email', variant: 'body_normal', weight: 'regular', children: renderEmailOrSocialHeader() }))] }));
+    return (jsxs("div", { className: 'dynamic-widget-wallet-header', "data-testid": 'dynamic-widget-wallet-header', children: [renderWalletHeader(), primaryWallet ? (jsxs("div", { "data-testid": 'primaryWalletStatus', className: 'dynamic-widget-wallet-header__wallet-info', children: [jsx(SecureTurnkeyWalletCard, { className: 'dynamic-widget-wallet-header__wallet-info__secure-wallet' }), isActionsVisible && (jsxs("div", { className: 'dynamic-widget-wallet-header__wallet-actions', children: [fundingEnabled && (jsx(Button, { expanded: true, dataTestId: 'buy-crypto-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: () => setShowFunding(true), disabled: !supportsFunding || isTurnkeyWalletWithoutAuthenticator, startSlot: 
+                                // eslint-disable-next-line react/jsx-wrap-multilines
+                                jsx(Icon, { size: 'small', color: 'text-secondary', children: jsx(SvgAdd, {}) }), children: "Buy" })), isSendBalanceEnabled && (jsx(Button, { expanded: true, dataTestId: 'send-balance-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: handleOnClickSend, disabled: isTurnkeyWalletWithoutAuthenticator, startSlot: 
+                                // eslint-disable-next-line react/jsx-wrap-multilines
+                                jsx(Icon, { size: 'small', color: 'text-secondary', children: jsx(SvgSend, {}) }), children: "Send" }))] }))] })) : (jsx(Typography, { className: 'dynamic-widget-wallet-header__email', variant: 'body_normal', weight: 'regular', children: renderEmailOrSocialHeader() }))] }));
 };
 React__default.memo(DynamicWidgetWalletHeader);
 

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

@@ -46,13 +46,13 @@ require('../../context/DynamicWidgetContext.cjs');
 require('yup');
 require('../../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 require('@dynamic-labs/types');
+var useMutation = require('../../../../utils/hooks/useMutation/useMutation.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('formik');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
 require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
-var useMutation = require('../../../../utils/hooks/useMutation/useMutation.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 var OTPVerificationView = require('../../../../components/OTPVerificationView/OTPVerificationView.cjs');

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

@@ -42,13 +42,13 @@ import '../../context/DynamicWidgetContext.js';
 import 'yup';
 import '../../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import '@dynamic-labs/types';
+import { useMutation } from '../../../../utils/hooks/useMutation/useMutation.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import 'formik';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
 import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
-import { useMutation } from '../../../../utils/hooks/useMutation/useMutation.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import { OTPVerificationView } from '../../../../components/OTPVerificationView/OTPVerificationView.js';

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
 require('react');
 require('@dynamic-labs/utils');
 require('@dynamic-labs/sdk-api');
@@ -11,7 +12,7 @@ require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../../../context/ViewContext/ViewContext.cjs');
-var addWallet = require('../../../../shared/assets/add-wallet.cjs');
+var embeddedWalletIcon = require('../../../../shared/assets/embedded-wallet-icon.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../../../utils/constants/colors.cjs');
 require('../../../../shared/utils/classes/storage/localStorage.cjs');
@@ -34,6 +35,7 @@ require('../../../../components/OverlayCard/OverlayCard.context.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/QrCodeContext/QrCodeContext.cjs');
+var useIsTurnkeyWallet = require('../../../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.cjs');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../DynamicWidgetHeader/DynamicWidgetHeader.cjs');
@@ -60,6 +62,13 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
 
-const EmptyWallets = ({ text }) => (jsxRuntime.jsxs("div", { className: 'empty-wallet__container', children: [jsxRuntime.jsx("div", { className: 'empty-wallet__icon-container', children: jsxRuntime.jsx(Icon.Icon, { color: 'text-primary', size: 'medium', children: jsxRuntime.jsx(addWallet.ReactComponent, {}) }) }), jsxRuntime.jsx("div", { className: 'empty-wallet__text-container', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', children: text }) })] }));
+const EmptyWallets = ({ text }) => {
+    const { isTurnkeyWalletWithoutAuthenticator } = useIsTurnkeyWallet.useIsTurnkeyWallet();
+    return (jsxRuntime.jsxs("div", { className: classNames.classNames('empty-wallet__container', {
+            'empty-wallet__container--big': !isTurnkeyWalletWithoutAuthenticator,
+        }), children: [jsxRuntime.jsx(Icon.Icon, { className: 'empty-wallet__icon', size: 'medium', children: jsxRuntime.jsx(embeddedWalletIcon.ReactComponent, {}) }), jsxRuntime.jsx("div", { className: classNames.classNames({
+                    'empty-wallet__text-container': !isTurnkeyWalletWithoutAuthenticator,
+                }), children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: text }) })] }));
+};
 
 exports.EmptyWallets = EmptyWallets;

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

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../../../utils/functions/classNames/classNames.js';
 import 'react';
 import '@dynamic-labs/utils';
 import '@dynamic-labs/sdk-api';
@@ -7,7 +8,7 @@ import '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../../../context/ViewContext/ViewContext.js';
-import { ReactComponent as SvgAddWallet } from '../../../../shared/assets/add-wallet.js';
+import { ReactComponent as SvgEmbeddedWalletIcon } from '../../../../shared/assets/embedded-wallet-icon.js';
 import '@dynamic-labs/wallet-book';
 import '../../../../utils/constants/colors.js';
 import '../../../../shared/utils/classes/storage/localStorage.js';
@@ -30,6 +31,7 @@ import '../../../../components/OverlayCard/OverlayCard.context.js';
 import '../../../../context/FooterAnimationContext/index.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/QrCodeContext/QrCodeContext.js';
+import { useIsTurnkeyWallet } from '../../../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.js';
 import { Typography } from '../../../../components/Typography/Typography.js';
 import '../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../DynamicWidgetHeader/DynamicWidgetHeader.js';
@@ -56,6 +58,13 @@ import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
 
-const EmptyWallets = ({ text }) => (jsxs("div", { className: 'empty-wallet__container', children: [jsx("div", { className: 'empty-wallet__icon-container', children: jsx(Icon, { color: 'text-primary', size: 'medium', children: jsx(SvgAddWallet, {}) }) }), jsx("div", { className: 'empty-wallet__text-container', children: jsx(Typography, { variant: 'body_small', color: 'primary', children: text }) })] }));
+const EmptyWallets = ({ text }) => {
+    const { isTurnkeyWalletWithoutAuthenticator } = useIsTurnkeyWallet();
+    return (jsxs("div", { className: classNames('empty-wallet__container', {
+            'empty-wallet__container--big': !isTurnkeyWalletWithoutAuthenticator,
+        }), children: [jsx(Icon, { className: 'empty-wallet__icon', size: 'medium', children: jsx(SvgEmbeddedWalletIcon, {}) }), jsx("div", { className: classNames({
+                    'empty-wallet__text-container': !isTurnkeyWalletWithoutAuthenticator,
+                }), children: jsx(Typography, { variant: 'body_small', color: 'secondary', children: text }) })] }));
+};
 
 export { EmptyWallets };

package/src/lib/widgets/DynamicWidget/views/ManagePasskeysWidgetView/ManagePasskeysWidgetView.cjs

@@ -58,6 +58,7 @@ var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
 var IconButton = require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
 var usePasskeyRecovery = require('../../../../utils/hooks/usePasskeyRecovery/usePasskeyRecovery.cjs');
+var PasskeyCreatedSuccessBanner = require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 var PasskeyCard = require('./PasskeyCard/PasskeyCard.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
@@ -90,7 +91,7 @@ const ManagePasskeysWidgetView = () => {
     }, [getPasskeysData]);
     const isRecoveryEnabled = Boolean(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.passkeyEmbeddedWalletRecoveryEnabled);
     const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: goToInitialDynamicWidgetView, "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
-    return (jsxRuntime.jsxs("div", { className: 'manage-passkeys-widget-view', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx("div", { className: 'send-balance-page-layout__header-content', children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', children: t('dyn_manage_passkeys.title') }) }) }), jsxRuntime.jsxs("div", { className: 'manage-passkeys-widget-view__body', children: [jsxRuntime.jsx("div", { className: 'manage-passkeys-widget-view__body__cards', children: isLoading ? (jsxRuntime.jsx(Skeleton.Skeleton, { count: 1, className: 'manage-passkeys-widget-view__body__cards__skeleton' })) : (userPasskeys.map((passkey) => (jsxRuntime.jsx(PasskeyCard.PasskeyCard, { passkey: passkey }, passkey.id)))) }), isRecoveryEnabled && (jsxRuntime.jsx(Button.Button, { buttonPadding: 'large', buttonClassName: 'manage-passkeys-widget-view__body__recovery-button', onClick: initPasskeyRecoveryProcess, children: t('dyn_manage_passkeys.recovery_button') })), jsxRuntime.jsx(NeedHelpSection.NeedHelpSection, {})] })] }));
+    return (jsxRuntime.jsxs("div", { className: 'manage-passkeys-widget-view', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx("div", { className: 'send-balance-page-layout__header-content', children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', children: t('dyn_manage_passkeys.title') }) }) }), jsxRuntime.jsx(PasskeyCreatedSuccessBanner.PasskeyCreatedSuccessBanner, {}), jsxRuntime.jsxs("div", { className: 'manage-passkeys-widget-view__body', children: [jsxRuntime.jsx("div", { className: 'manage-passkeys-widget-view__body__cards', children: isLoading ? (jsxRuntime.jsx(Skeleton.Skeleton, { count: 1, className: 'manage-passkeys-widget-view__body__cards__skeleton' })) : (userPasskeys.map((passkey) => (jsxRuntime.jsx(PasskeyCard.PasskeyCard, { passkey: passkey }, passkey.id)))) }), isRecoveryEnabled && (jsxRuntime.jsx(Button.Button, { buttonPadding: 'large', buttonClassName: 'manage-passkeys-widget-view__body__recovery-button', onClick: initPasskeyRecoveryProcess, showInternalLoading: false, children: t('dyn_manage_passkeys.recovery_button') })), jsxRuntime.jsx(NeedHelpSection.NeedHelpSection, {})] })] }));
 };
 
 exports.ManagePasskeysWidgetView = ManagePasskeysWidgetView;