diff --git a/intro/4-ipfs-code-execution/web/src/App.tsx b/intro/4-ipfs-code-execution/web/src/App.tsx index 2a5e294..bc24ea4 100644 --- a/intro/4-ipfs-code-execution/web/src/App.tsx +++ b/intro/4-ipfs-code-execution/web/src/App.tsx @@ -7,7 +7,7 @@ import { hasResultState, isConnectedState, isDeployedState, -} from "./state"; +} from "./appState"; import { useRecoilValue } from "recoil"; import { ConnectedInfo } from "./Components/ConnectedInfo"; import { ConnectionForm } from "./Components/ConnectionForm"; diff --git a/intro/4-ipfs-code-execution/web/src/Components/ConnectedInfo.tsx b/intro/4-ipfs-code-execution/web/src/Components/ConnectedInfo.tsx index 5125a46..27cefbf 100644 --- a/intro/4-ipfs-code-execution/web/src/Components/ConnectedInfo.tsx +++ b/intro/4-ipfs-code-execution/web/src/Components/ConnectedInfo.tsx @@ -1,5 +1,5 @@ import { useRecoilValue } from "recoil"; -import { clientState } from "../state"; +import { clientState } from "../appState"; import { TextWithLabel } from "./TextInput"; export const ConnectedInfo = () => { diff --git a/intro/4-ipfs-code-execution/web/src/Components/ConnectionForm.tsx b/intro/4-ipfs-code-execution/web/src/Components/ConnectionForm.tsx index 3b5769b..504f007 100644 --- a/intro/4-ipfs-code-execution/web/src/Components/ConnectionForm.tsx +++ b/intro/4-ipfs-code-execution/web/src/Components/ConnectionForm.tsx @@ -1,4 +1,4 @@ -import { relayNodes, useClientConnect } from "../state"; +import { relayNodes, useClientConnect } from "../appLogic"; export const ConnectionForm = () => { const connect = useClientConnect(); diff --git a/intro/4-ipfs-code-execution/web/src/Components/IpfsDeploymentInfo.tsx b/intro/4-ipfs-code-execution/web/src/Components/IpfsDeploymentInfo.tsx index d01cfae..b7d4af9 100644 --- a/intro/4-ipfs-code-execution/web/src/Components/IpfsDeploymentInfo.tsx +++ b/intro/4-ipfs-code-execution/web/src/Components/IpfsDeploymentInfo.tsx @@ -1,6 +1,6 @@ import { useRecoilValue } from "recoil"; -import { serviceIdState, useRemoveService, wasmState } from "../state"; -import { copyToClipboard } from "../util"; +import { useRemoveService } from "../appLogic"; +import { serviceIdState, wasmState } from "../appState"; import { TextWithLabel } from "./TextInput"; export const IpfsDeploymentInfo = () => { diff --git a/intro/4-ipfs-code-execution/web/src/Components/IpfsForm.tsx b/intro/4-ipfs-code-execution/web/src/Components/IpfsForm.tsx index b025c44..31b57d7 100644 --- a/intro/4-ipfs-code-execution/web/src/Components/IpfsForm.tsx +++ b/intro/4-ipfs-code-execution/web/src/Components/IpfsForm.tsx @@ -1,5 +1,6 @@ -import { useRecoilState, useResetRecoilState } from "recoil"; -import { rpcAddrState, useDeployService, wasmState } from "../state"; +import { useRecoilState } from "recoil"; +import { useDeployService } from "../appLogic"; +import { rpcAddrState, wasmState } from "../appState"; import { TextInput } from "./TextInput"; export const IpfsForm = () => { diff --git a/intro/4-ipfs-code-execution/web/src/Components/SizeCalcForm.tsx b/intro/4-ipfs-code-execution/web/src/Components/SizeCalcForm.tsx index 09c2154..fc6de42 100644 --- a/intro/4-ipfs-code-execution/web/src/Components/SizeCalcForm.tsx +++ b/intro/4-ipfs-code-execution/web/src/Components/SizeCalcForm.tsx @@ -1,5 +1,6 @@ import { useRecoilState, useRecoilValue } from "recoil"; -import { fileCIDState, rpcAddrState, useGetFileSize } from "../state"; +import { useGetFileSize } from "../appLogic"; +import { fileCIDState, rpcAddrState } from "../appState"; import { TextInput } from "./TextInput"; export const SizeCalcForm = () => { diff --git a/intro/4-ipfs-code-execution/web/src/Components/SizeCalcResult.tsx b/intro/4-ipfs-code-execution/web/src/Components/SizeCalcResult.tsx index b8a1ad3..b103469 100644 --- a/intro/4-ipfs-code-execution/web/src/Components/SizeCalcResult.tsx +++ b/intro/4-ipfs-code-execution/web/src/Components/SizeCalcResult.tsx @@ -1,5 +1,5 @@ import { useRecoilValue } from "recoil"; -import { fileSizeCIDState, fileSizeState } from "../state"; +import { fileSizeCIDState, fileSizeState } from "../appState"; import { TextWithLabel } from "./TextInput"; export const SizeCalcResult = () => { diff --git a/intro/4-ipfs-code-execution/web/src/state.ts b/intro/4-ipfs-code-execution/web/src/appLogic.ts similarity index 67% rename from intro/4-ipfs-code-execution/web/src/state.ts rename to intro/4-ipfs-code-execution/web/src/appLogic.ts index acd41e8..9247a1d 100644 --- a/intro/4-ipfs-code-execution/web/src/state.ts +++ b/intro/4-ipfs-code-execution/web/src/appLogic.ts @@ -1,94 +1,25 @@ import { get_external_api_multiaddr } from "@fluencelabs/aqua-ipfs"; +import { FluenceClient, createClient } from "@fluencelabs/fluence"; +import { stage } from "@fluencelabs/fluence-network-environment"; +import { useSetRecoilState, useRecoilValue, useRecoilState } from "recoil"; import { deploy_service, put_file_size, remove_service, } from "@fluencelabs/ipfs-execution"; -import { createClient, FluenceClient } from "@fluencelabs/fluence"; -import { stage } from "@fluencelabs/fluence-network-environment"; import { - atom, - selector, - useRecoilState, - useRecoilValue, - useSetRecoilState, -} from "recoil"; + clientState, + rpcAddrState, + wasmState, + serviceIdState, + fileCIDState, + fileSizeState, + fileSizeCIDState, +} from "./appState"; import { decapsulateP2P, fromOption } from "./util"; export const relayNodes = [stage[0], stage[1], stage[2]]; -export const clientState = atom({ - key: "clientState", - default: null, - dangerouslyAllowMutability: true, -}); - -export const serviceIdState = atom({ - key: "serviceIdState", - default: null, -}); - -export const wasmState = atom({ - key: "serviceState", - default: "Qmf8fH2cDZXGKS9uDGBcHxv5uQ51ChrigdZKe3QxS2C1AF", -}); - -export const rpcAddrState = atom({ - key: "rpcAddrState", - default: null, -}); - -export const fileCIDState = atom({ - key: "fileCIDState", - default: null, -}); - -export const fileSizeState = atom({ - key: "fileSizeState", - default: null, -}); - -export const fileSizeCIDState = atom({ - key: "fileSizeCIDState", - 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 }) => { - const rpcAddr = get(rpcAddrState); - - return rpcAddr !== null; - }, -}); - -export const isDeployedState = selector({ - key: "isDeployedState", - get: ({ get }) => { - const serviceId = get(serviceIdState); - - return serviceId !== null; - }, -}); - -export const hasResultState = selector({ - key: "hasResultState", - get: ({ get }) => { - const fileSize = get(fileSizeState); - return fileSize !== null; - }, -}); - const getRpcAddr = async (client: FluenceClient) => { if (client === null) { console.log("getRpcAddr client is null"); diff --git a/intro/4-ipfs-code-execution/web/src/appState.ts b/intro/4-ipfs-code-execution/web/src/appState.ts new file mode 100644 index 0000000..aedad42 --- /dev/null +++ b/intro/4-ipfs-code-execution/web/src/appState.ts @@ -0,0 +1,74 @@ +import { FluenceClient } from "@fluencelabs/fluence"; +import { atom, selector } from "recoil"; + +export const clientState = atom({ + key: "clientState", + default: null, + dangerouslyAllowMutability: true, +}); + +export const serviceIdState = atom({ + key: "serviceIdState", + default: null, +}); + +export const wasmState = atom({ + key: "serviceState", + default: "Qmf8fH2cDZXGKS9uDGBcHxv5uQ51ChrigdZKe3QxS2C1AF", +}); + +export const rpcAddrState = atom({ + key: "rpcAddrState", + default: null, +}); + +export const fileCIDState = atom({ + key: "fileCIDState", + default: null, +}); + +export const fileSizeState = atom({ + key: "fileSizeState", + default: null, +}); + +export const fileSizeCIDState = atom({ + key: "fileSizeCIDState", + 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 }) => { + const rpcAddr = get(rpcAddrState); + + return rpcAddr !== null; + }, +}); + +export const isDeployedState = selector({ + key: "isDeployedState", + get: ({ get }) => { + const serviceId = get(serviceIdState); + + return serviceId !== null; + }, +}); + +export const hasResultState = selector({ + key: "hasResultState", + get: ({ get }) => { + const fileSize = get(fileSizeState); + return fileSize !== null; + }, +}); diff --git a/intro/4-ipfs-code-execution/web/src/util.ts b/intro/4-ipfs-code-execution/web/src/util.ts index 6f3a42f..019b051 100644 --- a/intro/4-ipfs-code-execution/web/src/util.ts +++ b/intro/4-ipfs-code-execution/web/src/util.ts @@ -6,10 +6,6 @@ export const decapsulateP2P = (rpcAddr: string) => { .toString(); }; -export const copyToClipboard = (text: string) => { - navigator.clipboard.writeText(text); -}; - export const fromOption = (opt: T | T[] | null): T | null => { if (Array.isArray(opt)) { if (opt.length === 0) {