fix: ppt params config at the bottom

txpipe · Apr 26, 2024 · e45685e · e45685e
1 parent 49fae47
commit e45685e
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 51 deletions.
diff --git a/web/app/components/RootSection.tsx b/web/app/components/RootSection.tsx
@@ -1,20 +1,21 @@
 import { useLocation } from "@remix-run/react";
 import { Section } from "napi-pallas";
 import { useState } from "react";
+import { EraType } from "../interfaces";
 import { SearchParams, getTopicMeta } from "../utils";
 import { HexBlock, PropBlock, TopicMeta } from "./constructors";
 import { DataSection, ValidationInformation } from "./index";
 
 export function RootSection(props: {
   data: Section;
   topics: Record<string, TopicMeta>;
-  era: string;
+  era: EraType;
 }) {
   const location = useLocation();
   const searchParams = new URLSearchParams(location.search);
   const initialOpen = searchParams.get(SearchParams.OPEN) === "true";
   const goesBeginning = searchParams.get(SearchParams.BEGINNING) === "true";
-  const [open, setOpen] = useState<boolean | undefined>(undefined);
+  const [open, setOpen] = useState<boolean>(initialOpen);
   const handleClick = () => setOpen(!open);
   const topic = getTopicMeta(props.data.topic, props.topics);
 

diff --git a/web/app/components/Validations/Configurations/ContextTab.tsx b/web/app/components/Validations/Configurations/ContextTab.tsx
@@ -44,32 +44,6 @@ export const ContextTab = () => {
   };
   return (
     <div className="flex flex-col overflow-y-auto h-96">
-      <div className="text-left text-3xl mb-3">Protocol Parameters</div>
-      <div className="grid xl:grid-cols-5 lg:grid-cols-2 gap-3 text-left w-full p-2">
-        {paramsList.map((param, index) => (
-          <div key={param.name}>
-            <label htmlFor={param.name} className="">
-              {param.name.replace(/_/g, " ")}
-            </label>
-            <Input
-              id={param.name}
-              name={param.name}
-              type="number"
-              disabled={isByron}
-              value={Number(param.value).toString() ?? 0}
-              onChange={changeParam(index)}
-              className={`block w-full px-4 py-2 mt-1 border-2 bg-white border-black h-16 shadow shadow-black rounded-lg rounded-b-xl border-b-8 appearance-none text-black placeholder-gray-400 text-2xl outline-none
-            ${
-              isByron
-                ? "bg-slate-300 cursor-not-allowed"
-                : "focus:bg-pink-200 hover:bg-pink-200"
-            }`}
-              inputSize="small"
-            />
-          </div>
-        ))}
-      </div>
-      <hr className="border-2 border-black my-4" />
       <div>
         <div className="text-left text-3xl mt-3">Select a Network</div>
         {/* To get the network from the form*/}
@@ -121,16 +95,43 @@ export const ContextTab = () => {
       </div>
       <hr className="border-2 border-black my-4" />
       <div>
-        <div className="text-left text-3xl mt-3">Select a Block Slot</div>
+        <div className="text-left text-3xl m-3">Select a Block Slot</div>
         <Input
           type="number"
           name="Block_slot"
           value={context.blockSlot}
           onChange={changeBlockSlot}
-          className="focus:bg-pink-200"
+          className="focus:bg-pink-200 mb-3"
           inputSize="small"
         />
       </div>
+
+      <hr className="border-2 border-black my-4" />
+      <div className="text-left text-3xl mb-3">Protocol Parameters</div>
+      <div className="grid xl:grid-cols-5 lg:grid-cols-2 gap-3 text-left w-full p-2">
+        {paramsList.map((param, index) => (
+          <div key={param.name}>
+            <label htmlFor={param.name} className="">
+              {param.name.replace(/_/g, " ")}
+            </label>
+            <Input
+              id={param.name}
+              name={param.name}
+              type="number"
+              disabled={isByron}
+              value={Number(param.value).toString() ?? 0}
+              onChange={changeParam(index)}
+              className={`block w-full px-4 py-2 mt-1 border-2 bg-white border-black h-16 shadow shadow-black rounded-lg rounded-b-xl border-b-8 appearance-none text-black placeholder-gray-400 text-2xl outline-none
+            ${
+              isByron
+                ? "bg-slate-300 cursor-not-allowed"
+                : "focus:bg-pink-200 hover:bg-pink-200"
+            }`}
+              inputSize="small"
+            />
+          </div>
+        ))}
+      </div>
     </div>
   );
 };
diff --git a/web/app/components/Validations/Configurations/UITab.tsx b/web/app/components/Validations/Configurations/UITab.tsx
@@ -13,7 +13,7 @@ export const UITab = () => {
 
   const changeValidations =
     (validation: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
-      const isChecked = event.target.checked;
+      const isChecked = !event.target.checked;
       const newSearchParams = new URLSearchParams(location.search);
       const currentValues =
         newSearchParams.get(SearchParams.LIST)?.split(",") ?? [];
@@ -33,7 +33,7 @@ export const UITab = () => {
     };
 
   const changeQuery =
-    (q: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    (q: SearchParams) => (e: React.ChangeEvent<HTMLInputElement>) => {
       const isChecked = e.target.checked;
       const newSearchParams = new URLSearchParams(location.search);
 
@@ -61,22 +61,22 @@ export const UITab = () => {
                 border-2 border-black  rounded-b-full border-b-4 px-6 shadow-black shadow-small
                 transition-all duration-400 ease-in-out ${
                   shownValidations.includes(validation.name)
-                    ? "bg-red-200 "
-                    : "bg-green-200 "
+                    ? "bg-green-200 "
+                    : "bg-red-200 "
                 }`}
               >
                 <input
                   id={validation.name}
                   name={validation.name}
-                  checked={shownValidations.includes(validation.name)}
+                  defaultChecked={shownValidations.includes(validation.name)}
                   type="checkbox"
                   onChange={changeValidations(validation.name)}
                   className={`toggle-checkbox absolute block w-3 h-3 rounded-full  appearance-none cursor-pointer 
                   transition-all duration-400 ease-in-out bg-black
                   ${
                     shownValidations.includes(validation.name)
-                      ? "left-2 "
-                      : "left-8"
+                      ? "left-8"
+                      : "left-2"
                   } `}
                 />
               </div>
@@ -93,25 +93,49 @@ export const UITab = () => {
           <label htmlFor={"alwaysOpen"} className="text-xl">
             Validations section always open
           </label>
-          <input
-            id={"alwaysOpen"}
-            checked={initialOpen}
-            type="checkbox"
-            className=""
-            onChange={changeQuery(SearchParams.OPEN)}
-          />
+          <div className="relative inline-block w-10 mr-4 align-top select-none ">
+            <div
+              className={`toggle-label flex items-center overflow-hidden h-7 rounded-full cursor-pointer 
+                border-2 border-black  rounded-b-full border-b-4 px-6 shadow-black shadow-small
+                transition-all duration-400 ease-in-out ${
+                  initialOpen ? "bg-green-200 " : "bg-red-200 "
+                }`}
+            >
+              <input
+                id={"alwaysOpen"}
+                checked={initialOpen}
+                type="checkbox"
+                onChange={changeQuery(SearchParams.OPEN)}
+                className={`toggle-checkbox absolute block w-3 h-3 rounded-full  appearance-none cursor-pointer 
+                  transition-all duration-400 ease-in-out bg-black
+                  ${initialOpen ? "left-8 " : "left-2"} `}
+              />
+            </div>
+          </div>
         </div>
         <div className="w-full text-left flex justify-between p-2">
           <label htmlFor={"beginning"} className="text-xl">
             Validations section at the beginning
           </label>
-          <input
-            id={"beginning"}
-            checked={beginning}
-            type="checkbox"
-            className=""
-            onChange={changeQuery(SearchParams.BEGINNING)}
-          />
+          <div className="relative inline-block w-10 mr-4 align-top select-none ">
+            <div
+              className={`toggle-label flex items-center overflow-hidden h-7 rounded-full cursor-pointer 
+                border-2 border-black  rounded-b-full border-b-4 px-6 shadow-black shadow-small
+                transition-all duration-400 ease-in-out ${
+                  beginning ? "bg-green-200 " : "bg-red-200 "
+                }`}
+            >
+              <input
+                id={"beginning"}
+                checked={beginning}
+                type="checkbox"
+                onChange={changeQuery(SearchParams.BEGINNING)}
+                className={`toggle-checkbox absolute block w-3 h-3 rounded-full  appearance-none cursor-pointer 
+                  transition-all duration-400 ease-in-out bg-black
+                  ${beginning ? "left-8 " : "left-2"} `}
+              />
+            </div>
+          </div>
         </div>
       </div>
     </div>