fix: add RPC proxy to avoid CORS issues in web terminal

Author: ALaustrup

apps/hub/src/app/api/rpc/route.ts

@@ -0,0 +1,63 @@
+/**
+ * RPC Proxy Route
+ * 
+ * Proxies RPC requests to the Demiurge blockchain node.
+ * This avoids CORS issues when making requests from the browser.
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+
+const RPC_ENDPOINT = process.env.DEMIURGE_RPC_URL || 'https://rpc.demiurge.cloud';
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    
+    // Validate it's a JSON-RPC request
+    if (!body.jsonrpc || !body.method) {
+      return NextResponse.json(
+        { error: { code: -32600, message: 'Invalid Request' } },
+        { status: 400 }
+      );
+    }
+    
+    // Forward to the RPC endpoint
+    const response = await fetch(RPC_ENDPOINT, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body),
+    });
+    
+    const data = await response.json();
+    
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('[RPC Proxy] Error:', error);
+    
+    return NextResponse.json(
+      {
+        jsonrpc: '2.0',
+        id: null,
+        error: {
+          code: -32603,
+          message: 'Internal error',
+          data: error instanceof Error ? error.message : 'Unknown error',
+        },
+      },
+      { status: 500 }
+    );
+  }
+}
+
+export async function OPTIONS() {
+  return new NextResponse(null, {
+    status: 200,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'POST, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type',
+    },
+  });
+}

apps/hub/src/components/terminal/WebTerminal.tsx

@@ -32,7 +32,9 @@ interface CommandResult {
 // Constants
 // ============================================================================
 
-const RPC_URL = process.env.NEXT_PUBLIC_RPC_URL || 'https://rpc.demiurge.cloud';
+// Use local proxy to avoid CORS issues
+const RPC_URL = '/api/rpc';
+const RPC_DISPLAY_URL = process.env.NEXT_PUBLIC_RPC_URL || 'https://rpc.demiurge.cloud';
 
 const HELP_TEXT = `
 ╔══════════════════════════════════════════════════════════════════════════╗
@@ -83,7 +85,7 @@ const WELCOME_MESSAGE = `
 ║              On-Chain CLI Terminal v1.0.0 - Web Interface                ║
 ║                                                                          ║
 ║   Type 'help' for available commands                                     ║
-║   Connected to: ${RPC_URL.padEnd(52)}║
+║   Connected to: ${RPC_DISPLAY_URL.padEnd(52)}║
 ╚══════════════════════════════════════════════════════════════════════════╝
 `;
 
@@ -94,9 +96,11 @@ const WELCOME_MESSAGE = `
 class CommandExecutor {
   private client: DemiurgeClient;
   private rpcUrl: string;
+  private displayUrl: string;
 
-  constructor(rpcUrl: string = RPC_URL) {
+  constructor(rpcUrl: string = RPC_URL, displayUrl: string = RPC_DISPLAY_URL) {
     this.rpcUrl = rpcUrl;
+    this.displayUrl = displayUrl;
     this.client = new DemiurgeClient({ endpoint: rpcUrl });
   }
 
@@ -158,7 +162,7 @@ class CommandExecutor {
             type: 'output',
             content: JSON.stringify({
               blockHeight: blockNumber,
-              rpcEndpoint: this.rpcUrl,
+              rpcEndpoint: this.displayUrl,
               network: 'Demiurge Mainnet',
               status: 'Online',
             }, null, 2),
@@ -172,7 +176,7 @@ class CommandExecutor {
 │ Metric                         │ Value                                      │
 ├────────────────────────────────┼────────────────────────────────────────────┤
 │ Block Height                   │ ${String(blockNumber).padEnd(42)}│
-│ RPC Endpoint                   │ ${this.rpcUrl.padEnd(42)}│
+│ RPC Endpoint                   │ ${this.displayUrl.padEnd(42)}│
 │ Network                        │ Demiurge Mainnet                           │
 │ Status                         │ ● Online                                   │
 └────────────────────────────────┴────────────────────────────────────────────┘
@@ -685,7 +689,7 @@ export function WebTerminal({ isOpen, onClose }: WebTerminalProps) {
                 </span>
               </div>
               <div className="flex items-center gap-4 text-xs text-text-tertiary font-mono">
-                <span>RPC: {RPC_URL}</span>
+                <span>RPC: {RPC_DISPLAY_URL}</span>
                 <span className="text-green-400">● Connected</span>
               </div>
             </div>