StellarFlow-Network · Sadeequ · Jul 30, 2026 · Jul 28, 2026 · Jul 30, 2026
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -12,17 +12,12 @@ import Script from "next/script";
 import SvgSprite from "@/components/icons/SvgSprite";
 import { headers } from "next/headers";
 
-// subsets: ["latin"] restricts glyph maps to Latin characters only,
-// avoiding loading Cyrillic/Greek/CJK blocks and reducing CSS payload.
 const geistSans = Geist({
   variable: "--font-geist-sans",
   subsets: ["latin"],
-  display: "optional",
+  display: "swap",
 });
 
-// Single variable font asset covers all app text weights; monospace utilities
-// are mapped to this same face in globals.css to avoid a second font payload.
-
 export const metadata: Metadata = {
   title: "StellarFlow Network Dashboard",
   description:
@@ -56,15 +51,21 @@ export default async function RootLayout({
           rel="preconnect"
           href="https://polyfill-library.fastly.dev"
         />
-        {/* Preload the critical above-the-fold logo asset */}
+        <link
+          rel="preconnect"
+          href="https://raw.githubusercontent.com"
+        />
+        <link
+          rel="preconnect"
+          href="https://assets.coingecko.com"
+        />
         <link
           rel="preload"
           href="/sf.webp"
           as="image"
           type="image/webp"
           fetchPriority="high"
         />
-        {/* Preload the SVG symbol sheet so icons render on first paint */}
         <link
           rel="preload"
           href="/sprite.svg"
@@ -99,9 +100,8 @@ export default async function RootLayout({
         />
       </head>
       <body
-        className={`${geistSans.variable} antialiased`}
+        className={`${geistSans.variable} antialiased font-sans flex flex-col min-h-screen`}
       >
-        {/* Single global SVG symbol sheet — all icon <use> refs resolve here */}
         <SvgSprite />
         <ThemeProvider
           attribute="class"

diff --git a/src/components/ui/AlertBanner.test.tsx b/src/components/ui/AlertBanner.test.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { AlertBanner, DEFAULT_ALERT } from './AlertBanner';
+
+describe('AlertBanner', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('renders top-anchored maintenance banner with alert details', () => {
+    render(<AlertBanner alert={DEFAULT_ALERT} />);
+    expect(screen.getByText(/RPC Maintenance Scheduled/i)).toBeInTheDocument();
+    expect(screen.getByText(/Stellar Horizon RPC nodes/i)).toBeInTheDocument();
+  });
+
+  it('dismisses banner and persists dismissed alert ID in localStorage', () => {
+    render(<AlertBanner alert={DEFAULT_ALERT} />);
+    const dismissBtn = screen.getByRole('button', { name: /dismiss alert banner/i });
+    fireEvent.click(dismissBtn);
+
+    expect(screen.queryByText(/RPC Maintenance Scheduled/i)).not.toBeInTheDocument();
+
+    const stored = JSON.parse(localStorage.getItem('stellarflow_dismissed_alerts') || '[]');
+    expect(stored).toContain(DEFAULT_ALERT.id);
+  });
+});
diff --git a/src/components/ui/AlertBanner.tsx b/src/components/ui/AlertBanner.tsx
@@ -0,0 +1,104 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export interface SystemHealthAlert {
+  id: string;
+  type: 'warning' | 'info' | 'critical';
+  title: string;
+  message: string;
+  isMaintenanceScheduled?: boolean;
+  scheduledTime?: string;
+}
+
+const DISMISSED_ALERTS_KEY = 'stellarflow_dismissed_alerts';
+
+export const DEFAULT_ALERT: SystemHealthAlert = {
+  id: 'rpc_maint_2026_07',
+  type: 'warning',
+  title: 'RPC Maintenance Scheduled',
+  message: 'Stellar Horizon RPC nodes will undergo scheduled maintenance. Swap transactions may experience slight delays.',
+  isMaintenanceScheduled: true,
+  scheduledTime: 'Jul 30, 2026 02:00 UTC',
+};
+
+type AlertBannerProps = {
+  alert?: SystemHealthAlert;
+};
+
+export function AlertBanner({ alert = DEFAULT_ALERT }: AlertBannerProps) {
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+
+  useEffect(() => {
+    try {
+      const dismissed: string[] = JSON.parse(
+        localStorage.getItem(DISMISSED_ALERTS_KEY) || '[]'
+      );
+      if (alert && !dismissed.includes(alert.id)) {
+        setIsVisible(true);
+      }
+    } catch {
+      setIsVisible(true);
+    }
+  }, [alert]);
+
+  function handleDismiss() {
+    setIsVisible(false);
+    try {
+      const dismissed: string[] = JSON.parse(
+        localStorage.getItem(DISMISSED_ALERTS_KEY) || '[]'
+      );
+      if (!dismissed.includes(alert.id)) {
+        dismissed.push(alert.id);
+        localStorage.setItem(DISMISSED_ALERTS_KEY, JSON.stringify(dismissed));
+      }
+    } catch {
+      // localStorage write error ignored
+    }
+  }
+
+  if (!isVisible || !alert) return null;
+
+  const bgStyle =
+    alert.type === 'critical'
+      ? 'bg-rose-600 text-white'
+      : alert.type === 'warning'
+      ? 'bg-amber-500 text-slate-950'
+      : 'bg-indigo-600 text-white';
+
+  return (
+    <aside
+      role="region"
+      aria-label="System Health Announcement"
+      className={`relative w-full px-4 py-2.5 shadow-md ${bgStyle} transition-all duration-300`}
+    >
+      <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 text-xs font-medium sm:text-sm">
+        <div className="flex items-center gap-2">
+          <span className="text-base" role="img" aria-label="alert icon">
+            {alert.type === 'critical' ? '🚨' : alert.type === 'warning' ? '🔔' : 'ℹ️'}
+          </span>
+          <div>
+            <strong className="font-semibold">{alert.title}: </strong>
+            <span>{alert.message}</span>
+            {alert.scheduledTime && (
+              <span className="ml-1 text-[11px] opacity-90 font-mono">
+                [{alert.scheduledTime}]
+              </span>
+            )}
+          </div>
+        </div>
+
+        <button
+          type="button"
+          onClick={handleDismiss}
+          aria-label="Dismiss alert banner"
+          className="shrink-0 rounded p-1 hover:bg-black/10 transition-colors focus:outline-none focus:ring-2 focus:ring-current"
+        >
+          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+    </aside>
+  );
+}