AgentPay Frontend

Dashboard and Stellar wallet integration for the AgentPay protocol (machine-to-machine payments on Stellar).

Overview

• Stack: Next.js 16, React, TypeScript, Tailwind CSS
• Purpose: AgentPay branding, dashboard placeholder, and future wallet/API integration

Prerequisites

• Node.js 18+
• npm

Setup for contributors

1. Clone the repo (or add remote and pull):

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

2. Install dependencies:

   npm install

3. Verify setup:

   npm run build
   npm test

4. Run locally:

   npm run dev

   Open http://localhost:3000.

Project structure

agentpay-frontend/
├── src/
│   └── app/
│       ├── layout.tsx
│       ├── page.tsx
│       └── page.test.tsx
├── package.json
├── jest.config.ts
├── jest.setup.ts
└── .github/workflows/
    └── ci.yml            # CI: build, test

Environment variables

Variable	Visibility	Default	Purpose
NEXT_PUBLIC_AGENTPAY_API_BASE	public (bundled into client JS)	http://localhost:3001	Base URL for the AgentPay backend. Validated by resolveApiBase() in src/lib/resolveApiBase.ts and rejected in production if non-https except for localhost / 127.0.0.1.

Because the variable is NEXT_PUBLIC_*, its value is exposed to the browser. Never put API secrets in it - it is used only for routing public HTTP requests.

Security headers

A baseline security header set (CSP, X-Frame-Options: DENY, Referrer-Policy, X-Content-Type-Options, Permissions-Policy, HSTS) is wired up in next.config.ts via src/lib/securityHeaders.ts. The CSP connect-src directive tracks NEXT_PUBLIC_AGENTPAY_API_BASE automatically; <a href> links to external sites (https://stellar.org, etc.) remain navigable.

Event log rendering

The /events page renders server-supplied JSON payloads. Each payload is serialised through safeStringify (src/lib/format.ts) with a hard cap (EVENT_PAYLOAD_MAX_CHARS, default 5,000 chars) and a visible …(truncated) marker. Circular references, BigInt, functions, and malformed timestamps are replaced with safe sentinels so a bad payload can't crash the page.

Commands

Command	Description
npm run build	Production build
npm test	Run Jest tests
npm run test:coverage	Run Jest with coverage
npm run dev	Development server
npm run lint	Run ESLint
npm run typecheck	Run the TypeScript compiler

CI/CD

On push/PR to main, GitHub Actions runs:

• npm ci
• npm run build
• npm test

Contributing

See CONTRIBUTING.md for the full contributor workflow, branch naming convention, local checks, and UI accessibility expectations.

License

MIT