@turnkey/react-wallet-kit
Version:
The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.
254 lines (251 loc) • 12.6 kB
JavaScript
import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../_virtual/_rollupPluginBabelHelpers.mjs';
import { jsx, jsxs } from 'react/jsx-runtime';
import { BaseButton } from '../../design/Buttons.mjs';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faMobileScreen, faLaptop, faCheck, faCopy } from '@fortawesome/free-solid-svg-icons';
import { useState, useRef, useEffect } from 'react';
import clsx from 'clsx';
import { SuccessPage } from '../../design/Success.mjs';
import { useModal } from '../../../providers/modal/Hook.mjs';
import { useTurnkey } from '../../../providers/client/Hook.mjs';
import { findWalletConnectProvider, useDebouncedCallback } from '../../../utils/utils.mjs';
import { QRCodeDisplay } from './QRCodeDisplay.mjs';
function DesktopWalletConnectScreen(props) {
var _inputProvider$connec, _provider$connectedAd, _provider$connectedAd2, _provider$uri, _provider$info$icon;
var inputProvider = props.provider,
onAction = props.onAction,
onDisconnect = props.onDisconnect,
onSelectAllWallets = props.onSelectAllWallets,
successPageDuration = props.successPageDuration;
var _useModal = useModal(),
pushPage = _useModal.pushPage,
popPages = _useModal.popPages,
closeModal = _useModal.closeModal,
isMobile = _useModal.isMobile;
var _useTurnkey = useTurnkey(),
walletProviders = _useTurnkey.walletProviders;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isDisconnecting = _useState2[0],
setIsDisconnecting = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
isConnecting = _useState4[0],
setIsConnecting = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
disconnectError = _useState6[0],
setDisconnectError = _useState6[1];
var _useState7 = useState(((_inputProvider$connec = inputProvider.connectedAddresses) === null || _inputProvider$connec === void 0 ? void 0 : _inputProvider$connec.length) > 0),
_useState8 = _slicedToArray(_useState7, 2),
showConnectedScreen = _useState8[0],
setShowConnectedScreen = _useState8[1];
var _useState9 = useState(false),
_useState0 = _slicedToArray(_useState9, 2),
showCopied = _useState0[0],
setShowCopied = _useState0[1];
// Use a ref to track the latest provider for use in callbacks
var latestProviderRef = useRef(null);
// Find the current provider state
var provider = findWalletConnectProvider(walletProviders, inputProvider.chainInfo.namespace);
// if provider is not found then that means that the user entered this screen
// while WalletConnect was still initializing, and then it failed to initialize
useEffect(function () {
if (!provider) {
// we have to go back two pages here since thats the screen
// we get wallet providers from state
popPages(2);
}
}, [provider, popPages]);
var connectedAccount = (_provider$connectedAd = provider === null || provider === void 0 ? void 0 : (_provider$connectedAd2 = provider.connectedAddresses) === null || _provider$connectedAd2 === void 0 ? void 0 : _provider$connectedAd2[0]) !== null && _provider$connectedAd !== void 0 ? _provider$connectedAd : null;
// Initial connection effect
useEffect(function () {
if (provider) {
latestProviderRef.current = provider;
// we don't try to connect if WalletConnect is still initializing or we are already connecting
if (!isConnecting && !provider.isLoading) {
var _provider$connectedAd3;
setShowConnectedScreen(((_provider$connectedAd3 = provider.connectedAddresses) === null || _provider$connectedAd3 === void 0 ? void 0 : _provider$connectedAd3.length) > 0);
runAction(provider);
}
}
}, [provider]);
// Handle the connection action - uses the ref to get latest provider
var runAction = useDebouncedCallback(/*#__PURE__*/function () {
var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(targetProvider) {
return _regenerator().w(function (_context) {
while (1) switch (_context.p = _context.n) {
case 0:
setIsConnecting(true);
_context.p = 1;
_context.n = 2;
return onAction(targetProvider);
case 2:
pushPage({
key: "Connect Success",
content: jsx(SuccessPage, {
text: "Successfully connected to WalletConnect!",
onComplete: closeModal,
duration: successPageDuration
}),
preventBack: true,
showTitle: false
});
_context.n = 4;
break;
case 3:
_context.p = 3;
_context.v;
case 4:
_context.p = 4;
setIsConnecting(false);
return _context.f(4);
case 5:
return _context.a(2);
}
}, _callee, null, [[1, 3, 4, 5]]);
}));
return function (_x) {
return _ref.apply(this, arguments);
};
}(), 100);
var handleCopy = function handleCopy() {
setShowCopied(true);
navigator.clipboard.writeText("".concat(provider === null || provider === void 0 ? void 0 : provider.uri));
setTimeout(function () {
setShowCopied(false);
}, 1500);
};
// Handle disconnection - uses the ref to get the correct provider after state update
var handleDisconnect = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
var _t2;
return _regenerator().w(function (_context2) {
while (1) switch (_context2.p = _context2.n) {
case 0:
setIsDisconnecting(true);
setDisconnectError(false);
_context2.p = 1;
_context2.n = 2;
return onDisconnect === null || onDisconnect === void 0 ? void 0 : onDisconnect(latestProviderRef.current);
case 2:
_context2.n = 4;
break;
case 3:
_context2.p = 3;
_t2 = _context2.v;
console.error("Error disconnecting wallet:", _t2);
setDisconnectError(true);
case 4:
_context2.p = 4;
setIsDisconnecting(false);
setShowConnectedScreen(false);
return _context2.f(4);
case 5:
return _context2.a(2);
}
}, _callee2, null, [[1, 3, 4, 5]]);
}));
return function handleDisconnect() {
return _ref2.apply(this, arguments);
};
}();
return jsx("div", {
className: "p-3 flex flex-col items-center",
children: showConnectedScreen ? jsxs("div", {
className: clsx("mt-8 flex flex-col items-center gap-3", isMobile ? "w-full" : "w-96"),
children: [jsxs("div", {
className: "w-full justify-between flex items-center flex-1",
children: [jsx("div", {
className: clsx("flex items-center justify-center bg-icon-background-light dark:bg-icon-background-dark rounded-full p-2 text-icon-text-light dark:text-icon-text-dark", isMobile ? "size-18" : "size-24"),
children: jsx(FontAwesomeIcon, {
icon: faMobileScreen,
size: isMobile ? "3x" : "4x"
})
}), jsxs("div", {
className: "flex flex-row items-center justify-center space-x-2.5 font-medium text-icon-text-light dark:text-icon-text-dark",
children: [jsxs("div", {
className: "flex items-center justify-center",
children: [jsx("img", {
className: "size-5",
src: provider === null || provider === void 0 ? void 0 : provider.info.icon,
alt: "Wallet connect logo"
}), jsx("img", {
className: "size-5 absolute animate-ping",
src: provider === null || provider === void 0 ? void 0 : provider.info.icon,
alt: "Wallet connect logo"
})]
}), jsxs("span", {
children: [connectedAccount === null || connectedAccount === void 0 ? void 0 : connectedAccount.slice(0, 3), "...", connectedAccount === null || connectedAccount === void 0 ? void 0 : connectedAccount.slice(-3)]
})]
}), jsx("div", {
className: clsx("flex items-center justify-center bg-icon-background-light dark:bg-icon-background-dark rounded-full p-2 text-icon-text-light dark:text-icon-text-dark", isMobile ? "size-18" : "size-24"),
children: jsx(FontAwesomeIcon, {
icon: faLaptop,
size: isMobile ? "3x" : "4x"
})
})]
}), jsx("div", {
className: clsx("flex flex-row items-center mt-5 text-2xl font-bold text-center"),
children: "Already connected"
}), jsxs("div", {
className: "text-icon-text-light dark:text-icon-text-dark text-center text-xs flex flex-col space-y-2 !p-0",
children: [jsx("span", {
children: "Please open the wallet app on your phone to sign the message."
}), isDisconnecting ? jsx("span", {
className: "text-danger-light dark:text-danger-dark opacity-50",
children: "Disconnecting..."
}) : disconnectError ? jsx("span", {
className: "text-danger-light dark:text-danger-dark opacity-50",
children: "Error disconnecting wallet."
}) : jsxs("span", {
children: ["Need to connect a different wallet?", " ", jsx("span", {
className: "text-danger-light dark:text-danger-dark cursor-pointer underline",
onClick: handleDisconnect,
children: "Disconnect"
}), " ", "this wallet first."]
})]
})]
}) : jsxs("div", {
className: clsx("mt-8 flex flex-col items-center gap-3", isMobile ? "w-full" : "w-96"),
children: [jsx(QRCodeDisplay, {
uri: provider !== null && provider !== void 0 && provider.isLoading ? "https://www.turnkey.com/" : (_provider$uri = provider === null || provider === void 0 ? void 0 : provider.uri) !== null && _provider$uri !== void 0 ? _provider$uri : "",
icon: (_provider$info$icon = provider === null || provider === void 0 ? void 0 : provider.info.icon) !== null && _provider$info$icon !== void 0 ? _provider$info$icon : "",
isLoading: !!(provider !== null && provider !== void 0 && provider.isLoading)
}), jsxs(BaseButton, {
onClick: handleCopy,
className: clsx("text-xs font-semibold bg-transparent border-none text-icon-text-light dark:text-icon-text-dark", "flex flex-row items-center gap-x-2 px-3 py-2 rounded-full transition-all", "hover:bg-icon-background-light dark:hover:bg-icon-background-dark active:scale-95", (provider === null || provider === void 0 ? void 0 : provider.isLoading) && "invisible pointer-events-none"),
children: [jsx("span", {
children: "Copy link"
}), jsxs("div", {
className: "relative",
children: [jsx(FontAwesomeIcon, {
icon: showCopied ? faCheck : faCopy,
className: clsx("transition-colors", showCopied ? "text-success-light dark:text-success-dark" : "text-icon-text-light dark:text-icon-text-dark")
}), showCopied && jsx(FontAwesomeIcon, {
icon: faCheck,
className: "absolute inset-0 m-auto text-success-light dark:text-success-dark animate-ping"
})]
})]
}), jsx("div", {
className: clsx("text-2xl font-bold text-center"),
children: provider !== null && provider !== void 0 && provider.isLoading ? "Initializing WalletConnect..." : "Use your phone"
}), jsx("div", {
className: "text-icon-text-light dark:text-icon-text-dark text-center !p-0",
children: provider !== null && provider !== void 0 && provider.isLoading ? "Preparing your connection. This will only take a moment." : "Scan this QR code with your WalletConnect-compatible wallet to connect"
}), onSelectAllWallets && jsxs("span", {
className: "text-icon-text-light dark:text-icon-text-dark text-center text-xs !p-0 mt-2",
children: ["Not what you're looking for?", " ", jsx("span", {
className: "text-primary-light dark:text-primary-dark cursor-pointer underline",
onClick: function onClick() {
popPages(2);
onSelectAllWallets();
},
children: "See all WalletConnect apps."
})]
})]
})
});
}
export { DesktopWalletConnectScreen };
//# sourceMappingURL=DesktopWalletConnectScreen.mjs.map