Update nextjs-ts template

create-aleo-app/template-nextjs-ts/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

create-aleo-app/template-nextjs-ts/helloworld/.env.example

@@ -0,0 +1,2 @@
+NETWORK=testnet3
+PRIVATE_KEY=user1PrivateKey

create-aleo-app/template-nextjs-ts/helloworld/README.md

@@ -0,0 +1,13 @@
+# helloworld.aleo
+
+## Build Guide
+
+To compile this Aleo program, run:
+```bash
+snarkvm build
+```
+
+To execute this Aleo program, run:
+```bash
+snarkvm run hello
+```

create-aleo-app/template-nextjs-ts/helloworld/build/main.aleo

@@ -0,0 +1,7 @@
+program helloworld_next1.aleo;
+
+function main:
+    input r0 as u32.public;
+    input r1 as u32.private;
+    add r0 r1 into r2;
+    output r2 as u32.private;

create-aleo-app/template-nextjs-ts/helloworld/build/program.json

@@ -0,0 +1,6 @@
+{
+    "program": "helloworld_next1.aleo",
+    "version": "0.0.0",
+    "description": "",
+    "license": "MIT"
+}

create-aleo-app/template-nextjs-ts/helloworld/inputs/helloworld.in

@@ -0,0 +1,4 @@
+// The program input for helloworld/src/main.leo
+[main]
+public a: u32 = 1u32;
+b: u32 = 2u32;

create-aleo-app/template-nextjs-ts/helloworld/program.json

@@ -0,0 +1,6 @@
+{
+    "program": "helloworld.aleo",
+    "version": "0.0.0",
+    "description": "",
+    "license": "MIT"
+}

create-aleo-app/template-nextjs-ts/helloworld/src/main.leo

@@ -0,0 +1,7 @@
+// The 'helloworld' program.
+program helloworld.aleo {
+    transition main(public a: u32, b: u32) -> u32 {
+        let c: u32 = a + b;
+        return c;
+    }
+}

create-aleo-app/template-nextjs-ts/next.config.js

@@ -1,5 +1,5 @@
-const TerserPlugin = require("terser-webpack-plugin")
-/** @type {import('next').NextConfig} */
+const TerserPlugin = require("terser-webpack-plugin");
+
 const nextConfig = {
     async headers() {
         return [
@@ -18,15 +18,38 @@ const nextConfig = {
             },
         ]
     },
-    webpack: (config) => {
+    webpack: (config, { isServer }) => {
+
+        config.module.rules.push({
+            test: /\.aleo$/,
+            use: 'raw-loader',
+        });
+
+        if (!isServer) {
+            config.resolve.fallback = {
+              fs: false,
+              net: false,
+              tls: false,
+            };
+          }
+
+
         config.experiments = { ...config.experiments, topLevelAwait: true };
-        config.optimization = { ...config.optimization, minimize: true, minimizer: [new TerserPlugin({
-                terserOptions: {
-                    module: true,
-                }
-            })], }
+        config.optimization = {
+            ...config.optimization,
+            minimize: true,
+            runtimeChunk: 'single',
+            minimizer: [
+                new TerserPlugin({
+                    terserOptions: {
+                        module: true,
+                    }
+                }),
+            ]
+        };
+
         return config;
     },
 }
 
-module.exports = nextConfig
+module.exports = nextConfig;

create-aleo-app/template-nextjs-ts/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "template-nextjs",
+  "name": "test-next",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -10,15 +10,18 @@
   },
   "dependencies": {
     "@aleohq/sdk": "^0.6.2",
+    "circular-dependency-plugin": "^5.2.2",
+    "comlink": "^4.4.1",
     "next": "13.5.4",
     "react": "^18",
-    "react-dom": "^18",
-    "terser-webpack-plugin": "^5.3.9"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "raw-loader": "^4.0.2",
+    "terser-webpack-plugin": "^5.3.10",
     "typescript": "^5"
   }
 }

create-aleo-app/template-nextjs-ts/src/app/custom.d.ts

@@ -0,0 +1,16 @@
+declare module '*.svg' {
+    const content: any;
+    export default content;
+  }
+
+  declare module '*.aleo' {
+    const content: string;
+    export default content;
+  }
+
+  declare module '*?raw' {
+    const content: string;
+    export default content;
+  }
+
+

create-aleo-app/template-nextjs-ts/src/app/page.tsx

