@dynamic-labs/sdk-react-core 4.60.0 → 4.61.0

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

@@ -3,16 +3,17 @@ import { __awaiter } from '../../../../../../_virtual/_tslib.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ErrorContainer } from '../../../../components/ErrorContainer/ErrorContainer.js';
 import { Icon } from '../../../../components/Icon/Icon.js';
 import { Input } from '../../../../components/Input/Input.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 SvgErrorCircleX } from '../../../../shared/assets/error-circle-x.js';
 import { ReactComponent as SvgPasswordLockIcon } from '../../../../shared/assets/password-lock-icon.js';
 import '@dynamic-labs/iconic';
 import '../../../../context/ViewContext/ViewContext.js';
 
+const INVALID_PASSWORD_ERROR_MESSAGE = 'Decryption failed: Invalid password';
 const EnterPasswordView = ({ onContinue, title, description, buttonLabel, isLoading: externalLoading, }) => {
     const { t } = useTranslation();
     const [password, setPassword] = useState('');
@@ -37,9 +38,18 @@ const EnterPasswordView = ({ onContinue, title, description, buttonLabel, isLoad
             yield onContinue(password);
         }
         catch (err) {
-            const errorMessage = err instanceof Error
-                ? err.message
-                : t('dyn_enter_password.error.failed');
+            let errorMessage;
+            if (err instanceof Error) {
+                if (err.message.includes(INVALID_PASSWORD_ERROR_MESSAGE)) {
+                    errorMessage = t('dyn_enter_password.error.invalid_password');
+                }
+                else {
+                    errorMessage = err.message;
+                }
+            }
+            else {
+                errorMessage = t('dyn_enter_password.error.failed');
+            }
             setError(errorMessage);
         }
         finally {
@@ -47,7 +57,7 @@ const EnterPasswordView = ({ onContinue, title, description, buttonLabel, isLoad
         }
     }), [password, onContinue, t]);
     const loading = externalLoading || isLoading;
-    return (jsx("div", { className: 'enter-password-view', children: jsxs("div", { className: 'enter-password-view__body', children: [jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_enter_password.title', className: 'enter-password-view__title', style: { marginBottom: '24px', textAlign: 'center' }, children: title !== null && title !== void 0 ? title : t('dyn_enter_password.title') }), jsx("div", { className: 'enter-password-view__icon-container', children: jsx(Icon, { color: 'brand-primary', children: jsx(SvgPasswordLockIcon, { width: 64, height: 64 }) }) }), jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_enter_password.description', className: 'enter-password-view__description', children: description !== null && description !== void 0 ? description : t('dyn_enter_password.description') }), error && (jsx(ErrorContainer, { className: 'enter-password-view__error', variant: 'error', withIcon: false, children: error })), jsx(Input, { id: 'enter-password-input', type: showPassword ? 'text' : 'password', label: t('dyn_enter_password.label'), placeholder: t('dyn_enter_password.placeholder'), value: password, onChange: handlePasswordChange, variant: 'regular', suffix: 
+    return (jsx("div", { className: 'enter-password-view', children: jsxs("div", { className: 'enter-password-view__body', children: [jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_enter_password.title', className: 'enter-password-view__title', style: { marginBottom: '24px', textAlign: 'center' }, children: title !== null && title !== void 0 ? title : t('dyn_enter_password.title') }), jsx("div", { className: 'enter-password-view__icon-container', children: jsx(Icon, { color: 'brand-primary', children: jsx(SvgPasswordLockIcon, { width: 64, height: 64 }) }) }), jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_enter_password.description', className: 'enter-password-view__description', children: description !== null && description !== void 0 ? description : t('dyn_enter_password.description') }), jsx(Input, { id: 'enter-password-input', type: showPassword ? 'text' : 'password', label: t('dyn_enter_password.label'), placeholder: t('dyn_enter_password.placeholder'), value: password, onChange: handlePasswordChange, variant: 'regular', error: Boolean(error), message: error ? (jsxs("span", { className: 'enter-password-view__error-message', children: [jsx(SvgErrorCircleX, { width: 14, height: 14 }), error] })) : undefined, suffix: 
                     // eslint-disable-next-line react/jsx-wrap-multilines
                     jsx(ToggleVisibilityButton, { initialState: true, onClick: handleToggleVisibility }) }), jsx("div", { className: 'enter-password-view__actions', children: jsx(TypographyButton, { dataTestId: 'enter-password-continue-button', onClick: handleContinue, disabled: !password || loading, copykey: 'dyn_enter_password.button.continue', buttonVariant: 'brand-primary', typographyProps: {
                             color: 'inherit',

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

@@ -36,7 +36,7 @@ const OPTIONS = [
         value: 'c',
     },
 ];
-const SetupPasswordKnowledgeCheckView = ({ onContinue, onBack, onReviewTerms }) => {
+const SetupPasswordKnowledgeCheckView = ({ onContinue, onBack }) => {
     const { t } = reactI18next.useTranslation();
     const [selectedAnswer, setSelectedAnswer] = React.useState('');
     const [showError, setShowError] = React.useState(false);
@@ -53,31 +53,23 @@ const SetupPasswordKnowledgeCheckView = ({ onContinue, onBack, onReviewTerms })
         }
     }, [selectedAnswer, onContinue]);
     const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onBack, "data-testid": 'setup-password-knowledge-check-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.knowledge_check.title', children: t('dyn_setup_password.knowledge_check.title') }) }), jsxRuntime.jsx("div", { className: 'setup-password-knowledge-check-view', children: jsxRuntime.jsxs("div", { className: 'setup-password-knowledge-check-view__body', children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: 'setup-password-knowledge-check-view__content', children: [jsxRuntime.jsx("div", { className: 'setup-password-knowledge-check-view__icon-container', children: jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(knowledgeCheckIcon.ReactComponent, { width: 56, height: 56 }) }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', copykey: 'dyn_setup_password.knowledge_check.description', className: 'setup-password-knowledge-check-view__description', children: t('dyn_setup_password.knowledge_check.description') })] }), jsxRuntime.jsxs("div", { className: 'setup-password-knowledge-check-view__alert', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'semibold', copykey: 'dyn_setup_password.knowledge_check.question', className: 'setup-password-knowledge-check-view__question', children: t('dyn_setup_password.knowledge_check.question') }), jsxRuntime.jsx("div", { className: 'setup-password-knowledge-check-view__options', children: OPTIONS.map((option) => {
+    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.knowledge_check.title', children: t('dyn_setup_password.knowledge_check.title') }) }), jsxRuntime.jsx("div", { className: 'setup-password-knowledge-check-view', children: jsxRuntime.jsxs("div", { className: 'setup-password-knowledge-check-view__body', children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: 'setup-password-knowledge-check-view__content', children: [jsxRuntime.jsx("div", { className: 'setup-password-knowledge-check-view__icon-container', children: jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(knowledgeCheckIcon.ReactComponent, { width: 56, height: 56 }) }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', weight: 'medium', copykey: 'dyn_setup_password.knowledge_check.description', className: 'setup-password-knowledge-check-view__description', children: t('dyn_setup_password.knowledge_check.description') })] }), jsxRuntime.jsxs("div", { className: 'setup-password-knowledge-check-view__alert', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', weight: 'semibold', copykey: 'dyn_setup_password.knowledge_check.question', className: 'setup-password-knowledge-check-view__question', children: t('dyn_setup_password.knowledge_check.question') }), jsxRuntime.jsx("div", { className: 'setup-password-knowledge-check-view__options', children: OPTIONS.map((option) => {
                                                 const isSelected = selectedAnswer === option.value;
                                                 const hasError = showError && isSelected;
                                                 return (jsxRuntime.jsxs("div", { className: `setup-password-knowledge-check-view__option ${isSelected
                                                         ? 'setup-password-knowledge-check-view__option--selected'
                                                         : ''} ${hasError
                                                         ? 'setup-password-knowledge-check-view__option--error'
-                                                        : ''} ${showError
-                                                        ? 'setup-password-knowledge-check-view__option--disabled'
-                                                        : ''}`, onClick: () => {
-                                                        if (!showError) {
-                                                            handleAnswerChange({
-                                                                target: { value: option.value },
-                                                            });
-                                                        }
-                                                    }, children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: hasError
+                                                        : ''}`, onClick: () => handleAnswerChange({
+                                                        target: { value: option.value },
+                                                    }), children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: hasError
                                                                 ? 'error-1'
                                                                 : isSelected
                                                                     ? 'brand-primary'
                                                                     : 'tertiary', weight: 'bold', className: 'setup-password-knowledge-check-view__option-label', children: option.label }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', children: t(option.translationKey) })] }, option.value));
-                                            }) })] })] }), jsxRuntime.jsxs("div", { children: [showError && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Alert.Alert, { variant: 'error', icon: jsxRuntime.jsx(exclamationCircle.ReactComponent, {}), className: 'setup-password-knowledge-check-view__error', children: t('dyn_setup_password.knowledge_check.error') }), jsxRuntime.jsx("div", { className: 'setup-password-knowledge-check-view__review-button', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { onClick: onReviewTerms, copykey: 'dyn_setup_password.knowledge_check.review_terms', dataTestId: 'setup-password-knowledge-check-review-button', buttonVariant: 'brand-primary', className: 'setup-password-knowledge-check-view__alert-button', typographyProps: {
-                                                    color: 'inherit',
-                                                }, expanded: true, children: t('dyn_setup_password.knowledge_check.review_terms') }) })] })), !showError && (jsxRuntime.jsx("div", { className: 'setup-password-knowledge-check-view__actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'setup-password-knowledge-check-continue-button', onClick: handleContinue, disabled: !selectedAnswer, copykey: 'dyn_setup_password.button.confirm', buttonVariant: 'brand-primary', typographyProps: {
+                                            }) })] })] }), jsxRuntime.jsxs("div", { children: [showError && (jsxRuntime.jsx(Alert.Alert, { variant: 'error', icon: jsxRuntime.jsx(exclamationCircle.ReactComponent, {}), className: 'setup-password-knowledge-check-view__error', children: t('dyn_setup_password.knowledge_check.error') })), jsxRuntime.jsx("div", { className: 'setup-password-knowledge-check-view__actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'setup-password-knowledge-check-continue-button', onClick: handleContinue, disabled: !selectedAnswer, copykey: 'dyn_setup_password.button.confirm', buttonVariant: 'brand-primary', typographyProps: {
                                             color: 'inherit',
-                                        }, expanded: true, children: t('dyn_setup_password.button.confirm') }) }))] })] }) })] }));
+                                        }, expanded: true, children: t('dyn_setup_password.button.confirm') }) })] })] }) })] }));
 };
 
 exports.SetupPasswordKnowledgeCheckView = SetupPasswordKnowledgeCheckView;

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

@@ -2,6 +2,5 @@ import { FC } from 'react';
 export type SetupPasswordKnowledgeCheckViewProps = {
     onContinue: () => void;
     onBack: () => void;
-    onReviewTerms: () => void;
 };
 export declare const SetupPasswordKnowledgeCheckView: FC<SetupPasswordKnowledgeCheckViewProps>;

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

@@ -32,7 +32,7 @@ const OPTIONS = [
         value: 'c',
     },
 ];
-const SetupPasswordKnowledgeCheckView = ({ onContinue, onBack, onReviewTerms }) => {
+const SetupPasswordKnowledgeCheckView = ({ onContinue, onBack }) => {
     const { t } = useTranslation();
     const [selectedAnswer, setSelectedAnswer] = useState('');
     const [showError, setShowError] = useState(false);
@@ -49,31 +49,23 @@ const SetupPasswordKnowledgeCheckView = ({ onContinue, onBack, onReviewTerms })
         }
     }, [selectedAnswer, onContinue]);
     const backButton = (jsx(IconButton, { type: 'button', onClick: onBack, "data-testid": 'setup-password-knowledge-check-back-button', children: jsx(SvgChevronLeft, {}) }));
-    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.knowledge_check.title', children: t('dyn_setup_password.knowledge_check.title') }) }), jsx("div", { className: 'setup-password-knowledge-check-view', children: jsxs("div", { className: 'setup-password-knowledge-check-view__body', children: [jsxs("div", { children: [jsxs("div", { className: 'setup-password-knowledge-check-view__content', children: [jsx("div", { className: 'setup-password-knowledge-check-view__icon-container', children: jsx(Icon, { color: 'brand-primary', children: jsx(SvgKnowledgeCheckIcon, { width: 56, height: 56 }) }) }), jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', copykey: 'dyn_setup_password.knowledge_check.description', className: 'setup-password-knowledge-check-view__description', children: t('dyn_setup_password.knowledge_check.description') })] }), jsxs("div", { className: 'setup-password-knowledge-check-view__alert', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'semibold', copykey: 'dyn_setup_password.knowledge_check.question', className: 'setup-password-knowledge-check-view__question', children: t('dyn_setup_password.knowledge_check.question') }), jsx("div", { className: 'setup-password-knowledge-check-view__options', children: OPTIONS.map((option) => {
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.knowledge_check.title', children: t('dyn_setup_password.knowledge_check.title') }) }), jsx("div", { className: 'setup-password-knowledge-check-view', children: jsxs("div", { className: 'setup-password-knowledge-check-view__body', children: [jsxs("div", { children: [jsxs("div", { className: 'setup-password-knowledge-check-view__content', children: [jsx("div", { className: 'setup-password-knowledge-check-view__icon-container', children: jsx(Icon, { color: 'brand-primary', children: jsx(SvgKnowledgeCheckIcon, { width: 56, height: 56 }) }) }), jsx(Typography, { variant: 'body_small', color: 'primary', weight: 'medium', copykey: 'dyn_setup_password.knowledge_check.description', className: 'setup-password-knowledge-check-view__description', children: t('dyn_setup_password.knowledge_check.description') })] }), jsxs("div", { className: 'setup-password-knowledge-check-view__alert', children: [jsx(Typography, { variant: 'body_small', color: 'primary', weight: 'semibold', copykey: 'dyn_setup_password.knowledge_check.question', className: 'setup-password-knowledge-check-view__question', children: t('dyn_setup_password.knowledge_check.question') }), jsx("div", { className: 'setup-password-knowledge-check-view__options', children: OPTIONS.map((option) => {
                                                 const isSelected = selectedAnswer === option.value;
                                                 const hasError = showError && isSelected;
                                                 return (jsxs("div", { className: `setup-password-knowledge-check-view__option ${isSelected
                                                         ? 'setup-password-knowledge-check-view__option--selected'
                                                         : ''} ${hasError
                                                         ? 'setup-password-knowledge-check-view__option--error'
-                                                        : ''} ${showError
-                                                        ? 'setup-password-knowledge-check-view__option--disabled'
-                                                        : ''}`, onClick: () => {
-                                                        if (!showError) {
-                                                            handleAnswerChange({
-                                                                target: { value: option.value },
-                                                            });
-                                                        }
-                                                    }, children: [jsx(Typography, { variant: 'body_normal', color: hasError
+                                                        : ''}`, onClick: () => handleAnswerChange({
+                                                        target: { value: option.value },
+                                                    }), children: [jsx(Typography, { variant: 'body_normal', color: hasError
                                                                 ? 'error-1'
                                                                 : isSelected
                                                                     ? 'brand-primary'
                                                                     : 'tertiary', weight: 'bold', className: 'setup-password-knowledge-check-view__option-label', children: option.label }), jsx(Typography, { variant: 'body_small', color: 'primary', children: t(option.translationKey) })] }, option.value));
-                                            }) })] })] }), jsxs("div", { children: [showError && (jsxs(Fragment, { children: [jsx(Alert, { variant: 'error', icon: jsx(SvgExclamationCircle, {}), className: 'setup-password-knowledge-check-view__error', children: t('dyn_setup_password.knowledge_check.error') }), jsx("div", { className: 'setup-password-knowledge-check-view__review-button', children: jsx(TypographyButton, { onClick: onReviewTerms, copykey: 'dyn_setup_password.knowledge_check.review_terms', dataTestId: 'setup-password-knowledge-check-review-button', buttonVariant: 'brand-primary', className: 'setup-password-knowledge-check-view__alert-button', typographyProps: {
-                                                    color: 'inherit',
-                                                }, expanded: true, children: t('dyn_setup_password.knowledge_check.review_terms') }) })] })), !showError && (jsx("div", { className: 'setup-password-knowledge-check-view__actions', children: jsx(TypographyButton, { dataTestId: 'setup-password-knowledge-check-continue-button', onClick: handleContinue, disabled: !selectedAnswer, copykey: 'dyn_setup_password.button.confirm', buttonVariant: 'brand-primary', typographyProps: {
+                                            }) })] })] }), jsxs("div", { children: [showError && (jsx(Alert, { variant: 'error', icon: jsx(SvgExclamationCircle, {}), className: 'setup-password-knowledge-check-view__error', children: t('dyn_setup_password.knowledge_check.error') })), jsx("div", { className: 'setup-password-knowledge-check-view__actions', children: jsx(TypographyButton, { dataTestId: 'setup-password-knowledge-check-continue-button', onClick: handleContinue, disabled: !selectedAnswer, copykey: 'dyn_setup_password.button.confirm', buttonVariant: 'brand-primary', typographyProps: {
                                             color: 'inherit',
-                                        }, expanded: true, children: t('dyn_setup_password.button.confirm') }) }))] })] }) })] }));
+                                        }, expanded: true, children: t('dyn_setup_password.button.confirm') }) })] })] }) })] }));
 };
 
 export { SetupPasswordKnowledgeCheckView };

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

