84 lines
2.0 KiB
TypeScript
84 lines
2.0 KiB
TypeScript
|
import {
|
||
|
|
Text,
|
||
|
|
Box,
|
||
|
|
Divider,
|
||
|
|
Flex,
|
||
|
|
Heading,
|
||
|
|
useToast,
|
||
|
|
Button,
|
||
|
|
Grid,
|
||
|
|
Image,
|
||
|
|
} from "@chakra-ui/react";
|
||
|
|
import Qrcode from "qrcode";
|
||
|
|
import { useEffect, useRef } from "react";
|
||
|
|
|
||
|
|
const QrView: React.FC<{ uri: string }> = ({ uri }) => {
|
||
|
|
const canvasRef = useRef(null);
|
||
|
|
const toast = useToast();
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (uri && canvasRef.current) Qrcode.toCanvas(canvasRef.current, uri);
|
||
|
|
}, [uri, canvasRef]);
|
||
|
|
|
||
|
|
const onClick = async () => {
|
||
|
|
await navigator.clipboard.writeText(uri);
|
||
|
|
toast({
|
||
|
|
title: "Copied URI",
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box width="100%" height="100%" padding="1em">
|
||
|
|
<Flex
|
||
|
|
className="bg-secondary"
|
||
|
|
alignItems="center"
|
||
|
|
borderRadius="24px"
|
||
|
|
flexDir="column"
|
||
|
|
>
|
||
|
|
<Grid
|
||
|
|
padding="2em"
|
||
|
|
borderTopRadius="24px"
|
||
|
|
placeItems="center"
|
||
|
|
className="bg-qr"
|
||
|
|
borderBottom="solid 1px white"
|
||
|
|
width="100%"
|
||
|
|
height="100%"
|
||
|
|
>
|
||
|
|
<canvas
|
||
|
|
onClick={onClick}
|
||
|
|
ref={canvasRef}
|
||
|
|
height="20%"
|
||
|
|
width="20%"
|
||
|
|
style={{
|
||
|
|
borderRadius: "24px",
|
||
|
|
minWidth: "20%",
|
||
|
|
minHeight: "20%",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</Grid>
|
||
|
|
|
||
|
|
<Flex gap="3" flexDir="column" alignItems="center" padding="2em">
|
||
|
|
<Flex gap="1em">
|
||
|
|
<Image src="/scan.svg" alt="scan" />
|
||
|
|
<Text fontWeight={800} textAlign="center" fontSize="1.5em">
|
||
|
|
Scan with your phone
|
||
|
|
</Text>
|
||
|
|
</Flex>
|
||
|
|
|
||
|
|
<Text fontWeight={600} textAlign="center">
|
||
|
|
Open your camera app or mobile wallet and scan the code to connect
|
||
|
|
</Text>
|
||
|
|
<Button onClick={onClick} borderRadius="20px" className="wc-button">
|
||
|
|
<Flex gap="1em">
|
||
|
|
<Image src="/copy.svg" alt="scan" />
|
||
|
|
<Text>Copy to clipboard</Text>
|
||
|
|
</Flex>
|
||
|
|
</Button>
|
||
|
|
</Flex>
|
||
|
|
</Flex>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default QrView;
|