@turnkey/react-wallet-kit
Version:
The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.
205 lines (201 loc) • 9.45 kB
JavaScript
'use strict';
var jsxRuntime = require('react/jsx-runtime');
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 clsx = require('clsx');
var Success = require('../../design/Success.js');
var Hook = require('../../../providers/modal/Hook.js');
var Hook$1 = require('../../../providers/client/Hook.js');
var utils = require('../../../utils/utils.js');
var QRCodeDisplay = require('./QRCodeDisplay.js');
function DesktopWalletConnectScreen(props) {
const {
provider: inputProvider,
onAction,
onDisconnect,
onSelectAllWallets,
successPageDuration
} = props;
const {
pushPage,
popPages,
closeModal,
isMobile
} = Hook.useModal();
const {
walletProviders
} = Hook$1.useTurnkey();
const [isDisconnecting, setIsDisconnecting] = react.useState(false);
const [isConnecting, setIsConnecting] = react.useState(false);
const [disconnectError, setDisconnectError] = react.useState(false);
const [showConnectedScreen, setShowConnectedScreen] = react.useState(inputProvider.connectedAddresses?.length > 0);
const [showCopied, setShowCopied] = react.useState(false);
// Use a ref to track the latest provider for use in callbacks
const latestProviderRef = react.useRef(null);
// Find the current provider state
const provider = utils.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
react.useEffect(() => {
if (!provider) {
// we have to go back two pages here since thats the screen
// we get wallet providers from state
popPages(2);
}
}, [provider, popPages]);
const connectedAccount = provider?.connectedAddresses?.[0] ?? null;
// Initial connection effect
react.useEffect(() => {
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) {
setShowConnectedScreen(provider.connectedAddresses?.length > 0);
runAction(provider);
}
}
}, [provider]);
// Handle the connection action - uses the ref to get latest provider
const runAction = utils.useDebouncedCallback(async targetProvider => {
setIsConnecting(true);
try {
await onAction(targetProvider);
pushPage({
key: "Connect Success",
content: jsxRuntime.jsx(Success.SuccessPage, {
text: "Successfully connected to WalletConnect!",
onComplete: closeModal,
duration: successPageDuration
}),
preventBack: true,
showTitle: false
});
} catch {
// noop
} finally {
setIsConnecting(false);
}
}, 100);
const handleCopy = () => {
setShowCopied(true);
navigator.clipboard.writeText(`${provider?.uri}`);
setTimeout(() => {
setShowCopied(false);
}, 1500);
};
// Handle disconnection - uses the ref to get the correct provider after state update
const handleDisconnect = async () => {
setIsDisconnecting(true);
setDisconnectError(false);
try {
// Use the current provider from ref for disconnect
await onDisconnect?.(latestProviderRef.current);
} catch (err) {
console.error("Error disconnecting wallet:", err);
setDisconnectError(true);
} finally {
setIsDisconnecting(false);
setShowConnectedScreen(false);
}
};
return jsxRuntime.jsx("div", {
className: "p-3 flex flex-col items-center",
children: showConnectedScreen ? jsxRuntime.jsxs("div", {
className: clsx("mt-8 flex flex-col items-center gap-3", isMobile ? "w-full" : "w-96"),
children: [jsxRuntime.jsxs("div", {
className: "w-full justify-between flex items-center flex-1",
children: [jsxRuntime.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: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
icon: freeSolidSvgIcons.faMobileScreen,
size: isMobile ? "3x" : "4x"
})
}), jsxRuntime.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: [jsxRuntime.jsxs("div", {
className: "flex items-center justify-center",
children: [jsxRuntime.jsx("img", {
className: "size-5",
src: provider?.info.icon,
alt: "Wallet connect logo"
}), jsxRuntime.jsx("img", {
className: "size-5 absolute animate-ping",
src: provider?.info.icon,
alt: "Wallet connect logo"
})]
}), jsxRuntime.jsxs("span", {
children: [connectedAccount?.slice(0, 3), "...", connectedAccount?.slice(-3)]
})]
}), jsxRuntime.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: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
icon: freeSolidSvgIcons.faLaptop,
size: isMobile ? "3x" : "4x"
})
})]
}), jsxRuntime.jsx("div", {
className: clsx("flex flex-row items-center mt-5 text-2xl font-bold text-center"),
children: "Already connected"
}), jsxRuntime.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: [jsxRuntime.jsx("span", {
children: "Please open the wallet app on your phone to sign the message."
}), isDisconnecting ? jsxRuntime.jsx("span", {
className: "text-danger-light dark:text-danger-dark opacity-50",
children: "Disconnecting..."
}) : disconnectError ? jsxRuntime.jsx("span", {
className: "text-danger-light dark:text-danger-dark opacity-50",
children: "Error disconnecting wallet."
}) : jsxRuntime.jsxs("span", {
children: ["Need to connect a different wallet?", " ", jsxRuntime.jsx("span", {
className: "text-danger-light dark:text-danger-dark cursor-pointer underline",
onClick: handleDisconnect,
children: "Disconnect"
}), " ", "this wallet first."]
})]
})]
}) : jsxRuntime.jsxs("div", {
className: clsx("mt-8 flex flex-col items-center gap-3", isMobile ? "w-full" : "w-96"),
children: [jsxRuntime.jsx(QRCodeDisplay.QRCodeDisplay, {
uri: provider?.isLoading ? "https://www.turnkey.com/" : provider?.uri ?? "",
icon: provider?.info.icon ?? "",
isLoading: !!provider?.isLoading
}), jsxRuntime.jsxs(Buttons.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?.isLoading && "invisible pointer-events-none"),
children: [jsxRuntime.jsx("span", {
children: "Copy link"
}), jsxRuntime.jsxs("div", {
className: "relative",
children: [jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
icon: showCopied ? freeSolidSvgIcons.faCheck : freeSolidSvgIcons.faCopy,
className: clsx("transition-colors", showCopied ? "text-success-light dark:text-success-dark" : "text-icon-text-light dark:text-icon-text-dark")
}), showCopied && jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
icon: freeSolidSvgIcons.faCheck,
className: "absolute inset-0 m-auto text-success-light dark:text-success-dark animate-ping"
})]
})]
}), jsxRuntime.jsx("div", {
className: clsx("text-2xl font-bold text-center"),
children: provider?.isLoading ? "Initializing WalletConnect..." : "Use your phone"
}), jsxRuntime.jsx("div", {
className: "text-icon-text-light dark:text-icon-text-dark text-center !p-0",
children: provider?.isLoading ? "Preparing your connection. This will only take a moment." : "Scan this QR code with your WalletConnect-compatible wallet to connect"
}), onSelectAllWallets && jsxRuntime.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?", " ", jsxRuntime.jsx("span", {
className: "text-primary-light dark:text-primary-dark cursor-pointer underline",
onClick: () => {
popPages(2);
onSelectAllWallets();
},
children: "See all WalletConnect apps."
})]
})]
})
});
}
exports.DesktopWalletConnectScreen = DesktopWalletConnectScreen;
//# sourceMappingURL=DesktopWalletConnectScreen.js.map