Skip to content

feat(ConnectScreen): no wallet option logos, no New to Stellar help section, hero overflows short mobile viewports #198

Description

@k-deejah

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

  1. Add wallet option cards below the connect button (initially showing logos of supported wallets like Freighter).
  2. Add a collapsible <details>/<summary> "New to Stellar?" section with beginner-friendly copy.
  3. Add hidden class on the hero section below a height breakpoint using @media (max-height: 640px).

Acceptance Criteria

  • Wallet option logos visible on ConnectScreen
  • "New to Stellar?" collapsible section renders correctly
  • Hero section hides on short viewports (< 640px height)
  • npm run build passes

Note for Contributors: Write a clear PR description. Include screenshots at 640px and 400px height showing the responsive hero behaviour.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions