Merge branch 'qr-dialog' into 'master'

QR dialog: Give "Copied!" feedback

See merge request riftenlabs/lib/wizardconnect!14

packages/react/src/components/WizardConnectQRDialog.tsx

@@ -2,7 +2,7 @@
 // This software is licensed under the GNU Lesser General Public License (LGPL), version 3.0 or later.
 // A copy of the license can be found in the LICENSE file or at https://www.gnu.org/licenses/lgpl-3.0.html
 
-import React, { useCallback } from "react";
+import React, { useCallback, useState, useRef } from "react";
 import { createPortal } from "react-dom";
 import { AlphanumericQRCode } from "./AlphanumericQRCode.js";
 import { WIZARDCONNECT_LOGO } from "./logo.js";
@@ -95,12 +95,18 @@ export function WizardConnectQRDialog({
 }: WizardConnectQRDialogProps) {
   const t = { ...defaults, ...theme };
 
+  const [copied, setCopied] = useState(false);
+  const copiedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   const handleCopy = useCallback(() => {
     if (onCopy) {
       onCopy(uri);
     } else if (typeof navigator !== "undefined" && navigator.clipboard) {
       navigator.clipboard.writeText(uri).catch(() => {});
     }
+    setCopied(true);
+    if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);
+    copiedTimerRef.current = setTimeout(() => setCopied(false), 2000);
   }, [uri, onCopy]);
 
   const handleBackdropClick = useCallback(
@@ -210,8 +216,9 @@ export function WizardConnectQRDialog({
             />
           </div>
 
-          {/* Copy URI row */}
-          <div
+          {/* Copy URI row — entire row is clickable */}
+          <button
+            onClick={handleCopy}
             style={{
               width: "100%",
               display: "flex",
@@ -221,7 +228,12 @@ export function WizardConnectQRDialog({
               backgroundColor: t.uriRowBackground,
               borderRadius: "8px",
               border: `1px solid ${t.borderColor}`,
+              cursor: "pointer",
+              textAlign: "left",
+              font: "inherit",
+              transition: "border-color 0.15s",
             }}
+            aria-label="Copy URI"
           >
             <p
               style={{
@@ -238,22 +250,26 @@ export function WizardConnectQRDialog({
             >
               {uri}
             </p>
-            <button
-              onClick={handleCopy}
-              style={{
-                background: "none",
-                border: "none",
-                cursor: "pointer",
-                padding: "4px",
-                flexShrink: 0,
-                display: "flex",
-                alignItems: "center",
-              }}
-              aria-label="Copy URI"
-            >
-              <CopyIcon color={t.copyButtonColor} />
-            </button>
-          </div>
+            {copied ? (
+              <span
+                style={{
+                  color: "#0307fe",
+                  fontSize: "12px",
+                  fontWeight: 600,
+                  flexShrink: 0,
+                  whiteSpace: "nowrap",
+                }}
+              >
+                Copied!
+              </span>
+            ) : (
+              <span
+                style={{ flexShrink: 0, display: "flex", alignItems: "center" }}
+              >
+                <CopyIcon color={t.copyButtonColor} />
+              </span>
+            )}
+          </button>
         </div>
       </div>
     </div>,