WIP adding marketplace functionality

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

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 };

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 (
     <div>
-      <TabBarView tabIcons={[MdFileUpload, MdFileDownload]}>
+      <TabBarView tabIcons={[MdFileUpload, MdFileDownload, MdFileUpload, MdFileDownload]}>
-        <UploadTab />
+        <AvailableTab />
         <TabBarViewPage>
-          <DownloadTab />
+          <CreateTab />
         </TabBarViewPage>
       </TabBarView>
     </div>

frontend/src/pages/marketplace/tabs/available/AvailableTab.tsx

@@ -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<UploadedItemModel[]>(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 (
-    <AvailableTabWrapper>
-      <div>
-      </div>
-    </AvailableTabWrapper>
-  );
-}
-
-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;
-  }
-`;

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);
+  function upload(cid: string) {
-    // console.log(cid);
+    fetch(
-    // fetch(
+      `/api/codex/v1/storage/request/${cid}`,
-    //   `/api/codex/v1/download/${cid}`,
+      {
-    //   {
+        method: 'POST',
-    //     headers:
+        headers:
-    //       (nodeInfo.auth !== null && {
+          (nodeInfo.auth !== null && {
-    //         Authorization:
+            Authorization:
-    //           (nodeInfo.auth && "Basic " + btoa(nodeInfo.auth)) || "",
+              (nodeInfo.auth && "Basic " + btoa(nodeInfo.auth)) || "",
-    //       }) ||
+          }) ||
-    //       {},
+          {},
-    //   }
+        body: JSON.stringify({
-    // )
+          reward: reward,
-    //   .then((response) => response.blob())
+          duration: duration,
-    //   .then((blob) => {
+          proofProbability: proofProbability,
-    //     const url = window.URL.createObjectURL(new Blob([blob]));
+          collateral: collateral
-    //     const link = document.createElement("a");
+        })
-    //     link.href = url;
+      }
-    //     link.setAttribute("download", filename);
+    )
-    //     document.body.appendChild(link);
+    // create a popup in the browser to show if the upload was successful
-    //     link.click();
+    .then((response) => {
-    //     link.parentNode?.removeChild(link);
+        if (response.status === 200) {
-    //   });
+          alert("Upload successful!");
+        } else {
+          alert("Upload failed!");
+        }
+      })
   }
 
   return (
@@ -47,10 +54,28 @@ function CreateTab() {
       <div id="divider"></div>
       <input
         type="text"
-        placeholder="Contract Parameters"
+        placeholder="Reward"
-        onChange={(e) => setFilename(e.target.value)}
+        onChange={(e) => setReward(e.target.value)}
       />
-      <button onClick={() => download(ftdCid)}>Download</button>
+      <div id="divider"></div>
+      <input
+        type="text"
+        placeholder="Duration"
+        onChange={(e) => setDuration(e.target.value)}
+      />
+      <div id="divider"></div>
+      <input
+        type="text"
+        placeholder="ProofProbability"
+        onChange={(e) => setProofProbability(e.target.value)}
+      />
+      <div id="divider"></div>
+      <input
+        type="text"
+        placeholder="collateral"
+        onChange={(e) => setCollateral(e.target.value)}
+      />
+      <button onClick={() => upload(ftdCid)}>Download</button>
     </CreateTabWrapper>
   );
 }

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 (
+    <AvailableTabWrapper>
+      {/* <div
+        id="uploaded-items-wrap"
+        style={{
+          maxHeight: uploads.length > 0 ? "60vh" : "0%",
+        }}
+      >
+        {uploads.map((file) => (
+          <UploadedItemComponent item={file} key={file.cid} />
+        ))}
+      </div> */}
+    </AvailableTabWrapper>
+  );
+}
+
+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;
+  }
+`;

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<DexyState>()(
     (set, get) => ({
       uploads: [],
       setUploads: (uploads) => set({ uploads }),
+      storageRequests: [],
+      setStorageRequests: (storageRequests) => set({ storageRequests }),
       ftdCid: "",
       setFtdCid: (cid) => set({ ftdCid: cid }),
       nodeInfo: {