@dynamic-labs/sdk-react-core 3.0.0-alpha.34 → 3.0.0-alpha.36

package/src/lib/views/MfaRecoveryView/MfaRecoveryView.js

@@ -1,6 +1,6 @@
 'use client'
 import { __awaiter } from '../../../../_virtual/_tslib.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import '../../components/Accordion/components/AccordionItem/AccordionItem.js';
@@ -19,6 +19,7 @@ import '../../utils/constants/values.js';
 import '../../shared/utils/classes/storage/localStorage.js';
 import '../../shared/utils/classes/storage/sessionStorage.js';
 import '../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
@@ -26,6 +27,7 @@ import 'react-international-phone';
 import '../../config/ApiEndpoint.js';
 import '@dynamic-labs/store';
 import '../../locale/locale.js';
+import { isValidMfaRecoveryCode } from '../../utils/functions/isValidMfaRecoveryCode/isValidMfaRecoveryCode.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../context/UserWalletsContext/UserWalletsContext.js';
@@ -82,7 +84,6 @@ import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/Secondary
 import '@hcaptcha/react-hcaptcha';
 import { useMfa } from '../../utils/hooks/useMfa/useMfa.js';
 import '../../context/IpConfigurationContext/IpConfigurationContext.js';
-import { validateMfaRecoveryCode } from '../../utils/functions/validateMfaRecoveryCode/validateMfaRecoveryCode.js';
 import '../../context/SendBalanceContext/SendBalanceContext.js';
 import '../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
 import '../../context/ConnectWithOtpContext/constants.js';
@@ -92,36 +93,35 @@ import '../../components/InlineWidget/InlineWidget.js';
 import 'qrcode';
 
 const MfaRecoveryView = () => {
+    var _a;
     const { t } = useTranslation();
+    const { projectSettings } = useInternalDynamicContext();
     const { authRecoveryCode } = useMfa();
     const [code, setCode] = useState('');
-    const [isValid, setIsValid] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState('');
-    const openHelp = () => undefined;
+    const supportEmail = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general) === null || _a === void 0 ? void 0 : _a.supportEmail;
     const handleRecovery = () => __awaiter(void 0, void 0, void 0, function* () {
         if (!code) {
-            setIsValid(false);
             return;
         }
         try {
+            setIsLoading(true);
             yield authRecoveryCode(code);
         }
         catch (e) {
             setError(e.message || 'Something went wrong');
         }
+        finally {
+            setIsLoading(false);
+        }
     });
     const handleCodeChanged = (event) => {
         const inputCode = event.target.value;
         setCode(inputCode);
-        if (validateMfaRecoveryCode(inputCode)) {
-            setIsValid(true);
-        }
-        else {
-            setIsValid(false);
-            setError('');
-        }
+        setError('');
     };
-    return (jsxs("div", { className: 'mfa-recovery-view', children: [error && jsx(ErrorContainer, { children: error }), !error && !isValid && (jsx(IconWithSpinner, { Icon: MfaRecoveryScreenIcon, isSpinning: !error && !isValid, iconSize: 96 })), jsx("div", { className: 'mfa-recovery-view__body', children: jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_mfa.recovery_view.body') }) }), jsxs("div", { className: 'mfa-recovery-view__actions', children: [jsx(Input, { id: 'mfa-recovery-input', "data-testid": 'mfa-recovery-input', label: t('dyn_mfa.recovery_view.input_label'), onChange: handleCodeChanged, value: code }), jsx(Button, { expanded: true, buttonVariant: 'brand-primary', disabled: !isValid, onClick: handleRecovery, dataTestId: 'mfa-recovery-submit', children: jsx(Typography, { children: t('dyn_mfa.recovery_view.button_label') }) })] }), jsxs("div", { className: 'mfa-recovery-view__get-help', children: [jsx(Typography, { variant: 'body_small', color: 'secondary', children: t('dyn_mfa.recovery_view.get_help.description') }), jsx("button", { onClick: openHelp, children: jsx(Typography, { variant: 'body_small', color: 'link', children: t('dyn_mfa.recovery_view.get_help.button_label') }) })] })] }));
+    return (jsxs(Fragment, { children: [error && jsx(ErrorContainer, { children: error }), jsxs("div", { className: 'mfa-recovery-view', children: [jsx(IconWithSpinner, { Icon: MfaRecoveryScreenIcon, isSpinning: isLoading, iconSize: 96 }), jsx("div", { className: 'mfa-recovery-view__body', children: jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_mfa.recovery_view.body') }) }), jsxs("div", { className: 'mfa-recovery-view__actions', children: [jsx(Input, { id: 'mfa-recovery-input', "data-testid": 'mfa-recovery-input', label: t('dyn_mfa.recovery_view.input_label'), onChange: handleCodeChanged, value: code }), jsx(Button, { expanded: true, buttonVariant: 'brand-primary', disabled: isLoading || !isValidMfaRecoveryCode(code), onClick: handleRecovery, dataTestId: 'mfa-recovery-submit', children: jsx(Typography, { children: t('dyn_mfa.recovery_view.button_label') }) })] }), supportEmail && (jsxs("div", { className: 'mfa-recovery-view__get-help', children: [jsx(Typography, { variant: 'body_small', color: 'secondary', children: t('dyn_mfa.recovery_view.get_help.description') }), jsx(Typography, { variant: 'body_small', color: 'link', children: jsx("a", { href: `mailto:${supportEmail}`, children: t('dyn_mfa.recovery_view.get_help.button_label') }) })] }))] })] }));
 };
 
 export { MfaRecoveryView };

package/src/lib/views/MfaSecureDeviceView/MfaSecureDeviceView.cjs

@@ -107,7 +107,7 @@ const MfaSecureDeviceView = ({ type }) => {
         const onMfaVerificationBackClick = () => {
             setView('mfa-secure-device', { type });
         };
-        setView('mfa-verification', { type }, {
+        setView('mfa-verification', { showBackButton: true, type }, {
             onBackClick: onMfaVerificationBackClick,
         });
     };

package/src/lib/views/MfaSecureDeviceView/MfaSecureDeviceView.js

@@ -103,7 +103,7 @@ const MfaSecureDeviceView = ({ type }) => {
         const onMfaVerificationBackClick = () => {
             setView('mfa-secure-device', { type });
         };
-        setView('mfa-verification', { type }, {
+        setView('mfa-verification', { showBackButton: true, type }, {
             onBackClick: onMfaVerificationBackClick,
         });
     };

package/src/lib/views/MfaVerificationView/MfaVerificationView.cjs

@@ -51,6 +51,7 @@ require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
 require('../../components/Alert/Alert.cjs');
+var TextButton = require('../../components/TextButton/TextButton.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../components/IconButton/IconButton.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
@@ -93,7 +94,7 @@ require('../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
 require('../../context/ConnectWithOtpContext/constants.cjs');
 require('../../context/ReinitializeContext/ReinitializeContextProvider.cjs');
 
-const MfaVerificationView = ({ type }) => {
+const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = false, }) => {
     const { t } = reactI18next.useTranslation();
     const { userWithMissingInfo } = useDynamicContext.useDynamicContext();
     const { setView } = ViewContext.useViewContext();
@@ -120,7 +121,14 @@ const MfaVerificationView = ({ type }) => {
     const onSubmit = (code) => {
         setCode(code);
     };
-    return (jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { MainIcon: passwordHero.ReactComponent, error: error, hideHeader: true, isLoading: isLoading, onPinComplete: onSubmit, isValid: Boolean(isValid), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body') }));
+    const onClickBack = () => {
+        if (!isInitialSetup) {
+            setView('mfa-choose-device', { isInitialSetup });
+            return;
+        }
+        setView('mfa-secure-device', { type });
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { MainIcon: passwordHero.ReactComponent, error: error, isLoading: isLoading, onPinComplete: onSubmit, isValid: Boolean(isValid), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body'), onClickBack: showBackButton ? onClickBack : undefined }), !isInitialSetup && (jsxRuntime.jsx("div", { className: 'mfa-verification-view__choose-another-method', children: jsxRuntime.jsx(TextButton.TextButton, { className: 'mfa-verification-view__choose-another-method-button', onClick: () => setView('mfa-choose-device', { isInitialSetup }), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) }))] }));
 };
 
 exports.MfaVerificationView = MfaVerificationView;

package/src/lib/views/MfaVerificationView/MfaVerificationView.d.ts

@@ -2,5 +2,7 @@
 import { MFADeviceType } from '@dynamic-labs/sdk-api-core';
 export type MfaVerificationViewProps = {
     type?: MFADeviceType;
+    isInitialSetup?: boolean;
+    showBackButton?: boolean;
 };
-export declare const MfaVerificationView: ({ type }: MfaVerificationViewProps) => JSX.Element;
+export declare const MfaVerificationView: ({ type, isInitialSetup, showBackButton, }: MfaVerificationViewProps) => JSX.Element;

package/src/lib/views/MfaVerificationView/MfaVerificationView.js

@@ -1,6 +1,6 @@
 'use client'
 import { __awaiter } from '../../../../_virtual/_tslib.js';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DynamicError } from '@dynamic-labs/utils';
@@ -47,6 +47,7 @@ import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import '../../components/Alert/Alert.js';
+import { TextButton } from '../../components/TextButton/TextButton.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../components/IconButton/IconButton.js';
 import '../../components/InlineWidget/InlineWidget.js';
@@ -89,7 +90,7 @@ import '../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
 import '../../context/ConnectWithOtpContext/constants.js';
 import '../../context/ReinitializeContext/ReinitializeContextProvider.js';
 
-const MfaVerificationView = ({ type }) => {
+const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = false, }) => {
     const { t } = useTranslation();
     const { userWithMissingInfo } = useDynamicContext();
     const { setView } = useViewContext();
@@ -116,7 +117,14 @@ const MfaVerificationView = ({ type }) => {
     const onSubmit = (code) => {
         setCode(code);
     };
-    return (jsx(OTPVerificationView, { MainIcon: SvgPasswordHero, error: error, hideHeader: true, isLoading: isLoading, onPinComplete: onSubmit, isValid: Boolean(isValid), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body') }));
+    const onClickBack = () => {
+        if (!isInitialSetup) {
+            setView('mfa-choose-device', { isInitialSetup });
+            return;
+        }
+        setView('mfa-secure-device', { type });
+    };
+    return (jsxs(Fragment, { children: [jsx(OTPVerificationView, { MainIcon: SvgPasswordHero, error: error, isLoading: isLoading, onPinComplete: onSubmit, isValid: Boolean(isValid), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body'), onClickBack: showBackButton ? onClickBack : undefined }), !isInitialSetup && (jsx("div", { className: 'mfa-verification-view__choose-another-method', children: jsx(TextButton, { className: 'mfa-verification-view__choose-another-method-button', onClick: () => setView('mfa-choose-device', { isInitialSetup }), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) }))] }));
 };
 
 export { MfaVerificationView };

package/src/lib/views/viewToComponentMap.d.ts

@@ -27,11 +27,11 @@ export declare const viewToComponentMap: {
     'merge-user-accounts': import("react").FC<import("./MergeUserAccountsView/MergeUserAccountsView").MergeUserAccountsViewProps>;
     'merge-user-accounts-conflicts': import("react").FC<import("./MergeUserAccountsConflictsView/MergeUserAccountsConflictsView").MergeUserAccountsConflictsViewProps>;
     'merge-user-accounts-with-same-email': import("react").FC<import("./MergeUserAccountsWithSameEmailView/MergeUserAccountsWithSameEmailView").MergeUserAccountsWithSameEmailViewProps>;
-    'mfa-choose-device': () => JSX.Element;
+    'mfa-choose-device': import("react").FC<import("./MfaChooseDeviceView").MfaChooseDeviceViewProps>;
     'mfa-display-backup-codes': () => JSX.Element;
     'mfa-recovery': import("react").FC;
     'mfa-secure-device': ({ type }: import("./MfaSecureDeviceView").MfaSecureDeviceViewProps) => JSX.Element;
-    'mfa-verification': ({ type }: import("./MfaVerificationView").MfaVerificationViewProps) => JSX.Element;
+    'mfa-verification': ({ type, isInitialSetup, showBackButton, }: import("./MfaVerificationView").MfaVerificationViewProps) => JSX.Element;
     'multi-wallet-wallet-list': ({ isWalletConnectList, }: import("./WalletList").WalletListProps) => JSX.Element;
     'network-not-supported': () => JSX.Element | null;
     'network-not-supported-manual': import("react").FC;

package/src/lib/utils/functions/validateMfaRecoveryCode/index.d.ts

@@ -1 +0,0 @@
-export { validateMfaRecoveryCode } from './validateMfaRecoveryCode';

package/src/lib/utils/functions/validateMfaRecoveryCode/validateMfaRecoveryCode.cjs

@@ -1,11 +0,0 @@
-'use client'
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const validateMfaRecoveryCode = (text) => {
-    const regex = /^(\w+\s){23}\w+$/;
-    return regex.test(text);
-};
-
-exports.validateMfaRecoveryCode = validateMfaRecoveryCode;

package/src/lib/utils/functions/validateMfaRecoveryCode/validateMfaRecoveryCode.d.ts

@@ -1 +0,0 @@
-export declare const validateMfaRecoveryCode: (text: string) => boolean;

package/src/lib/utils/functions/validateMfaRecoveryCode/validateMfaRecoveryCode.js

@@ -1,7 +0,0 @@
-'use client'
-const validateMfaRecoveryCode = (text) => {
-    const regex = /^(\w+\s){23}\w+$/;
-    return regex.test(text);
-};
-
-export { validateMfaRecoveryCode };