Duration:
- {props.item.duration}
+ {props.item.duration} seconds
Min Price:
diff --git a/frontend/src/components/layout/durationInput/DurationInput.tsx b/frontend/src/components/layout/durationInput/DurationInput.tsx
new file mode 100644
index 0000000..995cd7e
--- /dev/null
+++ b/frontend/src/components/layout/durationInput/DurationInput.tsx
@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+const DurationInputWrapper = styled.div`
+ display: flex;
+ align-items: center;
+`;
+
+const Input = styled.input`
+ width: 50px;
+ margin: 0 5px;
+ text-align: center;
+`;
+
+interface DurationInputProps {
+ onDurationChange: (duration: { days: number; hours: number; minutes: number; seconds: number }) => void;
+}
+
+const DurationInput: React.FC = ({ onDurationChange }) => {
+ const [days, setDays] = useState(0);
+ const [hours, setHours] = useState(0);
+ const [minutes, setMinutes] = useState(0);
+ const [seconds, setSeconds] = useState(0);
+
+ const handleDurationChange = () => {
+ onDurationChange({ days, hours, minutes, seconds });
+ };
+
+ return (
+
+ setDays(parseInt(e.target.value))}
+ placeholder="Days"
+ onBlur={handleDurationChange}
+ />
+ days
+ setHours(parseInt(e.target.value))}
+ placeholder="Hours"
+ onBlur={handleDurationChange}
+ />
+ hours
+ setMinutes(parseInt(e.target.value))}
+ placeholder="Minutes"
+ onBlur={handleDurationChange}
+ />
+ minutes
+ setSeconds(parseInt(e.target.value))}
+ placeholder="Seconds"
+ onBlur={handleDurationChange}
+ />
+ seconds
+
+ );
+};
+
+export default DurationInput;
\ No newline at end of file
diff --git a/frontend/src/components/layout/durationInput/DurationInputWithFloatingBox.tsx b/frontend/src/components/layout/durationInput/DurationInputWithFloatingBox.tsx
new file mode 100644
index 0000000..5d5e66e
--- /dev/null
+++ b/frontend/src/components/layout/durationInput/DurationInputWithFloatingBox.tsx
@@ -0,0 +1,41 @@
+// DurationInputWithFloatingBox.tsx
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import DurationInput from './DurationInput';
+
+const FloatingBoxWrapper = styled.div`
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ padding: 20px;
+ background: #555555;
+ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+ border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+`;
+
+const CloseButton = styled.button`
+ margin-top: 10px;
+ cursor: pointer;
+ flex: 1;
+`;
+
+interface DurationInputWithFloatingBoxProps {
+ isOpen: boolean;
+ onClose: () => void;
+ onDurationChange: (duration: { days: number; hours: number; minutes: number; seconds: number }) => void;
+}
+
+const DurationInputWithFloatingBox: React.FC = ({ isOpen, onClose, onDurationChange }) => {
+ return (
+
+
+ Close
+
+ );
+};
+
+export default DurationInputWithFloatingBox;
diff --git a/frontend/src/pages/marketplace/tabs/Availability/OfferStorage.tsx b/frontend/src/pages/marketplace/tabs/Availability/OfferStorage.tsx
index e7d348f..419bf33 100644
--- a/frontend/src/pages/marketplace/tabs/Availability/OfferStorage.tsx
+++ b/frontend/src/pages/marketplace/tabs/Availability/OfferStorage.tsx
@@ -2,17 +2,29 @@ import { useState } from "react";
import constants from "../../../../util/Constants";
import styled from "styled-components";
import { useDexyStore } from "../../../../store";
+import DurationInputWithFloatingBox from "../../../../components/layout/durationInput/DurationInputWithFloatingBox"
function OfferStorage() {
const { ftdCid, setFtdCid, nodeInfo } = useDexyStore();
- const [size, setSize,] = useState("file");
- const [duration, setDuration,] = useState("file");
- const [minPrice, setMinPrice,] = useState("file");
- const [maxCollateral, setMaxCollateral,] = useState("file");
- const [expiry, setExpiry,] = useState("file");
+ const [size, setSize,] = useState("");
+ const [duration, setDuration,] = useState("");
+ const [minPrice, setMinPrice,] = useState("");
+ const [maxCollateral, setMaxCollateral,] = useState("");
const [error, setError] = useState("");
+ const [isBoxOpen, setBoxOpen] = useState(false);
+
+ const toggleBox = () => {
+ setBoxOpen(!isBoxOpen);
+ };
+
+ const handleDurationChange = (newDuration: { days: number; hours: number; minutes: number; seconds: number }) => {
+ const { days, hours, minutes, seconds } = newDuration;
+ const totalSeconds = days * 24 * 60 * 60 + hours * 60 * 60 + minutes * 60 + seconds;
+ setDuration(totalSeconds.toString());
+ };
+
function upload(cid: string) {
fetch(
@@ -30,7 +42,6 @@ function OfferStorage() {
duration: duration,
minPrice: minPrice,
maxCollateral: maxCollateral,
- expiry: expiry
})
}
)
@@ -68,15 +79,20 @@ function OfferStorage() {
setSize(e.target.value)}
/>
- setDuration(e.target.value)}
- />
+
+
+
+
+
setMaxCollateral(e.target.value)}
/>
-
- setExpiry(e.target.value)}
- />
{error && (
diff --git a/frontend/src/pages/marketplace/tabs/Rosc/CreateTab.tsx b/frontend/src/pages/marketplace/tabs/Rosc/CreateTab.tsx
index 1011830..d674445 100644
--- a/frontend/src/pages/marketplace/tabs/Rosc/CreateTab.tsx
+++ b/frontend/src/pages/marketplace/tabs/Rosc/CreateTab.tsx
@@ -2,16 +2,29 @@ import { useState } from "react";
import constants from "../../../../util/Constants";
import styled from "styled-components";
import { useDexyStore } from "../../../../store";
+import DurationInputWithFloatingBox from "../../../../components/layout/durationInput/DurationInputWithFloatingBox"
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");
+ const [reward, setReward,] = useState("");
+ const [duration, setDuration,] = useState("");
+ const [proofProbability, setProofProbability,] = useState("");
+ const [manualProbability, setManualProbability] = useState("");
+ const [collateral, setCollateral,] = useState("");
const [error, setError] = useState("");
+ const [isBoxOpen, setBoxOpen] = useState(false);
+
+ const toggleBox = () => {
+ setBoxOpen(!isBoxOpen);
+ };
+
+ const handleDurationChange = (newDuration: { days: number; hours: number; minutes: number; seconds: number }) => {
+ const { days, hours, minutes, seconds } = newDuration;
+ const totalSeconds = days * 24 * 60 * 60 + hours * 60 * 60 + minutes * 60 + seconds;
+ setDuration(totalSeconds.toString());
+ };
function upload(cid: string) {
fetch(
@@ -70,17 +83,16 @@ function CreateTab() {
onChange={(e) => setReward(e.target.value)}
/>
- setDuration(e.target.value)}
- />
-
- setProofProbability(e.target.value)}
- />
+
+
+
+
+