@dynamic-labs/sdk-react-core 0.19.0-alpha.18 → 0.19.0-alpha.19

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

@@ -52,6 +52,9 @@ const useDynamicLayoutData = ({ view, authMode, }) => {
         'login-with-email-or-wallet-full-wallet-list': {
             heading: t('dyn_login.title.all_wallet_list'),
         },
+        'login-with-email-verification': {
+            heading: 'Confirm verification code',
+        },
         'login-with-wallet-only': {
             heading: t('dyn_login.title.wallet_only'),
         },
@@ -60,13 +63,34 @@ const useDynamicLayoutData = ({ view, authMode, }) => {
                 ? t('dyn_wallet_list.title.connect')
                 : t('dyn_wallet_list.title.link'),
         },
+        'network-not-supported': {
+            heading: 'Update Network',
+        },
+        'pending-connect': {
+            heading: t('dyn_login.connect_wallet.title'),
+        },
+        'pending-signature': {
+            heading: t('dyn_login.sign_wallet.title'),
+        },
+        'qr-code': {
+            heading: t('dyn_login.qr_code.title'),
+        },
+        'verify-email': {
+            heading: 'Confirm verification code',
+        },
         'wallet-connect-mobile-wallets-list': {
             heading: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(iconic.WalletConnectIcon, { style: { height: '1.5rem', width: '1.5rem' } }), ' ', t('dyn_wallet_conect.mobile.wallet_list.title')] })),
         },
+        'wallet-group': {
+            heading: t('dyn_login.wallet_group.title'),
+        },
         'wallet-list': {
             heading: t('dyn_wallet_list.title.select'),
         },
         'wallet-sign': { heading: t('dyn_wallet_transfer.sign.title') },
+        'wallet-used': {
+            heading: 'Transfer this wallet?',
+        },
     };
     const helpHeaderData = helpHeaderMap[view];
     const headerData = headerMap[view];

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

@@ -48,6 +48,9 @@ const useDynamicLayoutData = ({ view, authMode, }) => {
         'login-with-email-or-wallet-full-wallet-list': {
             heading: t('dyn_login.title.all_wallet_list'),
         },
+        'login-with-email-verification': {
+            heading: 'Confirm verification code',
+        },
         'login-with-wallet-only': {
             heading: t('dyn_login.title.wallet_only'),
         },
@@ -56,13 +59,34 @@ const useDynamicLayoutData = ({ view, authMode, }) => {
                 ? t('dyn_wallet_list.title.connect')
                 : t('dyn_wallet_list.title.link'),
         },
+        'network-not-supported': {
+            heading: 'Update Network',
+        },
+        'pending-connect': {
+            heading: t('dyn_login.connect_wallet.title'),
+        },
+        'pending-signature': {
+            heading: t('dyn_login.sign_wallet.title'),
+        },
+        'qr-code': {
+            heading: t('dyn_login.qr_code.title'),
+        },
+        'verify-email': {
+            heading: 'Confirm verification code',
+        },
         'wallet-connect-mobile-wallets-list': {
             heading: (jsxs(Fragment, { children: [jsx(WalletConnectIcon, { style: { height: '1.5rem', width: '1.5rem' } }), ' ', t('dyn_wallet_conect.mobile.wallet_list.title')] })),
         },
+        'wallet-group': {
+            heading: t('dyn_login.wallet_group.title'),
+        },
         'wallet-list': {
             heading: t('dyn_wallet_list.title.select'),
         },
         'wallet-sign': { heading: t('dyn_wallet_transfer.sign.title') },
+        'wallet-used': {
+            heading: 'Transfer this wallet?',
+        },
     };
     const helpHeaderData = helpHeaderMap[view];
     const headerData = headerMap[view];

package/src/lib/views/CaptchaVerifyUser/CaptchaVerifyUser.cjs

@@ -36,6 +36,7 @@ require('../../context/FooterAnimationContext/index.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/QrCodeContext/QrCodeContext.cjs');
 require('react-i18next');
+var PoweredByDynamic = require('../../components/PoweredByDynamic/PoweredByDynamic.cjs');
 require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/WalletGroupContext/WalletGroupContext.cjs');
@@ -54,7 +55,6 @@ require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('formik');
 require('yup');
 require('../../components/IconButton/IconButton.cjs');
-var PoweredByDynamic = require('../../components/PoweredByDynamic/PoweredByDynamic.cjs');
 require('../../components/Alert/Alert.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');

package/src/lib/views/CaptchaVerifyUser/CaptchaVerifyUser.js

@@ -32,6 +32,7 @@ import '../../context/FooterAnimationContext/index.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/QrCodeContext/QrCodeContext.js';
 import 'react-i18next';
+import { PoweredByDynamic } from '../../components/PoweredByDynamic/PoweredByDynamic.js';
 import '../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/WalletGroupContext/WalletGroupContext.js';
@@ -50,7 +51,6 @@ import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import 'formik';
 import 'yup';
 import '../../components/IconButton/IconButton.js';
-import { PoweredByDynamic } from '../../components/PoweredByDynamic/PoweredByDynamic.js';
 import '../../components/Alert/Alert.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';

package/src/lib/views/CollectUserDataView/CollectUserDataView.cjs

