@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
56 lines • 3.6 kB
JavaScript
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useWalletConnectModal } from "../../hooks/useWalletConnectModal";
import ScanIconWithLogos from "../../assets/ScanIconWithLogos";
import { ExternalLinkIcon } from "../../assets/icons";
import useLocales from "../../hooks/useLocales";
import { ROUTES } from "../../types/routes";
import { isWalletConnectConnector } from "../../utils";
import usePayContext from "../contexts/pay";
import { useWeb3 } from "../contexts/web3";
import Button from "../ui/Button";
import CopyToClipboard from "../ui/CopyToClipboard";
import CustomQRCode from "../ui/CustomQRCode";
import { OrDivider } from "../ui/Modal";
import { ModalContent, PageContent } from "../ui/Modal/styles";
const ConnectWithQRCode = () => {
const context = usePayContext();
const wallet = context.paymentState.selectedWallet;
const { open: openW3M, isOpen: isOpenW3M } = useWalletConnectModal();
const { connect: { getUri }, } = useWeb3();
const wcUri = getUri(wallet?.id);
const uri = wcUri
? (wallet?.getWalletConnectDeeplink?.(wcUri) ?? wcUri)
: undefined;
const locales = useLocales({
CONNECTORNAME: wallet?.name,
});
if (!wallet)
return _jsx(_Fragment, { children: "Wallet not found" });
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: wallet?.icon, 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", string: 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);
},
/*
icon={
<div style={{ background: connectorInfo?.icon }}>
{connectorInfo?.logos.default}
</div>
}
roundedIcon
*/
download: true, children: locales.getWalletName }) }))] }));
};
export default ConnectWithQRCode;
//# sourceMappingURL=ConnectWithQRCode.js.map