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

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();
@@ -151,6 +151,8 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
         return total > balance;
     }, [balance, total]);
     const alert = useMemo(() => {
+        if (isTransactionLoading || Boolean(errorMessage))
+            return null;
         if (TransactionGasCannotBeSponsoredError.isInstance(transactionError)) {
             return (jsx(Alert, { icon: 'error', variant: 'error', children: t('dyn_send_transaction.error_message.gas_not_sponsored') }));
         }
@@ -162,7 +164,15 @@ const TransactionConfirmationView = ({ transaction, mutation, onError, onSuccess
                 amountLeft,
                 currencySymbol,
             }) }));
-    }, [currencySymbol, hasInsufficientFunds, missingFunds, t, transactionError]);
+    }, [
+        currencySymbol,
+        hasInsufficientFunds,
+        missingFunds,
+        t,
+        transactionError,
+        isTransactionLoading,
+        errorMessage,
+    ]);
     return (jsxs(TransactionConfirmationPageLayout, { onClickBack: onClickBack, onClickClose: onClickClose, title: title, appOrigin: appOrigin, appName: appName, appLogoUrl: appLogoUrl, isLoading: isLoading, onClickSend: () => send(), displayPoweredByDynamicFooter: displayPoweredByDynamicFooter, disableSendButton: isTransactionLoading || hasInsufficientFunds, error: errorMessage, alert: alert, children: [jsx(TransactionRow, { label: t('dyn_send_transaction.confirmation.data.from'), isLoading: isTransactionFromAddressLoading, title: transactionFromAddress, children: shortenWalletAddress(transactionFromAddress, 4, 4) }), jsx(TransactionRow, { label: t('dyn_send_transaction.confirmation.data.to'), isLoading: isTransactionToAddressLoading, title: transactionToAddress, children: transactionToAddress &&
                     shortenWalletAddress(transactionToAddress, 4, 4) }), jsx(TransactionRow, { label: t('dyn_send_transaction.confirmation.data.amount'), isLoading: isTransactionValueLoading, isEmpty: !transactionValue, title: transactionValue ? formatBigNumber(transactionValue) : undefined, suffix: currencySymbol, icon: chainIcon, dataTestId: 'transaction-amount', children: transactionValue ? formatBigNumber(transactionValue, 10) : 0 }), !isGasSponsored && (jsxs(Fragment, { children: [jsx(TransactionRow, { label: isGasEstimated
                             ? t('dyn_send_transaction.confirmation.data.gas_estimate')

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

@@ -31,6 +31,9 @@ const transactionErrorMessage = (error) => {
     if (utils.TransactionGasCannotBeSponsoredError.isInstance(error)) {
         return;
     }
+    if (utils.InsufficientFundsError.isInstance(error)) {
+        return errorCodesMapping.INSUFFICIENT_FUNDS;
+    }
     const { code } = error;
     const defaultMessage = 'Something went wrong.';
     // turnkey request errors

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

@@ -1,4 +1,4 @@
-import { TransactionGasCannotBeSponsoredError } from '@dynamic-labs/utils';
+import { TransactionGasCannotBeSponsoredError, InsufficientFundsError } from '@dynamic-labs/utils';
 import '@dynamic-labs/sdk-api';
 import { logger } from '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
@@ -27,6 +27,9 @@ const transactionErrorMessage = (error) => {
     if (TransactionGasCannotBeSponsoredError.isInstance(error)) {
         return;
     }
+    if (InsufficientFundsError.isInstance(error)) {
+        return errorCodesMapping.INSUFFICIENT_FUNDS;
+    }
     const { code } = error;
     const defaultMessage = 'Something went wrong.';
     // turnkey request errors

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] });
@@ -93,8 +95,8 @@ const ActiveWalletInformation = () => {
         {
             Icon: null,
             callback: () => setDynamicWidgetView('manage-passkeys'),
-            hide: !(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name) ||
-                walletConnectorCore.normalizeWalletName(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name) !== 'turnkey',
+            hide: !((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name) &&
+                walletConnectorCore.normalizeWalletName(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name).startsWith('turnkey')),
             text: 'My passkeys',
         },
         {
@@ -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, { 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] });
@@ -89,8 +91,8 @@ const ActiveWalletInformation = () => {
         {
             Icon: null,
             callback: () => setDynamicWidgetView('manage-passkeys'),
-            hide: !(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name) ||
-                normalizeWalletName(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name) !== 'turnkey',
+            hide: !((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name) &&
+                normalizeWalletName(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name).startsWith('turnkey')),
             text: 'My passkeys',
         },
         {
@@ -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, { 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/DynamicNav/DynamicNav.cjs

@@ -62,7 +62,7 @@ require('react-focus-lock');
 
 const DynamicNav = () => {
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = React.useState(false);
-    const { primaryWallet, projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
+    const { primaryWallet, projectSettings, network } = useInternalDynamicContext.useInternalDynamicContext();
     const { inlineControlsRef } = DynamicWidgetContext.useWidgetContext();
     const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
         primaryWallet.connector.evmNetworks) ||
@@ -70,7 +70,7 @@ const DynamicNav = () => {
     if (!projectSettings)
         return null;
     const shouldHideNetwork = projectSettings.sdk.hideNetworkInDynamicWidget;
-    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsxs("div", { ref: inlineControlsRef, "data-testid": 'DynamicNav', className: 'dynamic-widget-inline-controls', children: [!shouldHideNetwork && primaryWallet && (jsxRuntime.jsx(PopperContext.PopperProvider, { children: jsxRuntime.jsx(NetworkPicker.NetworkPicker, { connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'dynamic-widget-inline-controls__network-picker-main', buttonClassName: 'dynamic-widget-inline-controls__network-picker', listClassName: 'dynamic-widget-inline-controls__network-picker-list', checkboxClassName: 'dynamic-widget-inline-controls__network-picker-checkbox', evmNetworks: evmNetworks }) })), jsxRuntime.jsx("div", { className: 'dynamic-widget-inline-controls__account-control-container', children: jsxRuntime.jsx(AccountControl.AccountControl, { className: 'dynamic-widget-inline-controls__account-control' }) })] }) }));
+    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsxs("div", { ref: inlineControlsRef, "data-testid": 'DynamicNav', className: 'dynamic-widget-inline-controls', children: [!shouldHideNetwork && primaryWallet && (jsxRuntime.jsx(PopperContext.PopperProvider, { children: jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'dynamic-widget-inline-controls__network-picker-main', buttonClassName: 'dynamic-widget-inline-controls__network-picker', listClassName: 'dynamic-widget-inline-controls__network-picker-list', checkboxClassName: 'dynamic-widget-inline-controls__network-picker-checkbox', evmNetworks: evmNetworks }) })), jsxRuntime.jsx("div", { className: 'dynamic-widget-inline-controls__account-control-container', children: jsxRuntime.jsx(AccountControl.AccountControl, { className: 'dynamic-widget-inline-controls__account-control' }) })] }) }));
 };
 const ShadowedDynamicNav = () => (jsxRuntime.jsx(ShadowDOM.ShadowDOM, { children: jsxRuntime.jsx(DynamicNav, {}) }));
 

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

@@ -58,7 +58,7 @@ import 'react-focus-lock';
 
 const DynamicNav = () => {
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);
-    const { primaryWallet, projectSettings } = useInternalDynamicContext();
+    const { primaryWallet, projectSettings, network } = useInternalDynamicContext();
     const { inlineControlsRef } = useWidgetContext();
     const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
         primaryWallet.connector.evmNetworks) ||
@@ -66,7 +66,7 @@ const DynamicNav = () => {
     if (!projectSettings)
         return null;
     const shouldHideNetwork = projectSettings.sdk.hideNetworkInDynamicWidget;
-    return (jsx(IsBrowser, { children: jsxs("div", { ref: inlineControlsRef, "data-testid": 'DynamicNav', className: 'dynamic-widget-inline-controls', children: [!shouldHideNetwork && primaryWallet && (jsx(PopperProvider, { children: jsx(NetworkPicker, { connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'dynamic-widget-inline-controls__network-picker-main', buttonClassName: 'dynamic-widget-inline-controls__network-picker', listClassName: 'dynamic-widget-inline-controls__network-picker-list', checkboxClassName: 'dynamic-widget-inline-controls__network-picker-checkbox', evmNetworks: evmNetworks }) })), jsx("div", { className: 'dynamic-widget-inline-controls__account-control-container', children: jsx(AccountControl, { className: 'dynamic-widget-inline-controls__account-control' }) })] }) }));
+    return (jsx(IsBrowser, { children: jsxs("div", { ref: inlineControlsRef, "data-testid": 'DynamicNav', className: 'dynamic-widget-inline-controls', children: [!shouldHideNetwork && primaryWallet && (jsx(PopperProvider, { children: jsx(NetworkPicker, { currentNetwork: network, connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'dynamic-widget-inline-controls__network-picker-main', buttonClassName: 'dynamic-widget-inline-controls__network-picker', listClassName: 'dynamic-widget-inline-controls__network-picker-list', checkboxClassName: 'dynamic-widget-inline-controls__network-picker-checkbox', evmNetworks: evmNetworks }) })), jsx("div", { className: 'dynamic-widget-inline-controls__account-control-container', children: jsx(AccountControl, { className: 'dynamic-widget-inline-controls__account-control' }) })] }) }));
 };
 const ShadowedDynamicNav = () => (jsx(ShadowDOM, { children: jsx(DynamicNav, {}) }));
 

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');
@@ -61,7 +61,7 @@ require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
 
 const EmailOTPConnectorPendingSignModalContent = ({ walletConnector }) => {
-    const { setSelectedWalletWithAction, selectedWalletWithAction, setPrimaryWalletId, setMultiWalletWidgetState, computeConnectedStateForWallets, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setSelectedWalletWithAction, selectedWalletWithAction, setPrimaryWalletId, setMultiWalletWidgetState, } = useInternalDynamicContext.useInternalDynamicContext();
     const [error, setError] = React.useState();
     const { email } = walletConnector;
     if (!email) {
@@ -73,7 +73,6 @@ const EmailOTPConnectorPendingSignModalContent = ({ walletConnector }) => {
             if (!selectedWalletWithAction) {
                 return;
             }
-            yield computeConnectedStateForWallets();
             setMultiWalletWidgetState('idle');
             setSelectedWalletWithAction(null);
             setPrimaryWalletId(selectedWalletWithAction.wallet.id);

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';
@@ -57,7 +57,7 @@ import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
 
 const EmailOTPConnectorPendingSignModalContent = ({ walletConnector }) => {
-    const { setSelectedWalletWithAction, selectedWalletWithAction, setPrimaryWalletId, setMultiWalletWidgetState, computeConnectedStateForWallets, } = useInternalDynamicContext();
+    const { setSelectedWalletWithAction, selectedWalletWithAction, setPrimaryWalletId, setMultiWalletWidgetState, } = useInternalDynamicContext();
     const [error, setError] = useState();
     const { email } = walletConnector;
     if (!email) {
@@ -69,7 +69,6 @@ const EmailOTPConnectorPendingSignModalContent = ({ walletConnector }) => {
             if (!selectedWalletWithAction) {
                 return;
             }
-            yield computeConnectedStateForWallets();
             setMultiWalletWidgetState('idle');
             setSelectedWalletWithAction(null);
             setPrimaryWalletId(selectedWalletWithAction.wallet.id);

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/components/Wallet/Wallet.cjs

@@ -69,7 +69,7 @@ require('react-focus-lock');
 const Wallet = ({ wallet, ens }) => {
     var _a;
     const { id: walletId, connector, address } = wallet;
-    const { computeConnectedStateForWallets, setPrimaryWallet, setSelectedWalletConnectorKey, setShowWidgetStatePopup, setSelectedWalletWithAction, authToken, primaryWallet, user, projectSettings, authMode, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setPrimaryWallet, setSelectedWalletConnectorKey, setShowWidgetStatePopup, setSelectedWalletWithAction, authToken, primaryWallet, user, projectSettings, authMode, } = useInternalDynamicContext.useInternalDynamicContext();
     const email = (_a = user === null || user === void 0 ? void 0 : user.verifiedCredentials.find((verifiedCredential) => verifiedCredential.format === 'email')) === null || _a === void 0 ? void 0 : _a.email;
     const iconSize = 20;
     const options = [
@@ -118,7 +118,6 @@ const Wallet = ({ wallet, ens }) => {
         setShowWidgetStatePopup(true);
         setSelectedWalletWithAction({ action: 'select', wallet });
         setPrimaryWallet(walletId);
-        computeConnectedStateForWallets();
         setSelectedWalletConnectorKey(connector.key);
     });
     return (jsxRuntime.jsxs("div", { className: 'wallet__container', "data-testid": 'wallet', children: [jsxRuntime.jsxs("div", { className: 'wallet__row', children: [jsxRuntime.jsx("div", { className: 'wallet__icon-container', children: jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { iconSize: iconSize, jwt: authToken, wallet: wallet, showStatus: true }) }), (ens === null || ens === void 0 ? void 0 : ens.name) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, { className: 'wallet__ens-name', variant: 'body_small', color: 'primary', truncate: true, children: ens === null || ens === void 0 ? void 0 : ens.name }), jsxRuntime.jsx("div", { className: 'wallet__row__seperator' }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_mini', color: 'secondary', children: shortenWalletAddress.shortenWalletAddress(address, 3, 3) })] })) : (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', children: shortenWalletAddress.shortenWalletAddress(address, 4, 4) }))] }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'wallet__menu', direction: 'left' })] }));

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

@@ -65,7 +65,7 @@ import 'react-focus-lock';
 const Wallet = ({ wallet, ens }) => {
     var _a;
     const { id: walletId, connector, address } = wallet;
-    const { computeConnectedStateForWallets, setPrimaryWallet, setSelectedWalletConnectorKey, setShowWidgetStatePopup, setSelectedWalletWithAction, authToken, primaryWallet, user, projectSettings, authMode, } = useInternalDynamicContext();
+    const { setPrimaryWallet, setSelectedWalletConnectorKey, setShowWidgetStatePopup, setSelectedWalletWithAction, authToken, primaryWallet, user, projectSettings, authMode, } = useInternalDynamicContext();
     const email = (_a = user === null || user === void 0 ? void 0 : user.verifiedCredentials.find((verifiedCredential) => verifiedCredential.format === 'email')) === null || _a === void 0 ? void 0 : _a.email;
     const iconSize = 20;
     const options = [
@@ -114,7 +114,6 @@ const Wallet = ({ wallet, ens }) => {
         setShowWidgetStatePopup(true);
         setSelectedWalletWithAction({ action: 'select', wallet });
         setPrimaryWallet(walletId);
-        computeConnectedStateForWallets();
         setSelectedWalletConnectorKey(connector.key);
     });
     return (jsxs("div", { className: 'wallet__container', "data-testid": 'wallet', children: [jsxs("div", { className: 'wallet__row', children: [jsx("div", { className: 'wallet__icon-container', children: jsx(AuthProviderIcon, { iconSize: iconSize, jwt: authToken, wallet: wallet, showStatus: true }) }), (ens === null || ens === void 0 ? void 0 : ens.name) ? (jsxs(Fragment, { children: [jsx(Typography, { className: 'wallet__ens-name', variant: 'body_small', color: 'primary', truncate: true, children: ens === null || ens === void 0 ? void 0 : ens.name }), jsx("div", { className: 'wallet__row__seperator' }), jsx(Typography, { variant: 'body_mini', color: 'secondary', children: shortenWalletAddress(address, 3, 3) })] })) : (jsx(Typography, { variant: 'body_small', color: 'primary', children: shortenWalletAddress(address, 4, 4) }))] }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'wallet__menu', direction: 'left' })] }));

package/src/lib/widgets/DynamicWidget/prompts/PendingAccountSwitchModal/SwitchOrUseActiveAccountView/SwitchOrUseActiveAccountView.cjs

@@ -64,7 +64,7 @@ require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
 
 const SwitchOrUseActiveAccountView = ({ connectedWallet, selectedWalletToSwitchTo, }) => {
-    const { setSelectedWalletWithAction, setSelectedWalletConnectorKey, computeConnectedStateForWallets, setPrimaryWallet, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setSelectedWalletWithAction, setSelectedWalletConnectorKey, setPrimaryWallet, } = useInternalDynamicContext.useInternalDynamicContext();
     const onUseActiveWalletClick = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         var _a, _b;
         if (!connectedWallet) {
@@ -75,13 +75,11 @@ const SwitchOrUseActiveAccountView = ({ connectedWallet, selectedWalletToSwitchT
         }
         setSelectedWalletWithAction({ action: 'select', wallet: connectedWallet });
         setPrimaryWallet(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.id);
-        computeConnectedStateForWallets();
         setSelectedWalletConnectorKey(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector.key);
     }), [
         connectedWallet,
         setSelectedWalletWithAction,
         setPrimaryWallet,
-        computeConnectedStateForWallets,
         setSelectedWalletConnectorKey,
     ]);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Typography.Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content', children: ["Wallet", ' ', jsxRuntime.jsx(Typography.Typography, { as: 'span', weight: 'medium', color: 'primary', children: shortenWalletAddress.shortenWalletAddress(selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.address, 3, 3) }), ' ', "is not active in ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, ". To make active, open your ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, " wallet and switch to this account."] }), jsxRuntime.jsx(Divider.Divider, { fullWidth: true, text: 'Or' }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: "Use your active wallet" }), jsxRuntime.jsxs(Button.Button, { buttonClassName: 'default-prompt-modal__button', expanded: true, type: 'button', buttonPadding: 'medium', typographyProps: { variant: 'button_secondary' }, onClick: onUseActiveWalletClick, dataTestId: 'use-active-wallet-button', children: ["Select", ' ', jsxRuntime.jsx(Icon.Icon, { size: 'xsmall', children: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.key }) }), ' ', shortenWalletAddress.shortenWalletAddress(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.address, 3, 3)] })] }));

package/src/lib/widgets/DynamicWidget/prompts/PendingAccountSwitchModal/SwitchOrUseActiveAccountView/SwitchOrUseActiveAccountView.js

@@ -60,7 +60,7 @@ import '../../../../../components/Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
 
 const SwitchOrUseActiveAccountView = ({ connectedWallet, selectedWalletToSwitchTo, }) => {
-    const { setSelectedWalletWithAction, setSelectedWalletConnectorKey, computeConnectedStateForWallets, setPrimaryWallet, } = useInternalDynamicContext();
+    const { setSelectedWalletWithAction, setSelectedWalletConnectorKey, setPrimaryWallet, } = useInternalDynamicContext();
     const onUseActiveWalletClick = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         var _a, _b;
         if (!connectedWallet) {
@@ -71,13 +71,11 @@ const SwitchOrUseActiveAccountView = ({ connectedWallet, selectedWalletToSwitchT
         }
         setSelectedWalletWithAction({ action: 'select', wallet: connectedWallet });
         setPrimaryWallet(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.id);
-        computeConnectedStateForWallets();
         setSelectedWalletConnectorKey(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector.key);
     }), [
         connectedWallet,
         setSelectedWalletWithAction,
         setPrimaryWallet,
-        computeConnectedStateForWallets,
         setSelectedWalletConnectorKey,
     ]);
     return (jsxs(Fragment, { children: [jsxs(Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content', children: ["Wallet", ' ', jsx(Typography, { as: 'span', weight: 'medium', color: 'primary', children: shortenWalletAddress(selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.address, 3, 3) }), ' ', "is not active in ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, ". To make active, open your ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, " wallet and switch to this account."] }), jsx(Divider, { fullWidth: true, text: 'Or' }), jsx(Typography, { variant: 'body_normal', color: 'primary', children: "Use your active wallet" }), jsxs(Button, { buttonClassName: 'default-prompt-modal__button', expanded: true, type: 'button', buttonPadding: 'medium', typographyProps: { variant: 'button_secondary' }, onClick: onUseActiveWalletClick, dataTestId: 'use-active-wallet-button', children: ["Select", ' ', jsx(Icon, { size: 'xsmall', children: jsx(WalletIcon, { walletKey: selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.key }) }), ' ', shortenWalletAddress(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.address, 3, 3)] })] }));

package/src/lib/widgets/DynamicWidget/prompts/QrCodeModalView/QrCodeModalView.cjs

@@ -60,10 +60,10 @@ require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 var CopyButton = require('../../../../components/CopyButton/CopyButton.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+var TextButton = require('../../../../components/TextButton/TextButton.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
-var TextButton = require('../../../../components/TextButton/TextButton.cjs');
 
 const QrCodeModalView = ({ walletId }) => {
     var _a, _b;