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

function RemovePhoneNumber(params) {
  const {
    user,
    removeUserPhoneNumber
  } = Hook.useTurnkey();
  const {
    isMobile,
    closeModal,
    pushPage
  } = Hook$1.useModal();
  const [isLoading, setIsLoading] = react.useState(false);
  const {
    onSuccess,
    onError,
    successPageDuration,
    userId = user?.userId
  } = params;
  const handleContinue = async () => {
    try {
      setIsLoading(true);
      const res = await removeUserPhoneNumber({
        userId: userId,
        stampWith: params.stampWith
      });
      handleSuccess(res);
    } 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: "Phone number removed successfully!",
        duration: successPageDuration,
        onComplete: () => {
          closeModal();
        }
      }),
      preventBack: true,
      showTitle: false
    });
  };
  return jsxRuntime.jsxs("div", {
    className: clsx("mt-8", isMobile ? "w-full" : "w-96"),
    children: [jsxRuntime.jsxs("div", {
      className: "mt-6 mb-5 flex flex-col items-center gap-3",
      children: [jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
        icon: freeSolidSvgIcons.faTriangleExclamation,
        size: "3x",
        className: "text-danger-light dark:text-danger-dark"
      }), jsxRuntime.jsx("div", {
        className: "text-2xl font-bold text-center",
        children: params?.title ? params.title : "Remove Phone Number"
      }), jsxRuntime.jsx("div", {
        className: "text-icon-text-light dark:text-icon-text-dark text-center !p-0",
        children: params?.subTitle ? params.subTitle : "This action is irreversible."
      }), jsxRuntime.jsxs("div", {
        className: "p-2 h-full mt-2 max-h-72 rounded-md border border-modal-background-dark/10 dark:border-modal-background-light/10 bg-icon-background-light dark:bg-icon-background-dark text-icon-text-light dark:text-icon-text-dark",
        children: [jsxRuntime.jsxs("div", {
          className: "text-sm font-mono!",
          children: ["Phone Number: ", user.userPhoneNumber]
        }), jsxRuntime.jsxs("div", {
          className: "text-sm font-mono!",
          children: ["User ID: ", user.userId]
        })]
      })]
    }), jsxRuntime.jsx("div", {
      className: "flex my-2 mt-0",
      children: jsxRuntime.jsx(Buttons.ActionButton, {
        onClick: handleContinue,
        loading: isLoading,
        className: "w-full max-w-md bg-danger-light dark:bg-danger-dark text-primary-text-light dark:text-primary-text-dark",
        spinnerClassName: "text-primary-text-light dark:text-primary-text-dark",
        children: "Remove Phone Number"
      })
    })]
  });
}

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