@dynamic-labs/sdk-react-core 4.57.1 → 4.58.0

package/src/lib/widgets/DynamicWidget/views/AccountAndSecuritySettingsView/EmbeddedWalletExportSection/EmbeddedWalletExportSection.js

@@ -11,11 +11,11 @@ import { TypographyButton } from '../../../../../components/TypographyButton/Typ
 import '../../../../../context/DynamicContext/DynamicContext.js';
 import '../../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
 import '@dynamic-labs/iconic';
+import { ReactComponent as SvgBackupArrow } from '../../../../../shared/assets/backupArrow.js';
 import { ReactComponent as SvgChevronLeft } from '../../../../../shared/assets/chevron-left.js';
 import { ReactComponent as SvgExportPrivateKey } from '../../../../../shared/assets/export-private-key.js';
 import { ReactComponent as SvgExportRecoveryPhrase } from '../../../../../shared/assets/export-recovery-phrase.js';
 import { useViewContext } from '../../../../../context/ViewContext/ViewContext.js';
-import { ReactComponent as SvgBackupArrow } from '../../../../../shared/assets/backupArrow.js';
 import '../../../../../shared/logger.js';
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';
@@ -167,7 +167,7 @@ const EmbeddedWalletExportSection = () => {
     const exportButtonStartSlot = useMemo(() => (jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsx(SvgExportPrivateKey, { className: exportIconClasses }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: isV3WaasWallet
                     ? 'dyn_settings.export_section.export_button'
                     : 'dyn_settings.export_section.private_key_button', children: isV3WaasWallet
-                    ? t('dyn_settings.export_section.export_button', 'Export')
+                    ? t('dyn_settings.export_section.export_button')
                     : t('dyn_settings.export_section.private_key_button') })] })), [exportIconClasses, isV3WaasWallet, t]);
     const recoveryPhraseButtonStartSlot = useMemo(() => (jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsx(SvgExportRecoveryPhrase, { className: exportIconClasses }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.export_section.srp_button', children: t('dyn_settings.export_section.srp_button') })] })), [exportIconClasses, t]);
     if (!isEmbeddedWallet) {

package/src/lib/widgets/DynamicWidget/views/AccountAndSecuritySettingsView/MfaSection/MfaSection.cjs

@@ -8,24 +8,23 @@ var React = require('react');
 var reactI18next = require('react-i18next');
 var Typography = require('../../../../../components/Typography/Typography.cjs');
 var TypographyButton = require('../../../../../components/TypographyButton/TypographyButton.cjs');
+require('../../../../../context/DynamicContext/DynamicContext.cjs');
+require('../../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
 var chevronLeft = require('../../../../../shared/assets/chevron-left.cjs');
 var faceId = require('../../../../../shared/assets/face-id.cjs');
 var lock = require('../../../../../shared/assets/lock.cjs');
-require('@dynamic-labs/iconic');
 require('../../../../../context/ViewContext/ViewContext.cjs');
-require('../../../../../events/dynamicEvents.cjs');
-require('../../../../../../../_virtual/_tslib.cjs');
-require('@dynamic-labs/utils');
-require('../../../../../context/DynamicContext/DynamicContext.cjs');
-require('../../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
-require('@dynamic-labs/wallet-connector-core');
 require('../../../../../shared/logger.cjs');
 require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
 require('../../../../../utils/constants/colors.cjs');
 require('../../../../../utils/constants/values.cjs');
 require('@dynamic-labs/sdk-api-core');
 require('../../../../../shared/consts/index.cjs');
-require('../../../../../store/state/authMode/authMode.cjs');
+require('../../../../../events/dynamicEvents.cjs');
+require('../../../../../../../_virtual/_tslib.cjs');
 require('../../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
@@ -35,6 +34,7 @@ require('@dynamic-labs-sdk/client/core');
 require('../../../../../client/client.cjs');
 require('@dynamic-labs-sdk/client');
 require('../../../../../config/ApiEndpoint.cjs');
+var useProjectSettings = require('../../../../../client/extension/projectSettings/useProjectSettings/useProjectSettings.cjs');
 require('@dynamic-labs/locale');
 require('../../../../../store/state/dynamicContextProps/dynamicContextProps.cjs');
 require('../../../../../store/state/primaryWalletId/primaryWalletId.cjs');
@@ -43,11 +43,13 @@ require('../../../../../utils/functions/getWaasAddressTypeLabel/getWaasAddressTy
 require('../../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../../../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../../../../store/state/authMode/authMode.cjs');
 require('../../../../../context/VerificationContext/VerificationContext.cjs');
 require('react-dom');
 require('../../../../../utils/functions/compareChains/compareChains.cjs');
 require('../../../../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.cjs');
 require('../../../../../context/ThemeContext/ThemeContext.cjs');
+var useSmartWallets = require('../../../../../utils/hooks/useSmartWallets/useSmartWallets.cjs');
 require('../../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
 require('bs58');
 require('@dynamic-labs/types');
@@ -112,21 +114,40 @@ require('../../../../../store/state/tokenBalances.cjs');
 require('../../../../../store/state/multichainBalances.cjs');
 require('../../../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 var useIsPasskeysMfaEnabled = require('../../../../../utils/hooks/useIsPasskeysMfaEnabled/useIsPasskeysMfaEnabled.cjs');
+var useInternalDynamicContext = require('../../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
 
 const MfaSection = ({ isLoading }) => {
+    var _a, _b, _c;
     const { t } = reactI18next.useTranslation();
     const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
+    const { primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
+    const { getEOAWallet } = useSmartWallets.useSmartWallets();
+    const projectSettings = useProjectSettings.useProjectSettings();
     const isMfaEnabled = useIsMfaEnabled.useIsMfaEnabled();
     const isTotpMfaEnabled = useIsTotpMfaEnabled.useIsTotpMfaEnabled();
     const isPasskeyMfaEnabled = useIsPasskeysMfaEnabled.useIsPasskeysMfaEnabled();
+    const eoaWallet = primaryWallet && getEOAWallet(primaryWallet);
+    const wallet = eoaWallet !== null && eoaWallet !== void 0 ? eoaWallet : primaryWallet;
+    const isWaasWallet = Boolean(wallet && ((_b = (_a = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _a === void 0 ? void 0 : _a.key) === null || _b === void 0 ? void 0 : _b.startsWith('dynamicwaas')));
+    const isPasscodeRequired = (_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.waas) === null || _c === void 0 ? void 0 : _c.passcodeRequired;
+    const shouldShowPasswordSetup = isWaasWallet && isPasscodeRequired;
     const handleTotpMfaClick = React.useCallback(() => setDynamicWidgetView('manage-totp-mfa'), [setDynamicWidgetView]);
     const handlePasskeyMfaClick = React.useCallback(() => setDynamicWidgetView('manage-passkeys-mfa'), [setDynamicWidgetView]);
-    if (!isMfaEnabled) {
+    const handlePasscodeClick = React.useCallback(() => {
+        setDynamicWidgetView('setup-password', {
+            onComplete: () => {
+                // Password setup completed
+            },
+        });
+    }, [setDynamicWidgetView]);
+    if (!isMfaEnabled && !isWaasWallet) {
         return null;
     }
     return (jsxRuntime.jsxs("div", { className: 'settings-view__body__section', children: [jsxRuntime.jsx("div", { className: 'settings-view__body__section__title', children: jsxRuntime.jsx(Typography.Typography, { copykey: 'dyn_settings.mfa_section.title', color: 'secondary', weight: 'medium', children: t('dyn_settings.mfa_section.title') }) }), isPasskeyMfaEnabled && (jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'manage-passkeys-mfa-button', onClick: handlePasskeyMfaClick, buttonClassName: 'settings-view__body__section__button', startSlot: 
                 // eslint-disable-next-line react/jsx-wrap-multilines
-                jsxRuntime.jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(faceId.ReactComponent, { className: 'settings-view__body__section__button__icon' }), jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.mfa_section.passkey_button', children: t('dyn_settings.mfa_section.passkey_button') })] }), endSlot: jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), disabled: isLoading, showInternalLoading: false })), isTotpMfaEnabled && (jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'manage-totp-mfa-button', onClick: handleTotpMfaClick, buttonClassName: 'settings-view__body__section__button', startSlot: 
+                jsxRuntime.jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(faceId.ReactComponent, { className: 'settings-view__body__section__button__icon' }), jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.mfa_section.passkey_button', children: t('dyn_settings.mfa_section.passkey_button') })] }), endSlot: jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), disabled: isLoading, showInternalLoading: false })), shouldShowPasswordSetup && (jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'password-setup-button', onClick: handlePasscodeClick, buttonClassName: 'settings-view__body__section__button', startSlot: 
+                // eslint-disable-next-line react/jsx-wrap-multilines
+                jsxRuntime.jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(lock.ReactComponent, { className: 'settings-view__body__section__button__icon' }), jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.account_security.password.set_button', children: t('dyn_settings.account_security.password.set_button') })] }), endSlot: jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), disabled: isLoading, showInternalLoading: false })), isTotpMfaEnabled && (jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'manage-totp-mfa-button', onClick: handleTotpMfaClick, buttonClassName: 'settings-view__body__section__button', startSlot: 
                 // eslint-disable-next-line react/jsx-wrap-multilines
                 jsxRuntime.jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(lock.ReactComponent, { className: 'settings-view__body__section__button__icon' }), jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.mfa_section.totp_button', children: t('dyn_settings.mfa_section.totp_button') })] }), endSlot: jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), disabled: isLoading, showInternalLoading: false }))] }));
 };

package/src/lib/widgets/DynamicWidget/views/AccountAndSecuritySettingsView/MfaSection/MfaSection.js

@@ -4,24 +4,23 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Typography } from '../../../../../components/Typography/Typography.js';
 import { TypographyButton } from '../../../../../components/TypographyButton/TypographyButton.js';
+import '../../../../../context/DynamicContext/DynamicContext.js';
+import '../../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
 import { ReactComponent as SvgChevronLeft } from '../../../../../shared/assets/chevron-left.js';
 import { ReactComponent as SvgFaceId } from '../../../../../shared/assets/face-id.js';
 import { ReactComponent as SvgLock } from '../../../../../shared/assets/lock.js';
-import '@dynamic-labs/iconic';
 import '../../../../../context/ViewContext/ViewContext.js';
-import '../../../../../events/dynamicEvents.js';
-import '../../../../../../../_virtual/_tslib.js';
-import '@dynamic-labs/utils';
-import '../../../../../context/DynamicContext/DynamicContext.js';
-import '../../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
-import '@dynamic-labs/wallet-connector-core';
 import '../../../../../shared/logger.js';
 import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
 import '../../../../../utils/constants/colors.js';
 import '../../../../../utils/constants/values.js';
 import '@dynamic-labs/sdk-api-core';
 import '../../../../../shared/consts/index.js';
-import '../../../../../store/state/authMode/authMode.js';
+import '../../../../../events/dynamicEvents.js';
+import '../../../../../../../_virtual/_tslib.js';
 import '../../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
@@ -31,6 +30,7 @@ import '@dynamic-labs-sdk/client/core';
 import '../../../../../client/client.js';
 import '@dynamic-labs-sdk/client';
 import '../../../../../config/ApiEndpoint.js';
+import { useProjectSettings } from '../../../../../client/extension/projectSettings/useProjectSettings/useProjectSettings.js';
 import '@dynamic-labs/locale';
 import '../../../../../store/state/dynamicContextProps/dynamicContextProps.js';
 import '../../../../../store/state/primaryWalletId/primaryWalletId.js';
@@ -39,11 +39,13 @@ import '../../../../../utils/functions/getWaasAddressTypeLabel/getWaasAddressTyp
 import '../../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../../../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../../../../store/state/authMode/authMode.js';
 import '../../../../../context/VerificationContext/VerificationContext.js';
 import 'react-dom';
 import '../../../../../utils/functions/compareChains/compareChains.js';
 import '../../../../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.js';
 import '../../../../../context/ThemeContext/ThemeContext.js';
+import { useSmartWallets } from '../../../../../utils/hooks/useSmartWallets/useSmartWallets.js';
 import '../../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
 import 'bs58';
 import '@dynamic-labs/types';
@@ -108,21 +110,40 @@ import '../../../../../store/state/tokenBalances.js';
 import '../../../../../store/state/multichainBalances.js';
 import '../../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import { useIsPasskeysMfaEnabled } from '../../../../../utils/hooks/useIsPasskeysMfaEnabled/useIsPasskeysMfaEnabled.js';
+import { useInternalDynamicContext } from '../../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
 
 const MfaSection = ({ isLoading }) => {
+    var _a, _b, _c;
     const { t } = useTranslation();
     const { setDynamicWidgetView } = useWidgetContext();
+    const { primaryWallet } = useInternalDynamicContext();
+    const { getEOAWallet } = useSmartWallets();
+    const projectSettings = useProjectSettings();
     const isMfaEnabled = useIsMfaEnabled();
     const isTotpMfaEnabled = useIsTotpMfaEnabled();
     const isPasskeyMfaEnabled = useIsPasskeysMfaEnabled();
+    const eoaWallet = primaryWallet && getEOAWallet(primaryWallet);
+    const wallet = eoaWallet !== null && eoaWallet !== void 0 ? eoaWallet : primaryWallet;
+    const isWaasWallet = Boolean(wallet && ((_b = (_a = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _a === void 0 ? void 0 : _a.key) === null || _b === void 0 ? void 0 : _b.startsWith('dynamicwaas')));
+    const isPasscodeRequired = (_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.waas) === null || _c === void 0 ? void 0 : _c.passcodeRequired;
+    const shouldShowPasswordSetup = isWaasWallet && isPasscodeRequired;
     const handleTotpMfaClick = useCallback(() => setDynamicWidgetView('manage-totp-mfa'), [setDynamicWidgetView]);
     const handlePasskeyMfaClick = useCallback(() => setDynamicWidgetView('manage-passkeys-mfa'), [setDynamicWidgetView]);
-    if (!isMfaEnabled) {
+    const handlePasscodeClick = useCallback(() => {
+        setDynamicWidgetView('setup-password', {
+            onComplete: () => {
+                // Password setup completed
+            },
+        });
+    }, [setDynamicWidgetView]);
+    if (!isMfaEnabled && !isWaasWallet) {
         return null;
     }
     return (jsxs("div", { className: 'settings-view__body__section', children: [jsx("div", { className: 'settings-view__body__section__title', children: jsx(Typography, { copykey: 'dyn_settings.mfa_section.title', color: 'secondary', weight: 'medium', children: t('dyn_settings.mfa_section.title') }) }), isPasskeyMfaEnabled && (jsx(TypographyButton, { dataTestId: 'manage-passkeys-mfa-button', onClick: handlePasskeyMfaClick, buttonClassName: 'settings-view__body__section__button', startSlot: 
                 // eslint-disable-next-line react/jsx-wrap-multilines
-                jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsx(SvgFaceId, { className: 'settings-view__body__section__button__icon' }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.mfa_section.passkey_button', children: t('dyn_settings.mfa_section.passkey_button') })] }), endSlot: jsx(SvgChevronLeft, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), disabled: isLoading, showInternalLoading: false })), isTotpMfaEnabled && (jsx(TypographyButton, { dataTestId: 'manage-totp-mfa-button', onClick: handleTotpMfaClick, buttonClassName: 'settings-view__body__section__button', startSlot: 
+                jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsx(SvgFaceId, { className: 'settings-view__body__section__button__icon' }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.mfa_section.passkey_button', children: t('dyn_settings.mfa_section.passkey_button') })] }), endSlot: jsx(SvgChevronLeft, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), disabled: isLoading, showInternalLoading: false })), shouldShowPasswordSetup && (jsx(TypographyButton, { dataTestId: 'password-setup-button', onClick: handlePasscodeClick, buttonClassName: 'settings-view__body__section__button', startSlot: 
+                // eslint-disable-next-line react/jsx-wrap-multilines
+                jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsx(SvgLock, { className: 'settings-view__body__section__button__icon' }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.account_security.password.set_button', children: t('dyn_settings.account_security.password.set_button') })] }), endSlot: jsx(SvgChevronLeft, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), disabled: isLoading, showInternalLoading: false })), isTotpMfaEnabled && (jsx(TypographyButton, { dataTestId: 'manage-totp-mfa-button', onClick: handleTotpMfaClick, buttonClassName: 'settings-view__body__section__button', startSlot: 
                 // eslint-disable-next-line react/jsx-wrap-multilines
                 jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsx(SvgLock, { className: 'settings-view__body__section__button__icon' }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.mfa_section.totp_button', children: t('dyn_settings.mfa_section.totp_button') })] }), endSlot: jsx(SvgChevronLeft, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), disabled: isLoading, showInternalLoading: false }))] }));
 };

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

@@ -14,9 +14,9 @@ require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 var accountAndSecurity = require('../../../../shared/assets/account-and-security.cjs');
 var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
+var connect = require('../../../../shared/assets/connect.cjs');
 var connectedApps = require('../../../../shared/assets/connected-apps.cjs');
 var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
-var connect = require('../../../../shared/assets/connect.cjs');
 require('../../../../shared/logger.cjs');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');

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

@@ -10,9 +10,9 @@ import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import { ReactComponent as SvgAccountAndSecurity } from '../../../../shared/assets/account-and-security.js';
 import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
+import { ReactComponent as SvgConnect } from '../../../../shared/assets/connect.js';
 import { ReactComponent as SvgConnectedApps } from '../../../../shared/assets/connected-apps.js';
 import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
-import { ReactComponent as SvgConnect } from '../../../../shared/assets/connect.js';
 import '../../../../shared/logger.js';
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';

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

@@ -0,0 +1,54 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var Icon = require('../../../../components/Icon/Icon.cjs');
+var IconButton = require('../../../../components/IconButton/IconButton.cjs');
+var Input = require('../../../../components/Input/Input.cjs');
+var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
+var ToggleVisibilityButton = require('../../../../components/ToggleVisibilityButton/ToggleVisibilityButton.cjs');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
+var checkCircle = require('../../../../shared/assets/check-circle.cjs');
+var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
+var exclamationCircle = require('../../../../shared/assets/exclamation-circle.cjs');
+var secureAction = require('../../../../shared/assets/secure-action.cjs');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+
+const SetupPasswordConfirmView = ({ password, onContinue, onBack, }) => {
+    const { t } = reactI18next.useTranslation();
+    const [confirmPassword, setConfirmPassword] = React.useState('');
+    const [showPassword, setShowPassword] = React.useState(false);
+    const [hasInteracted, setHasInteracted] = React.useState(false);
+    const passwordsMatch = password === confirmPassword;
+    const isValid = passwordsMatch && confirmPassword.length > 0;
+    const handlePasswordChange = React.useCallback((e) => {
+        setConfirmPassword(e.target.value);
+        setHasInteracted(true);
+    }, []);
+    const handleToggleVisibility = React.useCallback((hidden) => {
+        setShowPassword(!hidden);
+    }, []);
+    const handleContinue = React.useCallback(() => {
+        if (isValid) {
+            onContinue();
+        }
+    }, [isValid, onContinue]);
+    const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onBack, "data-testid": 'setup-password-confirm-back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
+    const showMatchMessage = hasInteracted && confirmPassword.length > 0;
+    const matchMessage = passwordsMatch
+        ? t('dyn_setup_password.confirm.match')
+        : t('dyn_setup_password.confirm.mismatch');
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.confirm.title', children: t('dyn_setup_password.confirm.title') }) }), jsxRuntime.jsxs("div", { className: 'setup-password-confirm-view', children: [jsxRuntime.jsxs("div", { className: 'setup-password-confirm-view__body', children: [jsxRuntime.jsx("div", { className: 'setup-password-confirm-view__icon-container', children: jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(secureAction.ReactComponent, { width: 64, height: 64 }) }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.confirm.description', className: 'setup-password-confirm-view__description', children: t('dyn_setup_password.confirm.description') }), jsxRuntime.jsxs("div", { className: 'setup-password-confirm-view__input-container', children: [jsxRuntime.jsx(Input.Input, { id: 'setup-password-confirm-password-input', type: showPassword ? 'text' : 'password', label: t('dyn_setup_password.confirm.label'), placeholder: t('dyn_setup_password.confirm.placeholder'), value: confirmPassword, onChange: handlePasswordChange, variant: 'regular', error: !passwordsMatch && hasInteracted && confirmPassword.length > 0, suffix: 
+                                        // eslint-disable-next-line react/jsx-wrap-multilines
+                                        jsxRuntime.jsx(ToggleVisibilityButton.ToggleVisibilityButton, { initialState: true, onClick: handleToggleVisibility }) }), showMatchMessage && (jsxRuntime.jsxs("div", { className: 'setup-password-confirm-view__match-indicator', children: [jsxRuntime.jsx(Icon.Icon, { color: passwordsMatch ? 'success-1' : 'text-error', size: 'medium', children: passwordsMatch ? (jsxRuntime.jsx(checkCircle.ReactComponent, {})) : (jsxRuntime.jsx(exclamationCircle.ReactComponent, {})) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: passwordsMatch ? 'secondary' : 'error-1', children: matchMessage })] }))] })] }), jsxRuntime.jsx("div", { className: 'setup-password-confirm-view__actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'setup-password-confirm-continue-button', onClick: handleContinue, disabled: !isValid, copykey: 'dyn_setup_password.button.continue', buttonVariant: 'brand-primary', typographyProps: {
+                                color: 'inherit',
+                            }, expanded: true, children: t('dyn_setup_password.button.continue') }) })] })] }));
+};
+
+exports.SetupPasswordConfirmView = SetupPasswordConfirmView;

package/src/lib/widgets/DynamicWidget/views/SetupPasswordConfirmView/SetupPasswordConfirmView.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export type SetupPasswordConfirmViewProps = {
+    password: string;
+    onContinue: () => void;
+    onBack: () => void;
+};
+export declare const SetupPasswordConfirmView: FC<SetupPasswordConfirmViewProps>;

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

@@ -0,0 +1,50 @@
+'use client'
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Icon } from '../../../../components/Icon/Icon.js';
+import { IconButton } from '../../../../components/IconButton/IconButton.js';
+import { Input } from '../../../../components/Input/Input.js';
+import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
+import { ToggleVisibilityButton } from '../../../../components/ToggleVisibilityButton/ToggleVisibilityButton.js';
+import { Typography } from '../../../../components/Typography/Typography.js';
+import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
+import { ReactComponent as SvgCheckCircle } from '../../../../shared/assets/check-circle.js';
+import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
+import { ReactComponent as SvgExclamationCircle } from '../../../../shared/assets/exclamation-circle.js';
+import { ReactComponent as SvgSecureAction } from '../../../../shared/assets/secure-action.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+
+const SetupPasswordConfirmView = ({ password, onContinue, onBack, }) => {
+    const { t } = useTranslation();
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const [showPassword, setShowPassword] = useState(false);
+    const [hasInteracted, setHasInteracted] = useState(false);
+    const passwordsMatch = password === confirmPassword;
+    const isValid = passwordsMatch && confirmPassword.length > 0;
+    const handlePasswordChange = useCallback((e) => {
+        setConfirmPassword(e.target.value);
+        setHasInteracted(true);
+    }, []);
+    const handleToggleVisibility = useCallback((hidden) => {
+        setShowPassword(!hidden);
+    }, []);
+    const handleContinue = useCallback(() => {
+        if (isValid) {
+            onContinue();
+        }
+    }, [isValid, onContinue]);
+    const backButton = (jsx(IconButton, { type: 'button', onClick: onBack, "data-testid": 'setup-password-confirm-back-button', children: jsx(SvgChevronLeft, {}) }));
+    const showMatchMessage = hasInteracted && confirmPassword.length > 0;
+    const matchMessage = passwordsMatch
+        ? t('dyn_setup_password.confirm.match')
+        : t('dyn_setup_password.confirm.mismatch');
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.confirm.title', children: t('dyn_setup_password.confirm.title') }) }), jsxs("div", { className: 'setup-password-confirm-view', children: [jsxs("div", { className: 'setup-password-confirm-view__body', children: [jsx("div", { className: 'setup-password-confirm-view__icon-container', children: jsx(Icon, { color: 'brand-primary', children: jsx(SvgSecureAction, { width: 64, height: 64 }) }) }), jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.confirm.description', className: 'setup-password-confirm-view__description', children: t('dyn_setup_password.confirm.description') }), jsxs("div", { className: 'setup-password-confirm-view__input-container', children: [jsx(Input, { id: 'setup-password-confirm-password-input', type: showPassword ? 'text' : 'password', label: t('dyn_setup_password.confirm.label'), placeholder: t('dyn_setup_password.confirm.placeholder'), value: confirmPassword, onChange: handlePasswordChange, variant: 'regular', error: !passwordsMatch && hasInteracted && confirmPassword.length > 0, suffix: 
+                                        // eslint-disable-next-line react/jsx-wrap-multilines
+                                        jsx(ToggleVisibilityButton, { initialState: true, onClick: handleToggleVisibility }) }), showMatchMessage && (jsxs("div", { className: 'setup-password-confirm-view__match-indicator', children: [jsx(Icon, { color: passwordsMatch ? 'success-1' : 'text-error', size: 'medium', children: passwordsMatch ? (jsx(SvgCheckCircle, {})) : (jsx(SvgExclamationCircle, {})) }), jsx(Typography, { variant: 'body_small', color: passwordsMatch ? 'secondary' : 'error-1', children: matchMessage })] }))] })] }), jsx("div", { className: 'setup-password-confirm-view__actions', children: jsx(TypographyButton, { dataTestId: 'setup-password-confirm-continue-button', onClick: handleContinue, disabled: !isValid, copykey: 'dyn_setup_password.button.continue', buttonVariant: 'brand-primary', typographyProps: {
+                                color: 'inherit',
+                            }, expanded: true, children: t('dyn_setup_password.button.continue') }) })] })] }));
+};
+
+export { SetupPasswordConfirmView };

package/src/lib/widgets/DynamicWidget/views/SetupPasswordConfirmView/index.d.ts

@@ -0,0 +1,2 @@
+export { SetupPasswordConfirmView } from './SetupPasswordConfirmView';
+export type { SetupPasswordConfirmViewProps } from './SetupPasswordConfirmView';

package/src/lib/widgets/DynamicWidget/views/SetupPasswordEnterView/PasswordRequirement.cjs

@@ -0,0 +1,15 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+require('react');
+var checkCircle = require('../../../../shared/assets/check-circle.cjs');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+
+const PasswordRequirement = ({ met, text, }) => (jsxRuntime.jsxs("div", { className: 'password-requirement', children: [met ? (jsxRuntime.jsx("div", { className: 'password-requirement__icon-wrapper', children: jsxRuntime.jsx(checkCircle.ReactComponent, {}) })) : (jsxRuntime.jsx("div", { className: 'password-requirement__circle' })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: met ? 'primary' : 'secondary', weight: 'regular', children: text })] }));
+
+exports.PasswordRequirement = PasswordRequirement;

package/src/lib/widgets/DynamicWidget/views/SetupPasswordEnterView/PasswordRequirement.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export type PasswordRequirementProps = {
+    met: boolean;
+    text: string;
+};
+export declare const PasswordRequirement: FC<PasswordRequirementProps>;

package/src/lib/widgets/DynamicWidget/views/SetupPasswordEnterView/PasswordRequirement.js

@@ -0,0 +1,11 @@
+'use client'
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Typography } from '../../../../components/Typography/Typography.js';
+import 'react';
+import { ReactComponent as SvgCheckCircle } from '../../../../shared/assets/check-circle.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+
+const PasswordRequirement = ({ met, text, }) => (jsxs("div", { className: 'password-requirement', children: [met ? (jsx("div", { className: 'password-requirement__icon-wrapper', children: jsx(SvgCheckCircle, {}) })) : (jsx("div", { className: 'password-requirement__circle' })), jsx(Typography, { variant: 'body_small', color: met ? 'primary' : 'secondary', weight: 'regular', children: text })] }));
+
+export { PasswordRequirement };

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

@@ -0,0 +1,57 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var Icon = require('../../../../components/Icon/Icon.cjs');
+var IconButton = require('../../../../components/IconButton/IconButton.cjs');
+var Input = require('../../../../components/Input/Input.cjs');
+var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
+var ToggleVisibilityButton = require('../../../../components/ToggleVisibilityButton/ToggleVisibilityButton.cjs');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
+var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
+var passwordLockIcon = require('../../../../shared/assets/password-lock-icon.cjs');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+var PasswordRequirement = require('./PasswordRequirement.cjs');
+
+const PASSWORD_MIN_LENGTH = 8;
+const PASSWORD_MAX_LENGTH = 70;
+const validatePassword = (password) => ({
+    length: password.length >= PASSWORD_MIN_LENGTH &&
+        password.length <= PASSWORD_MAX_LENGTH,
+    lowercase: /[a-z]/.test(password),
+    number: /\d/.test(password),
+    symbol: /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(password),
+    uppercase: /[A-Z]/.test(password),
+});
+const SetupPasswordEnterView = ({ onContinue, onBack, }) => {
+    const { t } = reactI18next.useTranslation();
+    const [password, setPassword] = React.useState('');
+    const [showPassword, setShowPassword] = React.useState(false);
+    const requirements = validatePassword(password);
+    const allValid = Object.values(requirements).every(Boolean);
+    const handlePasswordChange = React.useCallback((e) => {
+        setPassword(e.target.value);
+    }, []);
+    const handleToggleVisibility = React.useCallback((hidden) => {
+        setShowPassword(!hidden);
+    }, []);
+    const handleContinue = React.useCallback(() => {
+        if (allValid) {
+            onContinue(password);
+        }
+    }, [allValid, onContinue, password]);
+    const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onBack, "data-testid": 'setup-password-enter-back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.enter.title', children: t('dyn_setup_password.enter.title') }) }), jsxRuntime.jsx("div", { className: 'setup-password-enter-view', children: jsxRuntime.jsxs("div", { className: 'setup-password-enter-view__body', children: [jsxRuntime.jsx("div", { className: 'setup-password-enter-view__icon-container', children: jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(passwordLockIcon.ReactComponent, { width: 64, height: 64 }) }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.enter.description', className: 'setup-password-enter-view__description', children: t('dyn_setup_password.enter.description') }), jsxRuntime.jsx(Input.Input, { id: 'setup-password-enter-password-input', type: showPassword ? 'text' : 'password', label: t('dyn_setup_password.enter.label'), placeholder: t('dyn_setup_password.enter.placeholder'), value: password, onChange: handlePasswordChange, variant: 'regular', suffix: 
+                            // eslint-disable-next-line react/jsx-wrap-multilines
+                            jsxRuntime.jsx(ToggleVisibilityButton.ToggleVisibilityButton, { initialState: true, onClick: handleToggleVisibility }) }), jsxRuntime.jsxs("div", { className: 'setup-password-enter-view__requirements', children: [jsxRuntime.jsx(PasswordRequirement.PasswordRequirement, { met: requirements.length, text: t('dyn_setup_password.enter.requirement_length') }), jsxRuntime.jsx(PasswordRequirement.PasswordRequirement, { met: requirements.uppercase, text: t('dyn_setup_password.enter.requirement_uppercase') }), jsxRuntime.jsx(PasswordRequirement.PasswordRequirement, { met: requirements.lowercase, text: t('dyn_setup_password.enter.requirement_lowercase') }), jsxRuntime.jsx(PasswordRequirement.PasswordRequirement, { met: requirements.number, text: t('dyn_setup_password.enter.requirement_number') }), jsxRuntime.jsx(PasswordRequirement.PasswordRequirement, { met: requirements.symbol, text: t('dyn_setup_password.enter.requirement_symbol') })] }), jsxRuntime.jsx("div", { className: 'setup-password-enter-view__actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'setup-password-enter-continue-button', onClick: handleContinue, disabled: !allValid, copykey: 'dyn_setup_password.button.continue', buttonVariant: 'brand-primary', typographyProps: {
+                                    color: 'inherit',
+                                }, expanded: true, children: t('dyn_setup_password.button.continue') }) })] }) })] }));
+};
+
+exports.SetupPasswordEnterView = SetupPasswordEnterView;

