@turnkey/react-wallet-kit/dist/components/auth/Email.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 react$1 = require('@headlessui/react');
var Buttons = require('../design/Buttons.js');
var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
var clsx = require('clsx');
var Hook = require('../../providers/client/Hook.js');

function isValidEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
function EmailInput(props) {
  const {
    onContinue
  } = props;
  const {
    config
  } = Hook.useTurnkey();
  const [loading, setLoading] = react.useState(false);
  const [email, setEmail] = react.useState("");
  const useContinueButton = config?.ui?.preferLargeActionButtons ?? false;
  const emailIsValid = isValidEmail(email);
  const handleContinue = async () => {
    if (emailIsValid && onContinue) {
      setLoading(true);
      try {
        await Promise.resolve(onContinue(email));
      } finally {
        setLoading(false);
      }
    }
  };
  const handleKeyDown = e => {
    if (e.key === "Enter") {
      handleContinue();
    }
  };
  const buttonDisabled = !emailIsValid;
  const 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 jsxRuntime.jsxs("div", {
    className: clsx("w-full items-center justify-center space-y-3", useContinueButton ? "flex flex-col" : "flex flex-row"),
    children: [jsxRuntime.jsxs("div", {
      className: clsx("w-full", !useContinueButton && "relative flex items-center"),
      children: [jsxRuntime.jsx(react$1.Input, {
        type: "email",
        placeholder: "Enter your email",
        value: email,
        onChange: e => 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 && jsxRuntime.jsx(Buttons.IconButton, {
        icon: freeSolidSvgIcons.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 && jsxRuntime.jsx(Buttons.ActionButton, {
      onClick: handleContinue,
      disabled: buttonDisabled,
      loading: loading,
      className: clsx("w-full", buttonClass),
      spinnerClassName: "text-primary-text-light dark:text-primary-text-dark",
      children: "Continue"
    })]
  });
}

exports.EmailInput = EmailInput;
//# sourceMappingURL=Email.js.map