diff --git a/aqua-examples/aqua-ipfs-integration/web/package.json b/aqua-examples/aqua-ipfs-integration/web/package.json index d0be49e..faa68b8 100644 --- a/aqua-examples/aqua-ipfs-integration/web/package.json +++ b/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" } } diff --git a/aqua-examples/aqua-ipfs-integration/web/src/App.tsx b/aqua-examples/aqua-ipfs-integration/web/src/App.tsx index bc24ea4..4dc2b27 100644 --- a/aqua-examples/aqua-ipfs-integration/web/src/App.tsx +++ b/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 (
diff --git a/aqua-examples/aqua-ipfs-integration/web/src/Components/ConnectedInfo.tsx b/aqua-examples/aqua-ipfs-integration/web/src/Components/ConnectedInfo.tsx index 27cefbf..f9d195b 100644 --- a/aqua-examples/aqua-ipfs-integration/web/src/Components/ConnectedInfo.tsx +++ b/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 ( <>

Connected

- - + + ); }; diff --git a/aqua-examples/aqua-ipfs-integration/web/src/Components/SizeCalcForm.tsx b/aqua-examples/aqua-ipfs-integration/web/src/Components/SizeCalcForm.tsx index c034761..b54b94a 100644 --- a/aqua-examples/aqua-ipfs-integration/web/src/Components/SizeCalcForm.tsx +++ b/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"; diff --git a/aqua-examples/aqua-ipfs-integration/web/src/appLogic.ts b/aqua-examples/aqua-ipfs-integration/web/src/appLogic.ts index bf53830..8a04975 100644 --- a/aqua-examples/aqua-ipfs-integration/web/src/appLogic.ts +++ b/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); diff --git a/aqua-examples/aqua-ipfs-integration/web/src/appState.ts b/aqua-examples/aqua-ipfs-integration/web/src/appState.ts index 247249f..bc0e29b 100644 --- a/aqua-examples/aqua-ipfs-integration/web/src/appState.ts +++ b/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({ - key: "clientState", +export const isConnectedState = atom({ + key: "isConnectedState", + default: false, +}); + +export const selfPeerIdState = atom({ + key: "selfPeerIdState", + default: null, +}); + +export const relayState = atom({ + key: "relayState", default: null, - dangerouslyAllowMutability: true, }); export const serviceIdState = atom({ @@ -37,16 +45,6 @@ export const fileSizeCIDState = atom({ 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 }) => {