Update aqua-ipfs web demo

aqua-examples/aqua-ipfs-integration/web/package.json

@@ -4,8 +4,7 @@
   "private": true,
   "dependencies": {
     "@fluencelabs/ipfs-execution-aqua": "file:../aqua",
-    "@fluencelabs/aqua-ipfs-ts": "0.4.2",
-    "@fluencelabs/fluence": "0.10.1",
+    "@fluencelabs/fluence": "0.11.0",
     "@fluencelabs/fluence-network-environment": "1.0.10",
     "@fluencelabs/aqua-lib": "0.1.14",
     "@testing-library/jest-dom": "^5.14.1",
@@ -49,7 +48,6 @@
     ]
   },
   "devDependencies": {
-    "chokidar-cli": "^2.1.0",
     "node-sass": "^6.0.1"
   }
 }

aqua-examples/aqua-ipfs-integration/web/src/App.tsx

@@ -22,13 +22,6 @@ function App() {
   const isDeployed = useRecoilValue(isDeployedState);
   const hasResult = useRecoilValue(hasResultState);
 
-  console.log(
-    "isConnected gotRpcAddr deployed\n",
-    isConnected,
-    gotRpcAddr,
-    isDeployed
-  );
-
   return (
     <div className="App">
       <header>

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

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

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

@@ -1,4 +1,4 @@
-import { useRecoilState, useRecoilValue } from "recoil";
+import { useRecoilState } from "recoil";
 import { useGetFileSize } from "../appLogic";
 import { fileCIDState, rpcAddrState } from "../appState";
 import { TextInput } from "./TextInput";

aqua-examples/aqua-ipfs-integration/web/src/appLogic.ts

@@ -1,47 +1,50 @@
-import { get_external_api_multiaddr } from "@fluencelabs/aqua-ipfs-ts";
-import { FluenceClient, createClient } from "@fluencelabs/fluence";
+import { FluencePeer } from "@fluencelabs/fluence";
 import { krasnodar } from "@fluencelabs/fluence-network-environment";
 import { useSetRecoilState, useRecoilValue, useRecoilState } from "recoil";
 import {
   deploy_service,
   put_file_size,
   remove_service,
+  get_external_api_multiaddr,
 } from "@fluencelabs/ipfs-execution-aqua";
 import {
-  clientState,
+  isConnectedState,
   rpcAddrState,
   wasmState,
   serviceIdState,
   fileCIDState,
   fileSizeState,
   fileSizeCIDState,
+  relayState,
+  selfPeerIdState,
 } from "./appState";
 import { decapsulateP2P, fromOption } from "./util";
 
 export const relayNodes = [krasnodar[0], krasnodar[1], krasnodar[2]];
 
-const getRpcAddr = async (client: FluenceClient) => {
-  if (client === null) {
-    console.log("getRpcAddr client is null");
-    return;
-  }
-
-  let result = await get_external_api_multiaddr(client, client.relayPeerId!);
+const requestRpcAddr = async () => {
+  let result = await get_external_api_multiaddr(
+    FluencePeer.default.connectionInfo.connectedRelay!
+  );
   console.log("getRpcAddr result", result);
   let rpcAddr = result.multiaddr;
   return decapsulateP2P(rpcAddr);
 };
 
 export const useClientConnect = () => {
-  const setClient = useSetRecoilState(clientState);
+  const setIsConnected = useSetRecoilState(isConnectedState);
+  const setRelay = useSetRecoilState(relayState);
+  const setSelfPeerId = useSetRecoilState(selfPeerIdState);
   const setRpcAddr = useSetRecoilState(rpcAddrState);
 
   const connect = async (relayPeerId: string) => {
     try {
-      const client = await createClient(relayPeerId);
-      const addr = await getRpcAddr(client);
+      await FluencePeer.default.init({ connectTo: relayPeerId });
+      setIsConnected(true);
+      setRelay(FluencePeer.default.connectionInfo.connectedRelay);
+      setSelfPeerId(FluencePeer.default.connectionInfo.selfPeerId);
+      const addr = await requestRpcAddr();
       setRpcAddr(addr!);
-      setClient(client);
     } catch (err) {
       console.log("Client initialization failed", err);
     }
@@ -51,9 +54,10 @@ export const useClientConnect = () => {
 };
 
 export const useDeployService = () => {
+  const relay = useRecoilValue(relayState);
   const wasm = useRecoilValue(wasmState);
   const rpcAddr = useRecoilValue(rpcAddrState);
-  const client = useRecoilValue(clientState);
+  const client = useRecoilValue(isConnectedState);
   const setServiceId = useSetRecoilState(serviceIdState);
 
   return async () => {
@@ -63,8 +67,7 @@ export const useDeployService = () => {
     }
 
     var service_id = await deploy_service(
-      client,
-      client.relayPeerId!,
+      relay!,
       wasm,
       rpcAddr,
       (msg, value) => console.log(msg, value),
@@ -76,21 +79,21 @@ export const useDeployService = () => {
 };
 
 export const useGetFileSize = () => {
+  const relay = useRecoilValue(relayState);
   const rpcAddr = useRecoilValue(rpcAddrState);
-  const client = useRecoilValue(clientState);
+  const isConnected = useRecoilValue(isConnectedState);
   const serviceId = useRecoilValue(serviceIdState);
   const fileCID = useRecoilValue(fileCIDState);
   const setFileSize = useSetRecoilState(fileSizeState);
   const setFileSizeCID = useSetRecoilState(fileSizeCIDState);
 
   return async () => {
-    if (client === null || serviceId === null || rpcAddr === null) {
+    if (!isConnected || serviceId === null || rpcAddr === null) {
       return;
     }
 
     var putResult = await put_file_size(
-      client,
-      client.relayPeerId!,
+      relay!,
       fileCID!,
       rpcAddr,
       serviceId,
@@ -111,18 +114,19 @@ export const useGetFileSize = () => {
 };
 
 export const useRemoveService = () => {
-  const client = useRecoilValue(clientState);
+  const relay = useRecoilValue(relayState);
+  const isConnected = useRecoilValue(isConnectedState);
   const [serviceId, setServiceId] = useRecoilState(serviceIdState);
   const setFileCID = useSetRecoilState(fileCIDState);
   const setFileSize = useSetRecoilState(fileSizeState);
   const setFileSizeCID = useSetRecoilState(fileSizeCIDState);
 
   return async () => {
-    if (client === null || serviceId === null) {
+    if (isConnected || serviceId === null) {
       return;
     }
 
-    await remove_service(client, client.relayPeerId!, serviceId, {
+    await remove_service(relay!, serviceId, {
       ttl: 10000,
     });
     setServiceId(null);

aqua-examples/aqua-ipfs-integration/web/src/appState.ts

@@ -1,10 +1,18 @@
-import { FluenceClient } from "@fluencelabs/fluence";
 import { atom, selector } from "recoil";
 
-export const clientState = atom<FluenceClient | null>({
-  key: "clientState",
+export const isConnectedState = atom<boolean>({
+  key: "isConnectedState",
+  default: false,
+});
+
+export const selfPeerIdState = atom<string | null>({
+  key: "selfPeerIdState",
+  default: null,
+});
+
+export const relayState = atom<string | null>({
+  key: "relayState",
   default: null,
-  dangerouslyAllowMutability: true,
 });
 
 export const serviceIdState = atom<string | null>({
@@ -37,16 +45,6 @@ export const fileSizeCIDState = atom<string | null>({
   default: null,
 });
 
-export const isConnectedState = selector({
-  key: "isConnectedState",
-  get: ({ get }) => {
-    const client = get(clientState);
-
-    return client !== null && client.isConnected;
-  },
-  dangerouslyAllowMutability: true,
-});
-
 export const gotRpcAddrState = selector({
   key: "getRpcAddrState",
   get: ({ get }) => {