feat(ui): main app page, result pages, routing, and Next.js config [UI #5 & UI #8]

[NteinPrecious]

Summary

Implements the main application layer — the search page, result pages,
and routing architecture. Also covers Next.js configuration for Docker
and environment handling.

UI #5 and UI #8 are combined here as they are tightly coupled —
the app page depends on the config being in place, and both are
needed before any result page can work end to end.

Changes

UI #5 — Main app page with search bar and tab switching

• src/app/app/page.tsx — search page at /app, routes to result pages on submit
• src/app/tx/[hash]/page.tsx — fetches and displays transaction by hash from URL
• src/app/account/[address]/page.tsx — fetches and displays account by address from URL
• src/components/AppShell.tsx — shared wrapper with background, header, context provider
• src/components/AppShellContext.ts — context definition with stub values for progressive enhancement
• Input validation before routing: hash must be 64 chars, address must start with G and be 56 chars
• Back to search button on all result pages
• Loading state with plain text fallback (skeleton loader comes in UI Issue 12: Explain More Operation Types #16)
• Error state displayed inline when backend is unreachable

UI #8 — Next.js configuration and environment handling

• next.config.ts — standalone output enabled for Docker compatibility
• .env.local.example — all required variables documented with comments
• package.json — scripts updated: dev, build, start, lint

Architecture note

AppShell uses a stub context pattern — all shared state fields
(addEntry, isSaved, saveAddress etc.) are no-ops for now.
They will be replaced with real implementations as UI #21 (history),
UI #22 (address book), and UI #24 (personal mode) are completed.
The inner component pattern is used on result pages to avoid
hooks-in-callbacks errors:

function TxPageInner() {
  const { addEntry } = useAppShell();
  ...
}
export default function TxPage() {
  return <AppShell><TxPageInner /></AppShell>;
}

How to test

cp .env.local.example .env.local
# Set API_URL to your running backend
npm install
npm run dev

1. Visit http://localhost:3000/app
2. Enter a valid transaction hash → routes to /tx/[hash] and displays result
3. Enter a valid Stellar account address → routes to /account/[address] and displays result
4. Invalid input shows validation error before routing
5. Back button returns to /app

Closes

Closes #153
Closes #154
Closes #155
Closes #156

[drips-wave]

@NteinPrecious Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[Tinna23]

clear