@@ -15,9 +15,11 @@ var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
 var setupPasswordTermsIllustration = require('../../../../shared/assets/setup-password-terms-illustration.cjs');
 require('@dynamic-labs/iconic');
 require('../../../../context/ViewContext/ViewContext.cjs');
+var settingsUtils = require('../../../../store/utils/settingsUtils/settingsUtils.cjs');
 
 const SetupPasswordTermsView = ({ onContinue, onBack, }) => {
     const { t } = reactI18next.useTranslation();
+    const appName = settingsUtils.useAppName();
     const [checkedItems, setCheckedItems] = React.useState({
         term1: false,
         term2: false,
@@ -27,8 +29,13 @@ const SetupPasswordTermsView = ({ onContinue, onBack, }) => {
         setCheckedItems((prev) => (Object.assign(Object.assign({}, prev), { [termKey]: !prev[termKey] })));
     }, []);
     const allChecked = Object.values(checkedItems).every(Boolean);
-    const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onBack, "data-testid": 'setup-password-terms-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.terms.title', children: t('dyn_setup_password.terms.title') }) }), jsxRuntime.jsx("div", { className: 'setup-password-terms-view', children: jsxRuntime.jsxs("div", { className: 'setup-password-terms-view__body', children: [jsxRuntime.jsx("div", { className: 'setup-password-terms-view__icon-container', children: jsxRuntime.jsx(setupPasswordTermsIllustration.ReactComponent, {}) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.terms.description', className: 'setup-password-terms-view__description', children: t('dyn_setup_password.terms.description') }), jsxRuntime.jsxs("div", { className: 'setup-password-terms-view__checkboxes', children: [jsxRuntime.jsxs("label", { className: 'setup-password-terms-view__checkbox-item', children: [jsxRuntime.jsx(Checkbox.Checkbox, { checked: checkedItems.term1, onChange: () => handleCheckboxChange('term1'), ariaLabel: t('dyn_setup_password.terms.checkbox_1') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_setup_password.terms.checkbox_1', children: t('dyn_setup_password.terms.checkbox_1') })] }), jsxRuntime.jsxs("label", { className: 'setup-password-terms-view__checkbox-item', children: [jsxRuntime.jsx(Checkbox.Checkbox, { checked: checkedItems.term2, onChange: () => handleCheckboxChange('term2'), ariaLabel: t('dyn_setup_password.terms.checkbox_2') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_setup_password.terms.checkbox_2', children: t('dyn_setup_password.terms.checkbox_2') })] }), jsxRuntime.jsxs("label", { className: 'setup-password-terms-view__checkbox-item', children: [jsxRuntime.jsx(Checkbox.Checkbox, { checked: checkedItems.term3, onChange: () => handleCheckboxChange('term3'), ariaLabel: t('dyn_setup_password.terms.checkbox_3') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_setup_password.terms.checkbox_3', children: t('dyn_setup_password.terms.checkbox_3') })] })] }), jsxRuntime.jsx("div", { className: 'setup-password-terms-view__actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'setup-password-terms-continue-button', onClick: onContinue, disabled: !allChecked, copykey: 'dyn_setup_password.button.continue', buttonVariant: 'brand-primary', typographyProps: {
+    const handleBack = React.useCallback(() => {
+        onBack === null || onBack === void 0 ? void 0 : onBack();
+    }, [onBack]);
+    const backButton = onBack !== undefined ? (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: handleBack, "data-testid": 'setup-password-terms-back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })) : undefined;
+    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.terms.title', children: t('dyn_setup_password.terms.title') }) }), jsxRuntime.jsx("div", { className: 'setup-password-terms-view', children: jsxRuntime.jsxs("div", { className: 'setup-password-terms-view__body', children: [jsxRuntime.jsx("div", { className: 'setup-password-terms-view__icon-container', children: jsxRuntime.jsx(setupPasswordTermsIllustration.ReactComponent, {}) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.terms.description', className: 'setup-password-terms-view__description', children: t('dyn_setup_password.terms.description') }), jsxRuntime.jsxs("div", { className: 'setup-password-terms-view__checkboxes', children: [jsxRuntime.jsxs("label", { className: 'setup-password-terms-view__checkbox-item', children: [jsxRuntime.jsx(Checkbox.Checkbox, { checked: checkedItems.term1, onChange: () => handleCheckboxChange('term1'), ariaLabel: t('dyn_setup_password.terms.checkbox_1') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_setup_password.terms.checkbox_1', children: t('dyn_setup_password.terms.checkbox_1') })] }), jsxRuntime.jsxs("label", { className: 'setup-password-terms-view__checkbox-item', children: [jsxRuntime.jsx(Checkbox.Checkbox, { checked: checkedItems.term2, onChange: () => handleCheckboxChange('term2'), ariaLabel: t('dyn_setup_password.terms.checkbox_2', {
+                                                appName,
+                                            }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_setup_password.terms.checkbox_2', children: t('dyn_setup_password.terms.checkbox_2', { appName }) })] }), jsxRuntime.jsxs("label", { className: 'setup-password-terms-view__checkbox-item', children: [jsxRuntime.jsx(Checkbox.Checkbox, { checked: checkedItems.term3, onChange: () => handleCheckboxChange('term3'), ariaLabel: t('dyn_setup_password.terms.checkbox_3') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_setup_password.terms.checkbox_3', children: t('dyn_setup_password.terms.checkbox_3') })] })] }), jsxRuntime.jsx("div", { className: 'setup-password-terms-view__actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'setup-password-terms-continue-button', onClick: onContinue, disabled: !allChecked, copykey: 'dyn_setup_password.button.continue', buttonVariant: 'brand-primary', typographyProps: {
                                     color: 'inherit',
                                 }, expanded: true, children: t('dyn_setup_password.button.continue') }) })] }) })] }));
 };

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

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 export type SetupPasswordTermsViewProps = {
     onContinue: () => void;
-    onBack: () => void;
+    onBack?: () => void;
 };
 export declare const SetupPasswordTermsView: FC<SetupPasswordTermsViewProps>;

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

