Skip to content

feat(ui): Foundation layer — metadata, types, API client, UI primitives [UI #1–4]#177

Merged
Tinna23 merged 4 commits intoStellarCommons:mainfrom
demilade18-git:feat/ui-foundation-1-4
Mar 24, 2026
Merged

feat(ui): Foundation layer — metadata, types, API client, UI primitives [UI #1–4]#177
Tinna23 merged 4 commits intoStellarCommons:mainfrom
demilade18-git:feat/ui-foundation-1-4

Conversation

@demilade18-git
Copy link
Contributor

Summary

Implements the complete foundation layer for the Stellar Explain frontend.
All four issues are addressed in this PR as they form a single cohesive dependency chain —
each piece builds directly on the previous one.

Changes

UI #1 — App metadata, layout, and global styles

  • Updated layout.tsx with correct title and description
  • Added IBM Plex Mono and IBM Plex Sans via next/font/google
  • Cleaned up globals.css with base CSS variable structure
  • Added suppressHydrationWarning to <body>

UI #2 — Shared TypeScript types

  • Created src/types/index.ts as the single source of truth
  • Exports: TransactionExplanation, AccountExplanation, PaymentExplanation,
    HealthResponse, ApiError, Tab, PillVariant
  • Types exactly mirror the Rust backend response shapes

UI #3 — API client module

  • Created src/lib/api.ts with typed fetch functions for all endpoints
  • Created src/lib/errors.ts with isApiError, getErrorMessage, getFriendlyErrorMessage
  • Created proxy routes: /api/tx/[hash], /api/account/[address], /api/health
  • Backend URL never reaches the browser — all requests proxied server-side
  • Added 8s AbortController timeout to all proxy routes
  • Added .env.local.example documenting all required variables

UI #4 — Shared UI primitives

  • Card.tsx — base card wrapper with dark glass styling
  • Pill.tsx — status pill with success, fail, default, warning variants
  • Label.tsx — small uppercase metadata label
  • AddressChip.tsx — truncated address (first 6…last 6) with copy-to-clipboard
  • TabSwitcher.tsx — Transaction / Account tab toggle

How to test

# Install dependencies
npm install

# Copy env vars
cp .env.local.example .env.local
# Set API_URL to your running backend

# Start dev server
npm run dev

# Type check
npm run lint

Closes

Closes #149
Closes #150
Closes #151
Closes #152

…I primitives

- UI StellarCommons#1: Update app metadata, layout, and global styles
- UI StellarCommons#2: Create shared TypeScript types mirroring Rust backend shapes
- UI StellarCommons#3: Create API client module with typed fetch functions and proxy routes
- UI StellarCommons#4: Build shared UI primitives — Card, Pill, Label, AddressChip, TabSwitcher
@drips-wave
Copy link

drips-wave bot commented Mar 24, 2026

@demilade18-git 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
Copy link
Contributor

Tinna23 commented Mar 24, 2026

Hey @demilade18-git, clean job so far, but a little fix,
The Rust Core Checks CI is failing on the Check formatting step. This is unrelated to your frontend changes — it's a formatting issue in existing Rust backend files.

To fix it, run this on your branch:

cd packages/core
cargo fmt
git add -A
git commit -m "style: fix rustfmt formatting"
git push

cargo fmt auto-formats all Rust files to what cargo fmt --check expects. The failing files were src/services/transaction_cache.rs and src/tests/integration.rs. Once pushed the CI should go green.

@Tinna23 Tinna23 merged commit 2fce5e8 into StellarCommons:main Mar 24, 2026
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants