diff --git a/bindings/javascript/README.md b/bindings/javascript/README.md
index 6332ffd77..0fab0abca 100644
--- a/bindings/javascript/README.md
+++ b/bindings/javascript/README.md
@@ -47,7 +47,8 @@ Both of this functions accepts a mandatory **SCRIPT** to be executed and some op
- DATA
- KEYS
- [CONF](https://dev.zenroom.org/#/pages/zenroom-config)
- **All in form of strings.** This means that if you want to pass a JSON you have to `JSON.stringify` it before.
+
+**All in form of strings.** This means that if you want to pass a JSON you have to `JSON.stringify` it before.
Both functions return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
@@ -100,7 +101,7 @@ const zenData = `
zencode_exec(zencodeEncrypt, {
data: zenData,
keys: zenKeys,
- conf: `color=0, debug=0`,
+ conf: `debug=1`,
})
.then((result) => {
console.log(result);
@@ -126,7 +127,7 @@ try {
const result = await zenroom_exec(`print(DATA)`, {
data: "Some data",
keys: "Some other data",
- conf: `color=0, debug=0`,
+ conf: `debug=1`,
});
console.log(result); // => Some data
} catch (e) {
@@ -144,7 +145,7 @@ console.log(introspection); // => an object described as https://dev.zenroom.org
## ๐ Acknowledgements
-Copyright (C) 2018-2022 by [Dyne.org](https://www.dyne.org) foundation, Amsterdam
+Copyright (C) 2018-2024 by [Dyne.org](https://www.dyne.org) foundation, Amsterdam
Designed, written and maintained by Puria Nafisi Azizi.
@@ -170,7 +171,7 @@ Please first take a look at the [Dyne.org - Contributor License Agreement](CONTR
## ๐ผ License
Zenroom js - a javascript wrapper of zenroom
- Copyright (c) 2018-2022 Dyne.org foundation, Amsterdam
+ Copyright (c) 2018-2024 Dyne.org foundation, Amsterdam
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
diff --git a/docs/pages/javascript.md b/docs/pages/javascript.md
index 9ed11dfac..6c028808c 100644
--- a/docs/pages/javascript.md
+++ b/docs/pages/javascript.md
@@ -28,20 +28,36 @@
Stable releases are published on https://www.npmjs.com/package/zenroom that
have a slow pace release schedule that you can install with
+
+
+### ** npm **
+
```bash
-yarn add zenroom
-# or if you use npm
npm install zenroom
```
+### ** yarn **
+
+```bash
+yarn add zenroom
+```
+
+### ** pnpm **
+
+```bash
+pnpm add zenroom
+```
+
+
* * *
## ๐ฎ Usage
-The binding consists of one main function::
+The binding consists of two main functions:
-**zencode_exec** to execute [Zencode](https://dev.zenroom.org/#/pages/zencode-intro?id=smart-contracts-in-human-language). To learn more about zencode syntax look [here](https://dev.zenroom.org/#/pages/zencode-cookbook-intro)
+- **zencode_exec** to execute [Zencode](https://dev.zenroom.org/#/pages/zencode-intro?id=smart-contracts-in-human-language). To learn more about zencode syntax look [here](https://dev.zenroom.org/#/pages/zencode-cookbook-intro)
+- **zenroom_exec** to execute our special flavor of Lua enhanced with Zenroom's [special effects](https://dev.zenroom.org/#/pages/lua)
This function accepts a mandatory **SCRIPT** to be executed and some optional parameters:
* DATA
@@ -49,12 +65,12 @@ This function accepts a mandatory **SCRIPT** to be executed and some optional pa
* [CONF](https://dev.zenroom.org/#/pages/zenroom-config)
All in form of strings.
-This functions returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
+These functions return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
To start using the zenroom vm just do:
```js
-import { zenroom_exec, zencode_exec } from 'zenroom'
+import { zenroom_exec, zencode_exec, introspection } from "zenroom";
// or if you don't use >ES6
// const { zenroom_exec, zencode_exec } = require('zenroom')
@@ -62,65 +78,95 @@ import { zenroom_exec, zencode_exec } from 'zenroom'
// Zencode: generate a random array. This script takes no extra input
const zencodeRandom = `
- Given nothing
- When I create the array of '16' random objects of '32' bits
- Then print all data`
-
+ Given nothing
+ When I create the array of '16' random objects of '32' bits
+ Then print all data
+`;
+
zencode_exec(zencodeRandom)
- .then((result) => {
- console.log(result);
- })
- .catch((error) => {
- throw new Error(error);
- });
+ .then((result) => {
+ console.log(result);
+ })
+ .catch((error) => {
+ console.error(error);
+ });
-// Zencode: encrypt a message.
+// Zencode: encrypt a message.
// This script takes the options' object as the second parameter: you can include data and/or keys as input.
// The "config" parameter is also optional.
const zencodeEncrypt = `
- Scenario 'ecdh': Encrypt a message with the password
- Given that I have a 'string' named 'password'
- Given that I have a 'string' named 'message'
- When I encrypt the secret message 'message' with 'password'
- Then print the 'secret message'`
-
+ Scenario 'ecdh': Encrypt a message with the password
+ Given that I have a 'string' named 'password'
+ Given that I have a 'string' named 'message'
+ When I encrypt the secret message 'message' with 'password'
+ Then print the 'secret message'
+`;
+
const zenKeys = `
- {
- "password": "myVerySecretPassword"
- }
-`
+ {
+ "password": "myVerySecretPassword"
+ }
+`;
const zenData = `
- {
- "message": "HELLO WORLD"
- }
-`
-
-zencode_exec(zencode, {data: zenData, keys: zenKeys, conf:`color=0, debug=0`})
- .then((result) => {
- console.log(result);
- })
- .catch((error) => {
- throw new Error(error);
- });
+ {
+ "message": "HELLO WORLD"
+ }
+`;
+
+zencode_exec(zencode, {
+ data: zenData,
+ keys: zenKeys,
+ conf:`debug=1`
+})
+ .then((result) => {
+ console.log(result);
+ })
+ .catch((error) => {
+ console.error(error);
+ });
+
+// Lua Hello World!
+
+const lua = `print("Hello World!")`;
+zenroom_exec(lua)
+ .then((result) => {
+ console.log(result);
+ })
+ .catch((error) => {
+ console.error(error);
+ });
// to pass the optional parameters you pass an object literal eg.
+
try {
- const result = await zencode_exec(zencodeRandom, {data: "Some data", keys: "Some other data", conf:`color=0, debug=0`});
+ const result = await zenroom_exec(`print(DATA)`, {
+ data: "Some data",
+ keys: "Some other data",
+ conf: `debug=0`,
+ });
console.log(result); // => Some data
} catch (e) {
- throw new Error(e)
+ console.error(e);
}
```
+Other APIs are:
+* **zenroom_hash** that takes in input the hash type ("sha256" or "sha512") and an ArrayBuffer
+containing the data to be hashed
+* **introspect** that takes in input a zencode contract and return the data that should be present in input
+to that contract
+* **zencode_valid_code** that takes in input a zencode contract and throw an error in case invalid statements
+are found in the contract.
+
## ๐ Tutorials
Here we wrote some tutorials on how to use Zenroom in the JS world
- * [Node.js](/pages/zenroom-javascript1)
- * [Browser](/pages/zenroom-javascript2)
+ * [Node.js](/pages/zenroom-javascript1b)
+ * [Browser](/pages/zenroom-javascript2b)
* [React](/pages/zenroom-javascript3)
For more information also see the [๐Javascript NPM package](https://www.npmjs.com/package/zenroom).
diff --git a/docs/pages/zenroom-javascript-react-with-next.md b/docs/pages/zenroom-javascript-react-with-next.md
new file mode 100644
index 000000000..551fa8f92
--- /dev/null
+++ b/docs/pages/zenroom-javascript-react-with-next.md
@@ -0,0 +1,342 @@
+# Make ๐ with Zencode and Javascript: use Zenroom in React
+
+
+
+## ๐น Letโs create a encrypt/decrypt service
+So you have just experimented how to encrypt and decrypt a message with a password/secret with ECDH (Elliptic-curve DiffieโHellman) on the elliptic curve SECP256K1 in Plain Javascript (Did you? No? Then, jump back to [Zenroom in the browser](zenroom-javascript2b)).
+
+Now let's add some interactivity and see how we can play and interact with Zencode smart contracts within React.
+
+
+## ๐ป Letโs get our hands dirty
+
+Letโs start by creating a standard React project with the [CRA](https://reactjs.org/docs/create-a-new-react-app.html) tool, and add Zenroom as a dependency
+
+
+
+### **npm**
+
+```bash
+npx create-next-app@latest zenroom-react-test \
+ --js \
+ --src-dir \
+ --disable-git \
+ --app \
+ --use-npm \
+ --no-eslint \
+ --no-tailwind \
+ --no-turbopack \
+ --no-import-alias
+```
+
+### **yarn**
+
+```bash
+npx create-next-app@latest zenroom-react-test \
+ --js \
+ --src-dir \
+ --disable-git \
+ --app \
+ --use-yarn \
+ --no-eslint \
+ --no-tailwind \
+ --no-turbopack \
+ --no-import-alias
+```
+
+### **pnpm**
+
+```bash
+npx create-next-app@latest zenroom-react-test \
+ --js \
+ --src-dir \
+ --disable-git \
+ --app \
+ --use-pnpm \
+ --no-eslint \
+ --no-tailwind \
+ --no-turbopack \
+ --no-import-alias
+```
+
+### **bun**
+
+```bash
+npx create-next-app@latest zenroom-react-test \
+ --js \
+ --src-dir \
+ --disable-git \
+ --app \
+ --use-bun \
+ --no-eslint \
+ --no-tailwind \
+ --no-turbopack \
+ --no-import-alias
+```
+
+
+
+Using npm you should now have into `zenroom-react-test` a file structure like this
+
+```bash
+.
+โโโ README.md
+โโโ package.json
+โโโ package-lock.json
+โโโ jsconfig.json
+โโโ next.config.mjs
+โโโ public
+โ โโโ file.svg
+โ โโโ globe.svg
+โ โโโ next.svg
+โ โโโ vercel.svg
+โ โโโ window.svg
+โโโ src
+โ โโโ app
+โ โ โโโ favicon.ico
+โ โ โโโ fonts
+โ โ โ โโโ GeistMonoVF.woff
+โ โ โ โโโ GeistVF.woff
+โ โ โโโ globals.css
+โ โ โโโ layout.js
+โ โ โโโ page.js
+โ โ โโโ page.module.css
+โโโ node_modules
+โ โโโ ...
+```
+
+
+Let's add **zenroom** as a dependency
+
+
+
+### **npm**
+
+```bash
+npm install zenroom
+```
+
+### **yarn**
+
+```bash
+yarn add zenroom
+```
+
+### **pnpm**
+
+```bash
+pnpm add zenroom
+```
+
+### **bun**
+
+```bash
+bun add zenroom
+```
+
+
+
+We are now ready to start with our `hello world` smart contract!
+
+Edit the `next.config.mjs`:
+
+```javascript
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+ webpack: config => {
+ config.resolve.fallback = {
+ fs: false,
+ process: false,
+ path: false,
+ crypto: false
+ };
+ return config;
+ }
+};
+
+export default nextConfig;
+```
+
+Edit the `src/app/page.js` as such:
+
+```javascript
+'use client'
+
+import { useEffect, useState } from 'react';
+import { zencode_exec } from 'zenroom';
+
+
+export default function Home() {
+ const [result, setResult] = useState("");
+
+ useEffect(() => {
+ const exec = async () => {
+ const smartContract = `Given that I have a 'string' named 'hello'
+ Then print all data as 'string'`
+ const data = JSON.stringify({ hello: 'world!' })
+ const conf = 'debug=1'
+ const { result } = await zencode_exec(smartContract, { data, conf });
+ setResult(result)
+ }
+
+ exec()
+ })
+ return (
+ {result}
+ );
+}
+```
+
+build and start the app:
+
+
+
+### **npm**
+
+```bash
+npm run build
+npm start
+```
+
+### **yarn**
+
+```bash
+yarn run build
+yarn start
+```
+
+### **pnpm**
+
+```bash
+pnpm run build
+pnpm start
+```
+
+### **bun**
+
+```bash
+bun run build
+bun start
+```
+
+
+
+You are good to go, open `http://localhost:3000/` and you should see something like:
+
+
+
+
+Hoorayyy!!! You just run a Zencode smart contract in React with no fuss. ๐ฅณ๐ฅณ๐ฅณ And with this now you are able to maybe create your `` or `` components and endless creative and secure possibilities.
+
+
+## ๐ Letโs complicate it a bit! Letโs encrypt!
+
+Now that we saw how the basics works, letโs proceed with some sophistication: letโs encrypt a message with a password/secret with **ECDH (Elliptic-curve DiffieโHellman)** on the elliptic curve SECP256K1 sounds complicated, isnโt it?
+
+Firstl install some other packages:
+
+
+
+### **npm**
+
+```bash
+npm install reactstrap react-json-view --legacy-peer-deps
+```
+
+### **yarn**
+
+```bash
+yarn add reactstrap react-json-view --ignore-peer-deps
+```
+
+### **pnpm**
+
+```bash
+pnpm add reactstrap react-json-view --no-strict-peer-dependencies
+```
+
+### **bun**
+
+```bash
+bun add reactstrap react-json-view
+```
+
+
+
+now edit again the `src/app/page.js` file:
+
+```javascript
+'use client'
+
+import { useEffect, useState } from "react";
+import { zencode_exec } from "zenroom";
+import { Form, FormGroup, Label, Input, Container } from "reactstrap";
+import dynamic from "next/dynamic";
+
+const ReactJson = dynamic(() => import("react-json-view"), { ssr: false });
+
+export default function Home() {
+ const [result, setResult] = useState({});
+ const [message, setMessage] = useState("");
+ const [password, setPassword] = useState("");
+
+ useEffect(() => {
+ const conf = "debug=1";
+ const encrypt = async (message, password) => {
+ if (!message || !password) return;
+ const keys = JSON.stringify({ password });
+ const data = JSON.stringify({ message });
+ const contract = `Scenario 'ecdh': Encrypt a message with a password/secret
+ Given that I have a 'string' named 'password'
+ and that I have a 'string' named 'message'
+ When I encrypt the secret message 'message' with 'password'
+ Then print the 'secret message'`;
+ const { result } = await zencode_exec(contract, { data, keys, conf });
+ setResult(JSON.parse(result));
+ };
+
+ encrypt(message, password);
+ }, [message, password]);
+
+ return (
+
+
+
+
+ );
+}
+```
+
+Et voila ๐คฏ as easy as the hello the world! We added an encryption function, and some component to give some styling. If you run it youโll get something like:
+
+
+
+
+
+
+
+It's embarrassing fast, encryption with password over Elliptic-curve DiffieโHellman on curve SECP256K1 in react! Now hold tight until next week for the part 4โฆ in the meantime clap this post and spread it all over the socials.
+
+One last thing, youโll find the working code project on [Github](https://github.com/dyne/blog-code-samples/tree/master/zencode-javascript-series/part3-react)
diff --git a/docs/pages/zenroom-javascript1b.md b/docs/pages/zenroom-javascript1b.md
index 2dc1fe27c..834f3803c 100755
--- a/docs/pages/zenroom-javascript1b.md
+++ b/docs/pages/zenroom-javascript1b.md
@@ -11,7 +11,7 @@ So first things first, letโs start by where to look for good information about
- [https://dev.zenroom.org](https://dev.zenroom.org) this is the main source of technical documentation
- [https://zenroom.org](https://zenroom.org) here you find more informative documentation and all the products related to the main project
- [https://apiroom.net](https://apiroom.net) a very useful playground to try online your scripts
--
+
## ๐ How a VM could live in a browser?
So basically Zenroom is a virtual machine that is mostly written in C and high-level languages and has no access to I/O and no access to networking, this is the reason that makes it so portable.
@@ -46,14 +46,14 @@ const { zencode_exec } = require('zenroom')
const smartContract = `Given that I have a 'string' named 'hello'
Then print all data as 'string'`
const data = JSON.stringify({ hello: 'world!' })
-const conf = 'memmanager=lw'
+const conf = 'debug=1'
zencode_exec(smartContract, { data, conf }).then(({ result }) => {
console.log(result) // {"hello":"world!"}
})
```
-run it with:
+run it with:
```bash
node index.js
@@ -88,16 +88,16 @@ Now that we saw how the basics works, letโs proceed with some sophistication:
```javascript
const { zencode_exec } = require('zenroom')
-const smartContract = `Scenario 'ecdh': Encrypt a message with a password/secret
- Given that I have a 'string' named 'password'
- and that I have a 'string' named 'message'
- When I encrypt the secret message 'message' with 'password'
+const smartContract = `Scenario 'ecdh': Encrypt a message with a password/secret
+ Given that I have a 'string' named 'password'
+ and that I have a 'string' named 'message'
+ When I encrypt the secret message 'message' with 'password'
Then print the 'secret message'`
const data = JSON.stringify({
message: 'Dear Bob, your name is too short, goodbye - Alice.',
})
const keys = JSON.stringify({ password: 'myVerySecretPassword' })
-const conf = 'memmanager=lw'
+const conf = 'debug=1'
zencode_exec(smartContract, { data, keys, conf }).then(({ result }) => {
console.log(result)
@@ -108,31 +108,31 @@ Et voila ๐คฏ as easy as the hello the worldโฆ if you run it you'll get somethi
```json
{
- "secret_message": {
- "checksum": "507cpFVzIjwFXhvieeXq/A==",
- "header": "QSB2ZXJ5IGltcG9ydGFudCBzZWNyZXQ=",
- "iv": "vd7/4KIb3ubXElbGRRTyM4qTVtROkcacnaOeN5Pa0Vo=",
- "text": "HGsZTlnigSv6zlDpc1bZs40QMWbJxYf9CgjYLEpYI+t62WA6j+bPhfoUxxbnWkYVjX4="
- }
+ "secret_message": {
+ "checksum": "507cpFVzIjwFXhvieeXq/A==",
+ "header": "QSB2ZXJ5IGltcG9ydGFudCBzZWNyZXQ=",
+ "iv": "vd7/4KIb3ubXElbGRRTyM4qTVtROkcacnaOeN5Pa0Vo=",
+ "text": "HGsZTlnigSv6zlDpc1bZs40QMWbJxYf9CgjYLEpYI+t62WA6j+bPhfoUxxbnWkYVjX4="
+ }
}
```
-## ๐ Next step: decryption
+## ๐ Next step: decryption
-But being able to encrypt without having a decrypt function is useless, so let's tidy up a bit and create our own encryption/decryption library with some javascript fun:
+But being able to encrypt without having a decrypt function is useless, so let's tidy up a bit and create our own encryption/decryption library with some javascript fun:
```javascript
const { zencode_exec } = require("zenroom");
-const conf = "memmanager=lw";
+const conf = "debug=1";
const encrypt = async (message, password) => {
const keys = JSON.stringify({ password });
const data = JSON.stringify({ message });
- const contract = `Scenario 'ecdh': Encrypt a message with a password/secret
- Given that I have a 'string' named 'password'
- and that I have a 'string' named 'message'
- When I encrypt the secret message 'message' with 'password'
+ const contract = `Scenario 'ecdh': Encrypt a message with a password/secret
+ Given that I have a 'string' named 'password'
+ and that I have a 'string' named 'message'
+ When I encrypt the secret message 'message' with 'password'
Then print the 'secret message'`;
const { result } = await zencode_exec(contract, { data, keys, conf });
return result;
@@ -141,10 +141,10 @@ const encrypt = async (message, password) => {
const decrypt = async (encryptedMessage, password) => {
const keys = JSON.stringify({ password });
const data = encryptedMessage;
- const contract = `Scenario 'ecdh': Decrypt the message with the password
- Given that I have a valid 'secret message'
- Given that I have a 'string' named 'password'
- When I decrypt the text of 'secret message' with 'password'
+ const contract = `Scenario 'ecdh': Decrypt the message with the password
+ Given that I have a valid 'secret message'
+ Given that I have a 'string' named 'password'
+ When I decrypt the text of 'secret message' with 'password'
Then print the 'text' as 'string'`;
const { result } = await zencode_exec(contract, { data, keys, conf });
const decrypted = JSON.parse(result).text;
@@ -170,4 +170,3 @@ const password = 0xBADA55;
There you go encryption โ decryption with password โ secret over Elliptic-curve DiffieโHellman on curve SECP256K1 in 30 super easy lines of code.
The code used in this article is available on [Github](https://github.com/dyne/blog-code-samples).
-
diff --git a/docs/pages/zenroom-javascript2b.md b/docs/pages/zenroom-javascript2b.md
index b8b64ed08..b7c2917cd 100755
--- a/docs/pages/zenroom-javascript2b.md
+++ b/docs/pages/zenroom-javascript2b.md
@@ -1,6 +1,6 @@
# Make ๐ with Zencode and Javascript: use Zenroom in the browser
-This article is part of a series of tutorials about interacting with Zenroom VM inside the messy world of JavaScript/Typescript.
+This article is part of a series of tutorials about interacting with Zenroom VM inside the messy world of JavaScript/Typescript.
By the end of the article you should be able to launch a new encryption service with Elliptic-curve DiffieโHellman within your browser (Plain JS and HTML).
The code used in this article is available on [Github](https://github.com/dyne/blog-code-samples).
@@ -11,7 +11,7 @@ So you have just experimented how to encrypt and decrypt a message with a passwo
Now say you love simple things and you just need some basic functions inside your HTML page (no npm, no nodejs, no fancy hipster new shiny stuff) with the good ol' Plain JavaScript.
NO PROBLEM. You bet we love it.
-## ๐ป Letโs get our hands dirty: ๐ encryption
+## ๐ป Letโs get our hands dirty: ๐ encryption
Let's create an **index.html** file, the first thing that we want is to import our **zencode_exec** function
@@ -36,18 +36,18 @@ So this is handy and neat, let's move on. Remember the encryption function? Let'
ECDH Encrypt/Decrypt online
@@ -313,6 +329,6 @@ The final result is something like
You can try it by yourself, encrypt a message with a password, then copy/paste the result into the **Encrypted message** field and if you put the same password the message is decrypted and the result is correctly shown.
-What if the password is wrong? Validation is demanded just in the ZenroomVM so I've just added a *catch* to the *zencode_exec* promise (see line 51โ55) that will show the logs in the result element if something goes wrong!
+What if the password is wrong? Validation is demanded just in the ZenroomVM so I've just added a *catch* to the *zencode_exec* promise (see line 51โ71) that will show the logs in the result element if something goes wrong!
-The code used in this article is available on [Github](https://github.com/dyne/blog-code-samples).
\ No newline at end of file
+The code used in this article is available on [Github](https://github.com/dyne/blog-code-samples).
diff --git a/docs/pages/zenroom-javascript3.md b/docs/pages/zenroom-javascript3.md
index 880d90e21..b5d1fbf17 100644
--- a/docs/pages/zenroom-javascript3.md
+++ b/docs/pages/zenroom-javascript3.md
@@ -1,4 +1,4 @@
-# Make โค๏ธ with Zenroom and Javascript (part 3)
+# Make ๐ with Zencode and Javascript: use Zenroom in React
@@ -16,13 +16,12 @@ Letโs start by creating a standard React project with the [CRA](https://reactj
npx create-react-app zenroom-react-test
```
-You should now have into `zencode-encrypt` a file structure like this
-
+Using npm you should now have into `zenroom-react-test` a file structure like this
```bash
.
-โโโ README.md
โโโ package.json
+โโโ package-lock.json
โโโ public
โ โโโ favicon.ico
โ โโโ index.html
@@ -30,7 +29,8 @@ You should now have into `zencode-encrypt` a file structure like this
โ โโโ logo512.png
โ โโโ manifest.json
โ โโโ robots.txt
-โโโ src
+โโโ README.md
+โโโ src
โ โโโ App.css
โ โโโ App.js
โ โโโ App.test.js
@@ -39,34 +39,95 @@ You should now have into `zencode-encrypt` a file structure like this
โ โโโ logo.svg
โ โโโ reportWebVitals.js
โ โโโ setupTests.js
-โโโ yarn.lock
+โโโ node_modules
+โ โโโ ...
```
+Before proceeding the following steps are necessary since `react-scripts`v5 excluded the support
+for some node features and polyfills:
+* Install `react-app-rewired` as a dev dependency
-Let's add **zenroom** as a dependency
+
+
+### **npm**
```bash
-$ yarn add โ dev zenroom
-yarn add v1.22.10
-[1/4] ๐ Resolving packagesโฆ
-[2/4] ๐ Fetching packagesโฆ
-[3/4] ๐ Linking dependenciesโฆ
-[4/4] ๐จ Building fresh packagesโฆ
-success Saved lockfile.
-success Saved 1 new dependency.
-info Direct dependencies
-โโ zenroom@2.2.0-f6d8035
-info All dependencies
-โโ zenroom@2.2.0-f6d8035
-โจ Done in 11.59s.
+npm install --save-dev react-app-rewired
```
+### **yarn**
-We are now ready to start with our `hello world` smart contract!
+```bash
+yarn add --dev react-app-rewired
+```
+
+### **pnpm**
+
+```bash
+pnpm add --save-dev react-app-rewired
+```
+
+### **bun**
+
+```bash
+bun add --dev react-app-rewired
+```
+
+* open the `package.json` and change the `scirpts` section with:
+```json
+{
+ "start": "react-app-rewired start",
+ "build": "react-app-rewired build",
+ "test": "react-app-rewired test",
+ "eject": "react-app-rewired eject"
+}
+```
+* create the `config-overrides.js` file and write in it:
+```js
+module.exports = function override(config) {
+ config.resolve.fallback = {
+ fs: false,
+ path: false,
+ crypto: false,
+ process: false,
+ };
+ return config;
+};
+```
-Edit the `App.js` as such:
+We are almost there! Now let's add **zenroom** as a dependency
+
+
+
+### **npm**
+
+```bash
+npm install zenroom
+```
+
+### **yarn**
+
+```bash
+yarn add zenroom
+```
+
+### **pnpm**
+
+```bash
+pnpm add zenroom
+```
+
+### **bun**
+
+```bash
+bun add zenroom
+```
+
+
+We are now ready to start with our `hello world` smart contract!
+Edit the `src/App.js` as such:
```javascript
import {useEffect, useState} from 'react'
@@ -97,14 +158,37 @@ function App() {
export default App;
```
-and now if you run the server with
+and start the app:
+
+
+
+### **npm**
+
+```bash
+npm start
+```
+
+### **yarn**
```bash
yarn start
```
+### **pnpm**
-You are good to go, open `http://localhost:3000/` and you should see something like:
+```bash
+pnpm start
+```
+
+### **bun**
+
+```bash
+bun start
+```
+
+
+
+You are good to go, open `http://localhost:3000/` and you should see something like:
@@ -116,14 +200,43 @@ Hoorayyy!!! You just run a Zencode smart contract in React with no fuss. ๐ฅณ
Now that we saw how the basics works, letโs proceed with some sophistication: letโs encrypt a message with a password/secret with **ECDH (Elliptic-curve DiffieโHellman)** on the elliptic curve SECP256K1 sounds complicated, isnโt it?
+Firstl install some other packages:
+
+
+### **npm**
+
+```bash
+npm install reactstrap @microlink/react-json-view
+```
+### **yarn**
+
+```bash
+yarn add reactstrap @microlink/react-json-view
+```
+
+### **pnpm**
+
+```bash
+pnpm add reactstrap @microlink/react-json-view
+```
+
+### **bun**
+
+```bash
+bun add reactstrap @microlink/react-json-view
+```
+
+
+
+now edit again the `src/App.js` file:
```javascript
import { useEffect, useState } from "react";
import { zencode_exec } from "zenroom";
import { Form, FormGroup, Label, Input, Container } from "reactstrap";
-import ReactJson from "react-json-view";
+import ReactJson from "@microlink/react-json-view";
function App() {
const [result, setResult] = useState({});
@@ -131,15 +244,15 @@ function App() {
const [password, setPassword] = useState("");
useEffect(() => {
- const conf = "memmanager=lw";
+ const conf = "debug=1";
const encrypt = async (message, password) => {
if (!message || !password) return;
const keys = JSON.stringify({ password });
const data = JSON.stringify({ message });
- const contract = `Scenario 'ecdh': Encrypt a message with a password/secret
- Given that I have a 'string' named 'password'
- and that I have a 'string' named 'message'
- When I encrypt the secret message 'message' with 'password'
+ const contract = `Scenario 'ecdh': Encrypt a message with a password/secret
+ Given that I have a 'string' named 'password'
+ and that I have a 'string' named 'message'
+ When I encrypt the secret message 'message' with 'password'
Then print the 'secret message'`;
const { result } = await zencode_exec(contract, { data, keys, conf });
setResult(JSON.parse(result));
@@ -177,7 +290,6 @@ function App() {
);
}
-
export default App;
```
@@ -189,10 +301,6 @@ Et voila ๐คฏ as easy as the hello the world! We added an encryption function, a
-It's embarrassing fast, encryption with password over Elliptic-curve DiffieโHellman on curve SECP256K1 in react! Now hold tight until next week for the part 4โฆ in the meantime clap this post and spread it all over the socials.
+It's embarrassing fast, encryption with password over Elliptic-curve DiffieโHellman on curve SECP256K1 in react! Now hold tight until next week for the part 4โฆ in the meantime clap this post and spread it all over the socials.
One last thing, youโll find the working code project on [Github](https://github.com/dyne/blog-code-samples/tree/master/zencode-javascript-series/part3-react)
-
-
-
-