[#86, #89] Frontend: Build design token system for colors, spacing, and typography + Improve accessibility baseline (WCAG 2.1 AA)

frontend/src/App.tsx

@@ -1,12 +1,17 @@
-import { useEffect, useState, lazy, Suspense } from "react";
+import { lazy, Suspense, useEffect, useState } from "react";
 import {
   BrowserRouter as Router,
-  Routes,
-  Route,
   Navigate,
+  Route,
+  Routes,
 } from "react-router-dom";
+import * as Sentry from "@sentry/react";
+import Navbar from "./components/Navbar";
+import ErrorFallback from "./components/ErrorFallback";
 import { ThemeProvider } from "./context/ThemeContext";
 import { VaultProvider } from "./context/VaultContext";
+import { fetchUsdcBalance } from "./lib/stellarAccount";
+import "./index.css";
 import { KeyboardShortcutProvider } from "./context/KeyboardShortcutContext";
 import Navbar from "./components/Navbar";
 import ShortcutHelpModal from "./components/ShortcutHelpModal";
@@ -23,6 +28,11 @@ const Portfolio = lazy(() => import("./pages/Portfolio"));
 const Analytics = lazy(() => import("./pages/Analytics"));
 const UIPreview = lazy(() => import("./pages/UIPreview"));
 
+const LoadingPage = () => (
+  <div className="loading-page" role="status" aria-live="polite">
+    <div style={{ textAlign: "center" }}>
+      <div className="text-gradient loading-title">Loading...</div>
+      <div style={{ opacity: 0.7 }}>Securing RWA connection</div>
 const LoadingPage = () => {
   const { t } = useTranslation();
   return (
@@ -59,7 +69,7 @@ function AppContent() {
   const [walletAddress, setWalletAddress] = useState<string | null>(null);
   const [usdcBalance, setUsdcBalance] = useState(0);
 
-  const handleConnect = async (address: string) => {
+  const handleConnect = (address: string) => {
     setWalletAddress(address);
   };
 
@@ -76,17 +86,64 @@ function AppContent() {
       }
 
       try {
-        const discoveredBalance = await fetchUsdcBalance(walletAddress);
-        setUsdcBalance(discoveredBalance);
+        setUsdcBalance(await fetchUsdcBalance(walletAddress));
       } catch {
         setUsdcBalance(0);
       }
     };
 
-    loadBalance();
+    void loadBalance();
   }, [walletAddress]);
 
   return (
+    <Sentry.ErrorBoundary
+      fallback={({ error, resetError }) => (
+        <ErrorFallback error={error as Error} resetError={resetError} />
+      )}
+      showDialog
+    >
+      <ThemeProvider>
+        <ToastProvider>
+          <VaultProvider>
+            <Router>
+              <a className="skip-link" href="#main-content">
+                Skip to main content
+              </a>
+              <div className="app-container">
+                <Navbar
+                  walletAddress={walletAddress}
+                  onConnect={handleConnect}
+                  onDisconnect={handleDisconnect}
+                />
+                <main id="main-content" className="container app-main">
+                  <Suspense fallback={<LoadingPage />}>
+                    <SentryRoutes>
+                      <Route
+                        path="/"
+                        element={
+                          <Home
+                            walletAddress={walletAddress}
+                            usdcBalance={usdcBalance}
+                          />
+                        }
+                      />
+                      <Route
+                        path="/portfolio"
+                        element={<Portfolio walletAddress={walletAddress} />}
+                      />
+                      <Route path="/analytics" element={<Analytics />} />
+                      <Route
+                        path="/transactions"
+                        element={<TransactionHistory walletAddress={walletAddress} />}
+                      />
+                      <Route path="*" element={<Navigate to="/" replace />} />
+                    </SentryRoutes>
+                  </Suspense>
+                </main>
+              </div>
+            </Router>
+          </VaultProvider>
+        </ToastProvider>
     <KeyboardShortcutProvider>
       <div className="app-container">
         <Navbar

frontend/src/components/Navbar.tsx

@@ -20,6 +20,7 @@ const Navbar: React.FC<NavbarProps> = ({
   const { t } = useTranslation();
   return (
     <nav
+      aria-label="Primary"
       style={{
         position: "fixed",
         top: 0,

frontend/src/components/Pagination.tsx

@@ -53,6 +53,10 @@ export const Pagination: React.FC<PaginationProps> = ({
       </div>
 
       <div className="pagination-controls-wrapper">
+        <div className="pagination-size-label" aria-live="polite">
+          Page {page} of {totalPages}
+        </div>
+
         {onPageSizeChange && (
           <div className="pagination-size-selector">
             <label htmlFor="pageSizeSelect" className="sr-only">
@@ -83,7 +87,7 @@ export const Pagination: React.FC<PaginationProps> = ({
             className="btn btn-outline pagination-btn-nav"
             onClick={() => onPageChange?.(page - 1)}
             disabled={page <= 1}
-            aria-label="Go to previous page"
+            aria-label="Previous"
           >
             <ChevronLeft size={16} />
           </button>
@@ -124,7 +128,7 @@ export const Pagination: React.FC<PaginationProps> = ({
             className="btn btn-outline pagination-btn-nav"
             onClick={() => onPageChange?.(page + 1)}
             disabled={page >= totalPages}
-            aria-label="Go to next page"
+            aria-label="Next"
           >
             <ChevronRight size={16} />
           </button>

frontend/src/components/Tabs.tsx

@@ -1,6 +1,5 @@
 import React, { createContext, useContext, useState, useEffect } from "react";
 import type { KeyboardEvent, ReactNode } from "react";
-import { useSearchParams } from "react-router-dom";
 import "./Tabs.css";
 
 interface TabsContextType {
@@ -36,6 +35,15 @@ function TabsWithUrl({
   urlParam = "tab",
   children,
   className = "",
+}: TabsProps) {
+  const [internalValue, setInternalValue] = useState(defaultValue || "");
+
+  const [urlValue, setUrlValue] = useState<string | null>(() => {
+    if (!syncWithUrl || typeof window === "undefined") {
+      return null;
+    }
+    return new URLSearchParams(window.location.search).get(urlParam);
+  });
 }: Omit<TabsProps, "syncWithUrl">) {
   const [searchParams, setSearchParams] = useSearchParams();
   const [internalValue, setInternalValue] = useState(defaultValue || "");
@@ -49,6 +57,31 @@ function TabsWithUrl({
       : internalValue;
 
   useEffect(() => {
+    if (!syncWithUrl || typeof window === "undefined") {
+      return;
+    }
+
+    const handlePopState = () => {
+      setUrlValue(new URLSearchParams(window.location.search).get(urlParam));
+    };
+
+    window.addEventListener("popstate", handlePopState);
+    return () => {
+      window.removeEventListener("popstate", handlePopState);
+    };
+  }, [syncWithUrl, urlParam]);
+
+  useEffect(() => {
+    if (!syncWithUrl || typeof window === "undefined") {
+      return;
+    }
+    if (!urlValue && defaultValue) {
+      const params = new URLSearchParams(window.location.search);
+      params.set(urlParam, defaultValue);
+      window.history.replaceState({}, "", `${window.location.pathname}?${params.toString()}`);
+      setUrlValue(defaultValue);
+    }
+  }, [syncWithUrl, urlValue, defaultValue, urlParam]);
     if (!urlValue && defaultValue) {
       setSearchParams(
         (prev) => {
@@ -66,6 +99,11 @@ function TabsWithUrl({
       setInternalValue(newValue);
     }
 
+    if (syncWithUrl) {
+      const params = new URLSearchParams(window.location.search);
+      params.set(urlParam, newValue);
+      window.history.replaceState({}, "", `${window.location.pathname}?${params.toString()}`);
+      setUrlValue(newValue);
     setSearchParams(
       (prev) => {
         const newParams = new URLSearchParams(prev);