@turnkey/react-wallet-kit/dist/components/design/Success.mjs

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

import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import { faCheck } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import clsx from 'clsx';
import { useState, useEffect } from 'react';
import { useModal } from '../../providers/modal/Hook.mjs';
import LottiePlayerWrapper from './Lottie/Wrapper.mjs';

function SuccessPage(props) {
  var _props$text = props.text,
    text = _props$text === void 0 ? "Success" : _props$text,
    _props$duration = props.duration,
    duration = _props$duration === void 0 ? 2000 : _props$duration,
    onComplete = props.onComplete;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    pulsing = _useState2[0],
    setPulsing = _useState2[1];
  var _useModal = useModal(),
    isMobile = _useModal.isMobile;
  var _useState3 = useState(0),
    _useState4 = _slicedToArray(_useState3, 2),
    scale = _useState4[0],
    setScale = _useState4[1];
  useEffect(function () {
    setScale(1);
    var pulseTimer = setTimeout(function () {
      setPulsing(true);
    }, 300);
    var totalTimer = setTimeout(function () {
      onComplete();
    }, duration);
    return function () {
      clearTimeout(totalTimer);
      clearTimeout(pulseTimer);
    };
  }, [duration, onComplete]);
  return jsxs("div", {
    className: clsx("flex flex-col items-center justify-center", isMobile ? "w-full py-4" : "w-72 p-4"),
    children: [jsxs("div", {
      className: "flex flex-col items-center justify-center",
      style: {
        height: "150px",
        width: "150px"
      },
      children: [jsxs("div", {
        style: {
          height: "100px",
          width: "100px",
          transform: "scale(".concat(scale, ")")
        },
        className: "flex absolute items-center justify-center rounded-full bg-success-light dark:bg-success-dark transition-all duration-300",
        children: [jsx(FontAwesomeIcon, {
          style: {
            height: "50px",
            width: "50px"
          },
          className: "text-modal-background-light dark:text-modal-background-dark",
          icon: faCheck
        }), pulsing && jsx(FontAwesomeIcon, {
          style: {
            height: "50px",
            width: "50px"
          },
          className: "text-modal-background-light dark:text-modal-background-dark absolute animate-ping",
          icon: faCheck
        })]
      }), jsx(LottiePlayerWrapper, {
        style: {
          height: "300px",
          width: "300px"
        },
        autoplay: true,
        loop: false,
        src: "https://lottie.host/a7306a93-4125-48e1-b0e9-17904e5a774e/2aVGSPuWWf.json"
      })]
    }), jsx("p", {
      className: "text-lg font-medium mt-2 text-center",
      children: text
    })]
  });
}

export { SuccessPage };
//# sourceMappingURL=Success.mjs.map