move ipfs example

aqua-examples/aqua-ipfs-integration/web/src/Components/ConnectedInfo.tsx

@@ -0,0 +1,18 @@
+import { useRecoilValue } from "recoil";
+import { clientState } from "../appState";
+import { TextWithLabel } from "./TextInput";
+
+export const ConnectedInfo = () => {
+  const client = useRecoilValue(clientState);
+  if (client === null) {
+    return <></>;
+  }
+
+  return (
+    <>
+      <h1>Connected</h1>
+      <TextWithLabel text={"Peer id:"} value={client.selfPeerId} />
+      <TextWithLabel text={"Relay peer id:"} value={client.selfPeerId} />
+    </>
+  );
+};

aqua-examples/aqua-ipfs-integration/web/src/Components/ConnectionForm.tsx

@@ -0,0 +1,22 @@
+import { relayNodes, useClientConnect } from "../appLogic";
+
+export const ConnectionForm = () => {
+  const connect = useClientConnect();
+
+  return (
+    <>
+      <h1>Intro 4: IPFS storage + Fluence compute</h1>
+      <h2>Pick a relay</h2>
+      <ul>
+        {relayNodes.map((x) => (
+          <li key={x.peerId}>
+            <span className="mono">{x.peerId}</span>
+            <button className="btn" onClick={() => connect(x.multiaddr)}>
+              Connect
+            </button>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+};

aqua-examples/aqua-ipfs-integration/web/src/Components/IpfsDeploymentInfo.tsx

@@ -0,0 +1,23 @@
+import { useRecoilValue } from "recoil";
+import { useRemoveService } from "../appLogic";
+import { serviceIdState, wasmState } from "../appState";
+import { TextWithLabel } from "./TextInput";
+
+export const IpfsDeploymentInfo = () => {
+  const wasm = useRecoilValue(wasmState);
+  const serviceId = useRecoilValue(serviceIdState);
+  const removeService = useRemoveService();
+
+  return (
+    <>
+      <h2>
+        Service deployed{" "}
+        <button className="btn-inline" onClick={removeService}>
+          remove
+        </button>
+      </h2>
+      <TextWithLabel text={"process_files.wasm CID:"} value={wasm} />
+      <TextWithLabel text={"Service ID:"} value={serviceId} />
+    </>
+  );
+};

aqua-examples/aqua-ipfs-integration/web/src/Components/IpfsForm.tsx

@@ -0,0 +1,40 @@
+import { useRecoilState } from "recoil";
+import { useDeployService } from "../appLogic";
+import { rpcAddrState, wasmState } from "../appState";
+import { TextInput } from "./TextInput";
+
+export const IpfsForm = () => {
+  const [rpcAddr, setRpcAddr] = useRecoilState(rpcAddrState);
+  const [wasm, setWasm] = useRecoilState(wasmState);
+  const deployService = useDeployService();
+
+  return (
+    <>
+      <h2>Deploy service from IPFS</h2>
+      <div className="article">
+        <p>Now we can deploy service from IPFS into Fluence network</p>
+        <p>
+          To do so, please specify IPFS RPC address of process_files.wasm from,
+          and the CID of WebAssembly module to use (process_files.wasm)
+        </p>
+      </div>
+
+      <TextInput
+        text={"IPFS RPC address"}
+        value={rpcAddr}
+        setValue={setRpcAddr}
+      />
+
+      <TextInput
+        text={"process_files.wasm CID"}
+        value={wasm}
+        setValue={setWasm}
+      />
+      <div className="row">
+        <button className="btn btn-right" onClick={deployService}>
+          deploy service
+        </button>
+      </div>
+    </>
+  );
+};

aqua-examples/aqua-ipfs-integration/web/src/Components/SizeCalcForm.tsx

@@ -0,0 +1,37 @@
+import { useRecoilState, useRecoilValue } from "recoil";
+import { useGetFileSize } from "../appLogic";
+import { fileCIDState, rpcAddrState } from "../appState";
+import { TextInput } from "./TextInput";
+
+export const SizeCalcForm = () => {
+  const [rpcAddr, setRpcAddr] = useRecoilState(rpcAddrState);
+  const [fileCID, setFileCID] = useRecoilState(fileCIDState);
+  const getFileSize = useGetFileSize();
+
+  return (
+    <>
+      <h2>Get file size</h2>
+      <div className="article">
+        <p>
+          Upload any file to IPFS node <b>{rpcAddr}</b>
+        </p>
+        <p>
+          And paste CID here and get the size of that file via ProcessFiles
+          service you have just deployed
+        </p>
+      </div>
+      <TextInput
+        text={"IPFS RPC address"}
+        value={rpcAddr}
+        setValue={setRpcAddr}
+      />
+      <TextInput text={"IPFS CID"} value={fileCID} setValue={setFileCID} />
+
+      <div className="row">
+        <button className="btn btn-right" onClick={getFileSize}>
+          get size
+        </button>
+      </div>
+    </>
+  );
+};

aqua-examples/aqua-ipfs-integration/web/src/Components/SizeCalcResult.tsx

@@ -0,0 +1,23 @@
+import { useRecoilValue } from "recoil";
+import { fileSizeCIDState, fileSizeState } from "../appState";
+import { TextWithLabel } from "./TextInput";
+
+export const SizeCalcResult = () => {
+  const fileSize = useRecoilValue(fileSizeState);
+  const fileSizeCID = useRecoilValue(fileSizeCIDState);
+
+  return (
+    <>
+      <h2>Result</h2>
+      <div className="article">
+        <p>
+          File size has been calculated and displayed below. Also the result of
+          the calculation has been uploaded to IPFS and is available under it's
+          CID
+        </p>
+      </div>
+      <TextWithLabel text="File size:" value={fileSize} />
+      <TextWithLabel text="File size IPFS CID:" value={fileSizeCID} />
+    </>
+  );
+};

aqua-examples/aqua-ipfs-integration/web/src/Components/TextInput.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+export const TextInput = (props: {
+  text: string;
+  value: string | null;
+  setValue: (val: string) => void;
+}) => {
+  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>
+  );
+};
+
+export const TextWithLabel = (props: {
+  text: string;
+  value: string | null;
+}) => {
+  return (
+    <div className="row">
+      <label className="label bold">{props.text}</label>
+      <div className="input-ro">{props.value || ""}</div>
+    </div>
+  );
+};