@@ -3,89 +3,63 @@
 import Image from "next/image";
 import styles from "./page.module.css";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { AleoWorker } from './workers/AleoWorker'; 
+import program_data from "../../helloworld/build/main.aleo?raw";
+const aleoWorker = AleoWorker();
 
 export default function Home() {
     const [account, setAccount] = useState(null);
     const [executing, setExecuting] = useState(false);
 
     const generateAccount = async () => {
-        workerRef.current?.postMessage("key");
+        const key = await aleoWorker.getPrivateKey();
+        setAccount(key);
     };
 
-    async function execute() {
+    const execute = async () => {
         setExecuting(true);
-        workerRef.current?.postMessage("execute");
-    }
-
-    const workerRef = useRef<Worker>();
-
-    interface AleoWorkerMessageEvent {
-        type: string;
-        result: any;
-    }
-
-    useEffect(() => {
-        workerRef.current = new Worker(new URL("worker.ts", import.meta.url));
-        workerRef.current.onmessage = (
-            event: MessageEvent<AleoWorkerMessageEvent>
-        ) => {
-            if (event.data.type === "key") {
-                setAccount(event.data.result);
-            } else if (event.data.type === "execute") {
-                setExecuting(false);
-            }
-            alert(`WebWorker Response => ${event.data.result}`);
-        };
-        return () => {
-            workerRef.current?.terminate();
-        };
-    }, []);
+        const result = await aleoWorker.localProgramExecution(
+            program_data,
+            "main",
+            ["3u32", "5u32"],
+          );
+        setExecuting(false);
+        alert(`Execution Result: ${result}`);
+    };
 
-    const handleWork = useCallback(async () => {
-        workerRef.current?.postMessage("execute");
-    }, []);
+
+    const deploy = async () => {
+        setExecuting(true);
+        const deploymentResult = await aleoWorker.deployProgram(program_data);
+        setExecuting(false);
+        alert(`Deployment Result: ${deploymentResult}`);
+    };
 
     return (
         <main className={styles.main}>
             <div className={styles.description}>
-                <p>
-                    Get started by editing&nbsp;
-                    <code className={styles.code}>src/app/page.tsx</code>
-                </p>
+                <p>Get started by editing <code className={styles.code}>src/app/page.tsx</code></p>
             </div>
 
             <div className={styles.center}>
-                <Image
-                    className={styles.logo}
-                    src="/next.svg"
-                    alt="Next.js Logo"
-                    width={180}
-                    height={37}
-                    priority
-                />
-                <Image
-                    className={styles.logo}
-                    src="/aleo.svg"
-                    alt="Next.js Logo"
-                    width={180}
-                    height={45}
-                    priority
-                />
+                <Image className={styles.logo} src="/next.svg" alt="Next.js Logo" width={180} height={37} priority />
+                <Image className={styles.logo} src="/aleo.svg" alt="Aleo Logo" width={180} height={45} priority />
             </div>
 
             <div className={styles.card}>
                 <p>
                     <button onClick={generateAccount}>
-                        {account
-                            ? `Account is ${JSON.stringify(account)}`
-                            : `Click to generate account`}
+                        {account ? `Account is ${account}` : `Click to generate account`}
                     </button>
                 </p>
                 <p>
                     <button disabled={executing} onClick={execute}>
-                        {executing
-                            ? `Executing...check console for details...`
-                            : `Execute helloworld.aleo`}
+                        {executing ? `Executing...` : `Execute helloworld.aleo`}
+                    </button>
+                </p>
+                <p>
+                    <button disabled={executing} onClick={deploy}>
+                        {executing ? `Deploying...` : `Deploy Helloworld.aleo`}
                     </button>
                 </p>
             </div>

create-aleo-app/template-nextjs-ts/src/app/workers/AleoWorker.ts

@@ -0,0 +1,18 @@
+import { wrap } from "comlink";
+
+let singletonWorker:any = null;
+
+const AleoWorker = () => {
+    if (!singletonWorker && typeof window !== "undefined") {
+        const worker = new Worker(new URL("worker", import.meta.url), {
+            type: "module",
+        });
+        worker.onerror = function(event) {
+            console.error("Error in worker:", event.message);
+        };
+        singletonWorker = wrap(worker);
+    }
+    return singletonWorker;
+};
+
+export { AleoWorker };