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

package.json

@@ -35,6 +35,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@bitcoin-design/bitcoin-icons-react": "^0.1.10",
     "@bitcoinerlab/secp256k1": "^1.1.1",
     "@getalby/sdk": "^3.9.0",
     "@headlessui/react": "^1.7.18",

src/app/components/QRCode/index.tsx

@@ -1,5 +1,8 @@
 import ReactQRCode from "react-qr-code";
 import { classNames, useTheme } from "~/app/utils";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { CopyIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 
 export type Props = {
   value: string;
@@ -15,21 +18,56 @@ export type Props = {
   // (meaning you have to aim your phone very precisely and have to wait longer for the reader
   // to recognize the QR code)
   level?: "Q" | undefined;
+  onCopy?: () => void;
 };
 
-export default function QRCode({ value, size, level, className }: Props) {
+export default function QRCode({
+  value,
+  size,
+  level,
+  className,
+  onCopy,
+}: Props) {
   const theme = useTheme();
   const fgColor = theme === "dark" ? "#FFFFFF" : "#000000";
   const bgColor = theme === "dark" ? "#000000" : "#FFFFFF";
+  const { t } = useTranslation("components");
+  const [isHovering, setIsHovering] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(value);
+    onCopy?.();
+  };
 
   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"
+      onClick={handleCopy}
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+    >
+      <ReactQRCode
+        value={value}
+        size={size}
+        fgColor={fgColor}
+        bgColor={bgColor}
+        className={classNames(
+          "w-full h-auto rounded-md transition-opacity",
+          isHovering ? "opacity-80" : "opacity-100",
+          className ?? ""
+        )}
+        level={level}
+      />
+      {isHovering && (
+        <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded-md">
+          <div className="flex flex-col items-center">
+            <CopyIcon className="h-8 w-8 text-white" />
+            <span className="text-white font-medium mt-2">
+              {t("allowance_menu.qrcode.click_to_copy")}
+            </span>
+          </div>
+        </div>
+      )}
+    </div>
   );
 }

src/app/screens/Accounts/Detail/index.tsx

@@ -345,6 +345,9 @@ function AccountDetail() {
                             <QRCode
                               value={`lndhub://${lndHubData.login}:${lndHubData.password}@${lndHubData.url}/`}
                               size={256}
+                              onCopy={() =>
+                                toast.success("Copied to clipboard")
+                              }
                             />
                           </div>
                           <div className="w-full">

src/app/screens/Receive/index.tsx

@@ -74,6 +74,7 @@ function Receive() {
                             value={lightningAddress}
                             size={192}
                             level="Q"
+                            onCopy={() => toast.success("Copied to clipboard")}
                           />
                         </>
                       )}

src/app/screens/ReceiveInvoice/index.tsx

@@ -148,6 +148,7 @@ function ReceiveInvoice() {
                   <QRCode
                     value={invoice.paymentRequest.toUpperCase()}
                     size={512}
+                    onCopy={() => toast.success("Copied to clipboard!")}
                   />
                   {isAlbyOAuthUser ? (
                     <>

src/i18n/locales/en/translation.json

@@ -1216,7 +1216,10 @@
         "always_allow": "Always allow",
         "always_reject": "Always reject"
       },
-      "website_permissions": "Website Permissions"
+      "website_permissions": "Website Permissions",
+      "qrcode": {
+        "click_to_copy": "Click to copy"
+      }
     },
     "qrcode_scanner": {
       "title": "Scan QR Code",

yarn.lock

@@ -455,6 +455,11 @@
   resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@bitcoin-design/bitcoin-icons-react@^0.1.10":
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/@bitcoin-design/bitcoin-icons-react/-/bitcoin-icons-react-0.1.10.tgz#11acf1d386c1094d3eff673ca236345860762f64"
+  integrity sha512-f7GSutKHa4EK4LWI/phnGCJsN8fzFbVAVQ4F1MYxiza34LVmXmbgHUmdP/BR8ZeQSIbZLt19inpJZDBtQvYe4Q==
+
 "@bitcoinerlab/secp256k1@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@bitcoinerlab/secp256k1/-/secp256k1-1.1.1.tgz#938305c30505b67b15f3de53627bc9d8b4cc7680"