@turnkey/react-wallet-kit/dist/components/user/RemovePasskey.mjs

The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.

import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { ActionButton } from '../design/Buttons.mjs';
import { useState } from 'react';
import { useModal } from '../../providers/modal/Hook.mjs';
import { useTurnkey } from '../../providers/client/Hook.mjs';
import { TurnkeyError, TurnkeyErrorCodes } from '@turnkey/sdk-types';
import clsx from 'clsx';
import { SuccessPage } from '../design/Success.mjs';

function RemovePasskey(params) {
  var _user$authenticators;
  var _useTurnkey = useTurnkey(),
    user = _useTurnkey.user,
    removePasskeys = _useTurnkey.removePasskeys;
  var onSuccess = params.onSuccess,
    onError = params.onError,
    _params$userId = params.userId,
    userId = _params$userId === void 0 ? user === null || user === void 0 ? void 0 : user.userId : _params$userId,
    successPageDuration = params.successPageDuration,
    authenticatorId = params.authenticatorId;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isLoading = _useState2[0],
    setIsLoading = _useState2[1];
  var _useModal = useModal(),
    isMobile = _useModal.isMobile,
    pushPage = _useModal.pushPage,
    closeModal = _useModal.closeModal;
  var handleContinue = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
      var res;
      return _regeneratorRuntime().wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            _context.prev = 0;
            setIsLoading(true);
            _context.next = 4;
            return removePasskeys(_objectSpread2({
              authenticatorIds: [authenticatorId]
            }, userId && {
              userId: userId
            }));
          case 4:
            res = _context.sent;
            handleSuccess(res);
            _context.next = 11;
            break;
          case 8:
            _context.prev = 8;
            _context.t0 = _context["catch"](0);
            onError(_context.t0);
          case 11:
            _context.prev = 11;
            setIsLoading(false);
            return _context.finish(11);
          case 14:
          case "end":
            return _context.stop();
        }
      }, _callee, null, [[0, 8, 11, 14]]);
    }));
    return function handleContinue() {
      return _ref.apply(this, arguments);
    };
  }();
  var handleSuccess = function handleSuccess(authenticators) {
    onSuccess(authenticators);
    if (!successPageDuration) {
      closeModal();
      return;
    }
    pushPage({
      key: "success",
      content: jsx(SuccessPage, {
        text: "Passkey removed successfully!",
        duration: successPageDuration,
        onComplete: function onComplete() {
          closeModal();
        }
      }),
      preventBack: true,
      showTitle: false
    });
  };
  var authenticator = user === null || user === void 0 ? void 0 : (_user$authenticators = user.authenticators) === null || _user$authenticators === void 0 ? void 0 : _user$authenticators.find(function (authenticator) {
    return authenticator.authenticatorId === params.authenticatorId;
  });
  if (!authenticator) {
    throw new TurnkeyError("Authenticator not found", TurnkeyErrorCodes.NOT_FOUND);
  }
  return jsxs("div", {
    className: clsx("mt-8", isMobile ? "w-full" : "w-96"),
    children: [jsxs("div", {
      className: "mt-6 mb-5 flex flex-col items-center gap-3",
      children: [jsx(FontAwesomeIcon, {
        icon: faTriangleExclamation,
        size: "3x",
        className: "text-danger-light dark:text-danger-dark"
      }), jsx("div", {
        className: "text-2xl font-bold text-center",
        children: params !== null && params !== void 0 && params.title ? params.title : "Remove Passkey"
      }), jsx("div", {
        className: "text-icon-text-light dark:text-icon-text-dark text-center !p-0",
        children: params !== null && params !== void 0 && params.subTitle ? params.subTitle : "This action is irreversible."
      }), jsxs("div", {
        className: "p-2 h-full mt-2 max-h-72 rounded-md border border-modal-background-dark/10 dark:border-modal-background-light/10 bg-icon-background-light dark:bg-icon-background-dark text-icon-text-light dark:text-icon-text-dark",
        children: [jsxs("div", {
          className: "text-sm font-mono!",
          children: ["Passkey Name: ", authenticator === null || authenticator === void 0 ? void 0 : authenticator.authenticatorName]
        }), jsxs("div", {
          className: "text-sm font-mono!",
          children: ["Passkey ID: ", authenticator === null || authenticator === void 0 ? void 0 : authenticator.authenticatorId]
        })]
      })]
    }), jsx("div", {
      className: "flex my-2 mt-0",
      children: jsx(ActionButton, {
        onClick: handleContinue,
        loading: isLoading,
        className: "w-full max-w-md bg-danger-light dark:bg-danger-dark text-primary-text-light dark:text-primary-text-dark",
        spinnerClassName: "text-primary-text-light dark:text-primary-text-dark",
        children: "Remove Passkey"
      })
    })]
  });
}

export { RemovePasskey };
//# sourceMappingURL=RemovePasskey.mjs.map