@dynamic-labs/sdk-react-core/src/lib/views/Passkey/PasskeyRecovery/BundleValidation/PasskeyBundleRecovery.js

A React SDK for implementing wallet web3 authentication and authorization to your website.

'use client'
import { __awaiter } from '../../../../../../_virtual/_tslib.js';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useState, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { SignInWithEmailIcon } from '@dynamic-labs/iconic';
import { DynamicError } from '@dynamic-labs/utils';
import { Icon } from '../../../../components/Icon/Icon.js';
import { IconButton } from '../../../../components/IconButton/IconButton.js';
import { IconWithSpinner } from '../../../../components/IconWithSpinner/IconWithSpinner.js';
import { IconWithStatus } from '../../../../components/IconWithStatus/IconWithStatus.js';
import { Input } from '../../../../components/Input/Input.js';
import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
import { TextButton } from '../../../../components/TextButton/TextButton.js';
import { Typography } from '../../../../components/Typography/Typography.js';
import '../../../../context/DynamicContext/DynamicContext.js';
import '../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
import '@dynamic-labs/sdk-api-core';
import { logger } from '../../../../shared/logger.js';
import '@dynamic-labs/wallet-connector-core';
import { ReactComponent as SvgCheck } from '../../../../shared/assets/check.js';
import { ReactComponent as SvgClose } from '../../../../shared/assets/close.js';
import { ReactComponent as SvgError } from '../../../../shared/assets/error.js';
import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
import '@dynamic-labs/wallet-book';
import '../../../../utils/constants/colors.js';
import '../../../../utils/constants/values.js';
import '../../../../shared/consts/index.js';
import { dynamicEvents } from '../../../../events/dynamicEvents.js';
import '../../../../context/CaptchaContext/CaptchaContext.js';
import '../../../../context/ErrorContext/ErrorContext.js';
import '@dynamic-labs/multi-wallet';
import 'react-international-phone';
import '../../../../store/state/nonce/nonce.js';
import '../../../../store/state/projectSettings/projectSettings.js';
import '../../../../config/ApiEndpoint.js';
import '../../../../store/state/user/user.js';
import '../../../../locale/locale.js';
import '../../../../store/state/dynamicContextProps/dynamicContextProps.js';
import '../../../../store/state/primaryWalletId/primaryWalletId.js';
import '../../../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
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 '../../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 { useMutation } from '../../../../utils/hooks/useMutation/useMutation.js';
import { passkeyRecoveryBundleValidation, resentRecoveryEmail } from '../../utils/passkeyRecovery/passkeyRecovery.js';
import { useIsTurnkeyWallet } from '../../../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.js';
import 'bs58';
import '@dynamic-labs/types';
import '../../../../context/SocialRedirectContext/SocialRedirectContext.js';
import '../../../../context/LoadingContext/LoadingContext.js';
import '../../../../context/WalletContext/WalletContext.js';
import '../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
import 'yup';
import '../../../../context/MockContext/MockContext.js';
import '../../../CollectUserDataView/useFields.js';
import '../../../../context/FieldsStateContext/FieldsStateContext.js';
import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
import '@dynamic-labs/rpc-providers';
import '../../../../store/state/walletOptions/walletOptions.js';
import '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
import '../../../../components/Alert/Alert.js';
import '../../../../components/ShadowDOM/ShadowDOM.js';
import '../../../../components/InlineWidget/InlineWidget.js';
import '../../../../components/IsBrowser/IsBrowser.js';
import '../../../../components/MenuList/Dropdown/Dropdown.js';
import '../../../../components/OverlayCard/OverlayCard.js';
import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
import '../../../../components/Popper/Popper/Popper.js';
import '../../../../components/Popper/PopperContext/PopperContext.js';
import 'react-focus-lock';
import 'qrcode';
import 'formik';
import '../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
import '../../../../context/WalletGroupContext/WalletGroupContext.js';
import '../../../../context/IpConfigurationContext/IpConfigurationContext.js';
import '../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
import '../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
import '@hcaptcha/react-hcaptcha';
import { getProperErrorMessage } from '../../../../modals/SignMessageConfirmationModal/getProperErrorMessage.js';
import '../../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
import '../../../../context/FooterAnimationContext/index.js';
import '../../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
import '../../../../context/PasskeyContext/PasskeyContext.js';
import '../../../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.js';
import '../../../../store/state/sendBalances.js';
import '../../../../store/state/connectorsInitializing/connectorsInitializing.js';
import '../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
import '../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
import '../../../TransactionConfirmationView/TransactionConfirmationView.js';
import '../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
import '../../../../context/OnrampContext/OnrampContext.js';
import '../../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.js';
import '../../../../../index.js';
import '../../../../store/state/tokenBalances.js';
import '../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';

