@daimo/pay/build/src/components/Common/CustomQRCode/index.js

Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.

import { jsx, jsxs } from 'react/jsx-runtime';
import { QRCodeContainer, QRCodeContent, LogoContainer, LogoIcon, QRPlaceholder } from './styles.js';
import { AnimatePresence, motion } from 'framer-motion';
import Tooltip from '../Tooltip/index.js';
import useWindowSize from '../../../hooks/useWindowSize.js';
import { QRCode } from './QRCode.js';

function CustomQRCode({
  value,
  image,
  imageBackground,
  imagePosition = "center",
  tooltipMessage,
  contentPadding = 13
}) {
  const windowSize = useWindowSize();
  const Logo = windowSize.width > 920 && tooltipMessage ? /* @__PURE__ */ jsx(Tooltip, { xOffset: 139, yOffset: 5, delay: 0.1, message: tooltipMessage, children: image }) : image;
  return /* @__PURE__ */ jsx(QRCodeContainer, { children: /* @__PURE__ */ jsxs(QRCodeContent, { style: { inset: contentPadding }, children: [
    image && /* @__PURE__ */ jsx(LogoContainer, { children: /* @__PURE__ */ jsx(
      LogoIcon,
      {
        style: {
          background: imagePosition === "center" ? imageBackground : void 0
        },
        children: Logo
      }
    ) }),
    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: value ? /* @__PURE__ */ jsx(
      motion.div,
      {
        initial: { opacity: 0 },
        animate: { opacity: 1 },
        exit: { opacity: 0, position: "absolute", inset: [0, 0] },
        transition: {
          duration: 0.2
        },
        children: /* @__PURE__ */ jsx(
          QRCode,
          {
            uri: value,
            size: 576,
            ecl: value?.length > 200 ? "L" : "H",
            clearArea: !!(imagePosition === "center" && image),
            image: imagePosition === "bottom right" ? image : void 0,
            imageBackground
          }
        )
      },
      value
    ) : /* @__PURE__ */ jsxs(
      QRPlaceholder,
      {
        initial: { opacity: 0.1 },
        animate: { opacity: 0.1 },
        exit: { opacity: 0, position: "absolute", inset: [0, 0] },
        transition: {
          duration: 0.2
        },
        children: [
          /* @__PURE__ */ jsx("span", {}),
          /* @__PURE__ */ jsx("span", {}),
          /* @__PURE__ */ jsx("span", {}),
          /* @__PURE__ */ jsx("div", {})
        ]
      }
    ) })
  ] }) });
}
CustomQRCode.displayName = "CustomQRCode";

export { CustomQRCode as default };
//# sourceMappingURL=index.js.map