feat(platform-config): add global PlatformConfigContext and expose feePercent

packages/frontend/package.json

@@ -28,7 +28,8 @@
     "react-hook-form": "^7.71.1",
     "react-markdown": "^10.1.0",
     "tailwind-merge": "^2.2.0",
-    "zod": "^4.3.5"
+    "zod": "^4.3.5",
+    "swr": "^2.2.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.58.0",

packages/frontend/src/app/api/config/route.ts

@@ -0,0 +1,10 @@
+import { NextResponse } from 'next/server'
+
+export async function GET() {
+  // Return a mock config. In production this should proxy the real backend.
+  const config = {
+    feePercent: 1.5,
+  }
+
+  return NextResponse.json(config)
+}

packages/frontend/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import "./globals.css";
 import { Inter } from "next/font/google";
 import { WalletProvider } from "@/components/WalletContext";
+import { PlatformConfigProvider } from "@/contexts/PlatformConfigContext";
 import { NavBar } from "@/components/NavBar";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -24,8 +25,10 @@ export default function RootLayout({
           the live wallet address and passes it to NotificationBell.
         */}
         <WalletProvider>
-          <NavBar />
-          <main>{children}</main>
+          <PlatformConfigProvider>
+            <NavBar />
+            <main>{children}</main>
+          </PlatformConfigProvider>
         </WalletProvider>
       </body>
     </html>

packages/frontend/src/components/NavBar.tsx

@@ -5,9 +5,11 @@ import { useWalletContext } from "./WalletContext";
 import { ConnectButton } from "./ConnectButton";
 import { NotificationBell } from "./NotificationBell";
 import { TrendingUp } from "lucide-react";
+import { usePlatformConfig } from "@/contexts/PlatformConfigContext";
 
 export function NavBar() {
     const { publicKey } = useWalletContext();
+    const { config } = usePlatformConfig();
 
     return (
         <nav
@@ -32,6 +34,9 @@ export function NavBar() {
             </div>
 
             <div className="flex items-center gap-4">
+                {config && (
+                    <div className="text-sm text-gray-300 mr-4">Fee: {config.feePercent}%</div>
+                )}
                 {publicKey && <NotificationBell userId={publicKey} />}
                 <ConnectButton />
             </div>

packages/frontend/src/contexts/PlatformConfigContext.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
+import useSWR from "swr";
+import { Config } from "@/types/config";
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+interface PlatformConfigContextValue {
+  config?: Config;
+  isLoading: boolean;
+  error?: any;
+}
+
+const PlatformConfigContext = createContext<PlatformConfigContextValue>({
+  config: undefined,
+  isLoading: true,
+  error: undefined,
+});
+
+export const PlatformConfigProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const { data, error, isLoading } = useSWR<Config>("/api/config", fetcher, {
+    revalidateOnFocus: false,
+  });
+
+  return (
+    <PlatformConfigContext.Provider value={{ config: data, isLoading, error }}>
+      {children}
+    </PlatformConfigContext.Provider>
+  );
+};
+
+export const usePlatformConfig = () => useContext(PlatformConfigContext);
+
+export default PlatformConfigContext;

packages/frontend/src/types/config.ts

@@ -0,0 +1,4 @@
+export interface Config {
+  feePercent: number; // expressed as a percentage (e.g., 1.5)
+  [key: string]: any;
+}