@@ -10,7 +10,9 @@ require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
+var checkConnection = require('../../shared/assets/check-connection.cjs');
 require('@dynamic-labs/wallet-book');
+var shortenWalletAddress = require('../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
 require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
 require('../../shared/utils/classes/storage/localStorage.cjs');
@@ -22,6 +24,8 @@ var createUserProfile = require('../../utils/functions/createUserProfile/createU
 var isSupportedNetwork = require('../../utils/functions/isSupportedNetwork/isSupportedNetwork.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
+var Icon = require('../../components/Icon/Icon.cjs');
 require('react-dom');
 require('react-focus-lock');
 require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
@@ -62,12 +66,12 @@ require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
 var NetworkPicker = require('../../components/NetworkPicker/NetworkPicker.cjs');
-var UserAddress = require('../../components/UserAddress/UserAddress.cjs');
 var useFetchNameService = require('../../widgets/DynamicWidget/hooks/useFetchNameService/useFetchNameService.cjs');
 var OnboardingUserDataForm = require('./OnboardingUserDataForm/OnboardingUserDataForm.cjs');
 
 const CollectUserDataView = () => {
-    const { appName, onboardingOnlyJwt, handleLogOut, projectSettings, network, decodedOnboardingOnlyToken, selectedWalletConnector: walletConnector, onboardingImageUrl, } = useInternalDynamicContext.useInternalDynamicContext();
+    var _a;
+    const { appName, onboardingOnlyJwt, projectSettings, network, decodedOnboardingOnlyToken, selectedWalletConnector: walletConnector, handleLogOut, onboardingImageUrl, } = useInternalDynamicContext.useInternalDynamicContext();
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = React.useState(false);
     const nameService = useFetchNameService.useFetchNameService();
     if (!walletConnector || !decodedOnboardingOnlyToken) {
@@ -76,9 +80,12 @@ const CollectUserDataView = () => {
     const userProfile = createUserProfile.createUserProfile(decodedOnboardingOnlyToken);
     const evmNetworks = walletConnector.evmNetworks || [];
     const _isSupportedNetwork = !network || isSupportedNetwork.isSupportedNetwork({ network, walletConnector });
-    return (jsxRuntime.jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', children: "This network is not available, please update." })), jsxRuntime.jsxs("div", { className: 'collect-user-data__form', children: [jsxRuntime.jsxs(OnboardingUserDataForm.OnboardingUserDataForm, { disableSubmit: !_isSupportedNetwork, userProfile: userProfile, children: [jsxRuntime.jsx("div", { className: 'collect-user-data__img-container', children: (nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { jwt: onboardingOnlyJwt })) }), jsxRuntime.jsx(UserAddress.UserAddress, { userProfile: userProfile }), jsxRuntime.jsx("div", { className: 'collect-user-data__network-container', children: jsxRuntime.jsx(NetworkPicker.NetworkPicker, { evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' }) }), !_isSupportedNetwork ? (jsxRuntime.jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', children: "Update Network" }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "Your wallet is not connected to a supported network. Please update before continuing." })] })) : (jsxRuntime.jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
-                                            `Welcome to ${appName}` }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||
-                                            'We need a bit of information to get started' })] }))] }), jsxRuntime.jsx(TextButton.TextButton, { className: 'collect-user-data__log-out', onClick: handleLogOut, children: "Log out" })] })] }));
+    const walletAddress = (_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.verifiedCredentials.find((verifiedCredential) => verifiedCredential.id === userProfile.lastVerifiedCredentialId)) === null || _a === void 0 ? void 0 : _a.address;
+    return (jsxRuntime.jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__network-container', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { jwt: onboardingOnlyJwt, iconSize: 28 })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) })] }), jsxRuntime.jsx(NetworkPicker.NetworkPicker, { evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' })] }), onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', children: "This network is not available, please update." })), jsxRuntime.jsxs("div", { className: classNames.classNames('collect-user-data__form', {
+                    'collect-user-data__form--error': !_isSupportedNetwork,
+                }), children: [jsxRuntime.jsx("div", { className: 'collect-user-data__success-icon', children: jsxRuntime.jsx(Icon.Icon, { color: 'text-primary', size: 'large', children: jsxRuntime.jsx(checkConnection.ReactComponent, {}) }) }), jsxRuntime.jsx(OnboardingUserDataForm.OnboardingUserDataForm, { disableSubmit: !_isSupportedNetwork, userProfile: userProfile, children: !_isSupportedNetwork ? (jsxRuntime.jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', children: "Update Network" }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "Your wallet is not connected to a supported network. Please update before continuing." })] })) : (jsxRuntime.jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
+                                        `Welcome to ${appName}` }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||
+                                        'We need a bit of information to get started' })] })) }), jsxRuntime.jsx(TextButton.TextButton, { className: 'collect-user-data__log-out', onClick: handleLogOut, children: "Log out" })] })] }));
 };
 
 exports.CollectUserDataView = CollectUserDataView;

package/src/lib/views/CollectUserDataView/CollectUserDataView.js

@@ -6,7 +6,9 @@ import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgCheckConnection } from '../../shared/assets/check-connection.js';
 import '@dynamic-labs/wallet-book';
