@turnkey/react-wallet-kit/dist/components/auth/Email.mjs

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

import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState } from 'react';
import { Input } from '@headlessui/react';
import { IconButton, ActionButton } from '../design/Buttons.mjs';
import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
import clsx from 'clsx';
import { useTurnkey } from '../../providers/client/Hook.mjs';

function isValidEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
function EmailInput(props) {
  var _config$ui$preferLarg, _config$ui;
  var onContinue = props.onContinue;
  var _useTurnkey = useTurnkey(),
    config = _useTurnkey.config;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    loading = _useState2[0],
    setLoading = _useState2[1];
  var _useState3 = useState(""),
    _useState4 = _slicedToArray(_useState3, 2),
    email = _useState4[0],
    setEmail = _useState4[1];
  var useContinueButton = (_config$ui$preferLarg = config === null || config === void 0 ? void 0 : (_config$ui = config.ui) === null || _config$ui === void 0 ? void 0 : _config$ui.preferLargeActionButtons) !== null && _config$ui$preferLarg !== void 0 ? _config$ui$preferLarg : false;
  var emailIsValid = isValidEmail(email);
  var handleContinue = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
      return _regeneratorRuntime().wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            if (!(emailIsValid && onContinue)) {
              _context.next = 8;
              break;
            }
            setLoading(true);
            _context.prev = 2;
            _context.next = 5;
            return Promise.resolve(onContinue(email));
          case 5:
            _context.prev = 5;
            setLoading(false);
            return _context.finish(5);
          case 8:
          case "end":
            return _context.stop();
        }
      }, _callee, null, [[2,, 5, 8]]);
    }));
    return function handleContinue() {
      return _ref.apply(this, arguments);
    };
  }();
  var handleKeyDown = function handleKeyDown(e) {
    if (e.key === "Enter") {
      handleContinue();
    }
  };
  var buttonDisabled = !emailIsValid;
  var buttonClass = clsx("transition-all duration-300", (emailIsValid || useContinueButton) && "bg-primary-light dark:bg-primary-dark hover:bg-primary-light/90 dark:hover:bg-primary-dark/90 text-primary-text-light dark:text-primary-text-dark");
  return jsxs("div", {
    className: clsx("w-full items-center justify-center space-y-3", useContinueButton ? "flex flex-col" : "flex flex-row"),
    children: [jsxs("div", {
      className: clsx("w-full", !useContinueButton && "relative flex items-center"),
      children: [jsx(Input, {
        type: "email",
        placeholder: "Enter your email",
        value: email,
        onChange: function onChange(e) {
          return setEmail(e.target.value);
        },
        onKeyDown: handleKeyDown,
        className: "w-full py-3 px-4 rounded-md text-inherit placeholder-icon-text-light dark:placeholder-icon-text-dark bg-button-light dark:bg-button-dark border border-modal-background-dark/20 dark:border-modal-background-light/20 focus:outline-primary-light focus:dark:outline-primary-dark focus:outline-[1px] focus:outline-offset-0 box-border"
      }), !useContinueButton && jsx(IconButton, {
        icon: faArrowRight,
        onClick: handleContinue,
        disabled: buttonDisabled,
        loading: loading,
        className: clsx("absolute right-2 w-6 h-6", buttonClass),
        spinnerClassName: "text-primary-text-light dark:text-primary-text-dark"
      })]
    }), useContinueButton && jsx(ActionButton, {
      onClick: handleContinue,
      disabled: buttonDisabled,
      loading: loading,
      className: clsx("w-full", buttonClass),
      spinnerClassName: "text-primary-text-light dark:text-primary-text-dark",
      children: "Continue"
    })]
  });
}

export { EmailInput };
//# sourceMappingURL=Email.mjs.map