Repository navigation
Wire the Copy link button on the creator profile to the clipboard #15
Description
Labels / Complexity: bug, good first issue · Trivial — 2 points
Summary
The creator profile page (src/app/u/[username]/page.tsx) renders a "Copy link" button with no onClick handler, so clicking it does nothing, and creators cannot share their tip link from the profile as intended. The page is currently a server component, so the button must be extracted into a small client component (or the page converted) to attach interactivity.
Proposal
- Give the button an
onClickthat writes the profile URL (for example,${window.location.origin}/u/${username}) to the clipboard vianavigator.clipboard.writeText. - Show feedback on success and failure using the existing toast provider (
useToastinsrc/components/ui/toast/ToastProvider.tsx). - Handle the clipboard API being unavailable (for example, an insecure context) gracefully.
- Extract the button into a client component so the server-rendered page can remain server-side.
Acceptance criteria
- Clicking "Copy link" copies the profile URL to the clipboard.
- The user sees success or failure feedback via a toast.
- The button fails gracefully when the clipboard API is unavailable.
-
npm run typecheckpasses.
Getting started
Files: src/app/u/[username]/page.tsx, src/components/ui/toast/ToastProvider.tsx. Verify with npm run dev and npm run typecheck.
Good first files to read: src/app/u/[username]/page.tsx and src/app/tip/[username]/page.tsx (which already uses useToast).
Activity
Emmy6654 commentedon Aug 19, 2026
Hi Team,
I am applying for the frontend task: Wire the Copy link button on the creator profile to the clipboard.
Unwired or dead UI elements directly diminish user trust and frictionlessly prevent users from sharing creator profiles across social platforms. Connecting the "Copy link" button to the browser's native navigator.clipboard API ensures a fast, reliable sharing experience, complete with visual state feedback (e.g., toast confirmation or button state transition) to signal success to the user.
I will wire up the creator profile "Copy link" component, add fallback mechanisms for unsecure or unsupported contexts, and implement optimistic state feedback.
DiegoMoron0102 commentedon Aug 19, 2026
Hi, I'd like to take this on. It's straightforward extract the button into a client component with
navigator.clipboard.writeText, wire up the existinguseToastfor success/failure feedback, and add a fallback for when the clipboard API isn't available. I've looked at howuseToastis already used insrc/app/tip/[username]/page.tsxso I'll follow the same pattern. Should be a clean, small PR. Happy to pick it up if you assign it.Chidi-Dev1 commentedon Aug 20, 2026
Hi Maintainer,
I'd be glad to take this issue. I've reviewed the requirements and I'm ready to begin.
Please assign it to me. 🙏
grantfox-oss commentedon Aug 24, 2026
🦊 GrantFox — @DiegoMoron0102 has been assigned to this issue as part of the Third Campaign campaign!
Next steps:
Closes #15)Good luck! Track your progress on GrantFox.