chore(js-client): Update and restructure examples [fixes DXJ-454] (#464)

* Update examples

* Update js-client examples

* Add cli to example

* Fixes

* Update js-client

* Update js-client version in js-client examples

* PR fixes

* Remove marine-js

* Update locks

* Fix aqua

* Remove unused import

* Adjust import

* Change code comment

* Update example structures

* Fix quickstart examples

* Add aqua command to README

* Add marine example

* Fix image links

* Fixes

* Misc fixes

Author: Akim

.github/workflows/js-projects.yml

@@ -26,7 +26,7 @@ jobs:
         with:
           files: |
             quickstart/1-browser-to-browser
-            quickstart/3-browser-to-service
+            quickstart/2-browser-parallel-computation
             js-client-examples/hello-world
             js-client-examples/browser-example
             js-client-examples/node-example

js-client-examples/browser-example/.fluence/schemas/fluence.json

@@ -2,18 +2,26 @@
 
 This sample project demonstrates how fluence network can be accessed from the browser. As an example it retrieves the timestamp of the current time from the relay node. The project is based on an create-react-app template with slight modifications to integrate Fluence. The primary focus is the integration itself, i.e React could be swapped with a framework of your choice.
 
+> To run this example you need `@latest` version of Fluence CLI. You can find installation guide [here](https://github.com/fluencelabs/cli).
+
 ## Getting started
 
+Go to `src/frontend` folder:
+
+```bash
+cd ./src/frontend
+```
+
 Install dependencies:
 
 ```bash
 npm i
 ```
 
-Run aqua compiler in watch mode:
+Run aqua compiler:
 
 ```bash
-npm run watch-aqua
+fluence aqua
 ```
 
 Start the application

js-client-examples/browser-example/README.md

@@ -0,0 +1,13 @@
+# yaml-language-server: $schema=.fluence/schemas/fluence.json
+
+# Defines Fluence Project, most importantly - what exactly you want to deploy and how. You can use `fluence init` command to generate a template for new Fluence project
+
+# Documentation: https://github.com/fluencelabs/cli/tree/main/docs/configs/fluence.md
+
+version: 5
+
+aquaInputPath: src/aqua
+
+relaysPath: src/frontend/src
+
+aquaOutputTSPath: src/frontend/src/compiled-aqua

js-client-examples/browser-example/fluence.yaml

@@ -24,7 +24,7 @@ yarn-error.log*
 
 # fluence
 
-src/_aqua/*
+src/compiled-aqua/*
 
 public/*.wasm
 public/runnerScript.*

js-client-examples/browser-example/aqua/getting-started.aqua renamed to js-client-examples/browser-example/src/aqua/getting-started.aqua

@@ -3,8 +3,7 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@fluencelabs/js-client.api": "0.13.1",
-        "@fluencelabs/fluence-network-environment": "1.1.2",
+        "@fluencelabs/js-client": "^0.5.4",
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^11.2.7",
         "@testing-library/user-event": "^12.8.3",
@@ -20,15 +19,11 @@
         "web-vitals": "^1.1.2"
     },
     "scripts": {
-        "prestart": "npm run compile-aqua",
-        "prebuild": "npm run compile-aqua",
         "start": "react-scripts start",
         "build": "react-scripts build",
         "test": "jest --config=jest.config.js",
         "_test": "react-scripts test",
-        "eject": "react-scripts eject",
-        "compile-aqua": "fluence aqua -i ./aqua/ -o ./src/_aqua",
-        "watch-aqua": "fluence aqua -w -i ./aqua/ -o ./src/_aqua"
+        "eject": "react-scripts eject"
     },
     "eslintConfig": {
         "extends": [
@@ -51,8 +46,6 @@
         ]
     },
     "devDependencies": {
-        "@fluencelabs/cli": "0.9.1",
-        "@fluencelabs/aqua-lib": "0.7.7",
         "@types/jest-environment-puppeteer": "^4.4.1",
         "@types/puppeteer": "^5.4.4",
         "jest-puppeteer": "^6.0.2",

js-client-examples/browser-example/.gitignore renamed to js-client-examples/browser-example/src/frontend/.gitignore

@@ -1,29 +1,28 @@
 import React, { useEffect, useState } from 'react';
 import logo from './logo.svg';
 import './App.scss';
+import relays from './relays.json';
 
-import { Fluence } from '@fluencelabs/js-client.api';
-import type { ConnectionState } from '@fluencelabs/js-client.api';
-import { krasnodar } from '@fluencelabs/fluence-network-environment';
-import { getRelayTime } from './_aqua/getting-started';
+import { Fluence, type ConnectionState } from '@fluencelabs/js-client';
+import { getRelayTime } from './compiled-aqua/getting-started';
 
-const relayNode = krasnodar[0];
+const relayNode = relays[0];
 
 function App() {
     const [connectionState, setConnectionState] = useState<ConnectionState>('disconnected');
     const [relayTime, setRelayTime] = useState<Date | null>(null);
 
     useEffect(() => {
-        Fluence.onConnectionStateChange((state) => {
-            setConnectionState(state);
+        setConnectionState('connecting');
+        Fluence.connect(relays[0]).then(() => {
+            setConnectionState('connected');
         });
     }, []);
 
     const onGetRelayTimeBtnClick = async () => {
         if (connectionState !== 'connected') {
             return;
         }
-
         const time = await getRelayTime(relayNode.peerId);
         setRelayTime(new Date(time));
     };

js-client-examples/browser-example/.prettierrc.js renamed to js-client-examples/browser-example/src/frontend/.prettierrc.js

@@ -3,13 +3,6 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 
-import { Fluence } from '@fluencelabs/js-client.api';
-import { randomKras } from '@fluencelabs/fluence-network-environment';
-
-const relayNode = randomKras();
-
-Fluence.connect(relayNode);
-
 ReactDOM.render(
     <React.StrictMode>
         <App />

js-client-examples/browser-example/jest.config.js renamed to js-client-examples/browser-example/src/frontend/jest.config.js

@@ -0,0 +1,46 @@
+[
+  {
+    "multiaddr": "/dns4/0-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWSD5PToNiLQwKDXsu8JSysCwUt8BVUJEqCHcDe7P5h45e",
+    "peerId": "12D3KooWSD5PToNiLQwKDXsu8JSysCwUt8BVUJEqCHcDe7P5h45e"
+  },
+  {
+    "multiaddr": "/dns4/1-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWR4cv1a8tv7pps4HH6wePNaK6gf1Hww5wcCMzeWxyNw51",
+    "peerId": "12D3KooWR4cv1a8tv7pps4HH6wePNaK6gf1Hww5wcCMzeWxyNw51"
+  },
+  {
+    "multiaddr": "/dns4/2-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWKnEqMfYo9zvfHmqTLpLdiHXPe4SVqUWcWHDJdFGrSmcA",
+    "peerId": "12D3KooWKnEqMfYo9zvfHmqTLpLdiHXPe4SVqUWcWHDJdFGrSmcA"
+  },
+  {
+    "multiaddr": "/dns4/3-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWHLxVhUQyAuZe6AHMB29P7wkvTNMn7eDMcsqimJYLKREf",
+    "peerId": "12D3KooWHLxVhUQyAuZe6AHMB29P7wkvTNMn7eDMcsqimJYLKREf"
+  },
+  {
+    "multiaddr": "/dns4/4-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWJd3HaMJ1rpLY1kQvcjRPEvnDwcXrH8mJvk7ypcZXqXGE",
+    "peerId": "12D3KooWJd3HaMJ1rpLY1kQvcjRPEvnDwcXrH8mJvk7ypcZXqXGE"
+  },
+  {
+    "multiaddr": "/dns4/5-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWFEwNWcHqi9rtsmDhsYcDbRUCDXH84RC4FW6UfsFWaoHi",
+    "peerId": "12D3KooWFEwNWcHqi9rtsmDhsYcDbRUCDXH84RC4FW6UfsFWaoHi"
+  },
+  {
+    "multiaddr": "/dns4/6-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWCMr9mU894i8JXAFqpgoFtx6qnV1LFPSfVc3Y34N4h4LS",
+    "peerId": "12D3KooWCMr9mU894i8JXAFqpgoFtx6qnV1LFPSfVc3Y34N4h4LS"
+  },
+  {
+    "multiaddr": "/dns4/7-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWDUszU2NeWyUVjCXhGEt1MoZrhvdmaQQwtZUriuGN1jTr",
+    "peerId": "12D3KooWDUszU2NeWyUVjCXhGEt1MoZrhvdmaQQwtZUriuGN1jTr"
+  },
+  {
+    "multiaddr": "/dns4/8-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWEFFCZnar1cUJQ3rMWjvPQg6yMV2aXWs2DkJNSRbduBWn",
+    "peerId": "12D3KooWEFFCZnar1cUJQ3rMWjvPQg6yMV2aXWs2DkJNSRbduBWn"
+  },
+  {
+    "multiaddr": "/dns4/9-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWFtf3rfCDAfWwt6oLZYZbDfn9Vn7bv7g6QjjQxUUEFVBt",
+    "peerId": "12D3KooWFtf3rfCDAfWwt6oLZYZbDfn9Vn7bv7g6QjjQxUUEFVBt"
+  },
+  {
+    "multiaddr": "/dns4/10-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWD7CvsYcpF9HE9CCV9aY3SJ317tkXVykjtZnht2EbzDPm",
+    "peerId": "12D3KooWD7CvsYcpF9HE9CCV9aY3SJ317tkXVykjtZnht2EbzDPm"
+  }
+]