@@ -11,9 +11,11 @@ import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chev
 import { ReactComponent as SvgSetupPasswordTermsIllustration } from '../../../../shared/assets/setup-password-terms-illustration.js';
 import '@dynamic-labs/iconic';
 import '../../../../context/ViewContext/ViewContext.js';
+import { useAppName } from '../../../../store/utils/settingsUtils/settingsUtils.js';
 
 const SetupPasswordTermsView = ({ onContinue, onBack, }) => {
     const { t } = useTranslation();
+    const appName = useAppName();
     const [checkedItems, setCheckedItems] = useState({
         term1: false,
         term2: false,
@@ -23,8 +25,13 @@ const SetupPasswordTermsView = ({ onContinue, onBack, }) => {
         setCheckedItems((prev) => (Object.assign(Object.assign({}, prev), { [termKey]: !prev[termKey] })));
     }, []);
     const allChecked = Object.values(checkedItems).every(Boolean);
-    const backButton = (jsx(IconButton, { type: 'button', onClick: onBack, "data-testid": 'setup-password-terms-back-button', children: jsx(SvgChevronLeft, {}) }));
-    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.terms.title', children: t('dyn_setup_password.terms.title') }) }), jsx("div", { className: 'setup-password-terms-view', children: jsxs("div", { className: 'setup-password-terms-view__body', children: [jsx("div", { className: 'setup-password-terms-view__icon-container', children: jsx(SvgSetupPasswordTermsIllustration, {}) }), jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.terms.description', className: 'setup-password-terms-view__description', children: t('dyn_setup_password.terms.description') }), jsxs("div", { className: 'setup-password-terms-view__checkboxes', children: [jsxs("label", { className: 'setup-password-terms-view__checkbox-item', children: [jsx(Checkbox, { checked: checkedItems.term1, onChange: () => handleCheckboxChange('term1'), ariaLabel: t('dyn_setup_password.terms.checkbox_1') }), jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_setup_password.terms.checkbox_1', children: t('dyn_setup_password.terms.checkbox_1') })] }), jsxs("label", { className: 'setup-password-terms-view__checkbox-item', children: [jsx(Checkbox, { checked: checkedItems.term2, onChange: () => handleCheckboxChange('term2'), ariaLabel: t('dyn_setup_password.terms.checkbox_2') }), jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_setup_password.terms.checkbox_2', children: t('dyn_setup_password.terms.checkbox_2') })] }), jsxs("label", { className: 'setup-password-terms-view__checkbox-item', children: [jsx(Checkbox, { checked: checkedItems.term3, onChange: () => handleCheckboxChange('term3'), ariaLabel: t('dyn_setup_password.terms.checkbox_3') }), jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_setup_password.terms.checkbox_3', children: t('dyn_setup_password.terms.checkbox_3') })] })] }), jsx("div", { className: 'setup-password-terms-view__actions', children: jsx(TypographyButton, { dataTestId: 'setup-password-terms-continue-button', onClick: onContinue, disabled: !allChecked, copykey: 'dyn_setup_password.button.continue', buttonVariant: 'brand-primary', typographyProps: {
+    const handleBack = useCallback(() => {
+        onBack === null || onBack === void 0 ? void 0 : onBack();
+    }, [onBack]);
+    const backButton = onBack !== undefined ? (jsx(IconButton, { type: 'button', onClick: handleBack, "data-testid": 'setup-password-terms-back-button', children: jsx(SvgChevronLeft, {}) })) : undefined;
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.terms.title', children: t('dyn_setup_password.terms.title') }) }), jsx("div", { className: 'setup-password-terms-view', children: jsxs("div", { className: 'setup-password-terms-view__body', children: [jsx("div", { className: 'setup-password-terms-view__icon-container', children: jsx(SvgSetupPasswordTermsIllustration, {}) }), jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.terms.description', className: 'setup-password-terms-view__description', children: t('dyn_setup_password.terms.description') }), jsxs("div", { className: 'setup-password-terms-view__checkboxes', children: [jsxs("label", { className: 'setup-password-terms-view__checkbox-item', children: [jsx(Checkbox, { checked: checkedItems.term1, onChange: () => handleCheckboxChange('term1'), ariaLabel: t('dyn_setup_password.terms.checkbox_1') }), jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_setup_password.terms.checkbox_1', children: t('dyn_setup_password.terms.checkbox_1') })] }), jsxs("label", { className: 'setup-password-terms-view__checkbox-item', children: [jsx(Checkbox, { checked: checkedItems.term2, onChange: () => handleCheckboxChange('term2'), ariaLabel: t('dyn_setup_password.terms.checkbox_2', {
+                                                appName,
+                                            }) }), jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_setup_password.terms.checkbox_2', children: t('dyn_setup_password.terms.checkbox_2', { appName }) })] }), jsxs("label", { className: 'setup-password-terms-view__checkbox-item', children: [jsx(Checkbox, { checked: checkedItems.term3, onChange: () => handleCheckboxChange('term3'), ariaLabel: t('dyn_setup_password.terms.checkbox_3') }), jsx(Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_setup_password.terms.checkbox_3', children: t('dyn_setup_password.terms.checkbox_3') })] })] }), jsx("div", { className: 'setup-password-terms-view__actions', children: jsx(TypographyButton, { dataTestId: 'setup-password-terms-continue-button', onClick: onContinue, disabled: !allChecked, copykey: 'dyn_setup_password.button.continue', buttonVariant: 'brand-primary', typographyProps: {
                                     color: 'inherit',
                                 }, expanded: true, children: t('dyn_setup_password.button.continue') }) })] }) })] }));
 };

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

