mirror of
https://github.com/fluencelabs/examples
synced 2025-06-01 12:11:19 +00:00
rework form logic
This commit is contained in:
Pavel Murygin
parent
de9a7c2c9d
commit
d317eb5094
@ -99,7 +99,7 @@ table {
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 70px;
|
||||
width: 240px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -160,43 +160,40 @@ table {
|
||||
}
|
||||
|
||||
.gg-trash {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs,1));
|
||||
width: 10px;
|
||||
height: 12px;
|
||||
border: 2px solid transparent;
|
||||
box-shadow:
|
||||
0 0 0 2px,
|
||||
inset -2px 0 0,
|
||||
inset 2px 0 0;
|
||||
border-bottom-left-radius: 1px;
|
||||
border-bottom-right-radius: 1px;
|
||||
margin-top: 4px
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
width: 10px;
|
||||
height: 12px;
|
||||
border: 2px solid transparent;
|
||||
box-shadow: 0 0 0 2px, inset -2px 0 0, inset 2px 0 0;
|
||||
border-bottom-left-radius: 1px;
|
||||
border-bottom-right-radius: 1px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.gg-trash::after,
|
||||
.gg-trash::before {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
}
|
||||
.gg-trash::after {
|
||||
background: currentColor;
|
||||
border-radius: 3px;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
top: -4px;
|
||||
left: -5px
|
||||
background: currentColor;
|
||||
border-radius: 3px;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
top: -4px;
|
||||
left: -5px;
|
||||
}
|
||||
.gg-trash::before {
|
||||
width: 10px;
|
||||
height: 4px;
|
||||
border: 2px solid;
|
||||
border-bottom: transparent;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
top: -7px;
|
||||
left: -2px
|
||||
width: 10px;
|
||||
height: 4px;
|
||||
border: 2px solid;
|
||||
border-bottom: transparent;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
top: -7px;
|
||||
left: -2px;
|
||||
}
|
||||
|
||||
@ -159,18 +159,22 @@ function App() {
|
||||
/>
|
||||
)}
|
||||
{deployed && (
|
||||
<Deployed
|
||||
setRpcAddr={setRpcAddr}
|
||||
rpcAddr={rpcAddr}
|
||||
setFileCID={setFileCID}
|
||||
fileCID={fileCID}
|
||||
fileSize={fileSize}
|
||||
fileSizeCID={fileSizeCID}
|
||||
getFileSize={getFileSize}
|
||||
wasm={wasm}
|
||||
serviceId={serviceId}
|
||||
removeService={removeService}
|
||||
/>
|
||||
<>
|
||||
<IfsDeployed
|
||||
wasm={wasm}
|
||||
serviceId={serviceId}
|
||||
removeService={removeService}
|
||||
/>
|
||||
<Deployed
|
||||
setRpcAddr={setRpcAddr}
|
||||
rpcAddr={rpcAddr}
|
||||
setFileCID={setFileCID}
|
||||
fileCID={fileCID}
|
||||
fileSize={fileSize}
|
||||
fileSizeCID={fileSizeCID}
|
||||
getFileSize={getFileSize}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -185,52 +189,10 @@ const Deployed = (props: {
|
||||
fileSize: string;
|
||||
fileSizeCID: string;
|
||||
getFileSize: () => Promise<void>;
|
||||
wasm: string;
|
||||
serviceId: string | null;
|
||||
removeService: () => {};
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<h2>Deployed</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<td className="bold">process_files.wasm CID:</td>
|
||||
<td className="mono">{props.wasm}</td>
|
||||
<td>
|
||||
<button
|
||||
className="btn-clipboard"
|
||||
onClick={() => copyToClipboard(props.wasm)}
|
||||
>
|
||||
<i className="gg-clipboard"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="bold">ProcessFiles service ID:</td>
|
||||
<td className="mono">{props.serviceId}</td>
|
||||
<button
|
||||
className="btn-clipboard"
|
||||
onClick={() => props.removeService()}
|
||||
>
|
||||
<i className="gg-trash"></i>
|
||||
</button>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="bold">File Size:</td>
|
||||
<td className="mono">{props.fileSize}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div>
|
||||
<div className="row">
|
||||
<h2>Set IPFS RPC address:</h2>
|
||||
<p className="p">Specify IPFS to download file from</p>
|
||||
<input
|
||||
className="input"
|
||||
type="text"
|
||||
onChange={(e) => props.setRpcAddr(e.target.value)}
|
||||
value={props.rpcAddr}
|
||||
/>
|
||||
</div>
|
||||
<h2>Get file size</h2>
|
||||
<p className="p">
|
||||
Upload any file to IPFS node
|
||||
@ -278,43 +240,70 @@ const IpfsForm = (props: {
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<div className="row">
|
||||
<h2>Set IPFS RPC address:</h2>
|
||||
<p className="p">Specify IPFS to download process_files.wasm from</p>
|
||||
<input
|
||||
className="input"
|
||||
type="text"
|
||||
onChange={(e) => props.setRpcAddr(e.target.value)}
|
||||
value={props.rpcAddr}
|
||||
/>
|
||||
</div>
|
||||
<div className="row">
|
||||
<h2>Set process_files.wasm module CID</h2>
|
||||
<p className="p">
|
||||
To deploy a service, specify CID of WebAssembly module.
|
||||
</p>
|
||||
<input
|
||||
className="input"
|
||||
type="text"
|
||||
onChange={(e) => props.setWasm(e.target.value)}
|
||||
value={props.wasm}
|
||||
/>
|
||||
</div>
|
||||
<h2>Ipfs</h2>
|
||||
<p>
|
||||
process_files.wasm will be downloaded via IPFS to the Fluence node, and
|
||||
then a service will be dynamically created from it! After that, you will
|
||||
be able to use that service to get sizes of IPFS files!
|
||||
<br />
|
||||
To do so, please specify IPFS RPC address to download process_files.wasm
|
||||
from
|
||||
<br />
|
||||
And specify CID of WebAssembly module.
|
||||
</p>
|
||||
|
||||
<TextInput
|
||||
text={"IPFS RPC address"}
|
||||
value={props.rpcAddr}
|
||||
setValue={props.setRpcAddr}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
text={"process_files.wasm module CID"}
|
||||
value={props.wasm}
|
||||
setValue={props.setWasm}
|
||||
/>
|
||||
<div className="row">
|
||||
<button className="btn btn-hello" onClick={props.deployService}>
|
||||
deploy service
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Deploy ProcessFiles service</h2>
|
||||
<p className="p">
|
||||
process_files.wasm will be downloaded via IPFS to the Fluence node,
|
||||
and then a service will be dynamically created from it! After that,
|
||||
you will be able to use that service to get sizes of IPFS files!
|
||||
</p>
|
||||
<div className="row">
|
||||
<button className="btn btn-hello" onClick={props.deployService}>
|
||||
deploy service
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const IfsDeployed = (props: {
|
||||
wasm: string;
|
||||
serviceId: string | null;
|
||||
removeService: () => {};
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<h2>Deployed</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<td className="bold">process_files.wasm CID:</td>
|
||||
<td className="mono">{props.wasm}</td>
|
||||
<td>
|
||||
<button
|
||||
className="btn-clipboard"
|
||||
onClick={() => copyToClipboard(props.wasm)}
|
||||
>
|
||||
<i className="gg-clipboard"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="bold">ProcessFiles service ID:</td>
|
||||
<td className="mono">{props.serviceId}</td>
|
||||
<button
|
||||
className="btn-clipboard"
|
||||
onClick={() => props.removeService()}
|
||||
>
|
||||
<i className="gg-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</tr>
|
||||
</table>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -376,4 +365,23 @@ const Connected = (props: { client: FluenceClient }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const TextInput = (props: {
|
||||
text: string;
|
||||
value: string;
|
||||
setValue: React.Dispatch<React.SetStateAction<string>>;
|
||||
}) => {
|
||||
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 default App;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user