🌍 Africa-Oriented Data Oracle Dashboard | Modern Web3 interface for localized real-time data on Stellar.
High-performance, accessible, and responsive Web3 user interface powering StellarFlow—the next-generation decentralized exchange (DEX), collateralized vaults, yield aggregators, and ZK-shielded cross-border remittance portal built on the Stellar network.
stellarflow-frontend is built with Next.js (App Router), TypeScript, TailwindCSS, and Radix UI primitives. It provides real-time market data visualization via WebSockets, seamless wallet connection interfaces (Freighter, Albedo, WalletConnect), and client-side zero-knowledge (ZK) proof generation using WebAssembly (WASM).
stellarflow-frontend/
├── app/ # Next.js App Router pages & layouts
│ ├── (trading)/ # Swap views, order book depth, & charting
│ ├── vaults/ # Collateralized debt positions & health factor gauges
│ ├── yield/ # Auto-compounding strategy vaults & APY calculators
│ ├── governance/ # DAO proposal cards, voting, & delegation trees
│ ├── remittance/ # Interactive SEP-24/31/38 fiat onboarding widgets
│ └── portfolio/ # Multi-wallet PnL charts & activity streams
├── components/ # Reusable UI component library
│ ├── ui/ # Radix UI design primitives (Buttons, Modals, Inputs)
│ ├── wallet/ # Freighter & WalletConnect connection modals
│ ├── charting/ # TradingView & HTML5 Canvas order book visualizers
│ └── zk/ # Client-side WASM ZK proof loading indicators
├── hooks/ # Custom React hooks (WebSockets, SWR price feeds, Session)
├── lib/ # Soroban SDK instances, formatters, & client helpers
├── public/ # Static assets, WebAssembly binaries, & PWA manifest
├── e2e/ # Playwright & Cypress end-to-end test suites
└── styles/ # Global TailwindCSS styles & design tokens
- Framework: Next.js 14+ (App Router) / React 18+
- State Management & Data: Zustand (Session/UI State) & TanStack Query / SWR
- Styling & Components: TailwindCSS, Radix UI Primitives, Lucide Icons
- Wallet & Blockchain SDKs:
@stellar/freighter-api,@walletconnect/universal-provider,@stellar/stellar-sdk - Charts & Visualizers: Lightweight-Charts, Recharts, HTML5 Canvas
- Testing & Quality: Playwright (E2E), Vitest, Storybook v7+, ESLint, Prettier
- Node.js:
v18.17.0or higher - Package Manager:
pnpm(recommended),npm, oryarn
Clone the repository and install dependencies:
git clone [https://github.com/stellarflow/stellarflow-frontend.git](https://github.com/stellarflow/stellarflow-frontend.git)
cd stellarflow-frontend
pnpm install
Copy the sample environment file and configure your local settings:
cp .env.example .env.local
-
NEXT_PUBLIC_SOROBAN_RPC_URL=https://soroban-testnet.stellar.org
-
NEXT_PUBLIC_BACKEND_API_URL=http://localhost:8000/api/v1
-
NEXT_PUBLIC_WS_MARKET_URL= ws://localhost:8000/ws
Run the Next.js development server:
pnpm dev
Open http://localhost:3000 in your browser to inspect the application.
Run unit and component tests:
# Run Vitest component tests
pnpm test
# Run Playwright End-to-End tests
pnpm test:e2e
Run linter, type checks, and code formatting:
# Type check with TypeScript compiler
pnpm type-check
# Lint codebase with ESLint & Tailwind rules
pnpm lint
We welcome open-source contributors! Browse open tasks on our GitHub issue board tagged good-first-issue or help-wanted.
- Fork the repository and create a feature branch (
git checkout -b feature/my-ui-patch). - Commit your changes with clear commit messages and component tests.
- Open a Pull Request linking the corresponding issue ID.
Thank you to all our open-source contributors for making StellarFlow fast, accessible, and beautiful!
This repository is licensed under the MIT License.