package/src/lib/widgets/DynamicWidget/views/SetupPasswordEnterView/SetupPasswordEnterView.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export type SetupPasswordEnterViewProps = {
+    onContinue: (password: string) => void;
+    onBack: () => void;
+};
+export declare const SetupPasswordEnterView: FC<SetupPasswordEnterViewProps>;

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

@@ -0,0 +1,53 @@
+'use client'
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Icon } from '../../../../components/Icon/Icon.js';
+import { IconButton } from '../../../../components/IconButton/IconButton.js';
+import { Input } from '../../../../components/Input/Input.js';
+import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
+import { ToggleVisibilityButton } from '../../../../components/ToggleVisibilityButton/ToggleVisibilityButton.js';
+import { Typography } from '../../../../components/Typography/Typography.js';
+import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
+import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
+import { ReactComponent as SvgPasswordLockIcon } from '../../../../shared/assets/password-lock-icon.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+import { PasswordRequirement } from './PasswordRequirement.js';
+
+const PASSWORD_MIN_LENGTH = 8;
+const PASSWORD_MAX_LENGTH = 70;
+const validatePassword = (password) => ({
+    length: password.length >= PASSWORD_MIN_LENGTH &&
+        password.length <= PASSWORD_MAX_LENGTH,
+    lowercase: /[a-z]/.test(password),
+    number: /\d/.test(password),
+    symbol: /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(password),
+    uppercase: /[A-Z]/.test(password),
+});
+const SetupPasswordEnterView = ({ onContinue, onBack, }) => {
+    const { t } = useTranslation();
+    const [password, setPassword] = useState('');
+    const [showPassword, setShowPassword] = useState(false);
+    const requirements = validatePassword(password);
+    const allValid = Object.values(requirements).every(Boolean);
+    const handlePasswordChange = useCallback((e) => {
+        setPassword(e.target.value);
+    }, []);
+    const handleToggleVisibility = useCallback((hidden) => {
+        setShowPassword(!hidden);
+    }, []);
+    const handleContinue = useCallback(() => {
+        if (allValid) {
+            onContinue(password);
+        }
+    }, [allValid, onContinue, password]);
+    const backButton = (jsx(IconButton, { type: 'button', onClick: onBack, "data-testid": 'setup-password-enter-back-button', children: jsx(SvgChevronLeft, {}) }));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.enter.title', children: t('dyn_setup_password.enter.title') }) }), jsx("div", { className: 'setup-password-enter-view', children: jsxs("div", { className: 'setup-password-enter-view__body', children: [jsx("div", { className: 'setup-password-enter-view__icon-container', children: jsx(Icon, { color: 'brand-primary', children: jsx(SvgPasswordLockIcon, { width: 64, height: 64 }) }) }), jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.enter.description', className: 'setup-password-enter-view__description', children: t('dyn_setup_password.enter.description') }), jsx(Input, { id: 'setup-password-enter-password-input', type: showPassword ? 'text' : 'password', label: t('dyn_setup_password.enter.label'), placeholder: t('dyn_setup_password.enter.placeholder'), value: password, onChange: handlePasswordChange, variant: 'regular', suffix: 
+                            // eslint-disable-next-line react/jsx-wrap-multilines
+                            jsx(ToggleVisibilityButton, { initialState: true, onClick: handleToggleVisibility }) }), jsxs("div", { className: 'setup-password-enter-view__requirements', children: [jsx(PasswordRequirement, { met: requirements.length, text: t('dyn_setup_password.enter.requirement_length') }), jsx(PasswordRequirement, { met: requirements.uppercase, text: t('dyn_setup_password.enter.requirement_uppercase') }), jsx(PasswordRequirement, { met: requirements.lowercase, text: t('dyn_setup_password.enter.requirement_lowercase') }), jsx(PasswordRequirement, { met: requirements.number, text: t('dyn_setup_password.enter.requirement_number') }), jsx(PasswordRequirement, { met: requirements.symbol, text: t('dyn_setup_password.enter.requirement_symbol') })] }), jsx("div", { className: 'setup-password-enter-view__actions', children: jsx(TypographyButton, { dataTestId: 'setup-password-enter-continue-button', onClick: handleContinue, disabled: !allValid, copykey: 'dyn_setup_password.button.continue', buttonVariant: 'brand-primary', typographyProps: {
+                                    color: 'inherit',
+                                }, expanded: true, children: t('dyn_setup_password.button.continue') }) })] }) })] }));
+};
+
+export { SetupPasswordEnterView };

package/src/lib/widgets/DynamicWidget/views/SetupPasswordEnterView/index.d.ts

@@ -0,0 +1,4 @@
+export { SetupPasswordEnterView } from './SetupPasswordEnterView';
+export type { SetupPasswordEnterViewProps } from './SetupPasswordEnterView';
+export { PasswordRequirement } from './PasswordRequirement';
+export type { PasswordRequirementProps } from './PasswordRequirement';