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 = () => {
+  const toggleBoxDuration = () => {
-    setBoxOpen(!isBoxOpen);
+    setBoxOpenDuration(!isBoxOpenDuration);
   };
 
-  const handleDateChange = (selectedDate: any) => {
+  const toggleBoxExpiry = () => {
-    const timestamp = moment(selectedDate).unix();
+    setBoxOpenExpiry(!isBoxOpenExpiry);
-    setExpiry(timestamp.toString()); // Format the date as needed
+  };
-    
+
+  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
+        <div className="row">
-          type="text"
+          <div className="field">
-          placeholder="CID"
+            <label>CID</label>
-          onChange={(e) => {
+            <input
-            setFtdCid(e.target.value);
+              type="text"
-          }}
+              placeholder="CID"
-          value={ftdCid}
+              onChange={(e) => {
-        />
+                setFtdCid(e.target.value);
-        <div id="divider"></div>
+              }}
-        <input
+              value={ftdCid}
-          type="text"
+            />
-          placeholder="Duration"
+          </div>
-          value={duration}
+        </div>
-          onClick={toggleBox}
+
-        >
+        <div className="row">
-        </input>
+          <div className="field">
-        <DurationInputWithFloatingBox isOpen={isBoxOpen} onClose={toggleBox} onDurationChange={handleDurationChange} />
+            <label>Duration</label>
-        <div id="divider"></div>
+            <input
-        <input
+              type="text"
-          type="text"
+              placeholder="Duration"
-          placeholder="Proof Probability"
+              value={duration}
-          onChange={(e) => {
+              onClick={toggleBoxDuration}
-            setProofProbability(e.target.value);
+            />
-          }}
+          </div>
-          value={proofProbability}
+          <div className="field">
-        />
+            <label>Expiry</label>
-        <div id="divider"></div>
+            <input
-        <input
+              type="text"
-          type="text"
+              placeholder="Expiry"
-          placeholder="Reward"
+              value={expiry}
-          onChange={(e) => setReward(e.target.value)}
+              onClick={toggleBoxExpiry}
-          value={reward}
+            />
-        />
+          </div>
-        <div id="divider"></div>
+        </div>
-        {/* <input
+
-          type="text"
+        <div className="row">
-          placeholder="Expiry"
+          <div className="field">
-          onClick={toggleCalendar}
+            <label>Reward</label>
-          value={expiry}
+            <input
-        /> */}
+              type="text"
-        <DatePicker
+              placeholder="Reward"
-          selected={expiry ? moment.unix(parseInt(expiry)).toDate() : null}
+              onChange={(e) => setReward(e.target.value)}
-          onChange={handleDateChange}
+              value={reward}
-          minDate={new Date()} // Allow only future dates
+            />
-          showTimeSelect
+          </div>
-          timeFormat="HH:mm"
+          <div className="field">
-          timeIntervals={15}
+            <label>Nodes</label>
-          timeCaption="Time"
+            <input
-          dateFormat="MMMM Do YYYY, h:mm:ss a"
+              type="text"
-          placeholderText="Select Expiry Date"
+              placeholder="Nodes"
-        />
+              onChange={(e) => {
-        <div id="divider"></div>
+                setNodes(e.target.value);
-        <input
+              }}
-          type="text"
+              value={nodes}
-          placeholder="Nodes"
+            />
-          onChange={(e) => {
+          </div>
-            setNodes(e.target.value);
+          <div className="field">
-          }}
+            <label>Tolerance</label>
-          value={nodes}
+            <input
-        />
+              type="text"
-        <div id="divider"></div>
+              placeholder="Tolerance"
-        <input
+              onChange={(e) => {
-          type="text"
+                setTolerance(e.target.value);
-          placeholder="Tolerance"
+              }}
-          onChange={(e) => {
+              value={tolerance}
-            setTolerance(e.target.value);
+            />
-          }}
+          </div>
-          value={tolerance}
+          <div className="field">
-        />
+            <label>Collateral</label>
-        <div id="divider"></div>
+            <input
-        <input
+              type="text"
-          type="text"
+              placeholder="Collateral"
-          placeholder="collateral"
+              onChange={(e) => setCollateral(e.target.value)}
-          onChange={(e) => setCollateral(e.target.value)}
+            />
-        />
+          </div>
-        <button onClick={() => upload(ftdCid)}>Create</button>
+        </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 {
+h1 {
-    flex: 3;
+  color: ${constants.onSurfaceColor};
-    height: 60px;
+  font-size: 24px;
-    padding: 10px 20px;
+  margin: 16px;
-    border: none;
+}
-    background-color: ${constants.surfaceColor};
-    color: ${constants.onSurfaceColor};
-    width: 100%;
-  }
 
-  input:focus {
+.inputs {
-    outline: none;
+  padding: 16px;
-    border: 2px solid ${constants.primaryColor};
+  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) {
+.field {
-    border-top-left-radius: 8px;
+  display: flex;
-    border-bottom-left-radius: 8px;
+  align-items: left;
-  }
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  padding: 0px 4px;
+}
 
-  #divider {
+h4 {
-    width: 2.5px;
+  color: ${constants.onSurfaceColor};
-    height: 60px;
+  font-size: 20px;
-    background-color: #555555;
+  margin: 16px;
-  }
+}
 
-  button {
+input {
-    flex: 2;
+  height: 60px;
-    height: 60px;
+  padding: 10px 20px;
-    border: none;
+  border: none;
-    background-color: ${constants.primaryColor};
+  background-color: ${constants.surfaceColor};
-    color: ${constants.onPrimaryColor};
+  color: ${constants.onSurfaceColor};
-    font-size: 1rem;
+  width: 100%;
-    cursor: pointer;
+  border-radius: 8px;
-    border-top-right-radius: 8px;
+  margin: 16px 0px;
-    border-bottom-right-radius: 8px;
+  border: 2px dashed #9e9e9e;
-    width: 100%;
+  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;
-  }
-  `;