diff --git a/docker-compose.yml b/docker-compose.yml index 020ea5d..a66f994 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -7,6 +7,6 @@ services: ports: - "3000:80" environment: - - codex_url=http://host.docker.internal:8080 + - codex_url=http://kubernetes.docker.internal:31942 volumes: - ./deployment/nginx.template:/etc/nginx/templates/10-variables.conf.template:ro \ No newline at end of file diff --git a/frontend/src/data/models/RequestForStorageContractModel.ts b/frontend/src/data/models/RequestForStorageContractModel.ts new file mode 100644 index 0000000..8272892 --- /dev/null +++ b/frontend/src/data/models/RequestForStorageContractModel.ts @@ -0,0 +1,17 @@ +enum RequestForStorageContractStatus { + UPLOADING = "UPLOADING", + UPLOADED = "UPLOADED", + FAILED = "FAILED", +} + +type RequestForStorageContractModel = { + purchaseid: string; + lastModified: string; + reward: string; + duration: string; + collateral: string; + status: RequestForStorageContractStatus; +}; + +export default RequestForStorageContractModel; +export { RequestForStorageContractStatus }; diff --git a/frontend/src/pages/data/tabs/download/DownloadTab.tsx b/frontend/src/pages/data/tabs/download/DownloadTab.tsx index 0820482..caf3121 100644 --- a/frontend/src/pages/data/tabs/download/DownloadTab.tsx +++ b/frontend/src/pages/data/tabs/download/DownloadTab.tsx @@ -12,7 +12,7 @@ function DownloadTab() { console.log(filename); console.log(cid); fetch( - `/api/codex/v1/download/${cid}`, + `/api/codex/v1/data/${cid}`, { headers: (nodeInfo.auth !== null && { diff --git a/frontend/src/pages/data/tabs/upload/UploadTab.tsx b/frontend/src/pages/data/tabs/upload/UploadTab.tsx index ae32295..2c622d5 100644 --- a/frontend/src/pages/data/tabs/upload/UploadTab.tsx +++ b/frontend/src/pages/data/tabs/upload/UploadTab.tsx @@ -44,7 +44,7 @@ function UploadTab() { var newCid = ""; try { await axios - .post(`/api/codex/v1/upload`, bytes, { + .post(`/api/codex/v1/data`, bytes, { headers: (nodeInfo.auth !== null && { "Base-Url": nodeInfo.nodeToConnectTo || nodeInfo.baseUrl, "Content-Type": "application/octet-stream", diff --git a/frontend/src/pages/marketplace/Marketplace.tsx b/frontend/src/pages/marketplace/Marketplace.tsx index 875f76d..8e1f971 100644 --- a/frontend/src/pages/marketplace/Marketplace.tsx +++ b/frontend/src/pages/marketplace/Marketplace.tsx @@ -3,16 +3,18 @@ import TabBarView from "../../components/layout/tabBarView/TabBarView"; import styled from "styled-components"; import { MdFileUpload, MdFileDownload } from "react-icons/md"; -import UploadTab from "./tabs/available/AvailableTab"; +import UploadTab from "./tabs/status/status"; import DownloadTab from "./tabs/create/CreateTab"; +import AvailableTab from "./tabs/status/status"; +import CreateTab from "./tabs/create/CreateTab"; function MarketplacePage() { return (
- - + + - +
diff --git a/frontend/src/pages/marketplace/tabs/available/AvailableTab.tsx b/frontend/src/pages/marketplace/tabs/available/AvailableTab.tsx deleted file mode 100644 index 50719a5..0000000 --- a/frontend/src/pages/marketplace/tabs/available/AvailableTab.tsx +++ /dev/null @@ -1,150 +0,0 @@ -import { useCallback, useEffect, useRef } from "react"; -import { useDropzone } from "react-dropzone"; -import styled from "styled-components"; -import UploadedItemModel, { - UploadedItemStatus, -} from "../../../../data/models/UploadedItemModel"; -import UploadedItemComponent from "../../../../components/uploadedItem/UploadedItemComponent"; -import axios from "axios"; - -import { useDexyStore } from "../../../../store"; -import constants from "../../../../util/Constants"; - -function AvailableTab() { -// const { uploads, setUploads, nodeInfo } = useDexyStore(); -// var filesCopy = useRef(uploads); - -// useEffect(() => { -// console.log(uploads); -// // setUploads([]); -// }, [uploads]); - -// const onDrop = useCallback( -// async (acceptedFiles: File[]) => { -// console.log(acceptedFiles); -// for (let i = 0; i < acceptedFiles.length; i++) { -// new Promise(async (resolve, reject) => { -// let cid: string = (Math.random() * 1000000).toString(); -// console.log(cid + acceptedFiles[i].name); -// filesCopy.current.push({ -// cid: cid, -// fileName: acceptedFiles[i].name, -// fileSize: acceptedFiles[i].size, -// lastModified: new Date( -// acceptedFiles[i].lastModified -// ).toLocaleString(), -// type: acceptedFiles[i].type, -// status: UploadedItemStatus.UPLOADING, -// }); -// setUploads(filesCopy.current); - -// var bytes = await acceptedFiles[i].arrayBuffer(); -// bytes = new Uint8Array(bytes); - -// var newCid = ""; -// try { -// await axios -// .post(`/api/codex/v1/upload`, bytes, { -// headers: (nodeInfo.auth !== null && { -// "Base-Url": nodeInfo.nodeToConnectTo || nodeInfo.baseUrl, -// "Content-Type": "application/octet-stream", -// "Auth-String": nodeInfo.auth, -// }) || { -// "Base-Url": nodeInfo.nodeToConnectTo || nodeInfo.baseUrl, -// "Content-Type": "application/octet-stream", -// }, -// }) -// .then((response) => { -// newCid = response.data; -// }); - -// filesCopy.current = filesCopy.current.filter( -// (file) => file.cid !== cid -// ); -// filesCopy.current.push({ -// cid: newCid, -// fileName: acceptedFiles[i].name, -// fileSize: acceptedFiles[i].size, -// lastModified: new Date( -// acceptedFiles[i].lastModified -// ).toLocaleString(), -// type: acceptedFiles[i].type, -// status: UploadedItemStatus.UPLOADED, -// }); -// setUploads(filesCopy.current); -// console.log("filesCopy"); -// console.log(filesCopy.current); -// } catch (error) { -// console.log(error); -// filesCopy.current = filesCopy.current.filter( -// (file) => file.cid !== cid -// ); -// filesCopy.current.push({ -// cid: "Failed", -// fileName: acceptedFiles[i].name, -// fileSize: acceptedFiles[i].size, -// lastModified: new Date( -// acceptedFiles[i].lastModified -// ).toLocaleString(), -// type: acceptedFiles[i].type, -// status: UploadedItemStatus.FAILED, -// }); -// console.log("filesCopy failed"); -// console.log(filesCopy.current); -// setUploads(filesCopy.current); -// } -// console.log(cid + acceptedFiles[i].name); -// resolve("done"); -// }); -// } -// }, -// [setUploads, filesCopy, nodeInfo] -// ); - -// const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop }); - - return ( - -
-
- - ); -} - -export default AvailableTab; - -const AvailableTabWrapper = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100%; - width: 100%; - padding: 16px; - - #dropzone { - flex: 1; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - border: 2px dashed #9e9e9e; - border-radius: 8px; - } - - p { - font-size: 1rem; - text-align: center; - } - - #uploaded-items-wrap { - display: flex; - flex-direction: column; - align-items: center; - justify-content: start; - width: 100%; - overflow-y: scroll; - margin-top: 16px; - } -`; diff --git a/frontend/src/pages/marketplace/tabs/create/CreateTab.tsx b/frontend/src/pages/marketplace/tabs/create/CreateTab.tsx index e86e5dd..80ec572 100644 --- a/frontend/src/pages/marketplace/tabs/create/CreateTab.tsx +++ b/frontend/src/pages/marketplace/tabs/create/CreateTab.tsx @@ -6,32 +6,39 @@ import { useDexyStore } from "../../../../store"; function CreateTab() { const { ftdCid, setFtdCid, nodeInfo } = useDexyStore(); - const [filename, setFilename] = useState("file"); + const [reward, setReward,] = useState("file"); + const [duration, setDuration,] = useState("file"); + const [proofProbability, setProofProbability,] = useState("file"); + const [collateral, setCollateral,] = useState("file"); + - function download(cid: string) { - // console.log(filename); - // console.log(cid); - // fetch( - // `/api/codex/v1/download/${cid}`, - // { - // headers: - // (nodeInfo.auth !== null && { - // Authorization: - // (nodeInfo.auth && "Basic " + btoa(nodeInfo.auth)) || "", - // }) || - // {}, - // } - // ) - // .then((response) => response.blob()) - // .then((blob) => { - // const url = window.URL.createObjectURL(new Blob([blob])); - // const link = document.createElement("a"); - // link.href = url; - // link.setAttribute("download", filename); - // document.body.appendChild(link); - // link.click(); - // link.parentNode?.removeChild(link); - // }); + function upload(cid: string) { + fetch( + `/api/codex/v1/storage/request/${cid}`, + { + method: 'POST', + headers: + (nodeInfo.auth !== null && { + Authorization: + (nodeInfo.auth && "Basic " + btoa(nodeInfo.auth)) || "", + }) || + {}, + body: JSON.stringify({ + reward: reward, + duration: duration, + proofProbability: proofProbability, + collateral: collateral + }) + } + ) + // create a popup in the browser to show if the upload was successful + .then((response) => { + if (response.status === 200) { + alert("Upload successful!"); + } else { + alert("Upload failed!"); + } + }) } return ( @@ -47,10 +54,28 @@ function CreateTab() {
setFilename(e.target.value)} + placeholder="Reward" + onChange={(e) => setReward(e.target.value)} /> - +
+ setDuration(e.target.value)} + /> +
+ setProofProbability(e.target.value)} + /> +
+ setCollateral(e.target.value)} + /> + ); } diff --git a/frontend/src/pages/marketplace/tabs/status/status.tsx b/frontend/src/pages/marketplace/tabs/status/status.tsx new file mode 100644 index 0000000..05177e4 --- /dev/null +++ b/frontend/src/pages/marketplace/tabs/status/status.tsx @@ -0,0 +1,92 @@ +import { useCallback, useEffect, useRef } from "react"; +import { useDropzone } from "react-dropzone"; +import styled from "styled-components"; +import UploadedItemModel, { + UploadedItemStatus, +} from "../../../../data/models/UploadedItemModel"; +import UploadedItemComponent from "../../../../components/uploadedItem/UploadedItemComponent"; +import axios from "axios"; + +import { useDexyStore } from "../../../../store"; +import constants from "../../../../util/Constants"; + +function AvailableTab() { +// fetch( +// `/api/codex/v1/storage/request/${cid}`, +// { +// headers: +// (nodeInfo.auth !== null && { +// Authorization: +// (nodeInfo.auth && "Basic " + btoa(nodeInfo.auth)) || "", +// }) || +// {}, +// body: JSON.stringify({ +// reward: reward, +// duration: duration, +// proofProbability: proofProbability, +// collateral: collateral +// }) +// } +// ) +// // create a popup in the browser to show if the upload was successful +// .then((response) => { +// if (response.status === 200) { +// alert("Upload successful!"); +// } else { +// alert("Upload failed!"); +// } +// }) +// } + return ( + + {/*
0 ? "60vh" : "0%", + }} + > + {uploads.map((file) => ( + + ))} +
*/} + + ); +} + +export default AvailableTab; + +const AvailableTabWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; + padding: 16px; + + #dropzone { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + border: 2px dashed #9e9e9e; + border-radius: 8px; + } + + p { + font-size: 1rem; + text-align: center; + } + + #uploaded-items-wrap { + display: flex; + flex-direction: column; + align-items: center; + justify-content: start; + width: 100%; + overflow-y: scroll; + margin-top: 16px; + } +`; diff --git a/frontend/src/store.ts b/frontend/src/store.ts index 19a17b2..b01be82 100644 --- a/frontend/src/store.ts +++ b/frontend/src/store.ts @@ -1,7 +1,7 @@ import { create } from "zustand"; import { persist } from "zustand/middleware"; import UploadedItemModel from "./data/models/UploadedItemModel"; - +import RequestForStorageContractModel from "./data/models/RequestForStorageContractModel"; interface NodeInfo { baseUrl: string; nodeToConnectTo: string | null; @@ -14,6 +14,8 @@ interface NodeInfo { interface DexyState { uploads: UploadedItemModel[]; setUploads: (uploads: UploadedItemModel[]) => void; + storageRequests: RequestForStorageContractModel[]; + setStorageRequests: (storageRequests: RequestForStorageContractModel[]) => void; ftdCid: string; setFtdCid: (cid: string) => void; nodeInfo: NodeInfo; @@ -25,6 +27,8 @@ export const useDexyStore = create()( (set, get) => ({ uploads: [], setUploads: (uploads) => set({ uploads }), + storageRequests: [], + setStorageRequests: (storageRequests) => set({ storageRequests }), ftdCid: "", setFtdCid: (cid) => set({ ftdCid: cid }), nodeInfo: {