fluencelabs/examples
1
0
Fork 0
mirror of https://github.com/fluencelabs/examples synced 2024-12-11 06:10:18 +00:00
Code Issues Projects Releases Wiki Activity

Web ui for price oracle (#12)

Browse Source 
* Web ui for price oracle

* fix gitignored svg logo
This commit is contained in:
Pavel 2021-07-20 01:36:54 +03:00 committed by GitHub
parent f2389cc2f7
commit f815a4764a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 20428 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -11,4 +11,4 @@ Cargo.lock
/artifacts /artifacts
keypair.json keypair.json
*.wasm *.wasm
logo.svg

23
aqua-examples/price-oracle/web/.gitignore vendored Normal file
View File

@ -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*

20
aqua-examples/price-oracle/web/README.md Normal file
View File

@ -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

19829
aqua-examples/price-oracle/web/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

52
aqua-examples/price-oracle/web/package.json Normal file
View File

@ -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"
}
}

BIN
aqua-examples/price-oracle/web/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

39
aqua-examples/price-oracle/web/public/index.html Normal file
View File

@ -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>

BIN
aqua-examples/price-oracle/web/public/logo192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
aqua-examples/price-oracle/web/public/logo512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

25
aqua-examples/price-oracle/web/public/manifest.json Normal file
View File

@ -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"
}

3
aqua-examples/price-oracle/web/public/robots.txt Normal file
View File

@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

134
aqua-examples/price-oracle/web/src/App.scss Normal file
View File

@ -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;
}

116
aqua-examples/price-oracle/web/src/App.tsx Normal file
View File

@ -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;

118
aqua-examples/price-oracle/web/src/_aqua/get_crypto_prices.ts Normal file
View File

@ -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;
}

13
aqua-examples/price-oracle/web/src/index.css Normal file
View File

@ -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;
}

11
aqua-examples/price-oracle/web/src/index.tsx Normal file
View File

@ -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")
);

17
aqua-examples/price-oracle/web/src/logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

1
aqua-examples/price-oracle/web/src/react-app-env.d.ts vendored Normal file
View File

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

26
aqua-examples/price-oracle/web/tsconfig.json Normal file
View File

@ -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"
]
}