Skip to content

feat(wallet-modal): add tooltip primitive to copy-address button (Closes #783) - #872

Open
waterWang wants to merge 1 commit into
Predictify-org:mainfrom
waterWang:feat/walletmodal-tooltip
Open

feat(wallet-modal): add tooltip primitive to copy-address button (Closes #783)#872
waterWang wants to merge 1 commit into
Predictify-org:mainfrom
waterWang:feat/walletmodal-tooltip

Conversation

@waterWang

Copy link
Copy Markdown

Summary

Wires the shared Tooltip primitive to the icon-only copy-address button in WalletModal (Closes #783).

The copy button already had an aria-label for screen readers, but sighted mouse/touch users had no visual affordance explaining what the small icon does. This change wraps it in the repo's Tooltip primitive:

  • Default: shows "Copy wallet address" on hover / focus / long-press.
  • After copy: switches to "Address copied" to confirm the action, mirroring the existing aria-label behavior.

Changes

  • src/pages/WalletModal.tsx
    • Imported TooltipProvider, Tooltip, TooltipTrigger, TooltipContent from @/components/ui/tooltip.
    • Wrapped the copy-address <button> in the tooltip, with dynamic content keyed on the copied state.
  • src/pages/__tests__/WalletModal.test.tsx
    • Mocked @/constants/wallet-kits.constant to avoid the ESM stellar-wallets-kit import failing under Jest.
    • Added a WalletModal — copy-address tooltip (#783) describe block with two new tests:
      • renders the copy button as a tooltip trigger when a wallet is connected
      • shows "Copy wallet address" tooltip content when the trigger is opened

Accessibility (WCAG 2.1 AA)

  • The tooltip follows the WAI-ARIA tooltip pattern (Radix handles role="tooltip" + aria-describedby).
  • Keyboard: trigger is focusable; tooltip opens on focus and dismisses on blur.
  • Touch: long-press (600ms) reveals the tooltip for mobile users.
  • Reduced motion: Radix tooltip's fade/zoom animation classes are governed by the existing design system; no new motion is introduced.

Test

PASS src/pages/__tests__/WalletModal.test.tsx
  WalletModal — reduced-motion fallback (#633)
    ✓ 3 tests
  WalletModal — copy-address tooltip (#783)
    ✓ renders a copy button with a tooltip trigger when a wallet is connected
    ✓ shows 'Copy wallet address' tooltip content when the tooltip is opened
Test Suites: 1 passed, Tests: 5 passed

Closes #783

 Predictify-org#783)

Wrap the copy-address icon-only button in WalletModal with the shared
Tooltip primitive (TooltipProvider / Tooltip / TooltipTrigger /
TooltipContent). The tooltip shows 'Copy wallet address' by default and
switches to 'Address copied' after the address is copied, mirroring the
existing aria-label. Improves discoverability of the icon-only control
for mouse and touch users (long-press) while keeping WCAG 2.1 AA
accessibility.
@vercel

vercel Bot commented Aug 8, 2026

Copy link
Copy Markdown

@waterWang is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel.

A member of the Team first needs to authorize it.

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.

Add tooltip primitive usage on WalletModal icon buttons [b#049]

1 participant