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

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

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

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

@@ -0,0 +1,33 @@
+'use client'
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Checkbox } from '../../../../components/Checkbox/Checkbox.js';
+import { Icon } from '../../../../components/Icon/Icon.js';
+import { IconButton } from '../../../../components/IconButton/IconButton.js';
+import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.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 '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgWarningCircleOrange } from '../../../../shared/assets/warning-circle-orange.js';
+
+const SetupPasswordTermsView = ({ onContinue, onBack, }) => {
+    const { t } = useTranslation();
+    const [checkedItems, setCheckedItems] = useState({
+        term1: false,
+        term2: false,
+        term3: false,
+    });
+    const handleCheckboxChange = useCallback((termKey) => {
+        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(Icon, { color: 'brand-primary', children: jsx(SvgWarningCircleOrange, { width: 64, height: 64 }) }) }), 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: {
+                                    color: 'inherit',
+                                }, expanded: true, children: t('dyn_setup_password.button.continue') }) })] }) })] }));
+};
+
+export { SetupPasswordTermsView };

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

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

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

@@ -0,0 +1,76 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
+var SetupPasswordTermsView = require('../SetupPasswordTermsView/SetupPasswordTermsView.cjs');
+var SetupPasswordEnterView = require('../SetupPasswordEnterView/SetupPasswordEnterView.cjs');
+require('../../../../../../_virtual/_tslib.cjs');
+require('@dynamic-labs/utils');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+var SetupPasswordConfirmView = require('../SetupPasswordConfirmView/SetupPasswordConfirmView.cjs');
+var SetupPasswordKnowledgeCheckView = require('../SetupPasswordKnowledgeCheckView/SetupPasswordKnowledgeCheckView.cjs');
+var SetupPasswordSuccessView = require('../SetupPasswordSuccessView/SetupPasswordSuccessView.cjs');
+
+const SetupPasswordView = ({ onComplete, skipKnowledgeCheck = false, }) => {
+    const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
+    const [currentStep, setCurrentStep] = React.useState('terms');
+    const [password, setPassword] = React.useState('');
+    const goToAccountAndSecurity = React.useCallback(() => {
+        setDynamicWidgetView('account-and-security-settings');
+    }, [setDynamicWidgetView]);
+    const handleTermsContinue = React.useCallback(() => {
+        setCurrentStep('enter');
+    }, []);
+    const handleEnterContinue = React.useCallback((newPassword) => {
+        setPassword(newPassword);
+        setCurrentStep('confirm');
+    }, []);
+    const handleEnterBack = React.useCallback(() => {
+        setCurrentStep('terms');
+    }, []);
+    const handleConfirmContinue = React.useCallback(() => {
+        if (skipKnowledgeCheck) {
+            setCurrentStep('success');
+        }
+        else {
+            setCurrentStep('knowledge-check');
+        }
+    }, [skipKnowledgeCheck]);
+    const handleConfirmBack = React.useCallback(() => {
+        setCurrentStep('enter');
+    }, []);
+    const handleKnowledgeCheckContinue = React.useCallback(() => {
+        setCurrentStep('success');
+    }, []);
+    const handleKnowledgeCheckBack = React.useCallback(() => {
+        setCurrentStep('confirm');
+    }, []);
+    const handleKnowledgeCheckReviewTerms = React.useCallback(() => {
+        setCurrentStep('terms');
+    }, []);
+    const handleSuccess = React.useCallback(() => {
+        onComplete(password);
+        goToAccountAndSecurity();
+    }, [onComplete, password, goToAccountAndSecurity]);
+    switch (currentStep) {
+        case 'terms':
+            return (jsxRuntime.jsx(SetupPasswordTermsView.SetupPasswordTermsView, { onContinue: handleTermsContinue, onBack: goToAccountAndSecurity }));
+        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 }));
+        case 'success':
+            return jsxRuntime.jsx(SetupPasswordSuccessView.SetupPasswordSuccessView, { onDone: handleSuccess });
+        default:
+            return null;
+    }
+};
+
+exports.SetupPasswordView = SetupPasswordView;

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

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export type SetupPasswordViewProps = {
+    onComplete: (password: string) => void;
+    skipKnowledgeCheck?: boolean;
+};
+export declare const SetupPasswordView: FC<SetupPasswordViewProps>;

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

