feat: Add click-to-copy functionality for truncated addresses (#156) #219
Conversation
…XYZ#156) Resolves issue LasticXYZ#156 - Enable copying full addresses by clicking truncated address displays Changes: - Added click handler to copy full address to clipboard - Integrated react-hot-toast for user feedback - Added visual feedback (green color) when address is copied - Added hover state (blue color) to indicate clickability - Added helpful tooltip "Click to copy full address" Benefits: - Users can now easily copy full addresses for faucets/external tools - Improved UX with visual feedback and toast notifications - No breaking changes to component API Testing: - Tested clipboard API functionality - Verified toast notifications appear correctly - Confirmed visual states (hover, copied) work as expected Bounty Payment Wallet: 1PqVB8PvS9i1kwc76V4SeSJi3S2SSipGkr
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull Request Overview
This PR adds click-to-copy functionality for truncated blockchain addresses, improving user experience when working with wallet addresses in the LasticUI interface.
Key Changes:
- Implemented clipboard copying with visual feedback using color changes and toast notifications
- Added hover and copied states to indicate interactivity
- Integrated graceful error handling for clipboard operations
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
src/components/web3/AddressMini.tsx
Outdated
| setTimeout(() => { | ||
| setCopied(false) | ||
| }, 2000) |
There was a problem hiding this comment.
The setTimeout is not cleaned up when the component unmounts or when a new copy operation occurs. Store the timeout ID and clear it in a cleanup function to prevent state updates on unmounted components and avoid multiple overlapping timeouts.
src/components/web3/AddressMini.tsx
Outdated
| <span | ||
| className={`text-sm font-medium cursor-pointer hover:text-blue-500 transition-colors ${copied ? 'text-green-500' : ''}`} | ||
| onClick={handleCopyAddress} | ||
| title="Click to copy full address" | ||
| > | ||
| {shortAddress} | ||
| </span> |
There was a problem hiding this comment.
The span element should be replaced with a button element to ensure proper keyboard accessibility. Screen reader users and keyboard-only users cannot interact with this clickable span. Additionally, add role='button' and onKeyDown handler if keeping the span, though a button element is the preferred solution.
| <span | |
| className={`text-sm font-medium cursor-pointer hover:text-blue-500 transition-colors ${copied ? 'text-green-500' : ''}`} | |
| onClick={handleCopyAddress} | |
| title="Click to copy full address" | |
| > | |
| {shortAddress} | |
| </span> | |
| <button | |
| type="button" | |
| className={`text-sm font-medium cursor-pointer hover:text-blue-500 transition-colors ${copied ? 'text-green-500' : ''}`} | |
| onClick={handleCopyAddress} | |
| title="Click to copy full address" | |
| style={{ background: 'none', border: 'none', padding: 0 }} | |
| > | |
| {shortAddress} | |
| </button> |
| // Assuming use of a utility to shorten addresses; you'll need to implement this based on your needs | ||
| const shortAddress = `${value.substring(0, 6)}…${value.substring(value.length - 4)}` | ||
|
|
||
| const handleCopyAddress = async () => { |
There was a problem hiding this comment.
The navigator.clipboard API requires HTTPS or localhost context and appropriate permissions. Consider checking for clipboard API availability before attempting to use it, as it may not be available in all browser contexts or could be blocked by permissions policies.
| const handleCopyAddress = async () => { | |
| const handleCopyAddress = async () => { | |
| if (!navigator.clipboard || typeof navigator.clipboard.writeText !== 'function') { | |
| toast.error('Clipboard API not available in this browser or context.') | |
| return | |
| } |
Fixes all 3 Copilot review comments: 1. ✅ Check clipboard API availability before use - Prevents errors in non-HTTPS contexts - Shows user-friendly error message 2. ✅ Proper setTimeout cleanup - Store timeout ID and clear on unmount - Prevents memory leaks and state updates on unmounted components 3. ✅ Replace span with button element - Improves keyboard accessibility - Screen reader compatible - Maintains visual styling with CSS reset Bitcoin Wallet: 1PqVB8PvS9i1kwc76V4SeSJi3S2SSipGkr Generated with Claude Code Co-Authored-By: Claude <[email protected]>
1 participant
Summary
Resolves issue #156 - Enables users to click truncated addresses to copy the full address to clipboard.
✋ Taking on this issue!
Changes
navigator.clipboardAPIreact-hot-toastfor user feedback (success/error messages)Benefits
Testing
Screenshots
The address text now has:
Bounty Payment Wallet:
1PqVB8PvS9i1kwc76V4SeSJi3S2SSipGkrLooking forward to contributing to LasticUI!