Issue 046: Wire WalletSelectModal into App connect flow for multi-wallet UX

[orunganiekan]

Category: Frontend
Complexity: 200 points
Labels: frontend, wave-200

Context

WalletSelectModal.tsx and adapters (Freighter, xBull, Lobstr, Hana) exist via useWallet, but App.tsx still hardcodes connect(AVAILABLE_WALLETS[0]) and Freighter-only copy.

Problem

Users with non-Freighter wallets cannot discover supported wallets despite completed adapter work.

Goal

Integrate modal + WalletBar patterns into the primary connect path with accessible selection and error states.

Scope

Includes: App/connect UX wiring, tests.
Does NOT include: new wallet adapters.

Implementation Guidelines

• Files: App.tsx, WalletSelectModal.tsx, WalletBar.tsx, useWallet.ts, App.test.tsx.
• Preserve passphrase/network checks from useNetworkCheck.

Acceptance Criteria

• Connect opens wallet selector
• Each installed adapter selectable in UI tests/mocks
• Freighter-only copy removed
• Keyboard/focus trap covered via existing hooks if used

Validation

cd frontend && npm test for App/Wallet tests; manual smoke with mocked adapters.

PR Expectations

The PR should include:

• UI wiring + tests + screenshot optional

---

---

[DeePrincipal-dev-lang]

@DeePrincipal-dev-lang has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi there! I'd like to work on this issue if it's still open.

I'm a prompt engineer with a detail oriented, methodical approach to debugging and testing. I went through the issue description and already have a clear plan for tackling it. Happy to outline my approach before diving in if that would be useful for review.

I can start right away and will keep you posted on progress as I go, including test coverage and the PR link, so you have visibility the whole way through.

Would love to be assigned this one. Thanks for maintaining the repo!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @DeePrincipal-dev-lang to this issue.

[Halimatyemisi]

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

Hello Maintainer, I’ve gone through the issue details and understand the expected outcome. I’m confident I can work on it successfully. Kindly assign it to me.

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

[Marvelg256]

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

Hi Maintainer! I'd like to work on this issue. I'm confident I can complete it and submit a PR within 24 hours. Looking forward to contributing!

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

[kobbzy]

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

I would like to work on this issue because I have solid experience integrating Web3 frontend interfaces, managing wallet connection state, and wiring modal components into application connect flows.

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

[abdulwahabmonilola-ctrl]

@abdulwahabmonilola-ctrl has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi Maintainer,I'd like to work on this issue because I have reviewed the requirements and I have experience in it.

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

[deyemi01]

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

Hello maintainer, I would love to work on this

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

[Muyideen-js]

@Muyideen-js has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

I'd like to work on wiring WalletSelectModal into the App connect flow, replacing the hardcoded AVAILABLE_WALLETS[0] call and removing Freighter-only copy. I plan to add tests in App.test.tsx that verify each mocked adapter is selectable while preserving the existing passphrase and network checks from useNetworkCheck.

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

[Jessepriase]

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

i would like to work on this issue

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

[drips-wave]

Congratulations, @Jessepriase! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on August 31, 2026.

🧑‍💻 @Jessepriase: 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 marked as completed by a Drips Wave moderator for @Jessepriase as part of the Stellar Wave Program's 8th Wave 🥳

Moderator's reason: [Auto-assessed] The PR has been merged by the repository maintainers as verified by the merge timestamp (2026-08-31T10:20:10Z), fulfilling the acceptance criteria for a completed contribution.

😎 @Jessepriase: 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.

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

ℹ️ Note: This issue was marked complete via moderation. Points were issued even though the GitHub issue remains open.