From bd2d2befbcee88b734ece774856436732f70875c Mon Sep 17 00:00:00 2001 From: Shaun Orssaud Date: Wed, 17 Jan 2024 13:00:37 -0600 Subject: [PATCH] Added custom duration --- docker-compose.yml | 2 +- .../AvailableComponent/AvailableComponent.tsx | 4 +- .../layout/durationInput/DurationInput.tsx | 67 ++++++++++++++++++ .../DurationInputWithFloatingBox.tsx | 41 +++++++++++ .../tabs/Availability/OfferStorage.tsx | 46 ++++++++----- .../pages/marketplace/tabs/Rosc/CreateTab.tsx | 68 +++++++++++++++---- 6 files changed, 192 insertions(+), 36 deletions(-) create mode 100644 frontend/src/components/layout/durationInput/DurationInput.tsx create mode 100644 frontend/src/components/layout/durationInput/DurationInputWithFloatingBox.tsx diff --git a/docker-compose.yml b/docker-compose.yml index 1834a4a..e12c35d 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -8,4 +8,4 @@ services: ports: - "3000:80" environment: - - codex_url=${codex_url:-http://kubernetes.docker.internal:30001} + - codex_url=${codex_url:-http://kubernetes.docker.internal:30003} diff --git a/frontend/src/components/AvailableComponent/AvailableComponent.tsx b/frontend/src/components/AvailableComponent/AvailableComponent.tsx index 03ccce6..ff094ef 100644 --- a/frontend/src/components/AvailableComponent/AvailableComponent.tsx +++ b/frontend/src/components/AvailableComponent/AvailableComponent.tsx @@ -16,13 +16,13 @@ function AvailableComponent(props: { item: AvailabilityModel }) {

Size: - {props.item.size} + {props.item.size} seconds

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)} - /> +
+ + +
+