@dynamic-labs/sdk-react-core/src/lib/components/OTPVerificationView/OTPVerificationView.js

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

'use client'
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import '@dynamic-labs/sdk-api-core';
import '../../shared/logger.js';
import '@dynamic-labs/iconic';
import '@dynamic-labs/wallet-connector-core';
import { ReactComponent as SvgArrowLeft } from '../../shared/assets/arrow-left.js';
import { ReactComponent as SvgCheck } from '../../shared/assets/check.js';
import { ReactComponent as SvgPencilAltIcon } from '../../shared/assets/pencil-alt-icon.js';
import '../../context/ViewContext/ViewContext.js';
import '@dynamic-labs/wallet-book';
import '@dynamic-labs/utils';
import '../../utils/constants/colors.js';
import '../../utils/constants/values.js';
import '../../shared/consts/index.js';
import { classNames } from '../../utils/functions/classNames/classNames.js';
import { Icon } from '../Icon/Icon.js';
import { IconButton } from '../IconButton/IconButton.js';
import { IconWithSpinner } from '../IconWithSpinner/IconWithSpinner.js';
import { IconWithStatus } from '../IconWithStatus/IconWithStatus.js';
import { ModalHeader } from '../ModalHeader/ModalHeader.js';
import { ModalHeaderBanner } from '../ModalHeaderBanner/ModalHeaderBanner.js';
import { PinField } from '../PinField/PinField.js';
import { RetrySendVerificationCodeSection } from '../RetrySendVerificationCodeSection/RetrySendVerificationCodeSection.js';
import { Typography } from '../Typography/Typography.js';

const OTPVerificationView = ({ onClickBack, onClickEditDestination, isLoading, disabled, displayedDestination, description, onPinComplete, isValid, error, retryHandler, onPinChange, successBannerTextKey, MainIcon, hideHeader, appendAboveOTPInput, appendToEnd, }) => {
    const { t } = useTranslation();
    const backButton = onClickBack && (jsx(IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsx(SvgArrowLeft, {}) }));
    const titleCopyKey = useMemo(() => isValid
        ? 'dyn_otp_verification.verification_succeeded'
        : 'dyn_otp_verification.confirm_code', [isValid]);
    return (jsxs(Fragment, { children: [!hideHeader && (jsx(ModalHeader, { alignContent: 'bottom', leading: onClickBack && backButton, children: jsx("div", { className: 'otp-verification-view__status-header', children: jsx(Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title', copykey: titleCopyKey, children: t(titleCopyKey) }) }) })), successBannerTextKey && (jsx(ModalHeaderBanner, { type: 'notice', messageKey: successBannerTextKey, disableTruncate: true })), jsx(ModalHeaderBanner, { type: 'error', messageKey: error === null || error === void 0 ? void 0 : error.message }), jsxs("div", { className: classNames('otp-verification-view', {
                    'otp-verification-view--message': Boolean(successBannerTextKey || error),
                }), children: [isValid && (jsx(IconWithStatus, { Icon: MainIcon, iconSize: 64, InnerIcon: SvgCheck })), !isValid && (jsx(IconWithSpinner, { Icon: MainIcon, iconSize: 96, isSpinning: isLoading, className: 'otp-verification-view__icon-with-spinner', treatAsFunctionComponent: true })), jsxs("div", { className: 'otp-verification-view__body', children: [isValid && (jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_otp_verification.hang_tight', children: t('dyn_otp_verification.hang_tight') })), !isValid &&
                                (description ? (jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_otp_verification.description', children: description })) : (jsxs(Fragment, { children: [jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_otp_verification.description', children: t('dyn_otp_verification.description') }), jsxs("div", { className: 'otp-verification-view__destination-container', children: [displayedDestination && (jsx(Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: displayedDestination })), onClickEditDestination && (jsx(IconButton, { onClick: onClickEditDestination, "data-testid": 'otp-verification-view__edit-button', children: jsx(Icon, { color: 'text-tertiary', children: jsx(SvgPencilAltIcon, {}) }) }))] })] })))] }), appendAboveOTPInput, jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange, disabled: disabled }), retryHandler && (jsx(RetrySendVerificationCodeSection, { className: 'otp-verification-view__retry-container', retryHandler: retryHandler })), appendToEnd] })] }));
};

export { OTPVerificationView };