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

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

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var clsx = require('clsx');
var Hook = require('../../providers/modal/Hook.js');
var react = require('react');
var react$1 = require('@headlessui/react');
var reactFontawesome = require('@fortawesome/react-fontawesome');
var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
var Hook$1 = require('../../providers/client/Hook.js');
var Spinners = require('../design/Spinners.js');

function VerifyPage(props) {
  const {
    onSuccess,
    onError,
    successPageDuration
  } = props;
  const {
    isMobile,
    closeModal
  } = Hook.useModal();
  const {
    verifyAppProofs
  } = Hook$1.useTurnkey();
  const hasRun = react.useRef(false);
  const [hasCompleted, setHasCompleted] = react.useState(false);
  const [isTextPinging, setIsTextPinging] = react.useState(false);
  // Run verification once
  react.useEffect(() => {
    if (hasRun.current) return;
    hasRun.current = true;
    const closeTimeoutRef = {
      current: undefined
    };
    const runAction = async () => {
      try {
        await new Promise(resolve => setTimeout(resolve, 300)); // slight delay to allow modal animation to complete. The verifyAppProofs call can sometimes freeze the UI while it runs
        await verifyAppProofs({
          ...props
        });
        setHasCompleted(true);
        if (!successPageDuration || successPageDuration === 0) {
          onSuccess?.();
          closeModal();
          return;
        }
        setTimeout(() => setIsTextPinging(true), 500);
        setTimeout(() => setIsTextPinging(false), 1500);
        closeTimeoutRef.current = setTimeout(() => {
          onSuccess?.();
          closeModal();
        }, successPageDuration);
      } catch (err) {
        onError?.(err);
        closeModal();
      }
    };
    runAction();
    return () => {
      if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
    };
  }, []);
  return jsxRuntime.jsxs("div", {
    className: clsx("flex flex-col items-center justify-center py-5 transition-all duration-300", isMobile ? "w-full" : "w-72"),
    children: [!hasCompleted && jsxRuntime.jsxs("div", {
      className: "size-full absolute text-center text-lg font-semibold flex flex-row items-center justify-center gap-2",
      children: [jsxRuntime.jsx(Spinners.Spinner, {
        strokeWidth: 2,
        className: "h-full"
      }), jsxRuntime.jsx("span", {
        className: "animate-pulse",
        children: "Verifying..."
      })]
    }), jsxRuntime.jsx("div", {
      className: "relative flex flex-col items-center justify-center size-[88px] overflow-hidden",
      children: jsxRuntime.jsx(react$1.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: jsxRuntime.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: jsxRuntime.jsxs(react$1.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: [jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
              icon: freeSolidSvgIcons.faCheck,
              size: "2x"
            }), jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
              className: "absolute animate-ping",
              icon: freeSolidSvgIcons.faCheck,
              size: "2x"
            })]
          })
        })
      })
    }), jsxRuntime.jsxs(react$1.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: [jsxRuntime.jsx("span", {
        children: "Verified!"
      }), isTextPinging && jsxRuntime.jsx("span", {
        className: "absolute animate-ping text-icon-text-light dark:text-icon-text-dark",
        children: "Verified!"
      })]
    })]
  });
}

exports.VerifyPage = VerifyPage;
//# sourceMappingURL=Verify.js.map