@turnkey/react-wallet-kit/dist/components/user/UpdateUserName.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 { jsxs, jsx } from 'react/jsx-runtime';
import { faUser } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useModal } from '../../providers/modal/Hook.mjs';
import { useTurnkey } from '../../providers/client/Hook.mjs';
import { ActionButton } from '../design/Buttons.mjs';
import { useState } from 'react';
import { Input } from '@headlessui/react';
import clsx from 'clsx';
import { SuccessPage } from '../design/Success.mjs';

function UpdateUserName(params) {
  var _useTurnkey = useTurnkey(),
    user = _useTurnkey.user,
    updateUserName = _useTurnkey.updateUserName;
  var _useModal = useModal(),
    isMobile = _useModal.isMobile,
    pushPage = _useModal.pushPage,
    closeModal = _useModal.closeModal;
  var userName = (user === null || user === void 0 ? void 0 : user.userName) || "";
  var _useState = useState(userName),
    _useState2 = _slicedToArray(_useState, 2),
    userNameInput = _useState2[0],
    setUserNameInput = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    loading = _useState4[0],
    setLoading = _useState4[1];
  var onSuccess = params.onSuccess,
    onError = params.onError,
    successPageDuration = params.successPageDuration;
  var isValidUserName = function isValidUserName(un) {
    return un.length > 0 && un !== userName;
  };
  var handleContinue = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
      var res, _t;
      return _regenerator().w(function (_context) {
        while (1) switch (_context.p = _context.n) {
          case 0:
            if (!isValidUserName(userNameInput)) {
              _context.n = 5;
              break;
            }
            setLoading(true);
            _context.p = 1;
            _context.n = 2;
            return updateUserName({
              userName: userNameInput,
              userId: params.userId,
              stampWith: params === null || params === void 0 ? void 0 : params.stampWith,
              organizationId: params.organizationId
            });
          case 2:
            res = _context.v;
            handleSuccess(res);
            _context.n = 4;
            break;
          case 3:
            _context.p = 3;
            _t = _context.v;
            onError(_t);
          case 4:
            _context.p = 4;
            setLoading(false);
            return _context.f(4);
          case 5:
            return _context.a(2);
        }
      }, _callee, null, [[1, 3, 4, 5]]);
    }));
    return function handleContinue() {
      return _ref.apply(this, arguments);
    };
  }();
  var handleSuccess = function handleSuccess(userId) {
    onSuccess(userId);
    if (!successPageDuration) {
      closeModal();
      return;
    }
    pushPage({
      key: "success",
      content: jsx(SuccessPage, {
        text: "User name updated successfully!",
        duration: successPageDuration,
        onComplete: function onComplete() {
          closeModal();
        }
      }),
      preventBack: true,
      showTitle: false
    });
  };
  var handleKeyDown = function handleKeyDown(e) {
    if (e.key === "Enter") {
      handleContinue();
    }
  };
  return jsxs("div", {
    className: clsx("mt-8", isMobile ? "w-full" : "w-72"),
    children: [jsxs("div", {
      className: "my-6 flex flex-col items-center",
      children: [jsx(FontAwesomeIcon, {
        icon: faUser,
        size: "2xl"
      }), jsx("div", {
        className: "text-2xl font-bold py-2 text-center",
        children: params !== null && params !== void 0 && params.title ? params.title : "Update your user name"
      }), (params === null || params === void 0 ? void 0 : params.subTitle) && jsx("div", {
        className: "text-sm text-icon-text-light dark:text-icon-text-dark text-center !p-0",
        children: params.subTitle
      })]
    }), jsxs("div", {
      className: "flex flex-col gap-4 my-3",
      children: [jsx(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: function onChange(e) {
          return setUserNameInput(e.target.value);
        },
        onKeyDown: handleKeyDown
      }), jsx(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"
      })]
    })]
  });
}

export { UpdateUserName };
//# sourceMappingURL=UpdateUserName.mjs.map