mirror of
https://github.com/fluencelabs/examples
synced 2025-04-25 10:42:16 +00:00
merge curl_template
This commit is contained in:
commit
da0b83d3dd
1
.gitignore
vendored
1
.gitignore
vendored
@ -5,3 +5,4 @@
|
|||||||
**/**.bk
|
**/**.bk
|
||||||
/artifacts
|
/artifacts
|
||||||
keypair.json
|
keypair.json
|
||||||
|
|
||||||
|
6
curl_template/.gitignore
vendored
Normal file
6
curl_template/.gitignore
vendored
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
target
|
||||||
|
node_modules
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
.vscode
|
||||||
|
.repl_history
|
40
curl_template/README.md
Normal file
40
curl_template/README.md
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
# Download & return URL via curl
|
||||||
|
|
||||||
|
An example repo to kick-off building services on Fluence.
|
||||||
|
|
||||||
|
What it does:
|
||||||
|
- exploits `mounted_binaries` to call `/usr/bin/curl` on the host OS
|
||||||
|
- downloads any url, and returns its content as a resulting `String`
|
||||||
|
|
||||||
|
# BackendConfig.json
|
||||||
|
Wasm module is configured with this simple [JSON config](backend/BackendConfig.json):
|
||||||
|
```json5
|
||||||
|
{
|
||||||
|
// import name of the module; needed when linking modules in multi-module setups
|
||||||
|
"name": "curl_adapter",
|
||||||
|
// binaries available to call
|
||||||
|
"mountedBinaries":
|
||||||
|
{
|
||||||
|
// curl will be callable as a host function
|
||||||
|
"curl": "/usr/bin/curl"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
P.S. JSON5 has comments! yaaay!
|
||||||
|
|
||||||
|
# Build & deploy it
|
||||||
|
```shell
|
||||||
|
./deploy.sh
|
||||||
|
```
|
||||||
|
|
||||||
|
# Call it
|
||||||
|
```shell
|
||||||
|
fldist run_air -p air.clj -d '{"service": "e90bfbaf-ede7-4fbe-b45a-6250bf36ed3e"}'
|
||||||
|
```
|
||||||
|
|
||||||
|
# Run frontend
|
||||||
|
```shell
|
||||||
|
cd frontend
|
||||||
|
npm i
|
||||||
|
npm start
|
||||||
|
```
|
7
curl_template/air.clj
Normal file
7
curl_template/air.clj
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
(xor
|
||||||
|
(seq
|
||||||
|
(call relay (service "request") ["https://api.duckduckgo.com/?q=homotopy&format=json"] result)
|
||||||
|
(call %init_peer_id% (returnService "run") [result])
|
||||||
|
)
|
||||||
|
(call %init_peer_id% (returnService "run") [%last_error%])
|
||||||
|
)
|
7
curl_template/backend/BackendConfig.json
Normal file
7
curl_template/backend/BackendConfig.json
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"name": "backend",
|
||||||
|
"mountedBinaries":
|
||||||
|
{
|
||||||
|
"curl": "/usr/bin/curl"
|
||||||
|
}
|
||||||
|
}
|
177
curl_template/backend/Cargo.lock
generated
Normal file
177
curl_template/backend/Cargo.lock
generated
Normal file
@ -0,0 +1,177 @@
|
|||||||
|
# This file is automatically @generated by Cargo.
|
||||||
|
# It is not intended for manual editing.
|
||||||
|
[[package]]
|
||||||
|
name = "cfg-if"
|
||||||
|
version = "1.0.0"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "curl_template"
|
||||||
|
version = "0.1.0"
|
||||||
|
dependencies = [
|
||||||
|
"fluence",
|
||||||
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "fluence"
|
||||||
|
version = "0.3.3"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "84c621ecf5ba628a3a66c4571cb63b9e57de5b8e1ffbb4636873349d04ed9c4c"
|
||||||
|
dependencies = [
|
||||||
|
"fluence-sdk-macro",
|
||||||
|
"fluence-sdk-main",
|
||||||
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "fluence-sdk-macro"
|
||||||
|
version = "0.3.3"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "d3ed152de2a9f59c5494a5ead9d85b40cc1588696d10bb69129addebf0239efb"
|
||||||
|
dependencies = [
|
||||||
|
"fluence-sdk-wit",
|
||||||
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "fluence-sdk-main"
|
||||||
|
version = "0.3.3"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "5ed74c32aded592c2a4c2d11a4586369e2d9f793e6c7b500a2a22f4a61769784"
|
||||||
|
dependencies = [
|
||||||
|
"fluence-sdk-macro",
|
||||||
|
"log",
|
||||||
|
"serde",
|
||||||
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "fluence-sdk-wit"
|
||||||
|
version = "0.3.3"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "a65bb11a2ebb063b8809e43c1837d32e44c12ba3c281e55f2fcf5c5819a6a9ad"
|
||||||
|
dependencies = [
|
||||||
|
"proc-macro2",
|
||||||
|
"quote",
|
||||||
|
"serde",
|
||||||
|
"serde_json",
|
||||||
|
"syn",
|
||||||
|
"uuid",
|
||||||
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "getrandom"
|
||||||
|
version = "0.2.2"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "c9495705279e7140bf035dde1f6e750c162df8b625267cd52cc44e0b156732c8"
|
||||||
|
dependencies = [
|
||||||
|
"cfg-if",
|
||||||
|
"libc",
|
||||||
|
"wasi",
|
||||||
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "itoa"
|
||||||
|
version = "0.4.7"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "dd25036021b0de88a0aff6b850051563c6516d0bf53f8638938edbb9de732736"
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "libc"
|
||||||
|
version = "0.2.86"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "b7282d924be3275cec7f6756ff4121987bc6481325397dde6ba3e7802b1a8b1c"
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "log"
|
||||||
|
version = "0.4.14"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "51b9bbe6c47d51fc3e1a9b945965946b4c44142ab8792c50835a980d362c2710"
|
||||||
|
dependencies = [
|
||||||
|
"cfg-if",
|
||||||
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "proc-macro2"
|
||||||
|
version = "1.0.24"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "1e0704ee1a7e00d7bb417d0770ea303c1bccbabf0ef1667dae92b5967f5f8a71"
|
||||||
|
dependencies = [
|
||||||
|
"unicode-xid",
|
||||||
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "quote"
|
||||||
|
version = "1.0.9"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "c3d0b9745dc2debf507c8422de05d7226cc1f0644216dfdfead988f9b1ab32a7"
|
||||||
|
dependencies = [
|
||||||
|
"proc-macro2",
|
||||||
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "ryu"
|
||||||
|
version = "1.0.5"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "71d301d4193d031abdd79ff7e3dd721168a9572ef3fe51a1517aba235bd8f86e"
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "serde"
|
||||||
|
version = "1.0.118"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "06c64263859d87aa2eb554587e2d23183398d617427327cf2b3d0ed8c69e4800"
|
||||||
|
dependencies = [
|
||||||
|
"serde_derive",
|
||||||
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "serde_derive"
|
||||||
|
version = "1.0.118"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "c84d3526699cd55261af4b941e4e725444df67aa4f9e6a3564f18030d12672df"
|
||||||
|
dependencies = [
|
||||||
|
"proc-macro2",
|
||||||
|
"quote",
|
||||||
|
"syn",
|
||||||
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "serde_json"
|
||||||
|
version = "1.0.63"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "43535db9747a4ba938c0ce0a98cc631a46ebf943c9e1d604e091df6007620bf6"
|
||||||
|
dependencies = [
|
||||||
|
"itoa",
|
||||||
|
"ryu",
|
||||||
|
"serde",
|
||||||
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "syn"
|
||||||
|
version = "1.0.60"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "c700597eca8a5a762beb35753ef6b94df201c81cca676604f547495a0d7f0081"
|
||||||
|
dependencies = [
|
||||||
|
"proc-macro2",
|
||||||
|
"quote",
|
||||||
|
"unicode-xid",
|
||||||
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "unicode-xid"
|
||||||
|
version = "0.2.1"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "f7fe0bb3479651439c9112f72b6c505038574c9fbb575ed1bf3b797fa39dd564"
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "uuid"
|
||||||
|
version = "0.8.2"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "bc5cf98d8186244414c848017f0e2676b3fcb46807f6668a97dfe67359a3c4b7"
|
||||||
|
dependencies = [
|
||||||
|
"getrandom",
|
||||||
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "wasi"
|
||||||
|
version = "0.10.2+wasi-snapshot-preview1"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "fd6fbd9a79829dd1ad0cc20627bf1ed606756a7f77edff7b66b7064f9cb327c6"
|
9
curl_template/backend/Cargo.toml
Normal file
9
curl_template/backend/Cargo.toml
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
[package]
|
||||||
|
name = "curl_template"
|
||||||
|
version = "0.1.0"
|
||||||
|
authors = ["Fluence Labs"]
|
||||||
|
edition = "2018"
|
||||||
|
|
||||||
|
|
||||||
|
[dependencies]
|
||||||
|
fluence = { version = "=0.3.3" }
|
19
curl_template/backend/src/main.rs
Normal file
19
curl_template/backend/src/main.rs
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
#![allow(improper_ctypes)]
|
||||||
|
|
||||||
|
use fluence::fce;
|
||||||
|
use fluence::MountedBinaryStringResult as StringResult;
|
||||||
|
use fluence::MountedBinaryResult as Result;
|
||||||
|
|
||||||
|
fn main() {}
|
||||||
|
|
||||||
|
#[fce]
|
||||||
|
pub fn request(url: String) -> StringResult {
|
||||||
|
unsafe { curl(vec!["-sS".into(), url]) }.stringify().unwrap()
|
||||||
|
}
|
||||||
|
|
||||||
|
// mounted_binaries are available to import like this:
|
||||||
|
#[fce]
|
||||||
|
#[link(wasm_import_module = "host")]
|
||||||
|
extern "C" {
|
||||||
|
pub fn curl(cmd: Vec<String>) -> Result;
|
||||||
|
}
|
20
curl_template/deploy.sh
Executable file
20
curl_template/deploy.sh
Executable file
@ -0,0 +1,20 @@
|
|||||||
|
#!/usr/bin/env bash
|
||||||
|
set -euo pipefail
|
||||||
|
|
||||||
|
# check `fcli` and `fldist` tools are installed or install them
|
||||||
|
(command -v fce || cargo install fcli) >/dev/null
|
||||||
|
(command -v fldist || npm install -g @fluencelabs/fldist) >/dev/null
|
||||||
|
|
||||||
|
# build .wasm
|
||||||
|
(
|
||||||
|
cd backend
|
||||||
|
fce build --release
|
||||||
|
)
|
||||||
|
|
||||||
|
# check it .wasm was built
|
||||||
|
WASM="backend/target/wasm32-wasi/release/curl_template.wasm"
|
||||||
|
test -f "$WASM" || echo >&2 "Couldn't find $WASM"
|
||||||
|
|
||||||
|
# create a service from that .wasm
|
||||||
|
CONFIG="$(pwd)/backend/BackendConfig.json"
|
||||||
|
fldist new_service --modules "$WASM:$CONFIG" --name curl_template
|
24
curl_template/frontend/.gitignore
vendored
Normal file
24
curl_template/frontend/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# 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*
|
||||||
|
.eslintcache
|
8
curl_template/frontend/.prettierrc.js
Normal file
8
curl_template/frontend/.prettierrc.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
module.exports = {
|
||||||
|
semi: true,
|
||||||
|
trailingComma: "all",
|
||||||
|
singleQuote: true,
|
||||||
|
printWidth: 120,
|
||||||
|
tabWidth: 4,
|
||||||
|
useTabs: false
|
||||||
|
};
|
15
curl_template/frontend/README.md
Normal file
15
curl_template/frontend/README.md
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
|
||||||
|
|
||||||
|
## How to run
|
||||||
|
|
||||||
|
To run app in the development mode use:
|
||||||
|
|
||||||
|
npm start
|
||||||
|
|
||||||
|
To run tests in the interactive watch mode use:
|
||||||
|
|
||||||
|
npm test
|
||||||
|
|
||||||
|
To make a production build use:
|
||||||
|
|
||||||
|
npm run build
|
18497
curl_template/frontend/package-lock.json
generated
Normal file
18497
curl_template/frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
52
curl_template/frontend/package.json
Normal file
52
curl_template/frontend/package.json
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
{
|
||||||
|
"name": "fluent-pad",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@fluencelabs/fluence": "^0.9.17",
|
||||||
|
"@fluencelabs/fluence-network-environment": "^1.0.8",
|
||||||
|
"@testing-library/jest-dom": "^5.11.6",
|
||||||
|
"@testing-library/react": "^11.2.2",
|
||||||
|
"@testing-library/user-event": "^12.5.0",
|
||||||
|
"@types/jest": "^26.0.19",
|
||||||
|
"@types/node": "^12.19.9",
|
||||||
|
"@types/react": "^16.14.2",
|
||||||
|
"@types/react-dom": "^16.9.10",
|
||||||
|
"node-sass": "^4.14.1",
|
||||||
|
"react": "^17.0.1",
|
||||||
|
"react-dom": "^17.0.1",
|
||||||
|
"react-scripts": "4.0.1",
|
||||||
|
"typescript": "^4.1.3",
|
||||||
|
"web-vitals": "^0.2.4",
|
||||||
|
"uuid": "8.3.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"parser": "@typescript-eslint/parser",
|
||||||
|
"parserOptions": {
|
||||||
|
"ecmaVersion": 12
|
||||||
|
},
|
||||||
|
"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": {}
|
||||||
|
}
|
BIN
curl_template/frontend/public/favicon.ico
Normal file
BIN
curl_template/frontend/public/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.8 KiB |
45
curl_template/frontend/public/index.html
Normal file
45
curl_template/frontend/public/index.html
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tonsky/FiraCode@4/distr/fira_code.css">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="theme-color" content="#000000" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Web site created using create-react-app"
|
||||||
|
/>
|
||||||
|
<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>React App</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
curl_template/frontend/public/logo192.png
Normal file
BIN
curl_template/frontend/public/logo192.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.2 KiB |
BIN
curl_template/frontend/public/logo512.png
Normal file
BIN
curl_template/frontend/public/logo512.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 9.4 KiB |
25
curl_template/frontend/public/manifest.json
Normal file
25
curl_template/frontend/public/manifest.json
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"short_name": "React App",
|
||||||
|
"name": "Create React App Sample",
|
||||||
|
"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
curl_template/frontend/public/robots.txt
Normal file
3
curl_template/frontend/public/robots.txt
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# https://www.robotstxt.org/robotstxt.html
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
199
curl_template/frontend/src/components/App.scss
Normal file
199
curl_template/frontend/src/components/App.scss
Normal file
@ -0,0 +1,199 @@
|
|||||||
|
$bg-color1: white;
|
||||||
|
$bg-color2: #f4f4f4;
|
||||||
|
$font-color1: black;
|
||||||
|
$color-disabled: lightgray;
|
||||||
|
|
||||||
|
$color1: black;
|
||||||
|
$color2: rgb(214, 214, 214);
|
||||||
|
|
||||||
|
$accent-color: rgb(225, 30, 90);
|
||||||
|
|
||||||
|
$header-height: 60px;
|
||||||
|
$border-radius: 10px;
|
||||||
|
|
||||||
|
@mixin font($size) {
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
font-size: $size;
|
||||||
|
}
|
||||||
|
|
||||||
|
$shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: $bg-color2;
|
||||||
|
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-wrapper {
|
||||||
|
padding: 0 20px;
|
||||||
|
height: $header-height;
|
||||||
|
|
||||||
|
background-color: $bg-color1;
|
||||||
|
color: $font-color1;
|
||||||
|
|
||||||
|
box-shadow: $shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
width: 1200px;
|
||||||
|
height: 100%;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
|
||||||
|
@media (max-width: 1280px) {
|
||||||
|
width: calc(100vw - 80px);
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-right: 45px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 1700px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
padding-top: 50px;
|
||||||
|
|
||||||
|
@media (max-width: 1280px) {
|
||||||
|
width: calc(100vw - 80px);
|
||||||
|
margin-left: 35px;
|
||||||
|
margin-right: 45px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-input {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 15px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
margin-top: 5px;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
font-style: normal;
|
||||||
|
@include font(15px);
|
||||||
|
color: $color1;
|
||||||
|
|
||||||
|
box-shadow: $shadow;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: $color2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
outline: 1px solid white;
|
||||||
|
border: 1px solid $accent-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
display: inline;
|
||||||
|
width: 100px;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: white;
|
||||||
|
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
font-style: normal;
|
||||||
|
@include font(15px);
|
||||||
|
color: $color1;
|
||||||
|
|
||||||
|
box-shadow: $shadow;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: $color2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
outline: 1px solid white;
|
||||||
|
border: 1px solid $accent-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-caption {
|
||||||
|
color: $accent-color;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: bold;
|
||||||
|
@include font(20px);
|
||||||
|
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-item {
|
||||||
|
@include font(14px);
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
& button {
|
||||||
|
@include font(14px);
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
background: none;
|
||||||
|
border-top: none;
|
||||||
|
border-right: none;
|
||||||
|
border-left: none;
|
||||||
|
border-bottom: 1px solid $accent-color;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
color: $accent-color;
|
||||||
|
border-bottom: 2px solid $accent-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.green {
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accent {
|
||||||
|
color: $accent-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 800px;
|
||||||
|
margin-top: 50px;
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: white;
|
||||||
|
|
||||||
|
box-shadow: $shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
@include font(18px);
|
||||||
|
min-width: 100px;
|
||||||
|
border-bottom: 20px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
@include font(14px);
|
||||||
|
border-left: 15px solid transparent;
|
||||||
|
border-right: 15px solid transparent;
|
||||||
|
}
|
93
curl_template/frontend/src/components/App.tsx
Normal file
93
curl_template/frontend/src/components/App.tsx
Normal file
@ -0,0 +1,93 @@
|
|||||||
|
import { createClient, FluenceClient } from '@fluencelabs/fluence';
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import {
|
||||||
|
relayNode,
|
||||||
|
curlRequest
|
||||||
|
} from 'src/fluence';
|
||||||
|
|
||||||
|
import './App.scss';
|
||||||
|
|
||||||
|
const App = () => {
|
||||||
|
const [client, setClient] = useState<FluenceClient | null>(null);
|
||||||
|
const [url, setUrl] = useState('https://api.duckduckgo.com/?q=homotopy&format=json');
|
||||||
|
const [data, setData] = useState<{url: String, response: String}[]>([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fn = async () => {
|
||||||
|
try {
|
||||||
|
const client = await createClient(relayNode);
|
||||||
|
setClient(client);
|
||||||
|
} catch (err) {
|
||||||
|
console.log('Client initialization failed', err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
fn();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const request = async () => {
|
||||||
|
if (!client) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let response = await curlRequest(client, url, 10000);
|
||||||
|
setData((prev) => [...prev, { url, response }]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const stop = async () => {
|
||||||
|
if (!client) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="header-wrapper">
|
||||||
|
<div className="header">
|
||||||
|
<div className="header-item"></div>
|
||||||
|
|
||||||
|
<div className="header-item">
|
||||||
|
Connection status: {client ? <span className="accent">connected</span> : 'disconnected'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="content">
|
||||||
|
<div>Url. e.g: https://google.com</div>
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
className="text-input"
|
||||||
|
onChange={(e) => setUrl(e.target.value)}
|
||||||
|
type="text"
|
||||||
|
value={url}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="buttons">
|
||||||
|
<button disabled={!url} className="button" onClick={request}>
|
||||||
|
request
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div className="table-wrapper">
|
||||||
|
<table className="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Request log.</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{data.map(({url, response}, idx) => (
|
||||||
|
<tr>
|
||||||
|
<td className="td1">{url}</td>
|
||||||
|
<td className="td2">{response}</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
34
curl_template/frontend/src/fluence.ts
Normal file
34
curl_template/frontend/src/fluence.ts
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import { FluenceClient, Particle, sendParticleAsFetch } from '@fluencelabs/fluence';
|
||||||
|
import { testNet } from '@fluencelabs/fluence-network-environment';
|
||||||
|
import { v4 as uuidv4 } from 'uuid';
|
||||||
|
|
||||||
|
export const relayNode = testNet[3];
|
||||||
|
const node = relayNode.peerId;
|
||||||
|
|
||||||
|
const serviceId = 'e90bfbaf-ede7-4fbe-b45a-6250bf36ed3e';
|
||||||
|
|
||||||
|
export const curlRequest = async (client: FluenceClient, url: String, ttl: number) => {
|
||||||
|
const script = `
|
||||||
|
(seq
|
||||||
|
(call myRelay ("op" "identity") [])
|
||||||
|
(seq
|
||||||
|
(call node (serviceId "request") [url] result)
|
||||||
|
(seq
|
||||||
|
(call myRelay ("op" "identity") [])
|
||||||
|
(call myPeerId ("_callback" callback) [result])
|
||||||
|
)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
`;
|
||||||
|
|
||||||
|
let callbackId = uuidv4();
|
||||||
|
const data = new Map();
|
||||||
|
data.set('node', node);
|
||||||
|
data.set('serviceId', serviceId);
|
||||||
|
data.set('myRelay', client.relayPeerId);
|
||||||
|
data.set('myPeerId', client.selfPeerId);
|
||||||
|
data.set('callback', callbackId);
|
||||||
|
data.set('url', url);
|
||||||
|
|
||||||
|
return await sendParticleAsFetch<String>(client, new Particle(script, data, ttl), callbackId);
|
||||||
|
};
|
144
curl_template/frontend/src/index.scss
Normal file
144
curl_template/frontend/src/index.scss
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
/* http://meyerweb.com/eric/tools/css/reset/
|
||||||
|
v2.0 | 20110126
|
||||||
|
License: none (public domain)
|
||||||
|
*/
|
||||||
|
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
div,
|
||||||
|
span,
|
||||||
|
applet,
|
||||||
|
object,
|
||||||
|
iframe,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
p,
|
||||||
|
blockquote,
|
||||||
|
pre,
|
||||||
|
a,
|
||||||
|
abbr,
|
||||||
|
acronym,
|
||||||
|
address,
|
||||||
|
big,
|
||||||
|
cite,
|
||||||
|
code,
|
||||||
|
del,
|
||||||
|
dfn,
|
||||||
|
em,
|
||||||
|
img,
|
||||||
|
ins,
|
||||||
|
kbd,
|
||||||
|
q,
|
||||||
|
s,
|
||||||
|
samp,
|
||||||
|
small,
|
||||||
|
strike,
|
||||||
|
strong,
|
||||||
|
sub,
|
||||||
|
sup,
|
||||||
|
tt,
|
||||||
|
var,
|
||||||
|
b,
|
||||||
|
u,
|
||||||
|
i,
|
||||||
|
center,
|
||||||
|
dl,
|
||||||
|
dt,
|
||||||
|
dd,
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
li,
|
||||||
|
fieldset,
|
||||||
|
form,
|
||||||
|
label,
|
||||||
|
legend,
|
||||||
|
table,
|
||||||
|
caption,
|
||||||
|
tbody,
|
||||||
|
tfoot,
|
||||||
|
thead,
|
||||||
|
tr,
|
||||||
|
th,
|
||||||
|
td,
|
||||||
|
article,
|
||||||
|
aside,
|
||||||
|
canvas,
|
||||||
|
details,
|
||||||
|
embed,
|
||||||
|
figure,
|
||||||
|
figcaption,
|
||||||
|
footer,
|
||||||
|
header,
|
||||||
|
hgroup,
|
||||||
|
menu,
|
||||||
|
nav,
|
||||||
|
output,
|
||||||
|
ruby,
|
||||||
|
section,
|
||||||
|
summary,
|
||||||
|
time,
|
||||||
|
mark,
|
||||||
|
audio,
|
||||||
|
video {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
font: inherit;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* HTML5 display-role reset for older browsers */
|
||||||
|
|
||||||
|
article,
|
||||||
|
aside,
|
||||||
|
details,
|
||||||
|
figcaption,
|
||||||
|
figure,
|
||||||
|
footer,
|
||||||
|
header,
|
||||||
|
hgroup,
|
||||||
|
menu,
|
||||||
|
nav,
|
||||||
|
section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote,
|
||||||
|
q {
|
||||||
|
quotes: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
q {
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
14
curl_template/frontend/src/index.tsx
Normal file
14
curl_template/frontend/src/index.tsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import './index.scss';
|
||||||
|
import App from './components/App';
|
||||||
|
import log from 'loglevel';
|
||||||
|
|
||||||
|
log.setLevel('error');
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>,
|
||||||
|
document.getElementById('root'),
|
||||||
|
);
|
1
curl_template/frontend/src/react-app-env.d.ts
vendored
Normal file
1
curl_template/frontend/src/react-app-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="react-scripts" />
|
5
curl_template/frontend/src/setupTests.ts
Normal file
5
curl_template/frontend/src/setupTests.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||||
|
// allows you to do things like:
|
||||||
|
// expect(element).toHaveTextContent(/react/i)
|
||||||
|
// learn more: https://github.com/testing-library/jest-dom
|
||||||
|
import '@testing-library/jest-dom';
|
30
curl_template/frontend/tsconfig.json
Normal file
30
curl_template/frontend/tsconfig.json
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"lib": [
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"esnext"
|
||||||
|
],
|
||||||
|
"baseUrl": ".",
|
||||||
|
"noImplicitAny": false,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"emitDecoratorMetadata": true,
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strict": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"jsx": "react-jsx"
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src"
|
||||||
|
]
|
||||||
|
}
|
8
curl_template/repl_config.toml
Normal file
8
curl_template/repl_config.toml
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
modules_dir = "backend/target/wasm32-wasi/release/"
|
||||||
|
|
||||||
|
[[module]]
|
||||||
|
name = "curl_template"
|
||||||
|
logger_enabled = true
|
||||||
|
|
||||||
|
[module.mounted_binaries]
|
||||||
|
curl = "/usr/bin/curl"
|
Loading…
x
Reference in New Issue
Block a user