feat: enable react templates

golemfactory · Jul 24, 2024 · 09224bb · 09224bb
1 parent 9431c9e
commit 09224bb
Show file tree

Hide file tree

Showing 8 changed files with 155 additions and 217 deletions.
diff --git a/data/project-templates/react-js/package.json b/data/project-templates/react-js/package.json
@@ -10,8 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@golem-sdk/golem-js": "^3.0.0",
-    "@golem-sdk/react": "^3.0.1",
+    "@golem-sdk/golem-js": "^3.1.0",
+    "@golem-sdk/react": "^4.0.0",
+    "@golem-sdk/task-executor": "^2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/data/project-templates/react-js/src/components/NodeVersionCheck.jsx b/data/project-templates/react-js/src/components/NodeVersionCheck.jsx
@@ -1,39 +1,42 @@
 import { useExecutor } from "@golem-sdk/react";
-import { ProposalFilterFactory } from "@golem-sdk/golem-js";
-import { NodeVersionCheckTask } from "./NodeVersionCheckTask.jsx";
+import { NodeVersionCheckTask } from "./NodeVersionCheckTask";
 
 export function NodeVersionCheck() {
   const { executor, initialize, isInitialized, isInitializing, terminate, error } = useExecutor({
-    // What do you want to run
-    package: "golem/node:20-alpine",
-
-    // How much you wish to spend
-    budget: 2,
-
-    // How do you want to select market proposals
-    proposalFilter: ProposalFilterFactory.limitPriceFilter({
-      start: 1.0,
-      cpuPerSec: 1.0 / 3600,
-      envPerSec: 1.0 / 3600,
-    }),
-
+    demand: {
+      workload: {
+        imageTag: "golem/node:20-alpine",
+      },
+    },
     // Where you want to spend
     payment: {
-      network: "goerli",
+      network: "holesky",
+    },
+    market: {
+      // Let's rent the provider for no more than 15 minutes
+      rentHours: 15 / 60,
+      // Let's agree to pay at most 0.5 GLM per hour
+      pricing: {
+        model: "burn-rate",
+        avgGlmPerHour: 0.5,
+      },
     },
-
     // Control the execution of tasks
-    maxTaskRetries: 0,
-    taskTimeout: 5 * 60 * 1000,
+    task: {
+      taskTimeout: 5 * 60 * 1000,
+      maxTaskRetries: 0,
+    },
+    // Look at the browser console to see what's happening under the hood
+    enableLogging: true,
   });
 
   return (
     <div className="node-version-check-wrapper">
       {error && <div className="text-error">Error: {error.toString()}</div>}
-      {isInitialized && <NodeVersionCheckTask executor={executor} />}
+      {isInitialized && executor && <NodeVersionCheckTask executor={executor} />}
       {isInitializing && <div>Executor is initializing</div>}
       {!isInitialized && (
-        <button onClick={initialize} className="bg-progress">
+        <button onClick={() => initialize()} className="bg-progress">
           Initialize executor
         </button>
       )}

diff --git a/data/project-templates/react-js/src/components/NodeVersionCheckTask.jsx b/data/project-templates/react-js/src/components/NodeVersionCheckTask.jsx
@@ -4,8 +4,8 @@ import PropTypes from "prop-types";
 export function NodeVersionCheckTask({ executor }) {
   const { isRunning, result, run, error } = useTask(executor);
 
-  const getNodeVersionTask = async (ctx) => {
-    return (await ctx.run("node -v")).stdout?.toString() ?? "No version information";
+  const getNodeVersionTask = async (exe) => {
+    return (await exe.run("node -v")).stdout?.toString() ?? "No version information";
   };
 
   return (

diff --git a/data/project-templates/react-ts/package.json b/data/project-templates/react-ts/package.json
@@ -10,8 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@golem-sdk/golem-js": "^3.0.0",
-    "@golem-sdk/react": "^3.0.1",
+    "@golem-sdk/golem-js": "^3.1.0",
+    "@golem-sdk/react": "^4.0.0",
+    "@golem-sdk/task-executor": "^2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/data/project-templates/react-ts/src/components/NodeVersionCheck.tsx b/data/project-templates/react-ts/src/components/NodeVersionCheck.tsx
@@ -1,30 +1,33 @@
 import { useExecutor } from "@golem-sdk/react";
-import { ProposalFilterFactory } from "@golem-sdk/golem-js";
 import { NodeVersionCheckTask } from "./NodeVersionCheckTask";
 
 export function NodeVersionCheck() {
   const { executor, initialize, isInitialized, isInitializing, terminate, error } = useExecutor({
-    // What do you want to run
-    package: "golem/node:20-alpine",
-
-    // How much you wish to spend
-    budget: 2,
-
-    // How do you want to select market proposals
-    proposalFilter: ProposalFilterFactory.limitPriceFilter({
-      start: 1.0,
-      cpuPerSec: 1.0 / 3600,
-      envPerSec: 1.0 / 3600,
-    }),
-
+    demand: {
+      workload: {
+        imageTag: "golem/node:20-alpine",
+      },
+    },
     // Where you want to spend
     payment: {
-      network: "goerli",
+      network: "holesky",
+    },
+    market: {
+      // Let's rent the provider for no more than 15 minutes
+      rentHours: 15 / 60,
+      // Let's agree to pay at most 0.5 GLM per hour
+      pricing: {
+        model: "burn-rate",
+        avgGlmPerHour: 0.5,
+      },
     },
-
     // Control the execution of tasks
-    maxTaskRetries: 0,
-    taskTimeout: 5 * 60 * 1000,
+    task: {
+      taskTimeout: 5 * 60 * 1000,
+      maxTaskRetries: 0,
+    },
+    // Look at the browser console to see what's happening under the hood
+    enableLogging: true,
   });
 
   return (
@@ -33,7 +36,7 @@ export function NodeVersionCheck() {
       {isInitialized && executor && <NodeVersionCheckTask executor={executor} />}
       {isInitializing && <div>Executor is initializing</div>}
       {!isInitialized && (
-        <button onClick={initialize} className="bg-progress">
+        <button onClick={() => initialize()} className="bg-progress">
           Initialize executor
         </button>
       )}

diff --git a/data/project-templates/react-ts/src/components/NodeVersionCheckTask.tsx b/data/project-templates/react-ts/src/components/NodeVersionCheckTask.tsx
@@ -1,10 +1,10 @@
-import { TaskExecutor, useTask, Worker } from "@golem-sdk/react";
-
+import { useTask } from "@golem-sdk/react";
+import type { TaskFunction, TaskExecutor } from "@golem-sdk/task-executor";
 export function NodeVersionCheckTask({ executor }: { executor: TaskExecutor }) {
   const { isRunning, result, run, error } = useTask<string>(executor);
 
-  const getNodeVersionTask: Worker<string> = async (ctx) => {
-    return (await ctx.run("node -v")).stdout?.toString() ?? "No version information";
+  const getNodeVersionTask: TaskFunction<string> = async (exe) => {
+    return (await exe.run("node -v")).stdout?.toString() ?? "No version information";
   };
 
   return (