@turnkey/react-wallet-kit/dist/components/auth/Action.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 } from '../../_virtual/_rollupPluginBabelHelpers.mjs';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useRef, useState, useEffect } from 'react';
import { useModal } from '../../providers/modal/Hook.mjs';
import { Spinner } from '../design/Spinners.mjs';
import clsx from 'clsx';

function ActionPage(props) {
  var title = props.title,
    icon = props.icon,
    _props$closeOnComplet = props.closeOnComplete,
    closeOnComplete = _props$closeOnComplet === void 0 ? true : _props$closeOnComplet,
    action = props.action;
  var _useModal = useModal(),
    popPage = _useModal.popPage,
    closeModal = _useModal.closeModal,
    isMobile = _useModal.isMobile;
  var hasRun = useRef(false);
  var iconRef = useRef(null);
  var _useState = useState(40),
    _useState2 = _slicedToArray(_useState, 2),
    spinnerSize = _useState2[0],
    setSpinnerSize = _useState2[1];
  useEffect(function () {
    if (iconRef.current) {
      var rect = iconRef.current.getBoundingClientRect();
      var size = Math.max(rect.width, rect.height);
      setSpinnerSize(size + 50);
    }
  }, []);
  useEffect(function () {
    if (hasRun.current) return;
    hasRun.current = true;
    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:
              if (!action) {
                _context.n = 5;
                break;
              }
              _context.p = 1;
              _context.n = 2;
              return action();
            case 2:
              _context.n = 4;
              break;
            case 3:
              _context.p = 3;
              _t = _context.v;
              popPage();
              throw new Error("".concat(_t));
            case 4:
              if (closeOnComplete) {
                closeModal();
              }
            case 5:
              return _context.a(2);
          }
        }, _callee, null, [[1, 3]]);
      }));
      return function runAction() {
        return _ref.apply(this, arguments);
      };
    }();
    runAction();
  }, []);
  return jsx("div", {
    className: clsx("flex items-center justify-center py-10", isMobile ? "w-full" : "w-96"),
    children: jsxs("div", {
      className: "flex flex-col items-center justify-center gap-8",
      children: [jsxs("div", {
        className: "relative flex items-center justify-center",
        children: [jsx("div", {
          ref: iconRef,
          className: "flex items-center justify-center",
          children: icon
        }), jsx(Spinner, {
          className: "absolute",
          style: {
            width: spinnerSize,
            height: spinnerSize
          },
          strokeWidth: 1
        })]
      }), jsx("span", {
        className: "text-lg font-semibold",
        children: title
      })]
    })
  });
}

export { ActionPage };
//# sourceMappingURL=Action.mjs.map