@turnkey/react-wallet-kit/dist/components/user/UpdateEmail.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 react$1 = require('@headlessui/react');
var Hook$1 = require('../../providers/modal/Hook.js');
var Hook = require('../../providers/client/Hook.js');
var Buttons = require('../design/Buttons.js');
var react = require('react');
var clsx = require('clsx');
var OTP = require('../auth/OTP.js');
var Success = require('../design/Success.js');
var core = require('@turnkey/core');

function UpdateEmail(params) {
  const {
    onSuccess,
    onError,
    successPageDuration
  } = params;
  const {
    user,
    updateUserEmail,
    initOtp,
    verifyOtp
  } = Hook.useTurnkey();
  const {
    isMobile,
    pushPage,
    closeModal
  } = Hook$1.useModal();
  const email = user?.userEmail || "";
  const [emailInput, setEmailInput] = react.useState(email);
  const [isLoading, setIsLoading] = react.useState(false);
  const isValidEmail = e => {
    return e.length > 0 && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e) && e !== email;
  };
  const handleContinue = async () => {
    if (isValidEmail(emailInput)) {
      try {
        setIsLoading(true);
        const otpId = await initOtp({
          otpType: core.OtpType.Email,
          contact: emailInput
        });
        pushPage({
          key: "Verify OTP",
          content: jsxRuntime.jsx(OTP.OtpVerification, {
            contact: emailInput,
            otpId: otpId,
            otpType: core.OtpType.Email,
            onContinue: async otpCode => {
              const {
                verificationToken
              } = await verifyOtp({
                otpId,
                otpCode,
                contact: emailInput,
                otpType: core.OtpType.Email
              });
              const res = await updateUserEmail({
                email: emailInput,
                verificationToken,
                userId: user.userId
              });
              handleSuccess(res);
            }
          }),
          showTitle: false
        });
      } catch (error) {
        onError(error);
      } finally {
        setIsLoading(false);
      }
    }
  };
  const handleSuccess = userId => {
    onSuccess(userId);
    if (!successPageDuration) {
      closeModal();
      return;
    }
    pushPage({
      key: "success",
      content: jsxRuntime.jsx(Success.SuccessPage, {
        text: "Email updated successfully!",
        duration: successPageDuration,
        onComplete: () => {
          closeModal();
        }
      }),
      preventBack: true,
      showTitle: false
    });
  };
  const handleKeyDown = e => {
    if (e.key === "Enter") {
      handleContinue();
    }
  };
  return jsxRuntime.jsxs("div", {
    className: clsx("mt-8", isMobile ? "w-full" : "w-72"),
    children: [jsxRuntime.jsxs("div", {
      className: "my-6 flex flex-col items-center",
      children: [jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
        icon: freeSolidSvgIcons.faEnvelope,
        size: "2xl"
      }), jsxRuntime.jsx("div", {
        className: "text-2xl font-bold py-2 text-center",
        children: params?.title ? params.title : "Update your email"
      }), params?.subTitle && jsxRuntime.jsx("div", {
        className: "text-sm text-icon-text-light dark:text-icon-text-dark text-center !p-0",
        children: params.subTitle
      })]
    }), jsxRuntime.jsxs("div", {
      className: "flex flex-col gap-4 my-3",
      children: [jsxRuntime.jsx(react$1.Input, {
        type: "email",
        placeholder: email ? email : "your@email.com",
        className: "w-full py-3 px-4 rounded-md text-inherit 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",
        value: emailInput,
        onChange: e => setEmailInput(e.target.value),
        onKeyDown: handleKeyDown
      }), jsxRuntime.jsx(Buttons.ActionButton, {
        onClick: handleContinue,
        disabled: !isValidEmail(emailInput),
        loading: isLoading,
        className: "w-full max-w-md bg-primary-light dark:bg-primary-dark text-primary-text-light dark:text-primary-text-dark",
        spinnerClassName: "text-primary-text-light dark:text-primary-text-dark",
        children: "Continue"
      })]
    })]
  });
}

exports.UpdateEmail = UpdateEmail;
//# sourceMappingURL=UpdateEmail.js.map