Skip to content

Add a "Copied!" confirmation to the CopyButton component #2

Description

@Meshmulla

👋 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

  • Clicking shows a temporary "Copied!" state, then reverts automatically
  • Works when clicked several times in a row without visual glitches
  • Screen-reader users get feedback (accessible announcement)
  • Confirmation text is translated via react-i18next
  • CopyButton.test.tsx covers the new behavior

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! ✨

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions