Superhero Web App

Superhero is a modular, React + TypeScript web app for the Aeternity ecosystem that brings together:

• DEX trading and liquidity management
• On-chain governance views and participation
• Trendminer analytics: trending tokens, charts, and real‑time data
• Social posting and tipping with wallet‑based identity

This repository contains the Vite-powered frontend whose runtime configuration lives in src/config.ts (with optional Vite env overrides).

Quick start

# Install dependencies
npm install

# Start the dev server
npm run dev

# Build for production (outputs to dist/)
npm run build

# Preview the production build locally
npm run preview

# Run unit/component tests
npm test

# Run e2e tests (starts dev server automatically)
npm run test:e2e

What’s inside (feature highlights)

• DEX: swap, add/remove liquidity, token selection, route info, settings
• Governance: proposals, voting views, accounts and activity
• Trendminer: trending lists, mini charts, candles, and live updates via WebSocket
• Social: create posts, tip users, profile and identity components
• Wallet: connect via supported Aeternity wallets, balances, and fiat value helpers

Key modules live under:

• src/components/dex/* — DEX UI, hooks, and widgets
• src/components/explore/* — token and pair exploration
• src/components/pool/* — liquidity management
• src/components/Trendminer/* — analytics UI (charts, trending, carousels)
• src/views/* — routed pages

Runtime configuration

Configuration is defined in code at src/config.ts via the exported CONFIG object. Adjust endpoints and feature flags by editing that file, then rebuild/restart the app. Keys commonly used:

• BACKEND_URL — application backend
• SUPERHERO_API_URL / SUPERHERO_WS_URL — analytics REST and WebSocket endpoints
• NODE_URL / MIDDLEWARE_URL — Aeternity node and middleware
• WALLET_URL — default wallet endpoint
• GOVERNANCE_API_URL — governance backend
• EXPLORER_URL — block explorer base URL
• JITSI_DOMAIN — conferencing domain for meeting links
• DEX_BACKEND_URL, MAINNET_DEX_BACKEND_URL, TESTNET_DEX_BACKEND_URL — DEX services
• X_OAUTH_CLIENT_ID — public X OAuth client id used by Connect X flow
• PROFILE_REGISTRY_CONTRACT_ADDRESS — profile registry contract address

You can override some values at build time using Vite env vars:

# Example overrides at build/dev time
VITE_SUPERHERO_API_URL=https://api.example.com \
VITE_SUPERHERO_WS_URL=wss://ws.example.com \
VITE_X_OAUTH_CLIENT_ID=your_x_oauth_client_id \
VITE_PROFILE_REGISTRY_CONTRACT_ADDRESS=ct_your_profile_registry_contract \
npm run dev

# Or for a production build
VITE_SUPERHERO_API_URL=https://api.example.com \
VITE_SUPERHERO_WS_URL=wss://ws.example.com \
VITE_X_OAUTH_CLIENT_ID=your_x_oauth_client_id \
VITE_PROFILE_REGISTRY_CONTRACT_ADDRESS=ct_your_profile_registry_contract \
npm run build

Tech stack

• React 18 + TypeScript, Vite
• State: Redux Toolkit (global app state) and Zustand (local stores where applicable)
• Routing: React Router v6
• Styles: SCSS and Tailwind CSS
• i18n: i18next
• Testing: Vitest + Testing Library (unit/component), Playwright (e2e)

Scripts

Defined in package.json:

• dev — run the Vite dev server
• build — production build
• preview — preview the dist/ build
• test — run unit and component tests
• test:e2e — run e2e tests in Docker (same environment as CI; use for consistent screenshots)
• test:e2e:ui — run e2e tests in Playwright UI mode (watch, pick tests, debug)
• test:e2e:update-snapshots — update screenshot baselines in Docker (writes to e2e/ on the host)
• test:e2e:host — run e2e tests on the host (starts dev server if needed)
• test:e2e:host:update-snapshots — update screenshot baselines on the host (visual regression)

End-to-end tests

E2e tests use Playwright and live in e2e/. They run against the Vite dev server (started automatically unless one is already running).

Screenshot tests (visual regression) should be run in Docker so CI and local runs produce identical results. Use these commands for anything that uses toHaveScreenshot:

# Run e2e (including screenshot comparison) — same as CI
npm run test:e2e

# Update screenshot baselines after intentional UI changes (writes to e2e/ on your machine)
npm run test:e2e:update-snapshots

Running e2e on the host (no Docker) is still supported for quick iteration, but screenshot pixels may differ from CI (fonts, OS, DPI). For host runs:

First-time setup — install browsers (once per machine):

npx playwright install chromium

Run all e2e tests on the host:

npm run test:e2e:host

Interactive mode (pick tests, watch, debug):

npm run test:e2e:ui

Update screenshot baselines on the host:

npm run test:e2e:host:update-snapshots

Config: playwright.config.ts. Failure artifacts are under test-results/; the default reporter prints to the terminal.

Deployment

This app is a static site once built. You can deploy the dist/ directory to any static host (Netlify, Vercel, S3, nginx, etc.).

• Netlify configuration is included: netlify.toml and public/_redirects for SPA routing
• Typical build settings: build command npm run build, publish directory dist

Contributing

1. Create a feature branch from main
2. Commit with conventional messages (e.g., feat:, fix:, docs:)
3. Open a pull request

License

Unless stated otherwise by the project owners, this repository is provided as‑is under its respective license. Consult project maintainers for details.