fix(UserMenu): add copy address feedback toast notification - #567
Conversation
- Create UserMenu molecule component at apps/web/src/components/molecules/UserMenu.tsx - Implement handleCopyAddress (lines 30-45) using navigator.clipboard.writeText - Show toast.success on copy, toast.error on failure - Toggle Check icon for 2s after successful copy for inline feedback - Refactor connect-button.tsx to render <UserMenu /> instead of inline dropdown Closes Fundable-Protocol#396
|
@Samuelaladesiun3334 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
📝 WalkthroughWalkthroughThe connected-wallet dropdown is extracted into a client-side ChangesWallet menu flow
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant ConnectButton
participant UserMenu
participant Clipboard
participant Toast
User->>ConnectButton: Open wallet menu
ConnectButton->>UserMenu: Pass wallet state and callbacks
User->>UserMenu: Select Copy Address
UserMenu->>Clipboard: Copy full address
Clipboard-->>UserMenu: Return copy result
UserMenu->>Toast: Show success or error notification
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment Warning |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/web/src/components/molecules/UserMenu.tsx`:
- Around line 35-38: Update the copy handler in UserMenu to store the reset
timer in a ref, clear any existing timer before scheduling the two-second
setCopied(false) reset, and clean up that timer on component unmount so each
successful copy keeps its confirmation visible for the full duration.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 97c7c166-d203-4124-8c48-8e2d48c764e2
📒 Files selected for processing (2)
apps/web/src/components/molecules/UserMenu.tsxapps/web/src/components/organisms/connect-button.tsx
| setCopied(true); | ||
| toast.success("Address copied to clipboard"); | ||
| // Reset the icon back to Copy after 2 s | ||
| setTimeout(() => setCopied(false), 2000); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Keep feedback visible for two seconds after the latest copy.
Line 38 leaves earlier reset timers active. If users copy again within two seconds, the first timer clears copied early, so the latest successful copy does not receive the promised two-second confirmation. Keep one timer in a ref, clear it before rescheduling, and clean it up on unmount.
Proposed fix
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
...
const [copied, setCopied] = useState(false);
+ const resetCopyTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+ useEffect(() => {
+ return () => {
+ if (resetCopyTimer.current) clearTimeout(resetCopyTimer.current);
+ };
+ }, []);
...
setCopied(true);
toast.success("Address copied to clipboard");
- // Reset the icon back to Copy after 2 s
- setTimeout(() => setCopied(false), 2000);
+ if (resetCopyTimer.current) clearTimeout(resetCopyTimer.current);
+ resetCopyTimer.current = setTimeout(() => {
+ setCopied(false);
+ resetCopyTimer.current = null;
+ }, 2000);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| setCopied(true); | |
| toast.success("Address copied to clipboard"); | |
| // Reset the icon back to Copy after 2 s | |
| setTimeout(() => setCopied(false), 2000); | |
| setCopied(true); | |
| toast.success("Address copied to clipboard"); | |
| if (resetCopyTimer.current) clearTimeout(resetCopyTimer.current); | |
| resetCopyTimer.current = setTimeout(() => { | |
| setCopied(false); | |
| resetCopyTimer.current = null; | |
| }, 2000); |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/web/src/components/molecules/UserMenu.tsx` around lines 35 - 38, Update
the copy handler in UserMenu to store the reset timer in a ref, clear any
existing timer before scheduling the two-second setCopied(false) reset, and
clean up that timer on component unmount so each successful copy keeps its
confirmation visible for the full duration.
|
dont forget to offramp using https://stellar.fundable.finance/offramp its fast, free and p2p rates |
2 similar comments
|
dont forget to offramp using https://stellar.fundable.finance/offramp its fast, free and p2p rates |
|
dont forget to offramp using https://stellar.fundable.finance/offramp its fast, free and p2p rates |
3 participants
Closes #396
Problem
Clicking "Copy Address" in the wallet dropdown provided no visual feedback — the user had no way to confirm the address was copied to clipboard.
Solution
Created
apps/web/src/components/molecules/UserMenu.tsxas a dedicated molecule component encapsulating the wallet dropdown. ThehandleCopyAddresshandler (lines 30–45) callsnavigator.clipboard.writeText, showstoast.success("Address copied to clipboard")on success, andtoast.error("Failed to copy address")on failure. ACheckicon replaces theCopyicon for 2 seconds after a successful copy as additional inline feedback.connect-button.tsxis refactored to render<UserMenu />instead of the previous inline dropdown.Changes
apps/web/src/components/molecules/UserMenu.tsxapps/web/src/components/organisms/connect-button.tsx<UserMenu />Behaviour
toast.successfires,Checkicon shows for 2 stoast.errorfiresSummary by CodeRabbit
New Features
Refactor