@dynamic-labs/sdk-react-core 0.19.0-alpha.10 → 0.19.0-alpha.11

package/src/lib/views/EmailVerification/EmailVerification.js

@@ -136,7 +136,7 @@ const EmailVerification = () => {
             try {
                 // this function will check turnkey wallet enabled and create wallet if needed
                 // if not enabled, it will throw an error.
-                createEmbeddedWallet();
+                yield createEmbeddedWallet();
             }
             catch (e) {
                 setShowAuthFlow(false);
@@ -204,7 +204,7 @@ const EmailVerification = () => {
             try {
                 // this function will check turnkey wallet enabled and create wallet if needed
                 // if not enabled, it will throw an error.
-                createEmbeddedWallet();
+                yield createEmbeddedWallet();
             }
             catch (e) {
                 setShowAuthFlow(false);

package/src/lib/views/PasskeyIntroView/PasskeyIntroView.cjs

@@ -10,19 +10,19 @@ var utils = require('@dynamic-labs/utils');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
 var Typography = require('../../components/Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
-require('../../shared/logger.cjs');
+var logger = require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
-var close = require('../../shared/assets/close.cjs');
 var footerInfoIcon = require('../../shared/assets/footer-info-icon.cjs');
 var passkeyIntroIcon = require('../../shared/assets/passkey-intro-icon.cjs');
 var androidFaceId = require('../../shared/assets/android-face-id.cjs');
 var iphoneFaceId = require('../../shared/assets/iphone-face-id.cjs');
 var iphoneTouchId = require('../../shared/assets/iphone-touch-id.cjs');
 require('@dynamic-labs/wallet-book');
+var localStorage$1 = require('../../utils/constants/localStorage.cjs');
 require('../../utils/constants/colors.cjs');
-require('../../shared/utils/classes/storage/localStorage.cjs');
+var localStorage = require('../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
 require('../../shared/consts/index.cjs');
 var index$1 = require('../../utils/functions/storeAuthToken/index.cjs');
@@ -58,6 +58,7 @@ var useMutation = require('../../utils/hooks/useMutation/useMutation.cjs');
 require('@dynamic-labs/types');
 require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+var TextButton = require('../../components/TextButton/TextButton.cjs');
 var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
@@ -70,11 +71,14 @@ var createEmbeddedWalletWithPasskey = require('./utils/createEmbeddedWalletWithP
 var findPasskeyEmailWalletConnector = require('./utils/findPasskeyEmailWalletConnector/findPasskeyEmailWalletConnector.cjs');
 
 const PasskeyIntroView = ({ createEmbeddedWalletMutation = createEmbeddedWalletWithPasskey.createEmbeddedWalletWithPasskey, }) => {
-    const { setShowAuthFlow, user, wallets, setPrimaryWalletId, setUser, authToken, environmentId, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { user, wallets, setPrimaryWalletId, setUser, authToken, environmentId, handleLogOut, internalEvents, } = useInternalDynamicContext.useInternalDynamicContext();
     const { setView } = ViewContext.useViewContext();
     const { setIsFooterExpanded } = index.useFooterAnimationContext();
     const { t } = reactI18next.useTranslation();
     const { data: passkeyEnabled } = usePromise.usePromise(isPasskeyEnabled.isPasskeyEnabled);
+    // if passkey is not yet setup, but user logged in with email in a passkey env
+    // it should be null to force user to setup passkey even after the a refresh
+    React.useEffect(() => localStorage.LocalStorage.removeFromLS(localStorage$1.LAST_USED_WALLET), []);
     const { mutate: createEmbeddedWalletWithPasskeyMutation, isLoading, error, } = useMutation.useMutation(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const { embeddedWalletVerifiedCredentialId, jwt, decodedJwt } = yield createEmbeddedWalletMutation({
             authToken,
@@ -82,11 +86,17 @@ const PasskeyIntroView = ({ createEmbeddedWalletMutation = createEmbeddedWalletW
             user,
             walletConnector: findPasskeyEmailWalletConnector.findPasskeyEmailWalletConnector(wallets),
         });
+        internalEvents.current.emit('embeddedWalletCreated', embeddedWalletVerifiedCredentialId);
         setPrimaryWalletId(embeddedWalletVerifiedCredentialId);
         index$1.storeAuthToken(jwt);
         setUser(createUserProfile.createUserProfile(decodedJwt));
         setView('passkey-success');
-    }));
+    }), {
+        onFailure: (err) => {
+            logger.logger.error('Failed to create embedded wallet', err);
+            internalEvents.current.emit('embeddedWalletFailed', err);
+        },
+    });
     const errorText = React.useMemo(() => {
         if (!error) {
             return undefined;
@@ -96,7 +106,6 @@ const PasskeyIntroView = ({ createEmbeddedWalletMutation = createEmbeddedWalletW
         }
         return 'Something went wrong.';
     }, [error]);
-    const closeButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', "data-testid": 'close-button', onClick: () => setShowAuthFlow(false), children: jsxRuntime.jsx(close.ReactComponent, {}) }));
     const infoIconButton = (jsxRuntime.jsx(Tooltip.Tooltip, { content: t('dyn_passkey_intro.helper.tooltip'), className: 'header__tooltip', children: jsxRuntime.jsx(IconButton.IconButton, { type: 'button', "data-testid": 'info-button', onClick: () => setIsFooterExpanded((prev) => !prev), className: 'header__icon', children: jsxRuntime.jsx(footerInfoIcon.ReactComponent, {}) }) }, 'info-button'));
     const renderIcon = () => {
         let IdIcon;
@@ -116,7 +125,7 @@ const PasskeyIntroView = ({ createEmbeddedWalletMutation = createEmbeddedWalletW
         }
         return jsxRuntime.jsx(Icon.Icon, { size: 'small', children: IdIcon });
     };
-    return (jsxRuntime.jsxs("div", { className: 'passkey-intro-modal-wrapper', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: infoIconButton, trailing: closeButton, children: jsxRuntime.jsx("div", { className: 'passkey-intro-view__header', children: jsxRuntime.jsx(passkeyIntroIcon.ReactComponent, {}) }) }), jsxRuntime.jsx("div", { className: 'passkey-intro-view', children: jsxRuntime.jsxs("div", { className: 'passkey-intro-view__content', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'passkey-intro-view__title', children: t('dyn_passkey_intro.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'passkey-intro-view__subtitle', children: t('dyn_passkey_intro.subtitle') }), passkeyEnabled === false && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: t('dyn_passkey_intro.disabled') })), errorText && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: errorText }), jsxRuntime.jsx("div", { className: 'passkey-intro-view__actions', children: jsxRuntime.jsx(Button.Button, { buttonPadding: 'large', onClick: () => createEmbeddedWalletWithPasskeyMutation(), dataTestId: 'setup-passkey-button', loading: isLoading, disabled: isLoading || !passkeyEnabled, children: jsxRuntime.jsxs("div", { className: 'passkey-intro-view__inline-button', children: [renderIcon(), jsxRuntime.jsx(Typography.Typography, { children: t('dyn_passkey_intro.button') })] }) }) })] }) })] }));
+    return (jsxRuntime.jsxs("div", { className: 'passkey-intro-modal-wrapper', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: infoIconButton, children: jsxRuntime.jsx("div", { className: 'passkey-intro-view__header', children: jsxRuntime.jsx(passkeyIntroIcon.ReactComponent, {}) }) }), jsxRuntime.jsx("div", { className: 'passkey-intro-view', children: jsxRuntime.jsxs("div", { className: 'passkey-intro-view__content', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'passkey-intro-view__title', children: t('dyn_passkey_intro.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'passkey-intro-view__subtitle', children: t('dyn_passkey_intro.subtitle') }), passkeyEnabled === false && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: t('dyn_passkey_intro.disabled') })), errorText && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: errorText }), jsxRuntime.jsxs("div", { className: 'passkey-intro-view__actions', children: [jsxRuntime.jsx(Button.Button, { buttonPadding: 'large', onClick: () => createEmbeddedWalletWithPasskeyMutation(), dataTestId: 'setup-passkey-button', loading: isLoading, disabled: isLoading || !passkeyEnabled, children: jsxRuntime.jsxs("div", { className: 'passkey-intro-view__inline-button', children: [renderIcon(), jsxRuntime.jsx(Typography.Typography, { children: t('dyn_passkey_intro.button') })] }) }), jsxRuntime.jsx(TextButton.TextButton, { "data-testid": 'setup-passkey-logout-button', className: 'passkey-intro-view__log-out', onClick: handleLogOut, children: t('dyn_passkey_intro.button_logout') })] })] }) })] }));
 };
 
 exports.PasskeyIntroView = PasskeyIntroView;

package/src/lib/views/PasskeyIntroView/PasskeyIntroView.js

@@ -1,24 +1,24 @@
 import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DynamicError, isIPhone, isIPhone8OrEarlier, isAndroid } from '@dynamic-labs/utils';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 import { Typography } from '../../components/Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
-import '../../shared/logger.js';
+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 SvgClose } from '../../shared/assets/close.js';
 import { ReactComponent as SvgFooterInfoIcon } from '../../shared/assets/footer-info-icon.js';
 import { ReactComponent as SvgPasskeyIntroIcon } from '../../shared/assets/passkey-intro-icon.js';
 import { ReactComponent as SvgAndroidFaceId } from '../../shared/assets/android-face-id.js';
 import { ReactComponent as SvgIphoneFaceId } from '../../shared/assets/iphone-face-id.js';
 import { ReactComponent as SvgIphoneTouchId } from '../../shared/assets/iphone-touch-id.js';
 import '@dynamic-labs/wallet-book';
+import { LAST_USED_WALLET } from '../../utils/constants/localStorage.js';
 import '../../utils/constants/colors.js';
-import '../../shared/utils/classes/storage/localStorage.js';
+import { LocalStorage } from '../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
 import '../../shared/consts/index.js';
 import { storeAuthToken } from '../../utils/functions/storeAuthToken/index.js';
@@ -54,6 +54,7 @@ import { useMutation } from '../../utils/hooks/useMutation/useMutation.js';
 import '@dynamic-labs/types';
 import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import { TextButton } from '../../components/TextButton/TextButton.js';
 import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
@@ -66,11 +67,14 @@ import { createEmbeddedWalletWithPasskey } from './utils/createEmbeddedWalletWit
 import { findPasskeyEmailWalletConnector } from './utils/findPasskeyEmailWalletConnector/findPasskeyEmailWalletConnector.js';
 
 const PasskeyIntroView = ({ createEmbeddedWalletMutation = createEmbeddedWalletWithPasskey, }) => {
-    const { setShowAuthFlow, user, wallets, setPrimaryWalletId, setUser, authToken, environmentId, } = useInternalDynamicContext();
+    const { user, wallets, setPrimaryWalletId, setUser, authToken, environmentId, handleLogOut, internalEvents, } = useInternalDynamicContext();
     const { setView } = useViewContext();
     const { setIsFooterExpanded } = useFooterAnimationContext();
     const { t } = useTranslation();
     const { data: passkeyEnabled } = usePromise(isPasskeyEnabled);
+    // if passkey is not yet setup, but user logged in with email in a passkey env
+    // it should be null to force user to setup passkey even after the a refresh
+    useEffect(() => LocalStorage.removeFromLS(LAST_USED_WALLET), []);
     const { mutate: createEmbeddedWalletWithPasskeyMutation, isLoading, error, } = useMutation(() => __awaiter(void 0, void 0, void 0, function* () {
         const { embeddedWalletVerifiedCredentialId, jwt, decodedJwt } = yield createEmbeddedWalletMutation({
             authToken,
@@ -78,11 +82,17 @@ const PasskeyIntroView = ({ createEmbeddedWalletMutation = createEmbeddedWalletW
             user,
             walletConnector: findPasskeyEmailWalletConnector(wallets),
         });
+        internalEvents.current.emit('embeddedWalletCreated', embeddedWalletVerifiedCredentialId);
         setPrimaryWalletId(embeddedWalletVerifiedCredentialId);
         storeAuthToken(jwt);
         setUser(createUserProfile(decodedJwt));
         setView('passkey-success');
-    }));
+    }), {
+        onFailure: (err) => {
+            logger.error('Failed to create embedded wallet', err);
+            internalEvents.current.emit('embeddedWalletFailed', err);
+        },
+    });
     const errorText = useMemo(() => {
         if (!error) {
             return undefined;
@@ -92,7 +102,6 @@ const PasskeyIntroView = ({ createEmbeddedWalletMutation = createEmbeddedWalletW
         }
         return 'Something went wrong.';
     }, [error]);
-    const closeButton = (jsx(IconButton, { type: 'button', "data-testid": 'close-button', onClick: () => setShowAuthFlow(false), children: jsx(SvgClose, {}) }));
     const infoIconButton = (jsx(Tooltip, { content: t('dyn_passkey_intro.helper.tooltip'), className: 'header__tooltip', children: jsx(IconButton, { type: 'button', "data-testid": 'info-button', onClick: () => setIsFooterExpanded((prev) => !prev), className: 'header__icon', children: jsx(SvgFooterInfoIcon, {}) }) }, 'info-button'));
     const renderIcon = () => {
         let IdIcon;
@@ -112,7 +121,7 @@ const PasskeyIntroView = ({ createEmbeddedWalletMutation = createEmbeddedWalletW
         }
         return jsx(Icon, { size: 'small', children: IdIcon });
     };
-    return (jsxs("div", { className: 'passkey-intro-modal-wrapper', children: [jsx(ModalHeader, { leading: infoIconButton, trailing: closeButton, children: jsx("div", { className: 'passkey-intro-view__header', children: jsx(SvgPasskeyIntroIcon, {}) }) }), jsx("div", { className: 'passkey-intro-view', children: jsxs("div", { className: 'passkey-intro-view__content', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'passkey-intro-view__title', children: t('dyn_passkey_intro.title') }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'passkey-intro-view__subtitle', children: t('dyn_passkey_intro.subtitle') }), passkeyEnabled === false && (jsx(ErrorContainer, { children: t('dyn_passkey_intro.disabled') })), errorText && jsx(ErrorContainer, { children: errorText }), jsx("div", { className: 'passkey-intro-view__actions', children: jsx(Button, { buttonPadding: 'large', onClick: () => createEmbeddedWalletWithPasskeyMutation(), dataTestId: 'setup-passkey-button', loading: isLoading, disabled: isLoading || !passkeyEnabled, children: jsxs("div", { className: 'passkey-intro-view__inline-button', children: [renderIcon(), jsx(Typography, { children: t('dyn_passkey_intro.button') })] }) }) })] }) })] }));
+    return (jsxs("div", { className: 'passkey-intro-modal-wrapper', children: [jsx(ModalHeader, { leading: infoIconButton, children: jsx("div", { className: 'passkey-intro-view__header', children: jsx(SvgPasskeyIntroIcon, {}) }) }), jsx("div", { className: 'passkey-intro-view', children: jsxs("div", { className: 'passkey-intro-view__content', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'passkey-intro-view__title', children: t('dyn_passkey_intro.title') }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'passkey-intro-view__subtitle', children: t('dyn_passkey_intro.subtitle') }), passkeyEnabled === false && (jsx(ErrorContainer, { children: t('dyn_passkey_intro.disabled') })), errorText && jsx(ErrorContainer, { children: errorText }), jsxs("div", { className: 'passkey-intro-view__actions', children: [jsx(Button, { buttonPadding: 'large', onClick: () => createEmbeddedWalletWithPasskeyMutation(), dataTestId: 'setup-passkey-button', loading: isLoading, disabled: isLoading || !passkeyEnabled, children: jsxs("div", { className: 'passkey-intro-view__inline-button', children: [renderIcon(), jsx(Typography, { children: t('dyn_passkey_intro.button') })] }) }), jsx(TextButton, { "data-testid": 'setup-passkey-logout-button', className: 'passkey-intro-view__log-out', onClick: handleLogOut, children: t('dyn_passkey_intro.button_logout') })] })] }) })] }));
 };
 
 export { PasskeyIntroView };

package/src/lib/views/WalletList/data.cjs

@@ -18,9 +18,16 @@ require('../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
 require('../../shared/consts/index.cjs');
 
+/**
+ * This object is needed because the selected symbols default value from
+ * getChainInfo differs from the one used in the wallet connectors
+ */
+const chainInfoOverrides = {
+    starknet: 'STARK',
+};
 const getEnabledChains = (chains) => chains
     .filter(({ enabled }) => enabled)
-    .map(({ name }) => { var _a; return (_a = walletConnectorCore.getChainInfo(name)) === null || _a === void 0 ? void 0 : _a.symbol; })
+    .map(({ name }) => { var _a, _b; return (_a = chainInfoOverrides[name]) !== null && _a !== void 0 ? _a : (_b = walletConnectorCore.getChainInfo(name)) === null || _b === void 0 ? void 0 : _b.symbol; })
     .filter((chain) => Boolean(chain));
 const getWallets = (props) => {
     var _a, _b, _c, _d;

package/src/lib/views/WalletList/data.d.ts

@@ -4,7 +4,7 @@ interface IChain {
     enabled: boolean;
     name: string;
 }
-export declare const getEnabledChains: (chains: IChain[]) => ("ETH" | "FLOW" | "SOL" | "EVM" | "ALGO" | "STARK" | "ATOM" | "COSMOS")[];
+export declare const getEnabledChains: (chains: IChain[]) => ("STARK" | "ETH" | "FLOW" | "SOL" | "EVM" | "ALGO" | "ATOM" | "COSMOS")[];
 type BaseGetSupportedWalletOpts = Omit<GetSupportedWalletsOpts, 'isWalletConnectV2Enabled' | 'walletConnectProjectId' | 'chainRpcProviders'>;
 export declare const getWallets: (props: {
     getSupportedWalletOpts: BaseGetSupportedWalletOpts;

package/src/lib/views/WalletList/data.js

@@ -14,9 +14,16 @@ import '../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
 import '../../shared/consts/index.js';
 
+/**
+ * This object is needed because the selected symbols default value from
+ * getChainInfo differs from the one used in the wallet connectors
+ */
+const chainInfoOverrides = {
+    starknet: 'STARK',
+};
 const getEnabledChains = (chains) => chains
     .filter(({ enabled }) => enabled)
-    .map(({ name }) => { var _a; return (_a = getChainInfo(name)) === null || _a === void 0 ? void 0 : _a.symbol; })
+    .map(({ name }) => { var _a, _b; return (_a = chainInfoOverrides[name]) !== null && _a !== void 0 ? _a : (_b = getChainInfo(name)) === null || _b === void 0 ? void 0 : _b.symbol; })
     .filter((chain) => Boolean(chain));
 const getWallets = (props) => {
     var _a, _b, _c, _d;

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

@@ -45,7 +45,7 @@ require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs'
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 var DynamicConnectButton = require('../../components/DynamicConnectButton/DynamicConnectButton.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
-var PopperContext = require('../../components/Popper/PopperContext/PopperContext.cjs');
+require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../components/OverlayCard/OverlayCard.context.cjs');
@@ -77,7 +77,7 @@ const DynamicWidget = ({ buttonContainerClassName = '', buttonClassName = '', in
         }
         return Boolean(!primaryWallet);
     }, [authMode, primaryWallet, user]);
-    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsx(ShadowDOM.ShadowDOM, { className: 'dynamic-widget__container', id: 'dynamic-widget', children: showDynamicConnectButton ? (jsxRuntime.jsx(DynamicConnectButton.DynamicConnectButton, { buttonContainerClassName: buttonContainerClassName, buttonClassName: buttonClassName, children: innerButtonComponent })) : (jsxRuntime.jsxs(PopperContext.PopperProvider, { children: [jsxRuntime.jsx(DynamicNav.DynamicNav, {}), jsxRuntime.jsx(DynamicUserProfile.DynamicUserProfile, { variant: variant })] })) }) }));
+    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsx(ShadowDOM.ShadowDOM, { className: 'dynamic-widget__container', id: 'dynamic-widget', children: showDynamicConnectButton ? (jsxRuntime.jsx(DynamicConnectButton.DynamicConnectButton, { buttonContainerClassName: buttonContainerClassName, buttonClassName: buttonClassName, children: innerButtonComponent })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DynamicNav.DynamicNav, {}), jsxRuntime.jsx(DynamicUserProfile.DynamicUserProfile, { variant: variant })] })) }) }));
 };
 
 exports.DynamicWidget = DynamicWidget;

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

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import '@dynamic-labs/sdk-api';
@@ -41,7 +41,7 @@ import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import { DynamicConnectButton } from '../../components/DynamicConnectButton/DynamicConnectButton.js';
 import '../../components/Popper/Popper/Popper.js';
-import { PopperProvider } from '../../components/Popper/PopperContext/PopperContext.js';
+import '../../components/Popper/PopperContext/PopperContext.js';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
 import '../../components/OverlayCard/OverlayCard.context.js';
@@ -73,7 +73,7 @@ const DynamicWidget = ({ buttonContainerClassName = '', buttonClassName = '', in
         }
         return Boolean(!primaryWallet);
     }, [authMode, primaryWallet, user]);
-    return (jsx(IsBrowser, { children: jsx(ShadowDOM, { className: 'dynamic-widget__container', id: 'dynamic-widget', children: showDynamicConnectButton ? (jsx(DynamicConnectButton, { buttonContainerClassName: buttonContainerClassName, buttonClassName: buttonClassName, children: innerButtonComponent })) : (jsxs(PopperProvider, { children: [jsx(DynamicNav, {}), jsx(DynamicUserProfile, { variant: variant })] })) }) }));
+    return (jsx(IsBrowser, { children: jsx(ShadowDOM, { className: 'dynamic-widget__container', id: 'dynamic-widget', children: showDynamicConnectButton ? (jsx(DynamicConnectButton, { buttonContainerClassName: buttonContainerClassName, buttonClassName: buttonClassName, children: innerButtonComponent })) : (jsxs(Fragment, { children: [jsx(DynamicNav, {}), jsx(DynamicUserProfile, { variant: variant })] })) }) }));
 };
 
 export { DynamicWidget };

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

@@ -10,6 +10,46 @@ var ShadowDOM = require('../../../../components/ShadowDOM/ShadowDOM.cjs');
 var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
 var IsBrowser = require('../../../../components/IsBrowser/IsBrowser.cjs');
 var NetworkPicker = require('../../../../components/NetworkPicker/NetworkPicker.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../shared/utils/classes/storage/localStorage.cjs');
+require('viem');
+require('../../../../shared/consts/index.cjs');
+require('@dynamic-labs/multi-wallet');
+require('../../../../config/ApiEndpoint.cjs');
+require('../../../../context/ThemeContext/ThemeContext.cjs');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
+require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/Alert/Alert.cjs');
+require('formik');
+require('yup');
+require('../../../../views/CollectUserDataView/fieldsConfig.cjs');
+require('../../../../context/MockContext/MockContext.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('@dynamic-labs/types');
+require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+var PopperContext = require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../components/OverlayCard/OverlayCard.context.cjs');
 
 const DynamicNav = () => {
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = React.useState(false);
@@ -21,7 +61,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(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, { 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

@@ -6,6 +6,46 @@ import { ShadowDOM } from '../../../../components/ShadowDOM/ShadowDOM.js';
 import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
 import { IsBrowser } from '../../../../components/IsBrowser/IsBrowser.js';
 import { NetworkPicker } from '../../../../components/NetworkPicker/NetworkPicker.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../../../utils/constants/colors.js';
+import '../../../../shared/utils/classes/storage/localStorage.js';
+import 'viem';
+import '../../../../shared/consts/index.js';
+import '@dynamic-labs/multi-wallet';
+import '../../../../config/ApiEndpoint.js';
+import '../../../../context/ThemeContext/ThemeContext.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '@dynamic-labs/rpc-providers';
+import '../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
+import '../../../../context/ErrorContext/ErrorContext.js';
+import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../../../components/IconButton/IconButton.js';
+import '../../../../components/Alert/Alert.js';
+import 'formik';
+import 'yup';
+import '../../../../views/CollectUserDataView/fieldsConfig.js';
+import '../../../../context/MockContext/MockContext.js';
+import '../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../context/EmailVerificationContext/EmailVerificationContext.js';
+import '@dynamic-labs/types';
+import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import { PopperProvider } from '../../../../components/Popper/PopperContext/PopperContext.js';
+import '../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../../components/OverlayCard/OverlayCard.context.js';
 
 const DynamicNav = () => {
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);
@@ -17,7 +57,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(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, { 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/DynamicUserProfile/DynamicUserProfile.cjs

@@ -47,7 +47,7 @@ require('@dynamic-labs/types');
 require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
-require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+var PopperContext = require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../../../components/OverlayCard/OverlayCard.context.cjs');
@@ -67,7 +67,7 @@ const DynamicUserProfile = ({ variant, }) => {
     if (!projectSettings)
         return null;
     const shouldRenderHeader = dynamicWidgetView !== 'send-balance';
-    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsx(DynamicWidgetVariants.DynamicWidgetVariants, { isOpen: isOpen, setIsOpen: setIsOpen, variant: _variant, zIndex: index.widgetModalZIndex, children: jsxRuntime.jsx(DynamicWidgetCard.DynamicWidgetCard, { ref: widgetRef, children: jsxRuntime.jsxs(OverlayCardTarget.OverlayCardTarget, { children: [shouldRenderHeader && jsxRuntime.jsx(DynamicWidgetHeader.MemoizedDynamicWidgetHeader, { variant: variant }), jsxRuntime.jsx(DynamicWidgetViews.DynamicWidgetViews, {}), jsxRuntime.jsx(DynamicWidgetPrompts.DynamicWidgetPrompts, {})] }) }) }) }));
+    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsx(PopperContext.PopperProvider, { children: jsxRuntime.jsx(DynamicWidgetVariants.DynamicWidgetVariants, { isOpen: isOpen, setIsOpen: setIsOpen, variant: _variant, zIndex: index.widgetModalZIndex, children: jsxRuntime.jsx(DynamicWidgetCard.DynamicWidgetCard, { ref: widgetRef, children: jsxRuntime.jsxs(OverlayCardTarget.OverlayCardTarget, { children: [shouldRenderHeader && jsxRuntime.jsx(DynamicWidgetHeader.MemoizedDynamicWidgetHeader, { variant: variant }), jsxRuntime.jsx(DynamicWidgetViews.DynamicWidgetViews, {}), jsxRuntime.jsx(DynamicWidgetPrompts.DynamicWidgetPrompts, {})] }) }) }) }) }));
 };
 const ShadowedDynamicUserProfile = () => (jsxRuntime.jsx(ShadowDOM.ShadowDOM, { zIndex: index.widgetModalZIndex, children: jsxRuntime.jsx(DynamicUserProfile, {}) }));
 

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

@@ -43,7 +43,7 @@ import '@dynamic-labs/types';
 import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '../../../../components/Popper/Popper/Popper.js';
-import '../../../../components/Popper/PopperContext/PopperContext.js';
+import { PopperProvider } from '../../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import '../../../../components/OverlayCard/OverlayCard.context.js';
@@ -63,7 +63,7 @@ const DynamicUserProfile = ({ variant, }) => {
     if (!projectSettings)
         return null;
     const shouldRenderHeader = dynamicWidgetView !== 'send-balance';
-    return (jsx(IsBrowser, { children: jsx(DynamicWidgetVariants, { isOpen: isOpen, setIsOpen: setIsOpen, variant: _variant, zIndex: widgetModalZIndex, children: jsx(DynamicWidgetCard, { ref: widgetRef, children: jsxs(OverlayCardTarget, { children: [shouldRenderHeader && jsx(MemoizedDynamicWidgetHeader, { variant: variant }), jsx(DynamicWidgetViews, {}), jsx(DynamicWidgetPrompts, {})] }) }) }) }));
+    return (jsx(IsBrowser, { children: jsx(PopperProvider, { children: jsx(DynamicWidgetVariants, { isOpen: isOpen, setIsOpen: setIsOpen, variant: _variant, zIndex: widgetModalZIndex, children: jsx(DynamicWidgetCard, { ref: widgetRef, children: jsxs(OverlayCardTarget, { children: [shouldRenderHeader && jsx(MemoizedDynamicWidgetHeader, { variant: variant }), jsx(DynamicWidgetViews, {}), jsx(DynamicWidgetPrompts, {})] }) }) }) }) }));
 };
 const ShadowedDynamicUserProfile = () => (jsx(ShadowDOM, { zIndex: widgetModalZIndex, children: jsx(DynamicUserProfile, {}) }));