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

rajanarahul93 · 2025-04-14T09:06:19Z

Describe the changes you have made in this PR

Added a hover-to-copy interaction on the QRCode component. When the user hovers over the QR code, a semi-transparent overlay appears with a copy icon and text prompting the user to click. On click, the QR code content is copied to the clipboard. This enhances UX by making the copy functionality more discoverable and user-friendly.

Link this PR to an issue

Fixes #2851

Type of change

feat: New feature (non-breaking change which adds functionality)

Screenshots of the changes [optional]

How has this been tested?

Manually tested on local development environment
Verified hover overlay appears correctly
Verified the value is copied to clipboard on click
Checked responsiveness across different screen sizes

Checklist

rajanarahul93 · 2025-04-16T06:03:22Z

Hi @reneaaron @stackingsaunter
I'd like to request your review on this PR when you have time. Let me know if any changes are needed. Thanks!

pavanjoshi914 · 2025-04-21T07:53:45Z

package.json

    "prepare": "husky install"
  },
  "dependencies": {
+    "@bitcoin-design/bitcoin-icons-react": "^0.1.10",


why new library for just one icon. we use popicons by default. and i guess copy icon should be there as well PopiconsCopyLine

pavanjoshi914 · 2025-04-21T07:54:01Z

src/app/components/QRCode/index.tsx

 import { classNames, useTheme } from "~/app/utils";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { CopyIcon } from "@bitcoin-design/bitcoin-icons-react/filled";


use popicons

pavanjoshi914 · 2025-04-21T07:55:55Z

src/app/screens/Receive/index.tsx

                            value={lightningAddress}
                            size={192}
                            level="Q"
+                            onCopy={() => toast.success("Copied to clipboard")}


why this new callback was introduced? just to show success message? can't we do same within the qr code component?

pavanjoshi914 · 2025-04-21T07:57:36Z

src/i18n/locales/en/translation.json

      },
