@particle-network/connectkit
Version:
408 lines (400 loc) • 11 kB
JavaScript
"use client";
import {
RetryButton,
RetryIconContainer,
init_styles
} from "./chunk-75EHPGGI.mjs";
import {
RetryIconCircle_default,
init_RetryIconCircle
} from "./chunk-SUWDRJLB.mjs";
import {
__esm
} from "./chunk-Y7A564BU.mjs";
// src/components/CustomQRCode/QRCode.tsx
import QRCodeUtil from "qrcode";
import { useMemo } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function QRCode({
ecl = "M",
size: sizeProp = 200,
uri,
clearArea = false,
image,
imageBackground = "transparent"
}) {
const logoSize = clearArea ? 76 : 0;
const size = sizeProp - 10 * 2;
const dots = useMemo(() => {
const dots2 = [];
const matrix = generateMatrix(uri, ecl);
const cellSize = size / matrix.length;
const qrList = [
{ x: 0, y: 0 },
{ x: 1, y: 0 },
{ x: 0, y: 1 }
];
qrList.forEach(({ x, y }) => {
const x1 = (matrix.length - 7) * cellSize * x;
const y1 = (matrix.length - 7) * cellSize * y;
for (let i = 0; i < 3; i++) {
dots2.push(
/* @__PURE__ */ jsx(
"rect",
{
fill: i % 2 !== 0 ? "var(--pcm-body-background)" : "var(--pcm-body-color)",
rx: (i - 2) * -5 + (i === 0 ? 2 : 3),
ry: (i - 2) * -5 + (i === 0 ? 2 : 3),
width: cellSize * (7 - i * 2),
height: cellSize * (7 - i * 2),
x: x1 + cellSize * i,
y: y1 + cellSize * i
},
`${i}-${x}-${y}`
)
);
}
});
if (image) {
const x1 = (matrix.length - 7) * cellSize * 1;
const y1 = (matrix.length - 7) * cellSize * 1;
dots2.push(
/* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
"rect",
{
fill: imageBackground,
rx: (0 - 2) * -5 + 2,
ry: (0 - 2) * -5 + 2,
width: cellSize * (7 - 0 * 2),
height: cellSize * (7 - 0 * 2),
x: x1 + cellSize * 0,
y: y1 + cellSize * 0
}
),
/* @__PURE__ */ jsx(
"foreignObject",
{
width: cellSize * (7 - 0 * 2),
height: cellSize * (7 - 0 * 2),
x: x1 + cellSize * 0,
y: y1 + cellSize * 0,
children: /* @__PURE__ */ jsx("div", { style: { borderRadius: (0 - 2) * -5 + 2, overflow: "hidden" }, children: image })
}
)
] })
);
}
const clearArenaSize = Math.floor((logoSize + 25) / cellSize);
const matrixMiddleStart = matrix.length / 2 - clearArenaSize / 2;
const matrixMiddleEnd = matrix.length / 2 + clearArenaSize / 2 - 1;
matrix.forEach((row, i) => {
row.forEach((_, j) => {
if (matrix[i][j]) {
if (!(i < 7 && j < 7 || i > matrix.length - 8 && j < 7 || i < 7 && j > matrix.length - 8)) {
if (image || !(i > matrixMiddleStart && i < matrixMiddleEnd && j > matrixMiddleStart && j < matrixMiddleEnd)) {
dots2.push(
/* @__PURE__ */ jsx(
"circle",
{
cx: i * cellSize + cellSize / 2,
cy: j * cellSize + cellSize / 2,
fill: "var(--pcm-body-color)",
r: cellSize / 3
},
`circle-${i}-${j}`
)
);
}
}
}
});
});
return dots2;
}, [ecl, size, uri]);
return /* @__PURE__ */ jsxs(
"svg",
{
height: size,
width: size,
viewBox: `0 0 ${size} ${size}`,
style: {
width: size,
height: size
},
children: [
/* @__PURE__ */ jsx("rect", { fill: "transparent", height: size, width: size }),
dots
]
}
);
}
var generateMatrix;
var init_QRCode = __esm({
"src/components/CustomQRCode/QRCode.tsx"() {
"use strict";
generateMatrix = (value, errorCorrectionLevel) => {
const arr = Array.prototype.slice.call(QRCodeUtil.create(value, { errorCorrectionLevel }).modules.data, 0);
const sqrt = Math.sqrt(arr.length);
return arr.reduce(
(rows, key, index) => (index % sqrt === 0 ? rows.push([key]) : rows[rows.length - 1].push(key)) && rows,
[]
);
};
}
});
// src/components/CustomQRCode/styles.ts
import { motion } from "framer-motion";
import { css, keyframes, styled } from "styled-components";
var QRCodeContainer, QRCodeContent, PlaceholderKeyframes, QRPlaceholder, LogoContainer, LogoIcon, StyleRetryButtonWrapper;
var init_styles2 = __esm({
"src/components/CustomQRCode/styles.ts"() {
"use strict";
QRCodeContainer = styled(motion.div)`
z-index: 3;
position: relative;
overflow: hidden;
height: 0;
padding-bottom: 100% !important;
display: flex;
align-items: center;
justify-content: center;
margin: 1px 0 2px;
border-radius: var(--pcm-rounded-lg);
background: var(--pcm-body-background);
box-shadow: 0 0 0 1px var(--pcm-button-border-color);
backface-visibility: hidden;
svg {
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
`;
QRCodeContent = styled(motion.div)`
position: absolute;
inset: 13px;
svg {
width: 100% !important;
height: auto !important;
}
`;
PlaceholderKeyframes = keyframes`
0%{ background-position: 100% 0; }
100%{ background-position: -100% 0; }
`;
QRPlaceholder = styled(motion.div)`
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
> div {
z-index: 4;
position: relative;
width: 28%;
height: 28%;
border-radius: 20px;
background: #fff;
box-shadow: 0 0 0 7px #fff;
}
> span {
z-index: 4;
position: absolute;
background: var(--pcm-body-color-secondary);
border-radius: var(--pcm-rounded-lg);
width: 13.25%;
height: 13.25%;
box-shadow: 0 0 0 4px #fff;
&:before {
content: '';
position: absolute;
inset: 9px;
border-radius: 3px;
box-shadow: 0 0 0 4px #fff;
}
&:nth-child(1) {
top: 0;
left: 0;
}
&:nth-child(2) {
top: 0;
right: 0;
}
&:nth-child(3) {
bottom: 0;
left: 0;
}
}
&:before {
z-index: 3;
content: '';
position: absolute;
inset: 0;
background: repeat;
background-size: 1.888% 1.888%;
background-image: radial-gradient(var(--pcm-body-color-secondary) 41%, transparent 41%);
}
&:after {
z-index: 5;
content: '';
position: absolute;
inset: 0;
transform: scale(1.6) rotate(45deg);
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0)
);
background-size: 200% 100%;
animation: ${PlaceholderKeyframes} 1000ms linear infinite both;
${(props) => props.$failed && css`
animation: none;
`}
}
`;
LogoContainer = styled(motion.div)`
z-index: 6;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateY(50%) scale(0.9999); // Shifting fix
`;
LogoIcon = styled(motion.div)`
z-index: 6;
position: absolute;
left: 50%;
overflow: hidden;
transform: translate(-50%, -50%) scale(0.9999); // Shifting fix
svg {
display: block;
position: relative;
width: 100%;
height: 100% !important;
}
${(props) => props.$wcLogo ? css`
width: 29%;
height: 20.5%;
` : css`
width: 24%;
height: 24%;
border-radius: 17px;
&:before {
pointer-events: none;
z-index: 2;
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
/* box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02); */
}
`}
`;
StyleRetryButtonWrapper = styled.div`
position: absolute;
width: 28px;
height: 28px;
top: 50%;
left: 50%;
transform: translate(12px, 12px);
z-index: 10;
border-radius: 9999px;
cursor: pointer;
button {
width: 100%;
height: 100%;
}
`;
}
});
// src/components/CustomQRCode/index.tsx
import { AnimatePresence, motion as motion2 } from "framer-motion";
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
function CustomQRCode({
value,
image,
imageBackground,
ecl = "M",
imagePosition = "center",
failed,
failedCallback
}) {
const Logo = image;
return /* @__PURE__ */ jsxs2(QRCodeContainer, { children: [
failed && /* @__PURE__ */ jsx2(StyleRetryButtonWrapper, { children: /* @__PURE__ */ jsx2(
RetryButton,
{
"aria-label": "Retry",
initial: { opacity: 0, scale: 0.8 },
animate: { opacity: 1, scale: 1 },
exit: { opacity: 0, scale: 0.8 },
whileTap: { scale: 0.9 },
transition: { duration: 0.1 },
onClick: failedCallback,
children: /* @__PURE__ */ jsx2(RetryIconContainer, { children: /* @__PURE__ */ jsx2(RetryIconCircle_default, {}) })
}
) }),
/* @__PURE__ */ jsxs2(QRCodeContent, { children: [
image && /* @__PURE__ */ jsx2(LogoContainer, { children: /* @__PURE__ */ jsx2(
LogoIcon,
{
$wcLogo: imagePosition !== "center",
style: {
background: imagePosition === "center" ? imageBackground : void 0
},
children: Logo
}
) }),
/* @__PURE__ */ jsx2(AnimatePresence, { initial: false, children: value ? /* @__PURE__ */ jsx2(
motion2.div,
{
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: { opacity: 0, position: "absolute", inset: [0, 0] },
transition: {
duration: 0.2
},
children: /* @__PURE__ */ jsx2(QRCode, { uri: value, size: 288, ecl, clearArea: !!(imagePosition === "center" && image) })
},
value
) : /* @__PURE__ */ jsxs2(
QRPlaceholder,
{
initial: { opacity: 0.2 },
animate: { opacity: 0.2 },
exit: { opacity: 0, position: "absolute", inset: [0, 0] },
transition: {
duration: 0.2
},
$failed: failed,
children: [
/* @__PURE__ */ jsx2("span", {}),
/* @__PURE__ */ jsx2("span", {}),
/* @__PURE__ */ jsx2("span", {}),
/* @__PURE__ */ jsx2("div", {})
]
}
) })
] })
] });
}
var CustomQRCode_default;
var init_CustomQRCode = __esm({
"src/components/CustomQRCode/index.tsx"() {
"use strict";
init_RetryIconCircle();
init_styles();
init_QRCode();
init_styles2();
CustomQRCode.displayName = "CustomQRCode";
CustomQRCode_default = CustomQRCode;
}
});
export {
CustomQRCode_default,
init_CustomQRCode
};
//# sourceMappingURL=chunk-L7PHO2RG.mjs.map