+import { shortenWalletAddress } from '../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
 import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
 import '../../shared/utils/classes/storage/localStorage.js';
@@ -18,6 +20,8 @@ import { createUserProfile } from '../../utils/functions/createUserProfile/creat
 import { isSupportedNetwork } from '../../utils/functions/isSupportedNetwork/isSupportedNetwork.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../context/ThemeContext/ThemeContext.js';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
+import { Icon } from '../../components/Icon/Icon.js';
 import 'react-dom';
 import 'react-focus-lock';
 import '../../components/Transition/ZoomTransition/ZoomTransition.js';
@@ -58,12 +62,12 @@ import '../../components/Popper/PopperContext/PopperContext.js';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
 import { NetworkPicker } from '../../components/NetworkPicker/NetworkPicker.js';
-import { UserAddress } from '../../components/UserAddress/UserAddress.js';
 import { useFetchNameService } from '../../widgets/DynamicWidget/hooks/useFetchNameService/useFetchNameService.js';
 import { OnboardingUserDataForm } from './OnboardingUserDataForm/OnboardingUserDataForm.js';
 
 const CollectUserDataView = () => {
-    const { appName, onboardingOnlyJwt, handleLogOut, projectSettings, network, decodedOnboardingOnlyToken, selectedWalletConnector: walletConnector, onboardingImageUrl, } = useInternalDynamicContext();
+    var _a;
+    const { appName, onboardingOnlyJwt, projectSettings, network, decodedOnboardingOnlyToken, selectedWalletConnector: walletConnector, handleLogOut, onboardingImageUrl, } = useInternalDynamicContext();
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);
     const nameService = useFetchNameService();
     if (!walletConnector || !decodedOnboardingOnlyToken) {
@@ -72,9 +76,12 @@ const CollectUserDataView = () => {
     const userProfile = createUserProfile(decodedOnboardingOnlyToken);
     const evmNetworks = walletConnector.evmNetworks || [];
     const _isSupportedNetwork = !network || isSupportedNetwork({ network, walletConnector });
-    return (jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [onboardingImageUrl && (jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsx(ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', children: "This network is not available, please update." })), jsxs("div", { className: 'collect-user-data__form', children: [jsxs(OnboardingUserDataForm, { disableSubmit: !_isSupportedNetwork, userProfile: userProfile, children: [jsx("div", { className: 'collect-user-data__img-container', children: (nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsx(AuthProviderIcon, { jwt: onboardingOnlyJwt })) }), jsx(UserAddress, { userProfile: userProfile }), jsx("div", { className: 'collect-user-data__network-container', children: jsx(NetworkPicker, { evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' }) }), !_isSupportedNetwork ? (jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', children: "Update Network" }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "Your wallet is not connected to a supported network. Please update before continuing." })] })) : (jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
-                                            `Welcome to ${appName}` }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||
-                                            'We need a bit of information to get started' })] }))] }), jsx(TextButton, { className: 'collect-user-data__log-out', onClick: handleLogOut, children: "Log out" })] })] }));
+    const walletAddress = (_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.verifiedCredentials.find((verifiedCredential) => verifiedCredential.id === userProfile.lastVerifiedCredentialId)) === null || _a === void 0 ? void 0 : _a.address;
+    return (jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxs("div", { className: 'collect-user-data__network-container', children: [jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsx(AuthProviderIcon, { jwt: onboardingOnlyJwt, iconSize: 28 })), jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress(walletAddress, 3, 3) })] }), jsx(NetworkPicker, { evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' })] }), onboardingImageUrl && (jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsx(ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', children: "This network is not available, please update." })), jsxs("div", { className: classNames('collect-user-data__form', {
+                    'collect-user-data__form--error': !_isSupportedNetwork,
+                }), children: [jsx("div", { className: 'collect-user-data__success-icon', children: jsx(Icon, { color: 'text-primary', size: 'large', children: jsx(SvgCheckConnection, {}) }) }), jsx(OnboardingUserDataForm, { disableSubmit: !_isSupportedNetwork, userProfile: userProfile, children: !_isSupportedNetwork ? (jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', children: "Update Network" }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "Your wallet is not connected to a supported network. Please update before continuing." })] })) : (jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
+                                        `Welcome to ${appName}` }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||
+                                        'We need a bit of information to get started' })] })) }), jsx(TextButton, { className: 'collect-user-data__log-out', onClick: handleLogOut, children: "Log out" })] })] }));
 };
 
 export { CollectUserDataView };

package/src/lib/views/CollectUserDataView/OnboardingUserDataForm/OnboardingUserDataForm.cjs