@@ -0,0 +1,72 @@
+'use client'
+import { jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
+import { SetupPasswordTermsView } from '../SetupPasswordTermsView/SetupPasswordTermsView.js';
+import { SetupPasswordEnterView } from '../SetupPasswordEnterView/SetupPasswordEnterView.js';
+import '../../../../../../_virtual/_tslib.js';
+import '@dynamic-labs/utils';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+import { SetupPasswordConfirmView } from '../SetupPasswordConfirmView/SetupPasswordConfirmView.js';
+import { SetupPasswordKnowledgeCheckView } from '../SetupPasswordKnowledgeCheckView/SetupPasswordKnowledgeCheckView.js';
+import { SetupPasswordSuccessView } from '../SetupPasswordSuccessView/SetupPasswordSuccessView.js';
+
+const SetupPasswordView = ({ onComplete, skipKnowledgeCheck = false, }) => {
+    const { setDynamicWidgetView } = useWidgetContext();
+    const [currentStep, setCurrentStep] = useState('terms');
+    const [password, setPassword] = useState('');
+    const goToAccountAndSecurity = useCallback(() => {
+        setDynamicWidgetView('account-and-security-settings');
+    }, [setDynamicWidgetView]);
+    const handleTermsContinue = useCallback(() => {
+        setCurrentStep('enter');
+    }, []);
+    const handleEnterContinue = useCallback((newPassword) => {
+        setPassword(newPassword);
+        setCurrentStep('confirm');
+    }, []);
+    const handleEnterBack = useCallback(() => {
+        setCurrentStep('terms');
+    }, []);
+    const handleConfirmContinue = useCallback(() => {
+        if (skipKnowledgeCheck) {
+            setCurrentStep('success');
+        }
+        else {
+            setCurrentStep('knowledge-check');
+        }
+    }, [skipKnowledgeCheck]);
+    const handleConfirmBack = useCallback(() => {
+        setCurrentStep('enter');
+    }, []);
+    const handleKnowledgeCheckContinue = useCallback(() => {
+        setCurrentStep('success');
+    }, []);
+    const handleKnowledgeCheckBack = useCallback(() => {
+        setCurrentStep('confirm');
+    }, []);
+    const handleKnowledgeCheckReviewTerms = useCallback(() => {
+        setCurrentStep('terms');
+    }, []);
+    const handleSuccess = useCallback(() => {
+        onComplete(password);
+        goToAccountAndSecurity();
+    }, [onComplete, password, goToAccountAndSecurity]);
+    switch (currentStep) {
+        case 'terms':
+            return (jsx(SetupPasswordTermsView, { onContinue: handleTermsContinue, onBack: goToAccountAndSecurity }));
+        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 }));
+        case 'success':
+            return jsx(SetupPasswordSuccessView, { onDone: handleSuccess });
+        default:
+            return null;
+    }
+};
+
+export { SetupPasswordView };

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

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

package/src/lib/widgets/DynamicWidget/views/WaasBackupView/WaasBackupInfoView.cjs

@@ -13,8 +13,8 @@ var Typography = require('../../../../components/Typography/Typography.cjs');
 var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
 var cautionTriangle = require('../../../../shared/assets/caution-triangle.cjs');
 var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
-require('@dynamic-labs/iconic');
 var filledQuestionMark = require('../../../../shared/assets/filled-question-mark.cjs');
+require('@dynamic-labs/iconic');
 
 const WaasBackupInfoView = () => {
     const { goBack } = ViewContext.useViewContext();

package/src/lib/widgets/DynamicWidget/views/WaasBackupView/WaasBackupInfoView.js

@@ -9,8 +9,8 @@ import { Typography } from '../../../../components/Typography/Typography.js';
 import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
 import { ReactComponent as SvgCautionTriangle } from '../../../../shared/assets/caution-triangle.js';
 import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
-import '@dynamic-labs/iconic';
 import { ReactComponent as SvgFilledQuestionMark } from '../../../../shared/assets/filled-question-mark.js';
+import '@dynamic-labs/iconic';
 
 const WaasBackupInfoView = () => {
     const { goBack } = useViewContext();

package/src/lib/widgets/DynamicWidget/views/WaasBackupView/WaasBackupSuccessView.cjs

@@ -15,10 +15,10 @@ require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
+var backupWaas = require('../../../../shared/assets/backup-waas.cjs');
 var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
 var questionMark = require('../../../../shared/assets/question-mark.cjs');
 var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
-var backupWaas = require('../../../../shared/assets/backup-waas.cjs');
 require('../../../../shared/logger.cjs');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');

package/src/lib/widgets/DynamicWidget/views/WaasBackupView/WaasBackupSuccessView.js

@@ -11,10 +11,10 @@ import '../../../../context/DynamicContext/DynamicContext.js';
 import '../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
+import { ReactComponent as SvgBackupWaas } from '../../../../shared/assets/backup-waas.js';
 import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
 import { ReactComponent as SvgQuestionMark } from '../../../../shared/assets/question-mark.js';
 import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
-import { ReactComponent as SvgBackupWaas } from '../../../../shared/assets/backup-waas.js';
 import '../../../../shared/logger.js';
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';

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

@@ -16,10 +16,10 @@ require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
+var backupWaas = require('../../../../shared/assets/backup-waas.cjs');
 var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
 var questionMark = require('../../../../shared/assets/question-mark.cjs');
 var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
-var backupWaas = require('../../../../shared/assets/backup-waas.cjs');
 require('../../../../shared/logger.cjs');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');

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

@@ -12,10 +12,10 @@ import '../../../../context/DynamicContext/DynamicContext.js';
 import '../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
+import { ReactComponent as SvgBackupWaas } from '../../../../shared/assets/backup-waas.js';
 import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
 import { ReactComponent as SvgQuestionMark } from '../../../../shared/assets/question-mark.js';
 import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
-import { ReactComponent as SvgBackupWaas } from '../../../../shared/assets/backup-waas.js';
 import '../../../../shared/logger.js';
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';

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

@@ -6,6 +6,12 @@ export { ManagePasskeysWidgetView } from './ManagePasskeysWidgetView';
 export { SettingsView } from './SettingsView';
 export { AccountAndSecuritySettingsView } from './AccountAndSecuritySettingsView';
 export { SessionManagementView } from './SessionManagementView';
+export { SetupPasswordView } from './SetupPasswordView';
+export { SetupPasswordTermsView } from './SetupPasswordTermsView';
+export { SetupPasswordEnterView } from './SetupPasswordEnterView';
+export { SetupPasswordConfirmView } from './SetupPasswordConfirmView';
+export { SetupPasswordKnowledgeCheckView } from './SetupPasswordKnowledgeCheckView';
+export { SetupPasswordSuccessView } from './SetupPasswordSuccessView';
 export { WalletsDelegatedSettingsView } from './WalletsDelegatedSettingsView';
 export { WaasBackupView } from './WaasBackupView';
 export { WaasBackupInfoView } from './WaasBackupView';