mirror of
https://github.com/codex-storage/codex-frontend.git
synced 2025-03-01 02:30:49 +00:00
WIP adding marketplace functionality
This commit is contained in:
Shaun Orssaud
parent
6b524e610a
commit
22c06afe75
@ -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
|
||||
17
frontend/src/data/models/RequestForStorageContractModel.ts
Normal file
17
frontend/src/data/models/RequestForStorageContractModel.ts
Normal file
@ -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 };
|
||||
@ -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]}>
|
||||
<UploadTab />
|
||||
<TabBarView tabIcons={[MdFileUpload, MdFileDownload, MdFileUpload, MdFileDownload]}>
|
||||
<AvailableTab />
|
||||
<TabBarViewPage>
|
||||
<DownloadTab />
|
||||
<CreateTab />
|
||||
</TabBarViewPage>
|
||||
</TabBarView>
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
`;
|
||||
@ -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() {
|
||||
<div id="divider"></div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Contract Parameters"
|
||||
onChange={(e) => setFilename(e.target.value)}
|
||||
placeholder="Reward"
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
92
frontend/src/pages/marketplace/tabs/status/status.tsx
Normal file
92
frontend/src/pages/marketplace/tabs/status/status.tsx
Normal file
@ -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;
|
||||
}
|
||||
`;
|
||||
@ -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: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user