👋 Nice little UX polish task, perfect for a first contribution!
The idea
We have a CopyButton component (src/components/CopyButton.tsx) used to copy things like bridge addresses, asset codes, and API keys. Right now it copies to the clipboard but gives no visible confirmation, so users aren't always sure the copy worked.
Let's add a brief "Copied!" confirmation.
What we'd like
When the button is clicked and the copy succeeds:
- Briefly swap the icon/label to a check + "Copied!" for ~1.5 seconds, then revert
- Make it accessible: announce the change to screen readers (e.g. an
aria-live="polite" region or an updated aria-label)
- Keep it smooth if clicked repeatedly (no flicker)
Where to look
src/components/CopyButton.tsx — the component itself
src/components/CopyButton.test.tsx — existing tests; please extend these
- Look for existing toast/tooltip primitives in
src/components before adding anything new
Acceptance criteria
Getting started
npm install
npm run dev
npm run test # or the project's test script
Comment here if you'd like a pointer on the clipboard mocking in tests — glad to help! ✨
👋 Nice little UX polish task, perfect for a first contribution!
The idea
We have a
CopyButtoncomponent (src/components/CopyButton.tsx) used to copy things like bridge addresses, asset codes, and API keys. Right now it copies to the clipboard but gives no visible confirmation, so users aren't always sure the copy worked.Let's add a brief "Copied!" confirmation.
What we'd like
When the button is clicked and the copy succeeds:
aria-live="polite"region or an updatedaria-label)Where to look
src/components/CopyButton.tsx— the component itselfsrc/components/CopyButton.test.tsx— existing tests; please extend thesesrc/componentsbefore adding anything newAcceptance criteria
react-i18nextCopyButton.test.tsxcovers the new behaviorGetting started
Comment here if you'd like a pointer on the clipboard mocking in tests — glad to help! ✨