Merge branch 'master' into 3-update-of-codex-content-api

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import styled from "styled-components";
 import DataPage from "./pages/data/DataPage";
 import DebugPage from "./pages/debug/DebugPage";
 import SettingsPage from "./pages/settings/SettingsPage";
+import MarketplacePage from "./pages/marketplace/Marketplace";
 
 function PlacehoderPage(props: { name: string }) {
   return (
@@ -24,13 +25,9 @@ export default function App() {
     <Router>
       <AppWrapper>
         <NavigationRail />
-
         <Routes>
           <Route path="/settings" element={<SettingsPage />} />
-          <Route
-            path="/marketplace"
-            element={PlacehoderPage({ name: "Marketplace" })}
-          />
+          <Route path="/marketplace" element={<MarketplacePage/>}/>
           <Route path="/" element={<DataPage />} />
           <Route path="/node" element={PlacehoderPage({ name: "Node" })} />
           <Route path="/debug" element={DebugPage()} />

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/data/tabs/upload/UploadTab.tsx

@@ -55,10 +55,8 @@ function UploadTab() {
                 },
               })
               .then((response) => {
-                console.log(response.data);
-                newCid = response.data.cid;
+                newCid = response.data;
               });
-            console.log(newCid);
 
             filesCopy.current = filesCopy.current.filter(
               (file) => file.cid !== cid

frontend/src/pages/marketplace/Marketplace.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import TabBarView from "../../components/layout/tabBarView/TabBarView";
+import styled from "styled-components";
+
+import { MdFileUpload, MdFileDownload } from "react-icons/md";
+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, MdFileUpload, MdFileDownload]}>
+        <AvailableTab />
+        <TabBarViewPage>
+          <CreateTab />
+        </TabBarViewPage>
+      </TabBarView>
+    </div>
+  );
+}
+
+export default MarketplacePage;
+
+const TabBarViewPage = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+`;

frontend/src/pages/marketplace/tabs/create/CreateTab.tsx

@@ -0,0 +1,142 @@
+import { useState } from "react";
+import constants from "../../../../util/Constants";
+import styled from "styled-components";
+import { useDexyStore } from "../../../../store";
+
+function CreateTab() {
+  const { ftdCid, setFtdCid, nodeInfo } = useDexyStore();
+
+  const [reward, setReward,] = useState("file");
+  const [duration, setDuration,] = useState("file");
+  const [proofProbability, setProofProbability,] = useState("file");
+  const [collateral, setCollateral,] = useState("file");
+  
+
+  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 (
+    <CreateTabWrapper>
+      <input
+        type="text"
+        placeholder="CID"
+        onChange={(e) => {
+          setFtdCid(e.target.value);
+        }}
+        value={ftdCid}
+      />
+      <div id="divider"></div>
+      <input
+        type="text"
+        placeholder="Reward"
+        onChange={(e) => setReward(e.target.value)}
+      />
+      <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>
+  );
+}
+
+export default CreateTab;
+
+const CreateTabWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 75%;
+
+  input {
+    flex: 3;
+    height: 60px;
+    padding: 10px 20px;
+    border: none;
+    background-color: ${constants.surfaceColor};
+    color: ${constants.onSurfaceColor};
+    width: 100%;
+  }
+
+  input:focus {
+    outline: none;
+    border: 2px solid ${constants.primaryColor};
+  }
+
+  input:nth-child(1) {
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+  }
+
+  #divider {
+    width: 2.5px;
+    height: 60px;
+    background-color: #555555;
+  }
+
+  button {
+    flex: 2;
+    height: 60px;
+    border: none;
+    background-color: ${constants.primaryColor};
+    color: ${constants.onPrimaryColor};
+    font-size: 1rem;
+    cursor: pointer;
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+    width: 100%;
+  }
+
+  @media (max-width: 1180px) {
+    width: 80%;
+  }
+
+  @media (max-width: 768px) {
+    width: 85%;
+  }
+
+  @media (max-width: 450px) {
+    width: 90%;
+  }
+`;

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: {