Skip to content

Improve Stellar network switching UI #111

Description

@therealjhay

Description: The app supports testnet and mainnet via NEXT_PUBLIC_STELLAR_NETWORK, but there's no UI to indicate which network the user is on, and no easy way to switch (it requires changing the env variable and restarting). For development, a network switcher is useful.

Requirements:

  • Display the current network (Testnet/Mainnet) in the Topbar or footer
  • Add a visual indicator: colored dot (yellow for testnet, green for mainnet)
  • In development mode, add a network switcher toggle
  • Show a warning banner when on testnet: "You are on Stellar Testnet — transactions use test tokens"
  • Hide the switcher in production (or gate it behind an admin setting)

Suggested execution steps:

  1. In components/layout/Topbar.tsx or Footer.tsx, add a network indicator
  2. Read NEXT_PUBLIC_STELLAR_NETWORK from env
  3. Display "Testnet" with a yellow dot or "Mainnet" with a green dot
  4. Add a warning banner at the top of the app when on testnet
  5. Optionally add a toggle for dev mode that reloads with a different network

Example commit message:

feat(stellar): add Stellar network indicator and testnet warning banner

Added network indicator (Testnet/Mainnet with colored dot) to the Topbar.
Shows a persistent warning banner "You are on Stellar Testnet" for
testnet environments. Helps users and developers identify the active
network at a glance.

Metadata

Metadata

Assignees

Labels

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