@turnkey/react-wallet-kit/dist/components/auth/Action.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 react = require('react');
var Hook = require('../../providers/modal/Hook.js');
var Spinners = require('../design/Spinners.js');
var clsx = require('clsx');

function ActionPage(props) {
  const {
    title,
    icon,
    closeOnComplete = true,
    action
  } = props;
  const {
    popPage,
    closeModal,
    isMobile
  } = Hook.useModal();
  const hasRun = react.useRef(false);
  const iconRef = react.useRef(null);
  const [spinnerSize, setSpinnerSize] = react.useState(40);
  react.useEffect(() => {
    if (iconRef.current) {
      const rect = iconRef.current.getBoundingClientRect();
      const size = Math.max(rect.width, rect.height);
      setSpinnerSize(size + 50);
    }
  }, []);
  react.useEffect(() => {
    if (hasRun.current) return;
    hasRun.current = true;
    const runAction = async () => {
      if (action) {
        try {
          await action();
        } catch (error) {
          popPage();
          throw new Error(`${error}`);
        }
        if (closeOnComplete) {
          closeModal();
        }
      }
    };
    runAction();
  }, []);
  return jsxRuntime.jsx("div", {
    className: clsx("flex items-center justify-center py-10", isMobile ? "w-full" : "w-96"),
    children: jsxRuntime.jsxs("div", {
      className: "flex flex-col items-center justify-center gap-8",
      children: [jsxRuntime.jsxs("div", {
        className: "relative flex items-center justify-center",
        children: [jsxRuntime.jsx("div", {
          ref: iconRef,
          className: "flex items-center justify-center",
          children: icon
        }), jsxRuntime.jsx(Spinners.Spinner, {
          className: "absolute",
          style: {
            width: spinnerSize,
            height: spinnerSize
          },
          strokeWidth: 1
        })]
      }), jsxRuntime.jsx("span", {
        className: "text-lg font-semibold",
        children: title
      })]
    })
  });
}

exports.ActionPage = ActionPage;
//# sourceMappingURL=Action.js.map