@@ -115,7 +115,7 @@ const OnboardingUserDataForm = ({ children, userProfile, disableSubmit, }) => {
                 (enforcePolicies &&
                     (policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.length) !==
                         ((_a = values.policiesConsentArray) === null || _a === void 0 ? void 0 : _a.length));
-            return (jsxRuntime.jsx(formik.Form, { className: 'user-data-form__form', children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, jsxRuntime.jsx(index.UserDataFields, { fields: decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields, errors: errors, touched: touched, policiesConsentInnerComponentArray: policiesConsentInnerComponentArray }), jsxRuntime.jsx(Button.Button, { type: 'submit', loading: loading, disabled: isSubmitBtnDisabled, buttonVariant: 'primary', expanded: true, buttonRounded: 'default', buttonPadding: 'large', children: "Continue" })] }) }));
+            return (jsxRuntime.jsx(formik.Form, { className: 'user-data-form__form', children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, jsxRuntime.jsx(index.UserDataFields, { fields: decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields, errors: errors, touched: touched, policiesConsentInnerComponentArray: policiesConsentInnerComponentArray }), jsxRuntime.jsx(Button.Button, { type: 'submit', loading: loading, disabled: isSubmitBtnDisabled, buttonVariant: 'primary', expanded: true, buttonPadding: 'large', children: "Continue" })] }) }));
         } }));
 };
 

package/src/lib/views/CollectUserDataView/OnboardingUserDataForm/OnboardingUserDataForm.js

@@ -111,7 +111,7 @@ const OnboardingUserDataForm = ({ children, userProfile, disableSubmit, }) => {
                 (enforcePolicies &&
                     (policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.length) !==
                         ((_a = values.policiesConsentArray) === null || _a === void 0 ? void 0 : _a.length));
-            return (jsx(Form, { className: 'user-data-form__form', children: jsxs(Fragment, { children: [children, jsx(UserDataFields, { fields: decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields, errors: errors, touched: touched, policiesConsentInnerComponentArray: policiesConsentInnerComponentArray }), jsx(Button, { type: 'submit', loading: loading, disabled: isSubmitBtnDisabled, buttonVariant: 'primary', expanded: true, buttonRounded: 'default', buttonPadding: 'large', children: "Continue" })] }) }));
+            return (jsx(Form, { className: 'user-data-form__form', children: jsxs(Fragment, { children: [children, jsx(UserDataFields, { fields: decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields, errors: errors, touched: touched, policiesConsentInnerComponentArray: policiesConsentInnerComponentArray }), jsx(Button, { type: 'submit', loading: loading, disabled: isSubmitBtnDisabled, buttonVariant: 'primary', expanded: true, buttonPadding: 'large', children: "Continue" })] }) }));
         } }));
 };
 

package/src/lib/views/CollectUserDataViewLoginWithEmail/CollectUserDataViewLoginWithEmail.cjs

@@ -10,6 +10,7 @@ require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
+var checkConnection = require('../../shared/assets/check-connection.cjs');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
@@ -21,6 +22,7 @@ require('@dynamic-labs/multi-wallet');
 var createUserProfile = require('../../utils/functions/createUserProfile/createUserProfile.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
+var Icon = require('../../components/Icon/Icon.cjs');
 require('react-dom');
 require('react-focus-lock');
 require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
@@ -67,7 +69,7 @@ const CollectUserDataViewLoginWithEmail = () => {
         return null;
     }
     const userProfile = createUserProfile.createUserProfile(decodedOnboardingOnlyToken);
-    return (jsxRuntime.jsxs("div", { className: 'collect-user-data-login-with-email', "data-testid": 'collect-user-data-login-with-email', children: [onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'collect-user-data-login-with-email__main-img', src: onboardingImageUrl, alt: 'onboarding' })), jsxRuntime.jsx("div", { className: 'collect-user-data-login-with-email__icon-container', children: jsxRuntime.jsx(UserAvatar.UserAvatar, { user: userProfile }) }), jsxRuntime.jsxs("div", { className: 'collect-user-data-login-with-email__form', children: [jsxRuntime.jsx(OnboardingUserDataForm.OnboardingUserDataForm, { userProfile: userProfile, children: jsxRuntime.jsxs("div", { className: 'collect-user-data-login-with-email__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data-login-with-email__welcome-title', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
+    return (jsxRuntime.jsxs("div", { className: 'collect-user-data-login-with-email', "data-testid": 'collect-user-data-login-with-email', children: [onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'collect-user-data-login-with-email__main-img', src: onboardingImageUrl, alt: 'onboarding' })), jsxRuntime.jsxs("div", { className: 'collect-user-data-login-with-email__user-info-container', children: [jsxRuntime.jsx("div", { className: 'collect-user-data-login-with-email__icon-container', children: jsxRuntime.jsx(UserAvatar.UserAvatar, { user: userProfile }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data-login-with-email__email-address', children: userProfile.email })] }), jsxRuntime.jsxs("div", { className: 'collect-user-data-login-with-email__form', children: [jsxRuntime.jsx("div", { className: 'collect-user-data-login-with-email__success-icon', children: jsxRuntime.jsx(Icon.Icon, { color: 'text-primary', size: 'large', children: jsxRuntime.jsx(checkConnection.ReactComponent, {}) }) }), jsxRuntime.jsx(OnboardingUserDataForm.OnboardingUserDataForm, { userProfile: userProfile, children: jsxRuntime.jsxs("div", { className: 'collect-user-data-login-with-email__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data-login-with-email__welcome-title', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
                                         `Welcome to ${appName}` }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||
                                         'We need a bit of information to get started' })] }) }), jsxRuntime.jsx(TextButton.TextButton, { className: 'collect-user-data-login-with-email__log-out', onClick: handleLogOut, children: "Log out" })] })] }));
 };

