@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
20 lines (19 loc) • 1.78 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useWindowSize } from "@coin-voyage/shared/hooks";
import { AnimatePresence, motion } from "framer-motion";
import Tooltip from "../Tooltip";
import { QRCode } from "./QRCode";
import { LogoContainer, LogoIcon, QRCodeContainer, QRCodeContent, QRPlaceholder } from "./styles";
function CustomQRCode({ value, image, imageBackground, imagePosition = "center", tooltipMessage }) {
const windowSize = useWindowSize();
const Logo = windowSize.width > 920 && tooltipMessage ? (_jsx(Tooltip, { xOffset: 139, yOffset: 5, delay: 0.1, message: tooltipMessage, children: image })) : (image);
return (_jsx(QRCodeContainer, { children: _jsxs(QRCodeContent, { children: [image && (_jsx(LogoContainer, { children: _jsx(LogoIcon, { "$wcLogo": imagePosition !== "center", style: {
background: imagePosition === "center" ? imageBackground : undefined,
}, children: Logo }) })), _jsx(AnimatePresence, { initial: false, children: value ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, position: "absolute", inset: [0, 0] }, transition: {
duration: 0.2,
}, children: _jsx(QRCode, { uri: value, size: 576, ecl: "H", clearArea: !!(imagePosition === "center" && image) }) }, value)) : (_jsxs(QRPlaceholder, { initial: { opacity: 0.1 }, animate: { opacity: 0.1 }, exit: { opacity: 0, position: "absolute", inset: [0, 0] }, transition: {
duration: 0.2,
}, children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {}), _jsx("div", {})] })) })] }) }));
}
CustomQRCode.displayName = "CustomQRCode";
export default CustomQRCode;