SEC-359: Replace compare app with server-rendered RPC performance overview

.env.sample

@@ -1,5 +1,8 @@
-# requires full url
-NEXT_PUBLIC_BACKEND_APP_URL = 'http://0.0.0.0:8000/api/...'
+# client app public URL (used in og:image and og:url metadata)
+NEXT_PUBLIC_CLIENT_DOMAIN=
 
-# client app public URL
-NEXT_PUBLIC_CLIENT_DOMAIN = 
+# Grafana Cloud service account token, Viewer role on chainstack.grafana.net.
+# Server-side only — never exposed to the client bundle. Create at:
+# chainstack.grafana.net → Administration → Service accounts → Add token.
+# Set this in .env.local for local dev and in Vercel project env vars for deploys.
+GRAFANA_API_TOKEN=

next.config.js

@@ -1,32 +1,44 @@
 /** @type {import('next').NextConfig} */
+const GRAFANA_DASHBOARD_URL =
+  'https://chainstack.grafana.net/public-dashboards/65c0fcb02f994faf845d4ec095771bd0?orgId=1';
+
+// Allow the Vercel toolbar (comments/live feedback) on preview deployments only,
+// so production stays locked down. The toolbar loads from vercel.live and uses
+// Pusher websockets for live feedback.
+const isPreview = process.env.VERCEL_ENV === 'preview';
+
+const cspDirectives = [
+  "default-src 'self'",
+  `script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.segment.com https://www.googletagmanager.com https://www.google-analytics.com${isPreview ? ' https://vercel.live' : ''}`,
+  `style-src 'self' 'unsafe-inline' https://fonts.googleapis.com${isPreview ? ' https://vercel.live' : ''}`,
+  `font-src 'self' https://fonts.gstatic.com data:${isPreview ? ' https://vercel.live/fonts' : ''}`,
+  "img-src 'self' data: https:",
+  `frame-src https://chainstack.grafana.net${isPreview ? ' https://vercel.live' : ''}`,
+  `connect-src 'self' https://api.segment.io https://*.segment.io https://www.google-analytics.com${isPreview ? ' https://vercel.live wss://ws-us3.pusher.com https://*.pusher.com' : ''}`,
+  "frame-ancestors 'none'",
+  "base-uri 'self'",
+  "form-action 'self'",
+].join('; ');
+
 const nextConfig = {
   async headers() {
     return [
       {
-        source: '/api/:path*',
+        source: '/(.*)',
         headers: [
-          { key: 'Access-Control-Allow-Credentials', value: 'true' },
-          { key: 'Access-Control-Allow-Origin', value: '*' },
-          {
-            key: 'Access-Control-Allow-Methods',
-            value: 'GET,DELETE,PATCH,POST,PUT',
-          },
-          {
-            key: 'Access-Control-Allow-Headers',
-            value:
-              'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version',
-          },
+          { key: 'Content-Security-Policy', value: cspDirectives },
+          { key: 'X-Content-Type-Options', value: 'nosniff' },
+          { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
+          { key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' },
         ],
       },
     ];
   },
   async redirects() {
     return [
-      {
-        source: '/dashboard',
-        destination: 'https://chainstack.grafana.net/public-dashboards/65c0fcb02f994faf845d4ec095771bd0?orgId=1',
-        permanent: true
-      }
+      { source: '/compare-single', destination: '/', permanent: true },
+      { source: '/compare-double', destination: '/', permanent: true },
+      { source: '/dashboard', destination: GRAFANA_DASHBOARD_URL, permanent: true },
     ];
   },
   reactStrictMode: false,
@@ -39,4 +51,4 @@ const withMDX = require('@next/mdx')({
   },
 });
 
-module.exports = withMDX(nextConfig);
+module.exports = withMDX(nextConfig);

package.json

@@ -21,6 +21,7 @@
     "react-dom": "^18",
     "react-google-charts": "^4.0.1",
     "react-type-animation": "^3.2.0",
+    "server-only": "^0.0.1",
     "simpler-state": "^1.2.1"
   },
   "devDependencies": {