feat(web): add copy button affordances for transaction hashes, payer …

[ajulaybeeb]

Summary

• Created a reusable, accessible CopyButton component (apps/web/src/components/copy-button.tsx) with visual state feedback and polite screen-reader announcements via role="status" live region.
• Added copy affordances to the Payment Details modal in apps/web/src/app/dashboard/page.tsx for Transaction Hash (selected.tx_hash) and Payer Address (selected.payer), copying untruncated values to the clipboard.
• Added copy affordance to the cryptographic batch Merkle root (batch.root) in apps/web/src/app/verify/page.tsx.
• Added unit tests covering the CopyButton component, Dashboard payment modal copy affordances, and Verify Merkle root copy controls.

Why

Users inspecting settlement payments on the dashboard modal or reviewing batch audit details on the verify page had no copy button affordance for long cryptographic identifiers (such as 64-character transaction hashes, 56-character Stellar public keys, and 32-byte Merkle roots). Manually selecting and highlighting these values inside scrollable/wrapped text boxes was error-prone and tedious for merchant operators.

Implementation

• apps/web/src/components/copy-button.tsx:
  • Implemented CopyButton accepting value, label, className, and timeoutMs.
  • Copies the exact full value to navigator.clipboard.writeText(value).
  • Supports visual transitions (Copy icon → Copied checkmark with green badge accent / Failed icon on clipboard rejection).
  • Includes a hidden role="status" live region (aria-live="polite" aria-atomic="true") announcing "<label> copied to clipboard" or "Failed to copy <label>".
  • Automatically resets feedback status after 2 seconds (3 seconds on error).
• apps/web/src/app/dashboard/page.tsx:
  • Updated Field helper to support an optional action slot aligned in the header row next to the field label.
  • Placed <CopyButton value={selected.tx_hash} label="Transaction Hash" /> and <CopyButton value={selected.payer} label="Payer Address" /> in the payment details modal.
  • Cleanly exported PaymentModal to facilitate modular rendering and testing.
• apps/web/src/app/verify/page.tsx:
  • Added copyable?: boolean to the Detail component and wired <Detail label="Merkle Root" value={batch.root} mono copyable />.
• Tests:
  • apps/web/src/components/copy-button.test.tsx: Validates accessible labels, tooltip titles, and live region announcements.
  • apps/web/src/app/dashboard/dashboard-copy.test.tsx: Validates full untruncated identifiers and copy action buttons rendered in PaymentModal.
  • apps/web/src/app/verify/verify-accessibility.test.tsx: Validates copy button rendering and accessibility for batch Merkle roots.

Testing

• pnpm format:check: Passed (all files formatted with Prettier).
• pnpm --filter web lint: Passed (0 errors).
• pnpm --filter web typecheck: Passed (TypeScript tsc --noEmit exited with code 0).
• pnpm --filter web test: Passed (22/22 test files passed, 253/253 tests passing).
• pnpm --filter web build: Passed (Production Turbopack build succeeded with all routes statically/dynamically compiled).

Scope / Risk

• Strictly scoped to UI copy affordances in apps/web.
• Non-breaking change; gracefully handles clipboard permission errors without crashing or blocking interactions.

Issue

Closes #198

[vercel]

@ajulaybeeb is attempting to deploy a commit to the ACCENSA Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@ajulaybeeb 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! 🚀

Learn more about application limits

[mergekeeper]

MergeKeeper review

Scope: in scope for linked issue #198.
Verdict: clean

The pull request correctly implements all requested copy affordances with appropriate visual feedback, accessibility support, and unit tests.

Reviewed commit: 1dfe051c5f320a12e9a9d1cafb10753342fa7907.
CI and merge eligibility are checked separately.

[mergekeeper]

Approved

The pull request correctly implements all requested copy affordances with appropriate visual feedback, accessibility support, and unit tests.

[mergekeeper]

Merged

Merged with squash.