// eslint-disable-next-line no-useless-escape
const bundleRegex = new RegExp(/^([A-Za-z0-9\s_+@\.-]+)$/);
const PasskeyBundleRecovery = ({ authenticatorType, currentAction, }) => {
    const { primaryWallet, environmentId, user, setShowAuthFlow } = useInternalDynamicContext();
    const { isTurnkeyWalletWithoutAuthenticator } = useIsTurnkeyWallet();
    const { getEOAWallet } = useSmartWallets();
    const [bundleInput, setBundleInput] = useState('');
    const [resendingCode, setResendingCode] = useState(false);
    const [isValid, setIsValid] = useState(false);
    const { t } = useTranslation();
    const { pushView } = useViewContext();
    const { mutate, isLoading, error } = useMutation((bundleInput) => __awaiter(void 0, void 0, void 0, function* () {
        var _a;
        const wallet = (_a = (primaryWallet && getEOAWallet(primaryWallet))) !== null && _a !== void 0 ? _a : primaryWallet;
        yield passkeyRecoveryBundleValidation({
            bundleInput,
            user,
            wallet: wallet,
        });
        setIsValid(true);
        // For passkey it will be called after adding a passkey in passkey-recovery-complete view
        authenticatorType === 'email' &&
            dynamicEvents.emit('passkeyRecoveryCompleted', primaryWallet);
        setTimeout(() => {
            const goBack = () => {
                var _a, _b, _c;
                ((_a = currentAction === null || currentAction === void 0 ? void 0 : currentAction.settings) === null || _a === void 0 ? void 0 : _a.goBack)
                    ? (_c = (_b = currentAction === null || currentAction === void 0 ? void 0 : currentAction.settings) === null || _b === void 0 ? void 0 : _b.goBack) === null || _c === void 0 ? void 0 : _c.call(_b)
                    : setShowAuthFlow(false);
            };
            if (authenticatorType === 'passkey') {
                return pushView('passkey-recovery-complete', { goBack });
            }
            if ((currentAction === null || currentAction === void 0 ? void 0 : currentAction.type) === 'reveal') {
                return;
            }
            goBack();
        }, 2000);
    }));
    /**
     *
     * Validates an authenticator label according to Turnkey's validation rules:
     * https://github.com/tkhq/demo-passkey-wallet/blob/main/frontend/utils/validation.ts
     */
    const isValidBundle = (bundle) => {
        if (!(bundle === null || bundle === void 0 ? void 0 : bundle.length)) {
            return false;
        }
        if (bundle.length < 100 || bundle.length >= 256) {
            return false;
        }
        if (!bundleRegex.test(bundle)) {
            return false;
        }
        return true;
    };
    const handleBundleChanged = (event) => {
        var _a;
        const bundle = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.trim();
        setBundleInput(bundle);
        if (!isValidBundle(bundle)) {
            return;
        }
        mutate(bundle);
    };
    const handleResentEmail = () => __awaiter(void 0, void 0, void 0, function* () {
        try {
            setResendingCode(true);
            yield resentRecoveryEmail({
                authenticatorType,
                environmentId,
                user,
                wallet: primaryWallet,
            });
        }
        catch (err) {
            logger.error('Failed to complete passkey recovery', err);
        }
        finally {
            setResendingCode(false);
        }
    });
    const errorText = useMemo(() => {
        if (!error) {
            return undefined;
        }
        if (error instanceof DynamicError) {
            return error.message;
        }
        return getProperErrorMessage(error);
    }, [error]);
    const emailIcon = (jsx(Icon, { color: 'brand-primary', children: jsx(SignInWithEmailIcon, {}) }));
    const translationKey = isTurnkeyWalletWithoutAuthenticator
        ? 'dyn_passkey_secure_modal'
        : 'dyn_passkey_recovery';
    const closeButton = (jsx(IconButton, { type: 'button', onClick: () => {
            setShowAuthFlow(false, { emitCancelAuth: true });
            dynamicEvents.emit('passkeyRecoveryFailed', new DynamicError('Validation request cancelled'));
        }, "data-testid": 'close-button', children: jsx(SvgClose, {}) }));
    return (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: closeButton, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', copykey: `${translationKey}.code.title`, children: t(`${translationKey}.code.title`) }) }), jsxs("div", { className: 'passkey-recovery-view', children: [!error && !isValid ? (jsx(IconWithSpinner, { Icon: emailIcon, isSpinning: !error && !isValid, iconSize: 96 })) : (jsx(IconWithStatus, { Icon: SignInWithEmailIcon, iconSize: 64, variant: error ? 'red' : 'green', InnerIcon: error ? SvgError : SvgCheck })), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'passkey-recovery-view__subtitle', copykey: `${translationKey}.code.description`, children: t(`${translationKey}.code.description`, { email: user === null || user === void 0 ? void 0 : user.email }) }), jsx("div", { className: 'passkey-recovery-view__actions', children: jsx(Input, { id: 'passkey-recovery-bundle', "data-testid": 'passkey-recovery-bundle-input', value: bundleInput, onChange: handleBundleChanged, label: t(`${translationKey}.code.input_label`), disabled: isLoading || resendingCode, error: Boolean(error), className: isValid ? 'passkey-recovery-view__input-valid' : '', autoFocus: true, message: errorText }) }), jsxs("div", { className: 'passkey-recovery-view__resend-code', children: [jsx(Typography, { color: 'secondary', variant: 'body_small', copykey: `${translationKey}.code.resend.text`, children: t(`${translationKey}.code.resend.text`) }), jsx(Typography, { variant: 'body_small', color: 'link', copykey: `${translationKey}.code.resend.button`, children: jsx(TextButton, { "data-testid": 'resend-email-button', onClick: handleResentEmail, disabled: resendingCode || isLoading || (bundleInput.length > 0 && !error), children: t(`${translationKey}.code.resend.button`) }) })] })] })] }));
};

export { PasskeyBundleRecovery };