UPD prepared marketplace pages for development

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
+          <Route path="/marketplace" element={<MarketplacePage/>}/>
-            path="/marketplace"
-            element={PlacehoderPage({ name: "Marketplace" })}
-          />
           <Route path="/" element={<DataPage />} />
           <Route path="/node" element={PlacehoderPage({ name: "Node" })} />
           <Route path="/debug" element={DebugPage()} />

frontend/src/pages/data/tabs/upload/UploadTab.tsx

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

frontend/src/pages/marketplace/Marketplace.tsx

@@ -0,0 +1,32 @@
+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/available/AvailableTab";
+import DownloadTab from "./tabs/create/CreateTab";
+
+function MarketplacePage() {
+  return (
+    <div>
+      <TabBarView tabIcons={[MdFileUpload, MdFileDownload]}>
+        <UploadTab />
+        <TabBarViewPage>
+          <DownloadTab />
+        </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/available/AvailableTab.tsx

@@ -0,0 +1,150 @@
+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

@@ -0,0 +1,117 @@
+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 [filename, setFilename] = 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);
+    //   });
+  }
+
+  return (
+    <CreateTabWrapper>
+      <input
+        type="text"
+        placeholder="CID"
+        onChange={(e) => {
+          setFtdCid(e.target.value);
+        }}
+        value={ftdCid}
+      />
+      <div id="divider"></div>
+      <input
+        type="text"
+        placeholder="Contract Parameters"
+        onChange={(e) => setFilename(e.target.value)}
+      />
+      <button onClick={() => download(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%;
+  }
+`;