copy QR code on click

src/components/connect/connect-qr.tsx

@@ -9,9 +9,19 @@ interface ConnectQRProps {
 }
 
 const ConnectQR: React.FC<ConnectQRProps> = ({ close, value }) => {
+
+  const copyQRValue = (e: React.MouseEvent<HTMLElement>) => {
+    navigator.clipboard.writeText(value);
+    const currentTarget = e.currentTarget;
+
+    currentTarget.classList.add('tooltip-active');
+    setTimeout(() => currentTarget.classList.remove('tooltip-active'), 1000);
+  }
+
   return (<div>
-    <a href={value}>
-      <Typography variant="h3">Scan QR Code</Typography>
+    <Typography variant="h3">Scan QR Code</Typography>
+    <a href={value} onClick={copyQRValue} className="tooltip-action">
+      <span className="tooltip bg-background text-primary">Copied</span>
       <QRCodeCanvas value={value} size={256} className="mt-4 p-2 bg-primary" bgColor="rgb(250,204, 21)" fgColor="rgb(41,37,36)" />
     </a>
     <div className="mt-4">

src/index.css

@@ -2,6 +2,19 @@
 @tailwind components;
 @tailwind utilities;
 
+.tooltip-action {
+  @apply relative;
+}
+
+.tooltip {
+  @apply text-sm invisible absolute opacity-0 transition-opacity duration-300 ease-in-out transform -translate-x-1/2 rounded shadow-lg px-3 py-1;
+}
+
+.tooltip-active .tooltip {
+  @apply visible z-50 opacity-100;
+  animation: fadeIn 0.3s ease-in-out forwards;
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;

vite.config.ts

@@ -1,6 +1,9 @@
-import { VitePWA } from "vite-plugin-pwa";
 import path from "path";
+
+//@ts-expect-error - no types available
 import nodePolyfills from "vite-plugin-node-stdlib-browser";
+
+import { VitePWA } from "vite-plugin-pwa";
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";