ROSC design update

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}

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

@@ -17,25 +17,36 @@ function CreateTab() {
   const [expiry, setExpiry] = useState("")
   const [nodes, setNodes] = useState("")
   const [tolerance, setTolerance] = useState("")
-  const [collateral, setCollateral,] = useState("");
+  const [collateral, setCollateral] = useState("");
   const [error, setError] = useState("");
 
-  const [isBoxOpen, setBoxOpen] = useState(false);
+  const [isBoxOpenDuration, setBoxOpenDuration] = useState(false);
+  const [isBoxOpenExpiry, setBoxOpenExpiry] = useState(false);
 
-  const toggleBox = () => {
-    setBoxOpen(!isBoxOpen);
+  const toggleBoxDuration = () => {
+    setBoxOpenDuration(!isBoxOpenDuration);
   };
 
-  const handleDateChange = (selectedDate: any) => {
-    const timestamp = moment(selectedDate).unix();
-    setExpiry(timestamp.toString()); // Format the date as needed
-    
+  const toggleBoxExpiry = () => {
+    setBoxOpenExpiry(!isBoxOpenExpiry);
+  };
+
+  const handleExpiryChange = (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;
+    const timestamp = moment().unix() + totalSeconds;
+    setExpiry(timestamp.toString());
+
   };
 
   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());
+    
+    if (totalSeconds >= 60 && totalSeconds <= 86400) {
+      setDuration(totalSeconds.toString());
+    }
+    
   };
 
   function upload(cid: string) {
@@ -80,88 +91,121 @@ function CreateTab() {
       });
   }
 
