style: checkbox component

web/app/components/Button.tsx

@@ -1,13 +1,13 @@
 import { ButtonHTMLAttributes } from "react";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  type: "submit" | "button";
+  type?: "submit" | "button";
   className?: string;
   color?: "blue" | "pink";
 }
 
 export const Button = ({
-  type,
+  type = "button",
   children,
   className: customClassName,
   color = "blue",

web/app/components/Input.tsx

@@ -4,6 +4,8 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   name: string;
   className?: string;
   inputSize?: "small" | "medium";
+  label?: string;
+  isCheckbox?: boolean;
 }
 
 export const Input = ({
@@ -16,7 +18,42 @@ export const Input = ({
   placeholder,
   className: customClassName,
   inputSize = "medium",
+  label,
+  isCheckbox = false,
+  checked,
 }: InputProps) => {
+  if (isCheckbox) {
+    return (
+      <div className="w-full text-left flex justify-between p-2">
+        <label htmlFor={id} className="text-xl select-none">
+          {label}
+        </label>
+        <div className="relative inline-block w-10 mr-4 align-top select-none">
+          <label className="cursor-pointer">
+            <div
+              className={`toggle-label flex items-center overflow-hidden h-7 rounded-full 
+              border-2 border-black rounded-b-full border-b-4 px-6 shadow-black shadow-small 
+              transition-all duration-400 ease-in-out ${
+                checked ? "bg-green-200 " : "bg-red-200 "
+              }`}
+            >
+              <input
+                id={id}
+                name={name}
+                defaultChecked={checked}
+                type="checkbox"
+                onChange={onChange}
+                className={`toggle-checkbox absolute block w-3 h-3 rounded-full appearance-none cursor-pointer 
+                transition-all duration-400 ease-in-out bg-black ${
+                  checked ? "left-8" : "left-2"
+                }`}
+              />
+            </div>
+          </label>
+        </div>
+      </div>
+    );
+  }
   return (
     <input
       name={name}

web/app/components/Validations/Configurations/Configurations.tsx

@@ -1,14 +1,20 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Button } from "~/components/Button";
-import { IProtocolParam } from "~/interfaces";
-import { Tabs } from "./Tabs";
+import { IProtocolParam, TabNames, TabType } from "~/interfaces";
+import { ContextTab } from "./ContextTab";
+import { UITab } from "./UITab";
 
 interface ConfigsModalProps {
   closeModal: () => void;
   latestParams: IProtocolParam[] | undefined;
 }
 
 export function ConfigsModal({ closeModal, latestParams }: ConfigsModalProps) {
+  const tabs: TabType[] = [TabNames.Context, TabNames.UI_Options];
+  const [selected, setSelected] = useState<TabType>(TabNames.Context);
+
+  const changeSelected = (tab: TabType) => () => setSelected(tab);
+
   // To close config modal on esc press
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -35,10 +41,42 @@ export function ConfigsModal({ closeModal, latestParams }: ConfigsModalProps) {
           >
             +
           </button>
-          <Tabs latestParams={latestParams} />
+          <div className="flex flex-col mt-5 justify-center">
+            <div className="flex gap-3 justify-center">
+              {tabs.map((tab) => (
+                <Button
+                  key={tab}
+                  onClick={changeSelected(tab as TabType)}
+                  className={`hover:text-black ${
+                    selected === tab
+                      ? "focus:bg-blue-400 bg-blue-400"
+                      : "bg-white hover:bg-blue-200"
+                  }`}
+                >
+                  {tab}
+                </Button>
+              ))}
+            </div>
+            <div className="mt-4 p-8 border-2 border-black rounded-2xl shadow">
+              <div
+                className={`${
+                  selected == TabNames.Context ? "block" : "hidden"
+                }`}
+              >
+                <ContextTab latestParams={latestParams} />
+              </div>
+
+              <div
+                className={`${
+                  selected == TabNames.UI_Options ? "block" : "hidden"
+                }`}
+              >
+                <UITab />
+              </div>
+            </div>
+          </div>
           <div className="flex gap-3 h-full justify-center">
             <Button
-              type="button"
               color="pink"
               className="hover:bg-pink-400 mt-3"
               onClick={closeModal}

web/app/components/Validations/Configurations/ContextTab.tsx

@@ -75,7 +75,6 @@ export const ContextTab = ({
           {networks.map((net) => (
             <Button
               key={net}
-              type="button"
               onClick={changeNetwork(net as NetworkType)}
               color="pink"
               className={`${
@@ -100,7 +99,6 @@ export const ContextTab = ({
           {eras.map((era) => (
             <Button
               key={era}
-              type="button"
               onClick={changeEra(era as EraType)}
               color="pink"
               className={`
@@ -129,7 +127,7 @@ export const ContextTab = ({
       <div className="flex items-center justify-between">
         <div className="text-left text-3xl mb-3">Protocol Parameters</div>
 
-        <Button type="button" onClick={setLatestParams}>
+        <Button onClick={setLatestParams}>
           Get latest Protocol Parameters
         </Button>
       </div>

web/app/components/Validations/Configurations/UITab.tsx

@@ -1,5 +1,6 @@
 import { useLocation, useNavigate } from "@remix-run/react";
 import { useContext } from "react";
+import { Input } from "~/components/Input";
 import { ValidationsContext } from "~/contexts/validations.context";
 import { SearchParams } from "~/utils";
 
@@ -51,92 +52,37 @@ export const UITab = () => {
       <div className="text-left text-3xl mb-3">Select validations to show</div>
       {validations.map((validation, index, arr) => (
         <div key={validation.name}>
-          <div className="w-full text-left flex justify-between p-2">
-            <label htmlFor={validation.name} className="text-xl select-none">
-              {validation.name}
-            </label>
-            <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 ${
-                  shownValidations.includes(validation.name)
-                    ? "bg-green-200 "
-                    : "bg-red-200 "
-                }`}
-              >
-                <input
-                  id={validation.name}
-                  name={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-8"
-                      : "left-2"
-                  } `}
-                />
-              </div>
-            </div>
-          </div>
+          <Input
+            name={validation.name}
+            id={validation.name}
+            label={validation.name}
+            isCheckbox
+            checked={shownValidations.includes(validation.name)}
+            onChange={changeValidations(validation.name)}
+          />
           {index !== arr.length - 1 && <hr />}
         </div>
       ))}
       <hr className="border-2 border-black my-4" />
       <div>
         <div className="text-left text-3xl mt-3">Others</div>
 
-        <div className="w-full text-left flex justify-between p-2">
-          <label htmlFor={"alwaysOpen"} className="text-xl">
-            Validations section always open
-          </label>
-          <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>
-          <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>
+        <Input
+          name={"alwaysOpen"}
+          id={"alwaysOpen"}
+          label={"Validations section always open"}
+          isCheckbox
+          checked={initialOpen}
+          onChange={changeQuery(SearchParams.OPEN)}
+        />
+        <Input
+          name={"beginning"}
+          id={"beginning"}
+          label={"Show at beginning"}
+          isCheckbox
+          checked={beginning}
+          onChange={changeQuery(SearchParams.BEGINNING)}
+        />
       </div>
     </div>
   );

web/app/routes/tx.tsx

@@ -23,6 +23,7 @@ import {
   exampleCbor,
   formDataToContext,
   initialProtPps,
+  logCuriosity,
   paramsParser,
 } from "~/utils";
 import SettingsIcon from "../../public/settings.svg";
@@ -151,7 +152,7 @@ export default function Index() {
     }
   }, [initData, context.selectedNetwork]);
 
-  // if (data) logCuriosity(data);
+  if (data) logCuriosity(data);
 
   const era: EraType = data?.era || Eras.Babbage;
 
@@ -179,7 +180,6 @@ export default function Index() {
           />
           <div className="flex flex-row justify-end mt-4 gap-3">
             <Button
-              type="button"
               onClick={handleModal}
               color="pink"
               className="hover:bg-pink-400"