@@ -17,7 +17,7 @@ var SetupPasswordSuccessView = require('../SetupPasswordSuccessView/SetupPasswor
 var SetupPasswordTermsView = require('../SetupPasswordTermsView/SetupPasswordTermsView.cjs');
 
 const SetupPasswordView = ({ onComplete, onCancel, skipKnowledgeCheck = false, }) => {
-    const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
+    const { setDynamicWidgetView, setIsOpen } = DynamicWidgetContext.useWidgetContext();
     const [currentStep, setCurrentStep] = React.useState('terms');
     const [password, setPassword] = React.useState('');
     const goToAccountAndSecurity = React.useCallback(() => {
@@ -58,33 +58,38 @@ const SetupPasswordView = ({ onComplete, onCancel, skipKnowledgeCheck = false, }
     const handleKnowledgeCheckBack = React.useCallback(() => {
         setCurrentStep('confirm');
     }, []);
-    const handleKnowledgeCheckReviewTerms = React.useCallback(() => {
-        setCurrentStep('terms');
-    }, []);
     const goToWallets = React.useCallback(() => {
         setDynamicWidgetView('wallets');
     }, [setDynamicWidgetView]);
     const handleSuccess = React.useCallback(() => {
         onComplete(password);
         // Navigate to appropriate view based on where we came from:
-        // - If onCancel was provided (auto-create flow), go to wallets view
+        // - If onCancel was provided (auto-create flow), go to wallets then close widget
         // - If onCancel wasn't provided (settings flow), go to account settings
         if (onCancel) {
             goToWallets();
+            setIsOpen(false);
         }
         else {
             goToAccountAndSecurity();
         }
-    }, [onComplete, password, onCancel, goToAccountAndSecurity, goToWallets]);
+    }, [
+        onComplete,
+        password,
+        onCancel,
+        goToAccountAndSecurity,
+        goToWallets,
+        setIsOpen,
+    ]);
     switch (currentStep) {
         case 'terms':
-            return (jsxRuntime.jsx(SetupPasswordTermsView.SetupPasswordTermsView, { onContinue: handleTermsContinue, onBack: handleCancel }));
+            return (jsxRuntime.jsx(SetupPasswordTermsView.SetupPasswordTermsView, { onContinue: handleTermsContinue, onBack: onCancel ? undefined : handleCancel }));
         case 'enter':
             return (jsxRuntime.jsx(SetupPasswordEnterView.SetupPasswordEnterView, { onContinue: handleEnterContinue, onBack: handleEnterBack }));
         case 'confirm':
             return (jsxRuntime.jsx(SetupPasswordConfirmView.SetupPasswordConfirmView, { password: password, onContinue: handleConfirmContinue, onBack: handleConfirmBack }));
         case 'knowledge-check':
-            return (jsxRuntime.jsx(SetupPasswordKnowledgeCheckView.SetupPasswordKnowledgeCheckView, { onContinue: handleKnowledgeCheckContinue, onBack: handleKnowledgeCheckBack, onReviewTerms: handleKnowledgeCheckReviewTerms }));
+            return (jsxRuntime.jsx(SetupPasswordKnowledgeCheckView.SetupPasswordKnowledgeCheckView, { onContinue: handleKnowledgeCheckContinue, onBack: handleKnowledgeCheckBack }));
         case 'success':
             return jsxRuntime.jsx(SetupPasswordSuccessView.SetupPasswordSuccessView, { onDone: handleSuccess });
         default:

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

@@ -13,7 +13,7 @@ import { SetupPasswordSuccessView } from '../SetupPasswordSuccessView/SetupPassw
 import { SetupPasswordTermsView } from '../SetupPasswordTermsView/SetupPasswordTermsView.js';
 
 const SetupPasswordView = ({ onComplete, onCancel, skipKnowledgeCheck = false, }) => {
-    const { setDynamicWidgetView } = useWidgetContext();
+    const { setDynamicWidgetView, setIsOpen } = useWidgetContext();
     const [currentStep, setCurrentStep] = useState('terms');
     const [password, setPassword] = useState('');
     const goToAccountAndSecurity = useCallback(() => {
@@ -54,33 +54,38 @@ const SetupPasswordView = ({ onComplete, onCancel, skipKnowledgeCheck = false, }
     const handleKnowledgeCheckBack = useCallback(() => {
         setCurrentStep('confirm');
     }, []);
-    const handleKnowledgeCheckReviewTerms = useCallback(() => {
-        setCurrentStep('terms');
-    }, []);
     const goToWallets = useCallback(() => {
         setDynamicWidgetView('wallets');
     }, [setDynamicWidgetView]);
     const handleSuccess = useCallback(() => {
         onComplete(password);
         // Navigate to appropriate view based on where we came from:
-        // - If onCancel was provided (auto-create flow), go to wallets view
+        // - If onCancel was provided (auto-create flow), go to wallets then close widget
         // - If onCancel wasn't provided (settings flow), go to account settings
         if (onCancel) {
             goToWallets();
+            setIsOpen(false);
         }
         else {
             goToAccountAndSecurity();
         }
-    }, [onComplete, password, onCancel, goToAccountAndSecurity, goToWallets]);
+    }, [
+        onComplete,
+        password,
+        onCancel,
+        goToAccountAndSecurity,
+        goToWallets,
+        setIsOpen,
+    ]);
     switch (currentStep) {
         case 'terms':
-            return (jsx(SetupPasswordTermsView, { onContinue: handleTermsContinue, onBack: handleCancel }));
+            return (jsx(SetupPasswordTermsView, { onContinue: handleTermsContinue, onBack: onCancel ? undefined : handleCancel }));
         case 'enter':
             return (jsx(SetupPasswordEnterView, { onContinue: handleEnterContinue, onBack: handleEnterBack }));
         case 'confirm':
             return (jsx(SetupPasswordConfirmView, { password: password, onContinue: handleConfirmContinue, onBack: handleConfirmBack }));
         case 'knowledge-check':
-            return (jsx(SetupPasswordKnowledgeCheckView, { onContinue: handleKnowledgeCheckContinue, onBack: handleKnowledgeCheckBack, onReviewTerms: handleKnowledgeCheckReviewTerms }));
+            return (jsx(SetupPasswordKnowledgeCheckView, { onContinue: handleKnowledgeCheckContinue, onBack: handleKnowledgeCheckBack }));
         case 'success':
             return jsx(SetupPasswordSuccessView, { onDone: handleSuccess });
         default:

package/src/lib/utils/hooks/useGetPasswordForSigning/index.d.ts

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

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

@@ -1,16 +0,0 @@
-'use client'
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _tslib = require('../../../../../_virtual/_tslib.cjs');
-var React = require('react');
-var usePromptWalletUnlock = require('../usePromptWalletUnlock/usePromptWalletUnlock.cjs');
-
-const useGetPasswordForSigning = () => {
-    const promptWalletUnlock = usePromptWalletUnlock.usePromptWalletUnlock();
-    const getPasswordForSigning = React.useCallback((_a) => _tslib.__awaiter(void 0, [_a], void 0, function* ({ accountAddress, chainName, }) { return promptWalletUnlock({ accountAddress, chainName }); }), [promptWalletUnlock]);
-    return getPasswordForSigning;
-};
-
-exports.useGetPasswordForSigning = useGetPasswordForSigning;

package/src/lib/utils/hooks/useGetPasswordForSigning/useGetPasswordForSigning.d.ts

@@ -1,5 +0,0 @@
-export type GetPasswordForSigningProps = {
-    accountAddress: string;
-    chainName: string;
-};
-export declare const useGetPasswordForSigning: () => ({ accountAddress, chainName, }: GetPasswordForSigningProps) => Promise<string | undefined>;

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

@@ -1,12 +0,0 @@
-'use client'
-import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useCallback } from 'react';
-import { usePromptWalletUnlock } from '../usePromptWalletUnlock/usePromptWalletUnlock.js';
-
-const useGetPasswordForSigning = () => {
-    const promptWalletUnlock = usePromptWalletUnlock();
-    const getPasswordForSigning = useCallback((_a) => __awaiter(void 0, [_a], void 0, function* ({ accountAddress, chainName, }) { return promptWalletUnlock({ accountAddress, chainName }); }), [promptWalletUnlock]);
-    return getPasswordForSigning;
-};
-
-export { useGetPasswordForSigning };