Merge pull request #33 from venture23-aleo/develop

Web UI, tools added

RELEASE-NOTES.md

@@ -1,3 +1,42 @@
+### Release Note: @dokojs/cli 1.0.0, @dokojs/core 1.0.0, @dokojs/utils 1.0.0 & @dokojs/wasm 0.1.0
+
+#### Key Updates
+##### **1. SDK Integration and Migration**
+- **Replaced SnarkOS Commands with Leo Commands:** 
+  - Commit [`319d8ac`](https://github.com/venture23-aleo/doko-js/commit/319d8ac), [`f770f65`](https://github.com/venture23-aleo/doko-js/commit/f770f65), [`44bc8fc`](https://github.com/venture23-aleo/doko-js/commit/44bc8fc) – Migrated from `snarkos` to `leo` commands (`leo execute`, `leo deploy`) to remove dependencies on SnarkOS, making the project leaner and less dependent on external packages.
+
+- **Transition to `provablehq/sdk`:**
+  - Commit [`0a29006`](https://github.com/venture23-aleo/doko-js/commit/0a29006) – Replaced `aleohq/sdk` with `provablehq/sdk` for improved consistency and support with the latest tools and functions.
+
+##### **2. Transaction Encryption/Decryption and Hashing Mechanisms**
+
+- **WASM Enhancements and Utilities for Hashing/Encryption:**
+  - Commit [`93c1ce9`](https://github.com/venture23-aleo/doko-js/commit/93c1ce9) – Introduced structures for encryption, decryption, and hashing operations within WebAssembly (WASM) for efficient execution.
+  - **Local WASM Dependencies**:
+    - Commit [`b55b1b4`](https://github.com/venture23-aleo/doko-js/commit/b55b1b4) – Included local WASM dependencies to streamline the build process, reducing compatibility issues with different environments.
+  - **Target Updates for NodeJS Compatibility**:
+    - Commit [`fbf45ff`](https://github.com/venture23-aleo/doko-js/commit/fbf45ff) – Updated WASM target for Node.js, ensuring DokoJS operates smoothly in both web and server-side contexts.
+
+##### **3. Web Tools & Website Enhancements**
+
+- **Website Addition for Web Tools:**
+  - Commit [`4de1951`](https://github.com/venture23-aleo/doko-js/commit/4de1951) – Added the initial website for web-based contract interaction, generation, and transaction management.
+  - **Responsive and UX Improvements**: 
+    - Commits [`55c0c07`](https://github.com/venture23-aleo/doko-js/commit/55c0c07), [`ab5974e`](https://github.com/venture23-aleo/doko-js/commit/ab5974e) – Addressed responsive design issues and refined the user interface, ensuring a smoother experience for various devices.
+
+- **Transaction Signature and Hashing Enhancements:**
+  - Commits [`f5ea56b`](https://github.com/venture23-aleo/doko-js/commit/f5ea56b), [`5ed0c0d`](https://github.com/venture23-aleo/doko-js/commit/5ed0c0d) – Improved handling of transaction responses, including signature verification and added support for encryption and hashing algorithms.
+
+##### **4. Additional Enhancements**
+
+- **Error Fixes and Compatibility Adjustments:**
+  - Commits [`55c0c07`](https://github.com/venture23-aleo/doko-js/commit/55c0c07), [`a01c82c`](https://github.com/venture23-aleo/doko-js/commit/a01c82c), [`5ba1783`](https://github.com/venture23-aleo/doko-js/commit/5ba1783) – Fixed minor issues like build errors, pnpm compatibility, and eslint issues, improving overall code quality and project stability.
+  - **Refined Type Definitions and Improved Generators**:
+    - Commits [`88a5a6c`](https://github.com/venture23-aleo/doko-js/commit/88a5a6c), [`055d19f`](https://github.com/venture23-aleo/doko-js/commit/055d19f) – Enhanced transaction response formatting and refined type definitions for the transition function with clearer API interfaces.
+
+- **Contract Testing and Template Refinements:**
+  - Commits [`61151de`](https://github.com/venture23-aleo/doko-js/commit/61151de), [`5ba1783`](https://github.com/venture23-aleo/doko-js/commit/5ba1783) – Updated sample contracts and fixed issues with base contract generation, ensuring that the templates are functional and coverage for various use cases.
+
 ### Release Note: @dokojs/cli 0.2.0, @dokojs/core 0.3.0 & @dokojs/utils 0.1.0
 
 #### Key Updates:

packages/core/src/parser/index.ts

@@ -1,3 +1,4 @@
 export * from './compile';
 export * from './parser';
 export * from './tokenizer';
+export * as WebParser from './web/index';

packages/core/src/parser/web/compile.ts

@@ -0,0 +1,67 @@
+import { AleoReflection, Parser } from '@/parser/parser';
+import { Generator } from '@/generator/generator';
+import { FormatCode } from '@/utils/js-formatter';
+
+import { Tokenizer } from '../tokenizer';
+import { sortProgramsByImports } from './utils';
+
+interface GeneratedCode {
+    programName: string;
+    types: string;
+    leo2js: string;
+    js2leo: string;
+    contractClass: string;
+    transitions: string;
+}
+
+async function parseAleoOpCode(data: string): Promise<GeneratedCode> {
+    const tokenizer = new Tokenizer(data);
+    const aleoReflection = new Parser(tokenizer).parse();
+
+    const programName = aleoReflection.programName;
+
+    const generator = new Generator(aleoReflection, {
+        isImportedAleo: false
+    });
+    let generatedTypes = '',
+        generatedLeoToJS = '',
+        generatedJSToLeo = '';
+    if (aleoReflection.customTypes.length === 0) {
+        console.warn(
+            `No types generated for program: ${programName}. No custom types[struct/record] declaration found`
+        );
+    } else {
+        generatedTypes = FormatCode(generator.generateTypes());
+        generatedLeoToJS = FormatCode(generator.generateLeoToJS());
+        generatedJSToLeo = FormatCode(generator.generateJSToLeo());
+    }
+
+    let generatedContractClass = '',
+        generatedTransitions = '';
+    if (aleoReflection.functions.length > 0) {
+        generatedContractClass = FormatCode(generator.generateContractClass());
+
+        generatedTransitions = FormatCode(generator.generateTransitions());
+    }
+
+    return {
+        programName: aleoReflection.programName,
+        types: generatedTypes,
+        leo2js: generatedLeoToJS,
+        js2leo: generatedJSToLeo,
+        contractClass: generatedContractClass,
+        transitions: generatedTransitions
+    };
+}
+
+async function bulkParseProgram(data: string[]) {
+    const sortedPrograms = sortProgramsByImports(data);
+
+    if (!(sortedPrograms instanceof Error)) {
+        const generatedData = await Promise.all(sortedPrograms.map(async (program) => await parseAleoOpCode(program)));
+
+        return generatedData;
+    }
+}
+
+export { parseAleoOpCode, bulkParseProgram };

packages/core/src/parser/web/index.ts

@@ -0,0 +1 @@
+export * from "./compile";

packages/core/src/parser/web/utils.ts

@@ -0,0 +1,69 @@
+function sortProgramsByImports(programs: string[]): string[] | Error {
+    // Extract imports from each program and store them in a map
+    const programImports = new Map<string, Set<string>>();
+    const programToCode = new Map<string, string>();
+
+    // Helper to extract imports from code
+    const extractImports = (code: string) => {
+        const importSet = new Set<string>();
+        const importRegex = /import\s+.*?\s+from\s+['"](.+?)['"]/g;
+        let match;
+        while ((match = importRegex.exec(code)) !== null) {
+            importSet.add(match[1]);
+        }
+        return importSet;
+    };
+
+    // Populate program imports and code map
+    programs.forEach((code, index) => {
+        const programName = `Program${index + 1}`;
+        programImports.set(programName, extractImports(code));
+        programToCode.set(programName, code);
+    });
+
+    // Sort programs by dependency order, and detect cyclic dependencies
+    const sortedPrograms: string[] = [];
+    const visited = new Set<string>();
+    const recStack = new Set<string>();
+
+    function dfs(programName: string): boolean {
+        if (recStack.has(programName)) {
+            // Cyclic dependency detected
+            throw new Error(`Cyclic dependency detected involving ${programName}`);
+        }
+
+        if (visited.has(programName)) return false;
+
+        visited.add(programName);
+        recStack.add(programName);
+
+        const imports = programImports.get(programName);
+        if (imports) {
+            for (const imp of imports) {
+                if (programImports.has(imp) && dfs(imp)) {
+                    return true; // Cyclic dependency detected in DFS path
+                }
+            }
+        }
+
+        recStack.delete(programName);
+        sortedPrograms.push(programName);
+        return false;
+    }
+
+    // Attempt to process each program
+    try {
+        programImports.forEach((_, programName) => {
+            if (!visited.has(programName)) {
+                dfs(programName);
+            }
+        });
+    } catch (error) {
+        return error as Error;
+    }
+
+    // Retrieve sorted code by program names
+    return sortedPrograms.map((programName) => programToCode.get(programName)!);
+}
+
+export { sortProgramsByImports };

packages/web/.gitignore

@@ -0,0 +1,25 @@
+.vercel
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/web/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>DokoJS - Lightweight Testing Framework</title>
+  <!--app-head-->
+</head>
+
+<body>
+  <div id="root"><!--app-html--></div>
+  <script type="module" src="/src/entry-client.tsx"></script>
+</body>
+
+</html>

packages/web/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development npx nodemon ./server.js",
+    "build": "npm run build:client && npm run build:server",
+    "build:client": "vite build --ssrManifest --outDir dist/client",
+    "build:server": "vite build --ssr src/entry-server.tsx --outDir dist/server",
+    "serve": "cross-env NODE_ENV=production node ./server.js"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^4.4.0",
+    "@doko-js/core": "^1.0.3-beta.1",
+    "@doko-js/wasm": "0.1.3-beta.1",
+    "ace-builds": "^1.36.2",
+    "antd": "^5.6.4",
+    "axios": "^1.7.7",
+    "compression": "^1.7.4",
+    "copy-to-clipboard": "^3.3.1",
+    "express": "^4.19.2",
+    "highlight.js": "^11.10.0",
+    "react": "^18.2.0",
+    "react-accessible-treeview": "^2.9.1",
+    "react-ace": "^12.0.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.3.0",
+    "react-router-dom": "^6.14.1",
+    "react-simple-code-editor": "^0.14.1",
+    "sirv": "^2.0.4"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "cross-env": "^7.0.3",
+    "rollup-plugin-node-polyfills": "^0.2.1",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.10",
+    "vite-plugin-node-polyfills": "^0.22.0",
+    "vite-plugin-wasm": "^3.3.0"
+  }
+}