Update all js-related examples to the latest version of JS SDK and Aqua compiler (#20)

js-sdk-examples/browser-example/src/App.scss

@@ -0,0 +1,63 @@
+$color1: black;
+$color2: rgb(214, 214, 214);
+$accent-color: rgb(225, 30, 90);
+
+.logo {
+  height: 15vmin;
+  pointer-events: none;
+}
+
+.mono {
+  font-family: monospace, monospace;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+header {
+  margin-top: 10vmin;
+}
+
+header,
+h1,
+h2,
+h3 {
+  text-align: center;
+}
+
+.content {
+  width: 800px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.btn {
+  height: 26px;
+  border: 1px solid;
+  border-color: $color2;
+
+  background-color: transparent;
+
+  margin: 5px;
+
+  font-size: 16px;
+
+  color: $color1;
+
+  &::placeholder {
+    color: $color2;
+  }
+
+  &:hover,
+  &:focus {
+    outline: 1px solid white;
+    border-color: $accent-color;
+    color: $accent-color;
+  }
+}

js-sdk-examples/browser-example/src/App.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from "react";
+import logo from "./logo.svg";
+import "./App.scss";
+
+import { Fluence } from "@fluencelabs/fluence";
+import { krasnodar } from "@fluencelabs/fluence-network-environment";
+import { getRelayTime } from "./_aqua/getting-started";
+
+const relayNode = krasnodar[0];
+
+function App() {
+  const [relayTime, setRelayTime] = useState<Date | null>(null);
+
+
+  useEffect(() => {
+    Fluence.start({ connectTo: relayNode })
+      .catch((err) => console.log("Client initialization failed", err));
+  }, []);
+
+  const onGetRelayTimeBtnClick = async () => {
+    if (!Fluence.getStatus().isConnected) {
+      return;
+    }
+
+    const time = await getRelayTime(relayNode.peerId);
+    setRelayTime(new Date(time));
+  };
+
+
+  return (
+    <div className="App">
+      <header>
+        <img src={logo} className="logo" alt="logo" />
+      </header>
+
+      <div className="content">
+        <h1>Status: {Fluence.getStatus().isConnected ? "Connected" : "Disconnected"}</h1>
+        <button className="btn" onClick={onGetRelayTimeBtnClick}>
+          Get relay time
+        </button>
+        {relayTime && (
+          <>
+            <h2>Relay time:</h2>
+            <div>{relayTime?.toLocaleString() || ""}</div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default App;

js-sdk-examples/browser-example/src/_aqua/getting-started.ts

@@ -0,0 +1,103 @@
+/**
+ *
+ * This file is auto-generated. Do not edit manually: changes may be erased.
+ * Generated by Aqua compiler: https://github.com/fluencelabs/aqua/. 
+ * If you find any bugs, please write an issue on GitHub: https://github.com/fluencelabs/aqua/issues
+ * Aqua version: 0.3.0-226
+ *
+ */
+import { Fluence, FluencePeer } from '@fluencelabs/fluence';
+import {
+    ResultCodes,
+    RequestFlow,
+    RequestFlowBuilder,
+    CallParams,
+} from '@fluencelabs/fluence/dist/internal/compilerSupport/v1';
+
+
+// Services
+
+
+// Functions
+
+ export function getRelayTime(relayPeerId: string, config?: {ttl?: number}) : Promise<number>;
+ export function getRelayTime(peer: FluencePeer, relayPeerId: string, config?: {ttl?: number}) : Promise<number>;
+ export function getRelayTime(...args: any) {
+     let peer: FluencePeer;
+     let relayPeerId: any;
+     let config: any;
+     if (FluencePeer.isInstance(args[0])) {
+         peer = args[0];
+         relayPeerId = args[1];
+config = args[2];
+     } else {
+         peer = Fluence.getPeer();
+         relayPeerId = args[0];
+config = args[1];
+     }
+    
+     let request: RequestFlow;
+     const promise = new Promise<number>((resolve, reject) => {
+         const r = new RequestFlowBuilder()
+                 .disableInjections()
+                 .withRawScript(
+                     `
+     (xor
+ (seq
+  (seq
+   (seq
+    (seq
+     (seq
+      (call %init_peer_id% ("getDataSrv" "-relay-") [] -relay-)
+      (call %init_peer_id% ("getDataSrv" "relayPeerId") [] relayPeerId)
+     )
+     (call -relay- ("op" "noop") [])
+    )
+    (xor
+     (call relayPeerId ("peer" "timestamp_ms") [] ts)
+     (seq
+      (call -relay- ("op" "noop") [])
+      (call %init_peer_id% ("errorHandlingSrv" "error") [%last_error% 1])
+     )
+    )
+   )
+   (call -relay- ("op" "noop") [])
+  )
+  (xor
+   (call %init_peer_id% ("callbackSrv" "response") [ts])
+   (call %init_peer_id% ("errorHandlingSrv" "error") [%last_error% 2])
+  )
+ )
+ (call %init_peer_id% ("errorHandlingSrv" "error") [%last_error% 3])
+)
+
+                 `,
+                 )
+                 .configHandler((h) => {
+                     h.on('getDataSrv', '-relay-', () => {
+                    return peer.getStatus().relayPeerId;
+                });
+                h.on('getDataSrv', 'relayPeerId', () => {return relayPeerId;});
+                h.onEvent('callbackSrv', 'response', (args) => {
+    const [res] = args;
+  resolve(res);
+});
+
+                h.onEvent('errorHandlingSrv', 'error', (args) => {
+                    const [err] = args;
+                    reject(err);
+                });
+            })
+            .handleScriptError(reject)
+            .handleTimeout(() => {
+                reject('Request timed out for getRelayTime');
+            })
+        if(config && config.ttl) {
+            r.withTTL(config.ttl)
+        }
+        request = r.build();
+    });
+    peer.internals.initiateFlow(request!);
+    return promise;
+}
+      

js-sdk-examples/browser-example/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

js-sdk-examples/browser-example/src/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+

js-sdk-examples/browser-example/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />