@turnkey/react-wallet-kit/dist/components/design/Success.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 freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
var reactFontawesome = require('@fortawesome/react-fontawesome');
var clsx = require('clsx');
var react = require('react');
var Hook = require('../../providers/modal/Hook.js');
var Wrapper = require('./Lottie/Wrapper.js');

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

exports.SuccessPage = SuccessPage;
//# sourceMappingURL=Success.js.map