@turnkey/react-wallet-kit/dist/components/sign/Message.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$1 = require('@headlessui/react');
var core = require('@turnkey/core');
var sdkTypes = require('@turnkey/sdk-types');
var Buttons = require('../design/Buttons.js');
var reactFontawesome = require('@fortawesome/react-fontawesome');
var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
var react = require('react');
var Hook$1 = require('../../providers/modal/Hook.js');
var Hook = require('../../providers/client/Hook.js');
var Success = require('../design/Success.js');
var clsx = require('clsx');

function SignMessageModal(props) {
  const {
    message,
    walletAccount,
    subText = "Use your wallet to sign this message",
    stampWith,
    successPageDuration,
    organizationId,
    onSuccess,
    onError
  } = props;
  const {
    signMessage
  } = Hook.useTurnkey();
  const {
    pushPage,
    closeModal,
    isMobile
  } = Hook$1.useModal();
  const [loading, setLoading] = react.useState(false);
  const textareaRef = react.useRef(null);
  react.useEffect(() => {
    const textarea = textareaRef.current;
    if (textarea) {
      textarea.style.height = "auto"; // reset height
      textarea.style.height = `${Math.min(textarea.scrollHeight, 288)}px`; // max-h-72 = 288px
    }
  }, [message]);
  const handleSign = async () => {
    try {
      setLoading(true);
      const result = await signMessage({
        message,
        walletAccount,
        ...(props?.encoding && {
          encoding: props.encoding
        }),
        ...(props?.hashFunction && {
          hashFunction: props.hashFunction
        }),
        ...(props?.addEthereumPrefix && {
          addEthereumPrefix: props.addEthereumPrefix
        }),
        ...(stampWith && {
          stampWith
        }),
        ...(organizationId && {
          organizationId
        })
      });
      handleSuccess(result);
    } catch (error) {
      if (error instanceof sdkTypes.TurnkeyError) onError(error);else {
        const tkError = new sdkTypes.TurnkeyError("Failed to sign message", sdkTypes.TurnkeyErrorCodes.SIGN_MESSAGE_ERROR);
        onError(tkError);
      }
    } finally {
      setLoading(false);
    }
  };
  const handleSuccess = result => {
    onSuccess(result); // Run the success callback first before showing the success page.
    if (!successPageDuration) {
      closeModal();
      return;
    }
    pushPage({
      key: "success",
      content: jsxRuntime.jsx(Success.SuccessPage, {
        text: "Message signed successfully!",
        duration: successPageDuration,
        onComplete: () => {
          closeModal();
        }
      }),
      preventBack: true,
      showTitle: false
    });
  };
  return jsxRuntime.jsxs("div", {
    className: clsx("flex flex-col items-center", isMobile ? "w-full py-4" : "w-80 p-4"),
    children: [jsxRuntime.jsx("p", {
      className: "mt-3 text-sm text-icon-text-light/70 dark:text-icon-text-dark/70",
      children: subText
    }), jsxRuntime.jsxs("div", {
      className: "w-full flex flex-row items-center mt-1 gap-1.5 text-sm text-icon-text-light/70 dark:text-icon-text-dark/70",
      children: [jsxRuntime.jsx("div", {
        className: "flex items-center justify-center w-7 h-7 rounded-full bg-icon-background-light dark:bg-icon-background-dark text-icon-text-light dark:text-icon-text-dark",
        children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
          icon: freeSolidSvgIcons.faWallet
        })
      }), walletAccount.address?.length > 8 ? `${walletAccount.address.slice(0, 4)}...${walletAccount.address.slice(-4)}` : walletAccount.address, walletAccount.source === core.WalletSource.Connected && jsxRuntime.jsx("div", {
        className: "rounded-full py-1 px-2 flex border border-primary-light/50 dark:border-primary-dark/50 text-primary-light dark:text-primary-dark text-xs font-medium",
        children: "External"
      })]
    }), jsxRuntime.jsx("div", {
      className: "w-full flex flex-col mt-2 px-3 space-y-2",
      children: jsxRuntime.jsx(react$1.Textarea, {
        ref: textareaRef,
        className: "p-2 min-h-12 max-h-72 rounded-md tk-scrollbar 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 focus:outline-none resize-none overflow-y-auto",
        value: message,
        readOnly: true
      })
    }), jsxRuntime.jsx(Buttons.ActionButton, {
      onClick: handleSign,
      name: "sign-button",
      spinnerClassName: "text-primary-text-light dark:text-primary-text-dark",
      loading: loading,
      loadingText: walletAccount.source === core.WalletSource.Connected ? "Check your external wallet!" : "Signing...",
      className: "mt-4 bg-primary-light dark:bg-primary-dark text-primary-text-light dark:text-primary-text-dark w-full",
      children: "Sign"
    })]
  });
}

exports.SignMessageModal = SignMessageModal;
//# sourceMappingURL=Message.js.map