fluencelabs/examples
1
0
Fork 0
mirror of https://github.com/fluencelabs/examples synced 2025-06-14 02:21:21 +00:00
Code Issues Projects Releases Wiki Activity

Add curl_template

Browse Source
This commit is contained in:
folex
2021-02-26 00:18:07 +03:00
parent e489bf1673
commit cf3c18490a
28 changed files with 19482 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
curl_template/frontend/.gitignore vendored Normal file
View 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
View 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
View 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
View File

File diff suppressed because it is too large Load Diff

52
curl_template/frontend/package.json Normal file
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

45
curl_template/frontend/public/index.html Normal file
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
curl_template/frontend/public/logo512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

25
curl_template/frontend/public/manifest.json Normal file
View 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
View File

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

199
curl_template/frontend/src/components/App.scss Normal file
View 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
View 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
View 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
View 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
View 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
View File

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

5
curl_template/frontend/src/setupTests.ts Normal file
View 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
View 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"
]
}