Run interpreter in nodejs env in the playground (#255)

Author: anastasiarods

apps/web/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@3loop/transaction-decoder": "workspace:*",
     "@3loop/transaction-interpreter": "workspace:*",
-    "@jitl/quickjs-singlefile-browser-release-sync": "^0.31.0",
+    "@jitl/quickjs-singlefile-cjs-release-sync": "^0.31.0",
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-collapsible": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.4",

apps/web/src/app/api/interpret/route.ts

@@ -0,0 +1,42 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { applyInterpreterServer } from '@/lib/interpreter-server'
+import type { DecodedTransaction } from '@3loop/transaction-decoder'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+interface InterpretRequest {
+  decodedTx: DecodedTransaction
+  interpreter: {
+    id: string
+    schema: string
+  }
+  interpretAsUserAddress?: string
+}
+
+export const POST = async (request: NextRequest) => {
+  try {
+    const body: InterpretRequest = await request.json()
+
+    const { decodedTx, interpreter, interpretAsUserAddress } = body
+
+    if (!decodedTx || !interpreter) {
+      return NextResponse.json(
+        { error: 'Missing required fields: decodedTx and interpreter are required' },
+        { status: 400 },
+      )
+    }
+
+    const result = await applyInterpreterServer(decodedTx, interpreter, interpretAsUserAddress)
+
+    return NextResponse.json(result)
+  } catch (error) {
+    console.error('Interpreter API error:', error)
+    return NextResponse.json(
+      {
+        error: error instanceof Error ? error.message : 'Failed to interpret transaction',
+      },
+      { status: 500 },
+    )
+  }
+}

apps/web/src/app/contract/[contract]/loading.tsx

@@ -8,7 +8,7 @@ import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 import { useRouter } from 'next/navigation'
 import { DecodedTransaction } from '@3loop/transaction-decoder'
-import { Interpretation, applyInterpreter } from '@/lib/interpreter'
+import type { Interpretation } from '@/lib/interpreter-server'
 import CodeBlock from '@/components/ui/code-block'
 import { NetworkSelect } from '@/components/ui/network-select'
 import { fallbackInterpreter, getInterpreter } from '@3loop/transaction-interpreter'
@@ -65,10 +65,29 @@ export default function DecodingForm({ decoded, currentHash, chainID, error }: F
       setIsInterpreting(true)
       setResult(undefined)
 
-      applyInterpreter(decoded, newInterpreter, userAddress || undefined)
+      // Call server-side API to run interpreter (avoids CORS issues)
+      fetch('/api/interpret', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          decodedTx: decoded,
+          interpreter: newInterpreter,
+          interpretAsUserAddress: userAddress || undefined,
+        }),
+      })
+        .then((response) => response.json())
         .then((res) => {
           setResult(res)
         })
+        .catch((error) => {
+          setResult({
+            tx: decoded,
+            interpretation: null,
+            error: error.message || 'Failed to interpret transaction',
+          })
+        })
         .finally(() => {
           setIsInterpreting(false)
         })

apps/web/src/app/contract/[contract]/page.tsx

@@ -4,7 +4,6 @@ import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import { MainNav } from '@/components/ui/main-nav'
 import { Analytics } from '@vercel/analytics/react'
-import { aaveV2 } from '../app/data'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -33,11 +32,6 @@ const navLinks = [
     match: 'interpret',
     title: 'Transaction Interpreter',
   },
-  {
-    href: `/contract/${aaveV2}`,
-    match: 'contract',
-    title: 'Test contract',
-  },
 ]
 
 const SOCIAL_LINKS = [

apps/web/src/app/contract/[contract]/table.tsx

@@ -4,16 +4,16 @@ import {
   QuickjsInterpreterLive,
   QuickjsConfig,
   TransactionInterpreter,
-  fallbackInterpreter,
-  getInterpreter,
 } from '@3loop/transaction-interpreter'
 import { Effect, Layer } from 'effect'
-import variant from '@jitl/quickjs-singlefile-browser-release-sync'
+import variant from '@jitl/quickjs-singlefile-cjs-release-sync'
 
+// Server-side interpreter configuration using Node.js QuickJS variant
+// This runs in Node.js context where CORS restrictions don't apply
 const config = Layer.succeed(QuickjsConfig, {
   variant: variant,
   runtimeConfig: {
-    timeout: 1000,
+    timeout: 5000,
     useFetch: true,
   },
 })
@@ -26,11 +26,11 @@ export interface Interpretation {
   error?: string
 }
 
-export async function applyInterpreter(
+export const applyInterpreterServer = async (
   decodedTx: DecodedTransaction,
   interpreter: Interpreter,
   interpretAsUserAddress?: string,
-): Promise<Interpretation> {
+): Promise<Interpretation> => {
   const runnable = Effect.gen(function* () {
     const interpreterService = yield* TransactionInterpreter
     const interpretation = yield* interpreterService.interpretTransaction(decodedTx, interpreter, {
@@ -54,18 +54,3 @@ export async function applyInterpreter(
       }
     })
 }
-
-export async function findAndRunInterpreter(decodedTx: DecodedTransaction): Promise<Interpretation> {
-  let interpreter = getInterpreter(decodedTx)
-
-  if (!interpreter) {
-    interpreter = fallbackInterpreter
-  }
-
-  const res = await applyInterpreter(decodedTx, {
-    id: 'default',
-    schema: interpreter,
-  })
-
-  return res
-}

apps/web/src/app/interpret/[chainID]/[hash]/form.tsx

@@ -40,7 +40,7 @@ const runnable = Effect.gen(function* () {
   // NOTE: Search the interpreter in the default interpreters
   const interpreter = interpreterService.findInterpreter(decodedTx)
 
-  const interpretation = yield* interpreterService.interpretTx(decodedTx, interpreter)
+  const interpretation = yield* interpreterService.interpretTransaction(decodedTx, interpreter)
 
   return interpretation
 }).pipe(Effect.provide(layer))