stellar-stream-dashboard

Real-time Next.js dashboard for monitoring and managing Stellar payment streams — live balance tickers, portfolio analytics, stream health monitoring, and Freighter wallet integration.

Features

• Real-time claimable counter — per-second live updates of your claimable balance for each stream, animated with CSS transitions.
• Portfolio analytics — monthly inflow, outflow, and net flow aggregated across all your streams.
• Stream health monitoring — colour-coded indicators for on-track, expiring-soon, and long-unclaimed streams.
• Testnet / mainnet switching — toggle between networks without reconnecting your wallet.
• Freighter wallet integration — non-custodial connect/disconnect with graceful error handling if Freighter is not installed.
• Dark mode — full dark mode support via Tailwind's dark class strategy.
• Stream detail page — full metadata, a large live counter, timeline visualisation, and a transaction history placeholder.
• TypeScript throughout — comprehensive type definitions for all Stellar stream data structures.

Screenshots

Screenshots coming soon.

Getting started

Prerequisites

• Node.js 20+
• Freighter browser extension (for wallet connection)
• A Stellar testnet or mainnet account

Installation

git clone https://github.com/viccoder-oops/stellar-stream-dashboard.git
cd stellar-stream-dashboard
npm install
cp .env.example .env.local
# edit .env.local with your RPC endpoint
npm run dev

Open http://localhost:3000 in your browser.

Environment variables

Variable	Required	Default	Description
NEXT_PUBLIC_RPC_URL	Yes	—	Soroban RPC endpoint (testnet)
NEXT_PUBLIC_NETWORK	No	testnet	Active network (testnet or mainnet)
NEXT_PUBLIC_HORIZON_URL	No	—	Stellar Horizon endpoint

Testnet defaults

NEXT_PUBLIC_RPC_URL=https://soroban-testnet.stellar.org
NEXT_PUBLIC_NETWORK=testnet
NEXT_PUBLIC_HORIZON_URL=https://horizon-testnet.stellar.org

Mainnet

NEXT_PUBLIC_RPC_URL=https://soroban-rpc.stellar.org
NEXT_PUBLIC_NETWORK=mainnet
NEXT_PUBLIC_HORIZON_URL=https://horizon.stellar.org

Project structure

src/
  app/               # Next.js App Router pages
    page.tsx          # Dashboard (root)
    stream/[id]/      # Stream detail page
    globals.css
    layout.tsx
  components/         # Reusable UI components
    LiveCounter.tsx
    NetworkSelector.tsx
    PortfolioStats.tsx
    StreamCard.tsx
    StreamHealthIndicator.tsx
    WalletButton.tsx
  context/
    WalletContext.tsx  # Freighter wallet state
  hooks/
    usePortfolio.ts
    useStreams.ts
  lib/
    api.ts             # Soroban RPC calls
    stellar.ts         # Utility functions
  types/
    index.ts           # Shared TypeScript types

Deployment

See docs/DEPLOYMENT.md for Vercel and Docker instructions.

Contributing

See CONTRIBUTING.md.

Security

See SECURITY.md for the vulnerability reporting process.

License

MIT — see LICENSE.