Merge branch 'main' into pvm-select

.eslintrc.cjs

@@ -7,5 +7,6 @@ module.exports = {
   plugins: ["react-refresh"],
   rules: {
     "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+    "no-console": ["warn", { allow: ["warn", "error"] }],
   },
 };

package.json

@@ -44,6 +44,7 @@
     "react-json-view-compare": "^2.0.2",
     "react-katex": "^3.0.1",
     "react-redux": "^9.1.2",
+    "react-toastify": "^10.0.6",
     "scale-codec": "^0.13.0",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",

src/App.tsx

@@ -1,4 +1,7 @@
 import "./App.css";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
 import { Button } from "@/components/ui/button";
 import { useCallback, useEffect, useRef } from "react";
 import { Instructions } from "./components/Instructions";
@@ -51,6 +54,7 @@ import {
   setPvmInitialized,
 } from "@/store/debugger/debuggerSlice.ts";
 import { MemoryPreview } from "@/components/MemoryPreview";
+import { logger } from "./utils/loggerService";
 
 function App() {
   const {
@@ -131,12 +135,12 @@ function App() {
 
       try {
         const result = disassemblify(new Uint8Array(newProgram));
-        console.info("Disassembly result:", result);
+        logger.info("Disassembly result:", result);
         dispatch(setProgramPreviewResult(result));
         dispatch(setAllWorkersCurrentInstruction(result?.[0]));
         dispatch(setPvmInitialized(true));
       } catch (e) {
-        console.log("Error disassembling program", e);
+        console.error("Error disassembling program", e);
       }
     },
     [dispatch],
@@ -206,7 +210,7 @@ function App() {
   };
 
   const handlePvmTypeChange = async (selectedPvms: SelectedPvmWithPayload[]) => {
-    console.log("selectedPvms vs workers ", selectedPvms, workers);
+    logger.debug("selectedPvms vs workers ", selectedPvms, workers);
 
     await Promise.all(
       workers.map((worker: WorkerState) => {
@@ -216,13 +220,13 @@ function App() {
 
     await Promise.all(
       selectedPvms.map(async ({ id, type, params }) => {
-        console.log("Selected PVM type", id, type, params);
+        logger.info("Selected PVM type", id, type, params);
 
         if (workers.find((worker: WorkerState) => worker.id === id)) {
-          console.log("Worker already initialized");
+          logger.info("Worker already initialized");
           // TODO: for now just initialize the worker one more time
         }
-        console.log("Worker not initialized");
+        logger.info("Worker not initialized");
 
         if (id === AvailablePvms.POLKAVM) {
           await dispatch(createWorker(AvailablePvms.POLKAVM)).unwrap();
@@ -246,7 +250,6 @@ function App() {
             }),
           ).unwrap();
         } else if (type === AvailablePvms.WASM_FILE) {
-          console.log("go wasm file!", id, type, params);
           await dispatch(createWorker(id)).unwrap();
           await dispatch(
             loadWorker({
@@ -419,6 +422,7 @@ function App() {
           </div>
         </div>
       </div>
+      <ToastContainer />
     </>
   );
 }

src/components/KnowledgeBase/index.tsx

@@ -48,7 +48,7 @@ export const KnowledgeBase = ({ currentInstruction }: { currentInstruction: Curr
             <div key={i}>
               <p className="font-mono font-bold uppercase my-3">{instruction?.name}</p>
               <div className="text-left">
-                <BlockMath math={currentInstructionFromKnowledgeBase?.latex as string} />
+                <BlockMath math={currentInstructionFromKnowledgeBase?.latex || ""} />
               </div>
               <p className="my-3">{currentInstructionFromKnowledgeBase?.description}</p>
             </div>

src/components/ProgramLoader/Assembly.tsx

@@ -144,7 +144,7 @@ export const Assembly = ({
             return;
           }
         }
-        console.log(e);
+        console.error(e);
         onProgramLoad(undefined);
         setError(`${e}`);
       }

src/components/ProgramTextLoader/index.tsx

@@ -27,7 +27,7 @@ export const ProgramTextLoader = ({
         setProgram(Array.prototype.slice.call(parsedBlob.buffer));
       } catch (e) {
         console.warn(e);
-        console.log("wrong binary file");
+        console.error("wrong binary file");
         setIsInvalidProgram(true);
       }
     } else {
@@ -36,7 +36,8 @@ export const ProgramTextLoader = ({
         setProgram(JSON.parse(newInput));
         setIsInvalidProgram(false);
       } catch (e) {
-        console.log("wrong json");
+        // TODO only validate on submit
+        console.error("wrong json");
         setIsInvalidProgram(true);
         setProgram();
       }

src/components/PvmSelect/index.tsx

@@ -45,7 +45,7 @@ const fetchWasmMetadata = async (url: string): Promise<WasmMetadata | undefined>
       alert("Invalid URL");
     }
   } catch (error) {
-    console.log(error);
+    console.error(error);
     alert("Invalid URL");
   }
   return;

src/context/NumeralSystemProvider.tsx

@@ -3,9 +3,8 @@ import { NumeralSystem } from "./NumeralSystem";
 
 export const NumeralSystemContext = createContext({
   numeralSystem: NumeralSystem.DECIMAL,
-  setNumeralSystem: (numeralSystem: NumeralSystem) => {
-    console.log(numeralSystem);
-  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  setNumeralSystem: (_: NumeralSystem) => {},
 });
 
 export const NumeralSystemProvider = ({ children }: { children: ReactNode }) => {

src/globals.css

@@ -29,6 +29,8 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
+
+    --toastify-toast-width: 350px;
   }
 
   .dark {

src/packages/web-worker/command-handlers/index.ts

@@ -0,0 +1,9 @@
+import { runInit } from "./init";
+import { runLoad } from "./load";
+import { runStep } from "./step";
+
+export default {
+  runInit,
+  runLoad,
+  runStep,
+};

src/packages/web-worker/command-handlers/init.ts

@@ -0,0 +1,59 @@
+import { InitialState } from "@/types/pvm";
+import { initPvm } from "../pvm";
+import { getState, isInternalPvm, regsAsUint8 } from "../utils";
+import { CommandStatus, PvmApiInterface } from "../worker";
+import { Pvm as InternalPvmInstance } from "@typeberry/pvm-debugger-adapter";
+import { logger } from "@/utils/loggerService";
+
+export type InitParams = {
+  pvm: PvmApiInterface | null;
+  program: Uint8Array;
+  initialState: InitialState;
+};
+export type InitResponse = {
+  initialState: InitialState;
+  status: CommandStatus;
+  error?: unknown;
+};
+
+const init = async ({ pvm, program, initialState }: InitParams) => {
+  if (!pvm) {
+    throw new Error("PVM is uninitialized.");
+  }
+  if (isInternalPvm(pvm)) {
+    logger.info("PVM init internal", pvm);
+    // TODO Fix type guards
+    initPvm(pvm as InternalPvmInstance, program, initialState);
+  } else {
+    logger.info("PVM init external", pvm);
+    const gas = initialState.gas || 10000;
+    pvm.reset(program, regsAsUint8(initialState.regs), BigInt(gas));
+    pvm.setNextProgramCounter(initialState.pc ?? 0);
+    pvm.setGasLeft(BigInt(gas));
+  }
+};
+
+export const runInit = async ({ pvm, program, initialState }: InitParams): Promise<InitResponse> => {
+  if (program.length === 0) {
+    console.warn("Skipping init, no program yet.");
+    return {
+      status: CommandStatus.SUCCESS,
+      initialState: {},
+    };
+  }
+
+  try {
+    await init({ pvm, program, initialState });
+
+    return {
+      status: CommandStatus.SUCCESS,
+      initialState: pvm ? getState(pvm) : {},
+    };
+  } catch (error) {
+    return {
+      status: CommandStatus.ERROR,
+      error,
+      initialState: pvm ? getState(pvm) : {},
+    };
+  }
+};

src/packages/web-worker/command-handlers/load.ts

@@ -0,0 +1,50 @@
+import { logger } from "@/utils/loggerService";
+import { loadArrayBufferAsWasm, SupportedLangs } from "../utils";
+import { CommandStatus, PvmApiInterface, PvmTypes } from "../worker";
+import { Pvm as InternalPvmInstance } from "@typeberry/pvm-debugger-adapter";
+
+export type LoadParams = { type: PvmTypes; params: { url?: string; file?: Blob; lang?: SupportedLangs } };
+export type LoadResponse = { pvm: PvmApiInterface | null; status: CommandStatus; error?: unknown };
+
+const load = async (args: LoadParams): Promise<PvmApiInterface | null> => {
+  if (args.type === PvmTypes.BUILT_IN) {
+    return new InternalPvmInstance();
+  } else if (args.type === PvmTypes.WASM_FILE) {
+    const file = args.params.file;
+    if (!file) {
+      throw new Error("No PVM file");
+    }
+
+    logger.info("Load WASM from file", file);
+    const bytes = await file.arrayBuffer();
+    return await loadArrayBufferAsWasm(bytes);
+  } else if (args.type === PvmTypes.WASM_URL) {
+    const url = args.params.url ?? "";
+    const isValidUrl = Boolean(new URL(url));
+
+    if (!isValidUrl) {
+      throw new Error("Invalid PVM URL");
+    }
+
+    logger.info("Load WASM from URL", url);
+    const response = await fetch(url);
+    const bytes = await response.arrayBuffer();
+
+    return await loadArrayBufferAsWasm(bytes, args.params.lang);
+  }
+
+  return null;
+};
+
+export const runLoad = async (args: LoadParams): Promise<LoadResponse> => {
+  try {
+    const pvm = await load(args);
+    if (pvm) {
+      return { pvm, status: CommandStatus.SUCCESS };
+    }
+  } catch (error) {
+    return { pvm: null, status: CommandStatus.ERROR, error };
+  }
+
+  return { pvm: null, status: CommandStatus.ERROR, error: new Error("Unknown PVM type") };
+};

src/packages/web-worker/command-handlers/step.ts

@@ -0,0 +1,40 @@
+import { CurrentInstruction, ExpectedState, Status } from "@/types/pvm";
+import { nextInstruction } from "../pvm";
+import { isInternalPvm, getState } from "../utils";
+import { CommandStatus, PvmApiInterface } from "../worker";
+
+export type StepParams = { program: number[]; pvm: PvmApiInterface | null };
+export type StepResponse = {
+  status: CommandStatus;
+  error?: unknown;
+  result: CurrentInstruction | object;
+  state: ExpectedState;
+  isFinished: boolean;
+};
+
+const step = ({ pvm, program }: StepParams) => {
+  if (!pvm) {
+    throw new Error("PVM is uninitialized.");
+  }
+
+  let isFinished: boolean;
+  if (isInternalPvm(pvm)) {
+    isFinished = pvm.nextStep() !== Status.OK;
+  } else {
+    isFinished = !pvm.nextStep();
+  }
+
+  const state = getState(pvm);
+  const result = nextInstruction(state.pc ?? 0, program) as unknown as CurrentInstruction;
+
+  return { result, state, isFinished };
+};
+
+export const runStep = ({ pvm, program }: StepParams): StepResponse => {
+  try {
+    const data = step({ pvm, program });
+    return { status: CommandStatus.SUCCESS, ...data };
+  } catch (error) {
+    return { status: CommandStatus.ERROR, error, isFinished: true, result: {}, state: {} };
+  }
+};

src/packages/web-worker/pvm.ts

@@ -3,7 +3,7 @@ import { createResults, instructionArgumentTypeMap, ProgramDecoder } from "@type
 import { ArgsDecoder, Registers } from "@typeberry/pvm-debugger-adapter";
 import { byteToOpCodeMap } from "../../packages/pvm/pvm/assemblify";
 import { Pvm as InternalPvmInstance, MemoryBuilder as InternalPvmMemoryBuilder } from "@typeberry/pvm-debugger-adapter";
-export const initPvm = (pvm: InternalPvmInstance, program: number[], initialState: InitialState) => {
+export const initPvm = (pvm: InternalPvmInstance, program: Uint8Array, initialState: InitialState) => {
   const initialMemory = initialState.memory ?? [];
   const pageMap = initialState.pageMap ?? [];
 
@@ -32,7 +32,6 @@ export const initPvm = (pvm: InternalPvmInstance, program: number[], initialStat
   const registers = new Registers();
   registers.copyFrom(new Uint32Array(initialState.regs!));
   pvm.reset(new Uint8Array(program), initialState.pc ?? 0, initialState.gas ?? 0, registers, memory);
-  return pvm;
 };
 
 export const runAllInstructions = (pvm: InternalPvm, program: number[]) => {

src/packages/web-worker/utils.ts

@@ -5,6 +5,7 @@ import { createWasmPvmShell } from "@/packages/web-worker/wasmPvmShell.ts";
 import "./goWasmExec.js";
 import "./goWasmExec.d.ts";
 import { createGoWasmPvmShell } from "@/packages/web-worker/wasmGoPvmShell.ts";
+import { logger } from "@/utils/loggerService.tsx";
 
 export enum SupportedLangs {
   Go = "Go",
@@ -66,28 +67,26 @@ export async function loadArrayBufferAsWasm(bytes: ArrayBuffer, lang?: Supported
     const go = new Go();
     const wasmModule = await WebAssembly.instantiate(bytes, go.importObject);
     go.run(wasmModule.instance);
-    console.log("Go WASM module loaded", wasmModule.instance.exports);
+    logger.info("Go WASM module loaded", wasmModule.instance.exports);
     const wasmPvmShell = createGoWasmPvmShell();
     wasmPvmShell.__wbg_set_wasm(wasmModule.instance.exports);
     return wasmPvmShell;
   } else {
     const wasmModule = await WebAssembly.instantiate(bytes, {});
-    console.log("Rust WASM module loaded", wasmModule.instance.exports);
+    logger.info("Rust WASM module loaded", wasmModule.instance.exports);
     const wasmPvmShell = createWasmPvmShell();
     wasmPvmShell.__wbg_set_wasm(wasmModule.instance.exports);
     return wasmPvmShell;
   }
 }
 
 export function getMemoryPage(pageNumber: number, pvm: PvmApiInterface | null) {
-  console.log("getMemoryPage", pageNumber, pvm);
   if (!pvm) {
     return [];
   }
 
   if (isInternalPvm(pvm)) {
     return pvm.getMemoryPage(pageNumber) || [];
   }
-  console.log("getpagedump", pageNumber, pvm.getPageDump(pageNumber));
   return pvm.getPageDump(pageNumber) || [];
 }