stableroute-frontend

Next.js frontend application for StableRoute — the Stellar liquidity routing protocol. It provides user interfaces for obtaining path routing quotes, managing liquidity pairs, viewing stats, configuring API keys and webhooks, browsing audit logs, adjusting developer settings, and reading endpoint documentation.

What this repo contains

• Next.js 15 (App Router) with React 19
• TailwindCSS for styling
• A comprehensive set of routing, management, and audit log pages integrated with the StableRoute backend.

Routes

Each route is defined under src/app and connects to its respective UI page:

• / (page.tsx): Home landing page with navigation links and quick CTAs.
• /pairs (pairs/page.tsx): Lists registered currency pairs on the router.
• /pairs/new (pairs/new/page.tsx): Form interface to register a new currency pair.
• /quote (quote/page.tsx): Form interface to request currency routing path quotes.
• /stats (stats/page.tsx): Status dashboard showing system metrics and polling the backend.
• /admin (admin/page.tsx): Control center to pause or unpause router activity.
• /api-keys (api-keys/page.tsx): Dashboard to create, list, and revoke API keys.
• /events (events/page.tsx): Audit log page rendering the system event log history.
• /webhooks (webhooks/page.tsx): Webhook manager for listing and adding event subscribers.
• /settings (settings/page.tsx): User settings interface hosting the light/dark appearance toggle.
• /docs (docs/page.tsx): Documentation page describing the API endpoints and usage.
• /about (about/page.tsx): Static about page describing the protocol.

Footer Navigation

The shared footer keeps the StableRoute tagline visible on every page, renders the current copyright year dynamically, and links to /docs, /about, and the StableRoute Discord community.

Configuration & API Integration

The frontend communicates with the StableRoute API backend.

Environment Variables

• NEXT_PUBLIC_STABLEROUTE_API_BASE: Specifies the base URL of the StableRoute API backend (defaults to http://localhost:3001 if unset).

API Endpoints Consumed

• /api/v1/pairs: Lists registered pairs (GET) and registers new pairs (POST).
• /api/v1/quote: Requests path routing quotes for (source, destination, amount) triples (GET).
• /api/v1/stats: Retrieves system performance and routing metrics (GET).
• /api/v1/admin/status: Retrieves router paused status (GET).
• /api/v1/admin/pause / /api/v1/admin/unpause: Pauses and unpauses routing activity (POST).
• /api/v1/api-keys: Creates (POST), lists (GET), and revokes (DELETE at /api/v1/api-keys/:prefix) API keys.
• /api/v1/events: Retrieves system event audit logs (GET).
• /api/v1/webhooks: Creates (POST), lists (GET), and revokes (DELETE at /api/v1/webhooks/:id) webhook subscriptions.

Prerequisites

• Node.js 18+
• npm

Setup (contributors)

1. Clone the repo and enter the directory:

   git clone <repo-url> && cd stableroute-frontend

2. Install dependencies:

   npm install

3. Build and test:

   npm run build
   npm test

4. Run locally:

   npm run dev

   App: http://localhost:3000.

Scripts

Script	Description
npm run dev	Start dev server (Next.js)
npm run build	Production build
npm run start	Run production server
npm test	Run Jest tests
npm run lint	Next.js ESLint

CI/CD

On every push/PR to main, GitHub Actions runs:

• npm ci
• npm run build
• npm test

Ensure these pass locally before pushing.

Contributing

1. Fork the repo and create a branch from main.
2. Add tests for new UI/behavior; keep npm run build and npm test passing.
3. Open a PR; CI must be green.

License

MIT