feat(qrcode): add hover-to-copy functionality #2851

src/app/components/QRCode/index.tsx

@@ -1,4 +1,7 @@
+import { PopiconsCopyLine } from "@popicons/react";
+import { useTranslation } from "react-i18next";
 import ReactQRCode from "react-qr-code";
+import toast from "~/app/components/Toast";
 import { classNames, useTheme } from "~/app/utils";
 
 export type Props = {
@@ -21,15 +24,29 @@ export default function QRCode({ value, size, level, className }: Props) {
   const theme = useTheme();
   const fgColor = theme === "dark" ? "#FFFFFF" : "#000000";
   const bgColor = theme === "dark" ? "#000000" : "#FFFFFF";
+  const { t } = useTranslation("common");
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(value);
+    toast.success(t("actions.copied_to_clipboard"));
+  };
 
   return (
-    <ReactQRCode
-      value={value}
-      size={size}
-      fgColor={fgColor}
-      bgColor={bgColor}
-      className={classNames("w-full h-auto rounded-md", className ?? "")}
-      level={level}
-    />
+    <div className="relative cursor-pointer group" onClick={handleCopy}>
+      <ReactQRCode
+        value={value}
+        size={size}
+        fgColor={fgColor}
+        bgColor={bgColor}
+        className={classNames(
+          "w-full h-auto rounded-md transition-opacity group-hover:opacity-80",
+          className ?? ""
+        )}
+        level={level}
+      />
+      <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+        <PopiconsCopyLine className="h-8 w-8 text-white drop-shadow-lg" />
+      </div>
+    </div>
   );
 }

src/app/screens/ReceiveInvoice/index.tsx

@@ -147,7 +147,7 @@ function ReceiveInvoice() {
                 <div className="relative flex items-center justify-center">
                   <QRCode
                     value={invoice.paymentRequest.toUpperCase()}
-                    size={512}
+                    size={192}
                   />
                   {isAlbyOAuthUser ? (
                     <>