-      "website_permissions": "Website Permissions"
+      "website_permissions": "Website Permissions",
+      "qrcode": {


we already have copy_clipboard and copied_to_clipboard in common section of translations. always check before introducing new ones

pavanjoshi914 · 2025-04-21T08:01:10Z

src/app/components/QRCode/index.tsx

+        bgColor={bgColor}
+        className={classNames(
+          "w-full h-auto rounded-md transition-opacity",
+          isHovering ? "opacity-80" : "opacity-100",


for hover why we need to use state varbiles? can use tailwind here only?

eg.
className="text-gray-600 hover: text-gray-800"

pavanjoshi914 · 2025-04-21T08:04:49Z

screenshot looks a bit messsy. missing translations broken ui. can you check if other elements are not effected by your ui change and update screenshots? thanks!

rajanarahul93 · 2025-04-21T08:10:25Z

Thanks for your review, @pavanjoshi914 .I’ll make the suggested changes and update the PR shortly.

…de and @popicons/react

rajanarahul93 · 2025-04-21T09:26:54Z

UI Enhancement: Simplified QR Code Copy Interaction

BEFORE:

Had overlapping copy indicators:
1. "Copy to clipboard" text + icon on hover
2. "Copied to clipboard" toast on click
Dark overlay on hover made QR code less visible
Multiple text elements created visual noise

AFTER:

Clean, minimalist hover state:
- Single copy icon with drop shadow for visibility
- No text overlay, reducing visual clutter
- QR code remains clearly visible with subtle opacity change
Single feedback mechanism:
- Toast notification on successful copy
- Maintains accessibility without redundant UI elements

Technical Changes:

Removed background overlay (bg-black bg-opacity-50)
Removed redundant copy text
Added drop-shadow-lg to icon for better contrast
Kept smooth opacity transitions for polish
Maintained clipboard functionality and toast notification

@pavanjoshi914

…lity

pavanjoshi914 · 2025-04-23T05:57:14Z

src/app/components/QRCode/index.tsx

+        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" />


where this is used now? i don't see any apperance of this

pavanjoshi914 · 2025-04-23T05:57:32Z

src/app/screens/ReceiveInvoice/index.tsx

                  <QRCode
                    value={invoice.paymentRequest.toUpperCase()}
-                    size={512}
+                    size={192}


pavanjoshi914 · 2025-04-23T06:01:08Z

hovering over this part, qr code content aint' copying.

@stackingsaunter can you please assit him in hover opacity and overlay that should be shown when user hovers the qr code. currently its not that clear visually that we can copy qr code

rajanarahul93 · 2025-04-23T09:54:36Z

@pavanjoshi914 , I will make sure the required changes are done!!

rajanarahul93 · 2025-04-23T13:19:12Z

Hi @pavanjoshi914

I've made the following changes based on your feedback:

Re-added the overlay with:

<div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-20">

Reverted the QR code size back to 512:

<QRCode value={invoice.paymentRequest.toUpperCase()} size={512} />

I tried implementing the copy functionality on the icon but haven't been able to get it working yet. Still exploring possible approaches—if you have any suggestions, I’d love to hear them!

The above two changes haven't been pushed yet — I’ll push them together once the copy feature on the logo is working.

Let me know if there's anything else you'd like me to check meanwhile.

Thanks again for your review!

rajanarahul93 · 2025-04-26T05:48:12Z

@pavanjoshi914 any suggestions?

rajanarahul93 · 2025-05-09T12:19:40Z

@stackingsaunter any suggestions from you side to solve the issue?

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

1d8afdd

pavanjoshi914 requested changes Apr 21, 2025

View reviewed changes

feat: add QR code component with copy functionality using react-qr-co…

933eb53

…de and @popicons/react

rajanarahul93 and others added 2 commits April 21, 2025 15:11

feat(qr-code): add QR code component with copy-to-clipboard functiona…

0a5b51a

…lity

Merge remote-tracking branch 'upstream/master' into copy-qr

4d0bd8f

pavanjoshi914 reviewed Apr 23, 2025

View reviewed changes

pavanjoshi914 added 2 commits April 24, 2025 18:38

Merge remote-tracking branch 'upstream/master' into copy-qr

224d790

Merge remote-tracking branch 'upstream/master' into copy-qr

549176e

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

rajanarahul93 commented Apr 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe the changes you have made in this PR

Link this PR to an issue

Type of change

Screenshots of the changes [optional]

How has this been tested?

Checklist

Uh oh!

rajanarahul93 commented Apr 16, 2025

Uh oh!

pavanjoshi914 Apr 21, 2025

Choose a reason for hiding this comment

Uh oh!

pavanjoshi914 Apr 21, 2025

Choose a reason for hiding this comment

Uh oh!

pavanjoshi914 Apr 21, 2025

Choose a reason for hiding this comment

Uh oh!

pavanjoshi914 Apr 21, 2025

Choose a reason for hiding this comment

Uh oh!

pavanjoshi914 Apr 21, 2025

Choose a reason for hiding this comment

Uh oh!

pavanjoshi914 commented Apr 21, 2025

Uh oh!

rajanarahul93 commented Apr 21, 2025

Uh oh!

rajanarahul93 commented Apr 21, 2025

UI Enhancement: Simplified QR Code Copy Interaction

BEFORE:

AFTER:

Technical Changes:

Uh oh!

pavanjoshi914 Apr 23, 2025

Choose a reason for hiding this comment

Uh oh!

pavanjoshi914 Apr 23, 2025

Choose a reason for hiding this comment

Uh oh!

pavanjoshi914 commented Apr 23, 2025

Uh oh!

rajanarahul93 commented Apr 23, 2025

Uh oh!

rajanarahul93 commented Apr 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rajanarahul93 commented Apr 26, 2025

Uh oh!

rajanarahul93 commented May 9, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

rajanarahul93 commented Apr 14, 2025 •

edited

Loading

rajanarahul93 commented Apr 23, 2025 •

edited

Loading