Skip to content

Show the full wallet address in a tooltip/title on ConnectButton's truncated label #135

Description

@Jagadeeshftw

📌 Description

ConnectButton (src/components/ConnectButton.tsx) shows truncateAddress(account.address) (src/lib/wallet.ts) once connected, with only a static title="Disconnect" attribute. There is no way to see the full address without opening dev tools or navigating elsewhere, which is awkward when a user wants to double-check which mock account is connected.

🧩 Requirements and context

  • Expose the full, untruncated address via a hoverable/focusable tooltip (or an accessible title) on the connected button, without removing the existing "Disconnect" affordance.
  • The full address must also be available to assistive tech (e.g. via aria-label or a visually-hidden span), not just a title attribute-only mouse tooltip.
  • No change to the connect/disconnect click behavior.

🛠️ Suggested execution

  • Update src/components/ConnectButton.tsx to surface the full address (e.g. combine into aria-label, keeping the visible truncated text and "Disconnect" intent clear).
  • Extend src/components/ConnectButton.test.tsx to assert the full address is present in the accessible name/label when connected.

✅ Acceptance criteria

  • The full wallet address is discoverable via an accessible attribute when connected.
  • The visible truncated label and disconnect behavior are unchanged.
  • Test coverage for the new accessible attribute.

🔒 Security notes

The address is already a public Stellar public key; no new sensitive-data exposure.

📋 Guidelines

  • Minimum 95% test coverage
  • Clear documentation
  • Timeframe: 96 hours

Metadata

Metadata

Assignees

Labels

GrantFox OSSIssue tracked in GrantFox OSSMaybe RewardedIssue may be eligible for a GrantFox rewardOfficial Campaign | FWC26Campaign: Official Campaign | FWC26accessibilityAccessibility (WCAG)enhancementNew feature or improvement

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions