Skip to content

Commit 80f07c7

Browse files
committed
Merge branch 'pr-161'
2 parents 6f26510 + 5205649 commit 80f07c7

6 files changed

Lines changed: 63 additions & 19 deletions

File tree

README.md

263 Bytes

# stableroute-frontend Next.js frontend application for [StableRoute](https://github.com/StableRoute-Org/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](src/app/page.tsx)): Home landing page with navigation links and quick CTAs. - **`/pairs`** ([pairs/page.tsx](src/app/pairs/page.tsx)): Lists registered currency pairs on the router. - **`/pairs/new`** ([pairs/new/page.tsx](src/app/pairs/new/page.tsx)): Form interface to register a new currency pair. - **`/quote`** ([quote/page.tsx](src/app/quote/page.tsx)): Form interface to request currency routing path quotes. - **`/stats`** ([stats/page.tsx](src/app/stats/page.tsx)): Status dashboard showing system metrics and polling the backend. - **`/admin`** ([admin/page.tsx](src/app/admin/page.tsx)): Control center to pause or unpause router activity. - **`/api-keys`** ([api-keys/page.tsx](src/app/api-keys/page.tsx)): Dashboard to create, list, and revoke API keys. - **`/events`** ([events/page.tsx](src/app/events/page.tsx)): Audit log page rendering the system event log history. - **`/webhooks`** ([webhooks/page.tsx](src/app/webhooks/page.tsx)): Webhook manager for listing and adding event subscribers. - **`/settings`** ([settings/page.tsx](src/app/settings/page.tsx)): User settings interface hosting the light/dark appearance toggle. - **`/docs`** ([docs/page.tsx](src/app/docs/page.tsx)): Documentation page describing the API endpoints and usage. - **`/about`** ([about/page.tsx](src/app/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: ```bash git clone && cd stableroute-frontend ``` 2. Install dependencies: ```bash npm install ``` 3. Build and test: ```bash npm run build npm test ``` 4. Run locally: ```bash 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 | ## Accessibility ### ARIA Live Regions Dynamic list updates (loading → loaded / loading → empty) on the pairs, events, api-keys, and webhooks pages are wrapped in `aria-live="polite"` regions so screen-reader users are notified when content arrives. Error messages continue to use `role="alert"` for assertive announcements. A single polite region per page prevents double announcements. ## 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 # test

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.

Shared Quote Validation

Quote response typing and form validation helpers live in src/lib/quote.ts. The /quote and /pairs/new forms share assetsDiffer for same-asset checks, and /quote uses isValidAmount for base-unit amount validation.

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

Accessibility

ARIA Live Regions

Dynamic list updates (loading → loaded / loading → empty) on the pairs, events, api-keys, and webhooks pages are wrapped in aria-live="polite" regions so screen-reader users are notified when content arrives. Error messages continue to use role="alert" for assertive announcements. A single polite region per page prevents double announcements.

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

src/app/pairs/new/page.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import { useState } from "react";
44
import { useRouter } from "next/navigation";
55
import { apiPost } from "@/lib/apiClient";
6+
import { assetsDiffer } from "@/lib/quote";
67

78
export default function NewPairPage() {
89
const router = useRouter();
@@ -14,7 +15,7 @@ export default function NewPairPage() {
1415
const onSubmit = async (e: React.FormEvent) => {
1516
e.preventDefault();
1617
setError(null);
17-
if (source === destination) {
18+
if (!assetsDiffer(source, destination)) {
1819
setError("Source and destination must differ.");
1920
return;
2021
}

src/app/quote/Client.tsx

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,7 @@
11
"use client";
22

33
import { useState } from "react";
4-
5-
type Quote = {
6-
source_asset: string;
7-
dest_asset: string;
8-
amount: string;
9-
estimated_rate: string;
10-
route: string[];
11-
};
4+
import { assetsDiffer, isValidAmount, type Quote } from "@/lib/quote";
125

136
const API_BASE =
147
process.env.NEXT_PUBLIC_STABLEROUTE_API_BASE ?? "http://localhost:3001";
@@ -35,19 +28,11 @@ export default function QuoteClient() {
3528
setError(null);
3629
setQuote(null);
3730

38-
const normalizedSourceAsset = normalizeAssetCode(sourceAsset);
39-
const normalizedDestAsset = normalizeAssetCode(destAsset);
40-
const normalizedAmount = amount.trim();
41-
42-
if (!normalizedSourceAsset || !normalizedDestAsset) {
43-
setError("Asset codes must be 1-12 letters or numbers.");
44-
return;
45-
}
46-
if (normalizedSourceAsset === normalizedDestAsset) {
31+
if (!assetsDiffer(sourceAsset, destAsset)) {
4732
setError("Source and destination assets must differ.");
4833
return;
4934
}
50-
if (!/^[1-9][0-9]{0,38}$/.test(normalizedAmount)) {
35+
if (!isValidAmount(amount)) {
5136
setError("Amount must be a positive integer (base units).");
5237
return;
5338
}

src/app/settings/Client.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
"use client";
2+
13
import { Card } from "@/components/Card";
24
import { ThemeToggle } from "@/components/ThemeToggle";
35
import { readTheme, effectiveTheme, type Theme } from "@/lib/theme";

src/lib/__tests__/quote.test.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { assetsDiffer, isValidAmount, normalizeAsset } from "../quote";
2+
3+
describe("quote validators", () => {
4+
describe("isValidAmount", () => {
5+
it("accepts positive integer base-unit amounts up to 39 digits", () => {
6+
expect(isValidAmount("1")).toBe(true);
7+
expect(isValidAmount("1000000")).toBe(true);
8+
expect(isValidAmount("9".repeat(39))).toBe(true);
9+
});
10+
11+
it("rejects empty, zero, leading zero, non-digit, and overflow values", () => {
12+
expect(isValidAmount("")).toBe(false);
13+
expect(isValidAmount("0")).toBe(false);
14+
expect(isValidAmount("01")).toBe(false);
15+
expect(isValidAmount("1.5")).toBe(false);
16+
expect(isValidAmount("1_000")).toBe(false);
17+
expect(isValidAmount("9".repeat(40))).toBe(false);
18+
});
19+
});
20+
21+
describe("assetsDiffer", () => {
22+
it("rejects the same asset after normalization", () => {
23+
expect(assetsDiffer("USDC", "USDC")).toBe(false);
24+
});
25+
26+
it("accepts different assets after normalization", () => {
27+
expect(assetsDiffer("USDC", "EURC")).toBe(true);
28+
});
29+
30+
it("keeps current exact-string asset normalization behavior", () => {
31+
expect(normalizeAsset(" usdc ")).toBe(" usdc ");
32+
expect(assetsDiffer("USDC", "usdc")).toBe(true);
33+
});
34+
});
35+
});

src/lib/quote.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export type Quote = {
2+
source_asset: string;
3+
dest_asset: string;
4+
amount: string;
5+
estimated_rate: string;
6+
route: string[];
7+
};
8+
9+
const AMOUNT_PATTERN = /^[1-9][0-9]{0,38}$/;
10+
11+
export function normalizeAsset(asset: string) {
12+
return asset;
13+
}
14+
15+
export function assetsDiffer(a: string, b: string) {
16+
return normalizeAsset(a) !== normalizeAsset(b);
17+
}
18+
19+
export function isValidAmount(value: string) {
20+
return AMOUNT_PATTERN.test(value);
21+
}

0 commit comments

Comments
 (0)