@turnkey/react-wallet-kit/dist/components/verify/Verify.mjs

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

import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import clsx from 'clsx';
import { useModal } from '../../providers/modal/Hook.mjs';
import { useRef, useState, useEffect } from 'react';
import { Transition, TransitionChild } from '@headlessui/react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCheck } from '@fortawesome/free-solid-svg-icons';
import { useTurnkey } from '../../providers/client/Hook.mjs';
import { Spinner } from '../design/Spinners.mjs';

function VerifyPage(props) {
  var onSuccess = props.onSuccess,
    onError = props.onError,
    successPageDuration = props.successPageDuration;
  var _useModal = useModal(),
    isMobile = _useModal.isMobile,
    closeModal = _useModal.closeModal;
  var _useTurnkey = useTurnkey(),
    verifyAppProofs = _useTurnkey.verifyAppProofs;
  var hasRun = useRef(false);
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    hasCompleted = _useState2[0],
    setHasCompleted = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    isTextPinging = _useState4[0],
    setIsTextPinging = _useState4[1];
  // Run verification once
  useEffect(function () {
    if (hasRun.current) return;
    hasRun.current = true;
    var closeTimeoutRef = {
      current: undefined
    };
    var runAction = /*#__PURE__*/function () {
      var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
        var _t;
        return _regenerator().w(function (_context) {
          while (1) switch (_context.p = _context.n) {
            case 0:
              _context.p = 0;
              _context.n = 1;
              return new Promise(function (resolve) {
                return setTimeout(resolve, 300);
              });
            case 1:
              _context.n = 2;
              return verifyAppProofs(_objectSpread2({}, props));
            case 2:
              setHasCompleted(true);
              if (!(!successPageDuration || successPageDuration === 0)) {
                _context.n = 3;
                break;
              }
              onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
              closeModal();
              return _context.a(2);
            case 3:
              setTimeout(function () {
                return setIsTextPinging(true);
              }, 500);
              setTimeout(function () {
                return setIsTextPinging(false);
              }, 1500);
              closeTimeoutRef.current = setTimeout(function () {
                onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
                closeModal();
              }, successPageDuration);
              _context.n = 5;
              break;
            case 4:
              _context.p = 4;
              _t = _context.v;
              onError === null || onError === void 0 ? void 0 : onError(_t);
              closeModal();
            case 5:
              return _context.a(2);
          }
        }, _callee, null, [[0, 4]]);
      }));
      return function runAction() {
        return _ref.apply(this, arguments);
      };
    }();
    runAction();
    return function () {
      if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
    };
  }, []);
  return jsxs("div", {
    className: clsx("flex flex-col items-center justify-center py-5 transition-all duration-300", isMobile ? "w-full" : "w-72"),
    children: [!hasCompleted && jsxs("div", {
      className: "size-full absolute text-center text-lg font-semibold flex flex-row items-center justify-center gap-2",
      children: [jsx(Spinner, {
        strokeWidth: 2,
        className: "h-full"
      }), jsx("span", {
        className: "animate-pulse",
        children: "Verifying..."
      })]
    }), jsx("div", {
      className: "relative flex flex-col items-center justify-center size-[88px] overflow-hidden",
      children: jsx(Transition, {
        as: "div",
        show: hasCompleted,
        enter: "transition-all duration-600 ease-in-out",
        enterFrom: "opacity-0 scale-40",
        enterTo: "opacity-100 scale-100",
        className: " absolute size-full flex flex-col items-center justify-center",
        children: jsx("div", {
          className: "size-full border-2 border-primary-light dark:border-primary-dark text-primary-light dark:text-primary-dark rounded-full flex flex-col items-center justify-center box-border",
          children: jsxs(TransitionChild, {
            as: "div",
            enter: "transition-all duration-200 delay-300 ease-out",
            enterFrom: "opacity-0 scale-60",
            enterTo: "opacity-100 scale-100",
            className: "relative flex flex-col items-center justify-center",
            children: [jsx(FontAwesomeIcon, {
              icon: faCheck,
              size: "2x"
            }), jsx(FontAwesomeIcon, {
              className: "absolute animate-ping",
              icon: faCheck,
              size: "2x"
            })]
          })
        })
      })
    }), jsxs(Transition, {
      as: "div",
      show: hasCompleted,
      className: "w-full text-center text-lg font-semibold flex flex-col items-center justify-center mt-2 relative",
      enter: "transition-all ease-out duration-200 delay-200",
      enterFrom: "opacity-0 -translate-y-2",
      enterTo: "opacity-100 translate-y-0",
      children: [jsx("span", {
        children: "Verified!"
      }), isTextPinging && jsx("span", {
        className: "absolute animate-ping text-icon-text-light dark:text-icon-text-dark",
        children: "Verified!"
      })]
    })]
  });
}

export { VerifyPage };
//# sourceMappingURL=Verify.mjs.map