@turnkey/react-wallet-kit/dist/components/user/UpdateUserName.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 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 react$1 = require('@headlessui/react');
var clsx = require('clsx');
var Success = require('../design/Success.js');

function UpdateUserName(params) {
  const {
    user,
    updateUserName
  } = Hook.useTurnkey();
  const {
    isMobile,
    pushPage,
    closeModal
  } = Hook$1.useModal();
  const userName = user?.userName || "";
  const [userNameInput, setUserNameInput] = react.useState(userName);
  const [loading, setLoading] = react.useState(false);
  const {
    onSuccess,
    onError,
    successPageDuration
  } = params;
  const isValidUserName = un => {
    return un.length > 0 && un !== userName;
  };
  const handleContinue = async () => {
    if (isValidUserName(userNameInput)) {
      setLoading(true);
      try {
        const res = await updateUserName({
          userName: userNameInput,
          userId: params.userId,
          stampWith: params?.stampWith,
          organizationId: params.organizationId
        });
        handleSuccess(res);
      } catch (error) {
        onError(error);
      } finally {
        setLoading(false);
      }
    }
  };
  const handleSuccess = userId => {
    onSuccess(userId);
    if (!successPageDuration) {
      closeModal();
      return;
    }
    pushPage({
      key: "success",
      content: jsxRuntime.jsx(Success.SuccessPage, {
        text: "User name 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.faUser,
        size: "2xl"
      }), jsxRuntime.jsx("div", {
        className: "text-2xl font-bold py-2 text-center",
        children: params?.title ? params.title : "Update your user name"
      }), 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: "text",
        placeholder: userName,
        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: userNameInput,
        onChange: e => setUserNameInput(e.target.value),
        onKeyDown: handleKeyDown
      }), jsxRuntime.jsx(Buttons.ActionButton, {
        onClick: handleContinue,
        disabled: !isValidUserName(userNameInput),
        loading: loading,
        className: "w-full md: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.UpdateUserName = UpdateUserName;
//# sourceMappingURL=UpdateUserName.js.map