feat!: Replace old fluence-js with JS Client (#425)

js-client-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-client-examples/browser-example/src/App.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+import logo from './logo.svg';
+import './App.scss';
+
+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';
+
+const relayNode = krasnodar[0];
+
+function App() {
+    const [connectionState, setConnectionState] = useState<ConnectionState>('disconnected');
+    const [relayTime, setRelayTime] = useState<Date | null>(null);
+
+    useEffect(() => {
+        Fluence.onConnectionStateChange((state) => {
+            setConnectionState(state);
+        });
+    }, []);
+
+    const onGetRelayTimeBtnClick = async () => {
+        if (connectionState !== 'connected') {
+            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>
+                    Connection state: <span id="status">{connectionState}</span>
+                </h1>
+                <button
+                    id="btn"
+                    className="btn"
+                    onClick={onGetRelayTimeBtnClick}
+                    disabled={connectionState !== 'connected'}
+                >
+                    Get relay time
+                </button>
+                {relayTime && (
+                    <>
+                        <h2>Relay time:</h2>
+                        <div id="relayTime">{relayTime?.toLocaleString() || ''}</div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default App;

js-client-examples/browser-example/src/__test__/test.spec.ts

@@ -0,0 +1,52 @@
+import handler from 'serve-handler';
+import http from 'http';
+import path from 'path';
+
+const port = 3000;
+const uri = `http://localhost:${port}/`;
+const publicPath = path.join(__dirname, '../../build/');
+
+console.log(publicPath);
+
+const server = http.createServer((request, response) => {
+    return handler(request, response, {
+        public: publicPath,
+    });
+});
+
+const startServer = async () => {
+    return new Promise((resolve: any) => {
+        server.listen(port, resolve);
+    });
+};
+
+const stopServer = async () => {
+    return new Promise((resolve: any) => {
+        server.close(resolve);
+    });
+};
+
+describe('smoke test', () => {
+    beforeAll(startServer);
+
+    afterAll(stopServer);
+
+    it('should work', async () => {
+        console.log('going to the page in browser...');
+        await page.goto(uri);
+
+        console.log('waiting for fluence to connect...');
+        await page.waitForTimeout(2000);
+
+        console.log('clicking button...');
+        await page.click('#btn');
+
+        console.log('waiting for relay time to appear...');
+        const elem = await page.waitForSelector('#relayTime');
+
+        console.log('getting the content of relay time div...');
+        const content = await elem?.evaluate((x) => x.textContent);
+
+        expect(content?.length).toBeGreaterThan(10);
+    }, 15000);
+});

js-client-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-client-examples/browser-example/src/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+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 />
+    </React.StrictMode>,
+    document.getElementById('root'),
+);

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

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