Problem
Three issues affect the ConnectScreen design, onboarding flow, and wallet options display.
1. ConnectScreen shows only one generic "Connect Wallet" button with no wallet options
Real Stellar dApps let users choose their wallet (Freighter, xBull, Lobstr, Albedo). The current ConnectScreen shows a single button with no wallet selector. Once real wallet integration is added (issue #22), a wallet picker or at least logos for supported wallets should appear.
2. ConnectScreen has no "What is a Stellar wallet?" help text for new users
The connect screen drops users directly into a connect button with no explanation of what a Stellar wallet is or why they need one. A collapsible "New to Stellar?" section with 2–3 bullet points would reduce friction for first-time users.
3. ConnectScreen hero section takes up too much vertical space on short mobile screens
The hero image and tagline consume most of the viewport on short phones (< 640px height), pushing the connect button below the fold. The hero should be hidden or compressed below sm viewport height.
Solution
- Add wallet option cards below the connect button (initially showing logos of supported wallets like Freighter).
- Add a collapsible
<details>/<summary> "New to Stellar?" section with beginner-friendly copy.
- Add
hidden class on the hero section below a height breakpoint using @media (max-height: 640px).
Acceptance Criteria
Note for Contributors: Write a clear PR description. Include screenshots at 640px and 400px height showing the responsive hero behaviour.
Problem
Three issues affect the
ConnectScreendesign, onboarding flow, and wallet options display.1.
ConnectScreenshows only one generic "Connect Wallet" button with no wallet optionsReal Stellar dApps let users choose their wallet (Freighter, xBull, Lobstr, Albedo). The current
ConnectScreenshows a single button with no wallet selector. Once real wallet integration is added (issue #22), a wallet picker or at least logos for supported wallets should appear.2.
ConnectScreenhas no "What is a Stellar wallet?" help text for new usersThe connect screen drops users directly into a connect button with no explanation of what a Stellar wallet is or why they need one. A collapsible "New to Stellar?" section with 2–3 bullet points would reduce friction for first-time users.
3.
ConnectScreenhero section takes up too much vertical space on short mobile screensThe hero image and tagline consume most of the viewport on short phones (< 640px height), pushing the connect button below the fold. The hero should be hidden or compressed below
smviewport height.Solution
<details>/<summary>"New to Stellar?" section with beginner-friendly copy.hiddenclass on the hero section below a height breakpoint using@media (max-height: 640px).Acceptance Criteria
ConnectScreennpm run buildpasses