package/src/lib/views/CollectUserDataViewLoginWithEmail/CollectUserDataViewLoginWithEmail.js

@@ -6,6 +6,7 @@ import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgCheckConnection } from '../../shared/assets/check-connection.js';
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
@@ -17,6 +18,7 @@ import '@dynamic-labs/multi-wallet';
 import { createUserProfile } from '../../utils/functions/createUserProfile/createUserProfile.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../context/ThemeContext/ThemeContext.js';
+import { Icon } from '../../components/Icon/Icon.js';
 import 'react-dom';
 import 'react-focus-lock';
 import '../../components/Transition/ZoomTransition/ZoomTransition.js';
@@ -63,7 +65,7 @@ const CollectUserDataViewLoginWithEmail = () => {
         return null;
     }
     const userProfile = createUserProfile(decodedOnboardingOnlyToken);
-    return (jsxs("div", { className: 'collect-user-data-login-with-email', "data-testid": 'collect-user-data-login-with-email', children: [onboardingImageUrl && (jsx("img", { className: 'collect-user-data-login-with-email__main-img', src: onboardingImageUrl, alt: 'onboarding' })), jsx("div", { className: 'collect-user-data-login-with-email__icon-container', children: jsx(UserAvatar, { user: userProfile }) }), jsxs("div", { className: 'collect-user-data-login-with-email__form', children: [jsx(OnboardingUserDataForm, { userProfile: userProfile, children: jsxs("div", { className: 'collect-user-data-login-with-email__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data-login-with-email__welcome-title', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
+    return (jsxs("div", { className: 'collect-user-data-login-with-email', "data-testid": 'collect-user-data-login-with-email', children: [onboardingImageUrl && (jsx("img", { className: 'collect-user-data-login-with-email__main-img', src: onboardingImageUrl, alt: 'onboarding' })), jsxs("div", { className: 'collect-user-data-login-with-email__user-info-container', children: [jsx("div", { className: 'collect-user-data-login-with-email__icon-container', children: jsx(UserAvatar, { user: userProfile }) }), jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data-login-with-email__email-address', children: userProfile.email })] }), jsxs("div", { className: 'collect-user-data-login-with-email__form', children: [jsx("div", { className: 'collect-user-data-login-with-email__success-icon', children: jsx(Icon, { color: 'text-primary', size: 'large', children: jsx(SvgCheckConnection, {}) }) }), jsx(OnboardingUserDataForm, { userProfile: userProfile, children: jsxs("div", { className: 'collect-user-data-login-with-email__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data-login-with-email__welcome-title', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
                                         `Welcome to ${appName}` }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||
                                         'We need a bit of information to get started' })] }) }), jsx(TextButton, { className: 'collect-user-data-login-with-email__log-out', onClick: handleLogOut, children: "Log out" })] })] }));
 };

package/src/lib/views/EmailConfirmationWaitingView/EmailConfirmationWaitingView.cjs

@@ -39,6 +39,7 @@ require('../../context/FooterAnimationContext/index.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/QrCodeContext/QrCodeContext.cjs');
 require('react-i18next');
+var PoweredByDynamic = require('../../components/PoweredByDynamic/PoweredByDynamic.cjs');
 require('../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 var IconWithSpinner = require('../../components/IconWithSpinner/IconWithSpinner.cjs');
@@ -55,7 +56,6 @@ require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('formik');
 require('yup');
 var IconButton = require('../../components/IconButton/IconButton.cjs');
-var PoweredByDynamic = require('../../components/PoweredByDynamic/PoweredByDynamic.cjs');
 require('../../components/Alert/Alert.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');

package/src/lib/views/EmailConfirmationWaitingView/EmailConfirmationWaitingView.js

@@ -35,6 +35,7 @@ import '../../context/FooterAnimationContext/index.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/QrCodeContext/QrCodeContext.js';
 import 'react-i18next';
+import { PoweredByDynamic } from '../../components/PoweredByDynamic/PoweredByDynamic.js';
 import '../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import { IconWithSpinner } from '../../components/IconWithSpinner/IconWithSpinner.js';
@@ -51,7 +52,6 @@ import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import 'formik';
 import 'yup';
 import { IconButton } from '../../components/IconButton/IconButton.js';
-import { PoweredByDynamic } from '../../components/PoweredByDynamic/PoweredByDynamic.js';
 import '../../components/Alert/Alert.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';

package/src/lib/views/EmailUpdate/EmailUpdate.cjs

@@ -5,11 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _tslib = require('../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var iconic = require('@dynamic-labs/iconic');
 var utils = require('@dynamic-labs/utils');
 var Typography = require('../../components/Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
 var logger = require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
 var chevronLeft = require('../../shared/assets/chevron-left.cjs');
@@ -54,6 +54,7 @@ require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('formik');
 require('yup');
 var Button = require('../../components/Button/Button.cjs');
+var ModalHeader = require('../../components/ModalHeader/ModalHeader.cjs');
 var IconButton = require('../../components/IconButton/IconButton.cjs');
 require('../../components/Alert/Alert.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
@@ -73,6 +74,7 @@ const EmailUpdate = () => {
         setView('verify-email');
         setError(undefined);
     };
+    const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
     // If user tries to update an email for logged user there is already an authToken and onboardingOnlyJwt is undefined
     // If user tries to update the email in the authFlow, authToken is undefined and onboardingOnlyJwt is defined
     const jwtToken = authToken || onboardingOnlyJwt;
@@ -106,12 +108,9 @@ const EmailUpdate = () => {
             setLoading(false);
         }
     });
-    return (jsxRuntime.jsxs("div", { className: 'email-update__container', children: [jsxRuntime.jsx("div", { className: 'email-update__header', children: jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }) }), jsxRuntime.jsx(iconic.SignInWithEmailIcon, { style: {
-                    height: '3.125rem',
-                    width: '3.125rem',
-                }, className: 'email-update__icon' }), jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', className: 'email-update__title', children: "Update Email" }), jsxRuntime.jsxs("div", { className: 'email-update__copy-text-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "Your current email address is" }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: email })] }), jsxRuntime.jsx(Input.Input, { id: 'email_field', onChange: (e) => {
-                    setUpdatedEmail(e.target.value);
-                }, type: 'email', label: 'Email address', className: 'email-update__input', error: Boolean(emailError), message: emailError }), jsxRuntime.jsx(Button.Button, { buttonVariant: 'primary', buttonPadding: 'medium', buttonClassName: 'email-update__button', onClick: () => handleEmailUpdate(), loading: loading, children: "Send Verification Code" })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, displayLeading: true, displayBorder: true, children: jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: "Update email" }) }), jsxRuntime.jsxs("div", { className: 'email-update__container', children: [jsxRuntime.jsxs("div", { className: 'email-update__copy-text-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "Your current email address is" }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: email })] }), jsxRuntime.jsx(Input.Input, { id: 'email_field', onChange: (e) => {
+                            setUpdatedEmail(e.target.value);
+                        }, type: 'email', label: 'Email address', className: 'email-update__input', error: Boolean(emailError), message: emailError }), jsxRuntime.jsx(Button.Button, { buttonVariant: 'primary', buttonPadding: 'medium', buttonClassName: 'email-update__button', onClick: () => handleEmailUpdate(), loading: loading, children: "Send Verification Code" })] })] }));
 };
 
 exports.EmailUpdate = EmailUpdate;

