@turnkey/react-wallet-kit
Version:
The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.
146 lines (143 loc) • 6.55 kB
JavaScript
import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import { Textarea } from '@headlessui/react';
import { WalletSource } from '@turnkey/core';
import { TurnkeyError, TurnkeyErrorCodes } from '@turnkey/sdk-types';
import { ActionButton } from '../design/Buttons.mjs';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faWallet } from '@fortawesome/free-solid-svg-icons';
import { useState, useRef, useEffect } from 'react';
import { useModal } from '../../providers/modal/Hook.mjs';
import { useTurnkey } from '../../providers/client/Hook.mjs';
import { SuccessPage } from '../design/Success.mjs';
import clsx from 'clsx';
function SignMessageModal(props) {
var _walletAccount$addres;
var message = props.message,
walletAccount = props.walletAccount,
_props$subText = props.subText,
subText = _props$subText === void 0 ? "Use your wallet to sign this message" : _props$subText,
stampWith = props.stampWith,
successPageDuration = props.successPageDuration,
onSuccess = props.onSuccess,
onError = props.onError;
var _useTurnkey = useTurnkey(),
signMessage = _useTurnkey.signMessage;
var _useModal = useModal(),
pushPage = _useModal.pushPage,
closeModal = _useModal.closeModal,
isMobile = _useModal.isMobile;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
loading = _useState2[0],
setLoading = _useState2[1];
var textareaRef = useRef(null);
useEffect(function () {
var textarea = textareaRef.current;
if (textarea) {
textarea.style.height = "auto"; // reset height
textarea.style.height = "".concat(Math.min(textarea.scrollHeight, 288), "px"); // max-h-72 = 288px
}
}, [message]);
var handleSign = /*#__PURE__*/function () {
var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
var result, tkError;
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.prev = 0;
setLoading(true);
_context.next = 4;
return signMessage(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
message: message,
walletAccount: walletAccount
}, (props === null || props === void 0 ? void 0 : props.encoding) && {
encoding: props.encoding
}), (props === null || props === void 0 ? void 0 : props.hashFunction) && {
hashFunction: props.hashFunction
}), (props === null || props === void 0 ? void 0 : props.addEthereumPrefix) && {
addEthereumPrefix: props.addEthereumPrefix
}), stampWith && {
stampWith: stampWith
}));
case 4:
result = _context.sent;
handleSuccess(result);
_context.next = 11;
break;
case 8:
_context.prev = 8;
_context.t0 = _context["catch"](0);
if (_context.t0 instanceof TurnkeyError) onError(_context.t0);else {
tkError = new TurnkeyError("Failed to sign message", TurnkeyErrorCodes.SIGN_MESSAGE_ERROR);
onError(tkError);
}
case 11:
_context.prev = 11;
setLoading(false);
return _context.finish(11);
case 14:
case "end":
return _context.stop();
}
}, _callee, null, [[0, 8, 11, 14]]);
}));
return function handleSign() {
return _ref.apply(this, arguments);
};
}();
var handleSuccess = function handleSuccess(result) {
onSuccess(result); // Run the success callback first before showing the success page.
if (!successPageDuration) {
closeModal();
return;
}
pushPage({
key: "success",
content: jsx(SuccessPage, {
text: "Message signed successfully!",
duration: successPageDuration,
onComplete: function onComplete() {
closeModal();
}
}),
preventBack: true,
showTitle: false
});
};
return jsxs("div", {
className: clsx("flex flex-col items-center", isMobile ? "w-full py-4" : "w-80 p-4"),
children: [jsx("p", {
className: "mt-3 text-sm text-icon-text-light/70 dark:text-icon-text-dark/70",
children: subText
}), 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: [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: jsx(FontAwesomeIcon, {
icon: faWallet
})
}), ((_walletAccount$addres = walletAccount.address) === null || _walletAccount$addres === void 0 ? void 0 : _walletAccount$addres.length) > 8 ? "".concat(walletAccount.address.slice(0, 4), "...").concat(walletAccount.address.slice(-4)) : walletAccount.address, walletAccount.source === WalletSource.Connected && 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"
})]
}), jsx("div", {
className: "w-full flex flex-col mt-2 px-3 space-y-2",
children: jsx(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
})
}), jsx(ActionButton, {
onClick: handleSign,
spinnerClassName: "text-primary-text-light dark:text-primary-text-dark",
loading: loading,
loadingText: walletAccount.source === 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"
})]
});
}
export { SignMessageModal };
//# sourceMappingURL=Message.mjs.map