'use client'
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var reactI18next = require('react-i18next');
var IconButton = require('../../../../components/IconButton/IconButton.cjs');
var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
var PasskeyCreatedSuccessBanner = require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
var Skeleton = require('../../../../components/Skeleton/Skeleton.cjs');
var Typography = require('../../../../components/Typography/Typography.cjs');
var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
var PasskeyContext = require('../../../../context/PasskeyContext/PasskeyContext.cjs');
require('react');
var add = require('../../../../shared/assets/add.cjs');
var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
require('@dynamic-labs/iconic');
require('../../../../context/ViewContext/ViewContext.cjs');
require('@dynamic-labs-sdk/client/core');
require('@dynamic-labs/sdk-api-core');
require('../../../../client/client.cjs');
require('@dynamic-labs-sdk/client');
require('../../../../config/ApiEndpoint.cjs');
require('@dynamic-labs/wallet-connector-core');
require('../../../../shared/logger.cjs');
require('@dynamic-labs/wallet-book');
require('@dynamic-labs/utils');
require('../../../../utils/constants/colors.cjs');
require('../../../../utils/constants/values.cjs');
require('../../../../shared/consts/index.cjs');
require('../../../../../../_virtual/_tslib.cjs');
require('@dynamic-labs/multi-wallet');
require('react-international-phone');
require('../../../../store/state/nonce/nonce.cjs');
require('@dynamic-labs/locale');
require('../../../../store/state/dynamicContextProps/dynamicContextProps.cjs');
require('../../../../store/state/primaryWalletId/primaryWalletId.cjs');
require('../../../../store/state/connectedWalletsInfo/connectedWalletsInfo.cjs');
require('../../../../events/dynamicEvents.cjs');
var useProjectSettings = require('../../../../client/extension/projectSettings/useProjectSettings/useProjectSettings.cjs');
var usePasskeyRecovery = require('../../../../utils/hooks/usePasskeyRecovery/usePasskeyRecovery.cjs');
var PasskeyCard = require('../../components/PasskeyCard/PasskeyCard.cjs');
var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');

const ManagePasskeysWidgetView = () => {
    var _a;
    const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
    const { userPasskeys, userPasskeysLoading: isLoading } = PasskeyContext.usePasskeyContext();
    const projectSettings = useProjectSettings.useProjectSettings();
    const { initPasskeyRecoveryProcess } = usePasskeyRecovery.usePasskeyRecovery();
    const { t } = reactI18next.useTranslation();
    const isRecoveryEnabled = Boolean((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.embeddedWallets) === null || _a === void 0 ? void 0 : _a.emailRecoveryEnabled);
    const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: () => setDynamicWidgetView('account-and-security-settings'), "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
    return (jsxRuntime.jsxs("div", { className: 'manage-passkeys-widget-view', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx("div", { className: 'send-balance-page-layout__header-content', children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_manage_passkeys.title', children: t('dyn_manage_passkeys.title') }) }) }), jsxRuntime.jsx(PasskeyCreatedSuccessBanner.PasskeyCreatedSuccessBanner, {}), jsxRuntime.jsxs("div", { className: 'manage-passkeys-widget-view__body', children: [jsxRuntime.jsx("div", { className: 'manage-passkeys-widget-view__body__cards', children: isLoading ? (jsxRuntime.jsx(Skeleton.Skeleton, { count: 1, className: 'manage-passkeys-widget-view__body__cards__skeleton' })) : (userPasskeys.map((passkey) => (jsxRuntime.jsx(PasskeyCard.PasskeyCard, { passkey: passkey }, passkey.id)))) }), isRecoveryEnabled && (jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonPadding: 'large', buttonClassName: 'manage-passkeys-widget-view__body__recovery-button', onClick: () => initPasskeyRecoveryProcess('passkey'), showInternalLoading: false, startSlot: jsxRuntime.jsx(add.ReactComponent, {}), copykey: 'dyn_manage_passkeys.recovery_button', children: t('dyn_manage_passkeys.recovery_button') }))] })] }));
};

exports.ManagePasskeysWidgetView = ManagePasskeysWidgetView;