package/src/lib/views/EmailUpdate/EmailUpdate.js

@@ -1,11 +1,11 @@
 import { __awaiter } from '../../../../_virtual/_tslib.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { SignInWithEmailIcon } from '@dynamic-labs/iconic';
 import { EmailAlreadyExistsError } from '@dynamic-labs/utils';
 import { Typography } from '../../components/Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
 import { logger } from '../../shared/logger.js';
+import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import { useViewContext } from '../../context/ViewContext/ViewContext.js';
 import { ReactComponent as SvgChevronLeft } from '../../shared/assets/chevron-left.js';
@@ -50,6 +50,7 @@ import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import 'formik';
 import 'yup';
 import { Button } from '../../components/Button/Button.js';
+import { ModalHeader } from '../../components/ModalHeader/ModalHeader.js';
 import { IconButton } from '../../components/IconButton/IconButton.js';
 import '../../components/Alert/Alert.js';
 import '../../components/Popper/Popper/Popper.js';
@@ -69,6 +70,7 @@ const EmailUpdate = () => {
         setView('verify-email');
         setError(undefined);
     };
+    const backButton = (jsx(IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
     // If user tries to update an email for logged user there is already an authToken and onboardingOnlyJwt is undefined
     // If user tries to update the email in the authFlow, authToken is undefined and onboardingOnlyJwt is defined
     const jwtToken = authToken || onboardingOnlyJwt;
@@ -102,12 +104,9 @@ const EmailUpdate = () => {
             setLoading(false);
         }
     });
-    return (jsxs("div", { className: 'email-update__container', children: [jsx("div", { className: 'email-update__header', children: jsx(IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }) }), jsx(SignInWithEmailIcon, { style: {
-                    height: '3.125rem',
-                    width: '3.125rem',
-                }, className: 'email-update__icon' }), jsx(Typography, { weight: 'medium', variant: 'title', className: 'email-update__title', children: "Update Email" }), jsxs("div", { className: 'email-update__copy-text-container', children: [jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "Your current email address is" }), jsx(Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: email })] }), jsx(Input, { id: 'email_field', onChange: (e) => {
-                    setUpdatedEmail(e.target.value);
-                }, type: 'email', label: 'Email address', className: 'email-update__input', error: Boolean(emailError), message: emailError }), jsx(Button, { buttonVariant: 'primary', buttonPadding: 'medium', buttonClassName: 'email-update__button', onClick: () => handleEmailUpdate(), loading: loading, children: "Send Verification Code" })] }));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, displayLeading: true, displayBorder: true, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: "Update email" }) }), jsxs("div", { className: 'email-update__container', children: [jsxs("div", { className: 'email-update__copy-text-container', children: [jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "Your current email address is" }), jsx(Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: email })] }), jsx(Input, { id: 'email_field', onChange: (e) => {
+                            setUpdatedEmail(e.target.value);
+                        }, type: 'email', label: 'Email address', className: 'email-update__input', error: Boolean(emailError), message: emailError }), jsx(Button, { buttonVariant: 'primary', buttonPadding: 'medium', buttonClassName: 'email-update__button', onClick: () => handleEmailUpdate(), loading: loading, children: "Send Verification Code" })] })] }));
 };
 
 export { EmailUpdate };

