Web ui for price oracle (#12)

* Web ui for price oracle * fix gitignored svg logo
2024-12-11 06:10:18 +00:00 · 2021-07-20 01:36:54 +03:00 · 2021-07-20 01:36:54 +03:00 · f815a4764a
commit f815a4764a
parent f2389cc2f7
19 changed files with 20428 additions and 1 deletions
--- a/.gitignore
+++ b/.gitignore
@ -11,4 +11,4 @@ Cargo.lock
 /artifacts
 keypair.json
 *.wasm
-logo.svg
+
--- a/aqua-examples/price-oracle/web/.gitignore
+++ b/aqua-examples/price-oracle/web/.gitignore
@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/aqua-examples/price-oracle/web/README.md
+++ b/aqua-examples/price-oracle/web/README.md
@ -0,0 +1,20 @@
+# Price oracle
+
+Web interface for the price oracle applicaion
+
+## Getting started
+
+Run aqua compiler in watch mode:
+
+```bash
+npm run watch-aqua
+```
+
+Start the application
+
+```bash
+npm i
+npm start
+```
+
+The browser window with `localhost:3000` should open
--- a/aqua-examples/price-oracle/web/package-lock.json
+++ b/aqua-examples/price-oracle/web/package-lock.json
--- a/aqua-examples/price-oracle/web/package.json
+++ b/aqua-examples/price-oracle/web/package.json
@ -0,0 +1,52 @@
+{
+  "name": "price-oracle",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@fluencelabs/fluence": "0.9.53",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
+    "@types/jest": "^26.0.24",
+    "@types/node": "^12.20.16",
+    "@types/react": "^17.0.14",
+    "@types/react-dom": "^17.0.9",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "typescript": "^4.3.5",
+    "web-vitals": "^1.1.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "compile-aqua": "aqua-cli -i ../aqua-scripts/ -o ./src/_aqua",
+    "watch-aqua": "chokidar \"../aqua-scripts/**/*.aqua\" -c \"npm run compile-aqua\""
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@fluencelabs/aqua-cli": "0.1.9-162",
+    "@fluencelabs/fluence-network-environment": "^1.0.10",
+    "chokidar-cli": "^2.1.0",
+    "node-sass": "^6.0.1"
+  }
+}
--- a/aqua-examples/price-oracle/web/public/favicon.ico
+++ b/aqua-examples/price-oracle/web/public/favicon.ico
--- a/aqua-examples/price-oracle/web/public/index.html
+++ b/aqua-examples/price-oracle/web/public/index.html
@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Fluence price oracle</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
--- a/aqua-examples/price-oracle/web/public/logo192.png
+++ b/aqua-examples/price-oracle/web/public/logo192.png
--- a/aqua-examples/price-oracle/web/public/logo512.png
+++ b/aqua-examples/price-oracle/web/public/logo512.png
--- a/aqua-examples/price-oracle/web/public/manifest.json
+++ b/aqua-examples/price-oracle/web/public/manifest.json
@ -0,0 +1,25 @@
+{
+  "short_name": "Price oracle",
+  "name": "Fluence price oracle",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/aqua-examples/price-oracle/web/public/robots.txt
+++ b/aqua-examples/price-oracle/web/public/robots.txt
@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/aqua-examples/price-oracle/web/src/App.scss
+++ b/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;
+}
--- a/aqua-examples/price-oracle/web/src/App.tsx
+++ b/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;
--- a/aqua-examples/price-oracle/web/src/_aqua/get_crypto_prices.ts
+++ b/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;
+}
+      
--- a/aqua-examples/price-oracle/web/src/index.css
+++ b/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;
+}
--- a/aqua-examples/price-oracle/web/src/index.tsx
+++ b/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")
+);
--- a/aqua-examples/price-oracle/web/src/logo.svg
+++ b/aqua-examples/price-oracle/web/src/logo.svg
--- a/aqua-examples/price-oracle/web/src/react-app-env.d.ts
+++ b/aqua-examples/price-oracle/web/src/react-app-env.d.ts
@ -0,0 +1 @@
+/// <reference types="react-scripts" />
--- a/aqua-examples/price-oracle/web/tsconfig.json
+++ b/aqua-examples/price-oracle/web/tsconfig.json
@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}