feat(AddressDisplay): masked display mode, mono font toggle, dl/dt/dd structure when label is provided

[k-deejah]

Problem

1. AddressDisplay does not support a masked mode that hides the middle of the address — some privacy-focused UIs want to show only the first 4 and last 4 characters (e.g. GBAM...ZJQZ) with the middle completely hidden, unlike truncateAddress which shows more context characters by default.

2. AddressDisplay does not support a monospace font toggle — Stellar addresses are best read in monospace, but the default rendering inherits the parent font. An mono?: boolean prop would apply font-mono to the address span.

3. AddressDisplay wraps label and address in separate DOM layers with no logical grouping — the label span and address span are siblings in a flex column, but there is no <dl>/<dt>/<dd> structure or aria-labelledby linking the label to the value for screen readers.

Solution

1. Add masked?: boolean prop — when true, shows only the first 4 and last 4 chars with ··· in the middle regardless of start/end props.
2. Add mono?: boolean prop — applies font-mono to the address <span>.
3. Wrap the component in a <dl> when label is provided; use <dt> for label and <dd> for address + copy button.

Acceptance Criteria

• masked mode shows GBAM···ZJQZ format
• mono prop applies monospace font to the address
• label provided renders <dl>/<dt>/<dd> structure
• npm run build and tsc --noEmit pass

---

Note for Contributors: Write a clear PR description. Include a screenshot of masked mode and the monospace vs non-monospace comparison.

[titilope12]

@titilope12 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello maintainer, i can fix this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @titilope12 to this issue.

[0xtrendz]

@0xtrendz has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello, I’m interested in working on this issue. I'll add tests where appropriate, maintain organization, and adhere to the current code rules. I would appreciate being assigned to it. Thank you.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @0xtrendz to this issue.

[ritaifeoluwa]

@ritaifeoluwa has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Please assign this issue to me

ℹ️ Repo Maintainers: To accept this application, review their application or assign @ritaifeoluwa to this issue.

[drips-wave]

Congratulations, @ritaifeoluwa! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @ritaifeoluwa: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @ritaifeoluwa as part of the Stellar Wave Program's 7th Wave 🥳

😎 @ritaifeoluwa: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.