@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
40 lines (39 loc) • 3.15 kB
JavaScript
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ExternalLinkIcon } from "../../assets/icons";
import { OtherWallets } from "../../assets/logos";
import ScanIconWithLogos from "../../assets/scan-icon-with-logos";
import useLocales from "../../hooks/useLocales";
import { useWalletConnectModal } from "../../hooks/useWalletConnectModal";
import { useWalletConnectUri } from "../../hooks/useWalletConnectUri";
import { ROUTES } from "../../types/routes";
import { isWalletConnectConnector } from "../../utils";
import usePayContext from "../contexts/pay";
import Button from "../ui/Button";
import CopyToClipboard from "../ui/CopyToClipboard";
import CustomQRCode from "../ui/CustomQRCode";
import { OrDivider } from "../ui/Divider/OrDivider";
import { ModalContent, PageContent } from "../ui/Modal/styles";
export default function ConnectWithQRCode() {
const context = usePayContext();
const wallet = context.paymentState.selectedWallet;
const locales = useLocales({
CONNECTORNAME: wallet?.name,
});
const { open: openW3M, isOpen: isOpenW3M } = useWalletConnectModal();
const { uri: wcUri } = useWalletConnectUri();
if (!wallet)
return _jsx(_Fragment, { children: "Wallet not found" });
const uri = wcUri ? (wallet?.getWalletDeeplink?.(wcUri) ?? wcUri) : undefined;
const downloads = wallet?.downloadUrls;
const hasApps = downloads && Object.keys(downloads).length !== 0;
const showAdditionalOptions = isWalletConnectConnector(wallet.id);
return (_jsxs(PageContent, { children: [_jsxs(ModalContent, { style: { paddingBottom: 8, gap: 14 }, children: [_jsx(CustomQRCode, { value: uri, image: _jsx(OtherWallets, {}), tooltipMessage: isWalletConnectConnector(wallet.id) ? (_jsxs(_Fragment, { children: [_jsx(ScanIconWithLogos, {}), _jsx("span", { children: locales.scanScreen_tooltip_walletConnect })] })) : (_jsxs(_Fragment, { children: [_jsx(ScanIconWithLogos, { logo: wallet?.icon }), _jsx("span", { children: locales.scanScreen_tooltip_default })] })) }), showAdditionalOptions ? _jsx(OrDivider, {}) : hasApps && _jsx(OrDivider, { children: locales.dontHaveTheApp })] }), showAdditionalOptions && ( // for walletConnect
_jsxs("div", { style: {
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: 14,
}, children: [context.options?.walletConnectCTA !== "modal" && (_jsx(CopyToClipboard, { variant: "button", text: uri, children: context.options?.walletConnectCTA === "link" ? locales.copyToClipboard : locales.copyCode })), context.options?.walletConnectCTA !== "link" && (_jsx(Button, { icon: _jsx(ExternalLinkIcon, {}), onClick: openW3M, disabled: isOpenW3M, waiting: isOpenW3M, children: context.options?.walletConnectCTA === "modal" ? locales.useWalletConnectModal : locales.useModal }))] })), hasApps && (_jsx(_Fragment, { children: _jsx(Button, { onClick: () => {
context.setRoute(ROUTES.DOWNLOAD);
}, download: true, children: locales.getWalletName }) }))] }));
}