+  const handleProofProbabilityChange = (e: any) => {
+    const value = e.target.value;
+    if (value === "" || (value >= 0 && value <= 99)) {
+      setProofProbability(value);
+    }
+  };
+
   return (
     <>
+      <DurationInputWithFloatingBox isOpen={isBoxOpenDuration} onClose={toggleBoxDuration} onDurationChange={handleDurationChange} />
+      <DurationInputWithFloatingBox isOpen={isBoxOpenExpiry} onClose={toggleBoxExpiry} onDurationChange={handleExpiryChange} />
       <CreateTabWrapper>
-        <input
-          type="text"
-          placeholder="CID"
-          onChange={(e) => {
-            setFtdCid(e.target.value);
-          }}
-          value={ftdCid}
-        />
-        <div id="divider"></div>
-        <input
-          type="text"
-          placeholder="Duration"
-          value={duration}
-          onClick={toggleBox}
-        >
-        </input>
-        <DurationInputWithFloatingBox isOpen={isBoxOpen} onClose={toggleBox} onDurationChange={handleDurationChange} />
-        <div id="divider"></div>
-        <input
-          type="text"
-          placeholder="Proof Probability"
-          onChange={(e) => {
-            setProofProbability(e.target.value);
-          }}
-          value={proofProbability}
-        />
-        <div id="divider"></div>
-        <input
-          type="text"
-          placeholder="Reward"
-          onChange={(e) => setReward(e.target.value)}
-          value={reward}
-        />
-        <div id="divider"></div>
-        {/* <input
-          type="text"
-          placeholder="Expiry"
-          onClick={toggleCalendar}
-          value={expiry}
-        /> */}
-        <DatePicker
-          selected={expiry ? moment.unix(parseInt(expiry)).toDate() : null}
-          onChange={handleDateChange}
-          minDate={new Date()} // Allow only future dates
-          showTimeSelect
-          timeFormat="HH:mm"
-          timeIntervals={15}
-          timeCaption="Time"
-          dateFormat="MMMM Do YYYY, h:mm:ss a"
-          placeholderText="Select Expiry Date"
-        />
-        <div id="divider"></div>
-        <input
-          type="text"
-          placeholder="Nodes"
-          onChange={(e) => {
-            setNodes(e.target.value);
-          }}
-          value={nodes}
-        />
-        <div id="divider"></div>
-        <input
-          type="text"
-          placeholder="Tolerance"
-          onChange={(e) => {
-            setTolerance(e.target.value);
-          }}
-          value={tolerance}
-        />
-        <div id="divider"></div>
-        <input
-          type="text"
-          placeholder="collateral"
-          onChange={(e) => setCollateral(e.target.value)}
-        />
-        <button onClick={() => upload(ftdCid)}>Create</button>
+        <div className="row">
+          <div className="field">
+            <label>CID</label>
+            <input
+              type="text"
+              placeholder="CID"
+              onChange={(e) => {
+                setFtdCid(e.target.value);
+              }}
+              value={ftdCid}
+            />
+          </div>
+        </div>
+
+        <div className="row">
+          <div className="field">
+            <label>Duration</label>
+            <input
+              type="text"
+              placeholder="Duration"
+              value={duration}
+              onClick={toggleBoxDuration}
+            />
+          </div>
+          <div className="field">
+            <label>Expiry</label>
+            <input
+              type="text"
+              placeholder="Expiry"
+              value={expiry}
+              onClick={toggleBoxExpiry}
+            />
+          </div>
+        </div>
+
+        <div className="row">
+          <div className="field">
+            <label>Reward</label>
+            <input
+              type="text"
+              placeholder="Reward"
+              onChange={(e) => setReward(e.target.value)}
+              value={reward}
+            />
+          </div>
+          <div className="field">
+            <label>Nodes</label>
+            <input
+              type="text"
+              placeholder="Nodes"
+              onChange={(e) => {
+                setNodes(e.target.value);
+              }}
+              value={nodes}
+            />
+          </div>
+          <div className="field">
+            <label>Tolerance</label>
+            <input
+              type="text"
+              placeholder="Tolerance"
+              onChange={(e) => {
+                setTolerance(e.target.value);
+              }}
+              value={tolerance}
+            />
+          </div>
+          <div className="field">
+            <label>Collateral</label>
+            <input
+              type="text"
+              placeholder="Collateral"
+              onChange={(e) => setCollateral(e.target.value)}
+            />
+          </div>
+        </div>
+        <div className="row">
+          <div className="field">
+            <label>Proof Probability</label>
+            <div>
+            <select
+              value={proofProbability}
+              onChange={handleProofProbabilityChange}
+            >
+              <option value="">Select Proof Probability</option>
+              <option value="1">Low Durability Guarantee</option>
+              <option value="3">Medium Durability Guarantee</option>
+              <option value="6">Strong Durability Guarantee</option>
+            </select>
+          </div>
+          <input
+            type="text"
+            placeholder="Custom Proof Probability"
+            value={proofProbability}
+            onChange={handleProofProbabilityChange}
+          />
+          </div>
+          <button onClick={() => upload(ftdCid)}>Create</button>
+        </div>
+
       </CreateTabWrapper>
       {error && (
-        <p style={{ color: "red", marginTop: "10px", textAlign: "center" }}>
+        <p style={{ color: "red", marginTop: "0px", textAlign: "center" }}>
           {error}
         </p>
       )}
@@ -172,86 +216,105 @@ function CreateTab() {
 export default CreateTab;
 
 const CreateTabWrapper = styled.div`
+flex: 1;
+display: flex;
+flex-direction: column;
+
+main {
   display: flex;
-  flex-direction: row;
   align-items: center;
   justify-content: center;
-  width: 75%;
+  height: 100%;
+  width: 100%;
+  padding: 16px 0px;
+}
 
-  input {
-    flex: 3;
-    height: 60px;
-    padding: 10px 20px;
-    border: none;
-    background-color: ${constants.surfaceColor};
-    color: ${constants.onSurfaceColor};
-    width: 100%;
-  }
+h1 {
+  color: ${constants.onSurfaceColor};
+  font-size: 24px;
+  margin: 16px;
+}
 
-  input:focus {
-    outline: none;
-    border: 2px solid ${constants.primaryColor};
-  }
+.inputs {
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #141414;
+  border-radius: 8px;
+  width: 50%;
+}
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
-  input:nth-child(1) {
-    border-top-left-radius: 8px;
-    border-bottom-left-radius: 8px;
-  }
+.field {
+  display: flex;
+  align-items: left;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  padding: 0px 4px;
+}
 
-  #divider {
-    width: 2.5px;
-    height: 60px;
-    background-color: #555555;
-  }
+h4 {
+  color: ${constants.onSurfaceColor};
+  font-size: 20px;
+  margin: 16px;
+}
 
-  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%;
-  }
+input {
+  height: 60px;
+  padding: 10px 20px;
+  border: none;
+  background-color: ${constants.surfaceColor};
+  color: ${constants.onSurfaceColor};
+  width: 100%;
+  border-radius: 8px;
+  margin: 16px 0px;
+  border: 2px dashed #9e9e9e;
+  border-radius: 8px;
+  text-align: center;
+}
 
-  @media (max-width: 1180px) {
+input:focus {
+  outline: none;
+  border: 2px solid ${constants.primaryColor};
+}
+
+button {
+  height: 50%;
+  width: 50%;
+  margin-top: 40px;
+  border: none;
+  background-color: ${constants.primaryColor};
+  color: ${constants.onPrimaryColor};
+  font-size: 1rem;
+  cursor: pointer;
+  border-radius: 8px;
+}
+
+button span {
+  font-weight: bold;
+}
+
+@media (max-width: 1180px) {
+  .inputs {
     width: 80%;
   }
+}
 
-  @media (max-width: 768px) {
+@media (max-width: 768px) {
+  .inputs {
     width: 85%;
   }
+}
 
-  @media (max-width: 450px) {
+@media (max-width: 450px) {
+  .inputs {
     width: 90%;
   }
-`;
-
-const CustomDropdown = styled.div`
-  position: relative;
-  display: inline-block;
-  width: 150px;
-  `;
-
-const DropdownContent = styled.div`
-  display: block;
-  position: absolute;
-  background-color: #555555;
-  min-width: 120px;
-  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-  z-index: 4;
-  right: 0;
-  `;
-
-const DropdownOption = styled.div`
-  padding: 12px 16px;
-  text-decoration: none;
-  display: block;
-  cursor: pointer;
-  &:hover {
-    background-color: #f1f1f1;
-  }
-  `;
+}
+`;