Web ui for price oracle (#12)

* Web ui for price oracle

* fix gitignored svg logo

aqua-examples/price-oracle/web/src/App.scss

@@ -0,0 +1,134 @@
+$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;
+}
+
+ul,
+li {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.p {
+  width: 550px;
+}
+
+.btn-clipboard {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    color: $accent-color;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.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;
+  }
+}
+
+.btn-hello {
+  width: 200px;
+  display: inline;
+  float: right;
+}
+
+table {
+  text-align: right;
+}
+
+.label {
+  width: 70px;
+  display: inline-block;
+}
+
+.input {
+  width: 500px;
+  height: 26px;
+  box-sizing: border-box;
+
+  margin: 5px;
+  border: 1px solid;
+  border-color: $color2;
+
+  color: $color1;
+
+  &::placeholder {
+    color: $color2;
+  }
+
+  &:hover,
+  &:focus {
+    outline: 1px solid white;
+    border-color: $accent-color;
+  }
+}
+
+.success {
+  color: rgb(0, 134, 0);
+}
+
+.error {
+  color: red;
+}

aqua-examples/price-oracle/web/src/App.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from "react";
+import logo from "./logo.svg";
+import "./App.scss";
+
+import { createClient, FluenceClient } from "@fluencelabs/fluence";
+import { krasnodar } from "@fluencelabs/fluence-network-environment";
+import { get_price } from "./_aqua/get_crypto_prices";
+
+const relayNode = krasnodar[0];
+
+type Unpromise<T extends Promise<any>> = T extends Promise<infer U> ? U : never;
+
+type Result = Unpromise<ReturnType<typeof get_price>>;
+
+const TextInput = (props: {
+  text: string;
+  value: string;
+  setValue: React.Dispatch<React.SetStateAction<string>>;
+}) => {
+  return (
+    <div className="row">
+      <label className="label bold">{props.text}</label>
+      <input
+        className="input"
+        type="text"
+        onChange={(e) => props.setValue(e.target.value)}
+        value={props.value}
+        required={true}
+      />
+    </div>
+  );
+};
+
+function App() {
+  const [client, setClient] = useState<FluenceClient | null>(null);
+  const [coin, setCoin] = useState<string>("dogecoin");
+  const [currency, setCurrency] = useState<string>("usd");
+  const [node, setNode] = useState<string>(
+    "12D3KooWCMr9mU894i8JXAFqpgoFtx6qnV1LFPSfVc3Y34N4h4LS"
+  );
+  const [pgSid, setPgSid] = useState<string>(
+    "c315073d-4311-4db3-be57-8f154f032d28"
+  );
+  const [meanSid, setMeanSid] = useState<string>(
+    "dd47389f-25d9-4870-a2a9-909359e73580"
+  );
+  const [result, setResult] = useState<Result | null>(null);
+
+  useEffect(() => {
+    createClient(relayNode.multiaddr)
+      .then(setClient)
+      .catch((err) => console.log("Client initialization failed", err));
+  }, [client]);
+
+  const isConnected = client !== null;
+
+  const doGetPrice = async () => {
+    if (client === null) {
+      return;
+    }
+    try {
+      const res = await get_price(
+        client!,
+        coin,
+        currency,
+        node,
+        pgSid,
+        meanSid
+      );
+      console.log("Retrieved result: ", res);
+      setResult(res);
+    } catch (err) {
+      setResult({ error_msg: err.toString(), success: false, result: 0 });
+    }
+  };
+
+  return (
+    <div className="App">
+      <header>
+        <img src={logo} className="logo" alt="logo" />
+      </header>
+
+      <div className="content">
+        <h1>Status: {isConnected ? "Connected" : "Disconnected"}</h1>
+        <p>Simple app to get eth-based coin price</p>
+        <div>
+          <h2>Get coin price</h2>
+          <TextInput text={"coin"} value={coin} setValue={setCoin} />
+          <TextInput
+            text={"currency"}
+            value={currency}
+            setValue={setCurrency}
+          />
+          <TextInput text={"node"} value={node} setValue={setNode} />
+          <TextInput text={"pgSid"} value={pgSid} setValue={setPgSid} />
+          <TextInput text={"meanSid"} value={meanSid} setValue={setMeanSid} />
+
+          <div className="row">
+            <button className="btn btn-hello" onClick={() => doGetPrice()}>
+              Get price
+            </button>
+          </div>
+        </div>
+        <h2>Coin price</h2>
+        {result && result.success && (
+          <p className="success">The price is: {result.result}</p>
+        )}
+        {result && !result.success && (
+          <p className="error">Error: {result.error_msg}</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default App;

aqua-examples/price-oracle/web/src/_aqua/get_crypto_prices.ts

@@ -0,0 +1,118 @@
+/**
+ *
+ * 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.1.9-162
+ *
+ */
+import { FluenceClient, PeerIdB58 } from '@fluencelabs/fluence';
+import { RequestFlowBuilder } from '@fluencelabs/fluence/dist/api.unstable';
+import { RequestFlow } from '@fluencelabs/fluence/dist/internal/RequestFlow';
+
+
+
+export async function get_price(client: FluenceClient, coin: string, currency: string, node: string, pg_sid: string, mean_sid: string, config?: {ttl?: number}): Promise<{error_msg:string;result:number;success:boolean}> {
+    let request: RequestFlow;
+    const promise = new Promise<{error_msg:string;result:number;success:boolean}>((resolve, reject) => {
+        const r = new RequestFlowBuilder()
+            .disableInjections()
+            .withRawScript(
+                `
+(xor
+ (seq
+  (seq
+   (seq
+    (seq
+     (seq
+      (seq
+       (seq
+        (seq
+         (seq
+          (call %init_peer_id% ("getDataSrv" "-relay-") [] -relay-)
+          (call %init_peer_id% ("getDataSrv" "coin") [] coin)
+         )
+         (call %init_peer_id% ("getDataSrv" "currency") [] currency)
+        )
+        (call %init_peer_id% ("getDataSrv" "node") [] node)
+       )
+       (call %init_peer_id% ("getDataSrv" "pg_sid") [] pg_sid)
+      )
+      (call %init_peer_id% ("getDataSrv" "mean_sid") [] mean_sid)
+     )
+     (call -relay- ("op" "noop") [])
+    )
+    (xor
+     (seq
+      (seq
+       (seq
+        (seq
+         (seq
+          (seq
+           (seq
+            (call node ("op" "string_to_b58") [node] k)
+            (call node ("peer" "timestamp_ms") [] ts_ms0)
+           )
+           (call node (pg_sid "price_getter") [coin currency ts_ms0] res0)
+          )
+          (call node ("op" "identity") [res0.$.result!] $prices)
+         )
+         (call node ("peer" "timestamp_ms") [] ts_ms1)
+        )
+        (call node (pg_sid "price_getter") [coin currency ts_ms1] res1)
+       )
+       (call node ("op" "identity") [res1.$.result!] $prices)
+      )
+      (call node (mean_sid "mean") [$prices] result)
+     )
+     (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") [result])
+   (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 client.relayPeerId!;
+                });
+                h.on('getDataSrv', 'coin', () => {return coin;});
+h.on('getDataSrv', 'currency', () => {return currency;});
+h.on('getDataSrv', 'node', () => {return node;});
+h.on('getDataSrv', 'pg_sid', () => {return pg_sid;});
+h.on('getDataSrv', 'mean_sid', () => {return mean_sid;});
+                h.onEvent('callbackSrv', 'response', (args) => {
+  const [res] = args;
+  resolve(res);
+});
+
+                h.onEvent('errorHandlingSrv', 'error', (args) => {
+                    // assuming error is the single argument
+                    const [err] = args;
+                    reject(err);
+                });
+            })
+            .handleScriptError(reject)
+            .handleTimeout(() => {
+                reject('Request timed out for get_price');
+            })
+        if(config?.ttl) {
+            r.withTTL(config.ttl)
+        }
+        request = r.build();
+    });
+    await client.initiateFlow(request!);
+    return promise;
+}
+      

aqua-examples/price-oracle/web/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;
+}

aqua-examples/price-oracle/web/src/index.tsx

@@ -0,0 +1,11 @@
+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")
+);

aqua-examples/price-oracle/web/src/react-app-env.d.ts

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