Skip to content

feat(frontend): add one-click Copy Stream ID badge in StreamDetailsModal header - #1682

Closed
aazminu wants to merge 1 commit into
LabsCrypt:mainfrom
aazminu:fix/issue-1633-stream-details-copy-id-badge
Closed

aazminu wants to merge 1 commit into
LabsCrypt:mainfrom
aazminu:fix/issue-1633-stream-details-copy-id-badge

Conversation

@aazminu

@aazminu aazminu commented Oct 19, 2026 •

Copy link
Copy Markdown

Description

Adds a one-click Copy Stream ID pill badge using the reusable <CopyButton /> component in the StreamDetailsModal header (frontend/src/components/dashboard/StreamDetailsModal.tsx) so users can quickly copy the Stream ID with keyboard and screen-reader support.

Type of Change

  • 🐛 Bug fix (non-breaking change which fixes an issue)
  • ✨ New feature (non-breaking change which adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • 📚 Documentation update
  • 🔧 Refactoring (no functional changes)
  • ⚡ Performance improvement
  • 🧪 Test addition or update

Related Issues

Closes #1633
Fixes #1633
/claim #1633

Changes Made

  • Rendered the ID: {stream.id} header pill badge alongside <CopyButton text={stream.id} label="Copy" copiedLabel="Copied!" ariaLabel="Copy Stream ID" copiedAriaLabel="Stream ID copied" successMessage="Stream ID copied" /> in frontend/src/components/dashboard/StreamDetailsModal.tsx.
  • Added responsive truncation classes (min-w-0, max-w-full, truncate) so long Stream IDs render cleanly on both mobile and desktop modal headers.
  • Updated frontend/src/components/dashboard/StreamDetailsModal.test.tsx to verify that clicking the Copy Stream ID button copies stream.id to navigator.clipboard, triggers the "Stream ID copied" toast, and transitions the button to the green checkmark copied state.

Testing

Test Coverage

  • Unit tests added/updated
  • Integration tests added/updated
  • Manual testing performed

Test Steps

  1. Run npx vitest run src/components/dashboard/StreamDetailsModal.test.tsx src/__tests__/a11y.test.tsx in frontend/ (7/7 tests pass, including axe-core accessibility audit).
  2. Run npx tsc --noEmit in frontend/ (0 errors).
  3. Run npx eslint src/components/dashboard/StreamDetailsModal.tsx src/components/dashboard/StreamDetailsModal.test.tsx in frontend/ (0 errors, 0 warnings).

Checklist

  • My code follows the project's style guidelines
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • I have checked for breaking changes and documented them if applicable

Additional Notes

Payout Details

  • USDT/USDC Receiving Wallet (EVM / ERC-20 / Polygon / Arbitrum / Optimism / Base / BSC): 0x9a51790aC01c54184bcFa067bC38f7F0E7C6F6B6

Render the Stream ID inside a pill badge alongside the reusable
CopyButton component in StreamDetailsModal header with keyboard
accessibility and aria-label="Copy Stream ID".

Fixes LabsCrypt#1633
@K1NGD4VID K1NGD4VID closed this Oct 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Frontend] Add one-click Copy Stream ID badge in StreamDetailsModal header

2 participants