package/src/lib/views/EmailVerification/EmailVerification.cjs

@@ -11,7 +11,6 @@ var decodeJwt = require('../../shared/utils/functions/decodeJwt/decodeJwt.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 check = require('../../shared/assets/check.cjs');
 var checkCircle = require('../../shared/assets/check-circle.cjs');
 var signInWithEmail = require('../../shared/assets/sign-in-with-email.cjs');
@@ -64,9 +63,7 @@ require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs'
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('formik');
 require('yup');
-var ModalHeader = require('../../components/ModalHeader/ModalHeader.cjs');
-var IconButton = require('../../components/IconButton/IconButton.cjs');
-var PoweredByDynamic = require('../../components/PoweredByDynamic/PoweredByDynamic.cjs');
+require('../../components/IconButton/IconButton.cjs');
 require('../../components/Alert/Alert.cjs');
 var useCountdown = require('../../utils/hooks/useCountdown/useCountdown.cjs');
 var useOnUnmount = require('../../utils/hooks/useOnUnmount/useOnUnmount.cjs');
@@ -82,6 +79,7 @@ var EmailVerificationContext = require('../../context/EmailVerificationContext/E
 const SECONDS_TO_RETRY = 15;
 const sleepToShowSuccessMessage = () => utils.sleep(1500);
 const EmailVerification = () => {
+    var _a, _b;
     const [hideRetryButton, setHideRetryButton] = React.useState(false);
     const [retried, setRetried] = React.useState(false);
     const [showTransferMessage, setShowTransferMessage] = React.useState(false);
@@ -95,7 +93,7 @@ const EmailVerification = () => {
     const { view, setView, goToInitialView } = ViewContext.useViewContext();
     const { error, setError, setErrorMessage } = ErrorContext.useErrorContext();
     const { setExistentAccountData } = AccountExistsContext.useAccountExistsContext();
-    const { environmentId, onboardingOnlyJwt, handleLogOut, authToken, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, setIsVerificationInProgress, isVerificationInProgress, projectSettings, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { environmentId, onboardingOnlyJwt, handleLogOut, authToken, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, setIsVerificationInProgress, projectSettings, } = useInternalDynamicContext.useInternalDynamicContext();
     const { email, verificationUUID, setVerificationUUID } = EmailVerificationContext.useEmailVerificationContext();
     const { loading, setLoading } = LoadingContext.useLoadingContext();
     const { createEmbeddedWallet } = useEmbeddedWallet.useEmbeddedWallet();
@@ -121,13 +119,8 @@ const EmailVerification = () => {
     const isLoginView = view === 'login-with-email-verification';
     const { verifyEmail } = useEmailVerificationRequest.useEmailVerificationRequest();
     const { createUserProfileByJWT } = useCreateUserProfileByJWTCallback.useCreateUserProfileByJWTCallback();
-    const close$1 = () => {
-        setShowAuthFlow(false);
-        if (isVerificationInProgress)
-            setIsVerificationInProgress(false);
-    };
     const handleComplete = React.useCallback((verificationToken) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _a;
+        var _c;
         setError(undefined);
         setLoading(true);
         if (!verificationUUID || (!authToken && !onboardingOnlyJwt)) {
@@ -148,7 +141,7 @@ const EmailVerification = () => {
             try {
                 // this function will check turnkey wallet enabled and create wallet if needed
                 // if not enabled, it will throw an error.
-                if ((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.automaticEmbeddedWalletCreation) {
+                if ((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _c === void 0 ? void 0 : _c.automaticEmbeddedWalletCreation) {
                     yield createEmbeddedWallet();
                 }
             }
@@ -179,13 +172,14 @@ const EmailVerification = () => {
         verifyEmail,
         setOnboardingOnlyJwt,
         setCallback,
+        (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.automaticEmbeddedWalletCreation,
         createEmbeddedWallet,
         setShowAuthFlow,
         setErrorMessage,
         setView,
     ]);
     const handleEmailLogin = React.useCallback((verificationToken) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _b;
+        var _d;
         setError(undefined);
         setLoading(true);
         if (!verificationUUID) {
@@ -219,7 +213,7 @@ const EmailVerification = () => {
             try {
                 // this function will check turnkey wallet enabled and create wallet if needed
                 // if not enabled, it will throw an error.
-                if ((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _b === void 0 ? void 0 : _b.automaticEmbeddedWalletCreation) {
+                if ((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _d === void 0 ? void 0 : _d.automaticEmbeddedWalletCreation) {
                     yield createEmbeddedWallet();
                 }
             }
@@ -252,6 +246,7 @@ const EmailVerification = () => {
         createUserProfileByJWT,
         setOnboardingOnlyJwt,
         setView,
+        (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _b === void 0 ? void 0 : _b.automaticEmbeddedWalletCreation,
         createEmbeddedWallet,
         setShowAuthFlow,
         setErrorMessage,
@@ -292,14 +287,13 @@ const EmailVerification = () => {
         callCallbackOnUnmount.current = false;
         setView('update-email');
     };
-    const closeButton = (jsxRuntime.jsx(IconButton.IconButton, { onClick: close$1, type: 'button', "data-testid": 'close-button', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
     const EmailIcon = React.useMemo(() => {
         const EmailIcon = (props) => (jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(signInWithEmail.ReactComponent, Object.assign({}, props)) }));
         return EmailIcon;
     }, []);
-    return (jsxRuntime.jsxs("div", { className: 'email-verification__container', children: [error && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { withIcon: false, className: 'email-verification__error-message', children: error })), showTransferMessage && (jsxRuntime.jsx("div", { className: 'email-verification__transfer-message', children: "Verification complete, the email is now verified to this account." })), jsxRuntime.jsx(ModalHeader.ModalHeader, { style: { paddingBlock: 0 }, trailing: !isLoginView && closeButton, children: isValidated ? (jsxRuntime.jsx("div", { className: 'email-verification__icon-container', children: jsxRuntime.jsx(IconWithStatus.IconWithStatus, { containerClassName: 'email-verification__icon--verified', Icon: EmailIcon, iconSize: 50, InnerIcon: check.ReactComponent }) })) : (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { className: classNames.classNames({
-                        'email-verification__icon-with-spinner': Boolean(!error),
-                    }), Icon: EmailIcon, iconSize: 80, isSpinning: true })) }), jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', className: 'email-verification__title', color: 'primary', children: "Confirm verification code" }), jsxRuntime.jsxs("div", { className: 'email-verification__copy-text-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "We\u2019ve sent a verification code to" }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: shortenEmail.shortenEmail(email) })] }), !isLoginView && (jsxRuntime.jsx(TextButton.TextButton, { onClick: updateEmail, className: 'email-verification__text-button', disabled: loading, children: "Edit email" })), jsxRuntime.jsx(PinField.PinField, { initialValue: Array(6).join('.').split('.'), isLoading: loading, handleComplete: isLoginView ? handleEmailLogin : handleComplete, isValidated: isValidated, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: () => setError(undefined) }), retried ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', color: 'secondary', children: ["Re-send code in ", remainingSeconds] }), jsxRuntime.jsxs("span", { className: 'email-verification__retry-container', children: [jsxRuntime.jsx(checkCircle.ReactComponent, {}), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'medium', color: 'primary', className: 'email-verification__retry-container-text', children: "Code sent" })] })] })) : (!hideRetryButton && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'medium', color: 'secondary', children: "Did not receive your code yet?" }), jsxRuntime.jsx(TextButton.TextButton, { className: 'email-verification__text-button', disabled: loading || isValidated, onClick: () => handleRetry(), children: "Re-send code" })] }))), !isLoginView && (jsxRuntime.jsx(TextButton.TextButton, { className: 'email-verification__log-out', onClick: handleLogOut, children: "Log out" })), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {})] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [error && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { withIcon: false, className: 'email-verification__error-message', children: error })), jsxRuntime.jsxs("div", { className: classNames.classNames('email-verification__container', {
+                    'email-verification__container--error': Boolean(error),
+                }), children: [showTransferMessage && (jsxRuntime.jsx("div", { className: 'email-verification__transfer-message', children: "Verification complete, the email is now verified to this account." })), isValidated ? (jsxRuntime.jsx("div", { className: 'email-verification__icon-container', children: jsxRuntime.jsx(IconWithStatus.IconWithStatus, { containerClassName: 'email-verification__icon--verified', Icon: EmailIcon, iconSize: 64, InnerIcon: check.ReactComponent }) })) : (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: EmailIcon, iconSize: 96, isSpinning: true, className: 'email-verification__icon-with-spinner' })), jsxRuntime.jsxs("div", { className: 'email-verification__copy-text-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "We\u2019ve sent a verification code to" }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: shortenEmail.shortenEmail(email) })] }), !isLoginView && !isValidated && (jsxRuntime.jsx(TextButton.TextButton, { onClick: updateEmail, className: 'email-verification__text-button', disabled: loading, children: "Edit email" })), jsxRuntime.jsx(PinField.PinField, { initialValue: Array(6).join('.').split('.'), isLoading: loading, handleComplete: isLoginView ? handleEmailLogin : handleComplete, isValidated: isValidated, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: () => setError(undefined) }), retried ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', color: 'secondary', className: 'email-verification__retry-text', children: ["Re-send code in ", remainingSeconds] }), jsxRuntime.jsxs("span", { className: 'email-verification__retry-container', children: [jsxRuntime.jsx(checkCircle.ReactComponent, {}), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'medium', color: 'primary', className: 'email-verification__retry-container-text', children: "Code sent" })] })] })) : (!hideRetryButton && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, { className: 'email-verification__retry-copy', variant: 'body_small', weight: 'medium', color: 'secondary', children: "Did not receive your code yet?" }), jsxRuntime.jsx(TextButton.TextButton, { className: 'email-verification__text-button', disabled: loading || isValidated, onClick: () => handleRetry(), children: "Re-send code" })] }))), !isLoginView && (jsxRuntime.jsx(TextButton.TextButton, { className: 'email-verification__log-out', onClick: handleLogOut, children: "Log out" }))] })] }));
 };
 
 exports.EmailVerification = EmailVerification;