predictIQ/frontend/src/app/layout.tsx at 4ba5c9fb8fc4ff3683fa3f6a12ae20015636164c · petermuazu/predictIQ · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import type { ReactNode } from 'react';
import { headers } from 'next/headers';
import { Orbitron, Exo_2 } from 'next/font/google';
import { ErrorBoundary } from '../components/ErrorBoundary';
import { OfflineBanner } from '../components/OfflineBanner';
import { AxeAccessibility } from '../components/AxeAccessibility';
import { WalletProvider } from '../lib/wallet/WalletProvider';
import { darkModeInitScript } from '../lib/darkMode';
import '../styles/tokens.css';
import '../styles/accessibility.css';
import '../styles/landing.css';

// Self-hosted at build time so the strict CSP (font-src 'self') is satisfied
// without whitelisting the Google Fonts CDN.
const display = Orbitron({
  subsets: ['latin'],
  weight: ['500', '600', '700'],
  variable: '--font-display',
  display: 'swap',
});

const body = Exo_2({
  subsets: ['latin'],
  weight: ['300', '400', '500', '600', '700'],
  variable: '--font-body',
  display: 'swap',
});

export const metadata = {
  title: 'PredictIQ — Decentralized Prediction Markets on Stellar',
  description:
    'Create, bet on, and resolve prediction markets with transparency, security, and fairness powered by the Stellar blockchain.',
};

export default async function RootLayout({ children }: { children: ReactNode }) {
  const nonce = (await headers()).get('x-nonce') ?? '';

  return (
    <html
      lang="en"
      className={`${display.variable} ${body.variable}`}
      suppressHydrationWarning
    >
      <head>
        <script nonce={nonce} dangerouslySetInnerHTML={{ __html: darkModeInitScript }} />
      </head>
      <body>
        {/* Dev-only @axe-core/react checker; tree-shaken out of prod bundles. */}
        <AxeAccessibility />
        <OfflineBanner />
        <ErrorBoundary section="main">
          <WalletProvider>{children}</WalletProvider>
        </ErrorBoundary>
      </body>
    </html>
  );
}